heat

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>

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>