新增模糊显示

src/components/m-map-blur/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <div v-for="(item, index) in map" :key="index">
+            <span :style="{
+                filter:'blur('+(index-1)*2.5+'rpx)'
+            }" >{{ index }}.{{ item }}</span>
+      
+        </div>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'm-map-blur',
+    data() {
+        return {
+
+        }
+    },
+    props: {
+        map: {
+            type: Object,
+            default: {}
+        },
+    },
+}
+</script>
+
+<style lang="less" scoped></style>

src/pages/forecast/index.vue

@@ -145,7 +145,8 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc result-desc_limit">
-                        <div v-for="(item, index) in userData.guoGuanMap">{{ index }}.{{ item }}</div>
+                        <!-- <div v-for="(item, index) in userData.guoGuanMap" :key="index">{{ index }}.{{ item }}</div> -->
+                        <m-map-blur :map="userData.guoGuanMap"></m-map-blur>
                     </view>
                     <!-- <view class="result-pay">开通会员立即查看</view> -->
                     <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
@@ -188,7 +189,8 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.qingGan }}
+                        <div v-for="(item,index) in userData.qingGan" :key="item">{{index}}.{{ item }}</div>
+                     
 
 
                     </view>
@@ -270,7 +272,8 @@
                             </view>
                         </view>
                         <view>
-                            选用{{ userData.numberYunMap.numberYuns }} 为电话号码，门牌号、车牌号等。
+                            选用<text :data-theme="theme" class="result-desc-color">{{ userData.numberYunMap.numberYuns
+                            }}</text> 为电话号码，门牌号、车牌号等。
                         </view>
 
 
@@ -369,7 +372,10 @@
                     :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_top@2x.png'" />
                 <view class="result-content" :data-theme="theme">
                     <view class="result-desc">
-                        {{ userData.xiFangWei }}
+                        <div :key="index" v-for="(item, index) in userData.xiFangWei">
+                            {{ item }}
+                        </div>
+
                     </view>
 
 
@@ -488,6 +494,7 @@
 import Vue from 'vue';
 import api from '@/api'
 import responseDecorator from '@/utils/responseDecorator'
+import mMapBlur from '@/components/m-map-blur'
 export default {
     data() {
         return {
@@ -776,10 +783,10 @@ export default {
         console.log('query', query)
         this.form.username = decodeURIComponent(query.username || this.form.username)
         this.form.sex = Number(query.sex) || this.form.sex
-        this.form.birthday =decodeURIComponent(query.birthday || this.form.birthday) 
-        console.log( this.form.birthday)
+        this.form.birthday = decodeURIComponent(query.birthday || this.form.birthday)
+        console.log(this.form.birthday)
+
 
-        
         api.open.openApiGanZhiGet8ziByDate(this.form).then(res => {
             this.userData = responseDecorator.get8ziByDateDecorator(res.data)
             this.theme = this.userData.ganZhiProRowVoList[2][0].enColor
@@ -787,7 +794,7 @@ export default {
         })
         api.order.studentBirthdayLog({
             sex: this.form.sex,
-          
+
             name: this.form.username,
             isPay: 0,
             birthday: this.form.birthday,
@@ -812,8 +819,16 @@ export default {
                 })
 
             })
+        },
+        filterBlurText(text, blur) {
+            return `<h1>Title</h1>`
+
+
         }
-    }
+    },
+    components: {
+        mMapBlur,
+    },
 };
 </script>
 
@@ -1194,6 +1209,31 @@ export default {
                     position: absolute;
 
                 }
+
+                [data-theme=green].result-desc-color {
+                    color: #53996B;
+
+                }
+
+                [data-theme=yellow].result-desc-color {
+                    color: #D19C03;
+
+                }
+
+                [data-theme=red].result-desc-color {
+                    color: #CB2C00;
+
+                }
+
+                [data-theme=blue].result-desc-color {
+                    color: #006494;
+
+                }
+
+                [data-theme=brown].result-desc-color {
+                    color: #9C4B08;
+
+                }
             }
 
             .result-desc_limit {}
@@ -1271,5 +1311,4 @@ export default {
             width: 100%;
         }
     }
-}
-</style>
+}</style>