斑马

src/components/CollectionList.vue

@@ -112,7 +112,7 @@ export default {
 .current_recommendation_con {
     width: 48%;
     height: 254px;
-    background: #29293f;
+    background: #2C2C2E;
     border-radius: 8px;
     margin-bottom: 16px;
     overflow: hidden;

src/components/PageTitle.vue

@@ -32,5 +32,9 @@ export default {
             font-size: @font1;
         }
     }
+
+    &:active {
+        background-color: #202021;
+    }
 }
 </style>

src/components/product/productLarge.vue

@@ -23,12 +23,12 @@
             <div class="shop_number">
                 <div class="limit">限量</div>
                 <div class="number_of_copies">{{ info.total }}份</div>
-                <div class="collection" v-if="info.category !=''">{{info.category}}</div>
+                <div class="collection" v-if="info.category != ''">{{ info.category }}</div>
             </div>
             <div class="shop_bottom">
                 <div class="shop_bottom_left">
                     <!-- <img :src="getImg(info.minterAvatar)" alt="" class="shop_bottom_left_img" /> -->
-                    <van-image width="18px" height="18px" :radius="18" :src="getImg(info.minterAvatar)" fit="cover"/>
+                    <van-image width="18px" height="18px" :radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
                     <div class="shop_bottom_left_name">{{ info.minter }}</div>
                 </div>
                 <div class="shop_bottom_right">
@@ -107,142 +107,140 @@ export default {
 <style lang="less" scoped>
 .shop_list {
     width: 100%;
-            height: 455px;
-            background: #29293f;
-            border-radius: 20px;
-            margin-bottom: 20px;
-            position: relative;
-            .not_sold_out {
-                width: 136px;
-                height: 24px;
-                background: #ffffff;
-                border-radius: 4px;
-                line-height: 24px;
+    height: 455px;
+    background: #ffffff;
+    border-radius: 20px;
+    margin-bottom: 20px;
+    position: relative;
+    .not_sold_out {
+        width: 136px;
+        height: 24px;
+        background: #ffffff;
+        border-radius: 4px;
+        line-height: 24px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #28b6ff;
+        display: flex;
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        .not_sold_out_img {
+            width: 18px;
+            height: 18px;
+            margin: 3px 3px 0 10px;
+        }
+    }
+    .shop_sold_out {
+        width: 68px;
+        height: 24px;
+        background: #ffffff;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #939599;
+        line-height: 24px;
+        text-align: center;
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        z-index: 99;
+    }
+    .commodity_map {
+        width: 100%;
+        height: 343px;
+        border-radius: 30px;
+    }
+    .shop_title {
+        margin-bottom: 6px;
+        padding: 10px 16px 6px 16px;
+        box-sizing: border-box;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #000000;
+    }
+    .shop_number {
+        padding: 0 16px;
+        box-sizing: border-box;
+        display: flex;
+        .limit {
+            width: 44px;
+            height: 22px;
+            background: #28b6ff;
+            border-radius: 4px 0px 0px 4px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 22px;
+            text-align: center;
+        }
+        .number_of_copies {
+            // width: 96px;
+            padding: 0px 10px;
+            box-sizing: border-box;
+            height: 22px;
+            background: #F5F7FA;
+            border-radius: 0px 4px 4px 0px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #28b6ff;
+            line-height: 22px;
+            text-align: center;
+        }
+        .collection {
+            width: 56px;
+            height: 22px;
+            background: #F5F7FA;
+            border-radius: 4px;
+            font-size: 12px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #28b6ff;
+            margin-left: 10px;
+            line-height: 22px;
+            text-align: center;
+        }
+    }
+    .shop_bottom {
+        padding: 0 16px;
+        margin-top: 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        .shop_bottom_left {
+            display: flex;
+            padding-top: 5px;
+            box-sizing: border-box;
+            .shop_bottom_left_name {
                 font-size: 12px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: #28b6ff;
-                display: flex;
-                position: absolute;
-                top: 16px;
-                left: 16px;
-                .not_sold_out_img {
-                    width: 18px;
-                    height: 18px;
-                    margin: 3px 3px 0 10px;
-                }
+                color: #939599;
+                margin-left: 6px;
             }
-            .shop_sold_out {
-                width: 68px;
-                height: 24px;
-                background: #ffffff;
-                border-radius: 4px;
+        }
+        .shop_bottom_right {
+            display: flex;
+            position: relative;
+            .shop_bottom_right_con {
                 font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #939599;
-                line-height: 24px;
-                text-align: center;
+                font-weight: bold;
+                color: #000000;
                 position: absolute;
-                top: 16px;
-                left: 16px;
-                z-index: 99;
+                bottom: 0px;
+                left: -10px;
             }
-            .commodity_map {
-                width: 100%;
-                height: 343px;
-                border-radius: 30px;
+            .shop_bottom_right_price {
+                font-size: 20px;
+                font-weight: bold;
+                color: #000000;
             }
-            .shop_title {
-                margin-bottom: 6px;
-                padding: 10px 16px 6px 16px;
-                box-sizing: border-box;
-                font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #ffffff;
-            }
-            .shop_number {
-                padding: 0 16px;
-                box-sizing: border-box;
-                display: flex;
-                .limit {
-                    width: 44px;
-                    height: 22px;
-                    background: #28b6ff;
-                    border-radius: 4px 0px 0px 4px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #ffffff;
-                    line-height: 22px;
-                    text-align: center;
-                }
-                .number_of_copies {
-                    // width: 96px;
-                    padding: 0px 10px;
-                    box-sizing: border-box;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 0px 4px 4px 0px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #28b6ff;
-                    line-height: 22px;
-                    text-align: center;
-                }
-                .collection {
-                    width: 56px;
-                    height: 22px;
-                    background: rgba(255, 255, 255, 0.1);
-                    border-radius: 4px;
-                    font-size: 12px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #28b6ff;
-                    margin-left: 10px;
-                    line-height: 22px;
-                    text-align: center;
-                }
-            }
-            .shop_bottom {
-                padding: 0 16px;
-                margin-top: 10px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                .shop_bottom_left {
-                    display: flex;
-                    padding-top: 5px;
-                    box-sizing: border-box;
-                    .shop_bottom_left_name {
-                        font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        color: #939599;
-                        margin-left: 6px;
-                    }
-                }
-                .shop_bottom_right {
-                    display: flex;
-                    position: relative;
-                    .shop_bottom_right_con {
-                        font-size: 12px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #ffffff;
-                        position: absolute;
-                        bottom: 3px;
-                        left: -12px;
-                    }
-                    .shop_bottom_right_price {
-                        font-size: 20px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #ffffff;
-                    }
-                }
-            }    
+        }
+    }
 }
 </style>

src/views/Discover.vue

@@ -11,7 +11,7 @@
     >
         <van-sticky :offset-top="0">
             <div class="search_con">
-                <img src="@assets/01.png" class="logo" alt="">
+                <img src="@assets/01.png" class="logo" alt="" />
                 <div class="search" @click="$router.push('/productSearch')">
                     <img src="@assets/icon-sosuo.png" alt="" class="search_img" />
                     <span class="search_text">搜索你想要的</span>
@@ -27,32 +27,14 @@
                     : ''
             "
         >
-            <!-- 商品展示 -->
-            <div class="commodity_display">
-                <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
-                <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
-                    <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
-                </van-swipe-item>
-            </van-swipe> -->
-                <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
-                    <swiper-slide
-                        class="setting"
-                        v-for="item in commodityDisplayList"
-                        :key="item.id"
-                        style="width: 94px"
-                    >
-                        <van-image width="94px" height="90px" radius="8" :src="getImg(item.pic)" fit="cover" @click="goNext(item)"/>
-                    </swiper-slide>
-                </swiper>
-            </div>
             <!-- banner图展示 -->
             <div class="banner">
                 <div class="banner_con" v-for="(item, index) in bannerList" :key="index" @click="showJump(index)">
-                    <img :src="item.img" alt="" class="banner_con_img" />
                     <div class="banner_con_title">
                         <div class="banner_con_titleone">{{ item.titleone }}</div>
                         <!-- <div class="banner_con_titletwo">{{ item.titletwo }}</div> -->
                     </div>
+                    <img :src="item.img" alt="" class="banner_con_img" />
                 </div>
             </div>
             <div class="content_list">
@@ -108,11 +90,9 @@ import banner from '../mixins/banner';
 export default {
     // name: 'discover',
     // inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
-    mixins: [product,banner],
+    mixins: [product, banner],
     components: {
-        CollectionList,
-        Swiper,
-        SwiperSlide
+        CollectionList
     },
     // components: {
     //     Swiper,
@@ -130,10 +110,10 @@ export default {
                     titleone: '精选推荐'
                     // titletwo: '介绍介绍介绍介绍'
                 },
-                // {
-                //     img: require('@assets/icon-zhanlan.png'),
-                //     titleone: '藏品展览'
-                // }
+                {
+                    img: require('@assets/icon-zhanlan.png'),
+                    titleone: '中展专区'
+                }
             ],
             // 商品展示列表
             commodityDisplayList: [],
@@ -392,15 +372,15 @@ export default {
     height: 100%;
     position: absolute;
 }
-.discover{
-    background: #0f0f27;
+.discover {
+    background: #202021;
 }
 .search_con {
     padding: 12px 16px 24px 16px;
     box-sizing: border-box;
     background: #0f0f27;
     .flex();
-    .logo{
+    .logo {
         width: 49px;
         height: 24px;
         margin-right: 12px;
@@ -408,8 +388,9 @@ export default {
     .search {
         flex-grow: 1;
         height: 32px;
-        background: #29293f;
-        border-radius: 4px;
+        background: #2c2c2e;
+
+        border-radius: 16px;
         padding: 5px 0 4px 33px;
         box-sizing: border-box;
         position: relative;
@@ -482,23 +463,27 @@ export default {
         justify-content: space-between;
         margin-bottom: 16px;
         .banner_con {
-            width: 48%;
+            width: calc(50vw - 24px);
             height: 74px;
             border-radius: 8px;
-            padding: 10px 0px 8px 8px;
+            padding: 10px 12px;
             display: flex;
             box-sizing: border-box;
+            justify-content: space-between;
+            position: relative;
+            overflow: hidden;
             .banner_con_img {
                 width: 56px;
                 height: 56px;
-                margin-right: 4px;
+                z-index: 2;
             }
             .banner_con_title {
                 padding-top: 14px;
+                z-index: 2;
                 .banner_con_titleone {
                     font-size: 16px;
-                    font-family: PingFangSC-Semibold, PingFang SC;
-                    font-weight: 600;
+                    font-weight: bold;
+                    line-height: 24px;
                     color: #ffffff;
                 }
                 .banner_con_titletwo {
@@ -508,13 +493,39 @@ export default {
                     color: rgba(245, 247, 250, 0.8);
                 }
             }
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 1px;
+                left: 1px;
+                right: 1px;
+                bottom: 1px;
+                z-index: 1;
+                background-color: #202021;
+                border-radius: 8px;
+            }
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: 0;
+            }
         }
     }
     .banner_con:first-child {
-        background: linear-gradient(134deg, #597cfa 0%, #57b7ff 100%);
+        &::after {
+            background: linear-gradient(134deg, rgba(255, 222, 124, 1), rgba(255, 150, 150, 1));
+        }
     }
     .banner_con:last-child {
-        background: linear-gradient(134deg, #28b6ff 0%, #597ffa 100%);
+        &::after {
+            background: linear-gradient(135deg, rgba(34, 255, 248, 1), rgba(151, 150, 255, 1));
+        }
     }
     .hotCollection {
         margin-bottom: 50px;

src/views/Home.vue

@@ -7,6 +7,22 @@
         @refresh="onRefresh"
     >
         <div class="home">
+            <div class="welcom">
+                <div class="left">
+                    <div class="text1">WELCOME</div>
+                    <div class="text2" :class="{ text3: isLogin }">
+                        {{ isLogin ? `${userInfo.nickname}!` : '探索者!' }}
+                    </div>
+                </div>
+                <van-image
+                    width="38"
+                    height="38"
+                    :radius="32"
+                    :src="isLogin ? userInfo.avatar : require('@assets/png-moren-touxiang.png')"
+                    fit="cover"
+                />
+            </div>
+
             <div class="contect" :class="shopList.length < 2 ? 'shop_list_one' : ''">
                 <!-- 首页轮播 -->
                 <van-swipe class="swipe_banner" :autoplay="3000" indicator-color="#ffffff">
@@ -120,6 +136,7 @@
 import product from '../mixins/product';
 import ProductLarge from '../components/product/productLarge.vue';
 import banner from '../mixins/banner';
+import { mapState } from 'vuex';
 // import ProductSmall from '../components/product/productSmall.vue';
 export default {
     data() {
@@ -133,6 +150,9 @@ export default {
             isLoading: true
         };
     },
+    computed: {
+        ...mapState(['userInfo'])
+    },
     mixins: [product, banner],
     components: {
         ProductLarge
@@ -388,13 +408,13 @@ export default {
 
 <style lang="less" scoped>
 .home_refresh {
-    background: #0f0f27;
+    background: #f5f7fa;
 }
 .home {
     .contect {
         width: 100%;
         height: 100%;
-        background-color: #0f0f27;
+        background-color: #f5f7fa;
         padding: 16px;
         box-sizing: border-box;
         .swipe_banner {
@@ -437,4 +457,32 @@ export default {
         position: absolute;
     }
 }
+
+.welcom {
+    .flex();
+    align-items: flex-end;
+    padding: 12px 16px 0;
+    .left {
+        flex-grow: 1;
+        .text1 {
+            font-size: 12px;
+            font-weight: bold;
+            color: #939599;
+            line-height: 24px;
+        }
+        .text2 {
+            font-size: 24px;
+            font-weight: bold;
+            color: @text0;
+            line-height: 32px;
+            letter-spacing: 2px;
+
+            &.text3 {
+                letter-spacing: 0px;
+                font-weight: normal;
+                font-family: SourceHanSans-Medium;
+            }
+        }
+    }
+}
 </style>

src/views/Index.vue

@@ -2,7 +2,7 @@
     <div class="index">
         <router-view v-slot="{ Component }">
             <keep-alive :include="keeps.value">
-                <component :is="Component"/>
+                <component :is="Component" />
             </keep-alive>
         </router-view>
         <van-tabbar
@@ -10,9 +10,10 @@
             z-index="20"
             safe-area-inset-bottom
             route
-            active-color="#28B6FF"
+            :active-color="active === 'home' ? '#000000' : '#ffffff'"
             inactive-color="#5F646F"
             ref="tabbar"
+            :class="{ light: active === 'home' }"
         >
             <van-tabbar-item replace v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
                 <span>{{ item.title }}</span>
@@ -54,33 +55,45 @@ export default {
                 preIcon: require('@assets/tabbar_icon_04_pre.png')
             }
         ];
-        const active = ref('home');
-        return { active, menus };
+        return { menus };
     },
     inject: ['keeps'],
     name: 'index',
     data() {
         return {
             menu: null,
-            tabColor: ''
+            tabColor: '',
+            active: 'home'
         };
+    },
+    mounted() {
+        let info = [...this.menus].find(item => {
+            return item.name === this.$route.name;
+        });
+        if (info) {
+            this.active = info.name;
+        }
     }
 };
 </script>
 
 <style lang="less" scoped>
-    .container {
-        box-sizing: border-box;
-        flex-grow: 1;
-        background-color: #15152D;
-    }
-    .index {
-        padding-top: 0 !important;
-    }
-    .van-tabbar{
-        background: #15152D;
-    }
-    /deep/ [class*=van-hairline]:after{
-        border: none;
+.container {
+    box-sizing: border-box;
+    flex-grow: 1;
+    background-color: #2c2c2e;
+}
+.index {
+    padding-top: 0 !important;
+}
+.van-tabbar {
+    background: #2c2c2e;
+
+    &.light {
+        background: #ffffff;
     }
+}
+/deep/ [class*='van-hairline']:after {
+    border: none;
+}
 </style>

src/views/Mine.vue

@@ -287,7 +287,7 @@
                         <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                     </div>
                 </div>
-                <div class="display_list_con" @click="this.wait">
+                <!-- <div class="display_list_con" @click="this.wait">
                     <div class="display_list_con_one">
                         <img :src="require('@assets/learn-more.png')" alt="" class="display_list_con_displayIcon" />
                         <div class="display_list_con_title">了解更多</div>
@@ -295,7 +295,7 @@
                     <div class="display_list_con_two">
                         <img :src="require('@assets/icon_inter.png')" alt="" class="display_list_con_listArrow" />
                     </div>
-                </div>
+                </div> -->
                 <div class="display_list_con" @click="this.wait">
                     <div class="display_list_con_one">
                         <img :src="require('@assets/about-us.png')" alt="" class="display_list_con_displayIcon" />
@@ -532,7 +532,7 @@ export default {
     height: calc(100vh);
     // position: absolute;
     // margin-top: 44px;
-    background: #0f0f27;
+    background: #202021;
     position: relative;
     .backgroundImg {
         width: 100%;
@@ -557,7 +557,7 @@ export default {
         .not_logged {
             // width: 100%;
             // height: 80px;
-            background: #29293f;
+            background: #2C2C2E;
             border-radius: 8px;
             padding: 10px;
             margin-bottom: 10px;
@@ -709,7 +709,7 @@ export default {
     .display_list_con {
         width: 100%;
         height: 52px;
-        background: #29293f;
+        background: #2C2C2E;
         border-radius: 8px;
         padding: 12px;
         box-sizing: border-box;

src/views/Store.vue

@@ -181,7 +181,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .load_refresh {
-    background: #0f0f27;
+    background: #202021;
 }
 /deep/ .van-button {
     width: 280px;
@@ -192,16 +192,16 @@ export default {
     height: 100%;
     // margin-top: 44px;
     box-sizing: border-box;
-    background: #0f0f27;
+    background: #202021;
     .explore_content_top {
         padding: 12px 16px 20px;
         box-sizing: border-box;
-        background: #0f0f27;
+        background: #202021;
     }
     .search {
         width: 100%;
         height: 32px;
-        background: #29293f;
+        background: #2C2C2E;
         border-radius: 4px;
         padding: 5px 0 4px 33px;
         margin-bottom: 16px;
@@ -227,7 +227,7 @@ export default {
             // width: 80px;
             flex: 1;
             height: 24px;
-            background: #29293f;
+            background: #2C2C2E;
             border-radius: 4px;
             margin-right: 16px;
             text-align: center;