|
|
@@ -0,0 +1,646 @@
|
|
|
+<template>
|
|
|
+ <div class="detail">
|
|
|
+ <iframe
|
|
|
+ class="banner-frame"
|
|
|
+ style="width: 100vw; height: 100vw"
|
|
|
+ src="https://nfttest.9space.vip/web-canvas/"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ <img src="../../assets/png-bg-shangping.png" alt="" class="bg" />
|
|
|
+
|
|
|
+ <!-- <div class="info">
|
|
|
+ <div class="name" v-if="info.salable">
|
|
|
+ <div class="name1">首发抢购倒计时</div>
|
|
|
+ <div class="name2">{{ startTime }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="price-line" v-if="info.salable">
|
|
|
+ <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
|
|
|
+ <div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
|
|
|
+ <div class="sub" v-if="info.royalties">
|
|
|
+ 含 <span>{{ info.royalties }}%</span> 版税
|
|
|
+ </div>
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <div class="text" v-if="info.salable && info.total > 0">
|
|
|
+ <span>已售 {{ info.sale }}</span>
|
|
|
+ <span>剩余 {{ info.stock }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="title">{{ info.name }}</div>
|
|
|
+ <div class="info-bottom">
|
|
|
+ <span class="text1" v-if="info.type !== 'DEFAULT'"> 编号 338392 </span>
|
|
|
+ <van-button
|
|
|
+ v-if="info.type !== 'DEFAULT'"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ size="mini"
|
|
|
+ >选择其他编号</van-button
|
|
|
+ >
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <like-button :isLike="info.liked" @click="likeProduct">
|
|
|
+ {{ info.likes }}
|
|
|
+ </like-button>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="info">
|
|
|
+ <div class="share-content">
|
|
|
+ <like-button :isLike="info.liked" @click="likeProduct">
|
|
|
+ {{ info.likes }}
|
|
|
+ </like-button>
|
|
|
+
|
|
|
+ <div class="share-icon">
|
|
|
+ <img src="../../assets/icon-fenxiang.png" alt="" />
|
|
|
+ <span>分享</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="name">
|
|
|
+ <span>{{ info.name }}</span>
|
|
|
+ <img src="../../assets/svgs/png-biaotikuang-01.svg" alt="" />
|
|
|
+ <img src="../../assets/svgs/png-biaotikuang-02.svg" alt="" />
|
|
|
+ <img src="../../assets/svgs/png-biaotikuang-03.svg" alt="" />
|
|
|
+ <img src="../../assets/svgs/png-biaotikuang-04.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <driver />
|
|
|
+ <van-cell
|
|
|
+ value="进入主页"
|
|
|
+ is-link
|
|
|
+ class="creator"
|
|
|
+ :to="{
|
|
|
+ path: '/creatorDetail',
|
|
|
+ query: {
|
|
|
+ id: info.minterId
|
|
|
+ }
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <template #icon>
|
|
|
+ <van-image width="40" height="40" :src="info.minterAvatar" fit="cover" radius="100" />
|
|
|
+ </template>
|
|
|
+ <template #title>
|
|
|
+ <div class="text1">{{ info.minter }}</div>
|
|
|
+ <div class="text2">铸造者</div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+
|
|
|
+ <driver />
|
|
|
+
|
|
|
+ <div class="goods">
|
|
|
+ <template v-if="boxs.length > 0">
|
|
|
+ <div class="page-title">盲盒详情</div>
|
|
|
+ <swiper :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
|
|
|
+ <swiper-slide v-for="(item, index) in boxs" :key="index">
|
|
|
+ <van-image
|
|
|
+ width="100%"
|
|
|
+ height="170"
|
|
|
+ :src="getImg(item, '', 1000)"
|
|
|
+ fit="cover"
|
|
|
+ radius="12"
|
|
|
+ @click="preview(index, boxs)"
|
|
|
+ />
|
|
|
+ </swiper-slide>
|
|
|
+ </swiper>
|
|
|
+ </template>
|
|
|
+ <template v-if="properties.length > 0">
|
|
|
+ <div class="page-title">商品特性</div>
|
|
|
+ <div class="specific-list">
|
|
|
+ <div class="specific-item" v-for="(item, index) in properties" :key="index">
|
|
|
+ <div class="text1">{{ item.name }}</div>
|
|
|
+ <div class="text2">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="info.detail">
|
|
|
+ <div class="page-title">作品描述</div>
|
|
|
+ <div class="page-text page-detail" v-html="info.detail"></div
|
|
|
+ ></template>
|
|
|
+ </div>
|
|
|
+ <div class="btn van-safe-area-bottom" v-if="info.isAppointment">
|
|
|
+ <div class="btns">
|
|
|
+ <van-button @click="appointment" type="primary" block round>
|
|
|
+ {{ info.appointment ? '已预约' : '一键预约' }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
|
|
|
+ <div class="btns">
|
|
|
+ <van-button type="primary" block round @click="buy">立即购买</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <driver /> -->
|
|
|
+
|
|
|
+ <!-- <van-collapse v-model="activeName" accordion>
|
|
|
+ <van-collapse-item title="交易记录" name="1">
|
|
|
+ <van-cell title="单元格" value="内容"> </van-cell>
|
|
|
+ </van-collapse-item>
|
|
|
+ </van-collapse> -->
|
|
|
+
|
|
|
+ <driver />
|
|
|
+
|
|
|
+ <post :info="info" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
|
+
|
|
|
+import 'swiper/swiper.min.css';
|
|
|
+import 'swiper/swiper-bundle.min.css';
|
|
|
+
|
|
|
+import SwiperCore, { Pagination } from 'swiper';
|
|
|
+import Post from '../../components/Post.vue';
|
|
|
+import { ImagePreview } from 'vant';
|
|
|
+
|
|
|
+// install Swiper modules
|
|
|
+SwiperCore.use([Pagination]);
|
|
|
+import product from '../../mixins/product';
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ Post
|
|
|
+ },
|
|
|
+ mixins: [product],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeName: '1',
|
|
|
+ info: {},
|
|
|
+ liked: false,
|
|
|
+ btn: null,
|
|
|
+ blindBoxItems: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ banners() {
|
|
|
+ return this.info.pic || [];
|
|
|
+ },
|
|
|
+ properties() {
|
|
|
+ return this.info.properties || [];
|
|
|
+ },
|
|
|
+ isBuy() {
|
|
|
+ return this.info.stock && this.info.onShelf && this.info.salable;
|
|
|
+ },
|
|
|
+ boxs() {
|
|
|
+ let list = [...this.blindBoxItems];
|
|
|
+ return list.map(item => {
|
|
|
+ return this.changeImgs(item.pic);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getProduct();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ preview(index = 0, list = []) {
|
|
|
+ ImagePreview({
|
|
|
+ images: [...list].map(item => {
|
|
|
+ return item;
|
|
|
+ }),
|
|
|
+ startPosition: index
|
|
|
+ });
|
|
|
+ },
|
|
|
+ appointment() {
|
|
|
+ this.$http
|
|
|
+ .post('/collection/appointment?id=' + this.info.id)
|
|
|
+ .then(res => {
|
|
|
+ this.getProduct();
|
|
|
+ this.$toast.success('预约成功');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e.error) {
|
|
|
+ this.$toast.warning(e.error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getProduct() {
|
|
|
+ this.$toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true
|
|
|
+ });
|
|
|
+ this.$http
|
|
|
+ .get('/collection/get/' + this.$route.query.id)
|
|
|
+ .then(res => {
|
|
|
+ this.info = res;
|
|
|
+ this.getTime(res.startTime);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ if (this.isBuy) {
|
|
|
+ this.btn = this.$refs.btn;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$toast.clear();
|
|
|
+
|
|
|
+ if (res.type === 'BLIND_BOX') {
|
|
|
+ return this.$http.post(
|
|
|
+ '/blindBoxItem/all',
|
|
|
+ {
|
|
|
+ query: {
|
|
|
+ blindBoxId: res.id
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { body: 'json' }
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res) {
|
|
|
+ this.blindBoxItems = res.content;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ likeProduct() {
|
|
|
+ if (!this.info.liked) {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/like`).then(() => {
|
|
|
+ this.getProduct();
|
|
|
+ this.$toast.success('收藏成功');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
|
|
|
+ this.getProduct();
|
|
|
+ this.$toast.success('取消收藏');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ buy() {
|
|
|
+ this.checkLogin().then(() => {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/submit',
|
|
|
+ query: {
|
|
|
+ id: this.$route.query.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.detail {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ // height: 164px;
|
|
|
+ // background-color: @bg;
|
|
|
+ // border-radius: 20px 20px 0 0;
|
|
|
+ // transform: translateY(-16px);
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ // padding: 16px 16px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .name {
|
|
|
+ text-align: center;
|
|
|
+ .name1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .name2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 24px;
|
|
|
+ background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: OSP;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 36px;
|
|
|
+ transform: translateY(3px);
|
|
|
+
|
|
|
+ .font_family {
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-line {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .sub {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #949699;
|
|
|
+ line-height: 16px;
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-sub {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ text-decoration: line-through;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 16px;
|
|
|
+ span {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-bottom {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 4px;
|
|
|
+ height: 24px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #949699;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 24px;
|
|
|
+ background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ border-width: 0px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .like {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.creator {
|
|
|
+ align-items: center;
|
|
|
+ padding: 24px 16px 24px;
|
|
|
+ .van-cell__title {
|
|
|
+ margin-left: 12px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-cell__value {
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.buy {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 52px;
|
|
|
+ background: linear-gradient(135deg, @prim 0%, @warn 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ border-width: 0;
|
|
|
+ color: #000;
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(135deg, darken(@prim, 10%), darken(@warn, 10%));
|
|
|
+ }
|
|
|
+
|
|
|
+ &.used {
|
|
|
+ background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .mySwiper {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .swiper-pagination {
|
|
|
+ bottom: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet {
|
|
|
+ width: 6px;
|
|
|
+ height: 2px;
|
|
|
+ border-radius: 1px;
|
|
|
+ background: #d7d7d7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet-active {
|
|
|
+ background: @prim;
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods {
|
|
|
+ padding: 20px 16px;
|
|
|
+
|
|
|
+ .page-title {
|
|
|
+ &:not(:first-child) {
|
|
|
+ padding-top: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+.specific-list {
|
|
|
+ padding: 16px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.specific-item {
|
|
|
+ width: 94px;
|
|
|
+ height: 62px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: solid 0px transparent;
|
|
|
+ padding: 1px;
|
|
|
+ background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
|
|
|
+ background-origin: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-clip: content-box, border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.page-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 20;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #202122ee;
|
|
|
+ .btns {
|
|
|
+ padding: 6px 42px;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ color: #333230;
|
|
|
+ font-size: 16px;
|
|
|
+ border-width: 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detail-swiper {
|
|
|
+ height: 170px;
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide {
|
|
|
+ width: 35.2vw;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.page-detail {
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.swiper-video {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vw;
|
|
|
+}
|
|
|
+.detail {
|
|
|
+ padding-top: 80px;
|
|
|
+}
|
|
|
+/deep/.banner-frame {
|
|
|
+ body {
|
|
|
+ background-color: @bg!important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.bg {
|
|
|
+ width: 100vw;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.info {
|
|
|
+ position: relative;
|
|
|
+ padding-top: 60px;
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .share-content {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ top: -50px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+ .share-icon {
|
|
|
+ margin-left: 30px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #949699;
|
|
|
+ line-height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 10px 25px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ &:nth-child(2),
|
|
|
+ &:nth-child(5) {
|
|
|
+ width: 45px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(3),
|
|
|
+ &:nth-child(4) {
|
|
|
+ width: 100%;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ top: -1px;
|
|
|
+ left: -1px;
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ bottom: 0.5px;
|
|
|
+ right: -1px;
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
panhui
