338 lines
9.1 KiB
Vue
338 lines
9.1 KiB
Vue
<template>
|
||
<div class="signUp">
|
||
<div class="selectSignUp" v-show="!isSelectSignUp">
|
||
<div class="title">{{ productList[0].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" v-if="item?.btn != 'Contact us'" @click="createAccount">{{ item?.btn }}</div>
|
||
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">{{ item?.btn }}</a>
|
||
</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 class="gallery_btn" v-else style="width: 20rem;" @click="()=>isSelectSignUp=false">Contact us</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",
|
||
props: ['isSelectSuccessively'],
|
||
// emits: ['close'],
|
||
setup(props, { emit }) {
|
||
let dom = reactive({
|
||
registerModel:null
|
||
})
|
||
let data = reactive({
|
||
isSelectSignUp:false,
|
||
productList:[],
|
||
productListCn:[
|
||
{
|
||
Advantages:'我们的优势',
|
||
title:"个人版",
|
||
info:"试用五天(注册后开始免费试用)",
|
||
detail:"时尚设计助理",
|
||
highlight:"免费试用五天",
|
||
detailList:[
|
||
'时尚设计助理',
|
||
// 'Basic 3D service functions',
|
||
'个人信用额度供独立使用',
|
||
'作品可以在作品广场中共享',
|
||
'支持按 月/年 支付方式',
|
||
'适合个人创作者和自由设计师试用'
|
||
],
|
||
btn:'创建账号',
|
||
},
|
||
{
|
||
title: "教育版",
|
||
info: "",
|
||
detail: "高校多用户管理系统",
|
||
highlight: "",
|
||
detailList: [
|
||
"高校多用户管理系统",
|
||
"全校范围内共享信用额度",
|
||
"AI辅助设计教学功能",
|
||
"支持草图创意与设计灵感教学",
|
||
"基础3D设计功能"
|
||
],
|
||
btn:'联系我们',
|
||
},
|
||
{
|
||
title: "企业版",
|
||
info: "",
|
||
detail: "企业级多人协作系统",
|
||
highlight: "",
|
||
detailList: [
|
||
"企业级多人协作系统",
|
||
"组织内部信用额度共享",
|
||
"品牌DNA管理系统，可定制品牌专属设计偏好",
|
||
"云端设计生成与管理",
|
||
"完整3D设计功能，支持高清打印输出、专业制版与效果图3D渲染",
|
||
"企业级数据安全保障",
|
||
"适用于服装设计团队与品牌使用"
|
||
],
|
||
btn:'联系我们',
|
||
}
|
||
],
|
||
productListEn:[
|
||
{
|
||
Advantages:'Our Advantages',
|
||
title:"Personal version",
|
||
info:"Try for 5 days(Free trail starts upon registration)",
|
||
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'
|
||
],
|
||
btn:'Create account',
|
||
},
|
||
{
|
||
title:"Education Edition",
|
||
info:"",
|
||
detail:"Multi user management system for universities",
|
||
highlight:"",
|
||
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',
|
||
],
|
||
btn:'Contact us',
|
||
},{
|
||
title:"Enterprise Edition",
|
||
info:"",
|
||
detail:"Enterprise level multi-person collaboration system",
|
||
highlight:"",
|
||
detailList:[
|
||
'Enterprise level multi-person collaboration system',
|
||
'Internal Credit Sharing within organization',
|
||
'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',
|
||
],
|
||
btn:'Contact us',
|
||
},
|
||
],
|
||
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',
|
||
},
|
||
]
|
||
})
|
||
watch(()=>props.isSelectSuccessively,(newVal)=>{
|
||
if(newVal){
|
||
data.productList = data.productListCn
|
||
}else{
|
||
data.productList = data.productListEn
|
||
}
|
||
},{immediate: true})
|
||
const close = ()=>{
|
||
}
|
||
const createAccount = ()=>{
|
||
if(window.innerWidth < 768){
|
||
dom.registerModel.pageWidth = '100%'
|
||
}
|
||
dom.registerModel.init()
|
||
}
|
||
onMounted(()=>{
|
||
|
||
})
|
||
return {
|
||
...toRefs(dom),
|
||
...toRefs(data),
|
||
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;
|
||
// justify-content: center;
|
||
flex-wrap: wrap;
|
||
.gallery_item{
|
||
width: calc(33.333% - 3rem);
|
||
.title,.info,.highlight{
|
||
font-weight: 600;
|
||
}
|
||
.title{
|
||
font-size: 2rem;
|
||
margin-bottom: 10px;
|
||
}
|
||
.info{
|
||
line-height: 2rem;
|
||
height: 2rem;
|
||
}
|
||
.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>
|