aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

布局修改 部分bug修复

Browse Source
This commit is contained in:
X1627315083
2025-08-22 10:27:48 +08:00
parent 141821a843
commit 594bf5ce0a
275 changed files with 5675 additions and 13049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

671
src/component/mainPage/signUp/index.vue
View File

@@ -1,37 +1,36 @@
<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="titleTitle">{{ productList.Advantages }}</div>
<div class="selectMonthlyYearly" :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']">
<div class="bg"></div>
<div class="leftText" @click="setMonthlyOrYearly('monthly')">{{ productList.Monthly }}</div>
<div class="rightText" @click="setMonthlyOrYearly('yearl')">{{ productList.Yearly }}</div>
</div>
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList" :key="item">
<div class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item">
<div class="product_signUp_box">
<img class="img" :src="item?.img" alt="">
<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="info" :class="{academic:item.type == 'academic'}">{{ item?.info }}</div>
<div class="price" v-if="item.type != 'academic'">
<div>{{ item?.price }}</div>
<span :class="{yearl:monthlyOrYearly == 'yearl'}">{{ item?.detail }}</span>
</div>
<div class="price academic" v-if="item.type == 'academic'">
<div>{{ item?.custom }}</div>
<span style="font-size: 1.4rem;">{{ item?.customInfo }}</span>
</div>
<ul class="product_detail" :class="{'academic':item.type == 'academic'}">
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
<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 class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
</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>
@@ -53,129 +52,213 @@
})
let data = reactive({
isSelectSignUp:false,
monthlyOrYearly:'monthly',
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',
},
]
productListCn: {
Advantages: '我们的价格方案',
Monthly: '月度',
Yearly: '年度',
monthly: [
{
title: "个人版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥100',
detail: "每月·50积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共化画廊分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
],
btn: '立即开始',
},
{
title: "个人专业版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥500',
detail: "每月·3500积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共画廊中分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
],
btn: '立即开始',
},{
title: "教育版",
img: '/image/homeIntroduct/academic.png',
type:'academic',
info: "高校多用户管理系统",
price: '',
detail: "",
custom:'定制方案',
customInfo:'可提供专属教育优惠，详情请联系我们',
highlight: "",
discounts: '',
detailList: [
'灵活的自定义程序以满足学校需求',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '联系我们',
},
],
yearl: [
{
title: "个人版",
img: '/image/homeIntroduct/personal.png',
type:'personal',
info: "您的AI时尚设计助手",
price: '¥5,000',
detail: "每年·50000积分",
highlight: "免费试用5天",
discounts: '9折优惠',
detailList: [
'灵活的自定义程序以满足学校需求',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '立即开始',
},{
title: "教育版",
img: '/image/homeIntroduct/academic.png',
type:'academic',
info: "高校多用户管理系统",
price: '',
detail: "",
custom:'定制方案',
customInfo:'可提供专属教育优惠，详情请联系我们',
highlight: "",
discounts: '',
detailList: [
'全校共享积分额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
],
btn: '联系我们',
},
],
},
productListEn:{
Advantages:'Our Pricing Plan',
Monthly: 'Monthly',
Yearly: 'Yearly',
monthly:[
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$100',
detail:"per month · 500 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList: [
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$500',
detail:"per month · 3500 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList:[
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},{
title:"Academic",
img:'/image/homeIntroduct/academic.png',
type:'academic',
info:"Multi User Management System for Universities",
price:'',
detail:"",
custom:'Customize',
customInfo:'Special Academic rate aviable, please contact us for details.',
highlight:"",
discounts:'',
detailList:[
'Flexible Customize Program to Support School Needs',
'Monthly Credit Renewal throughout Program Duration',
'Flexible to Share and Allocate Account Credits among Users',
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
],
btn:'Contact us',
},
],
yearl:[
{
title:"Personal",
img:'/image/homeIntroduct/personal.png',
type:'personal',
info:"Your AI Fashion Design Assistant",
price:'HK$5,000',
detail:"per month · 50000 credits",
highlight:"Free 5-Days Trial",
discounts:'10% off',
detailList:[
'Easy to Top up Credits',
'Option to Share Design and Interact with Designers in Public Gallery',
'Support Monthly/Annual Payment Options',
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
'Customer and Technical Support',
],
btn:'Get Started',
},{
title:"Academic",
img:'/image/homeIntroduct/academic.png',
type:'academic',
info:"Multi User Management System for Universities",
price:'',
detail:"",
custom:'Customize',
customInfo:'Special Academic rate aviable, please contact us for details.',
highlight:"",
discounts:'',
detailList:[
'Flexible Customize Program to Support School Needs',
'Monthly Credit Renewal throughout Program Duration',
'Flexible to Share and Allocate Account Credits among Users',
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
],
btn:'Contact us',
},
],
}
})
watch(()=>props.isSelectSuccessively,(newVal)=>{
if(newVal){
@@ -186,11 +269,14 @@
},{immediate: true})
const close = ()=>{
}
const setMonthlyOrYearly = (val)=>{
data.monthlyOrYearly = val
}
const createAccount = ()=>{
if(window.innerWidth < 768){
dom.registerModel.pageWidth = '100%'
}
dom.registerModel.init()
dom.registerModel.init(props.isSelectSuccessively)
}
onMounted(()=>{
@@ -199,6 +285,7 @@
...toRefs(dom),
...toRefs(data),
close,
setMonthlyOrYearly,
createAccount,
}
},
@@ -208,6 +295,13 @@
.signUp{
flex: 1;
padding: 0rem 4rem;
margin-top: 5.6rem;
@media (max-width: 767px) {
margin-top: 1.5rem;
padding: 0rem 3.7rem;
flex: 1;
overflow-y: auto;
}
.back{
font-size: 1.6rem;
margin-bottom: 3rem;
@@ -215,12 +309,70 @@
.back,.introduce>span{
cursor: pointer;
}
.title,.introduce{
font-weight: 600;
margin-bottom: 4rem;
.titleTitle{
font-size: 4.6rem;
font-weight: 500;
text-align: center;
margin-bottom: 2rem;
@media (max-width: 767px) {
font-size: 2.68rem;
margin-bottom: 1.1rem;
}
}
.title{
font-size: 3rem;
.selectMonthlyYearly{
border: .7px solid #e7ebff;
background: #FBFBFB;
border-radius: 1rem;
width: 18.5rem;
box-shadow: 0px 0.72px 3.62px 0px #566EE81A inset;
margin: 0 auto;
display: flex;
position: relative;
--selectPadding: .58rem;
padding: var(--selectPadding);
@media (max-width: 767px) {
--selectPadding: .36rem;
border-radius: .58rem;
width: 10.8rem;
}
&.left{
> .bg{
left: var(--selectPadding);
}
> .leftText{
color: #000;
}
}
&.right{
> .bg{
left: calc(50% + var(--selectPadding));
}
> .rightText{
color: #000;
}
}
> .bg{
border: .7px solid #E7EBFF;
box-shadow: 0px 4.35px 26.08px 0px #B5C2FB1A;
background: #ffffff;
width: calc(50% - var(--selectPadding) * 2);
height: calc(100% - var(--selectPadding) * 2);
position: absolute;
transition: all .3s;
}
> .leftText,> .rightText{
cursor: pointer;
font-weight: 400;
font-size: 1.7rem;
width: 50%;
text-align: center;
color: #797878;
position: relative;
font-family: 'pingfang_regular';
@media (max-width: 767px) {
font-size: 1rem;
}
}
}
.introduce{
font-size: 2.4rem;
@@ -228,109 +380,176 @@
}
.gallery_list{
display: flex;
justify-content: space-between;
// justify-content: center;
flex-wrap: wrap;
justify-content: center;
margin-top: 4.3rem;
@media (max-width: 767px) {
margin-top: 2.4rem;
}
.gallery_item{
width: calc(33.333% - 3rem);
.title,.info,.highlight{
font-weight: 600;
width: 44.1rem;
height: 56.9rem;
padding: 2.09rem;
border-radius: 1.8rem;
border: .72px solid #E7EBFF;
margin-right: 8rem;
position: relative;
@media (max-width: 767px) {
width: 100%;
height: auto;
border-radius: 1.3rem;
margin: 0;
margin-bottom: 2.8rem;
padding-bottom: 1.3rem;
}
.product_signUp_box{
display: flex;
flex-direction: column;
height: 100%;
}
&:last-child{
margin-right: 0rem;
margin-bottom: 0rem;
}
.img{
margin-bottom: 1.4rem;
width: 4rem;
height: 4rem;
@media (max-width: 767px) {
width: 2.9rem;
height: 2.9rem;
margin-bottom: 1rem;
}
}
.title{
font-size: 2rem;
margin-bottom: 10px;
font-size: 3.1rem;
margin-bottom: 1rem;
text-align: left;
font-weight: 500;
@media (max-width: 767px) {
font-size: 2.3rem;
margin-bottom: .73rem;
}
}
.info{
line-height: 2rem;
height: 2rem;
font-weight: 400;
font-size: 1.4rem;
color: #797878;
margin-bottom: 1.7rem;
font-family: 'pingfang_regular';
&.academic{
margin-bottom: .4rem;
}
@media (max-width: 767px) {
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
}
.price{
// margin-bottom: 5.2rem;
border-bottom: .72px solid #E7EBFF;
width: 100%;
display: flex;
align-items: flex-end;
@media (max-width: 767px) {
margin-bottom: 2.3rem;
}
&.academic{
align-items: flex-start;
flex-direction: column;
> div{
margin-bottom: .9rem;
font-size: 4.3rem;
line-height: 1;
letter-spacing: -.072rem;
@media (max-width: 767px) {
font-size: 3.1rem;
margin-bottom: .5rem;
}
}
> span{
margin: 0;
}
}
> div{
font-weight: 500;
font-size: 4.3rem;
color: #1B223C;
@media (max-width: 767px) {
font-size: 3.14rem;
}
}
> span{
font-weight: 500;
font-size: 1.7rem;
color: #797878;
margin-bottom: 1.5rem;
margin-left: 1rem;
&.yearl{
font-size: 1.3rem;
}
@media (max-width: 767px) {
font-size: 1.2rem;
margin-left: .7rem;
margin-bottom: 1rem;
}
}
}
.info,.detail,.gallery_btn{
font-size: 1.6rem;
}
.detail{
margin-top: 6rem;
margin-bottom: 7.6rem;
}
.highlight{
font-size: 2.4rem;
font-size: 1.3rem;
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;
border-radius: .5rem 1.5rem 0px 1.5rem;
padding: .75rem .5rem;
@media (max-width: 767px) {
padding: .55rem .36rem;
border-radius: .46rem .36rem 0px .9rem;
font-size: 1rem;
}
}
.product_detail{
margin-top: 4rem;
padding-left: 20px;
padding-left: 3.1rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow-y: auto;
&.academic{
justify-content: flex-start
}
li{
list-style: disc;
margin-bottom: 10px;
margin-bottom: .3rem;
font-size: 1.6rem;
font-weight: 500;
@media (max-width: 767px) {
font-size: 1.15rem;
}
}
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{
.gallery_btn{
line-height: 4.6rem;
width: 100%;
padding: 0;
margin-top: auto;
font-size: 1.7rem;
font-weight: 500;
height: 9rem;
@media (max-width: 767px) {
margin-top: 2.5rem;
font-size: 1.25rem;
line-height: 3.4rem;
border-radius: .62rem;
}
}
>div{
margin-bottom: 2rem;
}
>div:last-child{
margin-bottom: 0;
}
}
.gallery_btn{
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
}