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

注册页面移动端样式调整

Browse Source
This commit is contained in:
X1627315083
2025-11-28 17:10:45 +08:00
parent 69c32905e1
commit 703d9cf781
1 changed files with 90 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,8 @@
:class="[
{ recommended: item.recommended },
{ monthly: monthlyOrYearly === 'monthly' },
{ yearly: monthlyOrYearly === 'yearl' }
{ yearly: monthlyOrYearly === 'yearl' },
{ academic: item.type === 'academic' }
]"
>
<div class="product_signUp_box">
@@ -31,9 +32,15 @@
<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>
<span :class="{ yearl: monthlyOrYearly == 'yearl' }">
<span
:class="[
{ yearl: monthlyOrYearly == 'yearl' },
{ personal: item.type === 'personal' }
]"
style="white-space: nowrap;"
>
{{ item?.detail }}
</span>
</div>
@@ -43,18 +50,25 @@
</div>
<ul
class="product_detail"
:class="{ academic: item.type == 'academic' && !isSelectSuccessively }"
:class="[
{ academic: item.type == 'academic' && !isSelectSuccessively },
{ chinese: isSelectSuccessively }
]"
>
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
<div
class="gallery_btn gallery_btn_radius"
class="gallery_btn gallery_btn_radius submit"
v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'"
@click="createAccount"
>
{{ item?.btn }}
</div>
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">
<div
class="gallery_btn gallery_btn_radius submit"
v-else
@click="handleContactUs"
>
{{ item?.btn }}
</div>
</div>
@@ -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;
}
}
}
}