145 lines
2.5 KiB
Vue
145 lines
2.5 KiB
Vue
<script setup lang="ts">
|
||
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
||
import SelectItem from "@/components/selectStyle/selectItem.vue";
|
||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import editProfile1 from '@/assets/images/editProfile1.jpg'
|
||
const router = useRouter()
|
||
|
||
//const props = defineProps({
|
||
//})
|
||
//const emit = defineEmits([
|
||
//])
|
||
let data = reactive({
|
||
selectList:
|
||
[
|
||
{
|
||
id:1,
|
||
imgList:[
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
],
|
||
isLike: false,
|
||
isAdd: false,
|
||
},
|
||
{
|
||
id:2,
|
||
imgList:[
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
],
|
||
isLike: false,
|
||
isAdd: false,
|
||
},
|
||
{
|
||
id:2,
|
||
imgList:[
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
],
|
||
isLike: false,
|
||
isAdd: false,
|
||
},
|
||
{
|
||
id:2,
|
||
imgList:[
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
editProfile1,
|
||
],
|
||
isLike: false,
|
||
isAdd: false,
|
||
},
|
||
]
|
||
})
|
||
const toSelectModel = ()=>{
|
||
router.push({ path: 'selectModel' })
|
||
}
|
||
onMounted(()=>{
|
||
})
|
||
onUnmounted(()=>{
|
||
})
|
||
defineExpose({})
|
||
const { selectList } = toRefs(data);
|
||
</script>
|
||
<template>
|
||
<header-title />
|
||
<div class="selectStyle">
|
||
<div class="text">
|
||
<div class="title">
|
||
What’s your Style?
|
||
</div>
|
||
<div class="info">
|
||
Select the outfit that matches you the most.
|
||
</div>
|
||
</div>
|
||
<div class="selectContent">
|
||
<SelectItem :selectList="selectList" />
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<button @click.stop="toSelectModel">Continue</button>
|
||
</div>
|
||
</template>
|
||
<style lang="less" scoped>
|
||
.selectStyle{
|
||
width: 100%;
|
||
// height: 100%;
|
||
position: relative;
|
||
> .text{
|
||
text-align: center;
|
||
width: 100%;
|
||
margin-top: 7rem;
|
||
margin-bottom: 4.8rem;
|
||
> .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{
|
||
padding: 0 4rem;
|
||
}
|
||
}
|
||
.footer {
|
||
position: fixed;
|
||
width: 100%;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 11.2rem;
|
||
background-color: #000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
> button {
|
||
width: 24.6rem;
|
||
height: 5.9rem;
|
||
border-radius: 0.7rem;
|
||
box-sizing: content-box;
|
||
border: 0.3rem solid #fff;
|
||
background: transparent;
|
||
font-family: satoshiRegular;
|
||
font-weight: 400;
|
||
font-size: 4rem;
|
||
color: #fff;
|
||
margin-right: 5rem;
|
||
&:active {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
</style> |