aida_front/src/component/mainPage/signUp/index.vue

<template>
	<div class="signUp">
		<div class="selectSignUp" v-show="!isSelectSignUp">
			<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[monthlyOrYearly]" :key="item">
					<div class="product_signUp_box">
						<img class="img" :src="item?.img" alt="">
						<div class="title">{{ item?.title }}</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' && !isSelectSuccessively)}">
							<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>
					<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
				</div>
			</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,
				monthlyOrYearly:'monthly',
				productList:[],
				productListCn: {
					Advantages: '我们的价格方案',
					Monthly: '月度',
					Yearly: '年度',
					monthly: [
						{
							title: "个人版",
							img: '/image/homeIntroduct/personal.png',
							type:'personal',
							info: "您的AI时尚设计助手",
							price: 'HK$100',
							detail: "每月·500积分",
							highlight: "免费试用5天",
							discounts: '9折优惠',
							detailList: [
								'轻松充值积分',
								'可在公共化画廊分享设计并与设计师互动',
								'支持月付/年付选项',
								'适合个人创作者、独立设计师以及所有时尚爱好者',
								'客户支持',
							],
							btn: '立即开始',
						},
						{
							title: "个人专业版",
							img: '/image/homeIntroduct/personal.png',
							type:'personal',
							info: "您的AI时尚设计助手",
							price: 'HK$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: 'HK$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){
				    data.productList = data.productListCn
				}else{
				    data.productList = data.productListEn
				}
			},{immediate: true})
			const close = ()=>{
			}
			const setMonthlyOrYearly = (val)=>{
				data.monthlyOrYearly = val
			}
			const createAccount = ()=>{
				if(window.innerWidth < 768){
					dom.registerModel.pageWidth = '100%'
				}
				dom.registerModel.init(props.isSelectSuccessively)
			}
			onMounted(()=>{
				
			})
			return {
				...toRefs(dom),
				...toRefs(data),
				close,
				setMonthlyOrYearly,
				createAccount,
            }
		},
    })
</script>
<style scoped lang="less">
.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;
	}
	.back,.introduce>span{
		cursor: pointer;
	}
	.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;
		}
	}
	.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;
		text-decoration: underline;
	}
	.selectSignUp{
		height: 100%;
		display: flex;
		flex-direction: column;
		@media (max-width: 768px) {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
	.gallery_list_box{
		
	}
	.gallery_list{
		display: flex;
		// justify-content: center;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 4.3rem;
		@media (max-width: 767px) {
			margin-top: 2.4rem;
		}
		.gallery_item{
			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: 3.1rem;
				margin-bottom: 1rem;
				text-align: left;
				font-weight: 500;
				@media (max-width: 767px) {
					font-size: 2.3rem;
					margin-bottom: .73rem;
				}
			}
			.info{
				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;
			}
			.highlight{
				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: .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{
				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: .3rem;
					font-size: 1.6rem;
					font-weight: 500;
					@media (max-width: 767px) {
						font-size: 1.15rem;
					}
				}
				li:last-child{
					margin-bottom: 0;
				}
			}
			.gallery_btn{
				line-height: 4.6rem;
				width: 100%;
				padding: 0;
				margin-top: auto;
				font-size: 1.7rem;
				font-weight: 500;
				@media (max-width: 767px) {
					margin-top: 2.5rem;
					font-size: 1.25rem;
					line-height: 3.4rem;
					border-radius: .62rem;
				}
			}
		}
	}
}
</style>