temperature

src/components/Main/Temperature.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="temperature_zone_container">
+    <div class="header_wrap">
+      <div class="left_wrap">
+        <img :src="Hot" class="hot" alt="" />
+        <p class="text">加热温度</p>
+      </div>
+      <p class="en">℃</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Hot from '@/assets/img/main/heat/temp.png'
+</script>
+
+<style lang="scss" scoped>
+.temperature_zone_container {
+  padding: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  .header_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 2px 30px 10px;
+    .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: 20px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.06em;
+      font-feature-settings: 'kern' on;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/pages/Main.vue

@@ -7,7 +7,9 @@
       <div class="heating_container">
         <HeatingTurn />
       </div>
-      <div class="temperature_zone"></div>
+      <div class="temperature_zone">
+        <Temperature />
+      </div>
     </div>
     <div class="bottom_wrap"></div>
   </div>
@@ -16,6 +18,7 @@
 <script setup>
 import Photo from 'cpns/Main/Photo'
 import HeatingTurn from 'cpns/Main/HeatingTurn'
+import Temperature from 'cpns/Main/Temperature'
 </script>
 
 <style lang="scss" scoped>