177 lines
3.3 KiB
Vue
177 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
import HeaderTitle from '@/components/HeaderTitle.vue'
|
|
import { useRouter } from 'vue-router'
|
|
import imgReturn from '@/assets/images/workshop/posture/posture_1.png'
|
|
const router = useRouter()
|
|
//const props = defineProps({
|
|
//})
|
|
const emit = defineEmits([
|
|
'view-type'
|
|
])
|
|
let data = reactive({
|
|
modelList:
|
|
[
|
|
{
|
|
id:1,
|
|
imgUrl:imgReturn,
|
|
},
|
|
{
|
|
id:2,
|
|
imgUrl:imgReturn,
|
|
},
|
|
{
|
|
id:3,
|
|
imgUrl:imgReturn,
|
|
},
|
|
{
|
|
id:4,
|
|
imgUrl:imgReturn,
|
|
},
|
|
{
|
|
id:5,
|
|
imgUrl:imgReturn,
|
|
},
|
|
{
|
|
id:6,
|
|
imgUrl:imgReturn,
|
|
},
|
|
|
|
],
|
|
selectedModelId: null,
|
|
})
|
|
|
|
const setSelectedModelId = (item)=>{
|
|
data.selectedModelId = item.id;
|
|
}
|
|
onMounted(()=>{
|
|
emit('view-type', 1)
|
|
})
|
|
const toProduct = ()=>{
|
|
router.push({ path: 'product' })
|
|
}
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const { modelList, selectedModelId } = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<header-title style-type="2" />
|
|
<div class="selectModel">
|
|
<div class="text">
|
|
<div class="title">
|
|
Pick a Model Photo!
|
|
</div>
|
|
<div class="info">
|
|
Try one of our sample images
|
|
</div>
|
|
</div>
|
|
<div class="selectContent">
|
|
<div class="modelList">
|
|
<div v-for="item in modelList" :key="item.id" class="item" @click.stop="setSelectedModelId(item)">
|
|
<img :src="item.imgUrl" alt="">
|
|
<div class="icon" v-if="item.id == selectedModelId">
|
|
<SvgIcon name="modelSelected" size="60" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer placeholder"></div>
|
|
<div class="footer">
|
|
<button @click.stop="toProduct">Continue</button>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.selectModel{
|
|
width: 100%;
|
|
// height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
> .text{
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 3.4rem;
|
|
margin-bottom: 6rem;
|
|
> .title{
|
|
font-family: satoshiBold;
|
|
font-weight: 700;
|
|
font-size: 9.6rem;
|
|
line-height: 124%;
|
|
}
|
|
> .info{
|
|
font-size: 4rem;
|
|
font-weight: 400;
|
|
line-height: 124%;
|
|
margin-top: 1.3rem;
|
|
}
|
|
}
|
|
> .selectContent{
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 11.8rem;
|
|
> .modelList{
|
|
padding: .6rem 2rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
> .item{
|
|
width: calc((100% - 2.5rem * 2) / 3);
|
|
border: 2px solid #D9D9D9;
|
|
border-radius: 1rem;
|
|
margin-bottom: 5.4rem;
|
|
height: 75rem;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
> .icon{
|
|
position: absolute;
|
|
width: 6rem;
|
|
height: 6rem;
|
|
bottom: -1.8rem;
|
|
right: -2.1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 11.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
background-color: #fff;
|
|
box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
|
|
&.placeholder{
|
|
position: relative;
|
|
}
|
|
> button {
|
|
width: 24.6rem;
|
|
height: 5.9rem;
|
|
border-radius: 0.7rem;
|
|
box-sizing: content-box;
|
|
border: 0.3rem solid #000;
|
|
background-color: #000;
|
|
font-family: satoshiBold;
|
|
font-weight: 700;
|
|
font-size: 3.6rem;
|
|
color: #fff;
|
|
margin-right: 5rem;
|
|
&:active {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
}
|
|
</style> |