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

style: 注册页面套餐item样式

Browse Source
This commit is contained in:
zhangyahui
2025-11-26 17:00:09 +08:00
parent 5857a1da8d
commit f6533e6027
1 changed files with 741 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,50 +2,76 @@
<div class="signUp">
<div class="selectSignUp" v-show="!isSelectSignUp">
<div class="titleTitle">{{ productList.Advantages }}</div>
<div class="selectMonthlyYearly" :class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']">
<div
class="selectMonthlyYearly"
:class="[monthlyOrYearly == 'monthly' ? 'left' : 'right']"
>
<div class="bg"></div>
<div class="leftText" @click="setMonthlyOrYearly('monthly')">{{ productList.Monthly }}</div>
<div class="rightText" @click="setMonthlyOrYearly('yearl')">{{ productList.Yearly }}</div>
<div class="leftText" @click="setMonthlyOrYearly('monthly')">
{{ productList.Monthly }}
</div>
<div class="rightText" @click="setMonthlyOrYearly('yearl')">
{{ productList.Yearly }}
</div>
</div>
<div class="gallery_list product_list">
<div class="gallery_item" v-for="item in productList[monthlyOrYearly]" :key="item">
<div
class="gallery_item"
v-for="item in productList[monthlyOrYearly]"
:key="item"
:class="{ recommended: item.recommended }"
>
<div class="product_signUp_box">
<img class="img" :src="item?.img" alt="">
<img class="img" :src="item?.img" alt="" />
<div class="title">{{ item?.title }}</div>
<div class="info" :class="{academic:item.type == 'academic'}">{{ item?.info }}</div>
<div class="info" :class="{ academic: item.type == 'academic' }">
{{ item?.info }}
</div>
<div class="price" v-if="item.type != 'academic'">
<div>{{ item?.price }}</div>
<span :class="{yearl:monthlyOrYearly == 'yearl'}">{{ item?.detail }}</span>
<span :class="{ yearl: monthlyOrYearly == 'yearl' }">
{{ item?.detail }}
</span>
</div>
<div class="price academic" v-if="item.type == 'academic'">
<div>{{ item?.custom }}</div>
<span style="font-size: 1.4rem;">{{ item?.customInfo }}</span>
<span style="font-size: 1.4rem">{{ item?.customInfo }}</span>
</div>
<ul class="product_detail" :class="{'academic':(item.type == 'academic' && !isSelectSuccessively)}">
<ul
class="product_detail"
:class="{ academic: item.type == 'academic' && !isSelectSuccessively }"
>
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
</ul>
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'" @click="createAccount">{{ item?.btn }}</div>
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">{{ item?.btn }}</div>
<div
class="gallery_btn gallery_btn_radius"
v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'"
@click="createAccount"
>
{{ item?.btn }}
</div>
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">
{{ item?.btn }}
</div>
</div>
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
</div>
</div>
</div>
<registerModel ref="registerModel"></registerModel>
</div>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from 'vue'
import registerModel from './registerModel.vue'
import { message } from "ant-design-vue";
import { message } from 'ant-design-vue'
import CChargeIcon from '@/assets/icons/CCharge.svg'
export default defineComponent({
components: {
registerModel,
registerModel
},
name: "login",
name: 'login',
props: ['isSelectSuccessively'],
// emits: ['close'],
setup(props, { emit }) {
@@ -62,122 +88,125 @@ import { message } from "ant-design-vue";
Yearly: '年度',
monthly: [
{
title: "试用版",
title: '免费版',
img: CChargeIcon,
type: 'personal',
info: "您的AI时尚设计助手",
price: '100积分',
detail: "",
highlight: "",
info: '您的AI时尚设计助手',
price: 'HK$0',
detail: '5天·50积分',
highlight: '',
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共化画廊分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
'客户支持'
],
btn: '立即开始',
btn: '立即开始'
},
{
title: "个人版",
title: '个人版',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info: "您的AI时尚设计助手",
info: '您的AI时尚设计助手',
price: 'HK$100',
detail: "每月·500积分",
highlight: "",
detail: '每月·500积分',
highlight: '',
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共化画廊分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
'客户支持'
],
btn: '立即开始',
btn: '立即开始'
},
{
title: "个人专业版",
title: '个人专业版',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info: "您的AI时尚设计助手",
info: '您的AI时尚设计助手',
price: 'HK$500',
detail: "每月·3500积分",
highlight: "推荐",
detail: '每月·3500积分',
highlight: '推荐',
recommended: true,
discounts: '9折优惠',
detailList: [
'轻松充值积分',
'可在公共画廊中分享设计并与设计师互动',
'支持月付/年付选项',
'适合个人创作者、独立设计师以及所有时尚爱好者',
'客户支持',
'客户支持'
],
btn: '立即开始',
},{
title: "教育版",
btn: '立即开始'
},
{
title: '教育版',
img: '/image/homeIntroduct/academic.png',
type: 'academic',
info: "高校多用户管理系统",
info: '高校多用户管理系统',
price: '',
detail: "",
detail: '',
custom: '定制方案',
customInfo: '可提供专属教育优惠，详情请联系我们',
highlight: "",
highlight: '',
discounts: '',
detailList: [
'灵活的自定义程序以满足学校需求',
"项目期间每月信用额度自动续期",
'项目期间每月信用额度自动续期',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
"从设计灵感、草图创作到完整时装系列的尖端教学工具",
"基本3D设计功能",
"客户与技术支援",
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
'基本3D设计功能',
'客户与技术支援'
],
btn: '联系我们',
},
btn: '联系我们'
}
],
yearl: [
{
title: "个人版",
title: '个人版',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info: "您的AI时尚设计助手",
info: '您的AI时尚设计助手',
price: 'HK$5,000',
detail: "每年·50000积分",
highlight: "免费试用5天",
detail: '每年·50000积分',
highlight: '免费试用5天',
discounts: '9折优惠',
detailList: [
'灵活的自定义程序以满足学校需求',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
'支持草图创意和设计灵感教学',
'基础3D设计功能',
'基础3D设计功能'
],
btn: '立即开始',
},{
title: "教育版",
btn: '立即开始'
},
{
title: '教育版',
img: '/image/homeIntroduct/academic.png',
type: 'academic',
info: "高校多用户管理系统",
info: '高校多用户管理系统',
price: '',
detail: "",
detail: '',
custom: '定制方案',
customInfo: '可提供专属教育优惠，详情请联系我们',
highlight: "",
highlight: '',
discounts: '',
detailList: [
'灵活的自定义程序以满足学校需求',
"项目期间每月信用额度自动续期",
'项目期间每月信用额度自动续期',
'可在用户之间灵活共享和分配账户信用额度',
'AI辅助设计教学功能',
"从设计灵感、草图创作到完整时装系列的尖端教学工具",
"基本3D设计功能",
"客户与技术支援",
],
btn: '联系我们',
},
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
'基本3D设计功能',
'客户与技术支援'
],
btn: '联系我们'
}
]
},
productListEn: {
Advantages: 'Our Pricing Plan',
@@ -185,68 +214,70 @@ import { message } from "ant-design-vue";
Yearly: 'Yearly',
monthly: [
{
title:"Personal",
title: 'Free',
img: CChargeIcon,
type: 'personal',
info:"Your AI Fashion Design Assistant",
price:'100 credits',
detail:"",
highlight:"",
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',
'Customer and Technical Support'
],
btn:'Get Started',
btn: 'Get Started'
},
{
title:"Personal",
title: 'Personal',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info:"Your AI Fashion Design Assistant",
info: 'Your AI Fashion Design Assistant',
price: 'HK$100',
detail:"per month · 500 credits",
highlight:"",
detail: 'per month · 500 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',
'Customer and Technical Support'
],
btn:'Get Started',
btn: 'Get Started'
},
{
title:"Personal",
title: 'Personal',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info:"Your AI Fashion Design Assistant",
info: 'Your AI Fashion Design Assistant',
price: 'HK$500',
detail:"per month · 3500 credits",
highlight:"Recommended",
detail: 'per month · 3500 credits',
highlight: 'Recommended',
recommended: true,
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',
'Customer and Technical Support'
],
btn:'Get Started',
},{
title:"Academic",
btn: 'Get Started'
},
{
title: 'Academic',
img: '/image/homeIntroduct/academic.png',
type: 'academic',
info:"Multi User Management System for Universities",
info: 'Multi User Management System for Universities',
price: '',
detail:"",
detail: '',
custom: 'Customize',
customInfo: 'Special Academic rate aviable, please contact us for details.',
highlight:"",
highlight: '',
discounts: '',
detailList: [
'Flexible Customize Program to Support School Needs',
@@ -255,39 +286,40 @@ import { message } from "ant-design-vue";
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
'Customer and Technical Support'
],
btn:'Contact us',
},
btn: 'Contact us'
}
],
yearl: [
{
title:"Personal",
title: 'Personal',
img: '/image/homeIntroduct/personal.png',
type: 'personal',
info:"Your AI Fashion Design Assistant",
info: 'Your AI Fashion Design Assistant',
price: 'HK$5,000',
detail:"per month · 50000 credits",
highlight:"Free 5-Days Trial",
detail: 'per month · 50000 credits',
highlight: 'Free 5-Days Trial',
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',
'Customer and Technical Support'
],
btn:'Get Started',
},{
title:"Academic",
btn: 'Get Started'
},
{
title: 'Academic',
img: '/image/homeIntroduct/academic.png',
type: 'academic',
info:"Multi User Management System for Universities",
info: 'Multi User Management System for Universities',
price: '',
detail:"",
detail: '',
custom: 'Customize',
customInfo: 'Special Academic rate aviable, please contact us for details.',
highlight:"",
highlight: '',
discounts: '',
detailList: [
'Flexible Customize Program to Support School Needs',
@@ -296,23 +328,26 @@ import { message } from "ant-design-vue";
'Al Assisted Design Teaching Function',
'Cutting-edge Teaching Tool from Design Inspiration, Sketch Creation to Complete Fashion Collection',
'Basic 3D Design Functions',
'Customer and Technical Support',
],
btn:'Contact us',
},
'Customer and Technical Support'
],
btn: 'Contact us'
}
]
}
})
watch(()=>props.isSelectSuccessively,(newVal)=>{
watch(
() => props.isSelectSuccessively,
newVal => {
if (newVal) {
data.productList = data.productListCn
} else {
data.productList = data.productListEn
}
},{immediate: true})
const close = ()=>{
}
const setMonthlyOrYearly = (val)=>{
},
{ immediate: true }
)
const close = () => {}
const setMonthlyOrYearly = val => {
data.monthlyOrYearly = val
}
const createAccount = () => {
@@ -369,7 +404,7 @@ import { message } from "ant-design-vue";
}, 2000)
}
const copyToClipboard = (text) => {
const copyToClipboard = text => {
if (navigator.clipboard && window.isSecureContext) {
// 使用现代 Clipboard API
navigator.clipboard.writeText(text).catch(() => {
@@ -382,7 +417,7 @@ import { message } from "ant-design-vue";
}
}
const fallbackCopyToClipboard = (text) => {
const fallbackCopyToClipboard = text => {
const textArea = document.createElement('textarea')
textArea.value = text
textArea.style.position = 'fixed'
@@ -399,18 +434,16 @@ import { message } from "ant-design-vue";
document.body.removeChild(textArea)
}
onMounted(()=>{
})
onMounted(() => {})
return {
...toRefs(dom),
...toRefs(data),
close,
setMonthlyOrYearly,
createAccount,
handleContactUs,
handleContactUs
}
}
},
})
</script>
<style scoped lang="less">
@@ -429,7 +462,8 @@ import { message } from "ant-design-vue";
font-size: 1.6rem;
margin-bottom: 3rem;
}
.back,.introduce>span{
.back,
.introduce > span {
cursor: pointer;
}
.titleTitle {
@@ -443,19 +477,19 @@ import { message } from "ant-design-vue";
}
}
.selectMonthlyYearly {
border: .7px solid #e7ebff;
background: #FBFBFB;
border: 0.7px solid #e7ebff;
background: #fbfbfb;
border-radius: 1rem;
width: 18.5rem;
box-shadow: 0px 0.72px 3.62px 0px #566EE81A inset;
box-shadow: 0px 0.72px 3.62px 0px #566ee81a inset;
margin: 0 auto;
display: flex;
position: relative;
--selectPadding: .58rem;
--selectPadding: 0.58rem;
padding: var(--selectPadding);
@media (max-width: 767px) {
--selectPadding: .36rem;
border-radius: .58rem;
--selectPadding: 0.36rem;
border-radius: 0.58rem;
width: 10.8rem;
}
&.left {
@@ -475,15 +509,16 @@ import { message } from "ant-design-vue";
}
}
> .bg {
border: .7px solid #E7EBFF;
box-shadow: 0px 4.35px 26.08px 0px #B5C2FB1A;
border: 0.7px solid #e7ebff;
box-shadow: 0px 4.35px 26.08px 0px #b5c2fb1a;
background: #ffffff;
width: calc(50% - var(--selectPadding) * 2);
height: calc(100% - var(--selectPadding) * 2);
position: absolute;
transition: all .3s;
transition: all 0.3s;
}
> .leftText,> .rightText{
> .leftText,
> .rightText {
cursor: pointer;
font-weight: 400;
font-size: 1.7rem;
@@ -510,9 +545,6 @@ import { message } from "ant-design-vue";
flex-direction: column;
justify-content: center;
}
}
.gallery_list_box{
}
.gallery_list {
display: flex;
@@ -524,13 +556,28 @@ import { message } from "ant-design-vue";
margin-top: 2.4rem;
}
.gallery_item {
width: 44.1rem;
height: 56.9rem;
padding: 2.09rem;
border-radius: 1.8rem;
border: .72px solid #E7EBFF;
width: 36.2rem;
height: 46.8rem;
padding: 2.38rem;
border-radius: 1.55rem;
border: 0.72px solid #e7ebff;
margin-right: 8rem;
position: relative;
&.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%
)
border-box;
background-origin: border-box;
background-clip: padding-box, border-box;
}
@media (max-width: 767px) {
width: 100%;
height: auto;
@@ -549,7 +596,7 @@ import { message } from "ant-design-vue";
margin-bottom: 0rem;
}
.img {
margin-bottom: 1.4rem;
margin-bottom: 1.2rem;
width: 4rem;
height: 4rem;
@media (max-width: 767px) {
@@ -559,23 +606,23 @@ import { message } from "ant-design-vue";
}
}
.title {
font-size: 3.1rem;
margin-bottom: 1rem;
font-size: 2.6rem;
margin-bottom: 0.8rem;
text-align: left;
font-weight: 500;
@media (max-width: 767px) {
font-size: 2.3rem;
margin-bottom: .73rem;
margin-bottom: 0.73rem;
}
}
.info {
font-weight: 400;
font-size: 1.4rem;
color: #797878;
margin-bottom: 1.7rem;
margin-bottom: 1.2rem;
font-family: 'pingfang_regular';
&.academic {
margin-bottom: .4rem;
margin-bottom: 0.4rem;
}
@media (max-width: 767px) {
font-size: 1.25rem;
@@ -584,10 +631,11 @@ import { message } from "ant-design-vue";
}
.price {
// margin-bottom: 5.2rem;
border-bottom: .72px solid #E7EBFF;
border-bottom: 0.72px solid #e7ebff;
width: 100%;
display: flex;
align-items: flex-end;
column-gap: 0.7rem;
align-items: center;
@media (max-width: 767px) {
margin-bottom: 2.3rem;
}
@@ -595,13 +643,13 @@ import { message } from "ant-design-vue";
align-items: flex-start;
flex-direction: column;
> div {
margin-bottom: .9rem;
font-size: 4.3rem;
margin-bottom: 0.9rem;
font-size: 3.6rem;
line-height: 1;
letter-spacing: -.072rem;
letter-spacing: -0.072rem;
@media (max-width: 767px) {
font-size: 3.1rem;
margin-bottom: .5rem;
margin-bottom: 0.5rem;
}
}
> span {
@@ -610,29 +658,30 @@ import { message } from "ant-design-vue";
}
> div {
font-weight: 500;
font-size: 4.3rem;
color: #1B223C;
font-size: 3.6rem;
color: #1b223c;
@media (max-width: 767px) {
font-size: 3.14rem;
}
}
> span {
font-weight: 500;
font-size: 1.7rem;
font-size: 1.3rem;
color: #797878;
margin-bottom: 1.5rem;
margin-left: 1rem;
// margin-bottom: 1.5rem;
// margin-left: 1rem;
&.yearl {
font-size: 1.3rem;
}
@media (max-width: 767px) {
font-size: 1.2rem;
margin-left: .7rem;
margin-bottom: 1rem;
// margin-left: 0.7rem;
// margin-bottom: 1rem;
}
}
}
.info,.detail,.gallery_btn{
.detail,
.gallery_btn {
font-size: 1.6rem;
}
.highlight {
@@ -640,13 +689,18 @@ import { message } from "ant-design-vue";
position: absolute;
top: 0;
right: 0;
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
background: linear-gradient(
88.13deg,
#fbd2ff 0.91%,
#e6d3ff 52.5%,
#b694ff 101.09%
);
// border-radius: .5rem 1.5rem 0px 1.5rem;
border-top-right-radius: 1.5rem;
border-bottom-left-radius: 0.5rem;
padding: .75rem .5rem;
padding: 0.75rem 0.5rem;
@media (max-width: 767px) {
padding: .55rem .36rem;
padding: 0.55rem 0.36rem;
// border-radius: .46rem .36rem 0px .9rem;
border-top-right-radius: 1.1rem;
border-bottom-left-radius: 0.4rem;
@@ -661,12 +715,12 @@ import { message } from "ant-design-vue";
justify-content: flex-end;
overflow-y: auto;
&.academic {
justify-content: flex-start
justify-content: flex-start;
}
li {
list-style: disc;
margin-bottom: .3rem;
font-size: 1.6rem;
// margin-bottom: 0.3rem;
font-size: 1.3rem;
font-weight: 500;
@media (max-width: 767px) {
font-size: 1.15rem;
@@ -683,11 +737,12 @@ import { message } from "ant-design-vue";
margin-top: auto;
font-size: 1.7rem;
font-weight: 500;
background-color: #1b223c;
@media (max-width: 767px) {
margin-top: 2.5rem;
font-size: 1.25rem;
line-height: 3.4rem;
border-radius: .62rem;
border-radius: 0.62rem;
}
}
}