颜色改版

src/main/nine-space/src/components/AppBar.vue

@@ -13,7 +13,7 @@
     >
         <template #left>
             <div class="back">
-                <van-icon @click="back" size="24" name="arrow-left" color="#fff" />
+                <van-icon @click="back" size="24" name="arrow-left" :color="fontColor || $colors.font0" />
             </div>
             <van-popover
                 v-model:show="showPopover"
@@ -41,9 +41,15 @@ export default {
                 { text: '发现', icon: require('@assets/menu2.png'), value: '/discover' },
                 { text: '藏品室', icon: require('@assets/menu3.png'), value: '/store' },
                 { text: '我的', icon: require('@assets/menu4.png'), value: '/mine' }
-            ]
+            ],
+            tabColor: ''
         };
     },
+    computed: {
+        fontColor() {
+            return this.tabColor ? '#fff' : '';
+        }
+    },
     watch: {
         $route() {
             if (this.$route.meta.menuPage) {
@@ -51,6 +57,21 @@ export default {
             } else {
                 this.show = true;
             }
+            if (this.$route.meta.tabColor) {
+                this.tabColor = this.$route.meta.tabColor;
+            } else {
+                this.tabColor = '';
+            }
+        },
+        tabColor() {
+            this.$nextTick(() => {
+                if (this.$el) {
+                    let children = this.$el.children;
+                    if (children && children.length > 0) {
+                        children[0].style.backgroundColor = this.tabColor;
+                    }
+                }
+            });
         }
     },
     mounted() {

src/main/nine-space/src/components/LikeButton.vue

@@ -35,11 +35,11 @@ export default {
 
 <style lang="less" scoped>
 .like {
-    display: inline-block;
     color: #949699;
-    line-height: 24px;
+    // line-height: 24px;
     flex-shrink: 0;
-
+    .flex();
+    display: inline-flex;
     img {
         vertical-align: middle;
         margin-right: 3px;

src/main/nine-space/src/components/PageTitle.vue

@@ -21,6 +21,7 @@ export default {
         flex: 2;
         span {
             font-size: @font3;
+            color: @text0;
             // font-family: ZhenyanGB-Regular, ZhenyanGB;
         }
     }

src/main/nine-space/src/components/asset/assetInfo.vue

@@ -98,7 +98,7 @@ export default {
 .product {
     width: calc(50vw - 24px);
     margin: 8px;
-    background-color: @bg2;
+    background-color: #1c1e25;
     display: inline-block;
     border-radius: 8px;
     overflow: hidden;

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -130,7 +130,7 @@ export default {
 
         .text1 {
             font-size: @font2;
-            color: #ffffff;
+            color: @text0;
             line-height: 24px;
         }
 
@@ -171,14 +171,14 @@ export default {
                 min-width: 70px;
                 border: solid 0px transparent;
                 padding: 1px;
-                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
+                background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @prim, @warn);
                 background-origin: border-box;
                 box-sizing: border-box;
                 background-clip: content-box, border-box;
                 font-size: @font1;
 
                 &.follow {
-                    background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3);
+                    background-image: linear-gradient(@bg3, @bg3), linear-gradient(135deg, @text3, @text3);
                     color: @text3;
                 }
             }
@@ -186,7 +186,7 @@ export default {
             .text4 {
                 span {
                     font-size: @font1;
-                    color: #fff;
+                    color: @text0;
                     &:first-child {
                         color: @text3;
                         margin-right: 2px;
@@ -219,7 +219,7 @@ export default {
         right: 20px;
         top: 0;
         height: 1px;
-        background-color: #202122;
+        background-color: @bg3;
     }
 }
 </style>

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

@@ -98,7 +98,7 @@ export default {
 
         .name {
             font-size: @font2;
-            color: #ffffff;
+            color: @text0;
             line-height: 24px;
         }
 
@@ -165,7 +165,7 @@ export default {
     }
 }
 .sold {
-    background-color: #1c1e25;
+    background-color: @bg2;
     font-size: @font1;
     color: #939599;
     padding: 0 17px;

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

@@ -124,7 +124,7 @@ export default {
     width: calc(100vw - 32px);
     margin: 8px 16px;
     position: relative;
-    background-color: #1c1e25;
+    background-color: @bg2;
     display: inline-block;
     border-radius: 30px;
     overflow: hidden;
@@ -167,7 +167,7 @@ export default {
         .name {
             font-size: @font2;
             font-weight: bold;
-            color: #ffffff;
+            color: @text0;
             line-height: 24px;
         }
 
@@ -190,7 +190,7 @@ export default {
                     background: @prim;
                     color: @bg;
                 }
-                background-color: #27272b;
+                background-color: @bg3;
                 color: @prim;
             }
         }
@@ -216,7 +216,7 @@ export default {
 
             .price {
                 font-size: @font4;
-                color: #fff;
+                color: @text0;
                 line-height: 20px;
                 font-family: OSP;
                 img {
@@ -248,7 +248,7 @@ export default {
     color: #fff;
 }
 .sold {
-    background-color: #1c1e25;
+    background-color: @bg2;
     font-size: @font1;
     color: #939599;
     padding: 0 17px;

src/main/nine-space/src/plugins/colors.js

@@ -3,12 +3,18 @@ export default {
         if (process.env.VUE_APP_PAGE_TYPE == 'raex') {
             app.config.globalProperties.$colors = {
                 prim: '#00FFCB',
-                warn: '#006EFF'
+                warn: '#006EFF',
+                font0: '#000000',
+                bg: '#ffffff',
+                bg3: '#f5f7fa'
             };
         } else {
             app.config.globalProperties.$colors = {
                 prim: '#FDFB60',
-                warn: '#FF8F3E'
+                warn: '#FF8F3E',
+                font0: '#ffffff',
+                bg: '#181818',
+                bg3: '#0f0f0f'
             };
         }
     }

src/main/nine-space/src/router/index.js

@@ -223,7 +223,8 @@ const routes = [
         component: () => import('../views/product/Detail.vue'),
         meta: {
             pageType: Page.Every,
-            title: '第九空间'
+            title: '第九空间',
+            tabColor: '#181818'
         }
     },
     {
@@ -286,7 +287,8 @@ const routes = [
         component: () => import('../views/asset/Detail.vue'),
         meta: {
             pageType: Page.Every,
-            title: '第九空间'
+            title: '第九空间',
+            tabColor: '#181818'
         }
     },
     {

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

@@ -7,7 +7,7 @@
     --van-text-color: #fff;
     --van-gray-6: @text3;
     --van-gray-3: @bg3;
-    --van-tabbar-item-active-color: #fff;
+    --van-tabbar-item-active-color: @textP;
     --van-button-plain-background-color: transparent;
     --van-grid-item-content-background-color: transparent;
     --van-button-mini-height: 26px;
@@ -31,8 +31,8 @@
     --van-uploader-file-background-color: transparent;
     --van-active-color: @bg3;
     --van-image-placeholder-background-color: @bg2;
-    --van-search-background-color: #181818;
-    --van-search-content-background-color: #0f0f0f;
+    --van-search-background-color: @bg;
+    --van-search-content-background-color: @bg3;
     // --van-picker-background-color: @bg;
     --van-button-default-height: 38px;
     --van-dialog-has-title-message-text-color: #000;

src/main/nine-space/src/styles/common/9th/theme.less

@@ -3,11 +3,12 @@
 @success: #67c23a;
 @danger: #f56c6c;
 @warn: #e6a23c;
-@text0: #181818;
+@textP: #ffffff;
+@text0: #ffffff;
 @text1: #323233;
 @text2: #606266;
 @text3: #939599;
-@text4: #c6c8cc;
+@text4: #ffffff;
 @border1: #dcdfe6;
 @border2: #f2f3f5;
 @border3: #dfe1e6;
@@ -15,13 +16,17 @@
 @bg: #181818;
 @bg2: #1c1e25;
 @bg3: #0f0f0f;
+@bgProductDetail: #0f0f0f;
 @menu-text-color: #bfcbd9;
 @menu-text-color-active: #409eff;
 @menu-bg: #324157;
 @menu-bg-active: #1f2d3d;
 @menu-bg-hover: #232e3b;
 @background-color-light: #181818;
-@font1:12px;
-@font2:14px;
-@font3:16px;
-@font4:20px;
+@font1: 12px;
+@font2: 14px;
+@font3: 16px;
+@font4: 20px;
+@hotBg: rgba(39, 40, 40, 0.6);
+@btnText:#303133;
+@tabBorder:#202122;

src/main/nine-space/src/styles/common/raex/theme.less

@@ -1,27 +1,32 @@
 @divider: #f2f4f5;
-@prim: #00FFCB;
+@prim: #3ab200;
 @success: #67c23a;
 @danger: #f56c6c;
-@warn: #006EFF;
-@text0: #181818;
+@warn: #3ab200;
+@textP: #3ab200;
+@text0: #000000;
 @text1: #323233;
 @text2: #606266;
 @text3: #939599;
-@text4: #c6c8cc;
+@text4: #939599;
 @border1: #dcdfe6;
 @border2: #f2f3f5;
 @border3: #dfe1e6;
 @border4: #f2f6fc;
-@bg: #181818;
-@bg2: #1c1e25;
-@bg3: #0f0f0f;
+@bg: #ffffff;
+@bg2: #ffffff;
+@bg3: #f5f7fa;
+@bgProductDetail: #0f0f0f;
 @menu-text-color: #bfcbd9;
 @menu-text-color-active: #409eff;
 @menu-bg: #324157;
 @menu-bg-active: #1f2d3d;
 @menu-bg-hover: #232e3b;
 @background-color-light: #181818;
-@font1:12px;
-@font2:14px;
-@font3:16px;
-@font4:20px;
+@font1: 12px;
+@font2: 14px;
+@font3: 16px;
+@font4: 20px;
+@hotBg: #f5f7fa;
+@btnText: #fff;
+@tabBorder: #f5f7fa;

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

@@ -278,8 +278,9 @@ export default {
     display: flex;
     align-items: center;
     .logo {
-        width: 74px;
-        height: 26px;
+        width: auto;
+        height: 34px;
+        display: block;
     }
 
     .search {
@@ -308,7 +309,7 @@ export default {
 ::v-deep(.mySwiper) {
     width: calc(100vw - 32px);
     height: calc(40vw - 12.8px);
-    padding-top: 12px;
+    padding-top: 20px;
 
     .swiper-pagination {
         bottom: 6px;
@@ -358,14 +359,14 @@ export default {
     width: 38px;
     height: 38px;
 }
-.van-grid {
-    margin-top: 12px;
-}
+// .van-grid {
+//     margin-top: 12px;
+// }
 /deep/ .van-grid-item__content {
     padding: 14px 0 16px;
 }
 /deep/ .van-grid-item__text {
-    color: #fff;
+    color: @text0;
     font-size: @font1;
     line-height: 18px;
     margin-top: 4px;

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

@@ -279,7 +279,7 @@ export default {
 .top {
     display: flex;
     padding: 10px 16px;
-    background-color: @bg;
+    background-color: @bgProductDetail;
     .top-btn {
         flex-grow: 1;
         .btn {
@@ -318,7 +318,7 @@ export default {
 // }
 
 .discover {
-    background-color: @bg3;
+    background-color: @bgProductDetail;
     min-height: 100vh;
     box-sizing: border-box;
 }
@@ -352,7 +352,7 @@ export default {
 }
 
 .van-tabs {
-    background-color: @bg;
+    background-color: @bgProductDetail;
 }
 .tab {
     position: relative;

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

@@ -611,6 +611,7 @@ export default {
 <style lang="less" scoped>
 .detail {
     padding-bottom: 100px;
+    background-color: @bgProductDetail;
 }
 /deep/ .van-collapse-item__content {
     background: #181818 !important;
@@ -682,7 +683,7 @@ export default {
 }
 .info {
     // height: 164px;
-    background-color: @bg;
+    background-color: @bgProductDetail;
     border-radius: 20px 20px 0 0;
     transform: translateY(-16px);
     position: relative;
@@ -975,7 +976,7 @@ export default {
                 top: 1px;
                 right: 1px;
                 bottom: 1px;
-                background-color: @bg;
+                background-color: @bgProductDetail;
                 z-index: 0;
                 border-radius: 4px;
             }
@@ -1037,24 +1038,30 @@ export default {
         margin: 12px 16px 0 0;
         width: 94px;
         height: 32px;
-        color: #000;
+        color: @btnText;
         background: linear-gradient(48deg, @prim 0%, @warn 100%);
         border-radius: 4px;
         &.prim {
             background: #202122;
             color: @text3;
+            .prive2 {
+                color: @text3;
+            }
         }
 
         &.opened {
             background: @bg;
             border: 1px solid #303133;
+            .prive2 {
+                color: @text3;
+            }
         }
     }
     .prive2 {
         font-size: @font1;
         text-align: center;
         margin-left: 2px;
-        color: @text3;
+        color: @btnText;
     }
     .img {
         text-align: center;
@@ -1172,7 +1179,7 @@ export default {
     }
     .van-button {
         background: linear-gradient(135deg, @prim 0%, @warn 100%);
-        color: #333230;
+        color: @btnText;
         font-size: @font2;
         border-width: 0px;
     }
@@ -1355,6 +1362,7 @@ export default {
 }
 .goods {
     // padding: 0 16px 0px;
+    background-color: #1c1c1c;
 
     .page-title {
         font-size: @font2;

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="discover">
+    <div class="discover" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
             <van-search
                 ref="top"
@@ -133,6 +133,23 @@ export default {
         }
     }
 }
+/deep/.van-search {
+    .van-field__left-icon {
+        display: flex;
+        align-items: center;
+    }
+    .van-icon {
+        display: flex;
+        align-items: center;
+    }
+    .van-field__control {
+        color: @text0;
+    }
+
+    .van-search__action {
+        color: @text4;
+    }
+}
 .select {
     position: absolute;
     right: 16px;
@@ -263,9 +280,16 @@ export default {
             line-height: 22px;
             padding: 0 12px;
             margin: 6px 16px 0 0;
-            background: rgba(39, 40, 40, 0.6);
+            background: @hotBg;
             border-radius: 12px;
         }
     }
 }
+
+/deep/.product {
+    background-color: @bg;
+    .name {
+        color: @text0!important;
+    }
+}
 </style>

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

@@ -280,11 +280,12 @@ export default {
     margin-right: 26px !important;
 }
 .mine {
-    background-color: #0f0f0f;
+    background-color: @bg3;
 }
 .userInfo {
     padding-top: 35vw;
     position: relative;
+    background-color: @bg;
 
     .history {
         position: absolute;
@@ -337,7 +338,7 @@ export default {
             justify-content: flex-end;
             .text1 {
                 font-size: @font2;
-                color: #ffffff;
+                color: @text0;
                 line-height: 24px;
                 margin-left: 6px;
             }
@@ -364,7 +365,7 @@ export default {
         .follow {
             border: solid 0px transparent;
             padding: 1px;
-            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
+            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn);
             background-origin: border-box;
             box-sizing: border-box;
             background-clip: content-box, border-box;
@@ -406,7 +407,7 @@ export default {
         .text1 {
             font-size: @font3;
             font-weight: bold;
-            color: #ffffff;
+            color: @text0;
             line-height: 24px;
             .flex();
 
@@ -436,7 +437,7 @@ export default {
     align-items: center;
     padding: 0 16px;
     // border-bottom: 1px solid #202122;
-    background-color: transparent;
+    background-color: @bg;
     .menu-item {
         font-size: 16px;
         color: @text3;
@@ -456,6 +457,13 @@ export default {
         }
     }
 }
+.van-tabs {
+    background-color: @bg;
+}
+
+/deep/.van-tabs__nav--line.van-tabs__nav--complete {
+    border-color: @tabBorder;
+}
 
 .list {
     padding: 8px 8px 100px;

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

@@ -85,11 +85,14 @@ export default {
 
 <style lang="less" scoped>
 .follow {
-    background-color: #0f0f0f;
+    background-color: @bg3;
     padding-bottom: 100px;
 }
+/deep/.van-tabs__nav--line.van-tabs__nav--complete {
+    border-color: @tabBorder;
+}
 .top {
-    background-color: #181818;
+    background-color: @bg;
     padding: 0 16px;
     height: 50px;
     display: flex;
@@ -129,4 +132,15 @@ export default {
 .van-tabs {
     background-color: @bg;
 }
+.info {
+    background-color: @bg;
+
+    /deep/.van-button--mini {
+        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
+
+        &.follow {
+            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
+        }
+    }
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="search">
+    <div class="search" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
             <van-search
                 ref="top"
@@ -80,11 +80,11 @@ export default {
 
 <style lang="less" scoped>
 .search {
-    background-color: #0f0f0f;
+    background-color: @bg3;
     padding-bottom: 100px;
 }
 .top {
-    background-color: #181818;
+    background-color: @bg3;
     padding: 0 16px;
     height: 50px;
     display: flex;
@@ -148,6 +148,13 @@ export default {
         display: flex;
         align-items: center;
     }
+    .van-field__control {
+        color: @text0;
+    }
+
+    .van-search__action {
+        color: @text4;
+    }
 }
 
 .hot-content {
@@ -163,13 +170,24 @@ export default {
         span {
             display: inline-block;
             font-size: @font1;
-            color: @text3;
+            color: @text4;
             line-height: 22px;
             padding: 0 12px;
             margin: 6px 16px 0 0;
-            background: rgba(39, 40, 40, 0.6);
+            background: @hotBg;
             border-radius: 12px;
         }
     }
 }
+.info {
+    background-color: @bg;
+
+    /deep/.van-button--mini {
+        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;
+
+        &.follow {
+            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
+        }
+    }
+}
 </style>

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

@@ -428,8 +428,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
+/deep/.scroll-wrapper {
+    background-color: @bgProductDetail;
+}
+
+/deep/.van-nav-bar {
+    background-color: @bgProductDetail;
+}
 .detail {
     padding-bottom: 100px;
+    background-color: @bgProductDetail;
 }
 .prive {
     display: flex;
@@ -460,13 +468,13 @@ export default {
             font-size: @font1;
             text-align: center;
             margin-left: 2px;
-            color: #303133;
+            color: @btnText;
         }
     }
 }
 .info {
     // height: 164px;
-    background-color: @bg;
+    background-color: @bgProductDetail;
     border-radius: 20px 20px 0 0;
     transform: translateY(-16px);
     position: relative;
@@ -738,7 +746,8 @@ export default {
 }
 
 .goods {
-    // padding: 20px 16px 0px;
+    // padding: 0 16px 0px;
+    background-color: #1c1c1c;
 
     .page-title {
         font-size: @font2;
@@ -791,7 +800,7 @@ export default {
     &::after {
         content: '';
         border-radius: 4px;
-        background-color: @bg;
+        background-color: @bgProductDetail;
         position: absolute;
         top: 1px;
         left: 1px;
@@ -835,7 +844,7 @@ export default {
         left: 1px;
         right: 1px;
         bottom: 1px;
-        background-color: @bg;
+        background-color: @bgProductDetail;
         border-radius: 4px;
         z-index: 0;
     }
@@ -875,7 +884,7 @@ export default {
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: @bg;
+    background-color: @bgProductDetail;
     // background: #202122ee;
 
     // filter: blur(19px);
@@ -897,7 +906,7 @@ export default {
         width: 132px;
         .van-button--primary {
             background: linear-gradient(135deg, @prim 0%, @warn 100%);
-            color: #333230;
+            color: @btnText;
             font-size: @font2;
             border-width: 0px;
         }
@@ -1043,7 +1052,7 @@ export default {
     // margin-top: 12px;
     &::after {
         content: '';
-        background-color: @bg;
+        background-color: @bgProductDetail;
         position: absolute;
         left: 1px;
         top: 1px;

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

@@ -125,14 +125,14 @@ export default {
 
 <style lang="less" scoped>
 .follow {
-    background-color: #0f0f0f;
+    background-color: @bg3;
     padding-bottom: 100px;
 }
 .van-list {
     padding: 8px;
 }
 .top {
-    background-color: #181818;
+    background-color: @bg;
     padding: 0 16px;
     height: 50px;
     display: flex;
@@ -141,7 +141,7 @@ export default {
     .name {
         font-size: @font3;
         font-weight: bold;
-        color: @prim;
+        color: @text0;
         line-height: 30px;
     }
 
@@ -153,6 +153,10 @@ export default {
         top: 13px;
     }
 }
+
+/deep/.van-tabs__nav--line.van-tabs__nav--complete{
+    border-color: @tabBorder;
+}
 // /deep/.van-tab {
 // flex-grow: 0;
 // padding: 0 0 0 0;

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="search">
+    <div class="search" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
         <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
             <van-search
                 ref="top"
@@ -38,7 +38,7 @@
                     <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
                 </div>
             </div>
-            <div class="hot-content">
+            <div class="hot-content" v-if="hots.length > 0">
                 <div class="title">热门搜索</div>
                 <div class="hot-list">
                     <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
@@ -100,11 +100,11 @@ export default {
 
 <style lang="less" scoped>
 .search {
-    background-color: #0f0f0f;
+    background-color: @bg3;
     padding-bottom: 100px;
 }
 .top {
-    background-color: #181818;
+    background-color: @bg3;
     padding: 0 16px;
     height: 50px;
     display: flex;
@@ -171,6 +171,13 @@ export default {
         display: flex;
         align-items: center;
     }
+    .van-field__control {
+        color: @text0;
+    }
+
+    .van-search__action {
+        color: @text4;
+    }
 }
 
 .hot-content {
@@ -186,11 +193,11 @@ export default {
         span {
             display: inline-block;
             font-size: @font1;
-            color: @text3;
+            color: @text4;
             line-height: 22px;
             padding: 0 12px;
             margin: 6px 16px 0 0;
-            background: rgba(39, 40, 40, 0.6);
+            background: @hotBg;
             border-radius: 12px;
         }
     }