From 5439f894c839f6ec3329dbb859c3b3f332763ada Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Tue, 26 Dec 2023 10:05:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E5=BF=83=E7=90=86?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=96=87=E5=AD=97=E6=A0=B7=E5=BC=8F=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20navbar=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20=E4=BF=AE=E5=A4=8D=20=E7=83=AD=E6=9B=B4=E6=96=B0=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |  4 ++
 .env.production                           |  4 ++
 .env.test                                 |  4 ++
 src/components/NavBar.vue                 | 13 +++++-
 src/components/SubmenuList.vue            |  4 +-
 src/views/insight/index.vue               |  9 ++--
 src/views/insight/monthReport.vue         |  2 +-
 src/views/today/emotionDetails.vue        | 39 +++++++++-------
 src/views/today/scss/emotion-details.scss | 57 ++++++++++++-----------
 src/views/today/scss/signs-details.scss   |  2 +-
 src/views/today/signsDetails.vue          |  7 ++-
 vue.config.js                             |  1 +
 12 files changed, 91 insertions(+), 55 deletions(-)
 create mode 100644 .env.development
 create mode 100644 .env.production
 create mode 100644 .env.test

diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..9e26dad
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,4 @@
+NODE_ENV='development'
+# must start with VUE_APP_ 
+VUE_APP_ENV = 'development'
+ 
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..4b2d764
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,4 @@
+NODE_ENV='production'
+# must start with VUE_APP_
+VUE_APP_ENV = 'production'
+ 
\ No newline at end of file
diff --git a/.env.test b/.env.test
new file mode 100644
index 0000000..e60a797
--- /dev/null
+++ b/.env.test
@@ -0,0 +1,4 @@
+NODE_ENV='test'
+# must start with VUE_APP_
+VUE_APP_ENV = 'test'
+ 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 30b4f91..9b2f9a2 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -9,6 +9,7 @@
       @click-left="onClickLeft"
       @click-right="onClickRight"
     >
+      <template #right><slot name="right"></slot> </template>
     </van-nav-bar>
   </div>
 </template>
@@ -49,7 +50,7 @@ export default {
   }
 };
 </script>
-<style scoped lang="scss">
+<style lang="scss">
 .nav-bar {
   position: fixed !important;
   left: 0;
@@ -57,6 +58,16 @@ export default {
   height: 100px;
   width: 100%;
   z-index: 999;
+  color: #333;
+  .van-nav-bar {
+    .van-nav-bar__content {
+      .van-nav-bar__right {
+        .van-nav-bar__text {
+          color: #333;
+        }
+      }
+    }
+  }
 }
 
 /* @import url(); 引入css类 */
diff --git a/src/components/SubmenuList.vue b/src/components/SubmenuList.vue
index 7cdc33b..bd35044 100644
--- a/src/components/SubmenuList.vue
+++ b/src/components/SubmenuList.vue
@@ -180,7 +180,7 @@ export default {
       padding-left: 20px;
       display: grid;
       grid-template-columns: repeat(4, auto);
-      grid-gap: 40px;
+      grid-gap: 20px;
       .item {
         position: relative;
         /* height: 140px; */
@@ -202,7 +202,7 @@ export default {
         .text {
           @include flexbox(space-around, center, column, nowrap);
           padding: 5px 0;
-          font-size: 28px;
+          font-size: 24px;
           font-weight: 400;
         }
       }
diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue
index 6d16e27..98efa3c 100644
--- a/src/views/insight/index.vue
+++ b/src/views/insight/index.vue
@@ -75,7 +75,7 @@
       <p>体重:<span>60</span>kg</p>
       <p>BMI:<span>24.5</span></p>
       <p>{{ bmi.result }}</p>
-      <van-button type="primary" size="mini">更新</van-button>
+      <van-button size="mini">更新</van-button>
     </div>
     <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
       <div class="legendBox minLegendBox">
@@ -862,13 +862,14 @@ export default {
     .van-button {
       padding: 5px 10px;
       margin-left: 50px;
-      font-size: 14px;
-      color: #333;
+      font-size: 12px;
+      color: #fff;
       border-radius: 30px;
+      background-color: $green;
     }
   }
   .label {
-    font-size: 40px;
+    font-size: 36px;
     font-weight: bold;
     padding: 30px 10px 30px 0;
     display: flex;
diff --git a/src/views/insight/monthReport.vue b/src/views/insight/monthReport.vue
index 3544b37..204c36d 100644
--- a/src/views/insight/monthReport.vue
+++ b/src/views/insight/monthReport.vue
@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="pageContent monthReport">
-    <NavBar title="月报" @on-click-left="onNavBack"></NavBar>
+    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
     <div class="periodSwitch">
       <div class="arrow arrowLeft">
         <van-icon name="arrow-left"></van-icon>
diff --git a/src/views/today/emotionDetails.vue b/src/views/today/emotionDetails.vue
index 98660ce..e6f19bc 100644
--- a/src/views/today/emotionDetails.vue
+++ b/src/views/today/emotionDetails.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="psychological-container">
-    <van-nav-bar title="情绪监测" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
-      <template #left>
-        <van-icon name="arrow-left" size="24" style="padding: 0" />
-        <span>返回</span>
-      </template>
-    </van-nav-bar>
+    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
     <div class="tab-bar">
       <div class="date-tab-con">
         <div class="date-tab-list">
@@ -29,9 +24,9 @@
         <!-- 标题 -->
         <div class="title">
           <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp" /></div>
-          <div class="title-right" v-show="currentDays === 0">
+          <!-- <div class="title-right" v-show="currentDays === 0">
             <p @click="onHistory">历史监测</p>
-          </div>
+          </div> -->
         </div>
         <!-- 日历 -->
 
@@ -99,13 +94,18 @@
 
         <div class="statistics">
           <div class="list">
-            <div class="item" v-for="(item, index) in statisticsList" :key="index" :style="{ backgroundColor: '' }">
+            <div
+              class="item"
+              v-for="(item, index) in statisticsList"
+              :key="index"
+              :style="{ backgroundColor: item.bgColor }"
+            >
               <div class="top">
                 <span>{{ item.label || '--' }}</span>
               </div>
 
               <div class="middle">
-                <span :style="{ color: calcColor(item.value) }">{{ item.value || '--' }}</span>
+                <span>{{ item.value || '--' }}</span>
               </div>
 
               <div class="bottom">
@@ -263,9 +263,13 @@
 
 <script>
 import { EmotionModel, PsyBaseUrl } from '@/config/models';
+import NavBar from '@/components/NavBar';
 import axios from 'axios';
 export default {
   name: 'psychological-monitor',
+  components: {
+    NavBar
+  },
   data() {
     return {
       // 日期选择标签
@@ -920,7 +924,8 @@ export default {
                 ? this.currentDays === 0
                   ? this.$dayjs(data.MaxDesc).format('HH:mm')
                   : this.$dayjs(data.MaxDesc).format('MM/DD HH:mm')
-                : ''
+                : '',
+              bgColor: '#ff5f8b'
             };
             let Min = {
               label: '最小值',
@@ -929,9 +934,10 @@ export default {
                 ? this.currentDays === 0
                   ? this.$dayjs(data.MinDesc).format('HH:mm')
                   : this.$dayjs(data.MinDesc).format('MM/DD HH:mm')
-                : ''
+                : '',
+              bgColor: '#189b3b'
             };
-            let Avg = {
+            /* let Avg = {
               label: '平均值',
               value: data.Avg,
               time: data.AvgDesc
@@ -939,7 +945,7 @@ export default {
                   ? this.$dayjs(data.AvgDesc).format('HH:mm')
                   : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm')
                 : ''
-            };
+            }; */
             let Current = {
               label: '最近值',
               value: data.Current,
@@ -947,11 +953,12 @@ export default {
                 ? this.currentDays === 0
                   ? this.$dayjs(data.CurrentDesc).format('HH:mm')
                   : this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm')
-                : ''
+                : '',
+              bgColor: '#2ea7e0'
             };
             this.statisticsList.push(Max);
             this.statisticsList.push(Min);
-            this.statisticsList.push(Avg);
+            /* this.statisticsList.push(Avg); */
             this.statisticsList.push(Current);
             // 周报月报底部显示数据
             let NoneDay = {
diff --git a/src/views/today/scss/emotion-details.scss b/src/views/today/scss/emotion-details.scss
index 346f269..e63e6bc 100644
--- a/src/views/today/scss/emotion-details.scss
+++ b/src/views/today/scss/emotion-details.scss
@@ -106,7 +106,7 @@
                     font-weight: bold;
                     @include center();
                     &.active {
-                        color: #333;
+                        color: #fff;
                         background-color: $green;
                     }
                 }
@@ -201,37 +201,38 @@
                 }
             }
             .statistics {
-                position: relative;
-                padding: 0px 20px 10px 20px;
+                height: 100%;
+                padding: 10px 40px;
                 .list {
-                    flex: 1;
-                    width: 100%;
+                  display: grid;
+                  grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
+                  /* grid-template-rows: repeat(3, 1fr); */
+                  gap: 40px;
+                  font-size: 32px;
+                  .item {
                     display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-                    font-size: 32px;
-                    .item {
-                        @include center();
-                        width: 126px;
-                        padding: 20px;
-                        /* height: px2rem(136); */
-                        flex-direction: column;
-                        /* border: 1px solid $border_color;
-                        border-radius: 30px; */
-                        .top {
-                            font-size: 24px;
-                        }
-                        .middle {
-                            font-size: 48px;
-                            font-weight: bold;
-                            padding: 10px;
-                        }
-                        .bottom {
-                            font-size: 18px
-                        }
+                    justify-content: flex-start;
+                    align-items: flex-start;
+                    padding: 30px;
+                    /* height: px2rem(136); */
+                    flex-direction: column;
+                    border: 1px solid $border_color;
+                    border-radius: 30px;
+                    color: #fff;
+                    .top {
+                      font-size: 24px;
+                    }
+            
+                    .middle {
+                      font-size: 48px;
                     }
+            
+                    .bottom {
+                      font-size: 18px;
+                    }
+                  }
                 }
-            }
+              }
         }
         .line {
             position: relative;
diff --git a/src/views/today/scss/signs-details.scss b/src/views/today/scss/signs-details.scss
index 22f6214..5936ba7 100644
--- a/src/views/today/scss/signs-details.scss
+++ b/src/views/today/scss/signs-details.scss
@@ -228,7 +228,7 @@
                             border-bottom: 8px solid $green;
                         } */
                         &.active {
-                            color: #333;
+                            color: #fff;
                             background-color:  $green;
                         }
                         &.notClick {
diff --git a/src/views/today/signsDetails.vue b/src/views/today/signsDetails.vue
index a5bc3d8..c2aa99e 100644
--- a/src/views/today/signsDetails.vue
+++ b/src/views/today/signsDetails.vue
@@ -1,8 +1,7 @@
 <!--  -->
 <template>
   <div class="signs">
-    <van-nav-bar title="心率监测" :border="true" :left-arrow="true" @click-left="onNavBack" left-text="返回">
-    </van-nav-bar>
+    <NavBar title="心率监测" @on-click-left="onNavBack" right-text="历史"> </NavBar>
     <div class="main">
       <div class="date">
         <div class="left">
@@ -128,7 +127,11 @@
 </template>
 
 <script>
+import NavBar from '@/components/NavBar';
 export default {
+  components: {
+    NavBar
+  },
   data() {
     return {
       currentRateOut: 100,
diff --git a/vue.config.js b/vue.config.js
index 58ab939..baa8842 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -18,6 +18,7 @@ module.exports = defineConfig({
   devServer: {
     port: 9093, // 端口
     open: false, // 启动后打开浏览器
+    hot: true, //热更新
     client: {
       overlay: {
         //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层