洞悉静态页面

src/views/insight/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/insight/index.vue

@@ -1,20 +1,73 @@
 <!--  -->
 <template>
-  <div>
-
+  <div class="pageContent insight">
+    <div class="periodNav">
+      <div class="periodItem week" :class="{ active: active == 0 }" @click="active = 0">周</div>
+      <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">
+        <van-icon name="arrow-left"></van-icon>
+      </div>
+      <div class="timearea">kdfdfkjhsojldkfho</div>
+      <div class="arrow arrowRight" @click="active = active == 1 ? 0 : 1">
+        <van-icon name="arrow"></van-icon>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {};
+    return {
+      active: 0
+    };
   },
   created() {},
   mounted() {},
   methods: {}
 };
 </script>
-<style scoped>
-/* @import url(); 引入css类 */
+<style scoped lang="scss">
+@import './include.scss';
+
+.insight {
+  padding-top: 20px;
+
+  .periodNav {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .periodItem {
+      width: 48%;
+      font-size: 28px;
+      color: black;
+      text-align: center;
+      padding: 12px;
+      border-radius: 30px;
+      background: #E6E6E6;
+      &.active {
+        color: white;
+        background: #179B3B;
+      }
+    }
+  }
+  .periodSwitch {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    padding: 40px 10px;
+
+    .timearea {
+      font-size: 28px;
+      justify-self: center;
+    }
+    .arrow {
+      font-size: 45px;
+    }
+  }
+}
 </style>