更新 .gitea/workflows/prod_build_schedule.yaml

.gitea/workflows/develop_build_commit.yaml

@@ -0,0 +1,90 @@
+name: git commit 控制 AiDA WEB-Node.js 开发分支构建部署
+on:
+  workflow_dispatch:
+
+  push:
+    branches:
+      - dev_vite
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: "contains(github.event.head_commit.message, '[run build]')"
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_aida/DevelopVersion/develop-aida-web-front
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: dev_vite
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - run: ls -l
+
+      - name: 3.同步文件到远程服务器
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          source: "./dist/*"
+          target: ${{ env.REMOTE_DEPLOY_PATH }}
+          ssh_options: "-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null"
+          strip_components: 0
+
+      - name: 4. 远程重载 Nginx 配置
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          # 核心：执行 Nginx 重载命令
+          script: |
+            echo "尝试重载 Nginx 服务..."
+            # 💡 注意：执行此命令需要服务器用户具有 sudo 权限，并且配置了 NOPASSWD。
+            # 否则工作流可能会因为权限不足而失败。
+            sudo systemctl reload nginx
+            echo "Nginx 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/develop_build_manual.yaml

@@ -0,0 +1,85 @@
+name: 手动触发 AiDA WEB-Node.js 开发分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_aida/DevelopVersion/develop-aida-web-front
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: dev_vite
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - run: ls -l
+
+      - name: 3.同步文件到远程服务器
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          source: "./dist/*"
+          target: ${{ env.REMOTE_DEPLOY_PATH }}
+          ssh_options: "-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null"
+          strip_components: 0
+
+      - name: 4. 远程重载 Nginx 配置
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          # 核心：执行 Nginx 重载命令
+          script: |
+            echo "尝试重载 Nginx 服务..."
+            # 💡 注意：执行此命令需要服务器用户具有 sudo 权限，并且配置了 NOPASSWD。
+            # 否则工作流可能会因为权限不足而失败。
+            sudo systemctl reload nginx
+            echo "Nginx 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/prod_build_manual.yaml

@@ -0,0 +1,78 @@
+name: AiDA WEB-Node.js 生产分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: StableVersion
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build
+      - run: ls -l
+
+      - name: 3.5. 手动安装 AWS CLI v2 # 新增步骤：确保 aws 命令可用
+        run: |
+          echo "安装 AWS CLI V2..."
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install --update
+          aws --version
+          echo "AWS CLI V2 安装完成。"
+
+      - name: 4.配置 AWS 凭证
+        uses: aws-actions/configure-aws-credentials@main
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-east-1'
+
+      - name: 5.同步 dist 目录到 S3
+        run: |
+          aws s3 sync dist/ s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
+
+      - name: 6.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/prod_build_schedule.yaml

@@ -0,0 +1,81 @@
+name: AiDA WEB-Node.js 生产分支构建部署
+on:
+  schedule:
+    #       cron为UTC时区，构建时间=部署时间-8小时 {*分 (-8)时 *日 *月  *周}  ---
+    #      示例： 1月1日22点22分触发构建 cron写作 - '22 14 1 1 *'
+    - cron: '00 14 23 3 *'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: StableVersion
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build
+      - run: ls -l
+
+      - name: 3.5. 手动安装 AWS CLI v2 # 新增步骤：确保 aws 命令可用
+        run: |
+          echo "安装 AWS CLI V2..."
+          curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
+          unzip awscliv2.zip
+          sudo ./aws/install --update
+          aws --version
+          echo "AWS CLI V2 安装完成。"
+
+      - name: 4.配置 AWS 凭证
+        uses: aws-actions/configure-aws-credentials@main
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: 'ap-east-1'
+
+      - name: 5.同步 dist 目录到 S3
+        run: |
+          aws s3 sync dist/ s3://${{ secrets.S3_BUCKET_NAME }}/ --acl public-read
+
+      - name: 6.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA WEB-Node.js 生产分支构建部署
+            分支: StableVersion
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

.gitea/workflows/research_build_manual.yaml

@@ -0,0 +1,85 @@
+name: 手动触发 AiDA WEB-Node.js 开发分支构建部署
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [ 18.18.0 ]
+    env:
+      REMOTE_DEPLOY_PATH: /workspace/workspace_aida/Research/research-aida-web-front
+
+    steps:
+      - name: 0.记录开始时间
+        id: build_start_time
+        run: echo "current_time=$(TZ='Asia/Hong_Kong' date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_OUTPUT
+
+      - name: 1.检出代码
+        uses: actions/checkout@v4
+        with:
+          ref: research
+
+      - name: 2.设置 Node.js 环境
+        uses: actions/setup-node@v6
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build:dev
+      - run: ls -l
+
+      - name: 3.同步文件到远程服务器
+        uses: appleboy/scp-action@v0.1.7
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          source: "./dist/*"
+          target: ${{ env.REMOTE_DEPLOY_PATH }}
+          ssh_options: "-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null"
+          strip_components: 0
+
+      - name: 4. 远程重载 Nginx 配置
+        uses: appleboy/ssh-action@v1.0.3
+        with:
+          host: ${{ secrets.SERVER_HOST }}
+          username: ${{ secrets.SERVER_USER }}
+          key: ${{ secrets.SSH_KEY }}
+          # 核心：执行 Nginx 重载命令
+          script: |
+            echo "尝试重载 Nginx 服务..."
+            # 💡 注意：执行此命令需要服务器用户具有 sudo 权限，并且配置了 NOPASSWD。
+            # 否则工作流可能会因为权限不足而失败。
+            sudo systemctl reload nginx
+            echo "Nginx 重载命令已发送。"
+
+      - name: 5.发送构建结果邮件
+        if: always() # 无论上一步是否失败，都执行此步骤
+        uses: dawidd6/action-send-mail@v3
+        with:
+
+          from: ${{ secrets.MAIL_USERNAME }}
+          # --- 邮件配置 ---
+          server_address: smtp.gmail.com # 替换为你的SMTP服务器地址
+          server_port: 465 # 替换为你的SMTP端口 (通常是465或587)
+          username: ${{ secrets.MAIL_USERNAME }} # 存储在Secrets中的邮箱用户名
+          password: ${{ secrets.MAIL_PASSWORD }} # 存储在Secrets中的邮箱密码
+          subject: 'Gitea Actions 构建通知: ${{ job.status }} - AiDA back-java Develop'
+          # 收件人列表，可以根据需要更改
+          to: 'xupei3360@163.com,txli@aidlab.hk,cgzhou@aidlab.hk,zchengrong@yeah.net' # 替换为实际收件人邮箱
+
+          # --- 邮件正文内容 ---
+          body: |
+            项目: AiDA back-java Develop
+            分支: dev/3.1_release_merge
+            
+            🎉 构建结果: ${{ job.status }}
+            
+            📅 构建时间: ${{ steps.build_start_time.outputs.current_time }}
+            
+            🔗 构建链接: ${{ gitea.server_url }}/${{ gitea.repository.owner.name }}/${{ gitea.repository.name }}/actions/runs/${{ gitea.run_id }}
+
+          # 确保邮件内容为纯文本，或者你可以设置为 html: true 并调整 body
+          content_type: text/plain

src/App.vue

@@ -1,16 +1,7 @@
 <template>
   <router-view/>
-  <div class="loading" v-show="loading"><a-spin delay="0.5" /></div>
 </template>
 
-<script setup>
-	import { computed } from 'vue';
-	import { useStore } from 'vuex';
-	const store = useStore();
-	const loading = computed(() => store.state.loading || store.state.view_loading);
-
-</script>
-
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -18,19 +9,7 @@
   -moz-osx-font-smoothing: grayscale;
   height: 100%;
 }
-.loading{
+
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0,0,0,0.4);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 999999999999;
-	color: #fff;
-}
 .ipad{
 	*{
 		-webkit-touch-callout:none;

src/assets/style/style.css

@@ -1250,14 +1250,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   background: #000 !important;
   border-color: #000 !important;
 }
-.ant-spin .ant-spin-dot {
-  width: 1.5em;
-  height: 1.5em;
-}
 .ant-spin-dot-item {
   background-color: #000000 !important;
-  width: 0.9em !important;
+  width: 9px !important;
-  height: 0.9em !important;
+  height: 9px !important;
 }
 .ant-spin {
   color: #000;

src/assets/style/style.less

@@ -1378,14 +1378,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	}
 }
 //loding样式
-.ant-spin .ant-spin-dot{
-	width: 1.5em;
-	height: 1.5em;
-}
 .ant-spin-dot-item{
     background-color: #000000 !important;
-	width: .9em !important;
+	width: 9px !important;
-    height: .9em !important;
+    height: 9px !important;
 }
 .ant-spin{
 	color: #000;

src/component/HomePage/layout.vue

@@ -34,8 +34,8 @@
 					</div>
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content"  :style="{'background-image':`url(${item.imgUrl})`,'transform':`scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}">
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
-						<!-- <img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg>  -->
+						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -736,7 +736,6 @@ export default defineComponent({
 		setmoodb(item:any){
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
-			this.styleObj.class = this.moodbClassName
 			if(this.content){
 				for (item of (this.content as any)) {
 					item.classList.remove('active')
@@ -773,7 +772,7 @@ export default defineComponent({
 		initDomStyle(){
 			nextTick(()=>{
 				this.content.forEach((item:any,index:any) => {
-					if(this.styleObj.domStyle[index]?.left){
+					if(this.styleObj.domStyle[index]){
 						item.classList.add('active')
 						this.initStyle(item,this.styleObj.domStyle[index])
 					}
@@ -795,7 +794,7 @@ export default defineComponent({
 			})
 		},
 		initStyle(dom:any,style:any){
-			if(!style || !dom)return
+			if(!style)return
 			for (const [property, value] of Object.entries(style)) {
 				
 				dom.style.setProperty(property, value);
@@ -807,7 +806,7 @@ export default defineComponent({
 				this.styleObj.domStyle.push(this.setStyle(item.style))
 				this.domObj.dom.forEach((domName:any,index:any) => {
 					let style = this.domObj.domStyle[index]
-					let dom = item.querySelector(domName) || item
+					let dom = item.querySelector(domName)
 					this.styleObj[style].push(this.setStyle(dom.style))
 				})
 			});
@@ -841,6 +840,7 @@ export default defineComponent({
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 					Https.axiosPost(Https.httpUrls.elementUpload,param,config)
 					.then((rv: any) => {
+							// console.log(rv);
 							rv.imgUrl = rv.url
 							this.layout = false
 							this.loadingShow = false
@@ -1062,12 +1062,27 @@ export default defineComponent({
 				// 	height: 100%;
 				// }
 				overflow: hidden;
-				background-repeat: no-repeat;
-				background-position: center;
-				background-size: cover;
 				&.active{
 					position: absolute;
 				}
+				img{
+					// object-fit: cover;
+					// width: 100%;
+					// height: 100%;
+					pointer-events: none;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%) scale(1);
+				}
+				::selection {
+						// background: rgba(0,0,0,0);
+						// background: yellow;
+					}
+			
 			}
 		}
 		.wh1{

src/component/HomePage/renew.vue

@@ -19,8 +19,7 @@
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 		  <!-- <i class="fi fi-rr-cross-small"></i> -->
 		  <svg
-          width="100%"
+			width="100%" height="100%"
-          height="100%"
 			viewBox="0 0 46 46"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
@@ -50,32 +49,20 @@
 	  <div class="renewContent">
 		<div class="left">
 		  <div class="video">
-          <video
+			  <video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
-            autoplay
-            loop
-            muted
-            playsinline
-            src="@/assets/images/icon/paymentVideo.mp4"
-          ></video>
 			  <div class="mask"></div>
 		  </div>
-        <div class="title">{{ $t('Renew.Strengths') }}</div>
+		  <div class="title">{{ $t("Renew.Strengths") }}</div>
 		  <div class="content">
 			<div class="benefitsItem">
 			  <div class="describe">
 				<div class="icon">
-                <img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
+				  <img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
 				</div>
 				<div class="text">
-                <p class="title">
+				  <p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
-                  {{ $t('Renew.StrengthsTitle1') }}
-                  <br />
-                  {{ $t('Renew.StrengthsTitle1_1') }}
-                </p>
 				  <p class="info">
-                  {{ $t('Renew.StrengthsInfo1') }}
+					  {{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
-                  <br />
-                  {{ $t('Renew.StrengthsInfo1_1') }}
 				  </p>
 				</div>
 			  </div>
@@ -83,18 +70,12 @@
 			<div class="benefitsItem">
 			  <div class="describe">
 				<div class="icon">
-                <img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
+				  <img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
 				</div>
 				<div class="text">
-                <p class="title">
+				  <p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
-                  {{ $t('Renew.StrengthsTitle2') }}
-                  <br />
-                  {{ $t('Renew.StrengthsTitle2_1') }}
-                </p>
 				  <p class="info">
-                  {{ $t('Renew.StrengthsInfo2') }}
+					  {{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
-                  <br />
-                  {{ $t('Renew.StrengthsInfo2_1') }}
 				  </p>
 				</div>
 			  </div>
@@ -102,21 +83,13 @@
 			<div class="benefitsItem">
 			  <div class="describe">
 				<div class="icon">
-                <img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
+				  <img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
 				</div>
 				<div class="text">
 				  <p class="title"></p>
-                <p class="title">
+				  <p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
-                  {{ $t('Renew.StrengthsTitle3') }}
-                  <br />
-                  {{ $t('Renew.StrengthsTitle3_1') }}
-                </p>
 				  <p class="info">
-                  {{ $t('Renew.StrengthsInfo3') }}
+					  {{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
-                  <br />
-                  {{ $t('Renew.StrengthsInfo3_1') }}
-                  <br />
-                  {{ $t('Renew.StrengthsInfo3_2') }}
 				  </p>
 				</div>
 			  </div>
@@ -124,18 +97,12 @@
 			<div class="benefitsItem">
 			  <div class="describe">
 				<div class="icon">
-                <img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
+				  <img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
 				</div>
 				<div class="text">
-                <p class="title">
+				  <p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
-                  {{ $t('Renew.StrengthsTitle4') }}
-                  <br />
-                  {{ $t('Renew.StrengthsTitle4_1') }}
-                </p>
 				  <p class="info">
-                  {{ $t('Renew.StrengthsInfo4') }}
+					  {{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
-                  <br />
-                  {{ $t('Renew.StrengthsInfo4_1') }}
 				  </p>
 				</div>
 			  </div>
@@ -144,7 +111,7 @@
 		</div>
 		<div class="right">
 		  <div class="title">
-          {{ $t('Renew.title') }}
+			{{ $t("Renew.title") }}
 		  </div>
 		  <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
 		  <div class="content">
@@ -152,31 +119,36 @@
 			  class="productItem"
 			  :class="{
 				active: item.price == current.price,
-              sellWell: item.sellWell
+				sellWell: item.sellWell,
 			  }"
 			  v-for="item in personage"
 			  :key="item.price"
 			  @click="setPromotionData(item)"
 			>
-            <div class="popular" v-show="item.sellWell">
+			  <div class="popular" v-show="item.sellWell">{{ $t("Renew.MOSTPOPULAR") }}</div>
-              {{ $t('Renew.MOSTPOPULAR') }}
-            </div>
 			  <div class="priceBox">
 				<div class="left">
 				  <p class="productType">1 {{ item.type.label }}</p>
-                <p class="price">HK $ {{ item.price }}</p>
+				  <p class="price">${{ item.price }}</p>
 				</div>
 				<div class="right">
 				  <div class="promotion">
-                  <div class="succeed" v-show="item.promotionData.error == 'true'">
+					<div
+					  class="succeed"
+					  v-show="item.promotionData.error == 'true'"
+					>
 					  {{ item.promotionData.code }}
-                    <i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
+					  <i
+						class="fi fi-sr-times-hexagon"
+						@click="clearPromotionCode"
+					  ></i>
 					</div>
 					<div
 					  class="input"
 					  @click.stop
 					  v-show="
-                      !item.promotionData.error || item.promotionData.error == 'false'
+						!item.promotionData.error ||
+						item.promotionData.error == 'false'
 					  "
 					>
 					  <input
@@ -184,11 +156,14 @@
 						:placeholder="$t('Renew.promotionCode')"
 						v-model="item.promotionData.code"
 					  />
-                    <div class="apply-btn" @click="examine(item)">
+					  <div style="cursor: pointer; background-color: #000; font-size: 1.2rem; color: #fff; padding: 0 .5rem;" @click="examine(item)">
-                      {{ $t('Renew.use') }}
+						{{ $t("Renew.use") }}
 					  </div>
 					</div>
-                  <div class="error" v-show="item.promotionData.error == 'false'">
+					<div
+					  class="error"
+					  v-show="item.promotionData.error == 'false'"
+					>
 					  {{ item.promotionData.str }}
 					</div>
 				  </div>
@@ -206,7 +181,7 @@
 		  <div class="payment">
 			<div class="allocation">
 			  <div class="selectType">
-              <div class="text">{{ $t('Renew.Payment') }}:</div>
+				<div class="text">{{ $t("Renew.Payment") }}:</div>
 				<label>
 				  <input
 					name="payment"
@@ -215,7 +190,7 @@
 					v-model="PaymentType"
 					@change="setPaymentType('CreditCard')"
 				  />
-                {{ $t('Renew.CreditCard') }}
+				  {{ $t("Renew.CreditCard") }}
 				</label>
 				<label>
 				  <input
@@ -225,47 +200,43 @@
 					v-model="PaymentType"
 					@change="setPaymentType('Alipay')"
 				  />
-                {{ $t('Renew.Alipay') }}
+				  {{ $t("Renew.Alipay") }}
 				</label>
 			  </div>
 			</div>
 			<div class="gallery_btn gallery_btn_radius" @click="payment">
-            {{ $t('upgradePlan.Continue') }}
+				  {{ $t("upgradePlan.Continue") }}
 			</div>
 			<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
 			  <label>
 				<!-- <input type="checkbox" v-model="clause" /> -->
-              <span class="generalModelDescription">
+				<span class="generalModelDescription"
-                {{ $t('upgradePlan.policy') }}
+				  >{{ $t("upgradePlan.policy")}}
 				  <a
 					href="https://code-create.com.hk/aida-terms-and-conditions/"
-                  target="_blank"
+					target="_blank">
-                >
+					{{ $t("upgradePlan.policy1") }}
-                  {{ $t('upgradePlan.policy1') }}
 				  </a>
 				  &
 				  <a
 					href="https://code-create.com.hk/aida-subscription-agreement/"
-                  target="_blank"
+					target="_blank">
-                >
+					{{ $t("upgradePlan.policy2") }}
-                  {{ $t('upgradePlan.policy2') }}
 				  </a>
 				  <!-- . * -->
-              </span>
+				  </span
+				>
 			  </label>
 			  <label class="secure">
-              <span>
+				  <span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
-                <i class="fi fi-rr-shield-check"></i>
-                Pay safe & secure
-              </span>
 			  </label>
 			  <label class="payIcon">
-              <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
+				  <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
-              <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
+				  <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
-              <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
+				  <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
-              <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
+				  <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
-              <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
+				  <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
-              <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
+				  <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
 			  </label>
 			</div>
 			<!-- <div class="paySecure">
@@ -279,104 +250,101 @@
 		<a-spin size="large" />
 	  </div>
 	  <div class="mark_loading" v-show="isShowMark" state="true">
-      <div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
+		<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
-      <div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
+		<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
 		<div class="mark_loading_title_box">
 		  <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
-          {{ $t('upgradePlan.Back') }}
+			{{ $t("upgradePlan.Back") }}
 		  </div>
 		  <div class="mark_loading_btn" @click="completePayment">OK</div>
 		</div>
 	  </div>
 	</a-modal>
-  <payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
+	<payMethod
+	  ref="payMethod"
+	  @completePayment="cancelDsign"
+	  type="renew"
+	></payMethod>
   </template>
   
   <script lang="ts">
-import {
+  import { defineComponent, computed, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  defineComponent,
+  import { message } from "ant-design-vue";
-  computed,
+  import payMethod from "@/component/Pay/payMethod.vue";
-  reactive,
+  import { useStore } from "vuex";
-  toRefs,
+  import { useI18n } from "vue-i18n";
-  onMounted,
+  import { Https } from "@/tool/https";
-  onBeforeUnmount
+  import md5 from "md5";
-} from 'vue'
-import { message } from 'ant-design-vue'
-import payMethod from '@/component/Pay/payMethod.vue'
-import { useStore } from 'vuex'
-import { useI18n } from 'vue-i18n'
-import { Https } from '@/tool/https'
-import md5 from 'md5'
   export default defineComponent({
 	components: {
-    payMethod
+	  payMethod,
 	},
 	setup() {
-    const store = useStore()
+	  const store = useStore();
-    const { t } = useI18n()
+	  const { t } = useI18n();
 	  let renew = reactive({
 		renewModel: false,
 		renewModelMask: true,
-      pageWidth: '50%'
+		pageWidth: "50%",
-    })
+	  });
 	  let payMethodData = reactive({
 		clause: false,
 		labelDisclaimer: null as any,
 		newWindow: null as any,
 		isShowMark: false,
-      isShowMark_: false
+		isShowMark_: false,
-    })
+	  });
 	  let renewData = reactive({
 		personage: [
 		  {
-          price: '100',
+			price: "100",
 			sellWell: true,
 			activity: false, //活动打折
 			type: {
-            value: 'EcoMonth',
+			  value: "EcoMonth",
-            label: computed(() => t('Renew.Monthly'))
+			  label: computed(()=>t("Renew.Monthly")),
 			},
 		  //   PaymentType: "CreditCard",
 			promotionData: {
-            code: '',
+			  code: "",
-            error: '',
+			  error: "",
-            str: '',
+			  str: "",
-            price: ''
+			  price: "",
-          }
+			},
 		  },
 		  {
-          price: '500',
+			price: "500",
 			sellWell: false,
 			activity: false, //活动打折
 			type: {
-            value: 'Month',
+			  value: "Month",
-            label: computed(() => t('Renew.Monthly'))
+			  label: computed(()=>t("Renew.Monthly")),
 			},
 		  //   PaymentType: "CreditCard",
 			promotionData: {
-            code: '',
+			  code: "",
-            error: '',
+			  error: "",
-            str: '',
+			  str: "",
-            price: ''
+			  price: "",
-          }
+			},
 		  },
 		  {
-          price: '5,000',
+			price: "5,000",
 			sellWell: false,
 			activity: false, //活动打折
-          typeValue: 'year',
+			typeValue: "year",
 			type: {
-            value: 'Year',
+			  value: "Year",
-            label: computed(() => t('Renew.Yearly'))
+			  label: computed(()=>t("Renew.Yearly")),
 			},
 		  //   PaymentType: "CreditCard",
 			promotionData: {
-            code: '',
+			  code: "",
-            error: '',
+			  error: "",
-            str: '',
+			  str: "",
-            price: ''
+			  price: "",
-          }
+			},
-        }
+		  },
 		],
 		// personage:computed(()=>{
 		//     return {
@@ -397,55 +365,55 @@ export default defineComponent({
 		// }),
 		firm: computed(() => {
 		  return {
-          title: 'Education Edition',
+			title: "Education Edition",
 			price: {
-            year: '500'
+			  year: "500",
 			},
 			unit: {
-            year: 'HKD / Year'
+			  year: "HKD / Year",
 			},
-          type: 'year',
+			type: "year",
 			autoRenewal: {
-            text: t('Renew.automatically'),
+			  text: t("Renew.automatically"),
-            value: true
+			  value: true,
 			},
-          typeList: ['year'],
+			typeList: ["year"],
-          info: 'Customised plan'
+			info: "Customised plan",
-        }
+		  };
 		}),
 		education: computed(() => {
 		  return {
-          title: 'Enterprise Edition',
+			title: "Enterprise Edition",
 			price: {
-            year: '500'
+			  year: "500",
 			},
 			unit: {
-            year: 'HKD / Year'
+			  year: "HKD / Year",
 			},
-          type: 'year',
+			type: "year",
 			autoRenewal: {
-            text: t('Renew.automatically'),
+			  text: t("Renew.automatically"),
-            value: true
+			  value: true,
 			},
-          typeList: ['year'],
+			typeList: ["year"],
-          info: 'Customised plan'
+			info: "Customised plan",
-        }
+		  };
 		}),
 		current: {} as any,
 		payMethod: null as any,
-      PaymentType: 'CreditCard'
+		PaymentType: "CreditCard",
-    })
+	  });
 	  const init = () => {
-      renew.renewModel = true
+		renew.renewModel = true;
-      renewData.current = renewData.personage[1]
+		renewData.current = renewData.personage[1];
-    }
+	  };
 	  const cancelDsign = () => {
-      renew.renewModel = false
+		renew.renewModel = false;
 		store.dispatch('getUserDetail')
-    }
+	  };
 	  const setPaymentType = (str: any) => {
-      renewData.PaymentType = str
+		renewData.PaymentType = str;
-    }
+	  };
 	  const payment = () => {
 	  //   if (!payMethodData.clause) {
 	  //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
@@ -457,92 +425,104 @@ export default defineComponent({
 	  //     }
 	  //     return;
 	  //   }
-      if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
+		if (!renewData.PaymentType)
-      let url = window.location.origin + '/paySucceed'
+		  return message.info(t("Renew.PleaseSelectPayment"));
+		let url = window.location.origin + "/paySucceed";
 		let data = {
-        autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
+		  autoRenewal: renewData.PaymentType != "Alipay", //false为不自动续费
-        productName: 'Subscription',
+		  productName: "Subscription",
 		  quantity: 1,
 		  returnUrl: url,
 		  subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
-        wallet: 'ALIPAYHK',
+		  wallet: "ALIPAYHK",
-        promotionCode: renewData.current.promotionData.code
+		  promotionCode: renewData.current.promotionData.code,
-      }
+		};
-      let httpsUrl = Https.httpUrls.payStripe
+		let httpsUrl = Https.httpUrls.payStripe;
-      payMethodData.isShowMark_ = true
+		payMethodData.isShowMark_ = true;
 		Https.axiosPost(httpsUrl, data)
 		  .then((rv: any) => {
-          var width = 800
+			var width = 800;
-          var height = 600
+			var height = 600;
-          var left = (screen.width - width) / 2
+			var left = (screen.width - width) / 2;
-          var top = (screen.height - height) / 2
+			var top = (screen.height - height) / 2;
 			payMethodData.newWindow = window.open(
-            '',
+			  "",
-            '_blank',
+			  "_blank",
-            'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
+			  "width=" +
-          )
+				width +
-          let herf = rv
+				", height=" +
+				height +
+				", left=" +
+				left +
+				", top=" +
+				top
+			);
+			let herf = rv;
 			if (payMethodData.newWindow) {
-            payMethodData.newWindow.location.href = herf
+			  payMethodData.newWindow.location.href = herf;
 			} else {
 			  // window.open(herf, '_blank');
-            window.location.href = herf
+			  window.location.href = herf;
 			}
-          payMethodData.newWindow = null
+			payMethodData.newWindow = null;
-          payMethodData.isShowMark = true
+			payMethodData.isShowMark = true;
-          payMethodData.isShowMark_ = false
+			payMethodData.isShowMark_ = false;
-        })
-        .catch(res => {
-          payMethodData.isShowMark_ = false
 		  })
+		  .catch((res) => {
+			payMethodData.isShowMark_ = false;
+		  });
   
 		// renewData.payMethod.init(data)
-    }
+	  };
 	  const setPaidBack = () => {
-      payMethod.payMethodModel = false
+		payMethod.payMethodModel = false;
-      payMethodData.isShowMark = false
+		payMethodData.isShowMark = false;
-      payMethodData.clause = false
+		payMethodData.clause = false;
-    }
+	  };
 	  const completePayment = () => {
-      renew.renewModel = false
+		renew.renewModel = false;
-      setPaidBack()
+		setPaidBack();
-    }
+	  };
 	  const examine = (item: any) => {
 		// renewData.promotionData.error
-      let price = item?.price
+		let price = item?.price;
-      const normalNumber = Number(price.replace(/,/g, ''))
+		const normalNumber = Number(price.replace(/,/g, ""));
 		if (!item.promotionData.code) {
-        return
+		  return;
 		}
 		let data = {
 		  promotionCode: item.promotionData.code,
-        price: normalNumber
+		  price: normalNumber,
-      }
+		};
-      Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
+		Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then(
+		  (rv: any) => {
 			if (rv) {
 			  renewData.personage.forEach((personageItem: any) => {
 				if (personageItem.price == item.price) {
-              if (rv.status == 'valid') {
+				  if (rv.status == "valid") {
-                item.promotionData.error = 'true'
+					item.promotionData.error = "true";
-                item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
+					item.promotionData.price = Number(
+					  rv.discountedPrice
+					).toLocaleString();
 				  } else {
-                item.promotionData.error = 'false'
+					item.promotionData.error = "false";
-                item.promotionData.str = rv.message
+					item.promotionData.str = rv.message;
 				  }
 				}
-          })
+			  });
 			} else {
 			}
-      })
 		  }
+		);
+	  };
 	  const clearPromotionCode = () => {
-      renewData.current.promotionData.error = ''
+		renewData.current.promotionData.error = "";
-      renewData.current.promotionData.code = ''
+		renewData.current.promotionData.code = "";
-      renewData.current.promotionData.price = ''
+		renewData.current.promotionData.price = "";
-    }
+	  };
 	  const setPromotionData = (item: any) => {
-      renewData.current = item
+		renewData.current = item;
-    }
+	  };
 	  return {
 		store,
 		...toRefs(renew),
@@ -556,18 +536,18 @@ export default defineComponent({
 		completePayment,
 		examine,
 		clearPromotionCode,
-      setPromotionData
+		setPromotionData,
-    }
+	  };
 	},
 	data() {
-    return {}
+	  return {};
 	},
 	methods: {
 	  turnToWindow(url: any) {
-      window.open(url)
+		window.open(url);
-    }
+	  },
-  }
+	},
-})
+  });
   </script>
   <style lang="less" scoped>
   .renew {
@@ -627,7 +607,7 @@ export default defineComponent({
 			  height: 100%;
 			  left: 0;
 			  top: 0;
-          background: rgba(0, 0, 0, 0.5);
+			  background: rgba(0,0,0,.5);
 		  }
 		}
 	   
@@ -699,11 +679,11 @@ export default defineComponent({
 			margin-bottom: 1rem;
 			border-radius: 1rem;
 			overflow: hidden;
-          border: 1.5px solid #e7ebff;
+			border: 1.5px solid #E7EBFF;
 			cursor: pointer;
   
 			> .popular {
-            background: #1b223c;
+			  background: #1B223C;
 			  font-weight: 600;
 			  display: flex;
 			  justify-content: center;
@@ -765,10 +745,9 @@ export default defineComponent({
 					display: flex;
 					align-items: center;
 					border-radius: 2rem;
-                  border: 1.5px solid rgb(216, 218, 220);
+					border: 2px solid #000;
 					overflow: hidden;
 					padding: 0 1rem;
-                  background-color: #fff;
 					input {
 					  border: none;
 					  height: 3rem;
@@ -776,18 +755,6 @@ export default defineComponent({
 					  font-size: 1.2rem;
 					  background: rgba(0, 0, 0, 0);
 					}
-                  .apply-btn {
-                    cursor: pointer;
-                    background-color: rgb(27, 34, 60);
-                    font-size: 0.8rem;
-                    color: #fff;
-                    width: 3.3rem;
-                    height: 1.4rem;
-                    line-height: 1.4rem;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                  }
 				  }
 				  > .error {
 					color: red;
@@ -801,11 +768,11 @@ export default defineComponent({
 				}
 			  }
 			}
-          &.active,
+			&.active,&:hover {
-          &:hover {
 				// 40% opacity
 			  background: rgba(231, 235, 255, 0.4);
 			  // border: 2px solid #0ea982;
+			 
 			}
 			&.sellWell {
 			  // border: 2px solid #0ea982;
@@ -843,14 +810,10 @@ export default defineComponent({
 		  > .gallery_btn {
 			width: 100%;
 			margin: 2rem 0;
-          margin-bottom: 0.5rem;
+			margin-bottom: .5rem;
 			margin-top: 1rem;
-          background: #1b223c;
+			background: #1B223C;
 			color: #fff;
-          // width: 41.8rem;
-          height: 4rem;
-          box-sizing: border-box;
-          line-height: 4rem;
 		  }
 		  > .payMethod_payAffirm_clause {
 			  text-align: center;
@@ -876,8 +839,8 @@ export default defineComponent({
 			  border: 1px solid #ededed;
 			  background: #f1fbf9;
 			  color: #1cb36c;
-            padding: 0.4rem 0.8rem;
+			  padding: .4rem .8rem;
-            border-radius: 0.5rem;
+			  border-radius: .5rem;
 			  margin-top: 4rem;
 			  > span{
 				  display: flex;
@@ -885,14 +848,14 @@ export default defineComponent({
 			  }
 			  i{
 				  display: flex;
-              margin-right: 0.5rem;
+				  margin-right: .5rem;
 			  }
 			}
 			> .payIcon{
 			  height: 2rem;
 			  margin-top: 1rem;
 			  img{
-              margin: 0 0.3rem;
+				  margin: 0 .3rem;
 				  height: 100%;
 			  }
 			}
@@ -990,3 +953,4 @@ export default defineComponent({
 	}
   }
   </style>
+  

src/component/LoginPage/login/personal.vue

@@ -553,14 +553,13 @@ export default defineComponent({
 				loginType: "EMAIL",
 				userId: this.userId,
 			};
-			this.store.commit('set_loading', true)
+			this.$emit('update:isMask',true)
 			Https.axiosPost(Https.httpUrls.accountLogin, data)
 				.then((rv: any) => {
 				this.setSuccessLogin(rv);
-					this.store.commit('set_loading', false)
 				})
 				.catch((res) => {
-					this.store.commit('set_loading', false)
+					this.$emit('update:isMask',false)
 				});
 		},1000)
     },

src/component/WorksPage/newScaleImage.vue

@@ -458,7 +458,6 @@ export default defineComponent({
 					message.info(t('newScaleImage.jsContent2'))
 					return
 				}
-				store.state.Workspace.cachedRoutes = [];
 				let id = await getWorks(imgData.scaleImageData.id)
 				await router.push(`/home/history/${id}`)
 				store.commit('setChooseIsDesign',false)

src/component/home/design/collection/MoodboardUpload.vue

@@ -132,8 +132,8 @@
 				</div>
 				<div class="modal_img_max">
 					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
-					<!-- <div class="modal_img" id="modal_img" :class="{active:flex_direction}"> -->
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
-						<div v-for="item,index in layoutList" :class="[moodb_className[index]]" :style="{'background-image':`url(${item.imgUrl})`}" class="modal_imgItem">
+							<img :src="item.imgUrl" v-modelImg>
 						</div>
 					</div>
 					<div v-else class="modal_img">
@@ -244,6 +244,30 @@ export default defineComponent({
         this.token = getCookie("token") || "";
         this.uploadUrl = getUploadUrl();
     },
+	directives:{
+		modelImg:{
+			mounted(el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			},
+			updated (el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			}
+		}
+	},
     methods: {
         open(num: Number) {
             this.openClick = num;
@@ -421,7 +445,7 @@ export default defineComponent({
 					}
 				}
 				this.edieShow = true
-				if(this.moodb_[arr.length-1].length == 1){
+				if(this.moodb_[arr.length-1].length == 2){
 					this.moodb_className = this.moodb_[arr.length-1][0]
 				}else{
 					this.moodb_className = this.moodb_[arr.length-1][random]
@@ -604,7 +628,6 @@ export default defineComponent({
 				height: calc(5rem*1.2);
 				overflow-x: hidden;
 				display: flex;
-				
 				&.modal_img::-webkit-scrollbar {
 					display: none;
 				}
@@ -683,9 +706,15 @@ export default defineComponent({
 					position: relative;
 					overflow: hidden;
 					text-align: center;
-					background-repeat: no-repeat;
+					img{
-					background-position: center;
+						position: absolute;
-					background-size: cover;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						// float: left;
+						// user-select:none;
+						// -webkit-user-drag: none;
+					}
 				}
 				.wh1{
 					width: 23%;

src/component/home/design/editDesignType/index.vue

@@ -242,16 +242,7 @@
               </div>
             </div>
             <div class="prompt-input-container" v-show="!showMotion">
-              <div class="title">
+              <div class="title">{{ $t('ProductImg.Prompt') }}</div>
-				<span>{{ $t('ProductImg.Prompt') }}</span>
-				<SvgIcon
-					class="cursor-icon"
-					@click="handleNavigateHelp"
-					name="CHelpFlip"
-					size="18"
-					color="#000"
-				/>
-			  </div>
               <promptInput :content="prompt" ref="promptInputRef" />
             </div>
             <div class="transferPose" v-show="showMotion">
@@ -389,7 +380,7 @@
       <a-spin size="large" />
     </div>
     <template>
-      <Prompt v-if="scaleImageList[scaleImageIndex]?.resultType === 'ToProductImage'" v-model:showModal="showPromptAssist" />
+      <Prompt v-if="scaleImageList[scaleImageIndex]?.resultType === 'ToProductImage'" v-model:showModal="showPromptAssist" isDesignPage />
       <PromptEditProduct v-if="scaleImageList[scaleImageIndex]?.resultType === 'Relight'" v-model:showModal="showPromptAssist" />
     </template>
     <Product
@@ -459,7 +450,7 @@ export default defineComponent({
     let userDetail: any = computed(() => {
       return store.state.UserHabit.userDetail
     })
-    let { t, locale } = useI18n()
+    let { t } = useI18n()
     const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
     const videoType = ref(2)
     const showMotion = computed(() => videoType.value === 1)
@@ -608,13 +599,13 @@ export default defineComponent({
     })
     const showPromptAssist = ref(false)
     const handleClickAssistBtn = () => {
-    //   const { httpType } = store.state.Workspace.probjects
+      const { httpType } = store.state.Workspace.probjects
-    //   const isSingleDesign = httpType === 'SINGLE_DESIGN'
+      const isSingleDesign = httpType === 'SINGLE_DESIGN'
-    //   if (!isSingleDesign) {
+      if (!isSingleDesign) {
-    //     const promptText = t('ProductImg.Series')
+        const promptText = t('ProductImg.Series')
-    //     productimg.productimgSearchName = promptText
+        productimg.productimgSearchName = promptText
-    //     return
+        return
-    //   }
+      }
       showPromptAssist.value = true
     }
 
@@ -1319,13 +1310,7 @@ export default defineComponent({
         return videoType.value === 3 ? false : true
       }
     })
-	const handleNavigateHelp = () => {
+
-      const url =
-        locale === 'CHINESE_SIMPLIFIED'
-          ? 'https://aida-user-manual-chinese.super.site/2b08f755cedd80a985cffdf2af80c538'
-          : 'https://aida-user-manual.super.site/advanced-tool/animated-product-image/to-product-video-prompt-assist '
-      window.open(url,'_blank')
-    }
     onBeforeUnmount(() => {
       clearInterval(prductimgTime)
       clearInterval(remPrductimgTime)
@@ -1389,8 +1374,7 @@ export default defineComponent({
       handlePlayNewVideo,
       isNewVideoPlaying,
       showDropdown,
-      inputPlaceholder,
+      inputPlaceholder
-	  handleNavigateHelp
     }
   },
   data() {
@@ -1803,14 +1787,10 @@ export default defineComponent({
             box-sizing: border-box;
           }
           .title {
-			display: flex;
+            font-weight: 500;
-			align-items: center;
+            color: #000;
-			column-gap: 1rem;
+            font-size: 1.7rem;
-			.cursor-icon {
+            margin-bottom: 1.4rem;
-				display: flex;
-				width: auto;
-				cursor: pointer;
-			}
           }
         }
         .prompt-container {

src/component/home/index.vue

@@ -55,16 +55,13 @@ export default defineComponent({
 		const data = reactive({
 			openType:'', 
 			componentKey:null,
-			isShowMark:true,
+			isShowMark:false,
 			routeQuery:{} as any,
 			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
 			chatData:null as any,
 			dataLoad:true as any,
 			cachedRoutes:computed(()=>store.state.Workspace.cachedRoutes),//
 		})
-		onMounted(()=>{
-			data.isShowMark = false
-		})
 		let settingGetHistory:any = inject('settingGetHistory')
 		const setIsShowMark = (boolean:boolean)=>{
 			data.isShowMark = boolean

src/component/home/tools/toProduct/Prompt.vue

@@ -121,7 +121,7 @@ const promptList = computed(() => {
     return [t('ProductImg.UploadWithoutModel'), t('ProductImg.UploadWithModel')]
   } else {
     // 如果是从design来的
-    if (props.isDesignPage) {
+    if (isSingleDesign) {
       // SINGLE_DESIGN: 两个提示词
       // 根据年龄和性别选择对应的提示词
       let firstPrompt: string // 不带模特的提示词
@@ -255,8 +255,8 @@ const exampleList = computed(() => {
     }
   } else {
     const { ageGroup, httpType, sex } = store.state.Workspace.probjects
-    // const isSingleDesign = httpType === 'SINGLE_DESIGN'
+    const isSingleDesign = httpType === 'SINGLE_DESIGN'
-    // if (!isSingleDesign) return {}
+    if (!isSingleDesign) return {}
     const isAdult = ageGroup === 'Adult'
     const isFemale = sex === 'Female'
     if (isAdult) {

src/component/home/tools/toProduct/index.vue

@@ -1101,13 +1101,13 @@ export default defineComponent({
 
     const showPromptAssist = ref(false)
     const handleClickAssistBtn = () => {
-    //   const { httpType } = store.state.Workspace.probjects
+      const { httpType } = store.state.Workspace.probjects
-    //   const isSingleDesign = httpType === 'SINGLE_DESIGN'
+      const isSingleDesign = httpType === 'SINGLE_DESIGN'
-    //   if (props.isDesignPage && !isSingleDesign) {
+      if (props.isDesignPage && !isSingleDesign) {
-    //     const promptText = t('ProductImg.Series')
+        const promptText = t('ProductImg.Series')
-    //     productImgData.searchName[props.productimgMenu.value] = promptText
+        productImgData.searchName[props.productimgMenu.value] = promptText
-    //     return
+        return
-    //   }
+      }
       showPromptAssist.value = true
     }
 

src/component/mainPage/signUp/index.vue

@@ -51,7 +51,7 @@
             <ul
               class="product_detail"
               :class="[
-                { academic: item.type == 'academic' },
+                { academic: item.type == 'academic' && !isSelectSuccessively },
                 { chinese: isSelectSuccessively }
               ]"
             >
@@ -106,12 +106,12 @@ export default defineComponent({
         Yearly: '年度',
         monthly: [
           {
-            title: '使用版',
+            title: '免费版',
             img: CChargeIcon,
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '自注册之日起 5 天内 · 50 个积分',
+            detail: '5天·50积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -185,12 +185,12 @@ export default defineComponent({
         ],
         yearl: [
           {
-            title: '试用版',
+            title: '免费版',
             img: CChargeIcon,
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '自注册之日起 5 天内 · 50 个积分',
+            detail: '5天·50积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -250,12 +250,12 @@ export default defineComponent({
         Yearly: 'Yearly',
         monthly: [
           {
-            title: 'Trial',
+            title: 'Free',
             img: CChargeIcon,
             type: 'personal',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days from sign-up · 50 credits',
+            detail: '5 days · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [
@@ -329,12 +329,12 @@ export default defineComponent({
         ],
         yearl: [
           {
-            title: 'Trial',
+            title: 'Free',
             img: CChargeIcon,
-            type: 'personal',
+            type: 'free',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days from sign-up · 50 credits',
+            detail: '5 days · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [

src/lang/en.ts

@@ -959,7 +959,7 @@ export default {
     MOSTPOPULAR: 'MOST POPULAR',
     Monthly: 'Monthly',
     Yearly: 'Yearly',
-    promotionCode: 'Coupon Code',
+    promotionCode: 'Coupon',
     use: 'Apply',
     PromoCodeError:
       'Please check if the promo code is correct or if the date has expired',

src/router/index.ts

@@ -498,7 +498,6 @@ function isTimeRangePassed(timeRange) {
 }
 
 router.beforeEach((to: any, from, next) => {
-	store.commit("set_view_loading", true);
   //系统维护时间
 	const time = '2025-11-21T23:00:00 - 2025-11-22T00:00:00';
 	if (isTimeRangePassed(time) == 'in_progress') {
@@ -541,7 +540,5 @@ router.beforeEach((to: any, from, next) => {
   
   // if(systemUser == 0){//游客用户只能进入这两个页面
 });
-router.afterEach((to, from) => {
+
-	store.commit("set_view_loading", false);
-});
 export default router;

src/store/index.ts

@@ -13,18 +13,10 @@ export interface RootState{
 
 export default createStore<RootState>({
   state: {
-	loading: false,
-	view_loading: false,
   },
   getters: {
   },
   mutations: {
-	set_loading(state, v){
-		state.loading = v;
-	},
-	set_view_loading(state, v){
-		state.view_loading = v;
-	},
   },
   actions: {
   },

src/views/HomeMain.vue

@@ -427,7 +427,7 @@
           <div class="userSystem" v-show="pastDuePage">
             {{ $t('Header.pastDue') }}
           </div>
-          <div class="router" v-if="!loading">
+          <div class="router" v-if="!getLangIsShowMark">
             <home
               ref="home"
               @setNewProject="() => (leftShow = true)"
@@ -442,10 +442,10 @@
     <UpgradePlan ref="UpgradePlan"></UpgradePlan>
     <TaskPage ref="TaskPage"></TaskPage>
 
-    <!-- <div class="mark_loading" v-show="loading">
+    <div class="mark_loading" v-show="getLangIsShowMark">
       <a-spin size="large" />
-    </div> -->
+    </div>
-    <!-- <RobotAssist v-if="!loading"></RobotAssist> -->
+    <!-- <RobotAssist v-if="!getLangIsShowMark"></RobotAssist> -->
     <scaleVideo ref="scaleVideo"></scaleVideo>
     <!-- 进行续订 -->
     <renew ref="renew"></renew>
@@ -656,7 +656,7 @@ export default defineComponent({
     })
 
     let activeCredits = ref(false)
-    let loading = computed(() => (store.state.loading))
+    let getLangIsShowMark = ref(true)
     let messageNum = computed(() => {
       return store.state.UserHabit.messageSystem.messageNum
     })
@@ -1070,7 +1070,7 @@ export default defineComponent({
       isMurmur,
       credits,
       activeCredits,
-      loading,
+      getLangIsShowMark,
       messageNum,
       messageType,
       ...toRefs(stateList),
@@ -1128,11 +1128,11 @@ export default defineComponent({
       this.store
         .dispatch('getLangType')
         .then(() => {
-          this.store.commit('set_loading', false)
+          this.getLangIsShowMark = false
           resolve()
         })
         .catch(() => {
-          this.store.commit('set_loading', false)
+          this.getLangIsShowMark = false
           reject()
         })
     })
@@ -1334,7 +1334,7 @@ export default defineComponent({
       })
     },
     setLang(v) {
-      store.commit('set_loading', true)
+      this.getLangIsShowMark = true
       Https.axiosGet(Https.httpUrls.changeUserLanguage, { params: { language: v } })
         .then(rv => {
           if (rv) {
@@ -1351,11 +1351,11 @@ export default defineComponent({
               window.location.reload()
               // window.location.href = '/home';
             }
-            store.commit('set_loading', false)
+            this.getLangIsShowMark = false
           }
         })
         .catch(() => {
-          store.commit('set_loading', false)
+          this.getLangIsShowMark = false
         })
     },
 

src/views/Login.vue

@@ -43,12 +43,15 @@
             <span>{{ t('Login.LogonToAiDA') }}</span>
           </div>
 		  <div class="info" v-show="!loginType">{{ t('Login.Infomation') }}</div>
-          <personal ref="personal" v-if="loginType == 'personal'"></personal>
+          <personal ref="personal" v-if="loginType == 'personal'" v-model:isMask="isMask"></personal>
           <school ref="school" v-if="loginType == 'school'"></school>
           <enterprise ref="enterprise" v-if="loginType == 'enterprise'"></enterprise>
 
         </div>
       </div>
+	  	<div class="mark_loading" v-show="isMask">
+			<a-spin size="large" />
+		</div>
     </div>
   </div>
 </template>
@@ -100,6 +103,7 @@ export default defineComponent({
     
     const loginData = reactive({
       loginType: "",
+      isMask: false,
     });
     const dataDom = reactive({
 		personal: null as any,