Merge branch 'feat-insight' into test

h5_frontend_web_run.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+###
+ # @Date: 2022-08-18 09:19:07
+ # @LastEditors: JinxChen
+ # @LastEditTime: 2022-08-18 10:06:40
+ # @FilePath: \TelpoH5FrontendWeb\h5_frontend_web_run.sh
+ # @description: 部署脚本
+###
+
+environment=$1
+version=$2
+echo "环境变量为${environment},版本为$version!"
+if [[ ${environment} = 'production' ]];
+then
+  echo "开始远程构建容器"
+  docker stop h5_frontend_web || true;
+  docker rm h5_frontend_web || true;
+  docker rmi -f $(docker images | grep registry.cn-shanghai.aliyuncs.com/tolpo_platform/h5_frontend_web | awk '{print $3}')
+  #docker login --username=telpo_linwl@1111649216405698 --password=telpo#1234 registry.cn-shanghai.aliyuncs.com;
+  #docker login --username=telpo_fengjj@1111649216405698 --password=PWDaliyun123 registry.cn-shanghai.aliyuncs.com
+  docker login --username=rzl_wangjx@1111649216405698 --password=telpo.123 registry.cn-shanghai.aliyuncs.com
+  docker pull registry.cn-shanghai.aliyuncs.com/tolpo_platform/h5_frontend_web:$version
+  docker run -p 8075:80 -d --restart=always --name h5_frontend_web registry.cn-shanghai.aliyuncs.com/tolpo_platform/h5_frontend_web:$version;
+  #删除产生的None镜像
+  docker rmi -f $(docker images | grep none | awk '{print $3}')
+  docker ps -a
+else
+    echo "开始在测试环境远程构建容器"
+  docker stop h5_frontend_web || true
+  docker rm h5_frontend_web || true
+  docker rmi -f $(docker images | grep 139.224.254.18:5000/h5_frontend_web | awk '{print $3}')
+  docker pull 139.224.254.18:5000/h5_frontend_web:$version
+  docker run -p 8075:80 -d --restart=always --name h5_frontend_web 139.224.254.18:5000/h5_frontend_web:$version;
+  #删除产生的None镜像
+  docker rmi -f $(docker images | grep none | awk '{print $3}')
+  docker ps -a
+fi

health_student_web_run.sh

@@ -0,0 +1,29 @@
+
+environment=$1
+version=$2
+echo "环境变量为${environment},版本为$version!"
+if [[ ${environment} = 'production' ]];
+then
+  echo "开始远程构建容器"
+  docker stop health_student_web || true;
+  docker rm health_student_web || true;
+  docker rmi -f $(docker images | grep registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web | awk '{print $3}')
+  #docker login --username=telpo_linwl@1111649216405698 --password=telpo#1234 registry.cn-shanghai.aliyuncs.com;
+  #docker login --username=telpo_fengjj@1111649216405698 --password=PWDaliyun123 registry.cn-shanghai.aliyuncs.com
+  docker login --username=rzl_wangjx@1111649216405698 --password=telpo.123 registry.cn-shanghai.aliyuncs.com
+  docker pull registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web:$version
+  docker run -p 8070:80 -d --restart=always --name health_student_web registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web:$version;
+  #删除产生的None镜像
+  docker rmi -f $(docker images | grep none | awk '{print $3}')
+  docker ps -a
+else
+    echo "开始在测试环境远程构建容器"
+  docker stop health_student_web || true
+  docker rm health_student_web || true
+  docker rmi -f $(docker images | grep 139.224.254.18:5000/health_student_web | awk '{print $3}')
+  docker pull 139.224.254.18:5000/health_student_web:$version
+  docker run -p 8070:80 -d --restart=always --name health_student_web 139.224.254.18:5000/health_student_web:$version;
+  #删除产生的None镜像
+  docker rmi -f $(docker images | grep none | awk '{print $3}')
+  docker ps -a
+fi

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "build-test": "vue-cli-service build --mode test",
     "lint": "vue-cli-service lint",
     "deps": "yarn upgrade-interactive --latest",
     "dev": "vue-cli-service serve --mode development",

setup_development.sh

@@ -0,0 +1,19 @@
+
+npm -v
+npm config set registry https://registry.npm.taobao.org
+npm install
+npm run build-dev
+image_version=`date +%Y%m%d%H%M`;
+docker stop health_student_web || true;
+docker rm health_student_web || true;
+# 删除镜像
+docker rmi -f $(docker images | grep telpo/health_student_web | awk '{print $3}')
+# 构建telpo/mrp:$image_version镜像
+docker build --no-cache . -t telpo/health_student_web:$image_version;
+#删除产生的None镜像
+docker rmi -f $(docker images | grep none | awk '{print $3}')
+# 查看镜像列表
+docker images;
+docker run -p 8070:80 -d --restart=always --name health_student_web telpo/health_student_web:$image_version;
+# 查看日志
+docker logs health_student_web;

setup_production.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+###
+ # @Date: 2022-08-18 09:19:07
+ # @LastEditors: JinxChen
+ # @LastEditTime: 2022-08-18 09:29:15
+ # @FilePath: \TelpoH5FrontendWeb\setup_production.sh
+ # @description:
+###
+npm -v
+npm config set registry https://registry.npm.taobao.org
+npm install
+npm run build
+image_version=$version;
+# 删除镜像
+ docker rmi -f $(docker images | grep registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web | awk '{print $3}')
+# 构建telpo/mrp:$image_version镜像
+docker build --no-cache . -t telpo/health_student_web:$image_version;
+#TODO:推送镜像到阿里仓库
+echo '=================开始推送镜像======================='
+#docker login --username=telpo_linwl@1111649216405698 --password=telpo#1234 registry.cn-shanghai.aliyuncs.com
+#docker login --username=telpo_fengjj@1111649216405698 --password=PWDaliyun123 registry.cn-shanghai.aliyuncs.com
+docker login --username=rzl_wangjx@1111649216405698 --password=telpo.123 registry.cn-shanghai.aliyuncs.com
+docker tag telpo/health_student_web:$image_version registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web:$image_version
+docker push registry.cn-shanghai.aliyuncs.com/tolpo_platform/health_student_web:$image_version
+echo '=================推送镜像完成======================='
+#删除产生的None镜像
+docker rmi -f $(docker images | grep none | awk '{print $3}')
+# 查看镜像列表
+docker images;

setup_test.sh

@@ -0,0 +1,29 @@
+
+###
+ # @Date: 2022-08-18 09:19:07
+ # @LastEditors: JinxChen
+ # @LastEditTime: 2022-08-18 09:29:35
+ # @FilePath: \TelpoH5FrontendWeb\setup_test.sh
+ # @description:
+###
+#!/bin/bash
+npm -v
+npm config set registry https://registry.npm.taobao.org
+npm install
+npm run build-test
+image_version=$version;
+# 删除镜像
+docker rmi -f $(
+  docker images | grep 139.224.254.18:5000/h5_frontend_web | awk '{print $3}'
+)
+# 构建telpo/mrp:$image_version镜像
+docker build --no-cache . -t health_student_web:$image_version;
+#TODO:推送镜像到私有仓库
+echo '=================开始推送镜像======================='
+docker tag health_student_web:$image_version 139.224.254.18:5000/h5_frontend_web:$image_version
+docker push 139.224.254.18:5000/h5_frontend_web:$image_version
+echo '=================推送镜像完成======================='
+#删除产生的None镜像
+docker rmi -f $(docker images | grep none | awk '{print $3}')
+# 查看镜像列表
+docker images;

src/views/insight/index.vue

@@ -6,15 +6,20 @@
       <div class="periodItem month" :class="{ active: active == 1 }" @click="active = 1">月</div>
     </div>
     <div class="periodSwitch">
-      <div class="arrow arrowLeft" @click="active = active == 0 ? 1 : 0">
+      <div class="arrow arrowLeft">
         <van-icon name="arrow-left"></van-icon>
       </div>
-      <div class="timearea">kdfdfkjhsojldkfho</div>
-      <div class="arrow arrowRight" @click="active = active == 1 ? 0 : 1">
+      <div class="timearea">2023-11-28~2023-11-24</div>
+      <div class="arrow arrowRight">
         <van-icon name="arrow"></van-icon>
       </div>
     </div>
-    <div class="label">情绪感知</div>
+    <div class="label">
+      <div class="left">情绪感知</div>
+      <div class="right">
+        <span @click="onRouterTo()">详情 ></span>
+      </div>
+    </div>
     <div class="periodNav">
       <div
         class="periodItem minPeriodItem"
@@ -46,7 +51,13 @@
         <div class="title">{{ item.name }}{{ emotionList[emotionActive].name }}倾向</div>
       </div>
     </div>
-    <div class="label">体征感知</div>
+    <div class="label">
+      <div class="left">体征感知</div>
+      <div class="right">
+        <span>详情 ></span>
+      </div>
+    </div>
+
     <div class="periodNav">
       <div
         class="periodItem minPeriodItem"
@@ -58,6 +69,14 @@
         <span>{{ item.name }}</span>
       </div>
     </div>
+    <!-- bmi显示/输入 -->
+    <div class="bmi" v-show="signActive == 2">
+      <p>身高:<span>170</span>cm</p>
+      <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>
+    </div>
     <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
       <div class="legendBox minLegendBox">
         <div class="legend">
@@ -84,10 +103,48 @@
       </div>
     </div>
     <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
+      <h4>运动步数</h4>
       <div class="Chat stepChart" id="stepChart"></div>
+      <div class="result">
+        <div class="wrapBox">
+          <div class="text">
+            <div class="left"><p>总步数：285</p></div>
+            <div class="right">
+              <img :src="upImg" alt="" />
+              <span>923</span>
+            </div>
+          </div>
+          <div class="text">
+            <div class="left"><p>平均步数：285</p></div>
+            <div class="right">
+              <img :src="downImg" alt="" />
+              <span>923</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
+      <h4>热量消耗</h4>
       <div class="Chat calorieChart" id="calorieChart"></div>
+      <div class="result">
+        <div class="wrapBox">
+          <div class="text">
+            <div class="left"><p>总消耗：285</p></div>
+            <div class="right">
+              <img :src="upImg" alt="" />
+              <span>923</span>
+            </div>
+          </div>
+          <div class="text">
+            <div class="left"><p>平均消耗：285</p></div>
+            <div class="right">
+              <img :src="downImg" alt="" />
+              <span>923</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -178,7 +235,15 @@ export default {
           type: 'severe',
           color: '#FF5F8B'
         }
-      ]
+      ],
+      bmi: {
+        height: '170',
+        weight: '57',
+        value: '24.5',
+        result: '肥胖'
+      },
+      upImg: require('@/assets/today/icons/up.png'),
+      downImg: require('@/assets/today/icons/down.png')
     };
   },
   created() {},
@@ -701,19 +766,19 @@ export default {
 
       if (!point) {
         option.series = [
-           {
+          {
             type: 'bar',
             barMaxWidth: 15,
             label: {
               show: true,
               color: '#000',
-              position: 'outside',
+              position: 'outside'
             },
             itemStyle: {
               borderRadius: 12
             }
-          },
-        ]
+          }
+        ];
       }
 
       return option;
@@ -725,6 +790,14 @@ export default {
     onSignClick(index) {
       this.signActive = index;
       // 体征选项变化重新渲染图表
+    },
+    onRouterTo(name) {
+      this.$router.push({
+        name: 'report',
+        query: {
+          name: name
+        }
+      });
     }
   }
 };
@@ -774,10 +847,36 @@ export default {
       font-size: 45px;
     }
   }
+  .bmi {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    white-space: nowrap;
+    padding: 40px 8px 0 8px;
+    font-weight: bold;
+
+    p {
+      padding: 0 5px;
+      font-size: 28px;
+    }
+    .van-button {
+      padding: 5px 10px;
+      margin-left: 50px;
+      font-size: 14px;
+      color: #333;
+      border-radius: 30px;
+    }
+  }
   .label {
     font-size: 40px;
     font-weight: bold;
-    padding: 30px 0;
+    padding: 30px 10px 30px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .right {
+      font-size: 30px;
+    }
   }
   .ChatBox {
     overflow: hidden;
@@ -786,7 +885,9 @@ export default {
     border: 2px solid #cdf348;
     border-radius: 70px;
     margin-top: 30px;
-
+    h4 {
+      padding: 40px 0 10px 60px;
+    }
     .legendBox {
       width: 100%;
       height: 150px;
@@ -899,11 +1000,40 @@ export default {
     }
     .Chat {
       width: calc(100vw - 60px);
-      height: 450px;
+      height: 500px;
+    }
+    .result {
+      height: 140px;
+      padding: 0 30px;
+      border-radius: 70px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      .wrapBox {
+        padding: 10px 180px 10px 60px;
+        width: 100%;
+        background-color: #e6e6e6;
+        border-radius: 70px;
+      }
+      .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .right {
+          @include center();
+          img {
+            height: 30px;
+            width: 30px;
+            object-fit: contain;
+            margin: 0 5px;
+          }
+        }
+      }
     }
   }
   .minChartBox {
-    height: 450px;
+    height: 760px;
   }
   .hiddenChart {
     width: 0;

src/views/myself/index.vue

@@ -245,7 +245,7 @@ export default {
     },
     getDeviceList() {
       ToastService.loading({ message: '正在加载', forbidClick: false });
-      let that = this;
+      /* let that = this; */
       APIDevice.deviceList({
         userId: this.$store.getters.userId,
         mapType: 'gaode',
@@ -267,12 +267,16 @@ export default {
 
           if (isNotNull(item.devicesList)) {
             this.currentDevice = { ...item.devicesList[0] };
-            item.devicesList.forEach(val => {
+            this.$store.commit('roleUser', item.devicesList[0].roleUser);
+            this.$store.commit('deviceType', item.devicesList[0].deviceType);
+            this.$store.commit('deviceId', item.devicesList[0].deviceId);
+            this.$store.commit('serialNo', item.devicesList[0].serialNo);
+            /* item.devicesList.forEach(val => {
               if (val.deviceId == that.$store.getters.deviceId) {
                 this.$store.commit('roleUser', val.roleUser);
                 this.$store.commit('deviceType', val.deviceType);
               }
-            });
+            }); */
           } else {
             this.$store.commit('deviceId', '');
             this.$store.commit('serialNo', '');

src/views/today/report.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- 周/月报 -->
   <div class="report">
-    <van-nav-bar title="心理监测周报" :border="true" @click-left="onNavBack">
+    <van-nav-bar title="周报" :border="true" @click-left="onNavBack">
       <template #left>
-        <van-icon name="arrow-left" size="24" style="padding: 0" v-show="params.isShowLeft" />
-        <span v-show="params.isShowLeft">返回</span>
+        <van-icon name="arrow-left" size="24" style="padding: 0" />
+        <span>返回</span>
       </template>
     </van-nav-bar>
     <div class="main">
@@ -65,13 +65,18 @@
       </div>
       <div class="statistics">
         <div class="list">
-          <div class="item" v-for="(item, index) in statisticsList" :key="index">
+          <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">
@@ -81,6 +86,9 @@
         </div>
       </div>
       <div class="line"></div>
+      <div class="chart-title">
+        <p>{{ echartsTitle }}</p>
+      </div>
       <!-- 数据图-柱形图 -->
       <div class="bar-chart">
         <div class="echart" ref="charts"></div>
@@ -90,7 +98,13 @@
       <div class="advice">
         <div class="content">
           <p class="title">健康建议</p>
-          <p>{{ weekResult.Advice || '--' }}</p>
+          <!-- <p>{{ weekResult.Advice || '--' }}</p> -->
+          <p>
+            健康建议抑郁是一种负性情绪，是人们遇到具体生活事件后，出现
+            的一种不愉快、烦闷压抑的内心体验。情绪受挫折的影响是很正常
+            的反应，不要任由情绪跟着负面想法走，让自己陷入抑郁之中。与
+            人沟通，有助于排解不良情绪；把注意力放到当下真正需要关注的 事情中来，积极应对困难，有助于改善现状。
+          </p>
         </div>
       </div>
       <!-- 概览 -->
@@ -99,9 +113,14 @@
           <div class="title">
             <span class="title-text">{{ surveyTitle }}</span>
             <div class="mood-list">
-              <div class="item" v-for="(item, index) in emotionList" :key="index">
+              <div
+                class="item"
+                v-for="(item, index) in emotionList"
+                :key="index"
+                :style="{ backgroundColor: item.color }"
+              >
                 <p>
-                  <span :style="{ color: item.color }" class="day">{{ item.days }}</span>
+                  <span class="day">{{ item.days }}</span>
                   <span class="day-text">天</span>
                   <img :src="calcWeekImg(item.days, item.lastDay)" alt="" />
                   <span class="day-text status">{{ calcWeekImg(item.days, item.lastDay, true) }}</span>
@@ -161,12 +180,12 @@ export default {
                 } */
       ],
       statisticsList: [
-        /*  { label: "最大值", value: "75", time: "08:15" },
-                { label: "最小值", value: "40", time: "10:15" },
-                { label: "最近值", value: "50", time: "18:15" } */
+        /*  { label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' },
+        { label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' },
+        { label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' } */
       ],
       emotionList: [],
-      surveyTitle: '本周概览',
+      surveyTitle: '本周概况',
       echarts: null,
       // 路由传过来的情绪参数
       emoName: '',
@@ -223,7 +242,8 @@ export default {
       params: {},
       weekResult: {},
       upImg: require('@/assets/today/icons/up.png'),
-      downImg: require('@/assets/today/icons/down.png')
+      downImg: require('@/assets/today/icons/down.png'),
+      signGrid: []
     };
   },
   created() {
@@ -265,7 +285,7 @@ export default {
           useUTC: false
         },
         title: {
-          text: this.echartsTitle,
+          /* text: this.echartsTitle, */
           left: 1,
           right: 25,
           bottom: 20,
@@ -343,7 +363,7 @@ export default {
           top: '20%',
           left: '1%',
           right: '5%',
-          bottom: '15%',
+          bottom: '5%',
           containLabel: true
         },
         xAxis: {
@@ -386,7 +406,7 @@ export default {
               color: '#FFF',
               fontSize: 14
             },
-            show: true,
+            show: false,
             height: 25,
             bottom: '3%',
             handleStyle: {
@@ -628,7 +648,7 @@ export default {
         process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
       let reqUrl = `${baseUrl}/api/Data/GetWeekResultDetail`;
       let reqParams = {
-        recordId: this.params.recordId
+        recordId: /* this.params.recordId */ '1728096156447281486'
       };
       axios
         .get(reqUrl, {
@@ -701,7 +721,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: '最小值',
@@ -710,7 +731,8 @@ 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 = {
             label: '平均值',
@@ -719,7 +741,8 @@ export default {
               ? this.currentDays === 0
                 ? this.$dayjs(data.AvgDesc).format('HH:mm')
                 : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm')
-              : ''
+              : '',
+            bgColor: '#2ea7e0'
           };
           this.statisticsList.push(Max);
           this.statisticsList.push(Min);
@@ -897,11 +920,7 @@ export default {
     },
     onNavBack() {
       this.$router.push({
-        name: 'emotionDetails',
-        query: {
-          uid: this.params.uid,
-          name: this.params.name
-        }
+        name: 'Insight'
       });
     },
     // 计算字体显示的颜色

src/views/today/scss/report.scss

@@ -9,27 +9,25 @@
         height: calc(100vh - 90px);
         overflow: scroll;
         background-color: #fff;
-
+        padding: 0 20px;
         .line {
             height: 22px;
             background-color: $lineGray;
         }
 
         .overall-rating {
-            padding: 46px 30px;
+            padding: 46px 15px;
             margin-bottom: 18px;
-
             .con {
-                padding: 34px 36px;
+                padding: 34px 20px;
                 display: flex;
                 justify-content: flex-start;
                 align-items: flex-start;
                 flex-direction: column;
                 font-size: 28px;
                 background: #FFFFFF;
-                border: 1px solid #535353;
-                box-shadow: 2px 10px 0px 0px $green;
-                border-radius: 10px;
+                border: 1px solid #cdf348;
+                border-radius: 40px;
 
                 p {
                     font-size: 36px;
@@ -193,21 +191,22 @@
                 font-size: 32px;
 
                 .item {
-                    @include center();
+                   display: flex;
+                   justify-content: flex-start;
+                   align-items: flex-start;
                     width: 136px;
-                    padding: 10px;
+                    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;
-                        font-weight: bold;
-                        padding: 10px;
                     }
 
                     .bottom {
@@ -216,40 +215,41 @@
                 }
             }
         }
-
+        .chart-title {
+            padding: 30px;
+            font-size: 36px;
+            font-weight: bold;
+            color: #282828;
+        }
         .bar-chart {
-            height: 700px;
+            height: 500px;
             background-color: #fff;
             padding: 0 10px;
-
+            border: 1px solid #cdf348;
+            border-radius: 70px;
             .echart {
-                height: 700px;
+                height: 500px;
                 padding: 0 10px;
             }
         }
-
         .advice {
-            padding: 52px 30px 60px 30px;
-
+            padding: 52px 20px 60px 20px;
             .content {
                 background: #F2F6FF;
                 border-radius: 20px;
-                padding: 40px 30px;
+                padding: 0px 10px;
                 text-align: left;
 
                 p {
-                    font-size: 30px;
-                    font-weight: 400;
+                    font-size: 24px;
                     color: #707070;
                     line-height: 46px;
                 }
-
                 .title {
-                    font-size: 36px;
+                    font-size: 26px;
                     font-weight: bold;
-                    color: $green;
+                    /* color: $green; */
                     line-height: 36px;
-                    padding-bottom: 26px;
                 }
             }
         }
@@ -277,20 +277,19 @@
 
                         .item {
                             width: 214px;
-                            height: 198px;
-                            background-color: #F2F6FF;
+                            height: 250px;
                             display: flex;
                             justify-content: center;
                             align-items: flex-start;
                             flex-direction: column;
                             padding-left: 60px;
-
+                            color: #fff;
+                            border: 1px solid #cdf348;
+                            border-radius: 40px;
                             p {
                                 font-size: 28px;
                                 padding: 0;
-                                color: #666666;
                                 @include center();
-                                /* align-items: flex-end; */
                                 .day {
                                     /* padding: 5px; */
                                     font-size: 56px;