9/28

1. 修改登录页面中：星期展示方法
2. 登录页面
3. 首页

src/views/index/compontents/tvoc.vue

@@ -0,0 +1,113 @@
+<script lang="ts" name="Tvoc" setup>
+import Echarts from '@/components/Echarts/index.vue';
+
+const options = {
+  xAxis: {
+    type: 'category',
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: 'line'
+    }
+  ]
+};
+
+
+const list = [
+  {
+    label: '24小时',
+    value: 24,
+  },
+  {
+    label: '7天',
+    value: 7,
+  },
+  {
+    label: '30天',
+    value: 30,
+  },
+  // +30 300, 99/1000 69, 59/20g/500
+]
+const activeDay = ref(24);
+
+function changeActive(val: number) {
+  activeDay.value = val;
+}
+
+</script>
+
+<template>
+  <div class="TvocBox">
+    <div class="TvocNavBox">
+      <span>平均TVOC原始值</span>
+      <div class="actions">
+        <div v-for="(item,index) in list" :key="index" :class="{
+            active: activeDay === item.value,
+          }" class="actionItem" @click="changeActive(item.value)">{{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div class="TvocChartBox">
+      <Echarts :options="options"></Echarts>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.TvocBox {
+  padding: 25px;
+  height: 372px;
+  border-radius: 16px 16px 16px 16px;
+  border: 1px solid rgba(238, 240, 243, 1);
+
+  .TvocNavBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 36px;
+
+    span {
+      height: 22px;
+      line-height: 22px;
+      border-radius: 0;
+      background-color: rgba(0, 0, 0, 0);
+      color: rgba(17, 24, 39, 1);
+      font-size: 16px;
+    }
+
+    .actions {
+      width: 175px;
+      height: 36px;
+      border-radius: 8px 8px 8px 8px;
+      background-color: rgba(243, 245, 248, 1);
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      padding: 4px;
+
+      .actionItem {
+        max-width: 64px;
+        height: 28px;
+        padding: 7px 12px;
+        color: rgba(107, 114, 128, 1);
+        font-size: 12px;
+
+        &.active {
+          color: rgba(37, 99, 235, 1);
+          border-radius: 6px 6px 6px 6px;
+          background-color: rgba(255, 255, 255, 1);
+        }
+      }
+    }
+  }
+
+  .TvocChartBox {
+    height: 330px;
+  }
+}
+</style>