305 lines
8.1 KiB
Vue
305 lines
8.1 KiB
Vue
<template>
|
|
<div class="signUp" v-if="signUp">
|
|
<div class="selectSignUp" v-show="!isSelectSignUp">
|
|
<div class="back" @click="close">
|
|
< BACK
|
|
</div>
|
|
<div class="title">Our Advantages</div>
|
|
<div class="introduce"><span @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</span></div>
|
|
<div class="gallery_list product_list">
|
|
<div class="gallery_item" v-for="item in productList" :key="item">
|
|
<div class="product_signUp_box">
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="info">{{ item.info }}</div>
|
|
<div class="detail">{{ item.detail }}</div>
|
|
<div class="highlight" v-if="item.highlight">{{ item.highlight }}</div>
|
|
<div class="gallery_btn gallery_btn_radius" :class="{active:item.title == '------------------'}" @click="createAccount">Create account</div>
|
|
</div>
|
|
<ul class="product_detail">
|
|
<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="introductDetail" v-show="isSelectSignUp">
|
|
<div class="title">Product Features</div>
|
|
<div class="gallery_list introductList">
|
|
<div class="gallery_item" v-for="item in introductList" :key="item">
|
|
<div class="itemIcon">
|
|
<img :src="item.img" alt="">
|
|
</div>
|
|
<div class="title">{{ item.title }}</div>
|
|
<div class="info">{{ item.info }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
|
|
</div>
|
|
<registerModel ref="registerModel"></registerModel>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
|
import registerModel from './registerModel.vue'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
registerModel,
|
|
},
|
|
name: "login",
|
|
emits: ['close'],
|
|
setup(props, { emit }) {
|
|
let dom = reactive({
|
|
registerModel:null
|
|
})
|
|
let data = reactive({
|
|
signUp:false,
|
|
isSelectSignUp:false,
|
|
productList:[
|
|
{
|
|
title:"Personal version",
|
|
info:"Try for 5 days",
|
|
detail:"AI Fashion Design Assistant",
|
|
highlight:"Free 5-day trial",
|
|
detailList:[
|
|
'AI Fashion Design Assistant',
|
|
'Basic 3D service functions',
|
|
'Individual Credit Limit for Independent Use',
|
|
'Works can be shared in public galleries',
|
|
'Support monthly/annual payment options',
|
|
'Suitable for individual creators and freelance designers to use'
|
|
]
|
|
},
|
|
{
|
|
title:"------------------",
|
|
info:"--- / Year",
|
|
detail:"---------------------------------------------",
|
|
// highlight:"---------------",
|
|
detailList:[
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
]
|
|
},{
|
|
title:"------------------",
|
|
info:"--- / Year",
|
|
detail:"---------------------------------------------",
|
|
// highlight:"---------------",
|
|
detailList:[
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
'---------------------------------------',
|
|
]
|
|
},
|
|
// {
|
|
// title:"Education Edition",
|
|
// info:"XXX / Year",
|
|
// detail:"Multi user management system for universities",
|
|
// highlight:"Free 5-day trial",
|
|
// detailList:[
|
|
// 'Multi user management system for universities',
|
|
// 'Credit limits are shared across the entire school',
|
|
// 'AI assisted design teaching function',
|
|
// 'Support sketch creativity and design inspiration teaching',
|
|
// 'Basic 3D design functions',
|
|
// ]
|
|
// },{
|
|
// title:"Enterprise Edition",
|
|
// info:"XXX / Year",
|
|
// detail:"Enterprise level multi person collaboration system",
|
|
// highlight:"Free 5-day trial",
|
|
// detailList:[
|
|
// 'Enterprise level multi person collaboration system',
|
|
// 'Internal Credit Sharing within Enterprises',
|
|
// 'Brand DNA management system, customizable brand Exclusive design preferences',
|
|
// 'Cloud based design generation and management',
|
|
// 'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
|
|
// 'Enterprise level data security assurance',
|
|
// 'Suitable for fashion design teams and brands to use',
|
|
// ]
|
|
// },
|
|
],
|
|
introductList:[
|
|
{
|
|
img:'/image/homeIntroduct/introduct1.png',
|
|
title:'Quickly generate images',
|
|
info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
|
|
},{
|
|
img:'/image/homeIntroduct/introduct2.png',
|
|
title:'Generate plan',
|
|
info:'Upload inspiration moodboards, colors, printboards, and sketches to generate unlimited design suggestions',
|
|
},{
|
|
img:'/image/homeIntroduct/introduct3.png',
|
|
title:'Simple operation',
|
|
info:'Just a few clicks to save and retrieve your design',
|
|
},{
|
|
img:'/image/homeIntroduct/introduct4.png',
|
|
title:'Cloud',
|
|
info:'After subscribing, you can access it anytime and anywhere through the cloud system',
|
|
},{
|
|
img:'/image/homeIntroduct/introduct5.png',
|
|
title:'Usage',
|
|
info:'Simplified operation, it only takes about ten minutes to learn how to use it',
|
|
},{
|
|
img:'/image/homeIntroduct/introduct6.png',
|
|
title:'Email',
|
|
info:'By info@code-create.com.hk Contact us to learn more',
|
|
},
|
|
]
|
|
})
|
|
const init = ()=>{
|
|
data.signUp = true
|
|
}
|
|
const close = ()=>{
|
|
data.signUp = false
|
|
emit('close')
|
|
}
|
|
const createAccount = ()=>{
|
|
if(window.innerWidth < 768){
|
|
dom.registerModel.pageWidth = '100%'
|
|
}
|
|
dom.registerModel.init()
|
|
}
|
|
onMounted(()=>{
|
|
|
|
})
|
|
return {
|
|
...toRefs(dom),
|
|
...toRefs(data),
|
|
init,
|
|
close,
|
|
createAccount,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style scoped lang="less">
|
|
.signUp{
|
|
flex: 1;
|
|
padding: 0rem 4rem;
|
|
.back{
|
|
font-size: 1.6rem;
|
|
margin-bottom: 3rem;
|
|
}
|
|
.back,.introduce>span{
|
|
cursor: pointer;
|
|
}
|
|
.title,.introduce{
|
|
font-weight: 600;
|
|
margin-bottom: 4rem;
|
|
}
|
|
.title{
|
|
font-size: 3rem;
|
|
}
|
|
.introduce{
|
|
font-size: 2.4rem;
|
|
text-decoration: underline;
|
|
}
|
|
.gallery_list{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.gallery_item{
|
|
width: calc(33.333% - 3rem);
|
|
.title,.info,.highlight{
|
|
font-weight: 600;
|
|
}
|
|
.title{
|
|
font-size: 2rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
.info,.detail,.gallery_btn{
|
|
font-size: 1.6rem;
|
|
}
|
|
.detail{
|
|
margin-top: 6rem;
|
|
margin-bottom: 7.6rem;
|
|
}
|
|
.highlight{
|
|
font-size: 2.4rem;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
|
|
border-radius: 0px 2.8rem 0px 1rem;
|
|
padding: 1rem 2rem;
|
|
}
|
|
.gallery_btn{
|
|
line-height: 6rem;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.product_list{
|
|
.gallery_item{
|
|
.product_signUp_box{
|
|
border-radius: 3rem;
|
|
border: 2px solid #000;
|
|
padding: 3rem;
|
|
position: relative;
|
|
.active{
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.product_detail{
|
|
margin-top: 4rem;
|
|
padding-left: 20px;
|
|
li{
|
|
list-style: disc;
|
|
margin-bottom: 10px;
|
|
}
|
|
li:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.introductDetail{
|
|
>.title{
|
|
margin-top: 6rem;
|
|
text-align: center;
|
|
}
|
|
.introductList{
|
|
width: 130rem;
|
|
margin: 8rem auto 0rem auto;
|
|
}
|
|
.gallery_item{
|
|
margin-bottom: 6rem;
|
|
.itemIcon{
|
|
width: 8rem;
|
|
height: 8rem;
|
|
border-radius: 2rem;
|
|
background: #000;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.title{
|
|
text-align: center;
|
|
}
|
|
.info{
|
|
font-weight: 500;
|
|
height: 9rem;
|
|
}
|
|
>div{
|
|
margin-bottom: 2rem;
|
|
}
|
|
>div:last-child{
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.gallery_btn{
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|