完成佩戴任务静态页面

src/views/development/taskWearing.vue

@@ -1,7 +1,28 @@
 <template>
   <div class="pageContent taskWearing">
     <NavBar title="佩戴任务" @on-click-left="$router.back()"></NavBar>
-
+    <div class="day">
+      <span>第</span>
+      <span class="number">{{ activeIndex + 1 }}</span>
+      <span>天</span>
+    </div>
+    <div class="timeBar">
+      <div
+        class="timeBarItem"
+        v-for="(item, index) in days"
+        :key="index"
+        :class="{ active: item.time >= standard, select: index === activeIndex }"
+        @click="activeIndex = index"
+      ></div>
+    </div>
+    <div class="wearingTime">{{ days[activeIndex] ? formateSeconds(days[activeIndex].time) : formateSeconds(0) }}</div>
+    <div class="progress">
+      <div
+        class="progressPoint"
+        :style="`left: ${((days[activeIndex] ? days[activeIndex].time : 0) / standard) * 100}%`"
+      ></div>
+      <div class="progressBar"></div>
+    </div>
   </div>
 </template>
 
@@ -13,11 +34,40 @@ export default {
   },
   data() {
     return {
-      textarea: ''
+      activeIndex: 0,
+      standard: 0,
+      days: []
     };
   },
-  mounted() {},
+  mounted() {
+    this.initData();
+  },
   methods: {
+    initData() {
+      this.standard = 60 * 60 * 5;
+      this.days = [
+        {
+          time: 60 * 60 * 5
+        },
+        {
+          time: 60 * 60 * 5
+        },
+        {
+          time: 60 * 60 * 5
+        },
+        {
+          time: 60 * 60 * 2
+        },
+        {
+          time: 60 * 60 * 5
+        },
+        {
+          time: 60 * 60 * 4
+        }
+      ];
+
+      this.activeIndex = this.days.length - 1;
+    },
     onSelect(type) {
       console.log(type);
       this.$refs[type + 'file'].click();
@@ -29,6 +79,32 @@ export default {
       formData.append('file', file);
       formData.append('type', type);
       console.log(formData);
+    },
+    // 秒转时分秒
+    formateSeconds(time) {
+      let secondTime = parseInt(time); //将传入的秒的值转化为Number
+      let min = 0; // 初始化分
+      let h = 0; // 初始化小时
+      let result = '';
+      if (secondTime > 60) {
+        //如果秒数大于60，将秒数转换成整数
+        min = parseInt(secondTime / 60); //获取分钟，除以60取整数，得到整数分钟
+        secondTime = parseInt(secondTime % 60); //获取秒数，秒数取佘，得到整数秒数
+        if (min > 60) {
+          //如果分钟大于60，将分钟转换成小时
+          h = parseInt(min / 60); //获取小时，获取分钟除以60，得到整数小时
+          min = parseInt(min % 60); //获取小时后取佘的分，获取分钟除以60取佘的分
+        }
+      }
+      if (h.toString().padStart(2, '0') == '00') {
+        result = `${min.toString().padStart(2, '0')}:${secondTime.toString().padStart(2, '0')}`;
+      } else {
+        result = `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${secondTime
+          .toString()
+          .padStart(2, '0')}`;
+      }
+
+      return result;
     }
   }
 };
@@ -38,6 +114,78 @@ export default {
 @import './include.scss';
 
 .taskWearing {
+  padding-top: 180px;
+  text-align: center;
+
+  .day {
+    font-size: 34px;
+    letter-spacing: 10px;
 
+    .number {
+      color: #000;
+      font-size: 120px;
+      font-weight: bold;
+    }
+  }
+
+  .timeBar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px 0;
+
+    .timeBarItem {
+      width: 60px;
+      height: 30px;
+      border-radius: 30px;
+      background-color: #e6e6e6;
+      margin-right: 20px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .active {
+      background: #179b3b;
+    }
+    .select {
+      width: 70px;
+      height: 40px;
+      border: 5px solid gray;
+    }
+  }
+
+  .wearingTime {
+    color: #000;
+    font-size: 90px;
+  }
+
+  .progress {
+    position: relative;
+    width: 50%;
+    padding: 60px 0;
+    margin: 0 auto;
+
+    .progressBar {
+      width: 100%;
+      height: 30px;
+      background-color: #179b3b;
+      border-radius: 30px;
+    }
+
+    .progressPoint {
+      position: absolute;
+      width: 35px;
+      height: 35px;
+      border: 5px solid #179b3b;
+      border-radius: 50%;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      margin-left: -15px;
+      background: white;
+    }
+  }
 }
 </style>