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

<template>
    <view :data-theme="theme" class="bg">
        <view class="categorys">
            <view style="width:100%">
                <view class="categorys-item" v-for="item 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>
        <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">{{ index }}.{{ item }}</div>
                    </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 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">
                        {{ userData.reportMap['财运'] }}


                    </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 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">
                        {{ userData.qingGan }}


                    </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 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">
                        {{ userData.reportMap['缺失五行评语'] }}


                    </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 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 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="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">
                        <view v-for="item 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>
                            选用{{ userData.numberYunMap.numberYuns }} 为电话号码，门牌号、车牌号等。
                        </view>


                    </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 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">
                        <view>{{ userData.piQi }}</view>


                    </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 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">
                        <view style="text-align: left;">称骨重量:{{ userData.chenGuMap['称骨重量'] }}</view>
                        <view>{{ userData.chenGuMap['称骨评语'] }}</view>


                    </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 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">
                            <view v-for="(item, index) in userData.diseasePartList" class="">
                                <text> {{ item.part }}:</text>
                                <text> {{ item.symp }}</text>
                            </view>
                        </view>


                    </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 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">
                        {{ userData.xiFangWei }}
                    </view>


                </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">
                        {{ userData.guiren }}
                    </view>


                </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">
                        {{ userData.industry }}
                    </view>


                </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 lang="ts">
import Vue from 'vue';
import api from '@/api'
import responseDecorator from '@/utils/responseDecorator'
export default Vue.extend({
    data() {
        return {
            currentPoint: 'bzmp',
            theme: 'yellow',
            title: '国学',
            categorys: [{ text: '八字命盘', point: 'bzmp' },
            { text: '个人特点', point: 'grtd' },
            { text: '财运分析', point: 'cyfx' },
            { text: '婚姻情感', point: 'hyqg' },
            { 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: {
                    称骨评语: "",
                    称骨重量: "",
                },
                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: any) {
        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)

        
        api.openApi.openApiGanZhiGet8ziByDate(this.form).then(res => {
            this.userData = responseDecorator.get8ziByDateDecorator(res.data.data)
            this.theme = this.userData.ganZhiProRowVoList[2][0].enColor
            console.log(this.userData)
        })

    },
    methods: {

    }
});
</script>

<style lang="less" scoped>
.bg {
    width: 100vw;
    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;

}

.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-x: 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;

                }
            }

            .result-desc_limit {}

            .result-pay {
                margin: 0 auto;
                margin-top: 40rpx;
                width: 400rpx;
                text-align: center;
                height: 80rpx;
                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>