From 270e654fc7db621e7e8eb52fe967d86b02e3b1cd Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Sun, 8 Oct 2023 10:45:15 +0800
Subject: [PATCH] home

---
 src/assets/img/cala.png         | Bin 0 -> 717 bytes
 src/assets/img/clock.png        | Bin 0 -> 586 bytes
 src/assets/img/status.png       | Bin 0 -> 995 bytes
 src/components/Count.vue        |  33 ------------------------
 src/components/Header/Date.vue  |  55 ++++++++++++++++++++++++++++++++++++++++
 src/components/Header/index.vue |  47 ++++++++++++++++++++++++++++++++++
 src/pages/Home.vue              |  44 +++++++++++++++++++++++++++++---
 7 files changed, 143 insertions(+), 36 deletions(-)
 create mode 100644 src/assets/img/cala.png
 create mode 100644 src/assets/img/clock.png
 create mode 100644 src/assets/img/status.png
 delete mode 100644 src/components/Count.vue
 create mode 100644 src/components/Header/Date.vue
 create mode 100644 src/components/Header/index.vue

diff --git a/src/assets/img/cala.png b/src/assets/img/cala.png
new file mode 100644
index 0000000000000000000000000000000000000000..350d218530008f5ad3595cef45a0567d522760a7
GIT binary patch
literal 717
zcmV;;0y6!HP)<h;3K|Lk000e1NJLTq001BW0015c1^@s6O$r<-00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZrcS%G+R7i>Kmp^aQP!z>~$Egrv3L68o4uAG^OS0s3
zz|Gixg3?bAIx>}RY;<HR9hn-owhY)3YPwNA0BVp}m~gi)@ny&#B~fCV(ohDDWckVG
z`o8n7@4N3><UrM}K9|{cB5(OLJnW>|*4)#wnGO)Gc6hv%<=e|60JEk+(WC2fSeF4G
zV=a$s4F(n0@P(~`)j`Fv`O(e-kYF1Ie!4@8JiIWW>l@z2#7bgNWT-WWqyTCzcxlG=
zET<-~bQ&IZYHoGU%$}tRklvnzN1GMb@MX#Qj8(@b?X<(AU9aLAE^YF8z@UiP>xygm
zo=BQmFL-o|SvFUJu)V_K(xW%P?Q~0BF8U9DV7$t-h2s6vlP@CK04nJMD5_cy?6+iJ
zGxBZ2IbvaCd{&T`SvdX_U6LZECYT!+Ankt&55sv20I0eEj0pi|&6*45lI@c)V_2X@
zKY{<Z>jC@&N%&ttx&Ud*<dyo@3ebVxVS-qn;23ZPc`E}>vdz>fW>rE#d=ees9eq}H
z!9o9=@3f=i(kNG}2cHef{YGScg8OMOb%$k?Vug}L{qfTHQJlg_yTUF24Arq-(Yb<v
z`C}o2?;v#mF!LGjhK8KX$`c_@<MIg*#J6;3ISgCz;91qJe#Ff6^J6Rrs`cQ!Cs1KK
zIvOTrT4w|)yTG7$$>mUa#Wj3v$i>dBjd2>T()>{_3wd&&1HI;9N+>)1yFca>VuN@Z
zH;Jqq7&@4ta;o#b&|Fct(Ml+YJ*4oa1Q<H=M6!QV0ub*7P^||CkndOO8qsP;$Lj@v
z@87<@dr*3OA-Jbr+nv>VUma2?*-kt9@B-i$P%`mEPD4TS00000NkvXXu0mjf6Dv!j

literal 0
HcmV?d00001

diff --git a/src/assets/img/clock.png b/src/assets/img/clock.png
new file mode 100644
index 0000000000000000000000000000000000000000..41aa5750249ec2fbebb20485019ae4dbb3623b24
GIT binary patch
literal 586
zcmV-Q0=4~#P)<h;3K|Lk000e1NJLTq000^Q000^Y1^@s6sY*=F00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZq^hrcPR7i=nma%f$KoEw%Jr_(|=>bAU3`tKq*^?QL
zhNv^?()ta|6WBa~Nte!#VB7(Xj|xg2z@8`*ij=C7p$MBoBG@sq1ctx6y}kYRPPf_<
zaunFm7qkUhN2v*T=~Sd5F>s?uZ{qsVb8+MufECqqP@9)b5=opQr&+**b;cvxycE^1
zfL{ob$QShNO{FS7qI>rwkB0+mTi#rMUl-m*wx%UHY&h48mj?52cCNo}cK`vXB?+(e
z@92(g^8)z11ISW-xl;9J(ft6@qYG^4i!QzuS}t@!zN30s#9hTSCa&*HvR1E(ra5-Q
z_Sg-&Mg5bT3ns9kkM88VWJqmbL*FFDxL*m{GQi2cL7;Ubs$Rb1OF7gGn^k|b4M)H;
z`EDzSifI6Ru%X=)W)$Llw*)eA{V1@Z|3?>v%VD|RAWS!bh%Ro~?6^^p*no`o2}yNh
z6zOG73+)|1P^5P-i|*pG|JJSzBK&;qznhCLuD69C;wEnJ#Q>;CCnJ@!m+T}7A*YbG
ziCJ_Pl`B;b2(}HlP9k*1ZqS4OI_y#X<E|PXz;rwszF!U=6>LdfeS+NUUO?hXa@cre
zS?6|an-{8_Z^xiJcEk2lbB5CQ+*R>jB~C>;6W4d^`8irWAUR3@^ge(>ocvW}ROA8q
Y7oa!Jx_CYX5dZ)H07*qoM6N<$f=Z1CJ^%m!

literal 0
HcmV?d00001

diff --git a/src/assets/img/status.png b/src/assets/img/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..aeecd5170f2e6d0752d899b65fb8517e47fc71d4
GIT binary patch
literal 995
zcmV<9104K`P)<h;3K|Lk000e1NJLTq001Na001Ni1^@s6;Q*MJ00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZsjY&j7R9J=Gn9p^iND#)quO)OHWiU7cIf7v#P;UmF
z47^86Z=dnAk&gC6U`+(mia^T1as<OhFq{RV_8^1-Lj$(wvURZ$)zv?`tLsk_Jw-3Y
zMH+jcngTKwhzp?$0HB1&KWYm}pOH8#<1^}GpPfN`8H<x_08DyKpoVAWieXoM)!DKW
z>%K4mfJ3bNsCNfa&bBWLfC!1RD*m9C;@Sq(ZrRaKk_)8RntxtEbdWp><f1DLfg3Y-
z{L}L^NFD*X02z{luXS7b3P=b0iGUjbW1#E<dMU2RVFR&$<<T<3^=x>S+r5oFQP>pU
z*FlxGOfSV1s-Gtq0DvTqr+>{ALrQwn3Il)#`Br?E0Ut{WBCe##Q*{eVD>Mz_C)7AD
zA>Yh=w93Kn_LoqcW{*3h@-K)8pbO#?M4n6fLF@}~T~A(K$s9;8;(HNXb{W)Hra}B0
z#Z|AGFZddPY^&1bm(3{2zsziC`od^m#xgoQwfWu2SC2lF9_p8~G-9yp3j+YgXT&u9
z-l~`}FpI#ytt`ZYnK^&I1?VJJKRV5$hGz=H_`+(5*uEDA05Tu3uW}lDN?uM&J<kE1
zj(Ha$X}3i+RS;`_+7%=9d&SI#25e5WBBB+^#tB=$=nY~Gti+bumvNTKtFklm(VI?I
zo9NrvgQ|o9stEhR_D{_B|B~aDjSe0pEr<4$;YT`jQFO4Mpsv`99mDA&-az2h4Xh^B
z4}n=ET10-<&PN*61Oos<)t*v%iU9YG??gOBV%t1gT)m9FkAl&+v1d)P#7;rvhs}sc
zrLcO3$e<;crLtD7#k+{BgV=vBj9$d|HunGkB+g2iD~1GDRwm%Oty{3d-0d$Li@!_=
zu8hy<SP!W|dy0@l|DFt4fkw6;j*LM8S@8}_Rwu)^hIQjJ0`2WIiHB47Q7-Zq$*;Oo
zP%U3|5c?p$0E_?$A@U3`8^_Ne)>VB=akg8}o%4LI;+xvOi`cGb&evS$Zht9cV=Q?Y
zRt~BS9~)5(&x^fTsV_5E$L0+{zQh#CtHsX#fY(9wRoOv?RhU;mIg}cn6SyJdyi|gW
zl51GnnKDs1T$uT2MdBfc>Do#+N!DUNb=7a0SO@!wt<LIx`$6UQf&l=@F1HHOR`m4%
z8th=pdrgvdzpMg!Y}rZjD?O+$0-1m^hHwmE3`z)LL~sX5pD}PupW8D4_z%edv1#vN
Rr)vNJ002ovPDHLkV1iJ^!)yQm

literal 0
HcmV?d00001

diff --git a/src/components/Count.vue b/src/components/Count.vue
deleted file mode 100644
index 5e47a49..0000000
--- a/src/components/Count.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/Header/Date.vue b/src/components/Header/Date.vue
new file mode 100644
index 0000000..b6a0989
--- /dev/null
+++ b/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>
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
new file mode 100644
index 0000000..17ca7ab
--- /dev/null
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 5d418ed..31063a4 100644
--- a/src/pages/Home.vue
+++ b/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>