主题4&主题5

src/components/product/NewsLarge.vue

@@ -7,7 +7,7 @@
             }
         }"
         class="news-small"
-        :class="{ isLight: type === 'light' }"
+        :class="[`news-${theme}`, type === 'light' ? 'isLight' : '']"
     >
         <van-image :src="getImg(info.pic)" :radius="12" width="120" height="120" fit="cover" />
 
@@ -16,14 +16,11 @@
             <div class="flex1"></div>
             <van-button type="primary" round plain size="mini"> 查看</van-button>
         </div>
-
-        <img class="bg" v-if="type === 'dark'" src="@assets/png-diwen2.png" alt="" />
-        <img class="bg" v-else src="@assets/png-diwen3.png" alt="" />
-        <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
     </router-link>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import product from '../../mixins/product';
 export default {
     mixins: [product],
@@ -40,6 +37,7 @@ export default {
         }
     },
     computed: {
+        ...mapState(['theme']),
         time() {
             if (this.info.startTime) {
                 if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
@@ -144,8 +142,8 @@ export default {
 
         .van-button {
             width: 68px;
-            --van-button-plain-background-color: var(--fadePrimlight);
-            --van-button-primary-background-color: var(--primlight);
+            --van-button-plain-background-color: var(--fadePrim);
+            --van-button-primary-background-color: var(--prim);
             --van-button-mini-font-size: 14px;
         }
 
@@ -237,6 +235,17 @@ export default {
             }
         }
     }
+
+    &.news-theme4 {
+        .content {
+            .van-button {
+                width: 68px;
+                --van-button-plain-background-color: var(--fadePrimlight);
+                --van-button-primary-background-color: var(--primlight);
+                --van-button-mini-font-size: 14px;
+            }
+        }
+    }
 }
 
 .status {

src/styles/theme.less

@@ -91,4 +91,31 @@
     --van-button-primary-border-color: var(--prim);
     --van-number-keyboard-button-background-color: var(--prim);
     --van-button-primary-background-color:var(--prim);
+}
+
+.theme5 {
+    --prim: #51B8FF;
+    --fadePrim: #51B8FF20;
+    --darkPrim: #367bd7;
+    --primlight: #4092FF;
+    --fadePrimlight: #4092FF20;
+    --btnText: #000;
+    --bglight:#1C1C1C;
+    --danger:#FF4F50;
+    --info:#939599;
+    --bg:#1C1C1C;
+    --bg2:#000000;
+    --bg3:#1C1C1C;
+    --text1:#fff;
+    --text2:#000;
+    --van-primary-color: var(--prim);
+    --van-tabbar-item-active-color: var(--prim);
+    --van-tabs-default-color: var(--prim);
+    --van-tabs-bottom-bar-color: var(--prim);
+    --van-tab-active-text-color: var(--prim);
+    --van-field-error-message-color: var(--prim);
+    --van-button-primary-background-color: var(--prim);
+    --van-button-primary-border-color: var(--prim);
+    --van-number-keyboard-button-background-color: var(--prim);
+    --van-button-primary-background-color:var(--prim);
 }

src/views/Home.vue

@@ -773,7 +773,7 @@ export default {
 .home-title {
     font-size: 18px;
     font-weight: bold;
-    color: var(--color1);
+    color: var(--text1);
     line-height: 24px;
     padding: 10px 16px 8px;
     .flex();

src/views/Index.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { computed, ref, watch } from 'vue-demi';
+import { computed, onMounted, ref, watch } from 'vue-demi';
 import { useRoute } from 'vue-router';
 import { mapState, useStore } from 'vuex';
 export default {
@@ -41,7 +41,9 @@ export default {
                 bgClass.value = 'bgBack';
             }
         };
-        setClass();
+        onMounted(() => {
+            setClass();
+        });
         watch(route, () => {
             setClass();
         });