graphite-digester/src/components/Main/Photo.vue

<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>