generated from maochaoying/dreamworks-frontend-template
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
1.6 KiB
75 lines
1.6 KiB
<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>
|