拍照

src/components/Main/Photo.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="photo_container">
+    <div class="photo_img_wrap">
+      <p class="title">拍照加酸区</p>
+      <img :src="PhotoImg" class="img" alt="" />
+    </div>
+    <div class="opers">
+      <img :src="Load" class="img1" alt="" />
+      <img :src="Take" class="img2" alt="" />
+      <img :src="AddLiquid" class="img3" alt="" />
+      <img :src="Hot" class="img4" alt="" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PhotoImg from '@/assets/img/main/photo.png'
+import Load from '@/assets/img/main/oper/load.png'
+import Take from '@/assets/img/main/oper/take.png'
+import AddLiquid from '@/assets/img/main/oper/add_liquid.png'
+import Hot from '@/assets/img/main/oper/hot.png'
+</script>
+
+<style lang="scss" scoped>
+.photo_container {
+  padding: 20px;
+  box-sizing: border-box;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .photo_img_wrap {
+    position: relative;
+    .title {
+      position: absolute;
+      left: 40px;
+      top: 26px;
+      font-family: Poppins;
+      font-size: 26px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0.06em;
+      color: #ffffff;
+    }
+    .img {
+      width: 730px;
+      height: 730px;
+      border-radius: 14px;
+    }
+  }
+  .opers {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 40px;
+    box-sizing: border-box;
+    flex: 1;
+    .img1 {
+      width: 150px;
+      height: 38px;
+    }
+    .img2 {
+      width: 95px;
+      height: 38px;
+    }
+    .img3 {
+      width: 82px;
+      height: 38px;
+    }
+    .img4 {
+      width: 92px;
+      height: 38px;
+    }
+  }
+}
+</style>

src/pages/Main.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="main_container">
     <div class="top_wrap">
-      <div class="phote_oper_container"></div>
+      <div class="phote_oper_container">
+        <Photo />
+      </div>
       <div class="heating_container"></div>
       <div class="temperature_zone"></div>
     </div>
@@ -9,7 +11,9 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Photo from 'cpns/Main/Photo'
+</script>
 
 <style lang="scss" scoped>
 .main_container {