新增成长，成长计划说明，成长任务详情静态页面

src/components/NavBar.vue

@@ -50,11 +50,12 @@ export default {
 </script>
 <style scoped lang="scss">
 .nav-bar {
-  position: absolute !important;
+  position: fixed !important;
   left: 0;
   top: 0;
   height: 100px;
   width: 100%;
+  z-index: 999;
 }
 
 /* @import url(); 引入css类 */

src/router/router.config.js

@@ -15,7 +15,6 @@ export const constantRouterMap = [
       {
         path: '/Tabbar',
         name: 'Index',
-        redirect: '/index',
         component: () => import('@/views/Tabbar.vue'),
         children: [
           {
@@ -50,6 +49,18 @@ export const constantRouterMap = [
           }
         ]
       },
+      {
+        path: '/planDescription',
+        name: 'planDescription',
+        component: () => import('@/views/development/planDescription'),
+        meta: { title: '计划说明', keepAlive: false }
+      },
+      {
+        path: '/taskDetail',
+        name: 'taskDetail',
+        component: () => import('@/views/development/taskDetail'),
+        meta: { title: '任务详情', keepAlive: false }
+      },
       {
         path: '/familyNumber',
         name: 'familyNumber',

src/views/Tabbar.vue

@@ -1,8 +1,11 @@
 <!--  -->
 <template>
   <div>
-    <div>nav组件</div>
+    <!-- nav 组件 -->
+    <div></div>
+     <!-- 页面  -->
     <router-view />
+    <!-- tabbar 组件 -->
     <TabBar />
   </div>
 </template>
@@ -19,6 +22,8 @@ export default {
   methods: {}
 };
 </script>
-<style scoped>
-/* @import url(); 引入css类 */
+<style>
+.van-tabbar{
+  z-index: 999 !important;
+}
 </style>

src/views/development/include.scss

@@ -0,0 +1,24 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.image {
+  width: 100%;
+  height: 100%;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.gap {
+  padding-top: 40px;
+}
+
+.pageContent {
+  font-size: 34px;
+  padding: 30px;
+  padding-top: 100px;
+  padding-bottom: 150px;
+  box-sizing: border-box;
+}

src/views/development/index.vue

@@ -1,20 +1,333 @@
 <!--  -->
 <template>
-  <div>
-    啊实打实的
+  <div class="pageContent devlopment">
+    <router-link to="/planDescription">
+      <div class="bannar radius">
+        <div class="image">
+          <img src="@/assets/development/images/banner1.png" alt="" />
+        </div>
+        <div class="button min-text">了解详情</div>
+      </div>
+    </router-link>
+    <div class="gap">当前任务</div>
+    <div class="task radius">
+      <div class="image">
+        <img src="@/assets/development/images/task.png" alt="" />
+      </div>
+      <div class="task-detail">
+        <div class="task-title">
+          <div>
+            <span>幸运熊计划LV</span>
+            <span>{{ task.level < 10 ? `0${task.level}` : task.level }}</span>
+          </div>
+          <div class="mid-text bold">{{ task.detail }}</div>
+        </div>
+        <div class="task-times">
+          <div class="task-time" v-for="(item, index) in task.taskList" :key="index">
+            <div class="task-time-info">
+              <div class="task-time-text">{{ item.title }}</div>
+              <div class="task-time-button min-text" v-if="item.status === 0">查看进度</div>
+              <div class="task-time-button min-text" v-else>上传打卡</div>
+            </div>
+            <div class="task-time-icon">
+              <div class="task-time-icon-active" v-if="item.status === 0">
+                <div class="image">
+                  <img src="@/assets/development/images/active.png" alt="" />
+                </div>
+              </div>
+              <div class="task-time-icon-unactive" v-else>
+                <div class="image">
+                  <img src="@/assets/development/images/unactive.png" alt="" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="levels">
+      <div
+        class="level"
+        v-for="(item, index) in levels"
+        :key="index"
+        :class="{
+          unlock: item.level === task.level + 1,
+          now: item.level === task.level,
+          active: item.level < task.level
+        }"
+        @click="toDetail(item, task)"
+      >
+        <div class="bg">
+          <div class="image">
+            <img :src="item.image" alt="" />
+          </div>
+        </div>
+        <div class="level-info">
+          <div class="level-info-level">
+            <div class="level-info-text">LV{{ item.level < 10 ? `0${item.level}` : item.level }}</div>
+            <div class="level-info-status">
+              {{
+                item.level > task.level + 1
+                  ? '未解锁'
+                  : item.level === task.level + 1
+                  ? '可查看'
+                  : item.level === task.level
+                  ? '进行中'
+                  : '已完成'
+              }}
+            </div>
+          </div>
+          <div class="level-info-title">
+            <div class="level-info-title-text">{{ item.title }}</div>
+            <div class="level-info-title-desc">{{ item.desc }}</div>
+          </div>
+        </div>
+        <div class="tip">
+          <div class="image">
+            <img :src="active" alt="" v-if="item.level <= task.level + 1" />
+            <img :src="unactive" alt="" v-else />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+const active = require('@/assets/development/images/leveTip.png');
+const unactive = require('@/assets/development/images/leveTipGray.png');
+
 export default {
   data() {
-    return {};
+    return {
+      active,
+      unactive,
+      task: {
+        level: 2,
+        detail: '学讲礼貌',
+        taskList: [
+          {
+            title: '格言朗读',
+            status: 0
+          },
+          {
+            title: '佩戴习惯',
+            status: 1
+          }
+        ]
+      },
+      levels: [
+        {
+          level: 1,
+          title: '美好开始',
+          desc: '赢取启蒙熊',
+          image: require('@/assets/development/images/leve_1.png')
+        },
+        {
+          level: 2,
+          title: '学讲礼貌',
+          desc: '赢取启蒙熊',
+          image: require('@/assets/development/images/leve_2.png')
+        },
+        {
+          level: 3,
+          title: '学讲礼貌',
+          desc: '赢取启蒙熊',
+          image: require('@/assets/development/images/leve_3.png')
+        },
+        {
+          level: 4,
+          title: '学讲礼貌',
+          desc: '赢取启蒙熊',
+          image: require('@/assets/development/images/leve_4.png')
+        }
+      ]
+    };
   },
   created() {},
   mounted() {},
-  methods: {}
+  methods: {
+    toDetail(item, task) {
+      console.log(item);
+      console.log(task);
+      this.$router.push({
+        name: 'taskDetail',
+        params: {}
+      });
+    }
+  }
 };
 </script>
-<style scoped>
-/* @import url(); 引入css类 */
+<style scoped lang="scss">
+@import './include.scss';
+.min-text {
+  font-size: 25px;
+  font-weight: 400;
+}
+.mid-text {
+  font-size: 28px;
+  font-weight: 400;
+}
+.radius {
+  border-radius: 70px;
+}
+.bold {
+  font-weight: bold;
+}
+.devlopment {
+  padding-top: 30px;
+  font-weight: bold;
+
+  .bannar {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+    .button {
+      position: absolute;
+      right: 5%;
+      bottom: 9%;
+      padding: 10px 20px;
+      color: white;
+      background-color: #000;
+      border-radius: 40px;
+    }
+  }
+
+  .task {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: 750px;
+    background: #ff5f8b;
+
+    .image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+    }
+    .task-detail {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+
+      .task-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: 20px 60px;
+        .mid-text {
+          font-size: 30px;
+        }
+      }
+      .task-times {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        padding: 0px 60px;
+        padding-top: 20px;
+
+        .task-time {
+          display: flex;
+          align-items: flex-end;
+          margin-bottom: 20px;
+
+          .task-time-info {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .task-time-text {
+              letter-spacing: 5px;
+            }
+            .task-time-button {
+              padding: 0px 30px;
+              color: white;
+              background-color: #000;
+              border-radius: 40px;
+            }
+          }
+          .task-time-icon {
+            width: 50px;
+            height: 50px;
+            margin-left: 20px;
+
+            div {
+              width: 100%;
+              height: 100%;
+            }
+            .image {
+              position: relative;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .levels {
+    position: relative;
+    padding-top: 20px;
+    .level {
+      overflow: hidden;
+      position: relative;
+      width: 100%;
+      height: 300px;
+      color: white;
+      border-radius: 60px;
+      margin-top: 20px;
+      background: #b3b3b3;
+
+      .bg {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+      }
+      .level-info {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        height: 100%;
+        padding-left: 260px;
+        z-index: 3;
+
+        .level-info-level {
+          .level-info-text {
+          }
+          .level-info-status {
+          }
+        }
+        .level-info-title {
+          .level-info-title-text {
+          }
+          .level-info-title-desc {
+          }
+        }
+      }
+      .tip {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        width: 150px;
+        height: 215.5px;
+        z-index: 3;
+      }
+    }
+    .unlock {
+      background: #ff5f8b;
+    }
+    .now {
+      background: #8dc21f;
+    }
+    .active {
+      background: #179b3b;
+    }
+  }
+}
 </style>

src/views/development/planDescription.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="pageContent planDescription">
+    <NavBar title="计划说明" @on-click-left="$router.back()"></NavBar>
+    <div class="bannar radius">
+      <div class="image">
+        <img src="@/assets/development/images/banner1.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="gap"></div>
+      <div class="max-title">幸运熊计划</div>
+      <div class="max-title">健康同学美好未来成长计划</div>
+      <div class="gap"></div>
+      <div class="gap"></div>
+      <div class="mid-title">12周打卡挑战，建立坚实基础</div>
+      <div class="mid-title">每一次努力都值得被记录</div>
+      <div class="gap"></div>
+      <div class="text">
+        欢迎您和孩子加入“幸运熊计划”，这是健康同学美好未来成长
+        计划中的1号计划，旨在通过以德育心、以智慧心、以体强心、以美韧心、以劳健心让孩子得到全面发展，为期12周。我们精心设
+        定了10个涵盖德智体美劳五大领域的主题，每个主题都配备了量化的任务，通过具体的行动启发孩子们的认知，引导他们全面
+        理解并发展出德智体美劳的初步能力。
+      </div>
+      <div class="gap"></div>
+      <div class="mid-title">坚持完成这个计划，</div>
+      <div class="mid-title">您和您的孩子将获得：</div>
+      <div class="gap"></div>
+      <div class="text">完成不同主题后的奖品-12个特色幸运熊。 通向和谐亲子关系的钥匙- “情绪共生力”</div>
+      <div class="gap"></div>
+      <div class="mid-title">健康同学美好未来成长计划说明：</div>
+      <div class="gap"></div>
+      <div class="text">
+        我们的目标是帮助孩子们健康成长，心智成熟，全面发展。在以
+        德育心、以智慧心、以体强心、以美韧心、以劳健心的每一步中，
+        我们鼓励孩子发现自己的潜力，勇敢追逐梦想，并培养他们独 特的个性和创造力。我们希望孩子们学会适应这个不断变化的
+        世界，并找到幸福的秘诀。让我们从一号计划“幸运熊计划”的 开始，携手孩子，共同踏上通往美好未来的旅程。
+      </div>
+      <div class="gap"></div>
+      <div class="mid-title">“德智体美劳 ”目标说明</div>
+      <div class="gap"></div>
+      <div class="title">德育目标</div>
+      <div class="text">初期：学习基本的社交规范和礼仪。</div>
+      <div class="text">中期：培养同理心和团队合作精神。</div>
+      <div class="text">后期：发展责任感和领导力，培养全球视野，</div>
+      <div class="title">成为未来社会的领导者...</div>
+      <div class="gap"></div>
+      <div class="title">智育目标</div>
+      <div class="text">初期：掌握阅读和基础写作能力。</div>
+      <div class="text">中期：发展批判性思维和解决问题的能力。</div>
+      <div class="text">后期：学会独立学习和研究，</div>
+      <div class="title">成为终身学习者和创新思维者...</div>
+      <div class="gap"></div>
+      <div class="title">体育目标</div>
+      <div class="text">初期：增强体能和协调性。</div>
+      <div class="text">中期：提升特定运动技能。</div>
+      <div class="text">后期：理解团队合作与竞争的重要性，</div>
+      <div class="title">成为身体强健的积极参与者...</div>
+      <div class="gap"></div>
+      <div class="title">美育目标</div>
+      <div class="text">初期：培养审美观和艺术欣赏能力。</div>
+      <div class="text">中期：激发创造力和艺术表达能力。</div>
+      <div class="text">后期：尝试和了解不同文化的艺术形式，</div>
+      <div class="title">成为创造多元文化艺术的艺术家...</div>
+      <div class="gap"></div>
+      <div class="title">劳育目标</div>
+      <div class="text">初期：学习基本的自我服务能力。</div>
+      <div class="text">中期：发展手工艺和实践技能。</div>
+      <div class="text">后期：参与劳动服务，理解劳动的价值，</div>
+      <div class="title">成为拥有卓越技能和深厚社会责任感的匠人...</div>
+      <div class="gap"></div>
+      <div class="gap"></div>
+      <div class="min-title">
+        注意：孩子的成长并非线性过程，而是多方面发展的，可 能会有起伏和跳跃。重视每个孩子的独特性和他们成长
+        过程中的自然节奏至关重要。
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+export default {
+  components: {
+    NavBar
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './include.scss';
+
+.max-title {
+  font-size: 50px;
+  font-weight: bold;
+  text-align: center;
+}
+.mid-title {
+  font-size: 30px;
+  color: #179b3b;
+}
+.min-title {
+  font-size: 26px;
+  color: #179b3b;
+}
+.title {
+  font-size: 24px;
+  color: #179b3b;
+}
+.text {
+  font-size: 24px;
+  color: gray;
+}
+.planDescription {
+  .bannar {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    min-height: 200px;
+  }
+
+  .content {
+    padding: 0px 40px;
+  }
+}
+</style>

src/views/development/taskDetail.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="pageContent planDescription">
+    <NavBar title="任务详情" @on-click-left="$router.back()"></NavBar>
+    <div class="bannar radius">
+      <div class="image">
+        <img src="@/assets/development/images/banner2.png" alt="" />
+      </div>
+    </div>
+    <div class="content">
+      <div class="gap"></div>
+      <div class="max-title">离完成任务解锁奖励</div>
+      <div class="max-title">又近了一步！</div>
+      <div class="gap"></div>
+      <div class="text center">
+        你今天整体状态优秀，身体压力状态较小，能很好应对今 日工作生活中的挑战，请继续保持优秀状态。相信自己，
+        你一定可以实现你的目标！
+      </div>
+      <div class="gap"></div>
+      <div class="progress">
+        <div class="bg" width="100%"></div>
+        <div class="text" :style="`left:${progress}%;`">3</div>
+      </div>
+      <div class="gap"></div>
+      <div class="gap"></div>
+      <div class="mid-title center">任务即将达成</div>
+      <div class="gap"></div>
+      <div class="mid-title">目标</div>
+      <div class="text">美好开始</div>
+      <div class="gap"></div>
+      <div class="mid-title">目标解释</div>
+      <div class="text">
+        帮助孩子了解自己；认识什么叫“德智体美劳全面发展”； 和孩子一起找到通往幸福的魔法钥匙 ⸺ 情绪共生力。
+      </div>
+      <div class="gap"></div>
+      <div class="mid-title">任务</div>
+      <div class="text">1:帮助孩子阅读一封信和计划玩法拆解</div>
+      <div class="text">2:一起安装手办柜，放上熊，并合影</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+export default {
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      progress: 50
+    };
+  },
+  computed: {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style scoped lang="scss">
+@import './include.scss';
+.max-title {
+  font-size: 50px;
+  font-weight: bold;
+  text-align: center;
+}
+.mid-title {
+  font-size: 30px;
+}
+.min-title {
+  font-size: 26px;
+}
+.title {
+  font-size: 24px;
+}
+.text {
+  font-size: 24px;
+  color: gray;
+}
+.center {
+  text-align: center;
+}
+.planDescription {
+  padding-top: 130px;
+
+  .bannar {
+    overflow: hidden;
+    position: relative;
+    width: 75%;
+    min-height: 200px;
+    margin: 0 auto;
+  }
+
+  .content {
+    width: 100%;
+    padding: 0px 40px;
+
+    .progress {
+      position: relative;
+      width: 100%;
+
+      .bg {
+        left: 0;
+        top: 0px;
+        height: 30px;
+        border-radius: 20px;
+        background: #29943a;
+        z-index: 1;
+      }
+      .text {
+        position: absolute;
+        top: 0px;
+        bottom: 0;
+        width: 60px;
+        height: 60px;
+        line-height: 60px;
+        color: #fff;
+        font-size: 34px;
+        text-align: center;
+        border-radius: 50%;
+        margin: auto;
+        margin-left: -30px;
+        background: black;
+        z-index: 2;
+      }
+    }
+  }
+}
+</style>