.

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://www.raex.vip/
+VUE_APP_BASE_URL=https://test.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="scroll-wrapper" id="scroll-wrapper" ref="scroll" @scroll="scrollEvent">
+    <div class="scroll-wrapper" :class="[theme]" id="scroll-wrapper" ref="scroll" @scroll="scrollEvent">
         <app-bar ref="bar"></app-bar>
         <router-view v-slot="{ Component }">
             <keep-alive :include="keeps">
@@ -14,6 +14,7 @@
 import AppBar from './components/AppBar.vue';
 import { computed } from 'vue';
 import PhoneVer from './components/PhoneVer.vue';
+import { mapState } from 'vuex';
 export default {
     components: { AppBar, PhoneVer },
     name: 'App',
@@ -31,6 +32,7 @@ export default {
     },
     inject: ['barHeight'],
     computed: {
+        ...mapState(['theme']),
         barValue() {
             return this.$refs.bar;
         },

src/components/product/productLarge.vue

@@ -142,7 +142,7 @@ export default {
     width: calc(100vw - 32px);
     margin: 8px 16px;
     position: relative;
-    background-color: @bg2;
+    background-color: #373b3e;
     display: inline-block;
     border-radius: 30px;
     overflow: hidden;
@@ -185,7 +185,7 @@ export default {
         .name {
             font-size: @font2;
             font-weight: bold;
-            color: @text0;
+            color: #fff;
             line-height: 24px;
         }
 
@@ -206,9 +206,9 @@ export default {
                 display: inline-block;
                 &.sales-fir {
                     background: @prim;
-                    color: @bg;
+                    color: #000000;
                 }
-                background-color: @bg3;
+                background-color: fade(#3ab200, 16);
                 color: @prim;
             }
         }
@@ -234,7 +234,7 @@ export default {
 
             .price {
                 font-size: @font4;
-                color: @text0;
+                color: #fff;
                 line-height: 20px;
                 font-family: OSP;
                 img {
@@ -263,7 +263,7 @@ export default {
 
 .status {
     font-size: @font2;
-    color: @text0;
+    color: #fff;
 }
 .sold {
     background-color: @bg2;

src/main.js

@@ -30,6 +30,7 @@ import { Toast, Dialog } from 'vant';
 import smoothscroll from 'smoothscroll-polyfill';
 import { useCssVar } from '@vueuse/core';
 import { watch, watchEffect, computed } from 'vue';
+import './styles/theme.less';
 
 smoothscroll.polyfill();
 const appHeight = useCssVar('--app-height', document.documentElement);

src/router/index.js

@@ -76,7 +76,7 @@ const routes = [
             {
                 path: '/discover',
                 name: 'discover',
-                component: () => import('../views/Discover.vue'),
+                component: () => import('../views/product/HopeMarket.vue'),
                 meta: {
                     pageType: Page.Every,
                     menuPage: true

src/store/index.js

@@ -20,7 +20,8 @@ export default createStore({
         showConsole: false,
         bankCard: null,
         showRoomId: null,
-        platform: ''
+        platform: '',
+        theme: 'theme2'
     },
     mutations: {
         setFinished(state, finished) {

src/styles/theme.less

@@ -0,0 +1,6 @@
+.theme2 {
+    @prim: #ffe196;
+    .sales span.sales-fir {
+        background: @prim !important;
+    }
+}

src/views/Home.vue

@@ -17,7 +17,7 @@
             <van-image
                 width="38"
                 height="38"
-                :radius="32"
+                :radius="38"
                 :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
                 :src="isLogin ? userInfo.avatar : require('@assets/img_default_photo.png')"
             ></van-image>
@@ -33,25 +33,16 @@
             <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
             <div class="tab" :class="{ active: active === 1 }" @click="active = 1">产品新闻端</div>
         </div> -->
-
-        <div class="list-top">
-            <van-badge :dot="isNewCollections" :offset="[-35, 15]">
-                <div class="text1" :class="{ active: active === 0 }" @click="changeActive(0)">数字文创</div>
-            </van-badge>
-            <van-badge :dot="isNewNews" :offset="[-35, 15]">
-                <div class="text1" :class="{ active: active === 1 }" @click="changeActive(1)">绿洲头条</div>
-            </van-badge>
+        <div class="listSwiper">
+            <product-large
+                v-for="(item, index) in products"
+                :key="index"
+                v-model:info="products[index].obj"
+                :type="item.type"
+            ></product-large>
         </div>
-
         <swiper class="listSwiper" autoHeight @swiper="setSwiperRef" @slideChange="changeSwiper">
-            <swiper-slide>
-                <product-large
-                    v-for="(item, index) in products"
-                    :key="index"
-                    v-model:info="products[index].obj"
-                    :type="item.type"
-                ></product-large
-            ></swiper-slide>
+            <swiper-slide> </swiper-slide>
             <swiper-slide>
                 <news-small
                     v-for="(item, index) in news"
@@ -466,7 +457,7 @@ export default {
     // background-color: @bg3;
     position: relative;
     z-index: 1;
-    background-color: #f5f7fa;
+    background-color: #272b2e;
     padding-top: var(--safe-top);
 }
 
@@ -511,14 +502,14 @@ export default {
         .text1 {
             font-size: 12px;
             font-weight: bold;
-            color: @text0;
+            color: #939599;
             line-height: 24px;
         }
         .text2 {
-            font-size: 24px;
+            font-size: 20px;
             font-weight: bold;
-            color: @text0;
-            line-height: 32px;
+            color: #ffffff;
+            line-height: 20px;
             letter-spacing: 2px;
 
             &.text3 {

src/views/Index.vue

@@ -12,7 +12,7 @@
             safe-area-inset-bottom
             route
             ref="tabbar"
-            :class="tabClass"
+            class="bgBack"
         >
             <van-tabbar-item replace v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
                 <span>{{ item.title }}</span>

src/views/Mine.vue

@@ -7,15 +7,15 @@
         @refresh="onRefresh"
     >
         <div class="userInfo" v-if="isLogin">
-            <van-image
+            <!-- <van-image
                 width="100%"
                 height="52vw"
                 :src="userInfo.bg ? userInfo.bg + '?r=' + refreshFlag : require('@assets/creatorBg.png')"
                 loading-icon=""
                 fit="cover"
                 class="top-img"
-            />
-            <template v-if="publishShow">
+            /> -->
+            <!-- <template v-if="publishShow">
                 <div class="yinsi" v-if="userInfo.isPublicShow" @click="changeShow(false)">
                     <img src="@assets/icon-kaiqiyinsi.png" alt="" />
                     <span>开启隐私</span>
@@ -24,18 +24,18 @@
                     <img src="@assets/icon-guanbiyinsi.png" alt="" />
                     <span>关闭隐私</span>
                 </div>
-            </template>
+            </template> -->
 
-            <div class="edit-btn" @click="$router.push('/setting')">
+            <!-- <div class="edit-btn" @click="$router.push('/setting')">
                 <img src="../assets/icon-bianji1.png" alt="" />
                 <span>编辑</span>
-            </div>
+            </div> -->
             <div class="userInfo-content">
-                <div class="userInfo-top">
+                <div class="userInfo-top" @click="$router.push('/setting')">
                     <van-image
                         radius="100"
-                        width="150"
-                        height="150"
+                        width="84"
+                        height="84"
                         :src="
                             userInfo.avatar
                                 ? userInfo.avatar + '?r=' + refreshFlag
@@ -43,7 +43,6 @@
                         "
                         fit="cover"
                         :class="{ activeAvatar: isLogin && userInfo.useCollectionPic }"
-                        @click="$router.push('/setting')"
                     />
                     <div class="text">
                         <div class="text1">
@@ -66,9 +65,10 @@
                             <level ref="level"></level>
                         </div>
                     </div>
+                    <img class="inter" src="@assets/icon_inter.png" alt="" />
                 </div>
 
-                <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
+                <!-- <div class="sub" :class="{ 'van-multi-ellipsis--l2': !showMore }">
                     {{ userInfo.intro }}
                 </div>
                 <div class="sub-right" v-if="userInfo && userInfo.intro && userInfo.intro.length > 50">
@@ -78,21 +78,21 @@
                         src="../assets/icon-xialajiantou.png"
                         alt=""
                     />
-                </div>
+                </div> -->
 
                 <div class="btns">
                     <div class="collect" @click="$router.push('/store')">
                         <div class="text1">{{ assetNum }}</div>
-                        <div class="text2">藏品数</div>
-                    </div>
-                    <div class="collect" @click="$router.push('/mineFollows')">
-                        <div class="text1">{{ userInfo.follows }}</div>
-                        <div class="text2">关注</div>
+                        <div class="text2">藏品:</div>
                     </div>
                     <div class="collect" @click="$router.push('/mineFollowers')">
                         <div class="text1">{{ userInfo.followers }}</div>
-                        <div class="text2">粉丝</div>
+                        <div class="text2">粉丝:</div>
                     </div>
+                    <!-- <div class="collect" @click="$router.push('/mineFollows')">
+                        <div class="text1">{{ userInfo.follows }}</div>
+                        <div class="text2">关注:</div>
+                    </div> -->
                 </div>
             </div>
         </div>
@@ -109,117 +109,68 @@
                 <div class="userInfo-top" @click="$router.push('/login')">
                     <van-image
                         round
-                        width="150"
-                        height="150"
+                        width="84"
+                        height="84"
                         :src="require('@assets/img_default_photo.png')"
                         fit="cover"
-                        @click="$router.push('/login')"
                     />
 
                     <div class="text">
-                        <div class="text1" @click="$router.push('/login')">点击登录</div>
+                        <div class="text1">点击登录</div>
                         <div class="text2" style="padding-bottom: 16px">立即登录获取精彩服务</div>
                     </div>
                 </div>
             </div>
         </div>
-        <driver />
         <div class="orderList">
             <div class="order-info" @click="$router.push('/orders?type=DEFAULT')">
                 <img src="@assets/info_icon_yishuping.png" alt="" />
-                <span>艺术品订单</span>
+                <span>我的订单</span>
             </div>
-            <div class="order-info" @click="$router.push('/activityOrders')">
-                <img src="@assets/info_icon_zhuzaodingdan.png" alt="" />
-                <span>铸造订单</span>
+            <div class="order-info" @click="$router.push('/mineWallet')">
+                <img src="@assets/icon_qianbao.png" alt="" />
+                <span>我的钱包</span>
             </div>
-            <div class="order-info" @click="$router.push('/auctionOrders')">
-                <img src="@assets/info_icon_paimaidingdan.png" alt="" />
-                <span>拍卖订单</span>
+            <div class="order-info" @click="wait">
+                <img src="@assets/icon-jifen.png" alt="" />
+                <span>我的积分</span>
             </div>
         </div>
-        <driver />
-        <div class="orderList prim">
-            <div
-                class="menu-info"
-                :style="{ width: $store.state.review ? '100%' : '50%' }"
-                @click="$router.push('/rank')"
-            >
-                <img src="@assets/info_icon_top50.png" alt="" />
-                <span>TOP50&nbsp;探索官</span>
-            </div>
-            <div class="menu-info" @click="share" v-if="!$store.state.review">
-                <van-badge :dot="shareProduct.openQuota" :offset="[-15, 5]">
-                    <img src="@assets/info_icon_yaoqing.png" alt="" />
-                </van-badge>
-                <span>立即邀请</span>
-            </div>
-        </div>
-        <van-grid class="menus">
-            <van-grid-item v-if="enableWallet" text="我的钱包" :to="{ path: '/mineWallet' }">
-                <template #icon>
-                    <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
-                </template>
-            </van-grid-item>
-            <van-grid-item v-else text="我的银行卡" :to="{ path: '/mineBanks' }">
+        <van-cell-group class="menus" :border="false">
+            <van-cell title="我喜欢的" :to="{ path: '/mineLikes' }" is-link>
                 <template #icon>
-                    <van-icon :name="require('@assets/icon_yinhangka.png')" class="search-icon" />
+                    <van-icon :name="require('@assets/icon-woxihuande.png')" class="search-icon" />
                 </template>
-            </van-grid-item>
-            <van-grid-item text="我的积分" @click="wait" v-if="!$store.state.review">
-                <template #icon>
-                    <van-icon :name="require('@assets/icon-jifen.png')" class="search-icon" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="我喜欢的" :to="{ path: '/mineLikes' }">
-                <template #icon>
-                    <van-icon :name="require('@assets/icon-dianzan1.png')" class="search-icon" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="客服留言" :to="{ path: '/message' }" v-if="!$store.state.review">
-                <template #icon>
-                    <van-icon :name="require('@assets/icon_kefuliuyan.png')" class="search-icon" />
-                </template>
-            </van-grid-item>
-            <van-grid-item text="交易历史" :to="{ path: '/mineExchange' }" v-if="!$store.state.review">
+            </van-cell>
+            <van-cell title="交易历史" :to="{ path: '/mineExchange' }" v-if="!$store.state.review" is-link>
                 <template #icon>
                     <van-icon :name="require('@assets/info_icon_jiaoyijilu.png')" class="search-icon" />
                 </template>
-            </van-grid-item>
-            <!-- <van-grid-item text="了解更多" :to="{ path: '/question' }">
+            </van-cell>
+            <van-cell title="客服留言" :to="{ path: '/message' }" v-if="!$store.state.review" is-link>
                 <template #icon>
-                    <van-icon :name="require('@assets/icon_liaojiegengduo.png')" class="search-icon" />
+                    <van-icon :name="require('@assets/icon_kefuliuyan.png')" class="search-icon" />
                 </template>
-            </van-grid-item> -->
-
-            <van-grid-item text="地址管理" :to="{ path: '/mineAddress' }">
+            </van-cell>
+            <van-cell title="账号与安全" :to="{ path: '/security' }" is-link>
                 <template #icon>
-                    <van-icon :name="require('@assets/icon_dizhi.png')" class="search-icon" />
+                    <van-icon :name="require('@assets/icon-anquan.png')" class="search-icon" />
                 </template>
-            </van-grid-item>
-            <van-grid-item text="关于我们" :to="{ path: '/about' }">
+            </van-cell>
+            <van-cell title="关于我们" :border="false" :to="{ path: '/about' }" is-link>
                 <template #icon>
                     <van-icon :name="require('@assets/icon-guanyuwomen.png')" class="search-icon" />
                 </template>
-            </van-grid-item>
-            <van-grid-item text="账号与安全" :to="{ path: '/security' }">
-                <template #icon>
-                    <van-icon :name="require('@assets/icon-anquan.png')" class="search-icon" />
-                </template>
-            </van-grid-item>
-        </van-grid>
+            </van-cell>
+        </van-cell-group>
 
         <div class="tabbar-placeholder"></div>
-        <post ref="post" :info="shareProduct" noButton></post>
-        <tuan-rank></tuan-rank>
     </van-pull-refresh>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import Level from '../components/level/Level.vue';
-import Post from '../components/Post.vue';
-import TuanRank from '../components/TuanRank.vue';
 export default {
     data() {
         return {
@@ -236,7 +187,7 @@ export default {
             publishShow: false
         };
     },
-    components: { Level, Post, TuanRank },
+    components: { Level },
     computed: {
         ...mapState(['userInfo'])
     },
@@ -246,11 +197,6 @@ export default {
     methods: {
         getInit(refresh) {
             if (this.isLogin) {
-                this.$http.get('/sysConfig/get/publishShow').then(res => {
-                    if (res.value === true || res.value === '1') {
-                        this.publishShow = true;
-                    }
-                });
                 this.$http
                     .post(
                         '/asset/all',
@@ -267,15 +213,6 @@ export default {
                     .then(res => {
                         this.assetNum = Number(res.totalElements);
                     });
-
-                this.getProduct();
-                this.$http.get('/sysConfig/get/share_lvzhoushi_num,enable_wallet,enable_face_auth').then(res => {
-                    if (res['share_lvzhoushi_num'] && res['share_lvzhoushi_num'].value) {
-                        this.shareMoney = Number(res['share_lvzhoushi_num'].value);
-                    }
-                    this.enableWallet = res['enable_wallet'].value === '1';
-                    this.faceAuth = res['enable_face_auth'].value === '1';
-                });
             }
 
             if (window.cordova && StatusBar && StatusBar.isVisible) {
@@ -325,36 +262,6 @@ export default {
                     return Promise.resolve();
                 });
         },
-        share() {
-            this.checkLogin().then(() => {
-                this.getProduct()
-                    .then(() => {
-                        return new Promise((resolve, reject) => {
-                            this.$nextTick(() => {
-                                if (this.$refs.level.money <= this.shareMoney) {
-                                    this.$dialog.alert({
-                                        title: '提示',
-                                        message: '绿洲石大于' + this.shareMoney + '的用户才能参加该活动'
-                                    });
-                                    resolve();
-                                } else if (this.shareProduct.openQuota) {
-                                    this.$router.push(
-                                        `/productTasks?id=${this.shareProduct.id}&invitor=${this.$store.state.userInfo.id}`
-                                    );
-                                    resolve();
-                                } else {
-                                    reject('活动藏品分享已关闭');
-                                }
-                            });
-                        });
-                    })
-                    .catch(e => {
-                        if (e) {
-                            this.$toast(e);
-                        }
-                    });
-            });
-        },
         onRefresh() {
             this.refreshFlag++;
             localStorage.setItem('refreshFlag', this.refreshFlag);
@@ -461,6 +368,9 @@ export default {
 }
 .orderList {
     .flex();
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    margin: 0 16px;
     // padding: 0 12px;
     .order-info {
         padding: 16px 0;
@@ -476,16 +386,16 @@ export default {
             width: 132px;
         }
         img {
-            width: 28px;
-            height: 28px;
+            width: 32px;
+            height: 32px;
             // margin-right: 8px;
         }
         span {
             font-size: 14px;
             font-weight: bold;
-            color: #ffffff;
+            color: #939599;
             line-height: 24px;
-            margin-top: 4px;
+            margin-top: 2px;
         }
     }
     .order-info + .order-info {
@@ -612,7 +522,7 @@ export default {
 .search-icon {
     width: 28px;
     height: 28px;
-    // margin-right: 10px;
+    margin-right: 13px;
     display: block;
     /deep/.van-icon__image {
         width: 28px;
@@ -621,10 +531,10 @@ export default {
     }
 }
 .userInfo {
-    padding-top: 52vw;
+    // padding-top: 52vw;
     // border-bottom: 1px solid @bg2;
     position: relative;
-    margin-bottom: -103px;
+    // margin-bottom: -103px;
 
     .top-img {
         position: absolute;
@@ -647,7 +557,6 @@ export default {
     padding: 0 16px;
     z-index: 2;
     position: relative;
-    transform: translateY(-103px);
     .sub {
         font-size: 12px;
         color: @text3;
@@ -683,23 +592,23 @@ export default {
         display: flex;
         // padding-bottom: 16px;
         align-items: center;
+        border-top: 1px solid rgba(255, 255, 255, 0.06);
 
         .collect {
-            width: 33%;
-            .flex-col();
-            align-items: center;
-            padding: 16px 0;
+            width: 50%;
+            .flex();
+            flex-direction: row-reverse;
+            justify-content: center;
+            padding: 12px 0;
             .text1 {
-                font-size: 18px;
-                color: #fff;
+                font-size: 14px;
+                color: #939599;
                 line-height: 24px;
-                font-weight: bold;
             }
             .text2 {
-                font-size: 12px;
-                color: @text3;
-                line-height: 17px;
-                margin-top: 2px;
+                font-size: 14px;
+                color: #939599;
+                line-height: 24px;
             }
         }
     }
@@ -709,7 +618,7 @@ export default {
     align-items: center;
     transform: translateX(-5px);
     position: relative;
-    flex-direction: column;
+    padding: 20px 0 16px;
     .van-image {
         // border: 5px solid @bg;
         flex-shrink: 0;
@@ -721,7 +630,8 @@ export default {
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: flex-start;
+        flex-grow: 1;
         .text1 {
             font-size: 24px;
             font-weight: bold;
@@ -738,12 +648,12 @@ export default {
             // }
         }
         .text2 {
-            font-size: 14px;
+            font-size: 12px;
             color: #949699;
             line-height: 24px;
             display: flex;
             align-items: center;
-            margin-top: 5px;
+            margin-top: 3px;
             img {
                 display: block;
                 margin-left: 6px;
@@ -752,6 +662,7 @@ export default {
 
         .icons {
             .flex();
+            transform: translateX(-16px);
             .auth-imgs {
                 .flex();
                 transform: translateX(15px);
@@ -784,6 +695,11 @@ export default {
         }
     }
 
+    .inter {
+        width: 24px;
+        height: 24px;
+    }
+
     .renzhen-img {
         position: absolute;
         left: 60px;
@@ -793,24 +709,24 @@ export default {
     }
 }
 .menus {
-    // margin: 0 16px;
-    // background-color: @bg;
-    // border-radius: 8px;
-    // overflow: hidden;
-    &.van-grid {
-        margin: 0;
-    }
-
-    /deep/.van-grid-item__text {
-        color: #fff;
-    }
-
-    /deep/.van-grid-item__content:after {
-        border-color: #373b3e;
-    }
-
-    /deep/&.van-hairline--top:after {
-        border-color: #373b3e;
+    margin: 16px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    /deep/ .van-cell {
+        padding: 14px 16px;
+        .van-cell__title {
+            font-size: 14px;
+            color: #ffffff;
+            line-height: 28px;
+        }
+        &::after {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            left: 16px;
+            right: 16px;
+        }
+        .van-cell__right-icon {
+            line-height: 28px;
+        }
     }
 }
 

src/views/Store.vue

@@ -13,14 +13,6 @@
                         <div class="btn" :class="{ active: active === 'explore' }" @click="changeActive('explore')">
                             我拥有的
                         </div>
-                        <div
-                            class="btn"
-                            v-if="showRoom"
-                            :class="{ active: active === 'showRoom' }"
-                            @click="changeActive('showRoom')"
-                        >
-                            我的展馆
-                        </div>
                         <div
                             class="btn"
                             v-if="!$store.state.reviewPay"

src/views/asset/Detail.vue

@@ -424,11 +424,9 @@
 
                 <div class="more-btns-content" v-else>
                     <van-button @click="Consignment" type="primary" block round>{{
-                        info.consignment ? '取消一口价' : '一口价竞拍'
+                        info.consignment ? '取消上架' : '上架'
                     }}</van-button>
-                    <van-button @click="publish" color="#FF7F1F" block round>竞价拍卖</van-button>
                     <van-button @click="Add" color="#FFBF27" block round>赠送</van-button>
-                    <van-button @click="showLock = true" color="#515976" block round>上锁</van-button>
                 </div>
             </van-action-sheet>
         </div>

src/views/product/HopeMarket.vue

@@ -1,9 +1,11 @@
 <template>
     <div class="follow">
         <div ref="top" class="list-top" :style="{ top: barShow ? barHeight + 'px' : 0 }">
-            <div class="top" v-if="!minterId">
-                <div class="name">版权市场</div>
-                <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
+            <div class="top">
+                <div class="search" @click="$router.push('/productSearch')">
+                    <img src="@assets/icon-sosuo.png" alt="" />
+                    <span>搜索你要的精彩</span>
+                </div>
             </div>
             <!-- <div class="swiperContent" ref="swiperContent">
                 <swiper
@@ -70,7 +72,7 @@
                         </template>
                     </van-tab>
                 </van-tabs>
-                <div class="allCategories" @click="categorySelections">
+                <!-- <div class="allCategories" @click="categorySelections">
                     <div class="allCategories_con" :class="categorySelection ? 'allCategories_con_one' : ''">
                         全部类目
                     </div>
@@ -81,7 +83,7 @@
                         v-if="categorySelection == false"
                     />
                     <img src="@assets/icon-quanbuleimuone@3x.png" alt="" class="allCategories_img" v-else />
-                </div>
+                </div> -->
             </div>
             <div class="series_selection" v-if="categorySelection == true">
                 <div
@@ -543,26 +545,27 @@ export default {
     min-height: calc(var(--app-height) - 200px);
 }
 .top {
+    display: flex;
+    padding: 9px 16px;
     background-color: #222426;
-    padding: 0 16px;
-    height: 50px;
     display: flex;
     align-items: center;
-    position: relative;
     z-index: 21;
-    .name {
-        font-size: @font3;
-        font-weight: bold;
-        color: #fff;
-        line-height: 30px;
-    }
-
     .search {
-        width: 24px;
-        height: 24px;
-        position: absolute;
-        right: 16px;
-        top: 13px;
+        flex-grow: 1;
+        background-color: #373b3e;
+        display: flex;
+        align-items: center;
+        padding: 4px 20px;
+        border-radius: 21px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
     }
 }