diff --git a/src/component/mainPage/signUp/index.vue b/src/component/mainPage/signUp/index.vue index a237446b..57bcbfb5 100644 --- a/src/component/mainPage/signUp/index.vue +++ b/src/component/mainPage/signUp/index.vue @@ -19,7 +19,11 @@ class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item" - :class="{ recommended: item.recommended }" + :class="[ + { recommended: item.recommended }, + { monthly: monthlyOrYearly === 'monthly' }, + { yearly: monthlyOrYearly === 'yearl' } + ]" >
@@ -121,7 +125,7 @@ export default defineComponent({ '适合个人创作者、独立设计师以及所有时尚爱好者', '客户支持' ], - btn: '立即开始' + btn: '订阅' }, { title: '个人专业版', @@ -140,7 +144,7 @@ export default defineComponent({ '适合个人创作者、独立设计师以及所有时尚爱好者', '客户支持' ], - btn: '立即开始' + btn: '订阅' }, { title: '教育版', @@ -166,6 +170,24 @@ export default defineComponent({ } ], yearl: [ + { + title: '免费版', + img: CChargeIcon, + type: 'personal', + info: '您的AI时尚设计助手', + price: 'HK$0', + detail: '5天·50积分', + highlight: '', + discounts: '9折优惠', + detailList: [ + '轻松充值积分', + '可在公共化画廊分享设计并与设计师互动', + '支持月付/年付选项', + '适合个人创作者、独立设计师以及所有时尚爱好者', + '客户支持' + ], + btn: '立即开始' + }, { title: '个人版', img: '/image/homeIntroduct/personal.png', @@ -173,7 +195,7 @@ export default defineComponent({ info: '您的AI时尚设计助手', price: 'HK$5,000', detail: '每年·50000积分', - highlight: '免费试用5天', + highlight: '', discounts: '9折优惠', detailList: [ '灵活的自定义程序以满足学校需求', @@ -182,7 +204,7 @@ export default defineComponent({ '支持草图创意和设计灵感教学', '基础3D设计功能' ], - btn: '立即开始' + btn: '订阅' }, { title: '教育版', @@ -247,7 +269,7 @@ export default defineComponent({ 'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers', 'Customer and Technical Support' ], - btn: 'Get Started' + btn: 'Subscribe' }, { title: 'Personal', @@ -266,7 +288,7 @@ export default defineComponent({ 'Suitable for Individual Creator, Independent Designers and Fun for all Fashion Lovers', 'Customer and Technical Support' ], - btn: 'Get Started' + btn: 'Subscribe' }, { title: 'Academic', @@ -293,13 +315,13 @@ export default defineComponent({ ], yearl: [ { - title: 'Personal', - img: '/image/homeIntroduct/personal.png', + title: 'Free', + img: CChargeIcon, type: 'personal', info: 'Your AI Fashion Design Assistant', - price: 'HK$5,000', - detail: 'per month · 50000 credits', - highlight: 'Free 5-Days Trial', + price: 'HK$0', + detail: '5 days · 50 credits', + highlight: '', discounts: '10% off', detailList: [ 'Easy to Top up Credits', @@ -310,6 +332,24 @@ export default defineComponent({ ], btn: 'Get Started' }, + { + 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: '', + 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: 'Subscribe' + }, { title: 'Academic', img: '/image/homeIntroduct/academic.png', @@ -551,7 +591,7 @@ export default defineComponent({ // justify-content: center; flex-wrap: wrap; justify-content: center; - margin-top: 4.3rem; + margin-top: 6rem; @media (max-width: 767px) { margin-top: 2.4rem; } @@ -560,20 +600,16 @@ export default defineComponent({ height: 46.8rem; padding: 2.38rem; border-radius: 1.55rem; - border: 0.72px solid #e7ebff; + border: 0.2rem solid #e7ebff; margin-right: 8rem; position: relative; + box-shadow: 0px 15.5px 23.84px 0px #bccaff21; + &.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% - ) + 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; @@ -619,7 +655,7 @@ export default defineComponent({ font-weight: 400; font-size: 1.4rem; color: #797878; - margin-bottom: 1.2rem; + // margin-bottom: 1.2rem; font-family: 'pingfang_regular'; &.academic { margin-bottom: 0.4rem; @@ -634,7 +670,7 @@ export default defineComponent({ border-bottom: 0.72px solid #e7ebff; width: 100%; display: flex; - column-gap: 0.7rem; + column-gap: 0.7rem; align-items: center; @media (max-width: 767px) { margin-bottom: 2.3rem; @@ -646,7 +682,7 @@ export default defineComponent({ margin-bottom: 0.9rem; font-size: 3.6rem; line-height: 1; - letter-spacing: -0.072rem; + @media (max-width: 767px) { font-size: 3.1rem; margin-bottom: 0.5rem; @@ -659,6 +695,7 @@ export default defineComponent({ > div { font-weight: 500; font-size: 3.6rem; + letter-spacing: -0.06rem; color: #1b223c; @media (max-width: 767px) { font-size: 3.14rem; @@ -685,8 +722,12 @@ export default defineComponent({ font-size: 1.6rem; } .highlight { - font-size: 1.3rem; + font-size: 1.4rem; position: absolute; + width: 12.41rem; + height: 3.4rem; + line-height: 3.4rem; + text-align: center; top: 0; right: 0; background: linear-gradient( @@ -698,9 +739,7 @@ export default defineComponent({ // border-radius: .5rem 1.5rem 0px 1.5rem; border-top-right-radius: 1.5rem; border-bottom-left-radius: 0.5rem; - padding: 0.75rem 0.5rem; @media (max-width: 767px) { - padding: 0.55rem 0.36rem; // border-radius: .46rem .36rem 0px .9rem; border-top-right-radius: 1.1rem; border-bottom-left-radius: 0.4rem; @@ -749,6 +788,38 @@ export default defineComponent({ } } } + .yearly { + width: 44.1rem; + height: 56.9rem; + padding: 2.89rem 2.89rem 3.31rem; + box-sizing: border-box; + .product_signUp_box { + .title { + font-size: 3.1rem; + margin-bottom: 1rem; + } + .info { + font-size: 1.7rem; + } + .price { + > div { + font-size: 4.34rem; + letter-spacing: -1px; + } + span { + font-size: 1.4rem; + } + } + .product_detail { + padding-top: 3.1rem; + justify-content: space-evenly; + @media (max-width: 767px) { + padding-top: 0; + justify-content: flex-end; + } + } + } + } } } diff --git a/src/views/Register.vue b/src/views/Register.vue index 7455871d..95ee5ba6 100644 --- a/src/views/Register.vue +++ b/src/views/Register.vue @@ -133,6 +133,10 @@ export default defineComponent({ } onMounted(() => { updataIsMoblie() + const savedLang = localStorage.getItem('loginLanguage') + if (savedLang) { + data.isSelectSuccessively = savedLang === 'CHINESE_SIMPLIFIED' + } window.addEventListener('resize', updataIsMoblie) }) onBeforeUnmount(() => { @@ -301,7 +305,7 @@ export default defineComponent({ display: flex; align-items: center; cursor: pointer; - column-gap: 0.9rem; + column-gap: 0.9rem; .homeRecommend_logo { &.aid { width: 8rem;