901 lines
27 KiB
Vue
901 lines
27 KiB
Vue
<template>
|
||
<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="bg"></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"
|
||
:class="[
|
||
{ recommended: item.recommended },
|
||
{ monthly: monthlyOrYearly === 'monthly' },
|
||
{ yearly: monthlyOrYearly === 'yearl' },
|
||
{ academic: item.type === 'academic' }
|
||
]"
|
||
>
|
||
<div class="product_signUp_box">
|
||
<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="price" v-if="item.type != 'academic'">
|
||
<div>{{ item?.price }}</div>
|
||
<span
|
||
:class="[
|
||
{ yearl: monthlyOrYearly == 'yearl' },
|
||
{ personal: item.type === 'personal' }
|
||
]"
|
||
style="white-space: nowrap"
|
||
>
|
||
{{ 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>
|
||
</div>
|
||
<ul
|
||
class="product_detail"
|
||
:class="[
|
||
{ academic: item.type == 'academic' },
|
||
{ chinese: isSelectSuccessively }
|
||
]"
|
||
>
|
||
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
|
||
</ul>
|
||
<div
|
||
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 submit"
|
||
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 registerModel from './registerModel.vue'
|
||
import { message } from 'ant-design-vue'
|
||
import CChargeIcon from '@/assets/icons/CCharge.svg'
|
||
|
||
export default defineComponent({
|
||
components: {
|
||
registerModel
|
||
},
|
||
name: 'login',
|
||
props: ['isSelectSuccessively'],
|
||
// emits: ['close'],
|
||
setup(props, { emit }) {
|
||
let dom = reactive({
|
||
registerModel: null
|
||
})
|
||
let data = reactive({
|
||
isSelectSignUp: false,
|
||
monthlyOrYearly: 'monthly',
|
||
productList: [],
|
||
productListCn: {
|
||
Advantages: '我们的价格方案',
|
||
Monthly: '月度',
|
||
Yearly: '年度',
|
||
monthly: [
|
||
{
|
||
title: '试用版',
|
||
img: CChargeIcon,
|
||
type: 'personal',
|
||
info: '您的AI时尚设计助手',
|
||
price: 'HK$0',
|
||
detail: '自注册之日起 7 天内 · 50 个积分',
|
||
highlight: '',
|
||
discounts: '9折优惠',
|
||
detailList: [
|
||
'轻松充值积分',
|
||
'可在公共化画廊分享设计并与设计师互动',
|
||
'支持月付/年付选项',
|
||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||
'客户支持'
|
||
],
|
||
btn: '立即开始'
|
||
},
|
||
{
|
||
title: '个人版',
|
||
img: '/image/homeIntroduct/personal.png',
|
||
type: 'personal',
|
||
info: '您的AI时尚设计助手',
|
||
price: 'HK$100',
|
||
detail: '每月·500积分',
|
||
highlight: '',
|
||
discounts: '9折优惠',
|
||
detailList: [
|
||
'轻松充值积分',
|
||
'可在公共化画廊分享设计并与设计师互动',
|
||
'支持月付/年付选项',
|
||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||
'客户支持'
|
||
],
|
||
btn: '订阅'
|
||
},
|
||
{
|
||
title: '个人专业版',
|
||
img: '/image/homeIntroduct/personal.png',
|
||
type: 'personal',
|
||
info: '您的AI时尚设计助手',
|
||
price: 'HK$500',
|
||
detail: '每月·3500积分',
|
||
highlight: '推荐',
|
||
recommended: true,
|
||
discounts: '9折优惠',
|
||
detailList: [
|
||
'轻松充值积分',
|
||
'可在公共画廊中分享设计并与设计师互动',
|
||
'支持月付/年付选项',
|
||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||
'客户支持'
|
||
],
|
||
btn: '订阅'
|
||
},
|
||
{
|
||
title: '教育版',
|
||
img: '/image/homeIntroduct/academic.png',
|
||
type: 'academic',
|
||
info: '高校多用户管理系统',
|
||
price: '',
|
||
detail: '',
|
||
custom: '定制方案',
|
||
customInfo: '可提供专属教育优惠，详情请联系我们',
|
||
highlight: '',
|
||
discounts: '',
|
||
detailList: [
|
||
'灵活的自定义程序以满足学校需求',
|
||
'项目期间每月信用额度自动续期',
|
||
'可在用户之间灵活共享和分配账户信用额度',
|
||
'AI辅助设计教学功能',
|
||
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
|
||
'基本3D设计功能',
|
||
'客户与技术支援'
|
||
],
|
||
btn: '联系我们'
|
||
}
|
||
],
|
||
yearl: [
|
||
{
|
||
title: '试用版',
|
||
img: CChargeIcon,
|
||
type: 'personal',
|
||
info: '您的AI时尚设计助手',
|
||
price: 'HK$0',
|
||
detail: '自注册之日起 7 天内 · 50 个积分',
|
||
highlight: '',
|
||
discounts: '9折优惠',
|
||
detailList: [
|
||
'轻松充值积分',
|
||
'可在公共化画廊分享设计并与设计师互动',
|
||
'支持月付/年付选项',
|
||
'适合个人创作者、独立设计师以及所有时尚爱好者',
|
||
'客户支持'
|
||
],
|
||
btn: '立即开始'
|
||
},
|
||
{
|
||
title: '个人版',
|
||
img: '/image/homeIntroduct/personal.png',
|
||
type: 'personal',
|
||
info: '您的AI时尚设计助手',
|
||
price: 'HK$5,000',
|
||
detail: '每年·50000积分',
|
||
highlight: '',
|
||
discounts: '9折优惠',
|
||
detailList: [
|
||
'灵活的自定义程序以满足学校需求',
|
||
'可在用户之间灵活共享和分配账户信用额度',
|
||
'AI辅助设计教学功能',
|
||
'支持草图创意和设计灵感教学',
|
||
'基础3D设计功能'
|
||
],
|
||
btn: '订阅'
|
||
},
|
||
{
|
||
title: '教育版',
|
||
img: '/image/homeIntroduct/academic.png',
|
||
type: 'academic',
|
||
info: '高校多用户管理系统',
|
||
price: '',
|
||
detail: '',
|
||
custom: '定制方案',
|
||
customInfo: '可提供专属教育优惠，详情请联系我们',
|
||
highlight: '',
|
||
discounts: '',
|
||
detailList: [
|
||
'灵活的自定义程序以满足学校需求',
|
||
'项目期间每月信用额度自动续期',
|
||
'可在用户之间灵活共享和分配账户信用额度',
|
||
'AI辅助设计教学功能',
|
||
'从设计灵感、草图创作到完整时装系列的尖端教学工具',
|
||
'基本3D设计功能',
|
||
'客户与技术支援'
|
||
],
|
||
btn: '联系我们'
|
||
}
|
||
]
|
||
},
|
||
productListEn: {
|
||
Advantages: 'Our Pricing Plan',
|
||
Monthly: 'Monthly',
|
||
Yearly: 'Yearly',
|
||
monthly: [
|
||
{
|
||
title: 'Trial',
|
||
img: CChargeIcon,
|
||
type: 'personal',
|
||
info: 'Your AI Fashion Design Assistant',
|
||
price: 'HK$0',
|
||
detail: '7 days from sign-up · 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',
|
||
type: 'personal',
|
||
info: 'Your AI Fashion Design Assistant',
|
||
price: 'HK$100',
|
||
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'
|
||
],
|
||
btn: 'Subscribe'
|
||
},
|
||
{
|
||
title: 'Personal',
|
||
img: '/image/homeIntroduct/personal.png',
|
||
type: 'personal',
|
||
info: 'Your AI Fashion Design Assistant',
|
||
price: 'HK$500',
|
||
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'
|
||
],
|
||
btn: 'Subscribe'
|
||
},
|
||
{
|
||
title: 'Academic',
|
||
img: '/image/homeIntroduct/academic.png',
|
||
type: 'academic',
|
||
info: 'Multi User Management System for Universities',
|
||
price: '',
|
||
detail: '',
|
||
custom: 'Customize',
|
||
customInfo: 'Special Academic rate aviable, please contact us for details.',
|
||
highlight: '',
|
||
discounts: '',
|
||
detailList: [
|
||
'Flexible Customize Program to Support School Needs',
|
||
'Monthly Credit Renewal throughout Program Duration',
|
||
'Flexible to Share and Allocate Account Credits among Users',
|
||
'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'
|
||
}
|
||
],
|
||
yearl: [
|
||
{
|
||
title: 'Trial',
|
||
img: CChargeIcon,
|
||
type: 'personal',
|
||
info: 'Your AI Fashion Design Assistant',
|
||
price: 'HK$0',
|
||
detail: '7 days from sign-up · 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',
|
||
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',
|
||
type: 'academic',
|
||
info: 'Multi User Management System for Universities',
|
||
price: '',
|
||
detail: '',
|
||
custom: 'Customize',
|
||
customInfo: 'Special Academic rate aviable, please contact us for details.',
|
||
highlight: '',
|
||
discounts: '',
|
||
detailList: [
|
||
'Flexible Customize Program to Support School Needs',
|
||
'Monthly Credit Renewal throughout Program Duration',
|
||
'Flexible to Share and Allocate Account Credits among Users',
|
||
'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'
|
||
}
|
||
]
|
||
}
|
||
})
|
||
watch(
|
||
() => props.isSelectSuccessively,
|
||
newVal => {
|
||
if (newVal) {
|
||
data.productList = data.productListCn
|
||
} else {
|
||
data.productList = data.productListEn
|
||
}
|
||
},
|
||
{ immediate: true }
|
||
)
|
||
const close = () => {}
|
||
const setMonthlyOrYearly = val => {
|
||
data.monthlyOrYearly = val
|
||
}
|
||
const createAccount = () => {
|
||
if (window.innerWidth < 768) {
|
||
dom.registerModel.pageWidth = '100%'
|
||
}
|
||
dom.registerModel.init(props.isSelectSuccessively)
|
||
}
|
||
const handleContactUs = () => {
|
||
const email = 'info@code-create.com.hk'
|
||
const mailtoLink = `mailto:${email}`
|
||
|
||
// 检测是否有邮件客户端
|
||
let hasEmailClient = false
|
||
let blurTimer = null
|
||
|
||
// 监听窗口失去焦点事件（如果打开了邮件客户端，窗口会失去焦点）
|
||
const handleBlur = () => {
|
||
hasEmailClient = true
|
||
if (blurTimer) {
|
||
clearTimeout(blurTimer)
|
||
}
|
||
window.removeEventListener('blur', handleBlur)
|
||
}
|
||
|
||
window.addEventListener('blur', handleBlur)
|
||
|
||
// 尝试打开邮件客户端（使用临时链接元素，避免页面跳转）
|
||
try {
|
||
const tempLink = document.createElement('a')
|
||
tempLink.href = mailtoLink
|
||
tempLink.style.display = 'none'
|
||
document.body.appendChild(tempLink)
|
||
tempLink.click()
|
||
document.body.removeChild(tempLink)
|
||
} catch (e) {
|
||
// 如果打开失败，直接复制邮箱
|
||
hasEmailClient = false
|
||
}
|
||
|
||
// 设置超时检测，如果500ms内窗口没有失去焦点，说明没有邮件客户端
|
||
blurTimer = setTimeout(() => {
|
||
window.removeEventListener('blur', handleBlur)
|
||
if (!hasEmailClient) {
|
||
// 没有邮件客户端，复制邮箱到剪贴板
|
||
copyToClipboard(email)
|
||
const isChinese = props.isSelectSuccessively
|
||
if (isChinese) {
|
||
message.info(`没有检测到邮件客户端,已为您复制邮箱地址:${email}`)
|
||
} else {
|
||
message.info(`No email client detected, email address copied: ${email}`)
|
||
}
|
||
}
|
||
}, 2000)
|
||
}
|
||
|
||
const copyToClipboard = text => {
|
||
if (navigator.clipboard && window.isSecureContext) {
|
||
// 使用现代 Clipboard API
|
||
navigator.clipboard.writeText(text).catch(() => {
|
||
// 如果失败，使用传统方法
|
||
fallbackCopyToClipboard(text)
|
||
})
|
||
} else {
|
||
// 使用传统方法
|
||
fallbackCopyToClipboard(text)
|
||
}
|
||
}
|
||
|
||
const fallbackCopyToClipboard = text => {
|
||
const textArea = document.createElement('textarea')
|
||
textArea.value = text
|
||
textArea.style.position = 'fixed'
|
||
textArea.style.left = '-999999px'
|
||
textArea.style.top = '-999999px'
|
||
document.body.appendChild(textArea)
|
||
textArea.focus()
|
||
textArea.select()
|
||
try {
|
||
document.execCommand('copy')
|
||
} catch (err) {
|
||
console.error('复制失败:', err)
|
||
}
|
||
document.body.removeChild(textArea)
|
||
}
|
||
|
||
onMounted(() => {})
|
||
return {
|
||
...toRefs(dom),
|
||
...toRefs(data),
|
||
close,
|
||
setMonthlyOrYearly,
|
||
createAccount,
|
||
handleContactUs
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<style scoped lang="less">
|
||
.signUp {
|
||
flex: 1;
|
||
padding: 0rem 4rem;
|
||
margin-top: 5.6rem;
|
||
@media (max-width: 767px) {
|
||
margin-top: 1.5rem;
|
||
padding: 0rem 3.7rem;
|
||
// flex: 1;
|
||
// height: 100%;
|
||
// overflow-y: auto;
|
||
}
|
||
.back {
|
||
font-size: 1.6rem;
|
||
margin-bottom: 3rem;
|
||
}
|
||
.back,
|
||
.introduce > span {
|
||
cursor: pointer;
|
||
}
|
||
.titleTitle {
|
||
font-size: 4.6rem;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
margin-bottom: 2rem;
|
||
@media (max-width: 767px) {
|
||
font-size: 2.68rem;
|
||
margin-bottom: 1.1rem;
|
||
}
|
||
}
|
||
.selectMonthlyYearly {
|
||
border: 0.7px solid #e7ebff;
|
||
background: #fbfbfb;
|
||
border-radius: 1rem;
|
||
width: 18.5rem;
|
||
box-shadow: 0px 0.72px 3.62px 0px #566ee81a inset;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
position: relative;
|
||
--selectPadding: 0.58rem;
|
||
padding: var(--selectPadding);
|
||
transform: scale(1.05);
|
||
@media (max-width: 767px) {
|
||
--selectPadding: 0.36rem;
|
||
border-radius: 0.58rem;
|
||
width: 10.8rem;
|
||
}
|
||
&.left {
|
||
> .bg {
|
||
left: var(--selectPadding);
|
||
}
|
||
> .leftText {
|
||
color: #fff;
|
||
}
|
||
}
|
||
&.right {
|
||
> .bg {
|
||
left: calc(50% + var(--selectPadding));
|
||
}
|
||
> .rightText {
|
||
color: #fff;
|
||
}
|
||
}
|
||
> .bg {
|
||
border: 0.7px solid #e7ebff;
|
||
border-radius: 0.5rem;
|
||
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 0.3s;
|
||
}
|
||
&.left,
|
||
&.right {
|
||
.bg {
|
||
background-color: #000;
|
||
}
|
||
}
|
||
> .leftText,
|
||
> .rightText {
|
||
cursor: pointer;
|
||
font-weight: 400;
|
||
font-size: 1.7rem;
|
||
width: 50%;
|
||
text-align: center;
|
||
color: #797878;
|
||
position: relative;
|
||
font-family: 'pingfang_regular';
|
||
@media (max-width: 767px) {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
}
|
||
.introduce {
|
||
font-size: 2.4rem;
|
||
text-decoration: underline;
|
||
}
|
||
.selectSignUp {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
@media (max-width: 768px) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.gallery_list {
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: 6rem;
|
||
@media (max-width: 767px) {
|
||
margin-top: 2.4rem;
|
||
}
|
||
.gallery_item {
|
||
width: 36.2rem;
|
||
height: 46.8rem;
|
||
padding: 2.38rem;
|
||
border-radius: 1.55rem;
|
||
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%)
|
||
border-box;
|
||
background-origin: border-box;
|
||
background-clip: padding-box, border-box;
|
||
}
|
||
@media (max-width: 767px) {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 1.3rem;
|
||
margin: 0;
|
||
margin-bottom: 2.8rem;
|
||
padding: 2rem;
|
||
padding-bottom: 1.3rem;
|
||
}
|
||
.product_signUp_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
&:last-child {
|
||
margin-right: 0rem;
|
||
margin-bottom: 0rem;
|
||
}
|
||
.img {
|
||
margin-bottom: 1.2rem;
|
||
width: 4rem;
|
||
height: 4rem;
|
||
@media (max-width: 767px) {
|
||
width: 2.9rem;
|
||
height: 2.9rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
}
|
||
.title {
|
||
font-size: 2.6rem;
|
||
margin-bottom: 0.8rem;
|
||
text-align: left;
|
||
font-weight: 500;
|
||
@media (max-width: 767px) {
|
||
font-size: 2.3rem;
|
||
margin-bottom: 0.73rem;
|
||
}
|
||
}
|
||
.info {
|
||
font-weight: 400;
|
||
font-size: 1.4rem;
|
||
color: #797878;
|
||
font-family: 'pingfang_regular';
|
||
&.academic {
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
@media (max-width: 767px) {
|
||
font-size: 1.25rem;
|
||
// margin-bottom: 1.25rem;
|
||
}
|
||
}
|
||
.price {
|
||
// margin-bottom: 5.2rem;
|
||
border-bottom: 0.72px solid #e7ebff;
|
||
width: 100%;
|
||
display: flex;
|
||
column-gap: 0.7rem;
|
||
align-items: center;
|
||
@media (max-width: 767px) {
|
||
margin-bottom: 2.3rem;
|
||
}
|
||
&.academic {
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
> div {
|
||
margin-bottom: 0.9rem;
|
||
font-size: 3.6rem;
|
||
line-height: 1;
|
||
|
||
@media (max-width: 767px) {
|
||
font-size: 3.1rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
}
|
||
> span {
|
||
margin: 0;
|
||
}
|
||
}
|
||
> div {
|
||
font-weight: 500;
|
||
font-size: 3.6rem;
|
||
letter-spacing: -0.06rem;
|
||
color: #1b223c;
|
||
margin: 0.3rem 0;
|
||
@media (max-width: 767px) {
|
||
font-size: 3rem;
|
||
}
|
||
}
|
||
> span {
|
||
font-weight: 500;
|
||
font-size: 1.3rem;
|
||
color: #797878;
|
||
// margin-bottom: 1.5rem;
|
||
// margin-left: 1rem;
|
||
&.yearl {
|
||
font-size: 1.3rem;
|
||
}
|
||
@media (max-width: 767px) {
|
||
font-size: 1.2rem;
|
||
margin-top: 1rem;
|
||
// margin-left: 0.7rem;
|
||
// margin-bottom: 1rem;
|
||
}
|
||
}
|
||
}
|
||
.detail,
|
||
.gallery_btn {
|
||
font-size: 1.6rem;
|
||
}
|
||
.highlight {
|
||
font-size: 1.4rem;
|
||
position: absolute;
|
||
width: 12.41rem;
|
||
line-height: 3.4rem;
|
||
text-align: center;
|
||
top: 0;
|
||
right: 0;
|
||
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;
|
||
@media (max-width: 767px) {
|
||
// border-radius: .46rem .36rem 0px .9rem;
|
||
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 {
|
||
padding-left: 3.1rem;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
overflow-y: auto;
|
||
&.academic {
|
||
justify-content: flex-start;
|
||
}
|
||
li {
|
||
list-style: disc;
|
||
// margin-bottom: 0.3rem;
|
||
font-size: 1.3rem;
|
||
font-weight: 500;
|
||
}
|
||
// li:last-child {
|
||
// margin-bottom: 0;
|
||
// }
|
||
}
|
||
.gallery_btn {
|
||
line-height: 4.6rem;
|
||
width: 100%;
|
||
padding: 0;
|
||
margin-top: auto;
|
||
font-size: 1.7rem;
|
||
font-weight: 500;
|
||
background-color: #1b223c;
|
||
&:hover {
|
||
background-color: #fff;
|
||
}
|
||
@media (max-width: 767px) {
|
||
margin-top: 2.5rem;
|
||
font-size: 1.25rem;
|
||
line-height: 3.4rem;
|
||
border-radius: 0.62rem;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|