Merge remote-tracking branch 'origin/test' into wzlDevelop

# Conflicts:
#	src/views/optimize/index.vue
#	src/views/today/index.vue

src/components/TopNavBar.vue

@@ -0,0 +1,59 @@
+<!--  -->
+<template>
+  <div class="nav-bar">
+    <van-nav-bar
+        :title="title"
+        @click-left="onClickLeft"
+        @click-right="onClickRight"
+    >
+        <template #left>
+            <van-icon :name="LeftIcon" size="32" />
+        </template>
+        <template #right>
+            <van-icon :name="RightIcon" dot size="18" />
+        </template>
+    </van-nav-bar>
+  </div>
+</template>
+
+<script>
+    import LeftIcon from "@/assets/icons/1_75.png";
+    import RightIcon from "@/assets/icons/1_30.png";
+    export default {
+        components: {},
+        name: 'NavBar',
+        props: {
+            title: {
+                type: String,
+                default: '吕子宣 LV 10'
+            }
+        },
+        data() {
+            return {
+                LeftIcon,
+                RightIcon
+            };
+        },
+        created() {},
+        mounted() {},
+        methods: {
+            onClickLeft(value) {
+                this.$emit('on-click-left', value);
+            },
+            onClickRight(value) {
+                this.$emit('on-click-right', value);
+            }
+        }
+    };
+</script>
+<style scoped lang="scss">
+    .nav-bar {
+        position: absolute !important;
+        left: 0;
+        top: 0;
+        height: 100px;
+        width: 100%;
+    }
+
+    /* @import url(); 引入css类 */
+</style>

src/views/optimize/index.vue

@@ -1,19 +1,169 @@
 <!--  -->
 <template>
-  <div>
+  <div class="optimize">
+    <!-- 头部导航 -->
+    <TopNavBar />
+    <!-- 专家介绍 -->
+    <div class="expert-box">
+      <van-swipe indicator-color="white">
+        <van-swipe-item v-for="(image, index) in expertImages" :key="index">
+          <img v-lazy="image" />
+          <!-- <p>了解详情</p> -->
+        </van-swipe-item>
+      </van-swipe>
+    </div>
+    <!-- 养育话题 -->
+    <div class="parenting">
+      <div class="title">
+        <p>养育话题</p>
+        <a href="/">查看更多</a>
+      </div>
+      <ul>
+        <li>
+          <img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
+          <p>拖延症</p>
+          <span>L1入门 12分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
+          <p>沉迷网络</p>
+          <span>L1入门 40分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_24.png" alt="不自信" />
+          <p>不自信</p>
+          <span>L1入门 25分钟</span>
+        </li>
+      </ul>
+    </div>
+    <!-- 训练营 -->
+    <div class="train">
+      <div class="title">
+        <p>训练营</p>
+      </div>
+      <div class="main">
+        <ul>
+          <li>
+            <div class="left">
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
+              <div>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
+              </div>
+            </div>
+            <img src="@/assets/today/images/2_42.png" />
+          </li>
+          <li>
+            <div class="left">
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
+              <div>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
+              </div>
+            </div>
+            <img src="@/assets/today/images/2_42.png" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 心理咨询 -->
+    <div class="psychology">
+      <div class="title">
+        <p>心理咨询</p>
+      </div>
+      <div class="select">
+        <ul>
+          <li>
+            <img src="@/assets/optimize/icons/3_55.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_55.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
+        </ul>
+      </div>
+      <div class="main">
+        <div class="top">
+          <p>黛建松</p>
+          <span>清华大学心理学教授</span>
+          <img src="@/assets/optimize/images/3_48.png" alt="" />
+        </div>
+        <div class="bottom">
+          <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
+          <ul>
+            <li>焦虑</li>
+            <li>抑郁</li>
+            <li>儿童心理</li>
+            <li>亲子关系</li>
+            <li>青春期心理</li>
+            <li>家庭关系</li>
+            <li>压力管理</li>
+          </ul>
+          <div>
+            <h5>
+              <img src="@/assets/optimize/icons/location.png" alt="" />
+              <span>郴州市苏仙区</span>
+            </h5>
+            <p>¥2480</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 底部导航 -->
+    <TabBar />
   </div>
 </template>
 
 <script>
-export default {
-  data() {
-    return {};
-  },
-  created() {},
-  mounted() {},
-  methods: {}
-};
+  import Vue from 'vue';
+  import TabBar from '@/components/TabBar';
+  import TopNavBar from '@/components/TopNavBar';
+  import expertImage from "@/assets/optimize/images/3_08.png";
+  import { Swipe, SwipeItem, Lazyload } from 'vant';
+  Vue.use(Lazyload);
+  Vue.use(Lazyload, {
+    lazyComponent: true,
+  });
+  export default {
+    components: {
+      TabBar, 
+      TopNavBar,
+      [Swipe.name]: Swipe,
+      [SwipeItem.name]: SwipeItem,
+      [Lazyload.name]: Lazyload,
+    },
+    data() {
+      return {
+        expertImages: [
+          expertImage,
+          expertImage
+        ],
+      };
+    },
+    created() {},
+    mounted() {},
+    methods: {}
+  };
 </script>
 <style scoped>
-/* @import url(); 引入css类 */
+  @import url("./scss/index.scss");
 </style>

src/views/optimize/scss/index.scss

@@ -0,0 +1,269 @@
+.optimize {
+    padding: 100.06px 0;
+    background-color: #fff;
+    min-height: 100vh;
+    .expert-box {
+        padding: 40px 32px;
+        height: 400px;
+        .van-swipe {
+            height: 100%;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+        .van-swipe-item {
+            position: relative;
+            p {
+                position: absolute;
+                right: 40px;
+                bottom: 40px;
+                font-size: 24px;
+                color: #fff;
+                padding: 10px 18px 10px 15px;
+                background-color: #000;
+                border-radius: 10px;
+            }
+        }
+    }
+    .title {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        align-content: space-between;
+        justify-content: space-between;
+        p {
+            font-size: 26px;
+            color: #fff;
+            padding: 10px 30px;
+            background-color: #000;
+            border-radius: 40px;
+            font-weight: bold;
+        }
+        a {
+            font-size: 20px;
+            color: #000;
+            padding: 10px 30px;
+            background-color: #dfdfdf;
+            border-radius: 40px;
+            font-weight: bold;
+        }
+    }
+    .parenting {
+        padding: 0 32px;
+        ul {
+            width: 100%;
+            margin-top: 24px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            li {
+                width: 30%;
+                img {
+                    width: 100%;
+                    height: 200px;
+                    object-fit: contain;
+                }
+                p {
+                    text-align: center;
+                    font-size: 30px;
+                    color: #000;
+                    font-weight: bold;
+                }
+                span {
+                    text-align: center;
+                    font-size: 20px;
+                    color: grey;
+                    display: block;
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+    .train {
+        padding: 52px 32px;
+        .main {
+            width: 100%;
+            overflow-x: scroll;
+            ul {
+                width: max-content;
+                margin-top: 30px;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: flex-start;
+                li {
+                    width: 480px;
+                    background-color: #2ea7e0;
+                    padding: 40px;
+                    border-radius: 50px;
+                    display: flex;
+                    align-items: center;
+                    align-content: space-between;
+                    justify-content: space-between;
+                    & + li {
+                        margin-left: 30px;
+                    }
+                    .left {
+                        p {
+                            font-size: 38px;
+                            color: #000;
+                            font-weight: bold;
+                        }
+                        span {
+                            display: block;
+                            font-size: 30px;
+                            color: #000;
+                        }
+                        div {
+                            display: flex;
+                            flex-wrap: wrap;
+                            align-items: center;
+                            justify-content: flex-start;
+                            margin-top: 10px;
+                            h5 {
+                                padding: 8px 16px;
+                                background-color: #000;
+                                font-size: 20px;
+                                color: #c2813f;
+                                border-radius: 20px;
+                            }
+                            s {
+                                font-style: normal;
+                                font-size: 24px;
+                                color: #fff;
+                                display: block;
+                                margin-left: 16px;
+                            }
+                        }
+                    }
+                    img {
+                        height: 140px;
+                        object-fit: contain;
+                    }
+                }
+            }
+        }
+    }
+    .psychology {
+        padding-bottom: 40px;
+        .title {
+            padding: 0 32px;
+        }
+        .select {
+            margin: 30px 0 0 32px;
+            overflow-x: scroll;
+            ul {
+                width: max-content;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: flex-start;
+                li {
+                    img {
+                        width: 100px;
+                        height: 100px;
+                        object-fit: contain;
+                    }
+                    & + li {
+                        margin-left: 25px;
+                    }
+                }
+            }
+        }
+        .main {
+            padding: 0 32px;
+            margin-top: 30px;
+            .top {
+                background-color: #179b3b;
+                border-radius: 60px;
+                padding: 40px;
+                position: relative;
+                height: 280px;
+                p {
+                    color: #fff;
+                    font-size: 54px;
+                    font-weight: bold;
+                }
+                span {
+                    color: #fff;
+                    font-size: 26px;
+                    font-weight: normal;
+                }
+                img {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+                    object-fit: contain;
+                    width: 55%;
+                }
+            }
+            .bottom {
+                padding: 40px 30px;
+                border-radius: 60px;
+                border: 5px solid #ecff9c;
+                margin-top: -40px;
+                z-index: 2;
+                position: relative;
+                background-color: #fff;
+                h4 {
+                    padding: 0 20px;
+                    font-size: 32px;
+                    color: #000;
+                    span {
+                        color: #a3a3a3;
+                        margin: 0 6px;
+                    }
+                }
+                ul {
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    justify-content: flex-start;
+                    margin-top: 20px;
+                    li {
+                        margin: 10px;
+                        color: #000;
+                        padding: 10px 20px;
+                        border-radius: 40px;
+                        background-color: #ecff9c;
+                        font-size: 22px;
+                        font-weight: bold;
+                    }
+                }
+                div {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    align-content: space-between;
+                    justify-content: space-between;
+                    margin-top: 40px;
+                    h5 {
+                        display: flex;
+                        flex-wrap: wrap;
+                        align-items: flex-end;
+                        justify-content: flex-start;
+                        img {
+                            width: 50px;
+                            object-fit: contain;
+                        }
+                        span {
+                            color: #000;
+                            font-size: 28px;
+                            margin-left: 10px;
+                        }
+                    }
+                    p {
+                        font-size: 54px;
+                        color: #179b3b;
+                        font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+}

src/views/today/index.vue

@@ -1,19 +1,250 @@
-<!--  -->
+<!-- 今日 -->
 <template>
-  <div>
+  <div class="today">
+    <!-- 头部导航 -->
+    <TopNavBar />
+    <!-- 今日状态 -->
+    <div class="today-status">
+      <img class="img" src="@/assets/today/images/2_03.png" />
+      <img class="icon" src="@/assets/today/icons/2_12.png" @click="show = true"/>
+      <div class="status">
+        <p>状态优秀</p>
+        <ul>
+          <li class="toobad"></li>
+          <li class="ordinary"></li>
+          <li class="sameas"></li>
+          <li class="excellent active"></li>
+        </ul>
+      </div>
+      <div class="interpret">
+        <p>工作学习要有度，适当摸鱼也很好，不用太卷哟！保持张弛
+有度的节奏，是应对压力的有效方法。
+综合今日的HRV(MSSD)和静息心率情况看，你今天整体状
+态优秀，身体压力状态较小，能很好应对今日工作生活中的
+挑战，请继续保持优秀状态。
+相信自己，你一定可以实现你的目标！</p>
+        <hr />
+        <div class="bottom">
+          <p>详细解读</p>
+          <div>
+            <span>日记</span>
+            <img src="@/assets/today/icons/2_22.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 今日情绪感知 -->
+    <div class="emotion">
+      <div class="title">
+        <p>今日情绪感知</p>
+        <div>
+          <p>4.28</p>
+          <van-icon name="arrow" size="18" />
+        </div>
+      </div>
+      <ul>
+        <li>
+          <h4>40</h4>
+          <p>抑郁倾向</p>
+          <span>无抑郁倾向</span>
+          <time>12:30</time>
+        </li>
+        <li>
+          <h4>55</h4>
+          <p>抑郁倾向</p>
+          <span>无抑郁倾向</span>
+          <time>12:30</time>
+        </li>
+        <li>
+          <h4>75</h4>
+          <p>抑郁倾向</p>
+          <span>无抑郁倾向</span>
+          <time>12:30</time>
+        </li>
+      </ul>
+    </div>
+    <!-- 今体征感知 -->
+    <div class="perception">
+      <div class="title">
+        <p>今体征感知</p>
+        <div>
+          <p>4.28</p>
+          <van-icon name="arrow" size="18" />
+        </div>
+      </div>
+      <ul>
+        <li>
+          <h4>36.8</h4>
+          <p>体温</p>
+        </li>
+        <li>
+          <h4>92</h4>
+          <p>心率</p>
+        </li>
+        <li>
+          <h4>6000</h4>
+          <p>步数</p>
+        </li>
+      </ul>
+      <div class="tip">
+        <img class="img" src="@/assets/today/icons/2_25.png" />
+        <p><span>温馨提示：</span>检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。</p>
+      </div>
+    </div>
+    <!-- 步数 -->
+    <div class="step">
+      <div class="main">
+        <ul>
+          <li>
+            <p class="specific"><span>10567</span>/6000步</p>
+            <p class="category">步数<span>达标</span></p>
+          </li>
+          <li>
+            <p class="specific"><span>4</span>/5千米</p>
+            <p class="category">行程<span>未达标</span></p>
+          </li>
+          <li>
+            <p class="specific"><span>588</span>/600里卡</p>
+            <p class="category">消耗<span>达标</span></p>
+          </li>
+        </ul>
+        <div class="annular">
+          <van-circle 
+              v-model="currentRate1" 
+              size="160px"
+              color="#179b3b"
+              layer-color="#F8F8F8"
+              :rate="90" 
+              :speed="50" 
+              :stroke-width="120" 
+          />
+          <van-circle 
+              v-model="currentRate2" 
+              size="129px"
+              color="#ff5f8b"
+              layer-color="#F8F8F8"
+              :rate="80" 
+              :speed="50" 
+              :stroke-width="140"
+          />
+          <p>多走4567步</p>
+        </div>
+      </div>
+    </div>
+    <!-- 情绪日记 -->
+    <div class="diary">
+      <div class="title">
+        <p>情绪日记</p>
+        <div>
+          <div>
+            <p>保存</p>
+            <van-icon name="arrow" size="18" />
+          </div>
+        </div>
+      </div>
+      <div class="main">
+        <van-checkbox-group v-model="result">
+          <van-checkbox name="a" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_72.png" />
+          </van-checkbox>
+          <van-checkbox name="b" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_59.png" />
+          </van-checkbox>
+          <van-checkbox name="c" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_54.png" />
+          </van-checkbox>
+          <van-checkbox name="d" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_67.png" />
+          </van-checkbox>
+          <van-checkbox name="e" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_72.png" />
+          </van-checkbox>
+          <van-checkbox name="f" shape="square" checked-color="#179b3b">
+            <img src="@/assets/today/icons/2_70.png" />
+          </van-checkbox>
+        </van-checkbox-group>
+        <div class="textarea">
+          <textarea placeholder="我要写亲密日记" rows="5"></textarea>
+        </div>
+      </div>
+    </div>
+    <!-- 情绪知识库 -->
+    <div class="knowledge">
+      <div class="title">
+        <p>情绪知识库</p>
+      </div>
+      <div class="main">
+        <ul>
+          <li>
+            <p>
+              健康同学 测量的
+              什么压力？
+              测量原理是什么？
+            </p>
+            <img src="@/assets/today/images/2_42.png" />
+          </li>
+          <li>
+            <p>
+              健康同学 测量的
+              什么压力？
+              测量原理是什么？
+            </p>
+            <img src="@/assets/today/images/2_48.png" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 底部导航 -->
+    <TabBar />
+    <!-- 日期选择 -->
+    <van-calendar
+      v-model="show"
+      :show-confirm="false"
+      @confirm="onConfirm"
+      :min-date="minDate"
+      :max-date="maxDate"
+    />
   </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar';
+import TopNavBar from '@/components/TopNavBar';
+import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant';
 export default {
+  components: {
+    TabBar,
+    TopNavBar,
+    [Circle.name]: Circle,
+    [Calendar.name]: Calendar,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup
+  },
   data() {
-    return {};
+    return {
+      date: '',
+      show: false,
+      minDate: new Date(2023, 12, 1),
+      maxDate: new Date(2023, 12, 18),
+      currentRate1: 0,
+      currentRate2: 0,
+      result: [],
+    };
   },
   created() {},
   mounted() {},
-  methods: {}
+  methods: {
+    formatDate(date) {
+      return `${date.getMonth() + 1}/${date.getDate()}`;
+    },
+    onConfirm(date) {
+      this.show = false;
+      console.log(date)
+      console.log(this.formatDate(date))
+    },
+  }
 };
 </script>
 <style scoped>
-/* @import url(); 引入css类 */
+  @import url("./scss/index.scss");
 </style>

src/views/today/scss/index.scss

@@ -0,0 +1,431 @@
+.today {
+    padding: 100.06px 0;
+    background-color: #fff;
+    min-height: 100vh;
+    .today-status {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+        padding:0 40px;
+        .img {
+            width: 40%;
+            object-fit: contain;
+            margin-top: 20px;
+        }
+        .icon{
+            width: 60px;
+            height: 60px;
+            object-fit: contain;
+            position: absolute;
+            top: 40px;
+            right: 40px;
+        }
+        .status {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            width: 100%;
+            margin: 40px 0;
+            p {
+                font-size: 30px;
+                color: #434144;
+                font-weight: bold;
+            }
+            ul {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: flex-start;
+                li {
+                    width: 40px;
+                    height: 20px;
+                    border-radius: 20px;
+                    position: relative;
+                    & + li {
+                        margin-left: 10px;
+                    }
+                    &.toobad {
+                        background-color: #ff5f8b;
+                        &:after{
+                            background-color: #ff5f8b;
+                        }
+                    }
+                    &.ordinary {
+                        background-color: #2ea7e0;
+                        &:after{
+                            background-color: #2ea7e0;
+                        }
+                    }
+                    &.sameas {
+                        background-color: #8dc21f;
+                        &:after{
+                            background-color: #8dc21f;
+                        }
+                    }
+                    &.excellent {
+                        background-color: #179b3b;
+                        &:after{
+                            background-color: #179b3b;
+                        }
+                    }
+                    &.active {
+                        width: 120px;
+                        &:after {
+                            opacity: 1;
+                        }
+                        &:before {
+                            opacity: 1;
+                        }
+                    }
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translateX(-50%) translateY(-50%);
+                        width: 40px;
+                        height: 40px;
+                        opacity: 0;
+                        border-radius: 50%;
+                    }
+                    &:before {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translateX(-50%) translateY(-50%);
+                        width: 25px;
+                        height: 25px;
+                        opacity: 0;
+                        border-radius: 50%;
+                        background-color:#fff;
+                        z-index: 2;
+                    }
+                }
+            }
+        }
+        .interpret {
+            padding: 50px 60px;
+            border-radius: 40px;
+            border: 1px solid bisque;
+            p{
+                font-size: 28px;
+                color: #434144;
+                white-space: pre-line;
+                line-height: 1.8em;
+            }
+            .bottom {
+                width: 100%;
+                position: relative;
+                p {
+                    text-align: center;
+                    color: #35a556;
+                }
+                div{
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translatey(-50%);
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    justify-content: flex-start;
+                    span{
+                        color: #35a556;
+                        font-size: 24px;
+                    }
+                    img {
+                        width: 40px;
+                        height: 40px;
+                        object-fit: contain;
+                        margin-left: 10px;
+                    }
+                }
+            }
+        }
+    }
+    .title {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        align-content: space-between;
+        justify-content: space-between;
+        p {
+            font-size: 30px;
+            color: #434144;
+            font-weight: bold;
+        }
+        >div {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: flex-start;
+            p {
+                margin-right: 10px;
+            }
+            >div {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: flex-start;
+                p {
+                    font-size: 26px;
+                    color: #fff;
+                    background-color: #179b3b;
+                    border-radius: 20px;
+                    padding: 8px 20px;
+                    margin-right: 10px;
+                    font-weight: normal;
+                }
+            }
+        }
+    }
+    .emotion {
+        padding:0 40px;
+        margin-top: 60px;
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            margin-top: 30px;
+            li {
+                width: 25%;
+                border-radius: 40px;
+                padding: 20px;
+                &:nth-of-type(1) {
+                    background-color: #179b3b;
+                }
+                &:nth-of-type(2) {
+                    background-color: #ff5f8b;
+                }
+                &:nth-of-type(3) {
+                    background-color: #8dc21f;
+                }
+                h4 {
+                    color: #fff;
+                    font-size: 50px;
+                    font-weight: normal;
+                }
+                p {
+                    color: #fff;
+                    font-size: 32px;
+                    margin-top: 0px;
+                }
+                span {
+                    color: #fff;
+                    font-size: 24px;
+                    border-top: 1px solid #fff;
+                    padding-top: 12px;
+                }
+                time {
+                    color: #fff;
+                    font-size: 24px;    
+                    display: block;
+                }
+            }
+        }
+    }
+    .perception {
+        padding:0 40px;
+        margin-top: 60px;
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            margin-top: 30px;
+            li {
+                width: 25%;
+                border-radius: 40px;
+                padding: 20px;
+                padding-bottom: 80px;
+                &:nth-of-type(1) {
+                    background-color: #179b3b;
+                }
+                &:nth-of-type(2) {
+                    background-color: #ff5f8b;
+                }
+                &:nth-of-type(3) {
+                    background-color: #8dc21f;
+                }
+                h4 {
+                    color: #fff;
+                    font-size: 46px;
+                    font-weight: normal;
+                }
+                p {
+                    color: #fff;
+                    font-size: 30px;
+                    margin-top: 0px;
+                }
+            }
+        }
+        .tip {
+            margin-top: 30px;
+            display: flex;
+            justify-content: flex-start;
+            border-bottom: 1px solid #dfdfdf;
+            padding-bottom: 40px;
+            img {
+                width: 29px;
+                height: 47px;
+                object-fit: contain;
+                margin-right: 30px;
+            }
+            p {
+                font-size: 28px;
+                color: #434144;
+                line-height: 1.5em;
+                span {
+                    color: #edb21d;
+                }
+            }
+        }
+    }
+    .step {
+        padding:0 40px;
+        margin-top: 50px;
+        .main {
+            border-radius: 30px;
+            border: 1px solid #179b3b;
+            padding: 40px 30px;
+            display: flex;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            ul {
+                li {
+                    .specific {
+                        font-size: 40px;
+                        color: #434144;
+                        span {
+                            font-weight: bold;
+                        }
+                    }
+                    .category {
+                        font-size: 28px;
+                        color: #434144;
+                        font-weight: bold;
+                        margin-top: 6px;
+                        span {
+                            font-weight: normal;
+                            padding: 5px 15px;
+                            background-color: #434144;
+                            color: #fff;
+                            font-size: 24px;
+                            border-radius: 20px;
+                            margin-left: 10px;
+                        }
+                    }
+                    & + li {
+                        margin-top: 40px;
+                    }
+                }
+            }
+            .annular {
+                width: 50%;
+                position: relative;
+                transform: rotate(180deg);
+                .van-circle {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translateX(-50%) translateY(-50%);
+                }
+                p {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translateX(-50%) translateY(-50%) rotate(180deg);
+                    font-size: 28px;
+                    color: #434144;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .diary {
+        padding:0 40px;
+        margin: 50px 0;
+        .main {
+            width: 100%;
+            .van-checkbox-group {
+                width: 100%;
+                margin-top: 50px;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                align-content: space-between;
+                justify-content: space-between;
+            }
+            .van-checkbox {
+                width: 26%;
+                min-width: 88px;
+                &:nth-of-type(n+4) {
+                    margin-top: 40px;
+                }
+                .van-checkbox__label img {
+                    width: 50px;
+                }
+            }
+            .textarea {
+                border-radius: 40px;
+                border: 1px solid #179b3b;
+                margin-top: 30px;
+                overflow: hidden;
+                textarea {
+                    width: 100%;
+                    padding: 30px;
+                    font-size: 28px;
+                }
+            }
+        }
+    }
+    .knowledge {
+        padding: 0 0 40px 40px;
+        .main {
+            width: 100%;
+            overflow-x: scroll;
+            ul {
+                width: max-content;
+                margin-top: 30px;
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                justify-content: flex-start;
+                li {
+                    width: 480px;
+                    background-color: #179b3b;
+                    padding: 40px;
+                    border-radius: 50px;
+                    display: flex;
+                    align-items: center;
+                    align-content: space-between;
+                    justify-content: space-between;
+                    & + li {
+                        margin-left: 30px;
+                    }
+                    p {
+                        width: 55%;
+                        font-size: 28px;
+                        color: #fff;
+                        white-space: pre-line;
+                    }
+                    img {
+                        height: 140px;
+                        object-fit: contain;
+                    }
+                }
+            }
+        }
+    }
+}