|
|
|
@ -1,7 +1,8 @@
@@ -1,7 +1,8 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="base-bg" style="align-items: center; display: flex"> |
|
|
|
|
<div class="timeBg margin-top-30"> |
|
|
|
|
<div class="swiper swiper-container" style="height: 100px"> |
|
|
|
|
<img class="selectedBg" src="@/assets/imgs/show/select_time_bg.png" /> |
|
|
|
|
<div class="swiper swiper-container" style="height: 150px"> |
|
|
|
|
<div class="swiper-wrapper"> |
|
|
|
|
<div v-for="(item, i) in timeList" :key="i" class="swiper-slide"> |
|
|
|
|
<div class="swiper-item"> |
|
|
|
@ -26,11 +27,12 @@ import { useRouter } from "vue-router";
@@ -26,11 +27,12 @@ import { useRouter } from "vue-router";
|
|
|
|
|
import { getCurrentInstance, onMounted, ref } from "vue"; |
|
|
|
|
import { Toast } from "vant"; |
|
|
|
|
import { Swiper } from "swiper"; |
|
|
|
|
|
|
|
|
|
let mySwiper: Swiper; // 声明swiper |
|
|
|
|
const router = useRouter(); |
|
|
|
|
const timeMode = ref("1"); |
|
|
|
|
const { proxy } = getCurrentInstance() as any; |
|
|
|
|
|
|
|
|
|
const time = ref("0.5"); |
|
|
|
|
onMounted(() => { |
|
|
|
|
initSwiper(); |
|
|
|
|
}); |
|
|
|
@ -50,23 +52,20 @@ const initSwiper = () => {
@@ -50,23 +52,20 @@ const initSwiper = () => {
|
|
|
|
|
observeParents: true, |
|
|
|
|
initialSlide: currentModeIndex, // 初始时展示的位置 |
|
|
|
|
on: { |
|
|
|
|
touchStart: () => {}, |
|
|
|
|
touchMove: () => {}, |
|
|
|
|
slideChangeTransitionEnd: () => { |
|
|
|
|
// mySwiper && |
|
|
|
|
// emit("changeSmartMode", timeList.value[mySwiper.realIndex].id); |
|
|
|
|
// nextTick(() => { |
|
|
|
|
// getShowImg(); |
|
|
|
|
// }); |
|
|
|
|
touchStart: () => { |
|
|
|
|
}, |
|
|
|
|
touchMove: () => { |
|
|
|
|
}, |
|
|
|
|
slideChangeTransitionEnd: () => { |
|
|
|
|
time.value = timeList.value[mySwiper.realIndex].text; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
const onSelectClick = (sure: boolean) => { |
|
|
|
|
router.back(); |
|
|
|
|
if (sure) { |
|
|
|
|
const time = 0.5; |
|
|
|
|
proxy.$eventBusService.emit("selectTimeEvent", time); |
|
|
|
|
proxy.$eventBusService.emit("selectTimeEvent", time.value); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
@ -79,7 +78,7 @@ const timeList = ref<any[]>([
@@ -79,7 +78,7 @@ const timeList = ref<any[]>([
|
|
|
|
|
{ text: "3.0", id: "6" }, |
|
|
|
|
{ text: "3.5", id: "7" }, |
|
|
|
|
{ text: "4.0", id: "8" }, |
|
|
|
|
{ text: "4.5", id: "9" }, |
|
|
|
|
{ text: "4.5", id: "9" } |
|
|
|
|
|
|
|
|
|
]); |
|
|
|
|
const onConfirm = ({ selectedValues }: { selectedValues: any }) => { |
|
|
|
@ -93,26 +92,30 @@ const onCancel = () => Toast("取消");
@@ -93,26 +92,30 @@ const onCancel = () => Toast("取消");
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.timeBg { |
|
|
|
|
display: flex; |
|
|
|
|
width: 672px; |
|
|
|
|
height: 520px; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
background-color: rgba($color: #a1b8e6, $alpha: 0.08); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.selectedBg { |
|
|
|
|
position: fixed; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 104px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-item { |
|
|
|
|
font-size: 60px; |
|
|
|
|
width: 65px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.smart-wrapper { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.swiper-container { |
|
|
|
|
.swiper-container { |
|
|
|
|
position: relative; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 426px; |
|
|
|
|
height: 253px; |
|
|
|
|
|
|
|
|
|
.select-wrapper { |
|
|
|
|
position: absolute; |
|
|
|
@ -126,6 +129,32 @@ const onCancel = () => Toast("取消");
@@ -126,6 +129,32 @@ const onCancel = () => Toast("取消");
|
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-slide { |
|
|
|
|
text-align: center; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
transition: 300ms; |
|
|
|
|
transform: scale(0.6); |
|
|
|
|
color: rgba($color: #FFF, $alpha: .2); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-slide-active, .swiper-slide-duplicate-active { |
|
|
|
|
transform: scale(1); |
|
|
|
|
color: white; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-slide-prev, .swiper-slide-next { |
|
|
|
|
transform: scale(0.75); |
|
|
|
|
color: rgba($color: #FFF, $alpha: .4); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-item { |
|
|
|
|
font-size: 72px; |
|
|
|
|
width: 72px; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|