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

style: 分辨率适配

Browse Source
This commit is contained in:
zhangyahui
2025-11-27 10:13:54 +08:00
parent 4746ff22a1
commit 4376c8c313
1 changed files with 93 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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' }
]"
>
<div class="product_signUp_box">
<img class="img" :src="item?.img" alt="" />
@@ -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: [
'灵活的自定义程序以满足学校需求',
@@ -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',
@@ -292,6 +314,24 @@ export default defineComponent({
}
],
yearl: [
{
title: 'Free',
img: CChargeIcon,
type: 'personal',
info: 'Your AI Fashion Design Assistant',
price: 'HK$0',
detail: '5 days · 50 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: 'Get Started'
},
{
title: 'Personal',
img: '/image/homeIntroduct/personal.png',
@@ -299,7 +339,7 @@ export default defineComponent({
info: 'Your AI Fashion Design Assistant',
price: 'HK$5,000',
detail: 'per month · 50000 credits',
highlight: 'Free 5-Days Trial',
highlight: '',
discounts: '10% off',
detailList: [
'Easy to Top up Credits',
@@ -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;
@@ -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;
@@ -746,6 +785,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;
}
}
}
}
}
}
</style>