新增换肤的功能

src/App.vue

@@ -1,29 +1,61 @@
 <script lang="ts">
-    import Vue from 'vue';
-    export default Vue.extend({
-        mpType: 'app',
-        onLaunch() {
-            console.log('App Launch')
-        },
-        onShow() {
-            console.log('App Show')
-        },
-        onHide() {
-            console.log('App Hide')
-        }
-    });
+import Vue from 'vue';
+export default Vue.extend({
+    mpType: 'app',
+    onLaunch() {
+        console.log('App Launch')
+    },
+    onShow() {
+        console.log('App Show')
+    },
+    onHide() {
+        console.log('App Hide')
+    }
+});
 </script>
 
 <style>
 page {
-  font-family: -apple-system, Arial, "Helvetica Neue", Helvetica, "PingFang SC",
-    "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",
-    sans-serif;
+    font-family: -apple-system, Arial, "Helvetica Neue", Helvetica, "PingFang SC",
+        "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei",
+        sans-serif;
 }
+
 view {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/*每个页面公共css */
+/* .primary-bg-light-blue {
+    background-color: #BFE2F4;
+
+}
+
+.primary-bg-blue {
+    background-color: #006494;
+}
+
+.primary-bg-light-yellow {
+    background-color: #FFEEBD;
+
 }
-    /*每个页面公共css */
+
+.primary-bg-yellow {
+    background-color: #D19C03;
+}
+
+.primary-bg-light-green {
+    background-color: #95E9B3;
+
+}
+
+.primary-bg-green {
+    background-color: #FC6363;
+}
+
+.primary-bg-red {
+    background-color: #CB2C00;
+} */
 </style>

src/pages/forecast/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="bg">
+    <view :data-theme="theme" class="bg">
 
         <view class="content">
             <view class="user">
@@ -21,7 +21,7 @@
                 </view>
             </view>
             <view class="table">
-                <view class="header">
+                <view :data-theme="theme" class="header">
                     <view class="row">
                         四柱
                     </view>
@@ -38,86 +38,85 @@
                         时柱
                     </view>
                 </view>
-                <view
-                    style="display: flex;flex-flow: row wrap;height: 576rpx;width: 100%; border-left: 2rpx solid #006494;border-right: 4rpx solid #006494;">
-                    <view style="color: #333;" class="body">
-                        <view class="row">十神</view>
-                        <view class="row">{{
+                <view :data-theme="theme" class="shell">
+                    <view :data-theme="theme" style="color: #333;" class="body">
+                        <view :data-theme="theme" class="row">十神</view>
+                        <view :data-theme="theme" class="row">{{
                             userData.ganZhiProRowVoList[0][0].shiShen1 || '' + userData.ganZhiProRowVoList[0][0].shiShen2 ||
                             '' + userData.ganZhiProRowVoList[0][0].shiShen3 || ''
                         }}</view>
-                        <view class="row">{{
+                        <view :data-theme="theme" class="row">{{
                             userData.ganZhiProRowVoList[1][0].shiShen1 || '' + userData.ganZhiProRowVoList[1][0].shiShen2 ||
                             '' + userData.ganZhiProRowVoList[1][0].shiShen3 || ''
                         }}</view>
-                        <view style="color: #006494;" class="row">{{ userData.ganZhiProRowVoList[2][0].shiShen1 || '' +
+                        <view :data-theme="theme" style="color: #006494;" class="row">{{
+                            userData.ganZhiProRowVoList[2][0].shiShen1 || '' +
                             userData.ganZhiProRowVoList[2][0].shiShen2 || '' + userData.ganZhiProRowVoList[2][0].shiShen3 ||
                             '' }}
                         </view>
-                        <view class="row">{{
+                        <view :data-theme="theme" class="row">{{
                             userData.ganZhiProRowVoList[3][0].shiShen1 || '' + userData.ganZhiProRowVoList[3][0].shiShen2 ||
                             '' + userData.ganZhiProRowVoList[3][0].shiShen3 || ''
                         }}</view>
 
                     </view>
-                    <view class="body">
-                        <view class="row">天干</view>
+                    <view :data-theme="theme" class="body">
+                        <view :data-theme="theme" class="row">天干</view>
                         <view :style="{
-                                    color: userData.ganZhiProRowVoList[0][0].textColor
-                                }" class="row">{{ userData.ganZhiProRowVoList[0][0].name }}</view>
+                            color: userData.ganZhiProRowVoList[0][0].textColor
+                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[0][0].name }}</view>
                         <view :style="{
                             color: userData.ganZhiProRowVoList[1][0].textColor
-                        }" class="row">{{ userData.ganZhiProRowVoList[1][0].name }}</view>
+                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[1][0].name }}</view>
                         <view :style="{
                             color: userData.ganZhiProRowVoList[2][0].textColor
-                        }" class="row">{{ userData.ganZhiProRowVoList[2][0].name }}</view>
+                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[2][0].name }}</view>
                         <view :style="{
                             color: userData.ganZhiProRowVoList[3][0].textColor
-                        }" class="row">{{ userData.ganZhiProRowVoList[3][0].name }}</view>
+                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[3][0].name }}</view>
 
                     </view>
-                    <view class="body">
-                        <view class="row">地支</view>
-                        <view :style="{
+                    <view :data-theme="theme" class="body">
+                        <view :data-theme="theme" class="row">地支</view>
+                        <view :data-theme="theme" :style="{
                             color: userData.ganZhiProRowVoList[0][1].textColor
                         }" class="row">{{ userData.ganZhiProRowVoList[0][1].name }}</view>
-                        <view :style="{
+                        <view :data-theme="theme" :style="{
                             color: userData.ganZhiProRowVoList[1][1].textColor
                         }" class="row">{{ userData.ganZhiProRowVoList[1][1].name }}</view>
-                        <view :style="{
+                        <view :data-theme="theme" :style="{
                             color: userData.ganZhiProRowVoList[2][1].textColor
                         }" class="row">{{ userData.ganZhiProRowVoList[2][1].name }}</view>
-                        <view :style="{
+                        <view :data-theme="theme" :style="{
                             color: userData.ganZhiProRowVoList[3][1].textColor
                         }" class="row">{{ userData.ganZhiProRowVoList[3][1].name }}</view>
 
                     </view>
-                    <view class="body">
-                        <view style="line-height: 154rpx;" class="row">藏干</view>
-                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                    <view :data-theme="theme" class="body">
+                        <view :data-theme="theme" style="line-height: 154rpx;" class="row">藏干</view>
+                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                             userData.ganZhiProRowVoList[0][1].shiShen1 }}</view>
-                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                             userData.ganZhiProRowVoList[1][1].shiShen1 }}</view>
-                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                             userData.ganZhiProRowVoList[2][1].shiShen1 }}</view>
-                        <view style="font-size: 26rpx;height: 154rpx;" class="row">{{
+                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                             userData.ganZhiProRowVoList[3][1].shiShen1 }}</view>
-
                     </view>
-                    <view class="body">
-                        <view class="row">纳音</view>
-                        <view class="row">{{ userData.ganZhiNaYinVoList[0].naYin }}</view>
-                        <view class="row">{{ userData.ganZhiNaYinVoList[1].naYin }}</view>
-                        <view class="row">{{ userData.ganZhiNaYinVoList[2].naYin }}</view>
-                        <view class="row">{{ userData.ganZhiNaYinVoList[3].naYin }}</view>
+                    <view :data-theme="theme" class="body">
+                        <view :data-theme="theme" class="row">纳音</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiNaYinVoList[0].naYin }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiNaYinVoList[1].naYin }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiNaYinVoList[2].naYin }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiNaYinVoList[3].naYin }}</view>
 
                     </view>
-                    <view class="body">
-                        <view class="row">空亡</view>
-                        <view class="row">{{ userData.ganZhiKongWangVoList[0].kongWang }}</view>
-                        <view class="row">{{ userData.ganZhiKongWangVoList[1].kongWang }}</view>
-                        <view class="row">{{ userData.ganZhiKongWangVoList[2].kongWang }}</view>
-                        <view class="row">{{ userData.ganZhiKongWangVoList[3].kongWang }}</view>
+                    <view :data-theme="theme" class="body">
+                        <view :data-theme="theme" class="row">空亡</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiKongWangVoList[0].kongWang }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiKongWangVoList[1].kongWang }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiKongWangVoList[2].kongWang }}</view>
+                        <view :data-theme="theme" class="row">{{ userData.ganZhiKongWangVoList[3].kongWang }}</view>
 
                     </view>
 
@@ -126,7 +125,7 @@
             </view>
             <view class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
-                <view class="imgTitle"><text>喜</text><text>用</text><text>数</text><text>字</text></view>
+                <view :data-theme="theme" class="imgTitle"><text>喜</text><text>用</text><text>数</text><text>字</text></view>
                 <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
                 <view class="result-content">
                     <view class="result-desc result-desc_limit">
@@ -146,7 +145,7 @@
             <view style="width: 100%;height: 55rpx;"></view>
             <view class="result">
                 <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
-                <view class="imgTitle"><text>易</text><text>发</text><text>疾</text><text>病</text></view>
+                <view :data-theme="theme" class="imgTitle"><text>易</text><text>发</text><text>疾</text><text>病</text></view>
                 <img mode="widthFix" class="imgHeader" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_top.png" />
                 <view class="result-content ">
                     <view class="result-desc">
@@ -171,9 +170,6 @@
                 </view>
                 <img mode="widthFix" class="imgFooter" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_bottom.png" />
             </view>
-
-
-
         </view>
     </view>
 </template>
@@ -185,6 +181,7 @@ import responseDecorator from '@/utils/responseDecorator'
 export default Vue.extend({
     data() {
         return {
+            theme: 'yellow',
             title: '国学',
             form: {
                 birthDay: '1997-05-16 23:00:00',
@@ -421,11 +418,35 @@ export default Vue.extend({
 
 <style lang="less" scoped>
 .bg {
-    background-color: #BFE2F4;
     width: 100vw;
     min-height: 100vh;
 }
 
+[data-theme=blue].bg {
+    background-color: #BFE2F4;
+
+}
+
+[data-theme=yellow].bg {
+    background-color: #FFEEBD;
+
+}
+
+[data-theme=red].bg {
+    background-color: #FC6363;
+
+}
+
+[data-theme=green].bg {
+    background-color: #95E9B3;
+
+}
+
+[data-theme=brown].bg {
+    background-color: #996235;
+
+}
+
 .content {
     padding: 50rpx 50rpx;
     font-weight: 600;
@@ -446,7 +467,68 @@ export default Vue.extend({
         display: flex;
         flex-wrap: wrap;
 
+        [data-theme=red] .shell {
+            border-left: 2rpx solid #A42705;
+            border-right: 4rpx solid #A42705;
+        }
+
+        [data-theme=blue] .shell {
+            border-left: 2rpx solid #006494;
+            border-right: 4rpx solid #006494;
+        }
+
+        [data-theme=green] .shell {
+            border-left: 2rpx solid #79AE8B;
+            border-right: 4rpx solid #79AE8B;
+        }
+
+        [data-theme=yellow] .shell {
+            border-left: 2rpx solid #D19C03;
+            border-right: 4rpx solid #D19C03;
+        }
+
+        [data-theme=brown] .shell {
+            border-left: 2rpx solid #70390D;
+            border-right: 4rpx solid #70390D;
+
+        }
+
+        .shell {
+            display: flex;
+            flex-flow: row wrap;
+            height: 576rpx;
+            width: 100%;
+        }
+
+        [data-theme=blue].header {
+            border: 4rpx solid #006494;
+            background: #1293D0;
+            color: #fff;
+        }
+
+        [data-theme=yellow].header {
+            border: 4rpx solid #D19C03;
+            background: #FFD65C;
+            color: #333;
+        }
+
+        [data-theme=red].header {
+            border: 4rpx solid #A42705;
+            background: #CB2C00;
+            color: #fff;
+        }
 
+        [data-theme=green].header {
+            border: 4rpx solid #519669;
+            background: #5BC781;
+            color: #333;
+        }
+
+        [data-theme=brown].header {
+            border: 4rpx solid #70390D;
+            background: #9C4B08;
+            color: #fff;
+        }
 
         .header {
             width: 100%;
@@ -458,11 +540,36 @@ export default Vue.extend({
 
             .row {
                 width: 20%;
-                color: white;
+
                 border-right: 2rpx solid #fff;
             }
         }
 
+        [data-theme=blue].body {
+            background-color: #A7DDF8;
+            border-bottom: 2rpx solid #006494;
+        }
+
+        [data-theme=red].body {
+            background-color: #FDCECE;
+            border-bottom: 2rpx solid #A42705;
+        }
+
+        [data-theme=yellow].body {
+            background-color: #FFF2CC;
+            border-bottom: 2rpx solid #D19C03;
+        }
+
+        [data-theme=green].body {
+            background-color: #C7FECA;
+            border-bottom: 2rpx solid #519669;
+        }
+
+        [data-theme=brown].body {
+            background-color: #E2CBB8;
+            border-bottom: 2rpx solid #996235;
+        }
+
         .body {
             width: 100%;
             min-height: 82rpx;
@@ -478,10 +585,30 @@ export default Vue.extend({
             align-content: center;
             border-bottom: 2rpx solid #006494;
 
+            [data-theme=blue].row {
+                border-left: 2rpx solid #006494;
+            }
+
+            [data-theme=red].row {
+                border-left: 2rpx solid #A42705;
+            }
+
+            [data-theme=yellow].row {
+                border-left: 2rpx solid #D19C03;
+            }
+
+            [data-theme=green].row {
+                border-left: 2rpx solid #519669;
+            }
+
+            [data-theme=brown].row {
+                border-left: 2rpx solid #70390D;
+            }
+
             .row {
                 min-height: 82rpx;
                 width: 20%;
-                border-left: 2rpx solid #006494;
+                // border-left: 2rpx solid #006494;
                 display: flex;
                 justify-content: center;
                 align-items: center;
@@ -516,7 +643,7 @@ export default Vue.extend({
             }
 
             .result-desc_limit {
-               
+
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 3;
@@ -544,6 +671,26 @@ export default Vue.extend({
 
 
 
+        }
+
+        [data-theme=blue] .imgTitle {
+            color: #006494;
+        }
+
+        [data-theme=yellow].imgTitle {
+            color: #D19C03;
+        }
+
+        [data-theme=red].imgTitle {
+            color: #A42705;
+        }
+
+        [data-theme=brown].imgTitle {
+            color: #9C4B08;
+        }
+
+        [data-theme=green].imgTitle {
+            color: #53996B;
         }
 
         .imgTitle {
@@ -577,5 +724,4 @@ export default Vue.extend({
             width: 100%;
         }
     }
-}
-</style>
+}</style>