fix
This commit is contained in:
X1627315083
275
src/component/mainPage/signUp/index.vue
Normal file
275
src/component/mainPage/signUp/index.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="signUp" v-if="signUp">
|
||||
<div class="selectSignUp" v-show="!isSelectSignUp">
|
||||
<div class="back" @click="close">
|
||||
< BACK
|
||||
</div>
|
||||
<div class="title">Choose your subscription plan</div>
|
||||
<div class="introduce" @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</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">{{ item.highlight }}</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @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">Choose your subscription plan</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:"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 boards, colors, fabric printing patterns, 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{
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user