nbjk-xcx/src/pages/forecast/index.vue

<template>
    <view :data-theme="theme" class="bg">
        <view style="width: 100%;height: 35rpx;"></view>
        <view :data-theme="theme" class="score">
            <view :data-theme="theme" class="score-outer">
                <view :data-theme="theme" class="score-inner">
                    <view style="display: flex;align-items: center;justify-content: center;padding-top: 24rpx;">
                        <text
                            style="position: absolute;left: 338rpx;color: #fff;font-size: 48rpx;font-weight: bold;bottom: 128rpx;">{{
                                userData.riYuan.qr }}</text>
                        <text style="position: absolute;left: 112rpx;font-size: 44rpx;color: #CB2C00;font-weight: bold;">{{
                            userData.riYuan.score }}</text>
                        <image class="score-inner-ring" mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/ring@2x.png"></image>
                        <image mode="widthFix" class="score-inner-seal" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/seal@2x.png"></image>
                    </view>
                    <text class="score-inner-text1">身强身弱,不代表好坏,具体请看详解</text>
                    <image mode="widthFix" class="score-inner-icon1"
                        :src="'/static/icon/' + theme + '_bzmp_long_rect@2x.png'">
                    </image>
                </view>
            </view>

        </view>
        <!-- <button @click="pay">支付</button> -->
        <view class="categorys">
            <view style="width:100%">
                <view class="categorys-item" :key="index" v-for="(item, index) in categorys">
                    <view :data-theme="theme" @click="() => {
                        currentPoint = item.point
                    }" :class="{
    'categorys-item-text_selected': currentPoint == item.point
}" class="categorys-item-text">{{ item.text }}</view>
                    <view :data-theme="theme" :class="{
                        'categorys-item-mark_selected': currentPoint == item.point
                    }" class="categorys-item-mark"></view>
                </view>
                <view class=""></view>
            </view>

        </view>

        <view :data-theme="theme" v-if="goodsStatus.isPay == -1" @click="pay" class="pay">
            <view class="pay-button"> 开通会员立即查看</view>
        </view>
        <scroll-view :scroll-into-view="currentPoint" :scroll-with-animation="false" :scroll-y="true" class="content">
            <view id="bzmp" class="user">
                <view style="width:50%">
                    <text>【姓 名】</text>
                    <text>{{ userData.username }}</text>
                </view>
                <view style="width:50%">
                    <text>【性 别】</text>
                    <text>{{ userData.sex == 1 ? '男' : '女' }}</text>
                </view>
                <view style="width:100%">
                    <text>【公 历】</text>
                    <text>{{ userData.birthday }}</text>
                </view>
                <view style="width:100%">
                    <text>【农 历】</text>
                    <text>{{ userData.nongDay }}</text>
                </view>
            </view>
            <view class="table">
                <view :data-theme="theme" class="header">
                    <view class="row">
                        四柱
                    </view>
                    <view class="row">
                        年柱
                    </view>
                    <view class="row">
                        月柱
                    </view>
                    <view class="row">
                        日柱
                    </view>
                    <view style="border: none;" class="row">
                        时柱
                    </view>
                </view>
                <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 :data-theme="theme" class="row">{{
                            userData.ganZhiProRowVoList[1][0].shiShen1 || '' + userData.ganZhiProRowVoList[1][0].shiShen2 ||
                            '' + userData.ganZhiProRowVoList[1][0].shiShen3 || ''
                        }}</view>
                        <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 :data-theme="theme" class="row">{{
                            userData.ganZhiProRowVoList[3][0].shiShen1 || '' + userData.ganZhiProRowVoList[3][0].shiShen2 ||
                            '' + userData.ganZhiProRowVoList[3][0].shiShen3 || ''
                        }}</view>

                    </view>
                    <view :data-theme="theme" class="body">
                        <view :data-theme="theme" class="row">天干</view>
                        <view :style="{
                            color: userData.ganZhiProRowVoList[0][0].hexColor
                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[0][0].name }}</view>
                        <view :style="{
                            color: userData.ganZhiProRowVoList[1][0].hexColor
                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[1][0].name }}</view>
                        <view :style="{
                            color: userData.ganZhiProRowVoList[2][0].hexColor
                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[2][0].name }}</view>
                        <view :style="{
                            color: userData.ganZhiProRowVoList[3][0].hexColor
                        }" :data-theme="theme" class="row">{{ userData.ganZhiProRowVoList[3][0].name }}</view>

                    </view>
                    <view :data-theme="theme" class="body">
                        <view :data-theme="theme" class="row">地支</view>
                        <view :data-theme="theme" :style="{
                            color: userData.ganZhiProRowVoList[0][1].hexColor
                        }" class="row">{{ userData.ganZhiProRowVoList[0][1].name }}</view>
                        <view :data-theme="theme" :style="{
                            color: userData.ganZhiProRowVoList[1][1].hexColor
                        }" class="row">{{ userData.ganZhiProRowVoList[1][1].name }}</view>
                        <view :data-theme="theme" :style="{
                            color: userData.ganZhiProRowVoList[2][1].hexColor
                        }" class="row">{{ userData.ganZhiProRowVoList[2][1].name }}</view>
                        <view :data-theme="theme" :style="{
                            color: userData.ganZhiProRowVoList[3][1].hexColor
                        }" class="row">{{ userData.ganZhiProRowVoList[3][1].name }}</view>

                    </view>
                    <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 :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                            userData.ganZhiProRowVoList[1][1].shiShen1 }}</view>
                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                            userData.ganZhiProRowVoList[2][1].shiShen1 }}</view>
                        <view :data-theme="theme" style="font-size: 26rpx;height: 154rpx;" class="row">{{
                            userData.ganZhiProRowVoList[3][1].shiShen1 }}</view>
                    </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 :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>
                </view>
            </view>

            <view id="grtd" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/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" :key="index">{{ index }}.{{ item }}</div> -->
                        <m-map-blur :begin="2" :isBlur="goodsStatus.isPay == -1" :map="userData.guoGuanMap"></m-map-blur>
                    </view>

                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                </view>

                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>
            <view style="width: 100%;height: 35rpx;"></view>

            <view id="cyfx" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-map-blur :isBlur="goodsStatus.isPay == -1" :map="userData.caiYun"></m-map-blur>



                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>
            <view style="width: 100%;height: 35rpx;"></view>
            <view id="hyqg" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-map-blur :isBlur="goodsStatus.isPay == -1" :map="userData.qingGan"></m-map-blur>
                        <!-- <div v-for="(item,index) in userData.qingGan" :key="item">{{index}}.{{ item }}</div> -->



                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>
            <view id="zngx" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-map-blur :isBlur="goodsStatus.isPay == -1" :map="userData.ziNvYun"></m-map-blur>
                        <!-- <div v-for="(item,index) in userData.qingGan" :key="item">{{index}}.{{ item }}</div> -->



                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>
            <view style="width: 100%;height: 35rpx;"></view>
            <view id="wxpy" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-line-blur :isBlur="goodsStatus.isPay == -1"
                            :text="(userData.reportMap['缺失五行评语'] + userData.reportMap['潮湿平衡'] + userData.reportMap['缺失十神评语'])"></m-line-blur>
                        <!-- <div>{{ userData.reportMap['缺失五行评语'] }}</div>

                        <div>{{ userData.reportMap['潮湿平衡'] }}</div>
                        <div>{{ userData.reportMap['缺失十神评语'] }}</div> -->
                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>

                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <!-- <view id="csph" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        {{ userData.reportMap['潮湿平衡'] }}


                    </view>
               
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view> -->

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="xysz" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-number-blur :isBlur="goodsStatus.isPay == -1" :theme="theme"
                            :list="userData.numberYunMap.numberYunList"></m-number-blur>
                        <!-- <view v-for="(item,index) in userData.numberYunMap.numberYunList"
                            style="position: relative;margin-bottom: 10px;" class="">
                           
                                <image class="result-desc-icon1" mode="widthFix"
                                    :src="'/static/icon/' + theme + '_xysz_rect@2x.png'" />
                                <view class="result-desc-lucktext">数字{{ item.id }}</view>
                                <text>
                                    {{ item.caiYun }}
                                </text>
                                <view>
                                    {{ item.taoHua }}
                                </view>
                           

                        </view> -->

                        <view :class="{
                            'blur-heavy': goodsStatus.isPay == 0
                        }">
                            选用<text :class="{
                                'blur-heavy': goodsStatus.isPay == 0
                            }" :data-theme="theme" class="result-desc-color">{{ userData.numberYunMap.numberYuns
}}</text> 为电话号码，门牌号、车牌号等。
                        </view>


                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="gjpq" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-line-blur :text="userData.piQi" :isBlur="goodsStatus.isPay == -1"></m-line-blur>
                        <!-- <view>{{ userData.piQi }}</view> -->


                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="cgpy" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <div style="width: 100%;text-align: center;">
                            <m-line-blur :is-blur="false" :text="userData.chenGuMap['称骨重量']"></m-line-blur>
                        </div>

                        <m-line-blur :isBlur="goodsStatus.isPay == -1" :text="userData.chenGuMap['称骨评语']"></m-line-blur>
                        <!-- <view style="text-align: left;">称骨重量:{{ userData.chenGuMap['称骨重量'] }}</view>
                        <view>{{ userData.chenGuMap['称骨评语'] }}</view> -->


                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="jkyf" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <view class="result-disease">
                            <m-disease-blur :isBlur="goodsStatus.isPay == -1"
                                :list="userData.diseasePartList"></m-disease-blur>
                        </view>


                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>
                    <!-- <view class="result-pay">开通会员立即查看</view> -->
                    <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                    <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                </view>
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="xyfw" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-map-blur :isBlur="goodsStatus.isPay == -1" :map="userData.xiFangWei"></m-map-blur>

                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>


                </view>
                <!-- <view class="result-pay">开通会员立即查看</view> -->
                <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>

            <view style="width: 100%;height: 35rpx;"></view>
            <view id="mzgr" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-line-blur :text="userData.guiren" :isBlur="goodsStatus.isPay == -1"></m-line-blur>
                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>


                </view>
                <!-- <view class="result-pay">开通会员立即查看</view> -->
                <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>
            <view style="width: 100%;height: 35rpx;"></view>
            <view id="tjhy" class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_' + theme + '_top@2x.png'" />
                <view class="result-content" :data-theme="theme">
                    <view class="result-desc">
                        <m-line-blur :text="userData.industry" :isBlur="goodsStatus.isPay == -1"></m-line-blur>
                    </view>
                    <m-more-alert v-if="goodsStatus.isPay != 0"  :theme="theme"></m-more-alert>

                </view>
                <!-- <view class="result-pay">开通会员立即查看</view> -->
                <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
                <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
                <img mode="widthFix" class="imgFooter"
                    :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_' + theme + '_bottom@2x.png'" />
            </view>


            <!-- <view class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_'+theme+'_top@2x.png'" />
                <view class="result-content ">
                    
                    <view class="result-desc">
                        {{ userData.reportMap['缺失十神评语'] }}


                    </view> -->
            <!-- <view class="result-disease">
                        <view v-for="(item,index) in userData.diseasePartList" class="">
                            <text style="color: #006494;"> {{ item.part }}:</text>
                            <text>({{ item.degree }}) {{ item.symp }}</text>
                        </view>
                    </view> -->

            <!-- <view class="result-pay">开通会员立即查看</view> -->
            <!-- <view class="result-pay">开通会员立即查看</view> -->
            <!-- <img  mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png" /> -->
            <!-- <view class="result-content-border1">
                        <view class="result-content-border2">
                        </view>
                    </view> -->
            <!-- </view>
                <img mode="widthFix" class="imgFooter" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_bottom@2x.png'" />
            </view> -->
            <!-- <view style="width: 100%;height: 35rpx;"></view>
            <view class="result">
                <img mode="widthFix" class="imgCircle" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/circle.png">
                <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/reportBg/bg_'+theme+'_top@2x.png'" />
                <view class="result-content ">
                    <view class="result-desc">
                        当我们关注身体健康时，了解各宫位的能量分布可以帮助我们判断可能出现的疾病。请特别留意以下身体部位可能存在的问题，并在早期进行检查，以便及时预防。


                    </view>
                    <view class="result-disease">
                        <view v-for="(item, index) in userData.diseasePartList" class="">
                            <text style="color: #006494;"> {{ item.part }}:</text>
                            <text>({{ item.degree }}) {{ item.symp }}</text>
                        </view>
                    </view>

                
                </view>
                <img mode="widthFix" class="imgFooter" :src="'https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_'+theme+'_bottom@2x.png'" />
            </view> -->
        </scroll-view>
    </view>
</template>

<script>
import Vue from 'vue';
import api from '@/api'
import responseDecorator from '@/utils/responseDecorator'
import mMapBlur from '@/components/m-map-blur/m-map-blur.vue'
import mLineBlur from '@/components/m-line-blur/m-line-blur.vue'
import mDiseaseBlur from '@/components/m-disease-blur/m-disease-blur.vue'
import mNumberBlur from '@/components/m-number-blur/m-number-blur.vue'
import mMoreAlert from '@/components/m-more-alert/m-more-alert.vue'
export default {
    data() {
        return {
            currentPoint: 'bzmp',
            theme: 'yellow',
            title: '国学',
            goodsStatus: {
                birthday: null,
                createTime: "2023-12-28 16:24:51",
                id: 0,
                isPay: 0,
                name: "",
                sex: "1",
                updateTime: null,
                userId: 0
            },
            categorys: [{ text: '八字命盘', point: 'bzmp' },
            { text: '个人特点', point: 'grtd' },
            { text: '财运分析', point: 'cyfx' },
            { text: '婚姻情感', point: 'hyqg' },
            { text: '子女关系', point: 'zngx' },
            { text: '五行评语', point: 'wxpy' },
            // { text: '潮湿平衡', point: 'csph' },
            { text: '喜用数字', point: 'xysz' },
            { text: '格局脾气', point: 'gjpq' },
            { text: '称骨评语', point: 'cgpy' },
            { text: '健康预防', point: 'jkyf' },
            { text: '喜用方位', point: 'xyfw' },
            { text: '命中贵人', point: 'mzgr' },
            { text: '推荐行业', point: 'tjhy' }],

            form: {
                birthday: '2000-01-01 23:00:00',
                isSave: 0,
                sex: 1,
                username: '默认用户'
            },
            userData: {
                username: '',
                piQi: '',
                guiren: '',
                industry: '',
                xiFangWei: '',
                chenGuMap: {
                    称骨评语: "",
                    称骨重量: "",
                },
                riYuan: {
                    qr: "木强",
                    score: 60,
                    xiYong: ["火", "土"],
                    xiYongOld: ["火", "土"]
                },
                sex: 1,
                birthday: '',
                nongDay: '',
                qingGan: '',
                reportMap: {
                    "潮湿平衡": "过于干燥，火特别多，性情比较暴躁，容易上火，内心上火容易产生无名火，容易被“点燃”生气，身体也容易上火。",
                    "缺失五行评语": "五行缺金：放置一些金属质地的装饰品，如金色的花瓶、金属相框等;引入一些金属家具，如金属椅子、桌子等。",
                    "缺失十神评语": "缺少正财，收入不稳定。",
                    "财运": "无"
                },
                ganZhiProRowVoList: [[{
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": '',
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                },
                {
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": "",
                    "shiShen3": "",
                    "hexColor": '',
                    "enColor": ''
                }], [{
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": '',
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                },
                {
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": "",
                    "shiShen3": "",
                    "hexColor": '',
                    "enColor": ''
                }], [{
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": '',
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                },
                {
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": "",
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                }], [{
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": '',
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                },
                {
                    "gongWei": "",
                    "name": "",
                    "color": "",
                    "five": "",
                    "xi": '',
                    "ji": '',
                    "shiShen1": "",
                    "shiShen2": "",
                    "shiShen3": '',
                    "hexColor": '',
                    "enColor": ''
                }]],
                ganZhiRowVoList: [
                    {
                        "gongWei": "年干",
                        "name": "丁",
                        "color": "红",
                        "five": "火",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "正印",
                        "shiShen2": '',
                        "shiShen3": ''
                    },
                    {
                        "gongWei": "年支",
                        "name": "丑",
                        "color": "棕",
                        "five": "土",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "己（劫财）",
                        "shiShen2": "辛（伤官）",
                        "shiShen3": "癸（正财）"
                    },
                    {
                        "gongWei": "月干",
                        "name": "乙",
                        "color": "绿",
                        "five": "木",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "正官",
                        "shiShen2": '',
                        "shiShen3": ''
                    },
                    {
                        "gongWei": "月支",
                        "name": "巳",
                        "color": "红",
                        "five": "火",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "丙（偏印）",
                        "shiShen2": "戊（比肩）",
                        "shiShen3": "庚（食神）"
                    },
                    {
                        "gongWei": "日干",
                        "name": "戊",
                        "color": "棕",
                        "five": "土",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "元男",
                        "shiShen2": '',
                        "shiShen3": ''
                    },
                    {
                        "gongWei": "日支",
                        "name": "午",
                        "color": "红",
                        "five": "火",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "丁（正印）",
                        "shiShen2": "己（劫财）",
                        "shiShen3": ''
                    },
                    {
                        "gongWei": "时干",
                        "name": "甲",
                        "color": "绿",
                        "five": "木",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "七杀",
                        "shiShen2": '',
                        "shiShen3": ''
                    },
                    {
                        "gongWei": "时支",
                        "name": "午",
                        "color": "蓝",
                        "five": "水",
                        "xi": '',
                        "ji": '',
                        "shiShen1": "丁（正印）",
                        "shiShen2": "己（劫财）",
                        "shiShen3": ''
                    }
                ],
                ganZhiNaYinVoList: [{
                    naYin: '',
                    zhu: ''
                }, {
                    naYin: '',
                    zhu: ''
                }, {
                    naYin: '',
                    zhu: ''
                }, {
                    naYin: '',
                    zhu: ''
                }],
                diseasePartList: [{
                    degree: "轻症",
                    id: 9,
                    part: "腹部",
                    sex: 3,
                    symp: "腹部胀气、腹部痉挛"
                }],
                numberYunMap: {
                    numberYuns: '',
                    numberYunList: [{
                        caiYun: "数字1 带来独立和领导力，启示您在财务决策中追求卓越。",
                        id: "1",
                        taoHua: "1的活力能量，可能吸引到与您个性契合的人。"
                    }]
                },
                guoGuanMap: {
                    "1": ""
                },
                ganZhiKongWangVoList: [{ kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }, { kongWang: '', zhu: '' }]


            }
        }
    },
    onLoad(query) {
        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)


        api.open.openApiGanZhiGet8ziByDate(this.form).then(res => {
            this.userData = responseDecorator.get8ziByDateDecorator(res.data)
            this.theme = this.userData.ganZhiProRowVoList[2][0].enColor
            console.log(this.userData)
        })
        api.order.studentBirthdayLog({
            sex: this.form.sex,

            name: this.form.username,
            isPay: 0,
            birthday: this.form.birthday,
        }).then(res => {
            this.goodsStatus = res.data
        })


    },
    methods: {
        pay() {
            api.buy.studentWxXcxPrepareOrder({
                foreType: 2,
                goodsType: 3,
                phoneType: 2,
                goodsId: this.goodsStatus.id
            }).then(res => {
                uni.requestPayment({
                    ...res.data,
                    complete: () => {
                        uni.showToast({
                            title: '查询支付结果',
                            icon: 'loading',
                            duration: 3000
                        })
                        setTimeout(() => {
                            api.order.studentBirthdayLog({
                                sex: this.form.sex,

                                name: this.form.username,
                                isPay: 0,
                                birthday: this.form.birthday,
                            }).then(res => {
                                uni.hide
                                this.goodsStatus = res.data
                            })
                        }, 3000);
                    }
                }).then(res => {
                    console.log(res)
                })


            })
        },
        filterBlurText(text, blur) {
            return `<h1>Title</h1>`


        }
    },
    components: {
        mMapBlur,
        mDiseaseBlur,
        mLineBlur,
        mNumberBlur,
        mMoreAlert
    },
};
</script>

<style lang="less" scoped>
[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;

}

.bg {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow-y: scroll;
}

[data-theme=blue].pay {
    background-color: #BFE2F4;
}

[data-theme=yellow].pay {
    background-color: #FFEEBD;
}

[data-theme=brown].pay {
    background-color: #996235;
}

[data-theme=red].pay {
    background-color: #FC6363;
}

[data-theme=green].pay {
    background-color: #74D597;
}

.pay {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0rpx;
    z-index: 999;
    display: flex;
    align-items: center;
    align-content: center;

    padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
    padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px

    .pay-button {
        margin: 15rpx auto;
        border: 4rpx solid #333333;
        background: #E74D26;
        width: 400rpx;
        line-height: 80rpx;
        border-radius: 10px;
        color: #F5EC5A;
        text-align: center;


    }

    // 
    // margin-top: 40rpx;
    // 
    // 
    // 
    // 
    // 
    // 
    // 
    // 
    // left: 50%;
    // transform: translateX(-50%);
}

[data-theme=blue] .score {
    border: 2px solid #006494;
}

[data-theme=yellow] .score {

    border: 2px solid #D19C03;
}

[data-theme=brown] .score {

    border: 2px solid #70390D;
}

[data-theme=red] .score {

    border: 2px solid #A42705;
}

[data-theme=green] .score {

    border: 2px solid #519669;
}




.score {
    width: 608rpx;
    height: 296rpx;
    border: 3px solid transparent;
    margin: 0 auto;
    

    [data-theme=blue].score-outer {
        width: 100%;
        height: 100%;
        background-color: #1293D0;
        padding: 20rpx;
    }

    [data-theme=yellow].score-outer {
        width: 100%;
        height: 100%;
        background-color: #FFD65C;
        padding: 20rpx;
    }

    [data-theme=brown].score-outer {
        width: 100%;
        height: 100%;
        background-color: #9C4B08;
        padding: 20rpx;
    }

    [data-theme=red].score-outer {
        width: 100%;
        height: 100%;
        background-color: #CB2C00;
        padding: 20rpx;
    }

    [data-theme=green].score-outer {
        width: 100%;
        height: 100%;
        background-color: #5BC781;
        padding: 20rpx;
    }

    .score-outer {
        width: 100%;
        height: 100%;
        background-color: transparent;
        padding: 20rpx;
    }

    [data-theme=blue] .score-inner {
        background-color: #DDF3FE;
    }

    [data-theme=yellow] .score-inner {
        background-color: #FFF2CC;
    }

    [data-theme=brown] .score-inner {
        background-color: #E2CBB8;
    }

    [data-theme=red] .score-inner {
        background-color: #FDCECE;
    }

    [data-theme=green] .score-inner {
        background-color: #C7FECA;
    }

    .score-inner {
        width: 100%;
        height: 100%;
        background-color: #FFF2CC;
        position: relative;

        .score-inner-icon1 {
            position: absolute;
            bottom: 10rpx;
            width: 528rpx;
            left: 19rpx;
            z-index: 11;
        }

        .score-inner-text1 {
            position: absolute;
            color: #000;
            font-size: 30rpx;
            width: 100%;
            text-align: center;
            bottom: 25rpx;
            left: 0;
            font-weight: bold;
            z-index: 12;
        }

        .score-inner-ring {
            width: 137rpx;
        }

        .score-inner-seal {
            width: 222rpx;
            margin-left: 74rpx;
        }

    }
}

.blur-heavy {
    color: transparent !important;
    text-shadow: 2rpx 2rpx 16rpx #000000;
}



.categorys::-webkit-scrollbar {
    display: none;
}

.categorys {
    padding-left: 60rpx;
    padding-right: 60rpx;
    width: 100%;
    font-size: 30rpx;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    overflow-y: scroll;
    padding-top: 30rpx;

    .categorys-item {
        display: inline-block;
        margin-right: 30rpx;


        [data-theme=green].categorys-item-text {
            color: #5D9673;
        }

        [data-theme=red].categorys-item-text {
            color: #AA3D1E;
        }

        [data-theme=brown].categorys-item-text {
            color: #653A17;
        }

        [data-theme=yellow].categorys-item-text {
            color: #EAC354;
        }

        [data-theme=blue].categorys-item-text {
            color: #3A97C2;
        }

        .categorys-item-text {}

        [data-theme=green].categorys-item-text_selected {
            font-size: 34rpx;

            color: #417954;
        }

        [data-theme=red].categorys-item-text_selected {
            color: #892104;
            font-size: 34rpx;
        }

        [data-theme=yellow].categorys-item-text_selected {
            color: #D19C03;
            font-size: 34rpx;
        }

        [data-theme=brown].categorys-item-text_selected {
            color: #411F04;
            font-size: 34rpx;
        }

        [data-theme=blue].categorys-item-text_selected {
            color: #006494;
            font-size: 34rpx;
        }



        [data-theme=green].categorys-item-mark_selected {
            background-color: #417954;
        }

        [data-theme=red].categorys-item-mark_selected {
            background-color: #892104;
        }

        [data-theme=yellow].categorys-item-mark_selected {
            background-color: #D19C03;
        }

        [data-theme=brown].categorys-item-mark_selected {
            background-color: #411F04;
        }

        [data-theme=blue].categorys-item-mark_selected {
            background-color: #006494;
        }

        .categorys-item-mark {
            width: 60rpx;
            height: 10rpx;

            margin: 0 auto;
            margin-top: 6rpx;

            border-radius: 10rpx;
        }

        .categorys-item-mark {}

    }




}

.content {
    padding: 50rpx 30rpx;
    font-weight: 600;
    box-sizing: border-box;
    height: calc(100vh - 92rpx);
    padding-top: 0rpx;

    .user {
        padding: 0 36rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
        padding-top: 15rpx;
    }

    .table {
        width: 608rpx;
        margin: 0 auto;
        margin-bottom: 35rpx;
        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%;
            line-height: 82rpx;
            border: 4rpx solid #006494;
            display: flex;
            text-align: center;
            background: #1293D0;

            .row {
                width: 20%;

                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;


            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            text-align: center;
            background-color: #A7DDF8;
            border-top: none;
            align-items: center;
            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;
                display: flex;
                justify-content: center;
                align-items: center;
                align-content: center;
                font-weight: bold;


            }
        }
    }

    .result {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        align-items: flex-start;
        align-content: flex-start;



        [data-theme=red].result-content {
            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_red_middle@2x.png');
        }

        [data-theme=yellow].result-content {
            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_yellow_middle@2x.png');
        }

        [data-theme=brown].result-content {
            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_brown_middle@2x.png');
        }

        [data-theme=blue].result-content {
            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_blue_middle@2x.png');
        }

        [data-theme=green].result-content {
            background-image: url('https://ndata.zzxcx.net/xpgx-xcx/forecast/reportBg/bg_green_middle@2x.png');
        }

        .result-content {
            width: 100%;
            min-height: 200rpx;
            // background-image: url("https://ndata.zzxcx.net/xpgx-xcx/forecast/bg_middle.png");
            background-size: 100%;
            font-size: 30rpx;
            padding: 0 120rpx;

            .result-desc {
                width: 100%;
                text-align: left;

                .result-desc-icon1 {
                    width: 119rpx;
                    display: inline-block;
                    margin-right: 15rpx;

                }

                .result-desc-lucktext {
                    text-align: center;
                    width: 119rpx;
                    line-height: 54rpx;
                    left: 0;
                    top: 0;
                    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 {}

            .result-pay {
                margin: 0 auto;
                margin-top: 40rpx;
                width: 400rpx;
                text-align: center;

                line-height: 80rpx;
                color: #F5EC5A;
                border-radius: 40px;
                border: 4rpx solid #333333;
                background: #E74D26;
            }

            .result-disease {
                color: #000;
            }




        }

        [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 {
            top: 126rpx;
            position: absolute;
            font-size: 48rpx;
            color: #006494;
            display: flex;
            width: 384rpx;
            justify-content: space-around;
            left: 155rpx;




        }

        .imgHeader {
            width: 100%;
        }

        .imgCircle {
            width: 423rpx;
            margin: 0 auto;
            top: 95rpx;
            position: absolute;
            left: 134rpx;
        }

        .imgFooter {
            width: 100%;
        }
    }
}
</style>