143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<template>
|
|
<section class="price_container">
|
|
<section class="_content">
|
|
<section class="left_btn"></section>
|
|
<section class="_center">
|
|
<img :src="current.info.img" alt="" />
|
|
</section>
|
|
<section class="right_btn"></section>
|
|
</section>
|
|
<section class="_footer">
|
|
<span class="left_btn" @click="handleChange(-1)"></span>
|
|
<span class="right_btn" @click="handleChange(1)"></span>
|
|
{{ current.info.name }}{{ current.info.price }}
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import tomatoImg from '@/assets/images/entities/tomatoImg.png';
|
|
import a from '@/assets/images/entities/1.png';
|
|
import b from '@/assets/images/entities/2.png';
|
|
import c from '@/assets/images/entities/3.png';
|
|
import d from '@/assets/images/entities/4.png';
|
|
import e from '@/assets/images/entities/5.png';
|
|
const list = ref([
|
|
{
|
|
name: '西红柿',
|
|
price: '1.35元/公斤',
|
|
img: tomatoImg,
|
|
},
|
|
{
|
|
name: '南瓜',
|
|
price: '2.45元/公斤',
|
|
img: a,
|
|
},
|
|
{
|
|
name: '彩椒',
|
|
price: '2.22元/公斤',
|
|
img: b,
|
|
},
|
|
{
|
|
name: '甘蔗',
|
|
price: '0.84元/公斤',
|
|
img: c,
|
|
},
|
|
{
|
|
name: '石斛',
|
|
price: '56.24元/公斤',
|
|
img: d,
|
|
},
|
|
{
|
|
name: '土豆',
|
|
price: '0.76元/公斤',
|
|
img: e,
|
|
},
|
|
]);
|
|
const current = reactive({
|
|
index: 0,
|
|
length: list.value.length - 1,
|
|
info: {
|
|
name: '西红柿',
|
|
price: '1.35元/公斤',
|
|
img: tomatoImg,
|
|
},
|
|
});
|
|
function handleChange(n) {
|
|
if (current.index == 0 && n == -1) {
|
|
current.index = current.length;
|
|
} else if (current.index == current.length && n == 1) {
|
|
current.index = 0;
|
|
} else {
|
|
current.index += n;
|
|
}
|
|
console.log('current', current);
|
|
current.info = list.value[current.index];
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.price_container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
._content {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-template-columns: 25% calc(50% - 28px) 25%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 14px;
|
|
width: 100%;
|
|
._center {
|
|
padding-top: 20px;
|
|
height: 100%;
|
|
text-align: center;
|
|
img {
|
|
width: 60%;
|
|
height: 60%;
|
|
}
|
|
background: url('../../../assets/images/entities/goodsBG.png') no-repeat center center / 100%;
|
|
background-position: bottom center;
|
|
}
|
|
.left_btn,
|
|
.right_btn {
|
|
aspect-ratio: 1 / 1;
|
|
background: url('../../../assets/images/entities/leftArrowBG.png') no-repeat center center / 100%;
|
|
}
|
|
.right_btn {
|
|
background: url('../../../assets/images/entities/rightArrowBG.png') no-repeat center center / 100%;
|
|
}
|
|
}
|
|
._footer {
|
|
position: relative;
|
|
height: 40px;
|
|
width: 60%;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
background: url('../../../assets/images/basic/tagBG.png') no-repeat center center / cover;
|
|
span {
|
|
display: block;
|
|
position: absolute;
|
|
top: 8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
text-shadow: 2px 0px 10px 0px #01eeff;
|
|
}
|
|
.left_btn {
|
|
left: 6px;
|
|
background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
|
|
}
|
|
.right_btn {
|
|
right: 6px;
|
|
background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
|
|
}
|
|
}
|
|
}
|
|
</style>
|