From f6533e60272db9919df42739d1dfbcd3a2a74c86 Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 26 Nov 2025 17:00:09 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=A5=97=E9=A4=90item=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/mainPage/signUp/index.vue | 1427 ++++++++++++-----------
 1 file changed, 741 insertions(+), 686 deletions(-)

diff --git a/src/component/mainPage/signUp/index.vue b/src/component/mainPage/signUp/index.vue
index e9a2c135..fe82f362 100644
--- a/src/component/mainPage/signUp/index.vue
+++ b/src/component/mainPage/signUp/index.vue
@@ -1,696 +1,751 @@
 <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">
-					<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'}">{{ 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' && !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>
-					<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
-				</div>
-			</div>
-
-		</div>
-		<registerModel ref="registerModel"></registerModel>
-	</div>
+  <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 }"
+        >
+          <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' }">
+                {{ 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' && !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>
+          <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'
+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: '100积分',
-							detail: "",
-							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: "推荐",
-							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: '/image/homeIntroduct/personal.png',
-							type:'personal',
-							info: "您的AI时尚设计助手",
-							price: 'HK$5,000',
-							detail: "每年·50000积分",
-							highlight: "免费试用5天",
-							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:"Personal",
-							img:CChargeIcon,
-							type:'personal',
-							info:"Your AI Fashion Design Assistant",
-							price:'100 credits',
-							detail:"",
-							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:'Get Started',
-						},
-						{
-							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",
-							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:"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:"Personal",
-							img:'/image/homeIntroduct/personal.png',
-							type:'personal',
-							info:"Your AI Fashion Design Assistant",
-							price:'HK$5,000',
-							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',
-							],
-							btn:'Get Started',
-						},{
-							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,
-            }
-		},
+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: '5天·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: '/image/homeIntroduct/personal.png',
+            type: 'personal',
+            info: '您的AI时尚设计助手',
+            price: 'HK$5,000',
+            detail: '每年·50000积分',
+            highlight: '免费试用5天',
+            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: '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',
+            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: 'Get Started'
+          },
+          {
+            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: 'Get Started'
+          },
+          {
+            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: 'Personal',
+            img: '/image/homeIntroduct/personal.png',
+            type: 'personal',
+            info: 'Your AI Fashion Design Assistant',
+            price: 'HK$5,000',
+            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'
+            ],
+            btn: 'Get Started'
+          },
+          {
+            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: .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: .58rem;
-		padding: var(--selectPadding);
-		@media (max-width: 767px) {
-			--selectPadding: .36rem;
-			border-radius: .58rem;
-			width: 10.8rem;
-		}
-		&.left{
-			> .bg{
-				left: var(--selectPadding);
-			}
-			> .leftText{
-				color: #000;
-			}
-		}
-		&.right{
-			> .bg{
-				left: calc(50% + var(--selectPadding));
-			}
-			> .rightText{
-				color: #000;
-			}
-		}
-		> .bg{
-			border: .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;
-		}
-		> .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_box{
-		
-	}
-	.gallery_list{
-		display: flex;
-		// justify-content: center;
-		flex-wrap: wrap;
-		justify-content: center;
-		margin-top: 4.3rem;
-		@media (max-width: 767px) {
-			margin-top: 2.4rem;
-		}
-		.gallery_item{
-			width: 44.1rem;
-			height: 56.9rem;
-			padding: 2.09rem;
-			border-radius: 1.8rem;
-			border: .72px solid #E7EBFF;
-			margin-right: 8rem;
-			position: relative;
-			@media (max-width: 767px) {
-				width: 100%;
-				height: auto;
-				border-radius: 1.3rem;
-				margin: 0;
-				margin-bottom: 2.8rem;
-				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.4rem;
-				width: 4rem;
-				height: 4rem;
-				@media (max-width: 767px) {
-					width: 2.9rem;
-					height: 2.9rem;
-					margin-bottom: 1rem;
-				}
-			}
-			.title{
-				font-size: 3.1rem;
-				margin-bottom: 1rem;
-				text-align: left;
-				font-weight: 500;
-				@media (max-width: 767px) {
-					font-size: 2.3rem;
-					margin-bottom: .73rem;
-				}
-			}
-			.info{
-				font-weight: 400;
-				font-size: 1.4rem;
-				color: #797878;
-				margin-bottom: 1.7rem;
-				font-family: 'pingfang_regular';
-				&.academic{
-					margin-bottom: .4rem;
-				}
-				@media (max-width: 767px) {
-					font-size: 1.25rem;
-					margin-bottom: 1.25rem;
-				}
-			}
-			.price{
-				// margin-bottom: 5.2rem;
-				border-bottom: .72px solid #E7EBFF;
-				width: 100%;
-				display: flex;
-				align-items: flex-end;
-				@media (max-width: 767px) {
-					margin-bottom: 2.3rem;
-				}
-				&.academic{
-					align-items: flex-start;
-					flex-direction: column;
-					> div{
-						margin-bottom: .9rem;
-						font-size: 4.3rem;
-						line-height: 1;
-						letter-spacing: -.072rem;
-						@media (max-width: 767px) {
-							font-size: 3.1rem;
-							margin-bottom: .5rem;
-						}
-					}
-					> span{
-						margin: 0;
-					}
-				}
-				> div{
-					font-weight: 500;
-					font-size: 4.3rem;
-					color: #1B223C;
-					@media (max-width: 767px) {
-						font-size: 3.14rem;
-					}
-				}
-				> span{
-					font-weight: 500;
-					font-size: 1.7rem;
-					color: #797878;
-					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;
-					}
-				}
-			}
-			.info,.detail,.gallery_btn{
-				font-size: 1.6rem;
-			}
-			.highlight{
-				font-size: 1.3rem;
-				position: absolute;
-				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;
+.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);
+    @media (max-width: 767px) {
+      --selectPadding: 0.36rem;
+      border-radius: 0.58rem;
+      width: 10.8rem;
+    }
+    &.left {
+      > .bg {
+        left: var(--selectPadding);
+      }
+      > .leftText {
+        color: #000;
+      }
+    }
+    &.right {
+      > .bg {
+        left: calc(50% + var(--selectPadding));
+      }
+      > .rightText {
+        color: #000;
+      }
+    }
+    > .bg {
+      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 0.3s;
+    }
+    > .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: 4.3rem;
+    @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.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;
+        border-radius: 1.3rem;
+        margin: 0;
+        margin-bottom: 2.8rem;
+        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;
+        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;
+        }
+      }
+      .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;
+            letter-spacing: -0.072rem;
+            @media (max-width: 767px) {
+              font-size: 3.1rem;
+              margin-bottom: 0.5rem;
+            }
+          }
+          > span {
+            margin: 0;
+          }
+        }
+        > div {
+          font-weight: 500;
+          font-size: 3.6rem;
+          color: #1b223c;
+          @media (max-width: 767px) {
+            font-size: 3.14rem;
+          }
+        }
+        > 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-left: 0.7rem;
+            // margin-bottom: 1rem;
+          }
+        }
+      }
+      .detail,
+      .gallery_btn {
+        font-size: 1.6rem;
+      }
+      .highlight {
+        font-size: 1.3rem;
+        position: absolute;
+        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;
-				padding: .75rem .5rem;
-				@media (max-width: 767px) {
-					padding: .55rem .36rem;
-					// border-radius: .46rem .36rem 0px .9rem;
-					border-top-right-radius: 1.1rem;
-        border-bottom-left-radius: 0.4rem;
-					font-size: 1rem;
-				}
-			}
-			.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: .3rem;
-					font-size: 1.6rem;
-					font-weight: 500;
-					@media (max-width: 767px) {
-						font-size: 1.15rem;
-					}
-				}
-				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;
-				@media (max-width: 767px) {
-					margin-top: 2.5rem;
-					font-size: 1.25rem;
-					line-height: 3.4rem;
-					border-radius: .62rem;
-				}
-			}
-		}
-	}
+        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;
+          font-size: 1rem;
+        }
+      }
+      .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;
+          @media (max-width: 767px) {
+            font-size: 1.15rem;
+          }
+        }
+        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;
+        @media (max-width: 767px) {
+          margin-top: 2.5rem;
+          font-size: 1.25rem;
+          line-height: 3.4rem;
+          border-radius: 0.62rem;
+        }
+      }
+    }
+  }
 }
 </style>