118 lines
2.0 KiB
Vue
118 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
// let data = reactive({
|
|
// modelList:
|
|
// [
|
|
|
|
// ],
|
|
// selectedModelId: null,
|
|
// })
|
|
|
|
// const setSelectedModelId = (item)=>{
|
|
// data.selectedModelId = item.id;
|
|
// }
|
|
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
// const { modelList, selectedModelId } = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="selectModelContinue">
|
|
<div class="router">
|
|
<div>Home</div>
|
|
<div>Liberay</div>
|
|
</div>
|
|
<div class="text">
|
|
<div class="title">
|
|
Go with this Look?
|
|
</div>
|
|
</div>
|
|
<div class="selectContent">
|
|
<div class="history"></div>
|
|
<div class="modelBox">
|
|
<div></div>
|
|
<div class="model">
|
|
<img src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="again">
|
|
Re-try with a new model?
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.selectModelContinue{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> .router{
|
|
margin-top: 3rem;
|
|
margin-left: 5.4rem;
|
|
display: flex;
|
|
> div{
|
|
margin-right: 4.4rem;
|
|
font-size: 3rem;
|
|
font-family: satoshiRegular;
|
|
font-weight: 400;
|
|
&:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
> .text{
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 6rem;
|
|
> .title{
|
|
font-family: satoshiBold;
|
|
font-weight: 700;
|
|
font-size: 9.6rem;
|
|
line-height: 124%;
|
|
}
|
|
}
|
|
> .selectContent{
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 0 14.1rem;
|
|
margin-top: 1.5rem;
|
|
> .history{
|
|
|
|
}
|
|
> .model{
|
|
margin-top: 2.5rem;
|
|
> .model{
|
|
border: 2px solid #D9D9D9;
|
|
height: 79.8rem;
|
|
position: relative;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
}
|
|
> .again{
|
|
margin-top: 5.6rem;
|
|
font-family: satoshiMedium;
|
|
padding: 0 10.5rem;
|
|
line-height: 10.4rem;
|
|
background-color: #000;
|
|
color: #fff;
|
|
border-radius: 10rem;
|
|
font-size: 4.8rem;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |