From c69772ae83cd953de70aedb6a3806028a098b58a Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 1 Nov 2023 17:11:33 +0800
Subject: [PATCH] heat

---
 src/assets/img/main/heat/hot.png    | Bin 0 -> 962 bytes
 src/components/Main/HeatingTurn.vue |  86 ++++++++++++++++++++++++++++++++++++
 src/pages/Main.vue                  |   5 ++-
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/img/main/heat/hot.png
 create mode 100644 src/components/Main/HeatingTurn.vue

diff --git a/src/assets/img/main/heat/hot.png b/src/assets/img/main/heat/hot.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a1097d2988cc874cb529bfd4214ca5a32f5b684
GIT binary patch
literal 962
zcmV;z13mnSP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZsY)M2xR7i=%S3OJ<VHkei?*v*&Pg)@$I1r`bH%^2}
zn2-_0!ObFxgGMxQu!)^+lB5nMsIh|y{!B8cVf1G~7mX7Ugj5K|6fhb}j?@;K_H{TY
zch|e?VL+edzPtCm?|J|3{oW(EKvP_iDWmofiGC1H0MrO@wI-!s055_u#hjmDk39J`
zsHmm(Bqw3VLZo&xy>ShoApl3*7ztn*;IVRV#pvf_w|?x7m=zJ6NreP>gn>GjgyxM`
z@}QgXw#p|UC0~-bc{c1rj-w2|^f!dX1Qdfr;klORx-D_@Y}m)S{6hfe_JUN0agxME
zJ-H}|SP{r^bRS3o;2d%s1uF%<!Xh}63b_sMV4xerHK!m;Uf0YFz7(8Eg$%?U3z1p@
z9&x*gPx9buO&?w!yN-r3ziV;<9_d(!)E0<0(;L@zQ@sskfvu|_Pa7}0CT5^c`#b^B
z6j$V}@6;7!$%|fJyUqwduGaJc0J<uVyV!w-n&OHqD5LhkeRDu4aIz@3167^c^-!n5
zC>tE1jM^iJM1LvGu7jE<vgE~Jpu0%kQ07OkuN_Cr{D{<@E}3^C(J!>#>x@X9X4`PJ
zeI*aq^r5TrxFPiR%s3&mhHsCvRh?+{)MGHvjlsi4Z@*-g3hP!+ePKON)mg%8Y7{%C
zj5P)hY5CjsT92Dc&v5VOYs>eXz2<7+AVsgQ-LX;=*(C1%d}Z)_8!fsBSV3s#sWq$$
zNzJ8kYh?l-Q}a-BX#l{L?~jV~S{;e$*8zYR0n}QFt*m~#K8@MT5)#?f!m~s+iI1sy
zLv*%{vIZ{-FsAIp<_cDGX)UxHOL((BZIGGoXD!0N!;2}woS(3hn{)Sg^&Jw~q@_1z
zq7T34?RhyrA=o2N0$8?Ec(VG=bpPIVGd&X7q?7J4d*n%>4Q4!MrSW|2Q^D)R=Bi`f
ze3A!%mX7m_4;*xP>}ya_1pt(LD@F-eu~G|ti{ZuECp44?9M9htPdyUZB+e|{K_Z*9
z)FEJ{+*>iawbl@vzHxzUJO{K6rsmQ`MWmO1NX^@l0sw=C;_bH|8HmA(Xr4*k->V_d
z3<AaG+A6PXPn<iQi<CSh3IiD52i|c=6xNTqhL$<k5?v=rTqICzuNVmwGf$Y>b1VFh
kfnJY){|jTne*Cok0p@XO{EBdGZvX%Q07*qoM6N<$f?<!lasU7T

literal 0
HcmV?d00001

diff --git a/src/components/Main/HeatingTurn.vue b/src/components/Main/HeatingTurn.vue
new file mode 100644
index 0000000..21fe658
--- /dev/null
+++ b/src/components/Main/HeatingTurn.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="heating_turn_container">
+    <div class="header_wrap">
+      <div class="left_wrap">
+        <img :src="Hot" class="hot" alt="" />
+        <p class="text">加热反应</p>
+      </div>
+      <p class="en">HEAT</p>
+    </div>
+    <div class="turntable_wrap"></div>
+    <div class="btns">
+      <div class="btn"></div>
+      <div class="btn"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Hot from '@/assets/img/main/heat/hot.png'
+</script>
+
+<style lang="scss" scoped>
+.heating_turn_container {
+  padding: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  .header_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 9px 20px 18px 20px;
+    .left_wrap {
+      display: flex;
+      align-items: center;
+      .hot {
+        width: 30px;
+        height: 30px;
+      }
+      .text {
+        font-family: 思源黑体;
+        font-size: 20px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.06em;
+        font-feature-settings: 'kern' on;
+        color: #ffffff;
+        margin-left: 8px;
+      }
+    }
+    .en {
+      font-family: 思源黑体;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.06em;
+      font-feature-settings: 'kern' on;
+      color: #ffffff;
+    }
+  }
+  .turntable_wrap {
+    width: 100%;
+    height: 660px;
+    border-radius: 50%;
+    background: radial-gradient(50% 50% at 50% 50%, #505760 0%, #505760 100%);
+    box-sizing: border-box;
+    border: 8px solid #40474e;
+    box-sizing: border-box;
+    margin-bottom: 32px;
+  }
+  .btns {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .btn {
+      width: 320px;
+      height: 80px;
+      border-radius: 489px;
+      background: #272f35;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>
diff --git a/src/pages/Main.vue b/src/pages/Main.vue
index 579b8db..a356407 100644
--- a/src/pages/Main.vue
+++ b/src/pages/Main.vue
@@ -4,7 +4,9 @@
       <div class="phote_oper_container">
         <Photo />
       </div>
-      <div class="heating_container"></div>
+      <div class="heating_container">
+        <HeatingTurn />
+      </div>
       <div class="temperature_zone"></div>
     </div>
     <div class="bottom_wrap"></div>
@@ -13,6 +15,7 @@
 
 <script setup>
 import Photo from 'cpns/Main/Photo'
+import HeatingTurn from 'cpns/Main/HeatingTurn'
 </script>
 
 <style lang="scss" scoped>