展示

src/main/nine-space/src/components/product/ProductBanner.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="detail-top">
+        <img src="../../assets/png-bg-shangping.png" class="bg-img" />
+
+        <div class="detail-info">
+            <swiper pagination class="mySwiper" v-if="banners.length > 0">
+                <swiper-slide v-for="(item, index) in banners" :key="index">
+                    <!-- <img :src="item" /> -->
+
+                    <video
+                        class="swiper-video"
+                        v-if="isVideo(item)"
+                        :src="item.url"
+                        :poster="getImg(changeImgs([item]), '', 1200)"
+                        controls="controls"
+                    >
+                        您的浏览器不支持 video 标签。
+                    </video>
+                    <van-image
+                        v-else
+                        @click="preview(index, changeImgs(banners))"
+                        :src="getImg(item.url, '', 1200)"
+                        width="calc(100vw - 134px)"
+                        height="calc(100vw - 134px)"
+                        fit="scale-down"
+                    />
+                </swiper-slide>
+            </swiper>
+
+            <div class="share-content">
+                <like-button v-if="pageType == 'product'" :isLike="info.liked" @click="likeProduct">
+                    {{ info.likes }}
+                </like-button>
+
+                <div class="share-icon" :class="{ shareLeft: pageType === 'product' }" @click="share" v-if="isShare">
+                    <img src="../../assets/svgs/icon-fenxiang.svg" alt="" />
+                    <span>分享</span>
+                </div>
+            </div>
+        </div>
+
+        <post ref="post" :info="info" noButton :pageUrl="pageUrl" />
+    </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 product from '../../mixins/product';
+import Post from '../Post.vue';
+import { ImagePreview } from 'vant';
+SwiperCore.use([Pagination]);
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        pageType: {
+            type: String,
+            default: 'product'
+        }
+    },
+    mixins: [product],
+    components: {
+        Swiper,
+        SwiperSlide,
+        Post
+    },
+    computed: {
+        banners() {
+            return this.info.pic || [];
+        },
+        pageUrl() {
+            if (this.pageType === 'product') {
+                return 'productDetail';
+            } else {
+                return 'assetDetail';
+            }
+        },
+        isShare() {
+            return (
+                this.pageType === 'product' ||
+                (this.info.status === 'NORMAL' && (this.info.publicShow || this.info.consignment))
+            );
+        }
+    },
+    methods: {
+        share() {
+            this.$refs.post.init();
+        },
+        preview(index = 0, list = []) {
+            ImagePreview({
+                images: [...list],
+                startPosition: index
+            });
+        },
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('getProduct');
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('getProduct');
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@radius: 30px;
+.detail-top {
+    position: relative;
+    .detail-info {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding-bottom: 50px;
+    }
+    .bg-img {
+        display: block;
+        width: 100vw;
+    }
+    .mySwiper {
+        border-radius: @radius;
+        border: 2px solid #ffffff;
+        .detail-animate();
+        .swiper-slide {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            /deep/ .van-image {
+                border: 2px solid #2f2f2f;
+                border-radius: @radius;
+                overflow: hidden;
+                background-color: @bg;
+            }
+        }
+    }
+}
+
+.share-content {
+    display: flex;
+    margin-top: 20px;
+}
+.share-icon {
+    img {
+        width: 18px;
+        height: 18px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    span {
+        font-size: @font1;
+        color: #949699;
+        line-height: 24px;
+        vertical-align: middle;
+        margin-left: 2px;
+    }
+
+    &.shareLeft {
+        margin-left: 30px;
+    }
+}
+</style>

src/main/nine-space/src/styles/app.less

@@ -130,8 +130,43 @@ input:-webkit-autofill {
 
 .van-tab {
     color: @text3 !important;
+    font-size: @font2;
     &.van-tab--active {
         color: @prim !important;
         font-weight: bold;
     }
+    padding: 0 0 !important;
+    flex-shrink: 0 !important;
+    flex-grow: 0 !important;
+    margin-right: 50px;
+    word-break: keep-all;
 }
+.van-tabs__nav--line.van-tabs__nav--complete {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+    border-top: 1px solid #202122;
+    background-color: transparent;
+}
+.van-tabs__line {
+    bottom: 20px;
+}
+.van-sticky--fixed {
+    background-color: @bg;
+}
+.van-tab--active {
+    .tab {
+        .van-icon-arrow-up {
+            color: #646566;
+        }
+    }
+    &.asc {
+        .tab {
+            .van-icon-arrow-up {
+                color: @prim;
+            }
+            .van-icon-arrow-down {
+                color: #646566;
+            }
+        }
+    }
+}

src/main/nine-space/src/views/Discover.vue

@@ -378,11 +378,6 @@ export default {
         color: @prim;
     }
 }
-
-/deep/ .van-tabs__line {
-    bottom: 20px;
-}
-
 .casting {
     padding-bottom: 10px;
 }

src/main/nine-space/src/views/Store.vue

@@ -314,53 +314,6 @@ export default {
     min-height: 100vh;
     box-sizing: border-box;
 }
-
-/deep/ .mySwiper {
-    width: calc(100vw - 32px);
-    height: calc(41vw - 13px);
-
-    .swiper-pagination {
-        bottom: 12px;
-    }
-
-    .swiper-pagination-bullet {
-        width: 6px;
-        height: 2px;
-        border-radius: 1px;
-        background: #d7d7d7;
-    }
-
-    .swiper-pagination-bullet-active {
-        background: @prim;
-    }
-}
-
-.swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-}
-
-.swiper-slide img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 4px;
-}
 .grid-img {
     display: block;
 }
@@ -390,61 +343,7 @@ export default {
     padding: 8px 8px 100px;
 }
 
-.tab {
-    position: relative;
-    padding-right: 14px;
-    .van-icon {
-        position: absolute;
-        right: 0;
-
-        &.van-icon-arrow-down {
-            top: 8px;
-        }
-
-        &.van-icon-arrow-up {
-            bottom: 8px;
-        }
-    }
-}
-
-/deep/.van-tab {
-    color: #fff;
-    flex-grow: 0;
-    padding: 0 0 0 0;
-    margin-right: 30px;
-    position: relative;
-
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-/deep/.van-tabs__nav {
-    padding-left: 16px;
-}
-
-/deep/ .van-tabs__line {
-    bottom: 20px;
-}
-
-/deep/.van-action-sheet__description::after {
-    border-bottom: 1px solid #f2f2f2;
-}
-
-/deep/.van-tab--active {
-    .tab {
-        .van-icon-arrow-up {
-            color: #646566;
-        }
-    }
-    &.asc {
-        .tab {
-            .van-icon-arrow-up {
-                color: @prim;
-            }
-            .van-icon-arrow-down {
-                color: #646566;
-            }
-        }
-    }
+.van-tabs {
+    background-color: @bg;
 }
 </style>

src/main/nine-space/src/views/asset/Detail.vue

@@ -1,71 +1,6 @@
 <template>
     <div class="detail">
-        <!-- <swiper pagination class="mySwiper" v-if="banners.length > 0">
-            <swiper-slide v-for="(item, index) in banners" :key="index">
-                <video
-                    class="swiper-video"
-                    v-if="isVideo(item)"
-                    :src="item.url"
-                    :poster="getImg(changeImgs([item]))"
-                    controls="controls"
-                >
-                    您的浏览器不支持 video 标签。
-                </video>
-                <van-image
-                    v-else
-                    @click="preview(index, changeImgs(banners))"
-                    :src="item.url"
-                    width="100vw"
-                    height="100vw"
-                    fit="scale-down"
-                />
-            </swiper-slide>
-        </swiper> -->
-
-        <div class="detail-top">
-            <img src="../../assets/png-bg-shangping.png" class="bg-img" />
-
-            <div class="detail-info">
-                <swiper pagination class="mySwiper" v-if="banners.length > 0">
-                    <swiper-slide v-for="(item, index) in banners" :key="index">
-                        <!-- <img :src="item" /> -->
-
-                        <video
-                            class="swiper-video"
-                            v-if="isVideo(item)"
-                            :src="item.url"
-                            :poster="getImg(changeImgs([item]), '', 1200)"
-                            controls="controls"
-                        >
-                            您的浏览器不支持 video 标签。
-                        </video>
-                        <van-image
-                            v-else
-                            @click="preview(index, changeImgs(banners))"
-                            :src="getImg(item.url, '', 1200)"
-                            width="calc(100vw - 134px)"
-                            height="calc(100vw - 134px)"
-                            fit="scale-down"
-                        />
-                    </swiper-slide>
-                </swiper>
-
-                <div class="share-content">
-                    <!-- <like-button :isLike="info.liked" @click="likeProduct">
-                        {{ info.likes }}
-                    </like-button> -->
-
-                    <div
-                        class="share-icon"
-                        @click="share"
-                        v-if="info.status === 'NORMAL' && (info.publicShow || info.consignment)"
-                    >
-                        <img src="../../assets/svgs/icon-fenxiang.svg" alt="" />
-                        <span>分享</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <product-banner :info="info" pageType="asset"></product-banner>
 
         <div class="info">
             <div class="info-title">
@@ -383,37 +318,24 @@
                 </div>
             </van-popup>
         </div>
-
-        <post ref="post" :info="info" noButton pageUrl="assetDetail" />
     </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 asset from '../../mixins/asset';
 import product from '../../mixins/product';
 import { mapState } from 'vuex';
 import { ImagePreview } from 'vant';
-import Vue from 'vue';
 import { Dialog } from 'vant';
 import HashCode from '../../components/product/HashCode.vue';
 import ProductTitle from '../../components/product/ProductTitle.vue';
-// install Swiper modules
-SwiperCore.use([Pagination]);
+import ProductBanner from '../../components/product/ProductBanner.vue';
 
 export default {
     components: {
-        Swiper,
-        SwiperSlide,
-        Post,
         HashCode,
-        ProductTitle
+        ProductTitle,
+        ProductBanner
     },
 
     mixins: [asset, product],
@@ -459,9 +381,6 @@ export default {
         }, 1000);
     },
     methods: {
-        share() {
-            this.$refs.post.init();
-        },
         allFn() {
             this.show = false;
             this.getProduct();
@@ -639,7 +558,6 @@ export default {
                     });
             }
         },
-
         preview(index = 0, list = []) {
             ImagePreview({
                 images: [...list],
@@ -916,35 +834,6 @@ export default {
     }
 }
 
-/deep/ .mySwiper {
-    width: calc(100vw - 120px);
-    height: calc(100vw - 120px);
-    z-index: 1;
-    .detail-animate();
-
-    .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;
-    }
-}
 /deep/ .van-popup {
     width: 228px;
     background: #ffffff;

src/main/nine-space/src/views/creator/Detail.vue

@@ -6,6 +6,7 @@
                 <div class="userInfo-top">
                     <van-image
                         round
+                        :class="{ rank: rankInfo.img1 }"
                         width="70"
                         height="70"
                         :src="info.avatar || require('../../assets/svgs/img_default_photo.svg')"
@@ -27,7 +28,7 @@
                 </div>
 
                 <div class="sub">
-                    {{ info.intro || '该铸造者什么都没留下~' }}
+                    {{ info.intro || '他还没有介绍哦～' }}
                 </div>
 
                 <div class="btns">
@@ -77,9 +78,9 @@
                 </div>
             </div>
 
-            <van-tabs v-model:active="salable" @change="getList" line-width="16" line-height="2">
+            <van-tabs v-model:active="salable" :ellipsis="false" @change="getList" line-width="16" line-height="2">
                 <van-tab title="全部" name=""></van-tab>
-                <van-tab title="售卖" :name="true"></van-tab>
+                <van-tab title="寄售" :name="true"></van-tab>
             </van-tabs>
         </van-sticky>
         <div class="list">
@@ -245,7 +246,7 @@ export default {
     padding: 0 16px;
     z-index: 2;
     position: relative;
-    transform: translateY(-16px);
+    transform: translateY(-14px);
     .sub {
         font-size: 14px;
         color: @text3;
@@ -257,6 +258,8 @@ export default {
         display: flex;
         // padding-bottom: 16px;
         align-items: center;
+        transform: translateY(14px);
+        padding-bottom: 6px;
         .collect {
             width: 20%;
             display: flex;
@@ -306,12 +309,16 @@ export default {
 
 .userInfo-top {
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     position: relative;
     transform: translateX(-5px);
     .van-image {
         border: 5px solid @bg;
         flex-shrink: 0;
+
+        &.rank {
+            border-color: transparent;
+        }
     }
 
     .rank-icon {
@@ -346,7 +353,7 @@ export default {
             line-height: 24px;
             display: flex;
             align-items: center;
-            margin-top: 6px;
+            margin-bottom: 12px;
             img {
                 display: block;
                 margin-left: 6px;
@@ -359,8 +366,8 @@ export default {
     height: 50px;
     align-items: center;
     padding: 0 16px;
-    border-bottom: 1px solid #202122;
-    background-color: @bg3;
+    // border-bottom: 1px solid #202122;
+    background-color: transparent;
     .menu-item {
         font-size: 16px;
         color: @text3;
@@ -372,16 +379,6 @@ export default {
         }
     }
 }
-/deep/ .van-tabs {
-    .van-tabs__nav {
-        background-color: #0f0f0f;
-    }
-    .van-tab {
-        flex-grow: 0;
-        flex-shrink: 0;
-        min-width: 70px;
-    }
-}
 
 .list {
     padding: 8px 8px 100px;

src/main/nine-space/src/views/creator/List.vue

@@ -109,12 +109,6 @@ export default {
         top: 13px;
     }
 }
-
-// /deep/.van-tab {
-// flex-grow: 0;
-// padding: 0 0 0 0;
-// margin-right: 50px;
-
 .tab {
     position: relative;
     padding-right: 14px;
@@ -131,39 +125,8 @@ export default {
         }
     }
 }
-/deep/.van-tab {
-    color: #fff;
-    flex-grow: 0;
-    padding: 0 0 0 0;
-    margin-right: 30px;
-    position: relative;
 
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-/deep/.van-tabs__nav {
-    padding-left: 16px;
-}
-/deep/ .van-tabs__line {
-    bottom: 20px;
-}
-
-/deep/.van-tab--active {
-    .tab {
-        .van-icon-arrow-up {
-            color: #646566;
-        }
-    }
-    &.asc {
-        .tab {
-            .van-icon-arrow-up {
-                color: @prim;
-            }
-            .van-icon-arrow-down {
-                color: #646566;
-            }
-        }
-    }
+.van-tabs {
+    background-color: @bg;
 }
 </style>

src/main/nine-space/src/views/order/Orders.vue

@@ -117,7 +117,6 @@ export default {
     display: flex;
     padding: 10px 16px;
     background-color: @bg;
-    border-bottom: 1px solid #202122;
     .top-btn {
         flex-grow: 1;
         .btn {
@@ -181,23 +180,7 @@ export default {
 .discover {
     padding-bottom: 50px;
 }
-/deep/.van-tabs__nav--line.van-tabs__nav--complete {
-    padding-left: 16px;
-    padding-right: 16px;
-}
-/deep/.van-tab {
-    color: #fff;
-    flex-grow: 0;
-    padding: 20px 0;
-    flex-shrink: 0;
-    margin-right: 50px;
-
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-
-/deep/ .van-tabs__line {
-    bottom: 20px;
+.van-tabs {
+    background-color: @bg;
 }
 </style>

src/main/nine-space/src/views/product/Detail.vue

@@ -1,45 +1,6 @@
 <template>
     <div class="detail">
-        <div class="detail-top">
-            <img src="../../assets/png-bg-shangping.png" class="bg-img" />
-
-            <div class="detail-info">
-                <swiper pagination class="mySwiper" v-if="banners.length > 0">
-                    <swiper-slide v-for="(item, index) in banners" :key="index">
-                        <!-- <img :src="item" /> -->
-
-                        <video
-                            class="swiper-video"
-                            v-if="isVideo(item)"
-                            :src="item.url"
-                            :poster="getImg(changeImgs([item]), '', 1200)"
-                            controls="controls"
-                        >
-                            您的浏览器不支持 video 标签。
-                        </video>
-                        <van-image
-                            v-else
-                            @click="preview(index, changeImgs(banners))"
-                            :src="getImg(item.url, '', 1200)"
-                            width="calc(100vw - 134px)"
-                            height="calc(100vw - 134px)"
-                            fit="scale-down"
-                        />
-                    </swiper-slide>
-                </swiper>
-
-                <div class="share-content">
-                    <like-button :isLike="info.liked" @click="likeProduct">
-                        {{ info.likes }}
-                    </like-button>
-
-                    <div class="share-icon" @click="share">
-                        <img src="../../assets/svgs/icon-fenxiang.svg" alt="" />
-                        <span>分享</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <product-banner :info="info" @getProduct="getProduct"></product-banner>
 
         <div class="info">
             <div class="info-title">
@@ -274,28 +235,17 @@
 </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';
 import HashCode from '../../components/product/HashCode.vue';
 import ProductTitle from '../../components/product/ProductTitle.vue';
+import ProductBanner from '../../components/product/ProductBanner.vue';
 
 export default {
     components: {
-        Swiper,
-        SwiperSlide,
-        Post,
         HashCode,
-        ProductTitle
+        ProductTitle,
+        ProductBanner
     },
     mixins: [product],
     data() {
@@ -422,19 +372,6 @@ export default {
                     }
                 });
         },
-        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({
@@ -445,9 +382,6 @@ export default {
                     }
                 });
             });
-        },
-        share() {
-            this.$refs.post.init();
         }
     }
 };
@@ -738,34 +672,7 @@ export default {
         color: @text3;
     }
 }
-/deep/ .mySwiper {
-    width: calc(100vw - 120px);
-    height: calc(100vw - 120px);
-    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 0px;
 
@@ -915,109 +822,8 @@ export default {
         border-width: 0px;
     }
 }
-.goods-info {
-    // padding: 0 0 30px;
-}
-.detail-swiper {
-    height: 170px;
-    margin-top: 10px;
-}
-
-.swiper-slide {
-    width: 35.2vw;
-}
-
-/deep/.page-detail {
-    img {
-        display: block;
-        max-width: 100%;
-        height: auto;
-    }
-}
-.swiper-video {
-    width: calc(100vw - 134px);
-    height: calc(100vw - 134px);
-    border: 2px solid #2f2f2f;
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: @bg;
-}
-
-.detail-top {
-    position: relative;
-    .detail-info {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding-bottom: 50px;
-    }
-    .bg-img {
-        display: block;
-        width: 100vw;
-    }
-    .mySwiper {
-        border-radius: 8px;
-        border: 2px solid #ffffff;
-        .detail-animate();
-        .swiper-slide {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            /deep/ .van-image {
-                border: 2px solid #2f2f2f;
-                border-radius: 8px;
-                overflow: hidden;
-                background-color: @bg;
-            }
-        }
-
-        // animation: name duration timing-function delay iteration-count direction fill-mode;
-    }
 
-    .name {
-        font-size: @font4;
-        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: calc(100% - 65px);
-                height: 10px;
-            }
-            &:nth-child(2) {
-                top: 0;
-                left: 0;
-            }
-            &:nth-child(3) {
-                top: -0.8px;
-                left: 45px;
-            }
-            &:nth-child(4) {
-                bottom: 0.5px;
-                right: 45px;
-            }
-            &:nth-child(5) {
-                bottom: 0;
-                right: 0;
-            }
-        }
-    }
-}
 
 .share-content {
     display: flex;
@@ -1047,45 +853,6 @@ export default {
     }
 }
 
-.detail-name {
-    font-size: @font4;
-    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: calc(100% - 65px);
-            height: 10px;
-        }
-        &:nth-child(2) {
-            top: 0;
-            left: 0;
-        }
-        &:nth-child(3) {
-            top: -0.8px;
-            left: 45px;
-        }
-        &:nth-child(4) {
-            bottom: 0.5px;
-            right: 45px;
-        }
-        &:nth-child(5) {
-            bottom: 0;
-            right: 0;
-        }
-    }
-}
 
 .status-text {
     font-size: @font4;

src/main/nine-space/src/views/product/List.vue

@@ -168,39 +168,8 @@ export default {
         }
     }
 }
-/deep/.van-tab {
-    color: #fff;
-    flex-grow: 0;
-    padding: 0 0 0 0;
-    margin-right: 30px;
-    position: relative;
-
-    &.van-tab--active {
-        color: @prim;
-    }
-}
-/deep/.van-tabs__nav {
-    padding-left: 16px;
-}
-/deep/ .van-tabs__line {
-    bottom: 20px;
-}
 
-/deep/.van-tab--active {
-    .tab {
-        .van-icon-arrow-up {
-            color: #646566;
-        }
-    }
-    &.asc {
-        .tab {
-            .van-icon-arrow-up {
-                color: @prim;
-            }
-            .van-icon-arrow-down {
-                color: #646566;
-            }
-        }
-    }
+.van-tabs {
+    background-color: @bg;
 }
 </style>