style: 注册页面套餐item样式
This commit is contained in:
@@ -2,326 +2,361 @@
|
|||||||
<div class="signUp">
|
<div class="signUp">
|
||||||
<div class="selectSignUp" v-show="!isSelectSignUp">
|
<div class="selectSignUp" v-show="!isSelectSignUp">
|
||||||
<div class="titleTitle">{{ productList.Advantages }}</div>
|
<div class="titleTitle">{{ productList.Advantages }}</div>
|
||||||
<div class="selectMonthlyYearly" :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']">
|
<div
|
||||||
|
class="selectMonthlyYearly"
|
||||||
|
:class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']"
|
||||||
|
>
|
||||||
<div class="bg"></div>
|
<div class="bg"></div>
|
||||||
<div class="leftText" @click="setMonthlyOrYearly('monthly')">{{ productList.Monthly }}</div>
|
<div class="leftText" @click="setMonthlyOrYearly('monthly')">
|
||||||
<div class="rightText" @click="setMonthlyOrYearly('yearl')">{{ productList.Yearly }}</div>
|
{{ productList.Monthly }}
|
||||||
|
</div>
|
||||||
|
<div class="rightText" @click="setMonthlyOrYearly('yearl')">
|
||||||
|
{{ productList.Yearly }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gallery_list product_list">
|
<div class="gallery_list product_list">
|
||||||
<div class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item">
|
<div
|
||||||
|
class="gallery_item"
|
||||||
|
v-for="item in productList[monthlyOrYearly]"
|
||||||
|
:key="item"
|
||||||
|
:class="{ recommended: item.recommended }"
|
||||||
|
>
|
||||||
<div class="product_signUp_box">
|
<div class="product_signUp_box">
|
||||||
<img class="img" :src="item?.img" alt="">
|
<img class="img" :src="item?.img" alt="" />
|
||||||
<div class="title">{{ item?.title }}</div>
|
<div class="title">{{ item?.title }}</div>
|
||||||
<div class="info" :class="{academic:item.type == 'academic'}">{{ item?.info }}</div>
|
<div class="info" :class="{ academic: item.type == 'academic' }">
|
||||||
|
{{ item?.info }}
|
||||||
|
</div>
|
||||||
<div class="price" v-if="item.type != 'academic'">
|
<div class="price" v-if="item.type != 'academic'">
|
||||||
<div>{{ item?.price }}</div>
|
<div>{{ item?.price }}</div>
|
||||||
<span :class="{yearl:monthlyOrYearly == 'yearl'}">{{ item?.detail }}</span>
|
<span :class="{ yearl: monthlyOrYearly == 'yearl' }">
|
||||||
|
{{ item?.detail }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="price academic" v-if="item.type == 'academic'">
|
<div class="price academic" v-if="item.type == 'academic'">
|
||||||
<div>{{ item?.custom }}</div>
|
<div>{{ item?.custom }}</div>
|
||||||
<span style="font-size: 1.4rem;">{{ item?.customInfo }}</span>
|
<span style="font-size: 1.4rem">{{ item?.customInfo }}</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="product_detail" :class="{'academic':(item.type == 'academic' && !isSelectSuccessively)}">
|
<ul
|
||||||
|
class="product_detail"
|
||||||
|
:class="{ academic: item.type == 'academic' && !isSelectSuccessively }"
|
||||||
|
>
|
||||||
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
|
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'" @click="createAccount">{{ item?.btn }}</div>
|
<div
|
||||||
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">{{ item?.btn }}</div>
|
class="gallery_btn gallery_btn_radius"
|
||||||
|
v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'"
|
||||||
|
@click="createAccount"
|
||||||
|
>
|
||||||
|
{{ item?.btn }}
|
||||||
|
</div>
|
||||||
|
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">
|
||||||
|
{{ item?.btn }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
|
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<registerModel ref="registerModel"></registerModel>
|
<registerModel ref="registerModel"></registerModel>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from 'vue'
|
||||||
import registerModel from './registerModel.vue'
|
import registerModel from './registerModel.vue'
|
||||||
import { message } from "ant-design-vue";
|
import { message } from 'ant-design-vue'
|
||||||
import CChargeIcon from '@/assets/icons/CCharge.svg'
|
import CChargeIcon from '@/assets/icons/CCharge.svg'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
registerModel,
|
registerModel
|
||||||
},
|
},
|
||||||
name: "login",
|
name: 'login',
|
||||||
props: ['isSelectSuccessively'],
|
props: ['isSelectSuccessively'],
|
||||||
// emits: ['close'],
|
// emits: ['close'],
|
||||||
setup(props, { emit }) {
|
setup(props, { emit }) {
|
||||||
let dom = reactive({
|
let dom = reactive({
|
||||||
registerModel:null
|
registerModel: null
|
||||||
})
|
})
|
||||||
let data = reactive({
|
let data = reactive({
|
||||||
isSelectSignUp:false,
|
isSelectSignUp: false,
|
||||||
monthlyOrYearly:'monthly',
|
monthlyOrYearly: 'monthly',
|
||||||
productList:[],
|
productList: [],
|
||||||
productListCn: {
|
productListCn: {
|
||||||
Advantages: '我们的价格方案',
|
Advantages: '我们的价格方案',
|
||||||
Monthly: '月度',
|
Monthly: '月度',
|
||||||
Yearly: '年度',
|
Yearly: '年度',
|
||||||
monthly: [
|
monthly: [
|
||||||
{
|
{
|
||||||
title: "试用版",
|
title: '免费版',
|
||||||
img: CChargeIcon,
|
img: CChargeIcon,
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info: "您的AI时尚设计助手",
|
info: '您的AI时尚设计助手',
|
||||||
price: '100积分',
|
price: 'HK$0',
|
||||||
detail: "",
|
detail: '5天·50积分',
|
||||||
highlight: "",
|
highlight: '',
|
||||||
discounts: '9折优惠',
|
discounts: '9折优惠',
|
||||||
detailList: [
|
detailList: [
|
||||||
'轻松充值积分',
|
'轻松充值积分',
|
||||||
'可在公共化画廊分享设计并与设计师互动',
|
'可在公共化画廊分享设计并与设计师互动',
|
||||||
'支持月付/年付选项',
|
'支持月付/年付选项',
|
||||||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||||||
'客户支持',
|
'客户支持'
|
||||||
],
|
],
|
||||||
btn: '立即开始',
|
btn: '立即开始'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "个人版",
|
title: '个人版',
|
||||||
img: '/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info: "您的AI时尚设计助手",
|
info: '您的AI时尚设计助手',
|
||||||
price: 'HK$100',
|
price: 'HK$100',
|
||||||
detail: "每月·500积分",
|
detail: '每月·500积分',
|
||||||
highlight: "",
|
highlight: '',
|
||||||
discounts: '9折优惠',
|
discounts: '9折优惠',
|
||||||
detailList: [
|
detailList: [
|
||||||
'轻松充值积分',
|
'轻松充值积分',
|
||||||
'可在公共化画廊分享设计并与设计师互动',
|
'可在公共化画廊分享设计并与设计师互动',
|
||||||
'支持月付/年付选项',
|
'支持月付/年付选项',
|
||||||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||||||
'客户支持',
|
'客户支持'
|
||||||
],
|
],
|
||||||
btn: '立即开始',
|
btn: '立即开始'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "个人专业版",
|
title: '个人专业版',
|
||||||
img: '/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info: "您的AI时尚设计助手",
|
info: '您的AI时尚设计助手',
|
||||||
price: 'HK$500',
|
price: 'HK$500',
|
||||||
detail: "每月·3500积分",
|
detail: '每月·3500积分',
|
||||||
highlight: "推荐",
|
highlight: '推荐',
|
||||||
|
recommended: true,
|
||||||
discounts: '9折优惠',
|
discounts: '9折优惠',
|
||||||
detailList: [
|
detailList: [
|
||||||
'轻松充值积分',
|
'轻松充值积分',
|
||||||
'可在公共画廊中分享设计并与设计师互动',
|
'可在公共画廊中分享设计并与设计师互动',
|
||||||
'支持月付/年付选项',
|
'支持月付/年付选项',
|
||||||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||||||
'客户支持',
|
'客户支持'
|
||||||
],
|
],
|
||||||
btn: '立即开始',
|
btn: '立即开始'
|
||||||
},{
|
},
|
||||||
title: "教育版",
|
{
|
||||||
|
title: '教育版',
|
||||||
img: '/image/homeIntroduct/academic.png',
|
img: '/image/homeIntroduct/academic.png',
|
||||||
type:'academic',
|
type: 'academic',
|
||||||
info: "高校多用户管理系统",
|
info: '高校多用户管理系统',
|
||||||
price: '',
|
price: '',
|
||||||
detail: "",
|
detail: '',
|
||||||
custom:'定制方案',
|
custom: '定制方案',
|
||||||
customInfo:'可提供专属教育优惠，详情请联系我们',
|
customInfo: '可提供专属教育优惠，详情请联系我们',
|
||||||
highlight: "",
|
highlight: '',
|
||||||
discounts: '',
|
discounts: '',
|
||||||
detailList: [
|
detailList: [
|
||||||
'灵活的自定义程序以满足学校需求',
|
'灵活的自定义程序以满足学校需求',
|
||||||
"项目期间每月信用额度自动续期",
|
'项目期间每月信用额度自动续期',
|
||||||
'可在用户之间灵活共享和分配账户信用额度',
|
'可在用户之间灵活共享和分配账户信用额度',
|
||||||
'AI辅助设计教学功能',
|
'AI辅助设计教学功能',
|
||||||
"从设计灵感、草图创作到完整时装系列的尖端教学工具",
|
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
|
||||||
"基本3D设计功能",
|
'基本3D设计功能',
|
||||||
"客户与技术支援",
|
'客户与技术支援'
|
||||||
],
|
],
|
||||||
btn: '联系我们',
|
btn: '联系我们'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
yearl: [
|
yearl: [
|
||||||
{
|
{
|
||||||
title: "个人版",
|
title: '个人版',
|
||||||
img: '/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info: "您的AI时尚设计助手",
|
info: '您的AI时尚设计助手',
|
||||||
price: 'HK$5,000',
|
price: 'HK$5,000',
|
||||||
detail: "每年·50000积分",
|
detail: '每年·50000积分',
|
||||||
highlight: "免费试用5天",
|
highlight: '免费试用5天',
|
||||||
discounts: '9折优惠',
|
discounts: '9折优惠',
|
||||||
detailList: [
|
detailList: [
|
||||||
'灵活的自定义程序以满足学校需求',
|
'灵活的自定义程序以满足学校需求',
|
||||||
'可在用户之间灵活共享和分配账户信用额度',
|
'可在用户之间灵活共享和分配账户信用额度',
|
||||||
'AI辅助设计教学功能',
|
'AI辅助设计教学功能',
|
||||||
'支持草图创意和设计灵感教学',
|
'支持草图创意和设计灵感教学',
|
||||||
'基础3D设计功能',
|
'基础3D设计功能'
|
||||||
],
|
],
|
||||||
btn: '立即开始',
|
btn: '立即开始'
|
||||||
},{
|
},
|
||||||
title: "教育版",
|
{
|
||||||
|
title: '教育版',
|
||||||
img: '/image/homeIntroduct/academic.png',
|
img: '/image/homeIntroduct/academic.png',
|
||||||
type:'academic',
|
type: 'academic',
|
||||||
info: "高校多用户管理系统",
|
info: '高校多用户管理系统',
|
||||||
price: '',
|
price: '',
|
||||||
detail: "",
|
detail: '',
|
||||||
custom:'定制方案',
|
custom: '定制方案',
|
||||||
customInfo:'可提供专属教育优惠，详情请联系我们',
|
customInfo: '可提供专属教育优惠，详情请联系我们',
|
||||||
highlight: "",
|
highlight: '',
|
||||||
discounts: '',
|
discounts: '',
|
||||||
detailList: [
|
detailList: [
|
||||||
'灵活的自定义程序以满足学校需求',
|
'灵活的自定义程序以满足学校需求',
|
||||||
"项目期间每月信用额度自动续期",
|
'项目期间每月信用额度自动续期',
|
||||||
'可在用户之间灵活共享和分配账户信用额度',
|
'可在用户之间灵活共享和分配账户信用额度',
|
||||||
'AI辅助设计教学功能',
|
'AI辅助设计教学功能',
|
||||||
"从设计灵感、草图创作到完整时装系列的尖端教学工具",
|
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
|
||||||
"基本3D设计功能",
|
'基本3D设计功能',
|
||||||
"客户与技术支援",
|
'客户与技术支援'
|
||||||
],
|
],
|
||||||
btn: '联系我们',
|
btn: '联系我们'
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
],
|
productListEn: {
|
||||||
},
|
Advantages: 'Our Pricing Plan',
|
||||||
productListEn:{
|
|
||||||
Advantages:'Our Pricing Plan',
|
|
||||||
Monthly: 'Monthly',
|
Monthly: 'Monthly',
|
||||||
Yearly: 'Yearly',
|
Yearly: 'Yearly',
|
||||||
monthly:[
|
monthly: [
|
||||||
{
|
{
|
||||||
title:"Personal",
|
title: 'Free',
|
||||||
img:CChargeIcon,
|
img: CChargeIcon,
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info:"Your AI Fashion Design Assistant",
|
info: 'Your AI Fashion Design Assistant',
|
||||||
price:'100 credits',
|
price: 'HK$0',
|
||||||
detail:"",
|
detail: '5 days · 50 credits',
|
||||||
highlight:"",
|
highlight: '',
|
||||||
discounts:'10% off',
|
discounts: '10% off',
|
||||||
detailList: [
|
detailList: [
|
||||||
'Easy to Top up Credits',
|
'Easy to Top up Credits',
|
||||||
'Option to Share Design and Interact with Designers in Public Gallery',
|
'Option to Share Design and Interact with Designers in Public Gallery',
|
||||||
'Support Monthly/Annual Payment Options',
|
'Support Monthly/Annual Payment Options',
|
||||||
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
],
|
||||||
btn:'Get Started',
|
btn: 'Get Started'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"Personal",
|
title: 'Personal',
|
||||||
img:'/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info:"Your AI Fashion Design Assistant",
|
info: 'Your AI Fashion Design Assistant',
|
||||||
price:'HK$100',
|
price: 'HK$100',
|
||||||
detail:"per month · 500 credits",
|
detail: 'per month · 500 credits',
|
||||||
highlight:"",
|
highlight: '',
|
||||||
discounts:'10% off',
|
discounts: '10% off',
|
||||||
detailList: [
|
detailList: [
|
||||||
'Easy to Top up Credits',
|
'Easy to Top up Credits',
|
||||||
'Option to Share Design and Interact with Designers in Public Gallery',
|
'Option to Share Design and Interact with Designers in Public Gallery',
|
||||||
'Support Monthly/Annual Payment Options',
|
'Support Monthly/Annual Payment Options',
|
||||||
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
],
|
||||||
btn:'Get Started',
|
btn: 'Get Started'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title:"Personal",
|
title: 'Personal',
|
||||||
img:'/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info:"Your AI Fashion Design Assistant",
|
info: 'Your AI Fashion Design Assistant',
|
||||||
price:'HK$500',
|
price: 'HK$500',
|
||||||
detail:"per month · 3500 credits",
|
detail: 'per month · 3500 credits',
|
||||||
highlight:"Recommended",
|
highlight: 'Recommended',
|
||||||
discounts:'10% off',
|
recommended: true,
|
||||||
detailList:[
|
discounts: '10% off',
|
||||||
|
detailList: [
|
||||||
'Easy to Top up Credits',
|
'Easy to Top up Credits',
|
||||||
'Option to Share Design and Interact with Designers in Public Gallery',
|
'Option to Share Design and Interact with Designers in Public Gallery',
|
||||||
'Support Monthly/Annual Payment Options',
|
'Support Monthly/Annual Payment Options',
|
||||||
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
],
|
||||||
btn:'Get Started',
|
btn: 'Get Started'
|
||||||
},{
|
},
|
||||||
title:"Academic",
|
{
|
||||||
img:'/image/homeIntroduct/academic.png',
|
title: 'Academic',
|
||||||
type:'academic',
|
img: '/image/homeIntroduct/academic.png',
|
||||||
info:"Multi User Management System for Universities",
|
type: 'academic',
|
||||||
price:'',
|
info: 'Multi User Management System for Universities',
|
||||||
detail:"",
|
price: '',
|
||||||
custom:'Customize',
|
detail: '',
|
||||||
customInfo:'Special Academic rate aviable, please contact us for details.',
|
custom: 'Customize',
|
||||||
highlight:"",
|
customInfo: 'Special Academic rate aviable, please contact us for details.',
|
||||||
discounts:'',
|
highlight: '',
|
||||||
detailList:[
|
discounts: '',
|
||||||
|
detailList: [
|
||||||
'Flexible Customize Program to Support School Needs',
|
'Flexible Customize Program to Support School Needs',
|
||||||
'Monthly Credit Renewal throughout Program Duration',
|
'Monthly Credit Renewal throughout Program Duration',
|
||||||
'Flexible to Share and Allocate Account Credits among Users',
|
'Flexible to Share and Allocate Account Credits among Users',
|
||||||
'Al Assisted Design Teaching Function',
|
'Al Assisted Design Teaching Function',
|
||||||
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
|
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
|
||||||
'Basic 3D Design Functions',
|
'Basic 3D Design Functions',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
],
|
||||||
btn:'Contact us',
|
btn: 'Contact us'
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
yearl:[
|
yearl: [
|
||||||
{
|
{
|
||||||
title:"Personal",
|
title: 'Personal',
|
||||||
img:'/image/homeIntroduct/personal.png',
|
img: '/image/homeIntroduct/personal.png',
|
||||||
type:'personal',
|
type: 'personal',
|
||||||
info:"Your AI Fashion Design Assistant",
|
info: 'Your AI Fashion Design Assistant',
|
||||||
price:'HK$5,000',
|
price: 'HK$5,000',
|
||||||
detail:"per month · 50000 credits",
|
detail: 'per month · 50000 credits',
|
||||||
highlight:"Free 5-Days Trial",
|
highlight: 'Free 5-Days Trial',
|
||||||
discounts:'10% off',
|
discounts: '10% off',
|
||||||
detailList:[
|
detailList: [
|
||||||
'Easy to Top up Credits',
|
'Easy to Top up Credits',
|
||||||
'Option to Share Design and Interact with Designers in Public Gallery',
|
'Option to Share Design and Interact with Designers in Public Gallery',
|
||||||
'Support Monthly/Annual Payment Options',
|
'Support Monthly/Annual Payment Options',
|
||||||
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
],
|
||||||
btn:'Get Started',
|
btn: 'Get Started'
|
||||||
},{
|
},
|
||||||
title:"Academic",
|
{
|
||||||
img:'/image/homeIntroduct/academic.png',
|
title: 'Academic',
|
||||||
type:'academic',
|
img: '/image/homeIntroduct/academic.png',
|
||||||
info:"Multi User Management System for Universities",
|
type: 'academic',
|
||||||
price:'',
|
info: 'Multi User Management System for Universities',
|
||||||
detail:"",
|
price: '',
|
||||||
custom:'Customize',
|
detail: '',
|
||||||
customInfo:'Special Academic rate aviable, please contact us for details.',
|
custom: 'Customize',
|
||||||
highlight:"",
|
customInfo: 'Special Academic rate aviable, please contact us for details.',
|
||||||
discounts:'',
|
highlight: '',
|
||||||
detailList:[
|
discounts: '',
|
||||||
|
detailList: [
|
||||||
'Flexible Customize Program to Support School Needs',
|
'Flexible Customize Program to Support School Needs',
|
||||||
'Monthly Credit Renewal throughout Program Duration',
|
'Monthly Credit Renewal throughout Program Duration',
|
||||||
'Flexible to Share and Allocate Account Credits among Users',
|
'Flexible to Share and Allocate Account Credits among Users',
|
||||||
'Al Assisted Design Teaching Function',
|
'Al Assisted Design Teaching Function',
|
||||||
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
|
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
|
||||||
'Basic 3D Design Functions',
|
'Basic 3D Design Functions',
|
||||||
'Customer and Technical Support',
|
'Customer and Technical Support'
|
||||||
],
|
|
||||||
btn:'Contact us',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
|
btn: 'Contact us'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
watch(()=>props.isSelectSuccessively,(newVal)=>{
|
watch(
|
||||||
if(newVal){
|
() => props.isSelectSuccessively,
|
||||||
|
newVal => {
|
||||||
|
if (newVal) {
|
||||||
data.productList = data.productListCn
|
data.productList = data.productListCn
|
||||||
}else{
|
} else {
|
||||||
data.productList = data.productListEn
|
data.productList = data.productListEn
|
||||||
}
|
}
|
||||||
},{immediate: true})
|
},
|
||||||
const close = ()=>{
|
{ immediate: true }
|
||||||
}
|
)
|
||||||
const setMonthlyOrYearly = (val)=>{
|
const close = () => {}
|
||||||
|
const setMonthlyOrYearly = val => {
|
||||||
data.monthlyOrYearly = val
|
data.monthlyOrYearly = val
|
||||||
}
|
}
|
||||||
const createAccount = ()=>{
|
const createAccount = () => {
|
||||||
if(window.innerWidth < 768){
|
if (window.innerWidth < 768) {
|
||||||
dom.registerModel.pageWidth = '100%'
|
dom.registerModel.pageWidth = '100%'
|
||||||
}
|
}
|
||||||
dom.registerModel.init(props.isSelectSuccessively)
|
dom.registerModel.init(props.isSelectSuccessively)
|
||||||
}
|
}
|
||||||
const handleContactUs = ()=>{
|
const handleContactUs = () => {
|
||||||
const email = 'info@code-create.com.hk'
|
const email = 'info@code-create.com.hk'
|
||||||
const mailtoLink = `mailto:${email}`
|
const mailtoLink = `mailto:${email}`
|
||||||
|
|
||||||
@@ -369,7 +404,7 @@ import { message } from "ant-design-vue";
|
|||||||
}, 2000)
|
}, 2000)
|
||||||
}
|
}
|
||||||
|
|
||||||
const copyToClipboard = (text) => {
|
const copyToClipboard = text => {
|
||||||
if (navigator.clipboard && window.isSecureContext) {
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
// 使用现代 Clipboard API
|
// 使用现代 Clipboard API
|
||||||
navigator.clipboard.writeText(text).catch(() => {
|
navigator.clipboard.writeText(text).catch(() => {
|
||||||
@@ -382,7 +417,7 @@ import { message } from "ant-design-vue";
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const fallbackCopyToClipboard = (text) => {
|
const fallbackCopyToClipboard = text => {
|
||||||
const textArea = document.createElement('textarea')
|
const textArea = document.createElement('textarea')
|
||||||
textArea.value = text
|
textArea.value = text
|
||||||
textArea.style.position = 'fixed'
|
textArea.style.position = 'fixed'
|
||||||
@@ -399,22 +434,20 @@ import { message } from "ant-design-vue";
|
|||||||
document.body.removeChild(textArea)
|
document.body.removeChild(textArea)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(()=>{
|
onMounted(() => {})
|
||||||
|
|
||||||
})
|
|
||||||
return {
|
return {
|
||||||
...toRefs(dom),
|
...toRefs(dom),
|
||||||
...toRefs(data),
|
...toRefs(data),
|
||||||
close,
|
close,
|
||||||
setMonthlyOrYearly,
|
setMonthlyOrYearly,
|
||||||
createAccount,
|
createAccount,
|
||||||
handleContactUs,
|
handleContactUs
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.signUp{
|
.signUp {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0rem 4rem;
|
padding: 0rem 4rem;
|
||||||
margin-top: 5.6rem;
|
margin-top: 5.6rem;
|
||||||
@@ -425,14 +458,15 @@ import { message } from "ant-design-vue";
|
|||||||
// height: 100%;
|
// height: 100%;
|
||||||
// overflow-y: auto;
|
// overflow-y: auto;
|
||||||
}
|
}
|
||||||
.back{
|
.back {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
margin-bottom: 3rem;
|
margin-bottom: 3rem;
|
||||||
}
|
}
|
||||||
.back,.introduce>span{
|
.back,
|
||||||
|
.introduce > span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.titleTitle{
|
.titleTitle {
|
||||||
font-size: 4.6rem;
|
font-size: 4.6rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -442,48 +476,49 @@ import { message } from "ant-design-vue";
|
|||||||
margin-bottom: 1.1rem;
|
margin-bottom: 1.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.selectMonthlyYearly{
|
.selectMonthlyYearly {
|
||||||
border: .7px solid #e7ebff;
|
border: 0.7px solid #e7ebff;
|
||||||
background: #FBFBFB;
|
background: #fbfbfb;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
width: 18.5rem;
|
width: 18.5rem;
|
||||||
box-shadow: 0px 0.72px 3.62px 0px #566EE81A inset;
|
box-shadow: 0px 0.72px 3.62px 0px #566ee81a inset;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
--selectPadding: .58rem;
|
--selectPadding: 0.58rem;
|
||||||
padding: var(--selectPadding);
|
padding: var(--selectPadding);
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
--selectPadding: .36rem;
|
--selectPadding: 0.36rem;
|
||||||
border-radius: .58rem;
|
border-radius: 0.58rem;
|
||||||
width: 10.8rem;
|
width: 10.8rem;
|
||||||
}
|
}
|
||||||
&.left{
|
&.left {
|
||||||
> .bg{
|
> .bg {
|
||||||
left: var(--selectPadding);
|
left: var(--selectPadding);
|
||||||
}
|
}
|
||||||
> .leftText{
|
> .leftText {
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.right{
|
&.right {
|
||||||
> .bg{
|
> .bg {
|
||||||
left: calc(50% + var(--selectPadding));
|
left: calc(50% + var(--selectPadding));
|
||||||
}
|
}
|
||||||
> .rightText{
|
> .rightText {
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> .bg{
|
> .bg {
|
||||||
border: .7px solid #E7EBFF;
|
border: 0.7px solid #e7ebff;
|
||||||
box-shadow: 0px 4.35px 26.08px 0px #B5C2FB1A;
|
box-shadow: 0px 4.35px 26.08px 0px #b5c2fb1a;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
width: calc(50% - var(--selectPadding) * 2);
|
width: calc(50% - var(--selectPadding) * 2);
|
||||||
height: calc(100% - var(--selectPadding) * 2);
|
height: calc(100% - var(--selectPadding) * 2);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
> .leftText,> .rightText{
|
> .leftText,
|
||||||
|
> .rightText {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
@@ -497,11 +532,11 @@ import { message } from "ant-design-vue";
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.introduce{
|
.introduce {
|
||||||
font-size: 2.4rem;
|
font-size: 2.4rem;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
.selectSignUp{
|
.selectSignUp {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -511,10 +546,7 @@ import { message } from "ant-design-vue";
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gallery_list_box{
|
.gallery_list {
|
||||||
|
|
||||||
}
|
|
||||||
.gallery_list{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
// justify-content: center;
|
// justify-content: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -523,14 +555,29 @@ import { message } from "ant-design-vue";
|
|||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
margin-top: 2.4rem;
|
margin-top: 2.4rem;
|
||||||
}
|
}
|
||||||
.gallery_item{
|
.gallery_item {
|
||||||
width: 44.1rem;
|
width: 36.2rem;
|
||||||
height: 56.9rem;
|
height: 46.8rem;
|
||||||
padding: 2.09rem;
|
padding: 2.38rem;
|
||||||
border-radius: 1.8rem;
|
border-radius: 1.55rem;
|
||||||
border: .72px solid #E7EBFF;
|
border: 0.72px solid #e7ebff;
|
||||||
margin-right: 8rem;
|
margin-right: 8rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
&.recommended {
|
||||||
|
border-radius: 1.8rem;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#fff, #fff) padding-box,
|
||||||
|
linear-gradient(
|
||||||
|
88.13deg,
|
||||||
|
#fbd2ff 0.91%,
|
||||||
|
#e6d3ff 52.5%,
|
||||||
|
#b694ff 101.09%
|
||||||
|
)
|
||||||
|
border-box;
|
||||||
|
background-origin: border-box;
|
||||||
|
background-clip: padding-box, border-box;
|
||||||
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
@@ -539,17 +586,17 @@ import { message } from "ant-design-vue";
|
|||||||
margin-bottom: 2.8rem;
|
margin-bottom: 2.8rem;
|
||||||
padding-bottom: 1.3rem;
|
padding-bottom: 1.3rem;
|
||||||
}
|
}
|
||||||
.product_signUp_box{
|
.product_signUp_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
&:last-child{
|
&:last-child {
|
||||||
margin-right: 0rem;
|
margin-right: 0rem;
|
||||||
margin-bottom: 0rem;
|
margin-bottom: 0rem;
|
||||||
}
|
}
|
||||||
.img{
|
.img {
|
||||||
margin-bottom: 1.4rem;
|
margin-bottom: 1.2rem;
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
@@ -558,136 +605,144 @@ import { message } from "ant-design-vue";
|
|||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.title{
|
.title {
|
||||||
font-size: 3.1rem;
|
font-size: 2.6rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 0.8rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 2.3rem;
|
font-size: 2.3rem;
|
||||||
margin-bottom: .73rem;
|
margin-bottom: 0.73rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.info{
|
.info {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: #797878;
|
color: #797878;
|
||||||
margin-bottom: 1.7rem;
|
margin-bottom: 1.2rem;
|
||||||
font-family: 'pingfang_regular';
|
font-family: 'pingfang_regular';
|
||||||
&.academic{
|
&.academic {
|
||||||
margin-bottom: .4rem;
|
margin-bottom: 0.4rem;
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.price{
|
.price {
|
||||||
// margin-bottom: 5.2rem;
|
// margin-bottom: 5.2rem;
|
||||||
border-bottom: .72px solid #E7EBFF;
|
border-bottom: 0.72px solid #e7ebff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
column-gap: 0.7rem;
|
||||||
|
align-items: center;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
margin-bottom: 2.3rem;
|
margin-bottom: 2.3rem;
|
||||||
}
|
}
|
||||||
&.academic{
|
&.academic {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
> div{
|
> div {
|
||||||
margin-bottom: .9rem;
|
margin-bottom: 0.9rem;
|
||||||
font-size: 4.3rem;
|
font-size: 3.6rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -.072rem;
|
letter-spacing: -0.072rem;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 3.1rem;
|
font-size: 3.1rem;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> span{
|
> span {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> div{
|
> div {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 4.3rem;
|
font-size: 3.6rem;
|
||||||
color: #1B223C;
|
color: #1b223c;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 3.14rem;
|
font-size: 3.14rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> span{
|
> span {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.7rem;
|
font-size: 1.3rem;
|
||||||
color: #797878;
|
color: #797878;
|
||||||
margin-bottom: 1.5rem;
|
// margin-bottom: 1.5rem;
|
||||||
margin-left: 1rem;
|
// margin-left: 1rem;
|
||||||
&.yearl{
|
&.yearl {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-left: .7rem;
|
// margin-left: 0.7rem;
|
||||||
margin-bottom: 1rem;
|
// margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.info,.detail,.gallery_btn{
|
.detail,
|
||||||
|
.gallery_btn {
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
}
|
}
|
||||||
.highlight{
|
.highlight {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
|
background: linear-gradient(
|
||||||
|
88.13deg,
|
||||||
|
#fbd2ff 0.91%,
|
||||||
|
#e6d3ff 52.5%,
|
||||||
|
#b694ff 101.09%
|
||||||
|
);
|
||||||
// border-radius: .5rem 1.5rem 0px 1.5rem;
|
// border-radius: .5rem 1.5rem 0px 1.5rem;
|
||||||
border-top-right-radius: 1.5rem;
|
border-top-right-radius: 1.5rem;
|
||||||
border-bottom-left-radius: 0.5rem;
|
border-bottom-left-radius: 0.5rem;
|
||||||
padding: .75rem .5rem;
|
padding: 0.75rem 0.5rem;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
padding: .55rem .36rem;
|
padding: 0.55rem 0.36rem;
|
||||||
// border-radius: .46rem .36rem 0px .9rem;
|
// border-radius: .46rem .36rem 0px .9rem;
|
||||||
border-top-right-radius: 1.1rem;
|
border-top-right-radius: 1.1rem;
|
||||||
border-bottom-left-radius: 0.4rem;
|
border-bottom-left-radius: 0.4rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.product_detail{
|
.product_detail {
|
||||||
padding-left: 3.1rem;
|
padding-left: 3.1rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
&.academic{
|
&.academic {
|
||||||
justify-content: flex-start
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
li{
|
li {
|
||||||
list-style: disc;
|
list-style: disc;
|
||||||
margin-bottom: .3rem;
|
// margin-bottom: 0.3rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
li:last-child{
|
li:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.gallery_btn{
|
.gallery_btn {
|
||||||
line-height: 4.6rem;
|
line-height: 4.6rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
background-color: #1b223c;
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
line-height: 3.4rem;
|
line-height: 3.4rem;
|
||||||
border-radius: .62rem;
|
border-radius: 0.62rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user