home

src/components/Count.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="bg">
-    <span>当前数值{{ countComputed }}</span>
-    <br />
-    <span>双倍数值{{ doubleCount }}</span>
-    <br />
-    <button type="primary" size="default" @click="countStore.countAdd">
-      +1
-    </button>
-    <button type="primary" size="default" @click="countStore.countReduce">
-      -1
-    </button>
-  </div>
-</template>
-<script setup>
-import { computed, onMounted } from 'vue'
-import { get15DaysWeatherByArea } from '@/api'
-import { useCountStore } from '@/store'
-import { storeToRefs } from 'pinia'
-const countStore = useCountStore()
-// 通过计算属性
-const countComputed = computed(() => countStore.count)
-// 通过 storeToRefs api 结构
-const { doubleCount } = storeToRefs(countStore)
-onMounted(() => {
-  get15DaysWeatherByArea()
-})
-</script>
-<style scoped lang="scss">
-.bg {
-  background: $bg-color;
-}
-</style>

src/components/Header/Date.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="date_container">
+    <img :src="Cala" class="cala_img" alt="" />
+    <p class="cala_text">2023-09-25</p>
+    <img :src="Clock" class="clock_img" alt="" />
+    <p class="clock_text">14:20:59</p>
+  </div>
+</template>
+
+<script setup>
+import Cala from '@/assets/img/cala.png'
+import Clock from '@/assets/img/clock.png'
+</script>
+
+<style lang="scss" scoped>
+.date_container {
+  display: flex;
+  align-items: center;
+  padding: 13px 35px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 34px;
+  width: 528px;
+  box-sizing: border-box;
+  .cala_img {
+    width: 32px;
+    height: 30px;
+    margin-right: 19px;
+  }
+  .cala_text {
+    font-family: Poppins;
+    font-size: 28px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0.1em;
+    color: #393f46;
+    white-space: nowrap;
+  }
+  .clock_img {
+    width: 26px;
+    height: 26px;
+    margin-right: 17px;
+    margin-left: 36px;
+  }
+  .clock_text {
+    font-family: Poppins;
+    font-size: 28px;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0.1em;
+    color: #393f46;
+    white-space: nowrap;
+  }
+}
+</style>

src/components/Header/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="header_container">
+    <Date />
+    <div class="status_container">
+      <img :src="Status" class="status_img" alt="" />
+      <p class="status_text">机器运行状态</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Date from './Date'
+import Status from '@/assets/img/status.png'
+</script>
+
+<style lang="scss" scoped>
+.header_container {
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  .status_container {
+    width: 1362px;
+    height: 68px;
+    border-radius: 34px;
+    background: #ffffff;
+    margin-left: 20px;
+    padding: 0 18px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    .status_img {
+      width: 36px;
+      height: 36px;
+      margin-right: 18px;
+    }
+    .status_text {
+      font-family: Source Han Sans CN;
+      font-size: 22px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.06em;
+      font-feature-settings: 'kern' on;
+      color: #1c1c1c;
+    }
+  }
+}
+</style>

src/pages/Home.vue

@@ -1,7 +1,45 @@
 <template>
-  <div>home</div>
+  <div class="home_container">
+    <Header />
+    <div class="content_wrap">
+      <div class="main_container"></div>
+      <div class="operater_tabs"></div>
+    </div>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Header from 'cpns/Header'
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.home_container {
+  width: 2200px;
+  height: 1440px;
+  background: #f6f6f6;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  .content_wrap {
+    display: flex;
+    flex: 1;
+    .main_container {
+      height: 100%;
+      flex: 1;
+      background: #000;
+    }
+    .operater_tabs {
+      margin-left: 20px;
+      width: 230px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 100%;
+      background: #000;
+    }
+  }
+}
+</style>