修改 抑郁文字为焦虑

src/config/models.js

@@ -5,7 +5,7 @@
  * @FilePath: \TelpoH5FrontendWeb\src\config\models.js
  * @description:
  */
-export const VERSION_MODEL = '1.0.114F'; //版本号
+export const VERSION_MODEL = '1.0.115F'; //版本号
 export const IMAGE_URL = {
     production: 'http://zfb.ssjlai.com/web/',
     test: 'http://zfb.ssjlai.com/web/',
@@ -26,15 +26,15 @@ export const BaiduStatisticsModel = {
 };
 // 情绪模型
 export const EmotionModel = {
-    // 抑郁
+    // 焦虑
     depression: {
-        name: '抑郁',
+        name: '焦虑',
         type: 2,
-        title1: '抑郁倾向',
-        article1: `<p>设备所检测的是个体的抑郁倾向。通过将个人的生理特征（脉搏波、心率变异性等）和行为习惯（运动、作息等）与临床诊断为抑郁症的患者的相应特征进行对比，判断出个体的抑郁倾向（即抑郁症的可能性）程度。抑郁倾向持续的时间越长、程度越严重，代表患有抑郁症的风险就越大。</p>`,
-        title2: '抑郁倾向算法原理',
-        article2: `<p>1．研究发现，抑郁症等情绪障碍可能会引起个体外周生理系统反应的钝化，因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p>
-        <p>2．抑郁症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱，算法能够有效分析判断出这些异常的行为特征。</p>`
+        title1: '焦虑倾向',
+        article1: `<p>设备所检测的是个体的焦虑倾向。通过将个人的生理特征（脉搏波、心率变异性等）和行为习惯（运动、作息等）与临床诊断为焦虑症的患者的相应特征进行对比，判断出个体的焦虑倾向（即焦虑症的可能性）程度。焦虑倾向持续的时间越长、程度越严重，代表患有焦虑症的风险就越大。</p>`,
+        title2: '焦虑倾向算法原理',
+        article2: `<p>1．研究发现，焦虑症等情绪障碍可能会引起个体外周生理系统反应的钝化，因此患者可能在面临危险、压力等应激状态下表现出较低的生理反应唤醒水平。这一点能够通过皮肤电、心率变异性等生理特征的周期性变化来判断。</p>
+        <p>2．焦虑症等情绪障碍的患者会出现明显的失眠、运动少、和生物钟紊乱，算法能够有效分析判断出这些异常的行为特征。</p>`
 
     },
     // 压力

src/views/health/psychological-main/index.vue

@@ -1,43 +1,48 @@
 <template>
-    <div class="psychological-main-container">
-        <van-nav-bar title="今日情绪" :border="true"  @click-left="onNavBack">
-            <template #left>
-                <div v-show="isShowLeft" class="nav-bar-title">
-                    <van-icon name="arrow-left" size="23"/><span>返回</span>
-                </div>
-            </template>
-            <template #title>
-                <span>今日情绪</span>
-            </template>
-        </van-nav-bar>
-        <div class="main">
-            <div class="list">
-                <div v-for="(item,index) in healhtList" :key="index" :class="['item', item.class]" @click="onClick(item)">
-                    <p class="health-value" :style="{ color: calcColor(item.value) }">
-                        {{ item.value || '--' }}
-                    </p>
-                    <p class="health-name">
-                        {{ item.name || '--'}}
-                    </p>
-                    <div class="health-result">
-                        <div :class="['left', item.class]">
-                            <p class="result">
-                                {{ item.result || '暂无数据'}}
-                            </p>
-                        </div>
-                        <div class="right">
-                            <!-- img -->
-                            <img :src="item.img" alt="">
-                        </div>
-                    </div>
-
-                    <div class="health-time">
-                        <p class="time">{{ item.time || '--' }}</p>
-                    </div>
-                </div>
+  <div class="psychological-main-container">
+    <van-nav-bar title="今日情绪" :border="true" @click-left="onNavBack">
+      <template #left>
+        <div v-show="isShowLeft" class="nav-bar-title">
+          <van-icon name="arrow-left" size="23" /><span>返回</span>
+        </div>
+      </template>
+      <template #title>
+        <span>今日情绪</span>
+      </template>
+    </van-nav-bar>
+    <div class="main">
+      <div class="list">
+        <div
+          v-for="(item, index) in healhtList"
+          :key="index"
+          :class="['item', item.class]"
+          @click="onClick(item)"
+        >
+          <p class="health-value" :style="{ color: calcColor(item.value) }">
+            {{ item.value || "--" }}
+          </p>
+          <p class="health-name">
+            {{ item.name || "--" }}
+          </p>
+          <div class="health-result">
+            <div :class="['left', item.class]">
+              <p class="result">
+                {{ item.result || "暂无数据" }}
+              </p>
             </div>
+            <div class="right">
+              <!-- img -->
+              <img :src="item.img" alt="" />
+            </div>
+          </div>
+
+          <div class="health-time">
+            <p class="time">{{ item.time || "--" }}</p>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -46,120 +51,162 @@ import { isNotNull } from "@/utils/index";
 import { PsyBaseUrl } from "@/config/models";
 import APICore from "@/api/core";
 export default {
-  name: 'psychologicalMain',
-  data(){
-   return {
-       healhtList: [
-          /*  { value: 40, name: '抑郁指数', class: 'depression',result: '无抑郁倾向', time: '17:52', img: require('@/assets/img/regardless.png') },
+  name: "psychologicalMain",
+  data() {
+    return {
+      healhtList: [
+        /*  { value: 40, name: '焦虑指数', class: 'depression',result: '无焦虑倾向', time: '17:52', img: require('@/assets/img/regardless.png') },
            { value: 55, name: '压力指数', class: 'stress', result: '轻度压力', time: '17:52', img: require('@/assets/img/regardless.png') },
            { value: 75, name: '疲劳指数', class: 'tiredness', result: '中度疲劳指数', time: '17:52', img: require('@/assets/img/moderate.png') }, */
-       ],
-       uid: '',
-       routeDate: '',
-       params: {}
-
-   }
+      ],
+      uid: "",
+      routeDate: "",
+      params: {},
+    };
   },
   computed: {
     isShowLeft() {
-        return isNotNull(this.$route.query.fromUrl);
-    }
+      return isNotNull(this.$route.query.fromUrl);
+    },
   },
   mounted() {
     this.loadParams();
-    this.$store.commit('tabClick', 0);
-    window.document.title = '心理呵护';
+    this.$store.commit("tabClick", 0);
+    window.document.title = "心理呵护";
   },
   methods: {
     //   获取b端token
     getAuth() {
-        let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
-        let that = this;
-        return new Promise((resolve, reject) => {
-            APICore.getAuth({ manufactorId: manufactorId }).then(res => {
-                let data = res.data;
-                if(data.code === 0) {
-                    resolve(res.data.data);
-                } else {
-                    this.$toast.fail(`${data.message}`);
-                    reject('');
-                }
-            })
-        })
+      let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
+      let that = this;
+      return new Promise((resolve, reject) => {
+        APICore.getAuth({ manufactorId: manufactorId }).then((res) => {
+          let data = res.data;
+          if (data.code === 0) {
+            resolve(res.data.data);
+          } else {
+            this.$toast.fail(`${data.message}`);
+            reject("");
+          }
+        });
+      });
     },
     // 加载路由参数
     async loadParams() {
-        let params = this.$route.query;
-        if (params) {
-            this.uid = params.uid;
-            this.routeDate = params.date;
-            this.params = params;
-            if(!params.accessToken) {
-                let authToken = await this.getAuth();
-                this.$store.commit('ssjlToken', authToken);
-            } else {
-                this.$store.commit('ssjlToken', params.accessToken);
-            }
-            this.getHomeData();
+      let params = this.$route.query;
+      if (params) {
+        this.uid = params.uid;
+        this.routeDate = params.date;
+        this.params = params;
+        if (!params.accessToken) {
+          let authToken = await this.getAuth();
+          this.$store.commit("ssjlToken", authToken);
+        } else {
+          this.$store.commit("ssjlToken", params.accessToken);
         }
+        this.getHomeData();
+      }
     },
     // 获取首页数据
     getHomeData() {
-        this.$toast.loading('数据加载中');
-        let reqUrl = `${PsyBaseUrl}/api/Data/GetHomeData`;
-        let reqParams = {
-            uid: this.uid,
-            date: this.routeDate || this.$dayjs(new Date()).format('YYYY-MM-DD')
-        };
-        axios.get(reqUrl, {
-            params: { ...reqParams },
-            headers: { 'AccessToken': this.$store.getters.ssjlToken }
-        }).then(res => {
-            console.log("res", res);
-            const data = res.data.response;
-            if(!data) {
-                return this.$toast.fail(res.data.msg);
-            }
-            this.healhtList = [
-                // 2023.12.5 修改菜单顺序
-                // 疲劳指数
-                { value: data.TirScore,  name: '疲劳指数', class: 'tiredness', result: data.TirDesc, time: data.TirMeasureUpdateTime ? this.$dayjs(data.TirMeasureUpdateTime).format('HH:mm') : '', level: data.TirLevel, img: data.TirScore ? this.calcImg(data.TirLevel, 'tiredness') : '' },
-                // 压力指数
-                { value: data.StressScore,  name: '压力指数', class: 'stress', result: data.StressDesc, time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '', level: data.StressLevel, img: data.StressScore ? this.calcImg(data.StressLevel, 'stress') : ''},
-                // 抑郁指数
-                { value: data.DepScore,  name: '抑郁指数', class: 'depression', result: data.DepDesc, time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm'): '', level: data.DepLevel, img: data.DepScore ? this.calcImg(data.DepLevel, 'depression') : ''},
-            ];
-            this.$toast.success('数据加载完成');
-        }).catch(() =>{}).finally(() => {  })
-
+      this.$toast.loading("数据加载中");
+      let reqUrl = `${PsyBaseUrl}/api/Data/GetHomeData`;
+      let reqParams = {
+        uid: this.uid,
+        date: this.routeDate || this.$dayjs(new Date()).format("YYYY-MM-DD"),
+      };
+      axios
+        .get(reqUrl, {
+          params: { ...reqParams },
+          headers: { AccessToken: this.$store.getters.ssjlToken },
+        })
+        .then((res) => {
+          console.log("res", res);
+          const data = res.data.response;
+          if (!data) {
+            return this.$toast.fail(res.data.msg);
+          }
+          this.healhtList = [
+            // 2023.12.5 修改菜单顺序
+            // 疲劳指数
+            {
+              value: data.TirScore,
+              name: "疲劳指数",
+              class: "tiredness",
+              result: data.TirDesc,
+              time: data.TirMeasureUpdateTime
+                ? this.$dayjs(data.TirMeasureUpdateTime).format("HH:mm")
+                : "",
+              level: data.TirLevel,
+              img: data.TirScore
+                ? this.calcImg(data.TirLevel, "tiredness")
+                : "",
+            },
+            // 压力指数
+            {
+              value: data.StressScore,
+              name: "压力指数",
+              class: "stress",
+              result: data.StressDesc,
+              time: data.StressMeasureUpdateTime
+                ? this.$dayjs(data.StressMeasureUpdateTime).format("HH:mm")
+                : "",
+              level: data.StressLevel,
+              img: data.StressScore
+                ? this.calcImg(data.StressLevel, "stress")
+                : "",
+            },
+            // 焦虑指数
+            {
+              value: data.DepScore,
+              name: "焦虑指数",
+              class: "depression",
+              result: data.DepDesc,
+              time: data.DepMeasureUpdateTime
+                ? this.$dayjs(data.DepMeasureUpdateTime).format("HH:mm")
+                : "",
+              level: data.DepLevel,
+              img: data.DepScore
+                ? this.calcImg(data.DepLevel, "depression")
+                : "",
+            },
+          ];
+          this.$toast.success("数据加载完成");
+        })
+        .catch(() => {})
+        .finally(() => {});
     },
     onClick(item) {
-        this.params.name = item.class;
-        this.$router.replace({
-            name: 'psychological',
-            query: {
-                name: item.class,
-                uid: this.uid,
-                date: this.routeDate,
-                ...this.params
-            }
-        })
+      this.params.name = item.class;
+      this.$router.replace({
+        name: "psychological",
+        query: {
+          name: item.class,
+          uid: this.uid,
+          date: this.routeDate,
+          ...this.params,
+        },
+      });
     },
     onNavBack() {
-        if(this.isShowLeft) {
-            window.location.href = `${this.$route.query.fromUrl}/#/${ this.$route.query.fromMenu || 'device'}`;
-        } else {
-            this.$router.go(-1);
-        }
+      if (this.isShowLeft) {
+        window.location.href = `${this.$route.query.fromUrl}/#/${
+          this.$route.query.fromMenu || "device"
+        }`;
+      } else {
+        this.$router.go(-1);
+      }
     },
     // 计算表情
     calcImg(level, name) {
-        let imgUrl = '';
-        /* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */
-        let numLevel = Number(level);
-        console.log(`@/assets/img/psychological/${name}_${numLevel}.png`);
-        imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
-        /* switch(level) {
+      let imgUrl = "";
+      /* imgUrl = require(`@/assets/img/psychological/${name}_${level}.png`); */
+      let numLevel = Number(level);
+      console.log(`@/assets/img/psychological/${name}_${numLevel}.png`);
+      imgUrl = require(`@/assets/img/psychological/${name}_${
+        numLevel + 1
+      }.png`);
+      /* switch(level) {
             case '0':
                 imgUrl = require(`@/assets/img/psychological/${name}_${numLevel + 1}.png`);
             break;
@@ -173,28 +220,28 @@ export default {
                 imgUrl = require('@/assets/img/moderate.png');
             break;
         } */
-        return imgUrl;
+      return imgUrl;
     },
     // 计算颜色
     calcColor(value) {
-        let color = "";
-            if (value <= 40) {
-                color = "#62BD48";
-            } else if (value > 40 && value <= 65) {
-                color = "#FEC350";
-            } else if (value > 65 && value <= 80) {
-                color = "#F86825";
-            } else if (value > 80) {
-                color = "#EB1D15";
-            } else {
-                color = "";
-            }
-            return color;
-    }
-  }
-}
+      let color = "";
+      if (value <= 40) {
+        color = "#62BD48";
+      } else if (value > 40 && value <= 65) {
+        color = "#FEC350";
+      } else if (value > 65 && value <= 80) {
+        color = "#F86825";
+      } else if (value > 80) {
+        color = "#EB1D15";
+      } else {
+        color = "";
+      }
+      return color;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    @import "./index.scss";
+@import "./index.scss";
 </style>

src/views/health/psychological/report/report-entry.vue

@@ -6,226 +6,235 @@
  * @description:
 -->
 <template>
-    <div class="report-main">
-        <van-nav-bar title="心理监测" :border="true" :left-arrow="true" @click-left="onNavBack">
-            <template #left>
-                <van-icon name="arrow-left" size="24" style="padding: 0" />
-            </template>
-        </van-nav-bar>
-        <div class="main">
-            <div class="tabs"></div>
-            <div class="content">
-                <div class="list" v-if="weekList">
-                    <div
-                        class="item"
-                        v-for="(item, index) in weekList"
-                        :key="index"
-                        @click="onClickItem(item.recordId)"
-                    >
-                        <div class="left">
-                            <img :src="weekImg" alt />
-                            <div class="middle">
-                                <div class="title">
-                                    <span>周报</span>
-                                    <p>{{ item.name }}</p>
-                                </div>
-                                <div class="overall">
-                                    <div class="left">
-                                        <span>总评</span>
-                                        <p>{{ item. summary}}</p>
-                                    </div>
-                                </div>
-                                <!-- <div class="trend">
-                                    <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
-                                </div>-->
-                            </div>
-                        </div>
-
-                        <div class="right">
-                            <img :src="moreImg" alt />
-                        </div>
-                    </div>
+  <div class="report-main">
+    <van-nav-bar
+      title="心理监测"
+      :border="true"
+      :left-arrow="true"
+      @click-left="onNavBack"
+    >
+      <template #left>
+        <van-icon name="arrow-left" size="24" style="padding: 0" />
+      </template>
+    </van-nav-bar>
+    <div class="main">
+      <div class="tabs"></div>
+      <div class="content">
+        <div class="list" v-if="weekList">
+          <div
+            class="item"
+            v-for="(item, index) in weekList"
+            :key="index"
+            @click="onClickItem(item.recordId)"
+          >
+            <div class="left">
+              <img :src="weekImg" alt />
+              <div class="middle">
+                <div class="title">
+                  <span>周报</span>
+                  <p>{{ item.name }}</p>
                 </div>
-                <div class="list no-data" v-else>
-                    <img src="../../../../assets/img/no_data_01.png" alt />
-                    <p>暂无数据</p>
+                <div class="overall">
+                  <div class="left">
+                    <span>总评</span>
+                    <p>{{ item.summary }}</p>
+                  </div>
                 </div>
+                <!-- <div class="trend">
+                                    <p>( <span>无焦虑倾向</span><span>5%</span>，<span>轻度焦虑倾向</span> <span>5%</span> )</p>
+                                </div>-->
+              </div>
             </div>
+
+            <div class="right">
+              <img :src="moreImg" alt />
+            </div>
+          </div>
+        </div>
+        <div class="list no-data" v-else>
+          <img src="../../../../assets/img/no_data_01.png" alt />
+          <p>暂无数据</p>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
 import { EmotionModel, PsyBaseUrl } from "@/config/models";
 import axios from "axios";
 export default {
-  name:'',
-  data(){
-   return {
-       active: 0,
-       tabImgUrl: require("@/assets/img/psychological/statistical_form.png"),
-       selectDownImg: require("@/assets/img/psychological/select_down.png"),
-       weekImg: require("@/assets/img/psychological/week_report.png"),
-       moreImg: require("@/assets/img/psychological/more.png"),
-       weekList: [],
-       uid: '',
-       emoName: '',
-   }
+  name: "",
+  data() {
+    return {
+      active: 0,
+      tabImgUrl: require("@/assets/img/psychological/statistical_form.png"),
+      selectDownImg: require("@/assets/img/psychological/select_down.png"),
+      weekImg: require("@/assets/img/psychological/week_report.png"),
+      moreImg: require("@/assets/img/psychological/more.png"),
+      weekList: [],
+      uid: "",
+      emoName: "",
+    };
   },
   methods: {
     onNavBack() {},
     loadParams() {
-        let params = this.$route.query;
-            if (params) {
-            this.emoName = EmotionModel[params.name].name;
-            this.emoType = EmotionModel[params.name].type;
-            this.uid = params.uid;
-        }
+      let params = this.$route.query;
+      if (params) {
+        this.emoName = EmotionModel[params.name].name;
+        this.emoType = EmotionModel[params.name].type;
+        this.uid = params.uid;
+      }
     },
     onClickItem(recordId) {
-        this.$router.push({
-            name: 'psychologicalReport',
-            query: {
-                recordId: recordId,
-                name: 'depression',
-                isShowLeft: true
-            }
-        })
+      this.$router.push({
+        name: "psychologicalReport",
+        query: {
+          recordId: recordId,
+          name: "depression",
+          isShowLeft: true,
+        },
+      });
     },
     getWeekResult() {
-        this.$toast.loading('数据加载中');
-        let baseUrl = process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
-        let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
-        let reqParams = {
-            uid: /* this.uid */'2023101521270090082',
-            type: this.emoType
-        };
-        axios.get(reqUrl, {
-            params: { ...reqParams },
-           /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
-        }).then(res => {
-            console.log("res", res);
-            const data = res.data.response;
-            this.weekList = data.map(item => {
-                return {
-                    name: item.Name.replace('周报', ''),
-                    recordId: item.RecordId,
-                    summary: item.Summary,
-                    type: this.emoType
-                }
-            });
-            this.$toast.success('数据加载完成');
+      this.$toast.loading("数据加载中");
+      let baseUrl =
+        process.env.NODE_ENV === "production"
+          ? "https://dbmq.rzliot.com/auth_heart"
+          : "https://dbmq.rzliot.com/heart";
+      let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
+      let reqParams = {
+        uid: /* this.uid */ "2023101521270090082",
+        type: this.emoType,
+      };
+      axios
+        .get(reqUrl, {
+          params: { ...reqParams },
+          /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
         })
-
-    }
+        .then((res) => {
+          console.log("res", res);
+          const data = res.data.response;
+          this.weekList = data.map((item) => {
+            return {
+              name: item.Name.replace("周报", ""),
+              recordId: item.RecordId,
+              summary: item.Summary,
+              type: this.emoType,
+            };
+          });
+          this.$toast.success("数据加载完成");
+        });
+    },
   },
   mounted() {
     this.loadParams();
     this.getWeekResult();
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .report-main {
-    height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    background-color: #f5f5f5;
-    .main {
-        height: calc(100vh - 45px);
-        overflow: scroll;
-        .content {
-            position: relative;
-            .list {
-                .item {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: flex-end;
-                    padding: 34px 15px;
-                    background-color: #fff;
-                    margin-bottom: 11px;
-                    .left {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: flex-start;
-                        img {
-                            height: 25px;
-                            width: 25px;
-                        }
-                        .middle {
-                            .title,
-                            .overall,
-                            .trend {
-                                display: flex;
-                                justify-content: flex-start;
-                                align-items: center;
-                                padding-left: 13px;
-                                span,
-                                p {
-                                    font-size: 18px;
-                                    font-family: Source Han Sans CN;
-                                    font-weight: 400;
-                                    color: #8d8d8d;
-                                    line-height: 30px;
-                                }
-                            }
-                            .title {
-                                span {
-                                    padding-right: 20px;
-                                }
-                                p {
-                                    color: #282828;
-                                }
-                            }
-                            .overall {
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-                                width: 100%;
-                                .left {
-                                    p {
-                                        padding-left: 20px;
-                                        font-weight: bold;
-                                    }
-                                }
-                                .right {
-                                    img {
-                                        height: 15px;
-                                        width: 9px;
-                                    }
-                                }
-                            }
-                            .trend {
-                                align-items: flex-start;
-                                text-align: left;
-                            }
-                        }
-                    }
-                    .right {
-                        img {
-                            width: 9px;
-                            height: 15px;
-                        }
-                    }
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  .main {
+    height: calc(100vh - 45px);
+    overflow: scroll;
+    .content {
+      position: relative;
+      .list {
+        .item {
+          display: flex;
+          justify-content: space-between;
+          align-items: flex-end;
+          padding: 34px 15px;
+          background-color: #fff;
+          margin-bottom: 11px;
+          .left {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            img {
+              height: 25px;
+              width: 25px;
+            }
+            .middle {
+              .title,
+              .overall,
+              .trend {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                padding-left: 13px;
+                span,
+                p {
+                  font-size: 18px;
+                  font-family: Source Han Sans CN;
+                  font-weight: 400;
+                  color: #8d8d8d;
+                  line-height: 30px;
+                }
+              }
+              .title {
+                span {
+                  padding-right: 20px;
                 }
-                &.no-data {
-                    height: calc(100vh - 45px);
-                    width: 100%;
-                    @include center();
-                    flex-direction: column;
-                    img {
-                        height: 110px;
-                        width: 175px;
-                    }
-                    p {
-                        color: #999;
-                        font-size: 12px;
-                        padding: 20px 0 65px 0;
-                    }
+                p {
+                  color: #282828;
                 }
+              }
+              .overall {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                .left {
+                  p {
+                    padding-left: 20px;
+                    font-weight: bold;
+                  }
+                }
+                .right {
+                  img {
+                    height: 15px;
+                    width: 9px;
+                  }
+                }
+              }
+              .trend {
+                align-items: flex-start;
+                text-align: left;
+              }
+            }
+          }
+          .right {
+            img {
+              width: 9px;
+              height: 15px;
             }
+          }
         }
+        &.no-data {
+          height: calc(100vh - 45px);
+          width: 100%;
+          @include center();
+          flex-direction: column;
+          img {
+            height: 110px;
+            width: 175px;
+          }
+          p {
+            color: #999;
+            font-size: 12px;
+            padding: 20px 0 65px 0;
+          }
+        }
+      }
     }
+  }
 }
 </style>

src/views/psychological-modeling/index.vue

@@ -1,382 +1,405 @@
 <template>
-	<div class="page" v-if="isSHowPage">
-         <van-nav-bar title="" :border="true" :left-arrow="true"  @click-left="onNavBack" v-if="showLeftArrow">
-             <template #left>
-                <van-icon name="arrow-left" size="23" style="padding: 0"/>返回
-            </template>
-         </van-nav-bar>
-		<div class="tip">
-			<div class="icon">
-				<i class="iconfont icon-tishi"></i>
-			</div>
-			<div class="info">
-				<div class="titie">温馨提醒：</div>
-				<div class="content">
-                    {{ tips }}
-				</div>
-			</div>
-		</div>
-		<div v-if="info">
-            <!-- 第一步 -->
-			<div class="step" v-show="info.initScaleState !== 1">
-				<div class="name">第一步</div>
-				<div class="title">
-					<div class="text">情绪初始化评估</div>
-					<div class="status success" v-if="info.initScaleState === 1">
-						<span class="icon"
-							><i class="iconfont icon-caozuochenggong"></i
-						></span>
-						<span>已完成</span>
-					</div>
-					<div class="status" v-else>待完成</div>
-				</div>
-				<div class="sub_title">
-					完成一次“情绪初始化评估”，有助于建立您的个人情绪模型。
-				</div>
-                <div class="step_button">
-                    <van-button
-                        round
-                        type="info"
-                        style="width: 100%; height: 100%"
-                        v-if="info.initScaleState !== 1"
-                        @click="toQuestion"
-                    >去完成</van-button>
-                </div>
-			</div>
+  <div class="page" v-if="isSHowPage">
+    <van-nav-bar
+      title=""
+      :border="true"
+      :left-arrow="true"
+      @click-left="onNavBack"
+      v-if="showLeftArrow"
+    >
+      <template #left>
+        <van-icon name="arrow-left" size="23" style="padding: 0" />返回
+      </template>
+    </van-nav-bar>
+    <div class="tip">
+      <div class="icon">
+        <i class="iconfont icon-tishi"></i>
+      </div>
+      <div class="info">
+        <div class="titie">温馨提醒：</div>
+        <div class="content">
+          {{ tips }}
+        </div>
+      </div>
+    </div>
+    <div v-if="info">
+      <!-- 第一步 -->
+      <div class="step" v-show="info.initScaleState !== 1">
+        <div class="name">第一步</div>
+        <div class="title">
+          <div class="text">情绪初始化评估</div>
+          <div class="status success" v-if="info.initScaleState === 1">
+            <span class="icon"
+              ><i class="iconfont icon-caozuochenggong"></i
+            ></span>
+            <span>已完成</span>
+          </div>
+          <div class="status" v-else>待完成</div>
+        </div>
+        <div class="sub_title">
+          完成一次“情绪初始化评估”，有助于建立您的个人情绪模型。
+        </div>
+        <div class="step_button">
+          <van-button
+            round
+            type="info"
+            style="width: 100%; height: 100%"
+            v-if="info.initScaleState !== 1"
+            @click="toQuestion"
+            >去完成</van-button
+          >
+        </div>
+      </div>
 
-            <!-- 第二步 -->
-            <div class="step" v-show="info.progress !== 1">
-				<div class="name">第二步</div>
-				<div class="title">
-					<div class="text">连续佩戴两小时</div>
-					<div class="status success" v-if="info.progress === 1">
-						<span class="icon"
-							><i class="iconfont icon-caozuochenggong"></i
-						></span>
-						<span>已完成</span>
-					</div>
-					<div class="status" v-else>{{ stateText}}</div>
-				</div>
-				<div class="schedule">
-					<van-progress
-						:percentage="(info.progress) * 100"
-						stroke-width="10px"
-						color="#638ee4"
-						:show-pivot="true"
-					></van-progress>
-				</div>
-				<div class="sub_title">
-					请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。
-				</div>
-			</div>
-            <div class="completed" v-show="info.progress === 1 && info.initScaleState === 1">
-                <van-button
-                    round
-                    type="info"
-                    >建模已完成</van-button
-                >
-            </div>
-		</div>
-
-	</div>
+      <!-- 第二步 -->
+      <div class="step" v-show="info.progress !== 1">
+        <div class="name">第二步</div>
+        <div class="title">
+          <div class="text">连续佩戴两小时</div>
+          <div class="status success" v-if="info.progress === 1">
+            <span class="icon"
+              ><i class="iconfont icon-caozuochenggong"></i
+            ></span>
+            <span>已完成</span>
+          </div>
+          <div class="status" v-else>{{ stateText }}</div>
+        </div>
+        <div class="schedule">
+          <van-progress
+            :percentage="info.progress * 100"
+            stroke-width="10px"
+            color="#638ee4"
+            :show-pivot="true"
+          ></van-progress>
+        </div>
+        <div class="sub_title">
+          请连续佩戴不低于2小时,有助于为您输出更加精准的情绪分析指标。
+        </div>
+      </div>
+      <div
+        class="completed"
+        v-show="info.progress === 1 && info.initScaleState === 1"
+      >
+        <van-button round type="info">建模已完成</van-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
+import axios from "axios";
 import APICore from "@/api/core";
 export default {
-	name: 'PsychologicalModeling',
-	data() {
-		return {
-            info: null,
-            showLeftArrow: null,
-            isSHowPage: false,
-            fromUrl: '',
-		}
+  name: "PsychologicalModeling",
+  data() {
+    return {
+      info: null,
+      showLeftArrow: null,
+      isSHowPage: false,
+      fromUrl: "",
+    };
+  },
+  computed: {
+    stateText() {
+      return this.info.progress > 0 ? "进行中" : "待完成";
     },
-    computed: {
-        stateText() {
-            return this.info.progress > 0 ? '进行中' : '待完成';
-        },
-        autoJump() {
-            return this.$route.query.autoJump === '1';
-        },
-        tips() {
-            return this.info.isFirstModeling === 1
-            ? '首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算抑郁、压力、疲劳分值。'
-            : '由于您长时间未佩戴手表，需重新建模，请连续佩戴不低于2小时，佩戴完成后，将为您计算抑郁、压力、疲劳的分值。'
-        }
+    autoJump() {
+      return this.$route.query.autoJump === "1";
+    },
+    tips() {
+      return this.info.isFirstModeling === 1
+        ? "首次佩戴,需完成以下2步,建立情绪模型。完成初始化建模后,将为您计算焦虑、压力、疲劳分值。"
+        : "由于您长时间未佩戴手表，需重新建模，请连续佩戴不低于2小时，佩戴完成后，将为您计算焦虑、压力、疲劳的分值。";
     },
-	mounted() {
-		//页面标题
-		window.document.title = '情绪初始化建模'
+  },
+  mounted() {
+    //页面标题
+    window.document.title = "情绪初始化建模";
 
-		//页面传参
-        let params = { ...this.$route.query }
-		if (params.uid) {
-            this.uid = params.uid;
-            // 缓存从随手精灵传过来的token
-            this.$store.commit('ssjlToken', params.accessToken || '');
-            // 缓存从随手精灵传过来的标识
-            this.$store.commit('fromSsjl', params.fromSsjl);
-            // 是否显示 返回标签
-            this.showLeftArrow = this.$store.getters.fromSsjl === 'true';
-            this.fromUrl = params.fromUrl;
-            console.log("fromUrl", this.fromUrl);
-			//初始化
-			this.init()
-		} else {
-			this.$toast('参数错误')
-		}
-	},
-	methods: {
-        // 获取b端token
-        getAuth() {
-            let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
-            let that = this;
-            return new Promise((resolve, reject) => {
-                APICore.getAuth({ manufactorId: manufactorId }).then(res => {
-                    let data = res.data;
-                    if(data.code === 0) {
-                        resolve(res.data.data);
-                    } else {
-                        that.$toast.fail(`${data.message}`);
-                        reject('');
-                    }
-                })
-            })
-        },
-        // 返回
-        onNavBack() {
-            let fromSsjl = this.$store.getters.fromSsjl === 'true';
-            if(fromSsjl) {
-                let baseUrl = this.fromUrl;
-                window.location.href = `${baseUrl}/#/${ this.$route.query.fromMenu || 'device'}`;
-            } else {
-                this.$router.go(-1);
-            }
+    //页面传参
+    let params = { ...this.$route.query };
+    if (params.uid) {
+      this.uid = params.uid;
+      // 缓存从随手精灵传过来的token
+      this.$store.commit("ssjlToken", params.accessToken || "");
+      // 缓存从随手精灵传过来的标识
+      this.$store.commit("fromSsjl", params.fromSsjl);
+      // 是否显示 返回标签
+      this.showLeftArrow = this.$store.getters.fromSsjl === "true";
+      this.fromUrl = params.fromUrl;
+      console.log("fromUrl", this.fromUrl);
+      //初始化
+      this.init();
+    } else {
+      this.$toast("参数错误");
+    }
+  },
+  methods: {
+    // 获取b端token
+    getAuth() {
+      let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
+      let that = this;
+      return new Promise((resolve, reject) => {
+        APICore.getAuth({ manufactorId: manufactorId }).then((res) => {
+          let data = res.data;
+          if (data.code === 0) {
+            resolve(res.data.data);
+          } else {
+            that.$toast.fail(`${data.message}`);
+            reject("");
+          }
+        });
+      });
+    },
+    // 返回
+    onNavBack() {
+      let fromSsjl = this.$store.getters.fromSsjl === "true";
+      if (fromSsjl) {
+        let baseUrl = this.fromUrl;
+        window.location.href = `${baseUrl}/#/${
+          this.$route.query.fromMenu || "device"
+        }`;
+      } else {
+        this.$router.go(-1);
+      }
+    },
+    async init() {
+      if (!this.$route.query.accessToken) {
+        //  如果当前url没有 accessToken， 获取token,并且存储到本地缓存里面
+        let authToken = await this.getAuth();
+        this.$store.commit("ssjlToken", authToken);
+      }
+      let ssjlToken = this.$store.getters.ssjlToken;
+      let re = await this.api(
+        "/api/Question/Progress",
+        {
+          method: "GET",
+          sslVerify: false,
+          withCredentials: false,
+          params: {
+            uid: this.uid,
+          },
         },
-		async init() {
-            if(!this.$route.query.accessToken) {
-                //  如果当前url没有 accessToken， 获取token,并且存储到本地缓存里面
-                let authToken = await this.getAuth();
-                this.$store.commit('ssjlToken', authToken);
-            }
-            let ssjlToken = this.$store.getters.ssjlToken;
-			let re = await this.api('/api/Question/Progress', {
-				method: 'GET',
-				sslVerify: false,
-				withCredentials: false,
-				params: {
-					uid: this.uid,
-                },
-			}, ssjlToken)
-			if (re.success) {
-                this.info = re.response
-                setTimeout(() => {
-                    this.isSHowPage = true;
-                }, 800)
-				if (re.response && re.response.state === -1) {
-					this.$toast('用户不存在或未绑定手表')
-				} else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1 && !this.autoJump) {
-                    // 2023.6.1 需求变更，建模完成直接跳到心理健康汇总页面
-                    this.$router.replace(`/psychologicalMain?uid=${this.uid}&fromUrl=${this.fromUrl || ''}&fromMenu=${ this.showLeftArrow ? 'device' : ''}`);
-                }
-			} else {
-				this.$toast(re.msg)
+        ssjlToken
+      );
+      if (re.success) {
+        this.info = re.response;
+        setTimeout(() => {
+          this.isSHowPage = true;
+        }, 800);
+        if (re.response && re.response.state === -1) {
+          this.$toast("用户不存在或未绑定手表");
+        } else if (
+          re.response &&
+          re.response.initScaleState === 1 &&
+          re.response.progress === 1 &&
+          !this.autoJump
+        ) {
+          // 2023.6.1 需求变更，建模完成直接跳到心理健康汇总页面
+          this.$router.replace(
+            `/psychologicalMain?uid=${this.uid}&fromUrl=${
+              this.fromUrl || ""
+            }&fromMenu=${this.showLeftArrow ? "device" : ""}`
+          );
+        }
+      } else {
+        this.$toast(re.msg);
+      }
+    },
+    toQuestion() {
+      this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`);
+    },
+    api(url, config, token) {
+      let baseUrl =
+        process.env.NODE_ENV === "production"
+          ? "https://dbmq.rzliot.com/auth_heart"
+          : "https://dbmq.rzliot.com/heart";
+      setTimeout(() => {
+        this.$toast.loading({
+          message: "",
+          forbidClick: true,
+          duration: 0,
+        });
+      }, 100);
+      return new Promise((res) => {
+        axios({
+          url: `${baseUrl}${url}`,
+          ...config,
+          // 增加请求头部 token
+          headers: {
+            AccessToken: token,
+          },
+        })
+          .then((re) => {
+            if (re) {
+              if (re.data) {
+                console.log(re.data);
+                res(re.data);
+                this.$toast.clear();
+                return;
+              }
+              this.$toast(`信息获取失败-${re.status}`);
+              res(true);
+              this.$toast.clear();
+              return;
             }
-		},
-		toQuestion() {
-			this.$router.replace(`/PsychologicalQuestionnaire?uid=${this.uid}`)
-		},
-		api(url, config, token) {
-			let baseUrl = process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
-			setTimeout(() => {
-				this.$toast.loading({
-					message: '',
-					forbidClick: true,
-					duration: 0,
-				})
-			}, 100)
-			return new Promise((res) => {
-				axios({
-					url: `${baseUrl}${url}`,
-                    ...config,
-                    // 增加请求头部 token
-                    headers: {
-                        'AccessToken': token
-                    }
-				})
-					.then((re) => {
-						if (re) {
-							if (re.data) {
-								console.log(re.data)
-								res(re.data)
-								this.$toast.clear()
-								return
-							}
-							this.$toast(`信息获取失败-${re.status}`)
-							res(true)
-							this.$toast.clear()
-							return
-						}
-						this.$toast(`信息获取失败-${url}`)
-						res(true)
-						this.$toast.clear()
-					})
-					.catch((e) => {
-						this.$toast(`信息获取失败-${url}`)
-						res(true)
-						this.$toast.clear()
-						console.log(e)
-					})
-			})
-		},
-	},
-}
+            this.$toast(`信息获取失败-${url}`);
+            res(true);
+            this.$toast.clear();
+          })
+          .catch((e) => {
+            this.$toast(`信息获取失败-${url}`);
+            res(true);
+            this.$toast.clear();
+            console.log(e);
+          });
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 @font-face {
-	font-family: 'iconfont'; /* Project id 2652084 */
-	src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA=');
+  font-family: "iconfont"; /* Project id 2652084 */
+  src: url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQoAAsAAAAACFQAAAPaAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDBgqEIIQDATYCJAMMCwgABCAFhGcHQRtqBxEVnBvJPhLjmMRz8aCJJho3wfN8ne+5817QmS/XTApqUAGT1kmpHaidloBWXGdzOaZE+Aj1S75l+ek70v5OL82zLE6hFEIiJEbx96dyFkjAnwUAJnXNTcUP1HiBAtaxhhUr2KsXyLuo1/rCrIx6BgFM6tACo12HbjZpk4bPmkIRGksqkFbKpPFjhxOWRnRLpRBGCEKXamQTATDWGo+AjeHn5RdRCYNBQGHt0mtM+1Hc+Zr+1VZ+0gf1Gl+CgIcbQABQQI2NmWVIu7MfKk7WQGHWKTUpDKIRjEkjySSEglIHt/zHM0CCWMoUTFVRGBclugwEvto8VnH9qyAIhIDrIApTOVMVOr2mNDQjKSPHeM4zz6ZrPrYDY3fjR7a4+xTrY15tvZVw5KkZtx/X+HznyRPHnvCeqZskVmTOjMmRnF1girdzz7F4ju3uiB/xc53CoFi1HdXMW9Vu1TonY+gTzqB98OucaHakkW3GjxWJhX9kQXymq/AjJ5sfbS5Hc9nm5+KfvW9ZiYfnRXbG8tzG6nK7+u265yW2Hv38lNG3PmqlJo7Hjv0enTXu0fJ0ouuAIf1WL94ysHiw9aA5vca2mth0ZPGOvtu99JioF7HtiBd95LA4E7Gj3qPSVmO6tC3erV1e54F9yvUsu3Bh2Z7l+lwiLGETNtvRp9ylmtsGlm7eieOF8GLvn+zifT/067/LLFd8TdeujrureHTFyFEf+hbPVft+SK96RrBXE7tqx8rt21XpUO2QwwZswmZvsZsOz8+pN3TsrzXZ143c71m5NwLL+4xyo30jdTbxttGdTvRcMG4rPzrU0SFdrfTjHqXWlOrxuHR1FdK1219m/7yFvU52Hh3x6th9I25U9b0QTS1XvFyq35thACTvqtuqZZiOq5kq9v9/w/jtj8cOTW/2P2xpAN5vbXsP+5NxDcwN4RfjFPjbqkFApFYhULpOcFsQQLEkk4cBmLYJfm81QBZvh6uzweUghMlOwSBEcVCEKYdpqhoEsIhCkDDNwaQ67VdbZPsIzBFdDKjEC4GQwRsM0rgKigw+mKa+ECCPHwTJ4A8mrqy2s6gkZs2oBC3oB9SGBudoJJR7QD92iqtiF+RY4wjkSVbM7HFAHmNGvPpCxIFj6mHHT8OuIwhMDRpJKpFQpqmre0liqJ+sYRCFgFgAzQOgxkAMOB8t+e87gHhGOhQMxC52JlKeyAdyEjIAtlcOoLYb6R254ikQBEdHORiiB9gpO9LZSQII9YMaEIOQUA2IB0pSgnJQZbK8un+5XYCJtaUSQ5Ro0kcqeo5kKhy8J7dhKXWs6skEAAA=");
 }
 
 .iconfont {
-	font-family: 'iconfont' !important;
-	// font-size: 16px;
-	font-style: normal;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  font-family: "iconfont" !important;
+  // font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-caozuochenggong:before {
-	content: '\e60f';
+  content: "\e60f";
 }
 
 .icon-tishi:before {
-	content: '\e654';
+  content: "\e654";
 }
 
 .page {
-	width: 100%;
-	min-height: 100%;
-	box-sizing: border-box;
-	font-size: 3.6vw;
-	text-align: left;
-	background: #f4f4f4;
-	padding-bottom: 30vw;
-	.tip {
-		display: flex;
-		font-size: 3.3vw;
-		padding: 6vw 4vw;
-		justify-content: space-between;
-		align-items: center;
-		background: white;
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  font-size: 3.6vw;
+  text-align: left;
+  background: #f4f4f4;
+  padding-bottom: 30vw;
+  .tip {
+    display: flex;
+    font-size: 3.3vw;
+    padding: 6vw 4vw;
+    justify-content: space-between;
+    align-items: center;
+    background: white;
 
-		.icon {
-			overflow: hidden;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 40px;
-			height: 40px;
-			color: #ff865a;
-			font-size: 6vw;
-			border-radius: 50%;
-			background: #fff5f1;
-		}
-		.info {
-			width: calc(100% - 50px);
-			line-height: 20px;
-			text-align: left;
-			.titie {
-				color: #ff865a;
-			}
-			.content {
-				color: gray;
-			}
-		}
-	}
-	.step {
-		margin-top: 3vw;
-		padding: 4vw 8vw;
-		padding-right: 4vw;
-		background: white;
+    .icon {
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 40px;
+      height: 40px;
+      color: #ff865a;
+      font-size: 6vw;
+      border-radius: 50%;
+      background: #fff5f1;
+    }
+    .info {
+      width: calc(100% - 50px);
+      line-height: 20px;
+      text-align: left;
+      .titie {
+        color: #ff865a;
+      }
+      .content {
+        color: gray;
+      }
+    }
+  }
+  .step {
+    margin-top: 3vw;
+    padding: 4vw 8vw;
+    padding-right: 4vw;
+    background: white;
 
-		.name {
-			display: flex;
-			align-items: center;
-			font-size: 3.8vw;
-			padding-bottom: 2vw;
+    .name {
+      display: flex;
+      align-items: center;
+      font-size: 3.8vw;
+      padding-bottom: 2vw;
 
-			&::before {
-				content: '';
-				display: block;
-				width: 1vw;
-				height: 1vw;
-				border: 2px solid #638ee4;
-				border-radius: 50%;
-				margin-left: calc(-2vw - 4px);
-				margin-right: 1vw;
-			}
-		}
-		.title {
-			display: flex;
-			justify-content: space-between;
-			padding: 3vw 0;
+      &::before {
+        content: "";
+        display: block;
+        width: 1vw;
+        height: 1vw;
+        border: 2px solid #638ee4;
+        border-radius: 50%;
+        margin-left: calc(-2vw - 4px);
+        margin-right: 1vw;
+      }
+    }
+    .title {
+      display: flex;
+      justify-content: space-between;
+      padding: 3vw 0;
 
-			.status {
-				color: #ff865a;
-			}
-			.success {
-				color: #638ee4;
+      .status {
+        color: #ff865a;
+      }
+      .success {
+        color: #638ee4;
 
-				.icon {
-					font-size: 4vw;
-					margin-right: 1vw;
-				}
-			}
-		}
-		.sub_title {
-			padding: 3vw 0;
-			color: gray;
-        }
-        .step_button {
-            height: 14vw;
-            width: 60vw;
-            margin: auto;
-            .van-button--info {
-                background-color: #638ee4;
-                border: 1px solid #638ee4;
-            }
-        }
-	}
-    .completed {
-        position: relative;
-        margin-top: 3vw;
-        height: 400px;
-            @include center();
-            .van-button--info {
-                height: 8vh;
-                width: 75vw;
-                background-color: #638ee4;
-                border: 1px solid #638ee4;
-            }
+        .icon {
+          font-size: 4vw;
+          margin-right: 1vw;
         }
-	.button {
-		position: fixed;
-		left: 0;
-		right: 0;
-		bottom: 15vw;
-		width: 75vw;
-		height: 14vw;
-		margin: auto;
+      }
+    }
+    .sub_title {
+      padding: 3vw 0;
+      color: gray;
+    }
+    .step_button {
+      height: 14vw;
+      width: 60vw;
+      margin: auto;
+      .van-button--info {
+        background-color: #638ee4;
+        border: 1px solid #638ee4;
+      }
+    }
+  }
+  .completed {
+    position: relative;
+    margin-top: 3vw;
+    height: 400px;
+    @include center();
+    .van-button--info {
+      height: 8vh;
+      width: 75vw;
+      background-color: #638ee4;
+      border: 1px solid #638ee4;
+    }
+  }
+  .button {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 15vw;
+    width: 75vw;
+    height: 14vw;
+    margin: auto;
 
-		.van-button--info {
-			background-color: #638ee4;
-			border: 1px solid #638ee4;
-		}
-	}
+    .van-button--info {
+      background-color: #638ee4;
+      border: 1px solid #638ee4;
+    }
+  }
 }
 </style>