Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

This commit is contained in:
X1627315083
2025-11-27 11:23:36 +08:00
2 changed files with 104 additions and 29 deletions

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: [
'灵活的自定义程序以满足学校需求',
@@ -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;
}
}
}
}
}
}
</style>

View File

@@ -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;