diff --git a/src/component/mainPage/signUp/index.vue b/src/component/mainPage/signUp/index.vue index aa9959c1..5c0604bc 100644 --- a/src/component/mainPage/signUp/index.vue +++ b/src/component/mainPage/signUp/index.vue @@ -22,7 +22,8 @@ :class="[ { recommended: item.recommended }, { monthly: monthlyOrYearly === 'monthly' }, - { yearly: monthlyOrYearly === 'yearl' } + { yearly: monthlyOrYearly === 'yearl' }, + { academic: item.type === 'academic' } ]" >
@@ -31,9 +32,15 @@
{{ item?.info }}
-
+
{{ item?.price }}
- + {{ item?.detail }}
@@ -43,18 +50,25 @@
- @@ -204,7 +218,7 @@ export default defineComponent({ '支持草图创意和设计灵感教学', '基础3D设计功能' ], - btn: '立即开始' + btn: '订阅' }, { title: '教育版', @@ -317,7 +331,7 @@ export default defineComponent({ { title: 'Free', img: CChargeIcon, - type: 'personal', + type: 'free', info: 'Your AI Fashion Design Assistant', price: 'HK$0', detail: '5 days · 50 credits', @@ -348,7 +362,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', @@ -620,6 +634,7 @@ export default defineComponent({ border-radius: 1.3rem; margin: 0; margin-bottom: 2.8rem; + padding: 2rem; padding-bottom: 1.3rem; } .product_signUp_box { @@ -655,14 +670,13 @@ export default defineComponent({ font-weight: 400; font-size: 1.4rem; color: #797878; - margin-bottom: 1.2rem; font-family: 'pingfang_regular'; &.academic { margin-bottom: 0.4rem; } @media (max-width: 767px) { font-size: 1.25rem; - margin-bottom: 1.25rem; + // margin-bottom: 1.25rem; } } .price { @@ -697,8 +711,9 @@ export default defineComponent({ font-size: 3.6rem; letter-spacing: -0.06rem; color: #1b223c; + margin: 0.3rem 0; @media (max-width: 767px) { - font-size: 3.14rem; + font-size: 3rem; } } > span { @@ -712,6 +727,7 @@ export default defineComponent({ } @media (max-width: 767px) { font-size: 1.2rem; + margin-top: 1rem; // margin-left: 0.7rem; // margin-bottom: 1rem; } @@ -725,7 +741,6 @@ export default defineComponent({ font-size: 1.4rem; position: absolute; width: 12.41rem; - height: 3.4rem; line-height: 3.4rem; text-align: center; top: 0; @@ -744,6 +759,9 @@ export default defineComponent({ border-top-right-radius: 1.1rem; border-bottom-left-radius: 0.4rem; font-size: 1rem; + line-height: 2.5rem; + font-weight: 500; + width: 9rem; } } .product_detail { @@ -761,13 +779,10 @@ export default defineComponent({ // margin-bottom: 0.3rem; font-size: 1.3rem; font-weight: 500; - @media (max-width: 767px) { - font-size: 1.15rem; - } - } - li:last-child { - margin-bottom: 0; } + // li:last-child { + // margin-bottom: 0; + // } } .gallery_btn { line-height: 4.6rem; @@ -777,7 +792,7 @@ export default defineComponent({ font-size: 1.7rem; font-weight: 500; background-color: #1b223c; - &:hover { + &:hover { background-color: #fff; } @media (max-width: 767px) { @@ -813,12 +828,64 @@ export default defineComponent({ .product_detail { padding-top: 3.1rem; justify-content: space-evenly; - @media (max-width: 767px) { - padding-top: 0; - justify-content: flex-end; + li { + font-size: 1.6rem; } } } + @media (max-width: 767px) { + width: 31.9rem; + height: 41.1rem; + padding: 2.09rem 2.09rem 2.11rem; + &.academic { + height: 52rem; + } + .product_signUp_box { + .img { + width: 3.4rem; + height: 3.4rem; + } + .title { + font-size: 2.3rem; + margin-bottom: 0; + letter-spacing: 0.05rem; + } + .info { + font-size: 1.2rem; + } + .price { + margin-bottom: 0; + div { + font-size: 3.1rem; + } + span { + font-size: 1.26rem; + &.personal { + font-size: 0.95rem; + } + } + } + .product_detail { + padding-top: 2rem; + justify-content: flex-end; + margin-bottom: 0; + &.chinese{ + justify-content: space-evenly; + } + li { + font-size: 1.15rem; + } + } + .submit { + margin-top: 2rem; + } + } + } + } + .submit { + @media (max-width: 767px) { + margin-top: 2rem; + } } } }