diff --git a/components.d.ts b/components.d.ts
index 99c65244..208a14d8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,11 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AImage: typeof import('ant-design-vue/es')['Image']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APopover: typeof import('ant-design-vue/es')['Popover']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/src/component/Administrator/SE/allUser/addAllUser.vue b/src/component/Administrator/SE/allUser/addAllUser.vue
index b95ab9c3..868481d2 100644
--- a/src/component/Administrator/SE/allUser/addAllUser.vue
+++ b/src/component/Administrator/SE/allUser/addAllUser.vue
@@ -1,276 +1,300 @@
 <template>
-	<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
-    <a-modal
-        class="allUserPoeration_modal generalModel"
-        v-model:visible="operationsModal"
-        :footer="null"
-		:get-container="() => $refs.allUserPoerationModal"
-        width="50%"
-		height="55rem"
-        :maskClosable="false"
-        :centered="true"
-        :closable="false"
-		:mask="true"
-        wrapClassName="#app"
-        :keyboard="false"
-    >
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-		<div class="modal_title_text">
-			<div>{{ title }} User</div>
-		</div>
-		<div class="allUserPoeration_center admin_page">
-			<div class="admin_state_item">
-				<span>User Name: <span>*</span></span>
-				<input
-					v-model="userName"
-					placeholder="Please enter user name"
-					type="text"
-					style="width: 250px"
-				/>
-			</div>
-			<div class="admin_state_item">
-				<span>User Email: <span>*</span></span>
-				<input
-					v-model="userEmail"
-					placeholder="Please enter email"
-					type="text"
-					style="width: 250px"
-				/>
-			</div>
-			<div class="admin_state_item">
-				<span>Password: <span>*</span></span>
-				<input
-					@focus="focus"
-					@blur="blur"
-					v-model="password"
-					placeholder="Please enter password"
-					type="password"
-					style="width: 250px"
-				/>
-			</div>
-			<div class="admin_state_item">
-				<span>Maximum Credits:</span>
-				<input
-					v-model="credits"
-					placeholder="Please enter credits"
-					type="text"
-					style="width: 250px"
-				/>
-			</div>
-			
-			
-		</div>
-		<div class="allUserPoeration_btn admin_page">
-			<div class="admin_search_item" @click="cancelDsign">
-				Close
-			</div>
-			<div class="admin_search_item" @click="setOk">
-				OK
-			</div>
-		
-		</div>
-    </a-modal>
-	<div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div>
+  <div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
+  <a-modal
+    class="allUserPoeration_modal generalModel"
+    v-model:visible="operationsModal"
+    :footer="null"
+    :get-container="() => $refs.allUserPoerationModal"
+    width="50%"
+    height="55rem"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="true"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="modal_title_text">
+      <div>{{ title }} User</div>
+    </div>
+    <div class="allUserPoeration_center admin_page">
+      <div class="admin_state_item">
+        <span>User Name: <span>*</span></span>
+        <input
+          v-model="userName"
+          placeholder="Please enter user name"
+          type="text"
+          style="width: 250px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>User Email: <span>*</span></span>
+        <input
+          v-model="userEmail"
+          placeholder="Please enter email"
+          type="text"
+          style="width: 250px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>Password: <span>*</span></span>
+        <input
+          @focus="focus"
+          @blur="blur"
+          v-model="password"
+          placeholder="Please enter password"
+          type="password"
+          style="width: 250px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>Maximum Credits:</span>
+        <input
+          v-model="credits"
+          placeholder="Please enter credits"
+          type="text"
+          style="width: 250px"
+        />
+      </div>
+    </div>
+    <div class="allUserPoeration_btn admin_page">
+      <div class="admin_search_item" @click="cancelDsign">Close</div>
+      <div class="admin_search_item" @click="setOk">OK</div>
+    </div>
+  </a-modal>
+  <div class="mark_loading" v-show="loadingShow">
+    <a-spin size="large" />
+  </div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import {
+  defineComponent,
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  nextTick,
+  toRefs,
+} from "vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { formatTime,isEmail } from "@/tool/util";
-const md5 = require("md5");
+import { formatTime, isEmail } from "@/tool/util";
+import md5 from "md5";
 export default defineComponent({
-    components: {
-    },
-	emits: ['searchHistoryList'],
-    setup(props,{emit}) {
-		let operations = reactive({
-			operationsModal:false,
-			operationsEdit:false,
-			loadingShow:false,
-			title:''
-		})
-		let operationsData = reactive({
-			accountId:-1,
-			userName:'',
-			userEmail:'',
-			password:'',
-			oldPassword:'',
-			credits:'',
-		})
-		let state = ref([
-			{
-				label:'visitor',
-				value:'0',
-			},
-			{
-				label:'yearly',
-				value:'1',
-			},
-			{
-				label:'monthly',
-				value:'2',
-			},
-			{
-				label:'trial',
-				value:'3',
-			},
-        ]);
-		let init = (funStr,data)=>{
-			operations.operationsModal = true
-			operations.operationsEdit = true
-			operations.title = funStr
-			if(funStr == 'Add') operations.operationsEdit = false 
-			if(funStr == 'Edit'){
-				operationsData.accountId=data.id
-				operationsData.userName=data.userName
-				operationsData.userEmail=data.userEmail 
-				operationsData.password=data.userPassword 
-				operationsData.oldPassword=data.userPassword 
-				// operationsData.validStartTime='2024-08-05T00:00:06'
-				// operationsData.validEndTime='2024-08-05T00:00:06'
-				operationsData.credits=data.creditsUsageLimit
-				// operationsData.accountId = data.accountId
-				// operationsData.userName = data.userName
-				// operationsData.userEmail = data.userEmail
-				// operationsData.validStartTime = formatTime(data.validStartTime)
-				// operationsData.validEndTime = formatTime(data.validEndTime)
-			}
-
-		}
-		let focus = (event) =>{
-			if(operationsData.password == operationsData.oldPassword){
-				operationsData.password = ''
-			}
-		}
-		let blur = (event) =>{
-			console.log((operationsData.password == '' && operationsData.oldPassword))
-			if(operationsData.password == '' && operationsData.oldPassword){
-				operationsData.password = operationsData.oldPassword
-			}
-		}
-		let setAddData = ()=>{
-			return {
-				"creditsUsageLimit": operationsData.credits,
-				"userEmail": operationsData.userEmail,
-				"userPassword": md5(operationsData.password + 'abc'),
-				"userName": operationsData.userName,
-			}
-		}
-		let setEditData = ()=>{
-			return {
-				"id": operationsData.accountId,
-				"creditsUsageLimit": operationsData.credits,
-				"userName": operationsData.userName,
-				"userEmail": operationsData.userEmail,
-				"userPassword": (operationsData.password == operationsData.oldPassword)?'':md5(operationsData.password + 'abc'),
-			}
-		}
-		let cancelDsign = ()=>{
-			operationsData.accountId=-1
-			operationsData.userName=''
-			operationsData.userEmail=''
-			operationsData.password=''
-			operationsData.credits=''
-			operations.operationsModal = false
-		}
-		let setOk = ()=>{
-			let data 
-			if(operations.title == 'Add'){
-				data = setAddData()
-				if (!isEmail(data.userEmail)) {
-					message.info("The email format is incorrect");
-					return;
-				}
-				if(!data.userName || !data.userEmail || !data.userPassword || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
-				Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
-				(rv) => {
-					if (rv) {
-						cancelDsign()
-						emit('searchHistoryList')
-					}
-				}
-			);
-			}else{
-				data = setEditData()
-				if (!isEmail(data.userEmail)) {
-					message.info("The email format is incorrect");
-					return;
-				}
-				if(!data.userName || !data.userEmail || !data.creditsUsageLimit)return message.warning('Please check the input box marked with *')
-				Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount,data).then(
-				(rv) => {
-					if (rv) {
-						cancelDsign()
-						emit('searchHistoryList')
-					}
-				}
-			);
-			}
-			
-		}
-        return {
-            ...toRefs(operations),
-            ...toRefs(operationsData),
-			state,
-			cancelDsign,
-			init,
-			focus,
-			blur,
-			setOk,
-        };
-    },
-    data() {
-        return {
-        };
-    },
-    mounted() {},
-    methods: {
-       
-    },
+  components: {},
+  emits: ["searchHistoryList"],
+  setup(props, { emit }) {
+    let operations = reactive({
+      operationsModal: false,
+      operationsEdit: false,
+      loadingShow: false,
+      title: "",
+    });
+    let operationsData = reactive({
+      accountId: -1,
+      userName: "",
+      userEmail: "",
+      password: "",
+      oldPassword: "",
+      credits: "",
+    });
+    let state = ref([
+      {
+        label: "visitor",
+        value: "0",
+      },
+      {
+        label: "yearly",
+        value: "1",
+      },
+      {
+        label: "monthly",
+        value: "2",
+      },
+      {
+        label: "trial",
+        value: "3",
+      },
+    ]);
+    let init = (funStr, data) => {
+      operations.operationsModal = true;
+      operations.operationsEdit = true;
+      operations.title = funStr;
+      if (funStr == "Add") operations.operationsEdit = false;
+      if (funStr == "Edit") {
+        operationsData.accountId = data.id;
+        operationsData.userName = data.userName;
+        operationsData.userEmail = data.userEmail;
+        operationsData.password = data.userPassword;
+        operationsData.oldPassword = data.userPassword;
+        // operationsData.validStartTime='2024-08-05T00:00:06'
+        // operationsData.validEndTime='2024-08-05T00:00:06'
+        operationsData.credits = data.creditsUsageLimit;
+        // operationsData.accountId = data.accountId
+        // operationsData.userName = data.userName
+        // operationsData.userEmail = data.userEmail
+        // operationsData.validStartTime = formatTime(data.validStartTime)
+        // operationsData.validEndTime = formatTime(data.validEndTime)
+      }
+    };
+    let focus = (event) => {
+      if (operationsData.password == operationsData.oldPassword) {
+        operationsData.password = "";
+      }
+    };
+    let blur = (event) => {
+      console.log(operationsData.password == "" && operationsData.oldPassword);
+      if (operationsData.password == "" && operationsData.oldPassword) {
+        operationsData.password = operationsData.oldPassword;
+      }
+    };
+    let setAddData = () => {
+      return {
+        creditsUsageLimit: operationsData.credits,
+        userEmail: operationsData.userEmail,
+        userPassword: md5(operationsData.password + "abc"),
+        userName: operationsData.userName,
+      };
+    };
+    let setEditData = () => {
+      return {
+        id: operationsData.accountId,
+        creditsUsageLimit: operationsData.credits,
+        userName: operationsData.userName,
+        userEmail: operationsData.userEmail,
+        userPassword:
+          operationsData.password == operationsData.oldPassword
+            ? ""
+            : md5(operationsData.password + "abc"),
+      };
+    };
+    let cancelDsign = () => {
+      operationsData.accountId = -1;
+      operationsData.userName = "";
+      operationsData.userEmail = "";
+      operationsData.password = "";
+      operationsData.credits = "";
+      operations.operationsModal = false;
+    };
+    let setOk = () => {
+      let data;
+      if (operations.title == "Add") {
+        data = setAddData();
+        if (!isEmail(data.userEmail)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        if (
+          !data.userName ||
+          !data.userEmail ||
+          !data.userPassword ||
+          !data.creditsUsageLimit
+        )
+          return message.warning("Please check the input box marked with *");
+        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
+          (rv) => {
+            if (rv) {
+              cancelDsign();
+              emit("searchHistoryList");
+            }
+          }
+        );
+      } else {
+        data = setEditData();
+        if (!isEmail(data.userEmail)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        if (!data.userName || !data.userEmail || !data.creditsUsageLimit)
+          return message.warning("Please check the input box marked with *");
+        Https.axiosPost(Https.httpUrls.addOrUpdateSubAccount, data).then(
+          (rv) => {
+            if (rv) {
+              cancelDsign();
+              emit("searchHistoryList");
+            }
+          }
+        );
+      }
+    };
+    return {
+      ...toRefs(operations),
+      ...toRefs(operationsData),
+      state,
+      cancelDsign,
+      init,
+      focus,
+      blur,
+      setOk,
+    };
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
 });
 </script>
 <style lang="less" scoped>
-:deep(.allUserPoeration_modal){
-	.ant-modal-body{
-		display: flex;
-		flex-direction: column;
-	}
+:deep(.allUserPoeration_modal) {
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+  }
 }
-
 </style>
 <style lang="less" scoped>
-
 .allUserPoeration_modal {
-    .closeIcon {
-        z-index: 2;
+  .closeIcon {
+    z-index: 2;
+  }
+  .allUserPoeration_btn {
+    display: flex;
+    flex-direction: row;
+    height: auto;
+    justify-content: flex-end;
+    padding: 1rem 0;
+    .admin_search_item {
+      margin-bottom: 0;
     }
-	.allUserPoeration_btn{
-		display: flex;
-		flex-direction: row;
-		height: auto;
-		justify-content: flex-end;
-		padding: 1rem 0;
-		.admin_search_item{
-			margin-bottom: 0;
-		}
-	}
-	.allUserPoeration_center{
-		flex: 1;
-		overflow-y: auto;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
+  }
+  .allUserPoeration_center {
+    flex: 1;
+    overflow-y: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/Administrator/coupons/addAllUser.vue b/src/component/Administrator/coupons/addAllUser.vue
index bbc91b4c..70e8c956 100644
--- a/src/component/Administrator/coupons/addAllUser.vue
+++ b/src/component/Administrator/coupons/addAllUser.vue
@@ -1,277 +1,299 @@
 <template>
-	<div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
-    <a-modal
-        class="allUserPoeration_modal generalModel"
-        v-model:visible="operationsModal"
-        :footer="null"
-		:get-container="() => $refs.allUserPoerationModal"
-        width="50%"
-		:height="'77rem'"
-        :maskClosable="false"
-        :centered="true"
-        :closable="false"
-		:mask="true"
-        wrapClassName="#app"
-        :keyboard="false"
-    >
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-		<div class="modal_title_text">
-			<div>{{ title }} Coupon</div>
-		</div>
-		<div class="allUserPoeration_center admin_page">
-			<div class="admin_state_item">
-				<span>Cooperator:</span>
-				<input
-					v-model="cooperator"
-					placeholder="Please enter cooperator"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			<div class="admin_state_item" >
-				<span>percentOff(%): <span>*</span></span>
-				<input
-					:class="{active:title != 'Add'}"
-					:disabled="title != 'Add'"
-					v-model="percentOff"
-					placeholder="Please enter percentOff"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			<div class="admin_state_item" >
-				<span>Commission Rate: <span>*</span></span>
-				<input
-					:class="{active:title != 'Add'}"
-					:disabled="title != 'Add'"
-					v-model="commissionRate"
-					placeholder="Please enter commission rate"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			<div class="admin_state_item" >
-			<!-- <div class="admin_state_item" > -->
-				<span>End Time: <span>*</span></span>
-				<a-space direction="vertical" style="width:220px">
-					<a-date-picker v-model:value="rangePickerValue" :disabled="title != 'Add'" style="width:220px" />
-				</a-space>
-			</div>
-			<div class="admin_state_item" >
-				<span>MaxRedemptions:</span>
-				<input
-					:class="{active:title != 'Add'}"
-					:disabled="title != 'Add'"
-					v-model="maxRedemptions"
-					placeholder="Please enter maximum"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			<div class="admin_state_item" >
-				<span>PaidCommission:</span>
-				<input
-					v-model="paidCommission"
-					placeholder="Please enter paidCommission"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			<div class="admin_state_item">
-				<span>Remark:</span>
-				<input
-					v-model="remark"
-					placeholder="Please enter remark"
-					type="text"
-					style="width: 220px"
-				/>
-			</div>
-			
-			
-		</div>
-		<div class="allUserPoeration_btn admin_page">
-			<div class="admin_search_item" @click="cancelDsign">
-				Close
-			</div>
-			<div class="admin_search_item" @click="setOk">
-				OK
-			</div>
-		
-		</div>
-    </a-modal>
-	<div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div>
+  <div class="allUserPoerationModal" ref="allUserPoerationModal"></div>
+  <a-modal
+    class="allUserPoeration_modal generalModel"
+    v-model:visible="operationsModal"
+    :footer="null"
+    :get-container="() => $refs.allUserPoerationModal"
+    width="50%"
+    :height="'77rem'"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="true"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="modal_title_text">
+      <div>{{ title }} Coupon</div>
+    </div>
+    <div class="allUserPoeration_center admin_page">
+      <div class="admin_state_item">
+        <span>Cooperator:</span>
+        <input
+          v-model="cooperator"
+          placeholder="Please enter cooperator"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>percentOff(%): <span>*</span></span>
+        <input
+          :class="{ active: title != 'Add' }"
+          :disabled="title != 'Add'"
+          v-model="percentOff"
+          placeholder="Please enter percentOff"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>Commission Rate: <span>*</span></span>
+        <input
+          :class="{ active: title != 'Add' }"
+          :disabled="title != 'Add'"
+          v-model="commissionRate"
+          placeholder="Please enter commission rate"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <!-- <div class="admin_state_item" > -->
+        <span>End Time: <span>*</span></span>
+        <a-space direction="vertical" style="width: 220px">
+          <a-date-picker
+            v-model:value="rangePickerValue"
+            :disabled="title != 'Add'"
+            style="width: 220px"
+          />
+        </a-space>
+      </div>
+      <div class="admin_state_item">
+        <span>MaxRedemptions:</span>
+        <input
+          :class="{ active: title != 'Add' }"
+          :disabled="title != 'Add'"
+          v-model="maxRedemptions"
+          placeholder="Please enter maximum"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>PaidCommission:</span>
+        <input
+          v-model="paidCommission"
+          placeholder="Please enter paidCommission"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+      <div class="admin_state_item">
+        <span>Remark:</span>
+        <input
+          v-model="remark"
+          placeholder="Please enter remark"
+          type="text"
+          style="width: 220px"
+        />
+      </div>
+    </div>
+    <div class="allUserPoeration_btn admin_page">
+      <div class="admin_search_item" @click="cancelDsign">Close</div>
+      <div class="admin_search_item" @click="setOk">OK</div>
+    </div>
+  </a-modal>
+  <div class="mark_loading" v-show="loadingShow">
+    <a-spin size="large" />
+  </div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import {
+  defineComponent,
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  nextTick,
+  toRefs,
+} from "vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { formatTime,isEmail } from "@/tool/util";
-import dayjs, { Dayjs } from 'dayjs';
-const md5 = require("md5");
+import { formatTime, isEmail } from "@/tool/util";
+import dayjs, { Dayjs } from "dayjs";
+import md5 from "md5";
 export default defineComponent({
-    components: {
-    },
-	emits: ['searchHistoryList'],
-    setup(props,{emit}) {
-		let operations = reactive({
-			operationsModal:false,
-			operationsEdit:false,
-			loadingShow:false,
-			title:''
-		})
-		let operationsData = reactive({
-        	rangePickerValue:'',
-			percentOff:'',
-			commissionRate:'',
-			maxRedemptions:'',
-			cooperator:'',
-			paidCommission:'',
-			remark:'',
-			id:''
-		})
-		let init = (funStr,data)=>{
-			operations.operationsModal = true
-			operations.operationsEdit = true
-			operations.title = funStr
-			if(funStr == 'Add') operations.operationsEdit = false 
-			if(funStr == 'Edit'){
-				operationsData.id=data.id
-				operationsData.percentOff=data.percentOff
-				operationsData.commissionRate=data.commissionRate
-				operationsData.maxRedemptions=data.maxRedemptions 
-				operationsData.cooperator=data.cooperator 
-				operationsData.paidCommission=data.paidCommission 
-				operationsData.remark=data.remark 
-				operationsData.rangePickerValue = dayjs(new Date(data.redeemBy * 1000).toISOString().split('T')[0],'YYYY/MM/DD');
+  components: {},
+  emits: ["searchHistoryList"],
+  setup(props, { emit }) {
+    let operations = reactive({
+      operationsModal: false,
+      operationsEdit: false,
+      loadingShow: false,
+      title: "",
+    });
+    let operationsData = reactive({
+      rangePickerValue: "",
+      percentOff: "",
+      commissionRate: "",
+      maxRedemptions: "",
+      cooperator: "",
+      paidCommission: "",
+      remark: "",
+      id: "",
+    });
+    let init = (funStr, data) => {
+      operations.operationsModal = true;
+      operations.operationsEdit = true;
+      operations.title = funStr;
+      if (funStr == "Add") operations.operationsEdit = false;
+      if (funStr == "Edit") {
+        operationsData.id = data.id;
+        operationsData.percentOff = data.percentOff;
+        operationsData.commissionRate = data.commissionRate;
+        operationsData.maxRedemptions = data.maxRedemptions;
+        operationsData.cooperator = data.cooperator;
+        operationsData.paidCommission = data.paidCommission;
+        operationsData.remark = data.remark;
+        operationsData.rangePickerValue = dayjs(
+          new Date(data.redeemBy * 1000).toISOString().split("T")[0],
+          "YYYY/MM/DD"
+        );
 
-				// operationsData.rangePickerValue='2024-08-05T00:00:06'
-				// operationsData.validEndTime='2024-08-05T00:00:06'
-				// operationsData.commissionRate = data.commissionRate
-				// operationsData.maxRedemptions = data.maxRedemptions
-				// operationsData.validStartTime = formatTime(data.validStartTime)
-				// operationsData.validEndTime = formatTime(data.validEndTime)
-			}
-
-		}
-		let setAddData = ()=>{
-			const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
-			return {
-				"percentOff": operationsData.percentOff,
-				"maxRedemptions": operationsData.maxRedemptions,
-				"commissionRate": operationsData.commissionRate,
-				"timestamp": timestampMs,
-				cooperator:operationsData.cooperator,
-				remark:operationsData.remark,
-			}
-		}
-		let setEditData = ()=>{
-			const timestampMs = new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
-			return {
-				id: operationsData.id,
-				paidCommission: operationsData.commissionRate,
-				cooperator:operationsData.cooperator,
-				remark:operationsData.remark,
-			}
-		}
-		let cancelDsign = ()=>{
-			operationsData.rangePickerValue=''
-			operationsData.percentOff=''
-			operationsData.commissionRate=''
-			operationsData.maxRedemptions=''
-			operationsData.cooperator=''
-			operationsData.paidCommission=''
-			operationsData.remark=''
-			operationsData.id=''
-			operations.operationsModal = false
-		}
-		let setOk = ()=>{
-			let data 
-			if(operations.title == 'Add'){
-				data = setAddData()
-				if(!data.commissionRate || !data.timestamp || !data.percentOff)return message.warning('Please check the input box marked with *')
-				Https.axiosPost(Https.httpUrls.createCoupon, data).then(
-				(rv) => {
-					if (rv) {
-						cancelDsign()
-						emit('searchHistoryList')
-					}
-				}
-			);
-			}else{
-				data = setEditData()
-				Https.axiosGet(Https.httpUrls.updatePromCodeInfo,{params:data}).then(
-				(rv) => {
-					if (rv) {
-						cancelDsign()
-						emit('searchHistoryList')
-					}
-				}
-			);
-			}
-			
-		}
-        return {
-            ...toRefs(operations),
-            ...toRefs(operationsData),
-			cancelDsign,
-			init,
-			focus,
-			blur,
-			setOk,
-        };
-    },
-    data() {
-        return {
-        };
-    },
-    mounted() {},
-    methods: {
-       
-    },
+        // operationsData.rangePickerValue='2024-08-05T00:00:06'
+        // operationsData.validEndTime='2024-08-05T00:00:06'
+        // operationsData.commissionRate = data.commissionRate
+        // operationsData.maxRedemptions = data.maxRedemptions
+        // operationsData.validStartTime = formatTime(data.validStartTime)
+        // operationsData.validEndTime = formatTime(data.validEndTime)
+      }
+    };
+    let setAddData = () => {
+      const timestampMs =
+        new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
+      return {
+        percentOff: operationsData.percentOff,
+        maxRedemptions: operationsData.maxRedemptions,
+        commissionRate: operationsData.commissionRate,
+        timestamp: timestampMs,
+        cooperator: operationsData.cooperator,
+        remark: operationsData.remark,
+      };
+    };
+    let setEditData = () => {
+      const timestampMs =
+        new Date(operationsData.rangePickerValue).getTime() / 1000; // 直接获取毫秒时间戳
+      return {
+        id: operationsData.id,
+        paidCommission: operationsData.commissionRate,
+        cooperator: operationsData.cooperator,
+        remark: operationsData.remark,
+      };
+    };
+    let cancelDsign = () => {
+      operationsData.rangePickerValue = "";
+      operationsData.percentOff = "";
+      operationsData.commissionRate = "";
+      operationsData.maxRedemptions = "";
+      operationsData.cooperator = "";
+      operationsData.paidCommission = "";
+      operationsData.remark = "";
+      operationsData.id = "";
+      operations.operationsModal = false;
+    };
+    let setOk = () => {
+      let data;
+      if (operations.title == "Add") {
+        data = setAddData();
+        if (!data.commissionRate || !data.timestamp || !data.percentOff)
+          return message.warning("Please check the input box marked with *");
+        Https.axiosPost(Https.httpUrls.createCoupon, data).then((rv) => {
+          if (rv) {
+            cancelDsign();
+            emit("searchHistoryList");
+          }
+        });
+      } else {
+        data = setEditData();
+        Https.axiosGet(Https.httpUrls.updatePromCodeInfo, {
+          params: data,
+        }).then((rv) => {
+          if (rv) {
+            cancelDsign();
+            emit("searchHistoryList");
+          }
+        });
+      }
+    };
+    return {
+      ...toRefs(operations),
+      ...toRefs(operationsData),
+      cancelDsign,
+      init,
+      focus,
+      blur,
+      setOk,
+    };
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
 });
 </script>
 <style lang="less" scoped>
-:deep(.allUserPoeration_modal){
-	.ant-modal-body{
-		display: flex;
-		flex-direction: column;
-	}
+:deep(.allUserPoeration_modal) {
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+  }
 }
-
 </style>
 <style lang="less" scoped>
-
 .allUserPoeration_modal {
-    .closeIcon {
-        z-index: 2;
+  .closeIcon {
+    z-index: 2;
+  }
+  .allUserPoeration_btn {
+    display: flex;
+    flex-direction: row;
+    height: auto;
+    justify-content: flex-end;
+    padding: 1rem 0;
+    .admin_search_item {
+      margin-bottom: 0;
     }
-	.allUserPoeration_btn{
-		display: flex;
-		flex-direction: row;
-		height: auto;
-		justify-content: flex-end;
-		padding: 1rem 0;
-		.admin_search_item{
-			margin-bottom: 0;
-		}
-	}
-	.allUserPoeration_center{
-		flex: 1;
-		overflow-y: auto;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
+  }
+  .allUserPoeration_center {
+    flex: 1;
+    overflow-y: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue
index 95dc0c24..ba6edb72 100644
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -1,802 +1,922 @@
 <template>
-	<div class="renew" ref="renew"></div>
-	<a-modal
-		class="generalModel"
-		:get-container="() => $refs.renew"
-		v-model:visible="renewModel"
-		:footer="null"
-		width="130rem"
-		height="auto"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		:mask="renewModelMask"
-		:keyboard="false"
-		:destroyOnClose="true"
-		:zIndex="1000"
-	>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<!-- <i class="fi fi-rr-cross-small"></i> -->
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-		<div class="renewContent">
-			<div class="left">
-				<div class="title">Unlock the Pro Advantage</div>
-				<div class="content">
-					<div class="benefits">
-						<div>Benefits</div>
-						<div class="contrast">
-							<div>Free</div>
-							<div>PRO</div>
-						</div>
-					</div>
-					<div class="benefitsItem">
-						<div class="describe">
-							<div class="icon">
-								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
-							</div>
-							<div class="text">
-								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
-								<p class="info">More accurate answers with multiple latest AI models</p>
-							</div>
-						</div>
-						<div class="contrast">
-							<div>√</div>
-							<div>×</div>
-						</div>
-					</div>
-					<div class="benefitsItem">
-						<div class="describe">
-							<div class="icon">
-								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
-							</div>
-							<div class="text">
-								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
-								<p class="info">More accurate answers with multiple latest AI models</p>
-							</div>
-						</div>
-						<div class="contrast">
-							<div>√</div>
-							<div>×</div>
-						</div>
-					</div>
-					<div class="benefitsItem">
-						<div class="describe">
-							<div class="icon">
-								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
-							</div>
-							<div class="text">
-								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
-								<p class="info">More accurate answers with multiple latest AI models</p>
-							</div>
-						</div>
-						<div class="contrast">
-							<div>√</div>
-							<div>×</div>
-						</div>
-					</div>
-					<div class="benefitsItem">
-						<div class="describe">
-							<div class="icon">
-								<img src="https://storage.googleapis.com/chatapp-website-assets/stars.webp" >
-							</div>
-							<div class="text">
-								<p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
-								<p class="info">More accurate answers with multiple latest AI models</p>
-							</div>
-						</div>
-						<div class="contrast">
-							<div>√</div>
-							<div>×</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="right">
-				<div class="title">
-					{{ $t('Renew.title') }}
-				</div>
-				<div class="info">Get started today for unlimited access!</div>
-				<div class="content">
-					<div class="productItem" :class="{active:item.price == current.price,sellWell:item.sellWell}" v-for="item in personage" :key="item.price" @click="setPromotionData(item)">
-						<div class="popular" v-show="item.sellWell">MOST POPULAR</div>
-						<div class="priceBox">
-							<div class="left">
-								<p class="productType">1 {{ item.type.label }}</p>
-								<p class="price">${{ item.price }}</p>
-							</div>
-							<div class="right">
-								<div class="promotion">
-									<div class="succeed" v-show="item.promotionData.error == 'true'">
-										{{item.promotionData.code}}
-										<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'">
-										<input type="text" :placeholder="$t('Renew.promotionCode')" v-model="item.promotionData.code">
-										<div style="cursor: pointer;" @click="examine(item)">{{ $t('Renew.use') }}</div>
-									</div>
-									<div class="error" v-show="item.promotionData.error == 'false'">{{item.promotionData.str}}</div>
-								</div>
-								<p class="discountsPrice" v-show="item.promotionData.price" style="text-align: center;">${{ item.promotionData.price }}</p>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="payment">
-					<div class="allocation">
-						<div class="selectType">
-							<div class="text">{{ $t('Renew.Payment') }}:</div>
-							<label>
-								<input name="payment" type="radio" value="CreditCard" v-model="current.PaymentType" @change="setPaymentType('CreditCard')">
-								{{ $t('Renew.CreditCard') }}
-							</label>
-							<label>
-								<input name="payment" type="radio" value="Alipay" v-model="current.PaymentType" @change="setPaymentType('Alipay')">
-								{{ $t('Renew.Alipay') }}
-							</label>
-						</div>
-					</div>
-					<div class="gallery_btn gallery_btn_radius" @click="payment">
-						Continue
-					</div>
-					<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
-						<label>
-							<input type="checkbox" v-model="clause">
-							<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
-						</label>
-					</div>
-					<!-- <div class="paySecure">
+  <div class="renew" ref="renew"></div>
+  <a-modal
+    class="generalModel"
+    :get-container="() => $refs.renew"
+    v-model:visible="renewModel"
+    :footer="null"
+    width="130rem"
+    height="auto"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="renewModelMask"
+    :keyboard="false"
+    :destroyOnClose="true"
+    :zIndex="1000"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <!-- <i class="fi fi-rr-cross-small"></i> -->
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="renewContent">
+      <div class="left">
+        <div class="title">Unlock the Pro Advantage</div>
+        <div class="content">
+          <div class="benefits">
+            <div>Benefits</div>
+            <div class="contrast">
+              <div>Free</div>
+              <div>PRO</div>
+            </div>
+          </div>
+          <div class="benefitsItem">
+            <div class="describe">
+              <div class="icon">
+                <img
+                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
+                />
+              </div>
+              <div class="text">
+                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="info">
+                  More accurate answers with multiple latest AI models
+                </p>
+              </div>
+            </div>
+            <div class="contrast">
+              <div>√</div>
+              <div>×</div>
+            </div>
+          </div>
+          <div class="benefitsItem">
+            <div class="describe">
+              <div class="icon">
+                <img
+                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
+                />
+              </div>
+              <div class="text">
+                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="info">
+                  More accurate answers with multiple latest AI models
+                </p>
+              </div>
+            </div>
+            <div class="contrast">
+              <div>√</div>
+              <div>×</div>
+            </div>
+          </div>
+          <div class="benefitsItem">
+            <div class="describe">
+              <div class="icon">
+                <img
+                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
+                />
+              </div>
+              <div class="text">
+                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="info">
+                  More accurate answers with multiple latest AI models
+                </p>
+              </div>
+            </div>
+            <div class="contrast">
+              <div>√</div>
+              <div>×</div>
+            </div>
+          </div>
+          <div class="benefitsItem">
+            <div class="describe">
+              <div class="icon">
+                <img
+                  src="https://storage.googleapis.com/chatapp-website-assets/stars.webp"
+                />
+              </div>
+              <div class="text">
+                <p class="title">GPT-4o - DeepSeek-R1 - Gemini Pro and more</p>
+                <p class="info">
+                  More accurate answers with multiple latest AI models
+                </p>
+              </div>
+            </div>
+            <div class="contrast">
+              <div>√</div>
+              <div>×</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="title">
+          {{ $t("Renew.title") }}
+        </div>
+        <div class="info">Get started today for unlimited access!</div>
+        <div class="content">
+          <div
+            class="productItem"
+            :class="{
+              active: item.price == current.price,
+              sellWell: item.sellWell,
+            }"
+            v-for="item in personage"
+            :key="item.price"
+            @click="setPromotionData(item)"
+          >
+            <div class="popular" v-show="item.sellWell">MOST POPULAR</div>
+            <div class="priceBox">
+              <div class="left">
+                <p class="productType">1 {{ item.type.label }}</p>
+                <p class="price">${{ item.price }}</p>
+              </div>
+              <div class="right">
+                <div class="promotion">
+                  <div
+                    class="succeed"
+                    v-show="item.promotionData.error == 'true'"
+                  >
+                    {{ item.promotionData.code }}
+                    <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'
+                    "
+                  >
+                    <input
+                      type="text"
+                      :placeholder="$t('Renew.promotionCode')"
+                      v-model="item.promotionData.code"
+                    />
+                    <div style="cursor: pointer" @click="examine(item)">
+                      {{ $t("Renew.use") }}
+                    </div>
+                  </div>
+                  <div
+                    class="error"
+                    v-show="item.promotionData.error == 'false'"
+                  >
+                    {{ item.promotionData.str }}
+                  </div>
+                </div>
+                <p
+                  class="discountsPrice"
+                  v-show="item.promotionData.price"
+                  style="text-align: center"
+                >
+                  ${{ item.promotionData.price }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="payment">
+          <div class="allocation">
+            <div class="selectType">
+              <div class="text">{{ $t("Renew.Payment") }}:</div>
+              <label>
+                <input
+                  name="payment"
+                  type="radio"
+                  value="CreditCard"
+                  v-model="current.PaymentType"
+                  @change="setPaymentType('CreditCard')"
+                />
+                {{ $t("Renew.CreditCard") }}
+              </label>
+              <label>
+                <input
+                  name="payment"
+                  type="radio"
+                  value="Alipay"
+                  v-model="current.PaymentType"
+                  @change="setPaymentType('Alipay')"
+                />
+                {{ $t("Renew.Alipay") }}
+              </label>
+            </div>
+          </div>
+          <div class="gallery_btn gallery_btn_radius" @click="payment">
+            Continue
+          </div>
+          <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
+            <label>
+              <input type="checkbox" v-model="clause" />
+              <span class="generalModelDescription"
+                >{{ $t("upgradePlan.policy1")
+                }}<a
+                  href="https://code-create.com.hk/aida-terms-and-conditions/"
+                  target="_blank"
+                  >{{ $t("upgradePlan.policy2") }}</a
+                >{{ $t("upgradePlan.policy3")
+                }}<a
+                  href="https://code-create.com.hk/aida-subscription-agreement/"
+                  target="_blank"
+                  >{{ $t("upgradePlan.policy4") }}</a
+                >. *</span
+              >
+            </label>
+          </div>
+          <!-- <div class="paySecure">
 						<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
 						<span>Pay safe & secure </span>
 					</div> -->
-				</div>
-			</div>
-		</div>
-		<div class="mark_loading" v-show="isShowMark_">
-			<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_intro">{{ $t('upgradePlan.hint') }}</div>
-			<div class="mark_loading_title_box">
-				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $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>
+        </div>
+      </div>
+    </div>
+    <div class="mark_loading" v-show="isShowMark_">
+      <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_intro">{{ $t("upgradePlan.hint") }}</div>
+      <div class="mark_loading_title_box">
+        <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
+          {{ $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>
 </template>
 
 <script lang="ts">
-import { defineComponent,computed,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent, computed, reactive, toRefs, onMounted } 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";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-		payMethod,
-    },
-    setup(){
-		const store = useStore();
-		const {t} = useI18n()
-		let renew = reactive({
-			renewModel:false,
-			renewModelMask:true,
-			pageWidth:'50%'
-		})
-		let payMethodData = reactive({
-			clause:false,
-			labelDisclaimer:null as any,
-			newWindow:null as any,
-			isShowMark:false,
-			isShowMark_:false,
-		})
-		let renewData = reactive({
-			
-			personage:[
-					{
-						price:'500',
-						sellWell:true,
-						activity:false,//活动打折
-						type:{
-							value:'Month',
-							label:'Month',
-						},
-						PaymentType:'',
-						promotionData:{
-							code:'',
-							error:'',
-							str:'',
-							price:'',
-						},
-					},
-					{
-						price:'5,000',
-						sellWell:false,
-						activity:false,//活动打折
-						typeValue:'year',
-						type:{
-							value:'Year',
-							label:'Year',
-						},
-						PaymentType:'',
-						promotionData:{
-							code:'',
-							error:'',
-							str:'',
-							price:'',
-						},
-					},
-				],
-			// personage:computed(()=>{
-			//     return {
-			// 		title:t('Renew.PersonalVersion'),
-			// 		price:{
-			// 			monthly:'500',
-			// 			year:'5,000',
-			// 		},
-			// 		unit:{
-			// 			monthly:t('Renew.HKDMonth'),
-			// 			year:t('Renew.HKDYear'),
-			// 		},
-			// 		type:'monthly',
-			// 		PaymentType:'',
-			// 		typeList:['monthly','year'],
-			// 		info:'Tax, VAT not included.',
-			// 	}
-			// }),
-			firm:computed(()=>{
-			    return {
-					title:'Education Edition',
-					price:{
-						year:'500',
-					},
-					unit:{
-						year:'HKD / Year',
-					},
-					type:'year',
-					autoRenewal:{
-						text:t('Renew.automatically'),
-						value:true,
-					},
-					typeList:['year'],
-					info:'Customised plan',
-
-				}
-			}),
-			education:computed(()=>{
-			    return {
-					title:'Enterprise Edition',
-				price:{
-					year:'500',
-				},
-				unit:{
-					year:'HKD / Year',
-				},
-				type:'year',
-				autoRenewal:{
-					text:t('Renew.automatically'),
-					value:true,
-				},
-				typeList:['year'],
-				info:'Customised plan',
-				}
-			}),
-			current:{
-
-			} as any,	
-			payMethod:null as any,
-		})
-		const init = ()=>{
-			renew.renewModel = true
-			renewData.current = renewData.personage[0]
-		}
-		const cancelDsign = () => {
-			renew.renewModel = false
-		}
-		const setPaymentType = (str:any)=>{
-			renewData.current.PaymentType = str
-		}
-		const payment = ()=>{
-			if(!payMethodData.clause){
-				let labelDisclaimer:any = payMethodData.labelDisclaimer
-				if(!labelDisclaimer.classList.contains('animation')){
-					labelDisclaimer.classList.add('animation')
-					setTimeout(() => {
-						labelDisclaimer.classList.remove('animation')
-					}, 1000);
-				}
-				return
-			}
-			if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
-			// let data = {
-			// 	autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
-			// 	productName:'Subscription',
-			// 	subscribeType,//yearly为年费，monthly为月费
-			// }
-			let url = window.location.origin+'/paySucceed' 
-			let data = {
-				autoRenewal:renewData.current.PaymentType != 'Alipay',//false为不自动续费
-				productName:'Subscription',
-				quantity:1,
-				returnUrl:url,
-				subscribeType:renewData.current.type.value,//yearly为年费，monthly为月费
-				wallet:'ALIPAYHK',
-				promotionCode:renewData.current.promotionData.code,				
-			}
-			let httpsUrl = Https.httpUrls.payStripe
-			payMethodData.isShowMark_ = true
-			Https.axiosPost(httpsUrl,data).then(
-				(rv: any) => {
-					var width = 800;
-					var height = 600;
-					var left = (screen.width - width) / 2;
-					var top = (screen.height - height) / 2;
-					payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
-					let herf = rv
-					if(payMethodData.newWindow){
-						payMethodData.newWindow.location.href = herf
-					}else{
-						// window.open(herf, '_blank');
-						window.location.href=herf;  
-					}
-					payMethodData.newWindow = null
-					payMethodData.isShowMark = true
-					payMethodData.isShowMark_ = false
-				}
-			).catch(res=>{
-				payMethodData.isShowMark_ = false
-			});
-
-			// renewData.payMethod.init(data)
-		}
-		const setPaidBack = ()=>{
-			payMethod.payMethodModel = false
-			payMethodData.isShowMark = false
-			payMethodData.clause = false
-		}
-		const completePayment = ()=>{
-			renew.renewModel = false
-			setPaidBack()
-		}
-		const examine = (item:any)=>{
-			// renewData.promotionData.error
-			let price = item?.price
-			const normalNumber = Number(price.replace(/,/g, ''));
-			if(!item.promotionData.code){
-				return
-			}
-			let data = {
-				promotionCode:item.promotionData.code,
-				price:normalNumber,
-			}
-			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"){
-								item.promotionData.error = 'true'
-								item.promotionData.price = (Number(rv.discountedPrice)).toLocaleString()
-							}else{
-								item.promotionData.error = 'false'
-								item.promotionData.str = rv.message
-							}
-						}
-					})
-				}else{
-				}
-			})
-		}
-		const clearPromotionCode = ()=>{
-			renewData.current.promotionData.error = '';
-			renewData.current.promotionData.code = ''
-			renewData.current.promotionData.price = ''
-		}
-		const setPromotionData = (item:any)=>{
-			renewData.current = item
-		}
-        return{
-			store,
-			...toRefs(renew),
-			...toRefs(renewData),
-			...toRefs(payMethodData),
-			init,
-			cancelDsign,
-			setPaymentType,
-			payment,
-			setPaidBack,
-			completePayment,
-			examine,
-			clearPromotionCode,
-			setPromotionData
-        }
-    },
-    data() {
-        return {
-			
-        };
-    },
-    methods: {
-		turnToWindow(url:any) {
-            window.open(url);
+  components: {
+    payMethod,
+  },
+  setup() {
+    const store = useStore();
+    const { t } = useI18n();
+    let renew = reactive({
+      renewModel: false,
+      renewModelMask: true,
+      pageWidth: "50%",
+    });
+    let payMethodData = reactive({
+      clause: false,
+      labelDisclaimer: null as any,
+      newWindow: null as any,
+      isShowMark: false,
+      isShowMark_: false,
+    });
+    let renewData = reactive({
+      personage: [
+        {
+          price: "500",
+          sellWell: true,
+          activity: false, //活动打折
+          type: {
+            value: "Month",
+            label: "Month",
+          },
+          PaymentType: "",
+          promotionData: {
+            code: "",
+            error: "",
+            str: "",
+            price: "",
+          },
         },
+        {
+          price: "5,000",
+          sellWell: false,
+          activity: false, //活动打折
+          typeValue: "year",
+          type: {
+            value: "Year",
+            label: "Year",
+          },
+          PaymentType: "",
+          promotionData: {
+            code: "",
+            error: "",
+            str: "",
+            price: "",
+          },
+        },
+      ],
+      // personage:computed(()=>{
+      //     return {
+      // 		title:t('Renew.PersonalVersion'),
+      // 		price:{
+      // 			monthly:'500',
+      // 			year:'5,000',
+      // 		},
+      // 		unit:{
+      // 			monthly:t('Renew.HKDMonth'),
+      // 			year:t('Renew.HKDYear'),
+      // 		},
+      // 		type:'monthly',
+      // 		PaymentType:'',
+      // 		typeList:['monthly','year'],
+      // 		info:'Tax, VAT not included.',
+      // 	}
+      // }),
+      firm: computed(() => {
+        return {
+          title: "Education Edition",
+          price: {
+            year: "500",
+          },
+          unit: {
+            year: "HKD / Year",
+          },
+          type: "year",
+          autoRenewal: {
+            text: t("Renew.automatically"),
+            value: true,
+          },
+          typeList: ["year"],
+          info: "Customised plan",
+        };
+      }),
+      education: computed(() => {
+        return {
+          title: "Enterprise Edition",
+          price: {
+            year: "500",
+          },
+          unit: {
+            year: "HKD / Year",
+          },
+          type: "year",
+          autoRenewal: {
+            text: t("Renew.automatically"),
+            value: true,
+          },
+          typeList: ["year"],
+          info: "Customised plan",
+        };
+      }),
+      current: {} as any,
+      payMethod: null as any,
+    });
+    const init = () => {
+      renew.renewModel = true;
+      renewData.current = renewData.personage[0];
+    };
+    const cancelDsign = () => {
+      renew.renewModel = false;
+    };
+    const setPaymentType = (str: any) => {
+      renewData.current.PaymentType = str;
+    };
+    const payment = () => {
+      if (!payMethodData.clause) {
+        let labelDisclaimer: any = payMethodData.labelDisclaimer;
+        if (!labelDisclaimer.classList.contains("animation")) {
+          labelDisclaimer.classList.add("animation");
+          setTimeout(() => {
+            labelDisclaimer.classList.remove("animation");
+          }, 1000);
+        }
+        return;
+      }
+      if (!renewData.current.PaymentType)
+        return message.info(t("Renew.PleaseSelectPayment"));
+      // let data = {
+      // 	autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
+      // 	productName:'Subscription',
+      // 	subscribeType,//yearly为年费，monthly为月费
+      // }
+      let url = window.location.origin + "/paySucceed";
+      let data = {
+        autoRenewal: renewData.current.PaymentType != "Alipay", //false为不自动续费
+        productName: "Subscription",
+        quantity: 1,
+        returnUrl: url,
+        subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
+        wallet: "ALIPAYHK",
+        promotionCode: renewData.current.promotionData.code,
+      };
+      let httpsUrl = Https.httpUrls.payStripe;
+      payMethodData.isShowMark_ = true;
+      Https.axiosPost(httpsUrl, data)
+        .then((rv: any) => {
+          var width = 800;
+          var height = 600;
+          var left = (screen.width - width) / 2;
+          var top = (screen.height - height) / 2;
+          payMethodData.newWindow = window.open(
+            "",
+            "_blank",
+            "width=" +
+              width +
+              ", height=" +
+              height +
+              ", left=" +
+              left +
+              ", top=" +
+              top
+          );
+          let herf = rv;
+          if (payMethodData.newWindow) {
+            payMethodData.newWindow.location.href = herf;
+          } else {
+            // window.open(herf, '_blank');
+            window.location.href = herf;
+          }
+          payMethodData.newWindow = null;
+          payMethodData.isShowMark = true;
+          payMethodData.isShowMark_ = false;
+        })
+        .catch((res) => {
+          payMethodData.isShowMark_ = false;
+        });
+
+      // renewData.payMethod.init(data)
+    };
+    const setPaidBack = () => {
+      payMethod.payMethodModel = false;
+      payMethodData.isShowMark = false;
+      payMethodData.clause = false;
+    };
+    const completePayment = () => {
+      renew.renewModel = false;
+      setPaidBack();
+    };
+    const examine = (item: any) => {
+      // renewData.promotionData.error
+      let price = item?.price;
+      const normalNumber = Number(price.replace(/,/g, ""));
+      if (!item.promotionData.code) {
+        return;
+      }
+      let data = {
+        promotionCode: item.promotionData.code,
+        price: normalNumber,
+      };
+      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") {
+                  item.promotionData.error = "true";
+                  item.promotionData.price = Number(
+                    rv.discountedPrice
+                  ).toLocaleString();
+                } else {
+                  item.promotionData.error = "false";
+                  item.promotionData.str = rv.message;
+                }
+              }
+            });
+          } else {
+          }
+        }
+      );
+    };
+    const clearPromotionCode = () => {
+      renewData.current.promotionData.error = "";
+      renewData.current.promotionData.code = "";
+      renewData.current.promotionData.price = "";
+    };
+    const setPromotionData = (item: any) => {
+      renewData.current = item;
+    };
+    return {
+      store,
+      ...toRefs(renew),
+      ...toRefs(renewData),
+      ...toRefs(payMethodData),
+      init,
+      cancelDsign,
+      setPaymentType,
+      payment,
+      setPaidBack,
+      completePayment,
+      examine,
+      clearPromotionCode,
+      setPromotionData,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    turnToWindow(url: any) {
+      window.open(url);
     },
+  },
 });
 </script>
 <style lang="less" scoped>
 .renew {
-	:deep(.ant-modal-body){
-		padding: 0;
-	}
-   .renewContent{
-		display: flex;
-		border-radius: 3rem;
-		overflow: hidden;
-		> .left,> .right{
-			> .title{
-				text-align: center;
-				font-size: 3.2rem;
-				font-weight: 600;
-				line-height: 4rem;
-			}
-			> .info{
-				text-align: center;
-				opacity: .6;
-				font-weight: 400;
-				margin-top: .8rem;
-				font-size: 1.6rem;
-			}
-			> .content{
-				margin-top: 2rem;
-				display: flex;
-				flex-direction: column;
-			}
-		}
-		> .left{
-			width: 60%;
-			background: #0f0f0f;
-			color: #fff;
-			padding: 4rem 3.2rem;
-			> .title{
-				opacity: .6;
-			}
-			> .content{
-				> .benefits,> .benefitsItem{
-					display: flex;
-					> .contrast{
-						margin-left: auto;
-						display: flex;
-						align-items: center;
-						> div{
-							width: 8rem;
-							text-align: center;
-						}
-						> div:nth-child(1){
-							margin-right: 2.4rem;
-							opacity: .5;
-						}
-						> div:nth-child(2){
-							opacity: 1;
-							color: #38c793;
-							text-shadow: 0 4px 27.1px #38c793b3;
-						}
-					}
-				}
-				> .benefits{
-					> div:nth-child(1){
-						opacity: .5;
-					}
-					font-weight: 600;
-					font-size: 2rem;
-					margin: 1rem 0;
-					padding: 0 1.6rem;
-				}
-				> .benefitsItem{
-					border: 1px solid #27272a;
-					border-radius: 2.4rem;
-					margin-bottom: 1.6rem;
-					padding: 1.6rem;
-					> .describe{
-						display: flex;
-						align-items: center;
-						> .icon{
-							border: 1px solid #27272a;
-							background: linear-gradient(#1d1d1d,#000);
-							border-radius: 1.4rem;
-							margin-right: 1.6rem;
-							padding: 1.4rem;
-							> img{
-								width: 3.5rem;
-								height: 3.5rem;
-							}
-						}
-						> .text{
-							> p{
-								margin: 0;
-							}
-							> .title{
-								font-size: 1.8rem;
-								font-weight: 600;
-							}
-							> .info{
-								font-weight: 400;	
-								margin-top: .4rem;
-								font-size: 1.6rem;
-								opacity: .5;
-							}
-						}
-					}
-				}
-			}
-		}
-		> .right{
-			width: 40%;	
-			flex-direction: column;
-			align-items: center;
-			padding: 4rem 3.2rem;
-			> .content{
-				margin-top: 2rem;
-				> .productItem{
-					margin-bottom: 1rem;
-					border-radius: 1rem;
-					overflow: hidden;
-					border: 2px solid #eaecf0;
-					
-					> .popular{
-						background: #2d9f75;
-						font-weight: 600;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						color: #fff;
-						padding: .8rem 1.2rem;
-					}
-					> .priceBox{
-						height: 11rem;
-						padding: 1rem 1.2rem;
-						display: flex;
-						justify-content: space-between;
-						align-items: center;
-						> .left,> .right{
-							p{
-								margin: 0;
-							}
-							> .discountsPrice ,> .price{
-								font-size: 1.8rem;
-								margin-top: .4rem;
-								opacity: .4;
-								font-weight: 500;
-							}
-						}
-						> .left{
-							> p:nth-child(1){
-								font-size: 2rem;
-								opacity: .7;
-								font-weight: 700;
-							}
-						}
-						> .right{
-							> .promotion{
-								display: flex;
-								align-items: center;
-								flex-direction: column;
-								> .text{
-									font-size: 1.4rem;
-									font-weight: 600;
-									margin-right: 2rem;
-								}
-								> .succeed{
-									padding: 1rem;
-									display: flex;
-									align-items: center;
-									border-radius: 1rem;
-									background: #eee;
-									// color: #fff;
-									// font-weight: 600;
-									> i{
-										display: flex;
-										margin-left: 1rem;
-										cursor: pointer;
-									}
-								}
-								> .input{
-									display: flex;
-									align-items: center;
-									border-radius: 2rem;
-									border: 2px solid #000;
-									overflow: hidden;
-									padding: 0 1rem;
-									input{
-										border: none;
-										height: 3rem;
-										width: 10rem;
-										font-size: 1.2rem;
-										background: rgba(0, 0, 0, 0);
-									}
-								}
-								> .error{
-									color: red;
-									text-align: center;
-									font-size: 1.2rem;
-								}
-							}
-							> .discountsPrice{
-								font-weight: 600;
-								color: red;
-							}
-						}
-					}
-					&.active{
-						background: #0ea98233;
-						border: 2px solid #0ea982;
-						> .priceBox{
-							> .left{
-								> p:nth-child(1){
-									opacity: 1;
-								}
-							}
-							> .right{
-								> .discountsPrice{
-									opacity: 1;
-								}
-							}
-						}
-					}
-					&.sellWell{
-						border: 2px solid #0ea982;
-					}
-				}
-				> .productItem:last-child{
-					margin-bottom: 2rem;
-				}
-			}
-			> .payment{
-				margin-top: auto;
-				> .allocation{
-					// border-radius: 1rem;
-					// border: 2px solid #eaecf0;
-					// padding: 1rem 1.2rem;
-					
-					> .selectType{
-						display: flex;
-						> .text{
-							font-size: 1.4rem;
-							font-weight: 600;
-							margin-right: 2rem;
-						}
-						label{
-							margin-right: 1rem;
-							display: flex;
-							cursor: pointer;
-							input{
-								margin-right: .5rem;
-							}
-						}
-					}
-				}
-				
-				> .gallery_btn{
-					width: 100%;
-					margin: 2rem 0;
-					margin-top: 1rem;
-				}
-				> .payMethod_payAffirm_clause{
-					label{
-						input{
-							margin-right: 1rem;
-							cursor: pointer;
-							vertical-align: middle;
-						}
-						span{
-							vertical-align: top;
-							font-size: 1.4rem;
-							a{
-								color: #000;
-								text-decoration: underline;
-							}
-						}
-					}
-					&.animation{
-						animation: shake .3s linear;
-						@keyframes shake {
-							0%{
-								transform: translateX(0px);
-							}
-							25%{
-								transform: translateX(-10px);
-							}
-							50%{
-								transform: translateX(10px);
-							}
-							75%{
-								transform: translateX(-10px);
-							}
-							100%{
-								transform: translateX(0px);
-							}
-						}
-					}
-				}
-				// > .paySecure{
-				// 	display: flex;
-				// 	margin-top: 1rem;
-				// 	> svg{
-				// 		width: 1.6rem;
-				// 		height: 1.6rem;
-				// 	}
-				// 	> span{
-				// 		font-weight: 600;
-				// 		font-size: 1.4rem;
-				// 	}
-				// }
-			}
-		}
-		// .login_footer_item_text{
-		// 	text-align: center;
-		// 	margin-bottom: 1.5rem;
-		// 	text-decoration: underline;
-		// }
-		// .login_footer_item_text:last-child{
-		// 	margin-bottom: 0rem;
-		// }
-   }
-   .mark_loading{
-		position: absolute;
-		z-index: 2;
-		background: #fff;
-		border-radius: 3rem;
-		.mark_loading_title{
-		font-size: 3rem;
-		// text-decoration: underline;
-		font-weight: 600;
-		margin-bottom: 2rem;
-		overflow: hidden;
-		// color: #fff;
-	}
-	.mark_loading_intro{
-		color: rgba(0, 0, 0, 0.6);
-		font-size: 1.4rem;
-		margin-bottom: 2rem;
-		text-align: center;
-		width: 80%;
-	}
-	.mark_loading_title_box{
-		display: flex;
-	}
+  :deep(.ant-modal-body) {
+    padding: 0;
+  }
+  .renewContent {
+    display: flex;
+    border-radius: 3rem;
+    overflow: hidden;
+    > .left,
+    > .right {
+      > .title {
+        text-align: center;
+        font-size: 3.2rem;
+        font-weight: 600;
+        line-height: 4rem;
+      }
+      > .info {
+        text-align: center;
+        opacity: 0.6;
+        font-weight: 400;
+        margin-top: 0.8rem;
+        font-size: 1.6rem;
+      }
+      > .content {
+        margin-top: 2rem;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    > .left {
+      width: 60%;
+      background: #0f0f0f;
+      color: #fff;
+      padding: 4rem 3.2rem;
+      > .title {
+        opacity: 0.6;
+      }
+      > .content {
+        > .benefits,
+        > .benefitsItem {
+          display: flex;
+          > .contrast {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            > div {
+              width: 8rem;
+              text-align: center;
+            }
+            > div:nth-child(1) {
+              margin-right: 2.4rem;
+              opacity: 0.5;
+            }
+            > div:nth-child(2) {
+              opacity: 1;
+              color: #38c793;
+              text-shadow: 0 4px 27.1px #38c793b3;
+            }
+          }
+        }
+        > .benefits {
+          > div:nth-child(1) {
+            opacity: 0.5;
+          }
+          font-weight: 600;
+          font-size: 2rem;
+          margin: 1rem 0;
+          padding: 0 1.6rem;
+        }
+        > .benefitsItem {
+          border: 1px solid #27272a;
+          border-radius: 2.4rem;
+          margin-bottom: 1.6rem;
+          padding: 1.6rem;
+          > .describe {
+            display: flex;
+            align-items: center;
+            > .icon {
+              border: 1px solid #27272a;
+              background: linear-gradient(#1d1d1d, #000);
+              border-radius: 1.4rem;
+              margin-right: 1.6rem;
+              padding: 1.4rem;
+              > img {
+                width: 3.5rem;
+                height: 3.5rem;
+              }
+            }
+            > .text {
+              > p {
+                margin: 0;
+              }
+              > .title {
+                font-size: 1.8rem;
+                font-weight: 600;
+              }
+              > .info {
+                font-weight: 400;
+                margin-top: 0.4rem;
+                font-size: 1.6rem;
+                opacity: 0.5;
+              }
+            }
+          }
+        }
+      }
+    }
+    > .right {
+      width: 40%;
+      flex-direction: column;
+      align-items: center;
+      padding: 4rem 3.2rem;
+      > .content {
+        margin-top: 2rem;
+        > .productItem {
+          margin-bottom: 1rem;
+          border-radius: 1rem;
+          overflow: hidden;
+          border: 2px solid #eaecf0;
 
-	.mark_loading_btn,.mark_loading_btn2{
-		// border: #000;
-		// color: #fff;
-		display: flex;
-		margin-top: 10px;
-		text-align: center;
-		border: 2px solid;
-		padding: 0 20px;
-		border-radius: 10px;
-		cursor: pointer;
-		padding: .3rem 4rem;
-		background: #39215b;
-		color: #fff;
-		border: none;
-		margin: 0 2rem;
-		align-items: center;
-	}
-	.mark_loading_btn2{
-		border: 2px solid #000;
-		color: #000;
-		background: rgba(0,0,0,0);
-	}
-	} 
+          > .popular {
+            background: #2d9f75;
+            font-weight: 600;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            padding: 0.8rem 1.2rem;
+          }
+          > .priceBox {
+            height: 11rem;
+            padding: 1rem 1.2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            > .left,
+            > .right {
+              p {
+                margin: 0;
+              }
+              > .discountsPrice,
+              > .price {
+                font-size: 1.8rem;
+                margin-top: 0.4rem;
+                opacity: 0.4;
+                font-weight: 500;
+              }
+            }
+            > .left {
+              > p:nth-child(1) {
+                font-size: 2rem;
+                opacity: 0.7;
+                font-weight: 700;
+              }
+            }
+            > .right {
+              > .promotion {
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                > .text {
+                  font-size: 1.4rem;
+                  font-weight: 600;
+                  margin-right: 2rem;
+                }
+                > .succeed {
+                  padding: 1rem;
+                  display: flex;
+                  align-items: center;
+                  border-radius: 1rem;
+                  background: #eee;
+                  // color: #fff;
+                  // font-weight: 600;
+                  > i {
+                    display: flex;
+                    margin-left: 1rem;
+                    cursor: pointer;
+                  }
+                }
+                > .input {
+                  display: flex;
+                  align-items: center;
+                  border-radius: 2rem;
+                  border: 2px solid #000;
+                  overflow: hidden;
+                  padding: 0 1rem;
+                  input {
+                    border: none;
+                    height: 3rem;
+                    width: 10rem;
+                    font-size: 1.2rem;
+                    background: rgba(0, 0, 0, 0);
+                  }
+                }
+                > .error {
+                  color: red;
+                  text-align: center;
+                  font-size: 1.2rem;
+                }
+              }
+              > .discountsPrice {
+                font-weight: 600;
+                color: red;
+              }
+            }
+          }
+          &.active {
+            background: #0ea98233;
+            border: 2px solid #0ea982;
+            > .priceBox {
+              > .left {
+                > p:nth-child(1) {
+                  opacity: 1;
+                }
+              }
+              > .right {
+                > .discountsPrice {
+                  opacity: 1;
+                }
+              }
+            }
+          }
+          &.sellWell {
+            border: 2px solid #0ea982;
+          }
+        }
+        > .productItem:last-child {
+          margin-bottom: 2rem;
+        }
+      }
+      > .payment {
+        margin-top: auto;
+        > .allocation {
+          // border-radius: 1rem;
+          // border: 2px solid #eaecf0;
+          // padding: 1rem 1.2rem;
+
+          > .selectType {
+            display: flex;
+            > .text {
+              font-size: 1.4rem;
+              font-weight: 600;
+              margin-right: 2rem;
+            }
+            label {
+              margin-right: 1rem;
+              display: flex;
+              cursor: pointer;
+              input {
+                margin-right: 0.5rem;
+              }
+            }
+          }
+        }
+
+        > .gallery_btn {
+          width: 100%;
+          margin: 2rem 0;
+          margin-top: 1rem;
+        }
+        > .payMethod_payAffirm_clause {
+          label {
+            input {
+              margin-right: 1rem;
+              cursor: pointer;
+              vertical-align: middle;
+            }
+            span {
+              vertical-align: top;
+              font-size: 1.4rem;
+              a {
+                color: #000;
+                text-decoration: underline;
+              }
+            }
+          }
+          &.animation {
+            animation: shake 0.3s linear;
+            @keyframes shake {
+              0% {
+                transform: translateX(0px);
+              }
+              25% {
+                transform: translateX(-10px);
+              }
+              50% {
+                transform: translateX(10px);
+              }
+              75% {
+                transform: translateX(-10px);
+              }
+              100% {
+                transform: translateX(0px);
+              }
+            }
+          }
+        }
+        // > .paySecure{
+        // 	display: flex;
+        // 	margin-top: 1rem;
+        // 	> svg{
+        // 		width: 1.6rem;
+        // 		height: 1.6rem;
+        // 	}
+        // 	> span{
+        // 		font-weight: 600;
+        // 		font-size: 1.4rem;
+        // 	}
+        // }
+      }
+    }
+    // .login_footer_item_text{
+    // 	text-align: center;
+    // 	margin-bottom: 1.5rem;
+    // 	text-decoration: underline;
+    // }
+    // .login_footer_item_text:last-child{
+    // 	margin-bottom: 0rem;
+    // }
+  }
+  .mark_loading {
+    position: absolute;
+    z-index: 2;
+    background: #fff;
+    border-radius: 3rem;
+    .mark_loading_title {
+      font-size: 3rem;
+      // text-decoration: underline;
+      font-weight: 600;
+      margin-bottom: 2rem;
+      overflow: hidden;
+      // color: #fff;
+    }
+    .mark_loading_intro {
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 1.4rem;
+      margin-bottom: 2rem;
+      text-align: center;
+      width: 80%;
+    }
+    .mark_loading_title_box {
+      display: flex;
+    }
+
+    .mark_loading_btn,
+    .mark_loading_btn2 {
+      // border: #000;
+      // color: #fff;
+      display: flex;
+      margin-top: 10px;
+      text-align: center;
+      border: 2px solid;
+      padding: 0 20px;
+      border-radius: 10px;
+      cursor: pointer;
+      padding: 0.3rem 4rem;
+      background: #39215b;
+      color: #fff;
+      border: none;
+      margin: 0 2rem;
+      align-items: center;
+    }
+    .mark_loading_btn2 {
+      border: 2px solid #000;
+      color: #000;
+      background: rgba(0, 0, 0, 0);
+    }
+  }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/LoginPage/login/enterprise.vue b/src/component/LoginPage/login/enterprise.vue
index 42a79785..e9a66258 100644
--- a/src/component/LoginPage/login/enterprise.vue
+++ b/src/component/LoginPage/login/enterprise.vue
@@ -1,140 +1,115 @@
 <template>
-    <div class="login_page">
-        <div class="page_content">
-            <!-- 账号密码和邮箱登录  start-->
-            <div class="login_content" v-if="isLogin === 1">
-                <div class="login_content_left">
-                    <!-- 账号密码登录 start -->
-                    <!-- v-show="loginType == 'username'" -->
-                    <div>
-                        <div class="login_form_content" :state="emailStap">
-							
-							<div v-show="emailStap === 1">
-								<div class="login_form_title marign_top30">
-									Enterprise
-								</div>
-								<div  class="generalModel_state">
-									<div class="generalModel_state_item" style="width: 100%; margin: 0;">
-										<a-select
-											placeholder="Select a school"
-											v-model:value="selectEnterprise"
-											:options="schoolList"
-											@change="schoolListChange"
-											style="width:100%"
-											show-search
-											size="large"
-											:fieldNames="{ label: 'name', value: 'value' }"
-											:filter-option="filterOption"
-											@focus="handleFocus"
-										>
-											<template #suffixIcon
-												><span
-													class="icon iconfont icon-xiala"
-													style="color: #000"
-												></span
-											></template>
-										</a-select>
-									</div>
-								</div>
-								<div class="login_form_title marign_top30">
-									Email
-								</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your email address"
-									v-model="email"
-									@keydown.enter="submitPerLogin()"
-								/>
-								<div class="login_form_title marign_top30">
-									<div>Password</div>
-								</div>
-								<div class="password_input_block">
-									<input
-										class="login_form_input"
-										:type="passwordType"
-										placeholder="Enter your password"
-										v-model="password"
-										@keydown.enter="submitPerLogin()"
-									/>
-									<div
-										class="icon iconfont icon-yanjing_yincang_o password_show_icon"
-										@click="changePasswordType()"
-									></div>
-								</div>
-							</div>
-							
+  <div class="login_page">
+    <div class="page_content">
+      <!-- 账号密码和邮箱登录  start-->
+      <div class="login_content" v-if="isLogin === 1">
+        <div class="login_content_left">
+          <!-- 账号密码登录 start -->
+          <!-- v-show="loginType == 'username'" -->
+          <div>
+            <div class="login_form_content" :state="emailStap">
+              <div v-show="emailStap === 1">
+                <div class="login_form_title marign_top30">Enterprise</div>
+                <div class="generalModel_state">
+                  <div
+                    class="generalModel_state_item"
+                    style="width: 100%; margin: 0"
+                  >
+                    <a-select
+                      placeholder="Select a school"
+                      v-model:value="selectEnterprise"
+                      :options="schoolList"
+                      @change="schoolListChange"
+                      style="width: 100%"
+                      show-search
+                      size="large"
+                      :fieldNames="{ label: 'name', value: 'value' }"
+                      :filter-option="filterOption"
+                      @focus="handleFocus"
+                    >
+                      <template #suffixIcon
+                        ><span
+                          class="icon iconfont icon-xiala"
+                          style="color: #000"
+                        ></span
+                      ></template>
+                    </a-select>
+                  </div>
+                </div>
+                <div class="login_form_title marign_top30">Email</div>
+                <input
+                  class="login_form_input"
+                  placeholder="Enter your email address"
+                  v-model="email"
+                  @keydown.enter="submitPerLogin()"
+                />
+                <div class="login_form_title marign_top30">
+                  <div>Password</div>
+                </div>
+                <div class="password_input_block">
+                  <input
+                    class="login_form_input"
+                    :type="passwordType"
+                    placeholder="Enter your password"
+                    v-model="password"
+                    @keydown.enter="submitPerLogin()"
+                  />
+                  <div
+                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+                    @click="changePasswordType()"
+                  ></div>
+                </div>
+              </div>
 
-                            <!-- 邮箱登录 start -->
-                            <div
-								v-show="emailStap === 2"
-                                class="login_form_email"
-                                :class="{ active: emailStap === 2 }"
-                            >
-                                <div
-                                    v-show="emailStap === 2"
-                                    class="email_last_step"
-                                >
-                                    <div class="email_last_step_block">
-                                        <span class="email_last_step_content"
-                                            >Verify with one-time verification
-                                            code</span
-                                        >
-                                        <i
-                                            class="fi fi-br-cross email_last_step_block_icon"
-                                            @click="emailLastStepFun()"
-                                        ></i>
-                                    </div>
-                                    <div class="email_last_step_bottom">
-                                        <div class="email_last_step_des">
-                                            <div class="sent_email_content">
-                                                Sent to {{ email }}
-                                            </div>
-                                            <div class="tip_content">
-                                                <span v-show="time"
-                                                    >{{ time }}s</span
-                                                >
-                                                <span
-                                                    v-show="!time"
-                                                    @click="emailNextStepFun()"
-                                                    >Resend</span
-                                                >
-                                            </div>
-                                        </div>
-                                        <VerificationCodeInput
-                                            :ct="emailCode"
-                                            @sendCaptcha="
-                                                submitEmailLogin($event)
-                                            "
-                                        ></VerificationCodeInput>
+              <!-- 邮箱登录 start -->
+              <div
+                v-show="emailStap === 2"
+                class="login_form_email"
+                :class="{ active: emailStap === 2 }"
+              >
+                <div v-show="emailStap === 2" class="email_last_step">
+                  <div class="email_last_step_block">
+                    <span class="email_last_step_content"
+                      >Verify with one-time verification code</span
+                    >
+                    <i
+                      class="fi fi-br-cross email_last_step_block_icon"
+                      @click="emailLastStepFun()"
+                    ></i>
+                  </div>
+                  <div class="email_last_step_bottom">
+                    <div class="email_last_step_des">
+                      <div class="sent_email_content">Sent to {{ email }}</div>
+                      <div class="tip_content">
+                        <span v-show="time">{{ time }}s</span>
+                        <span v-show="!time" @click="emailNextStepFun()"
+                          >Resend</span
+                        >
+                      </div>
+                    </div>
+                    <VerificationCodeInput
+                      :ct="emailCode"
+                      @sendCaptcha="submitEmailLogin($event)"
+                    ></VerificationCodeInput>
 
-                                        <div class="email_last_step_des">
-                                            <div
-                                                class="sent_email_content email_tip_content"
-                                            >
-                                                Please check the junk box if you
-                                                haven't received verification
-                                                code
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="email_last_step_des">
+                      <div class="sent_email_content email_tip_content">
+                        Please check the junk box if you haven't received
+                        verification code
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
 
-                        <div class="login_form_title marign_top30">
-                            <label :class="{ active: emailStap == 2 }">
-                                <input
-                                    :state="emailStap"
-                                    type="checkbox"
-                                    v-model="checked"
-                                />
-                                <span
-                                    >I agree to all Term, Privacy Policy and
-                                    Fees</span
-                                >
-                            </label>
-                        </div>
-						<!-- <div class="thirdPartyLogin marign_top30">
+            <div class="login_form_title marign_top30">
+              <label :class="{ active: emailStap == 2 }">
+                <input :state="emailStap" type="checkbox" v-model="checked" />
+                <span>I agree to all Term, Privacy Policy and Fees</span>
+              </label>
+            </div>
+            <!-- <div class="thirdPartyLogin marign_top30">
 							<div class="label">
 								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
 								<googleLogin @googelLogin="googelLogin"></googleLogin>
@@ -144,15 +119,15 @@
 								<weiXinLogin></weiXinLogin>
 							</div>
 						</div> -->
-                        <div
-                            class="login_submit_button marign_top40"
-                            :state="emailStap"
-                            @click="submitPerLogin()"
-                        >
-                            Sign in
-                        </div>
+            <div
+              class="login_submit_button marign_top40"
+              :state="emailStap"
+              @click="submitPerLogin()"
+            >
+              Sign in
+            </div>
 
-                        <!-- <div class="login_text">
+            <!-- <div class="login_text">
                             <div
                                 class="forget_password_text"
                                 @click="changeIsLogin(2)"
@@ -160,92 +135,87 @@
                                 Forgot your password
                             </div>
                         </div> -->
-                    </div>
-                    <!-- 账号密码登录 end -->
-                </div>
-
-                <!-- 邮箱登录 end -->
-               
-            </div>
-
-            <!-- 忘记密码 start -->
-            <div class="forget_password_content" v-else>
-                <div
-                    class="forget_password_content_block"
-                    @click="forgetPasswordLastStepFun()"
-                >
-                    <i class="fi fi-br-arrow-left"></i>
-                    <span class="forget_password_content_title"
-                        >Retrieve password</span
-                    >
-                </div>
-                <div v-show="frogetPasswordStep === 1">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Email</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter your email"
-                            v-model="forgetPasswordEmail"
-                            @keydown.enter="forgetPasswordNextStepFun()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="forgetPasswordNextStepFun()"
-                    >
-                        Next step
-                    </div>
-                </div>
-
-                <div v-show="frogetPasswordStep === 2">
-                    <div class="forget_verif_code_des">Verification Code</div>
-                    <div class="email_last_step_des">
-                        <div class="sent_email_content">
-                            Sent to {{ forgetPasswordEmail }}
-                        </div>
-                        <div class="tip_content">
-                            <span v-show="time">{{ time }}s</span>
-                            <span
-                                v-show="!time"
-                                @click="forgetPasswordNextStepFun()"
-                                >Resend</span
-                            >
-                        </div>
-                    </div>
-                    <VerificationCodeInput
-                        :ct="emailCode"
-                        @sendCaptcha="submitPasswordCode($event)"
-                    ></VerificationCodeInput>
-                </div>
-
-                <div v-show="frogetPasswordStep === 3">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Password</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter a new password"
-                            v-model="newPassword"
-                            @keydown.enter="submitResetPassword()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="submitResetPassword()"
-                    >
-                        Submit
-                    </div>
-                </div>
-            </div>
-            <!-- 忘记密码 end -->
+          </div>
+          <!-- 账号密码登录 end -->
         </div>
-		<div class="mark_loading" v-show="loadingShow">
-			<a-spin size="large" />
-		</div>
+
+        <!-- 邮箱登录 end -->
+      </div>
+
+      <!-- 忘记密码 start -->
+      <div class="forget_password_content" v-else>
+        <div
+          class="forget_password_content_block"
+          @click="forgetPasswordLastStepFun()"
+        >
+          <i class="fi fi-br-arrow-left"></i>
+          <span class="forget_password_content_title">Retrieve password</span>
+        </div>
+        <div v-show="frogetPasswordStep === 1">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Email</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter your email"
+              v-model="forgetPasswordEmail"
+              @keydown.enter="forgetPasswordNextStepFun()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="forgetPasswordNextStepFun()"
+          >
+            Next step
+          </div>
+        </div>
+
+        <div v-show="frogetPasswordStep === 2">
+          <div class="forget_verif_code_des">Verification Code</div>
+          <div class="email_last_step_des">
+            <div class="sent_email_content">
+              Sent to {{ forgetPasswordEmail }}
+            </div>
+            <div class="tip_content">
+              <span v-show="time">{{ time }}s</span>
+              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                >Resend</span
+              >
+            </div>
+          </div>
+          <VerificationCodeInput
+            :ct="emailCode"
+            @sendCaptcha="submitPasswordCode($event)"
+          ></VerificationCodeInput>
+        </div>
+
+        <div v-show="frogetPasswordStep === 3">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Password</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter a new password"
+              v-model="newPassword"
+              @keydown.enter="submitResetPassword()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="submitResetPassword()"
+          >
+            Submit
+          </div>
+        </div>
+      </div>
+      <!-- 忘记密码 end -->
     </div>
+    <div class="mark_loading" v-show="loadingShow">
+      <a-spin size="large" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
+import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie, WriteCookie } from "@/tool/cookie";
@@ -257,770 +227,757 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
+  components: {
+    VerificationCodeInput,
+    googleLogin,
+    weiXinLogin,
+    phoneLogin,
+  },
+  setup() {
+    let timer: any = 0;
+    const { locale } = useI18n();
+    const store = useStore();
+    let loadingShow = ref(false);
+    const data = reactive({
+      selectEnterprise: "",
+      schoolList: [] as any,
+    });
+    const schoolListChange = (e: any) => {};
+    const filterOption = (e: any) => {
+      let params = {
+        name: e,
+        type: "Enterprise",
+      };
+      Https.axiosPost(
+        Https.httpUrls.organizationNameSearch,
+        {},
+        { params: params }
+      ).then((rv: any) => {
+        data.schoolList = rv.map((item: any) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+    };
+    const handleFocus = () => {
+      if (data.schoolList.length == 0) {
+        filterOption("");
+      }
+    };
+    return {
+      ...toRefs(data),
+      store,
+      timer,
+      locale,
+      loadingShow,
+      schoolListChange,
+      filterOption,
+      handleFocus,
+    };
+  },
+  data() {
+    return {
+      checked: false,
+      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
+      loginType: "username",
+      emailStap: 1, // 邮箱登录步骤
+      emailCode: ["", "", "", "", "", ""], //邮箱验证码
+      emailNextStep: true,
+      username: "",
+      password: localStorage.getItem("loginPassword") || "",
+      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+      frogetPasswordStep: 1, //忘记密码的步骤
+      forgetPasswordEmail: "",
+      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
+      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
+      newPassword: "", //新密码
+      isCheckRobot: false,
+      time: 60, //60秒倒计时
+      passwordType: "password",
+      userId: "",
+      loginTime: true,
+    };
+  },
+
+  methods: {
+    changeLoginType(type: string) {
+      this.loginType = type;
     },
-    setup() {
-        let timer: any = 0;
-        const { locale } = useI18n();
-        const store = useStore();
-		let loadingShow = ref(false)
-		const data = reactive({
-			selectEnterprise:'',
-			schoolList:[] as any,
-		})
-		const schoolListChange = (e:any)=>{
-		}
-		const filterOption = (e:any)=>{
-			let params = {
-				name:e,
-				type:'Enterprise'
-			}
-			Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
-				data.schoolList = rv.map((item:any)=>{
-					return {
-						label:item,
-						value:item,
-					}	
-				})
-			})
-			
-		}
-		const handleFocus= ()=>{
-			if(data.schoolList.length == 0){
-				filterOption('')
-			}
-		}
-        return {
-			...toRefs(data),
-            store,
-            timer,
-            locale,
-			loadingShow,
-			schoolListChange,
-			filterOption,handleFocus
+
+    //是否忘记密码页面
+    changeIsLogin(isLogin: number) {
+      if (isLogin === 1) {
+        //登录
+        this.forgetPasswordEmail = "";
+        this.frogetPasswordStep = 1;
+        this.forgetEmailCode = ["", "", "", "", "", ""];
+        this.emailStap = 1;
+        this.clearTimer();
+      } else {
+        this.username = "";
+        this.password = "";
+      }
+      this.isLogin = isLogin;
+    },
+
+    //邮箱登录的下一步
+    emailNextStepFun() {
+      if (!isEmail(this.email)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.email,
+        operationType: "LOGIN",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.emailStap = 2;
+          this.time = 60;
+          this.emailCode = ["", "", "", "", "", ""];
+          this.createTimer();
+        }
+      });
+    },
+
+    //邮箱登录的上一步
+    emailLastStepFun() {
+      this.emailStap = 1;
+      (this.username = ""), (this.password = ""), (this.email = "");
+      (this.checked = false),
+        (this.loginType = "username"),
+        (this.emailCode = ["", "", "", "", "", ""]),
+        this.clearTimer();
+    },
+
+    //忘记密码的下一步
+    forgetPasswordNextStepFun() {
+      if (!isEmail(this.forgetPasswordEmail)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.forgetPasswordEmail,
+        operationType: "FORGET_PWD",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.frogetPasswordStep = 2;
+          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+        }
+      });
+    },
+    //忘记密码的上一步
+    forgetPasswordLastStepFun() {
+      if (this.frogetPasswordStep === 1) {
+        this.changeIsLogin(1);
+      } else {
+        this.frogetPasswordStep = this.frogetPasswordStep - 1;
+        this.forgetPasswordEmail = "";
+        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+      }
+    },
+
+    //忘记密码填写完邮箱验证码进行下一步
+    submitPasswordCode(emailVerifyCode: any) {
+      // console.log(123123);
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: emailVerifyCode,
+        password: "",
+        verifyEmail: true,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          this.forgetEmailValue = emailVerifyCode;
+          this.frogetPasswordStep = 3;
+          this.clearTimer();
+        }
+      });
+    },
+
+    //改变勾选是否是机器人
+    checkRobot() {
+      this.isCheckRobot = !this.isCheckRobot;
+    },
+
+    //提交账号密码预先登录
+    submitPerLogin() {
+      //输入账号密码
+      if (this.emailStap >= 2) {
+        return;
+      } else {
+        if (!this.password) {
+          message.info("Please enter your account number or password");
+          return;
+        }
+        //输入邮箱
+        if (!this.email) {
+          message.info("Please enter your email address");
+          return;
+        }
+        if (!this.selectEnterprise) {
+          message.info("Please select a school");
+          return;
+        }
+        //判断邮箱格式是否正确
+        if (!isEmail(this.email)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        //判断是否同意隐私政策
+        if (!this.checked) {
+          message.info("Agree to all terms, privacy fees and policies");
+          return;
+        }
+        let data = {
+          password: md5(this.password + "abc"),
+          userName: "a",
+          // userName: this.username,
+          organizationName: this.selectEnterprise,
+          email: this.email,
+          operationType: "LOGIN",
+          ip: "",
         };
+        if (this.loginTime) {
+          this.loginTime = false;
+          Https.axiosPost(Https.httpUrls.enterpriseLogin, data)
+            .then((rv: any) => {
+              if (rv) {
+                this.clearTimer();
+                this.time = 60;
+                this.emailStap = 2;
+                this.emailCode = ["", "", "", "", "", ""];
+                this.createTimer();
+                this.userId = rv.userId;
+                this.loginType = "email";
+                localStorage.setItem("loginEmail", this.email);
+                localStorage.setItem("loginPassword", this.password);
+              }
+            })
+            .catch((res) => {});
+          setTimeout(() => {
+            this.loginTime = true;
+          }, 2000);
+        }
+      }
     },
-    data() {
-        return {
-            checked: false,
-            isLogin: 1, //是否为登录 1-登录， 2-忘记密码
-            loginType: "username",
-            emailStap: 1, // 邮箱登录步骤
-            emailCode: ["", "", "", "", "", ""], //邮箱验证码
-            emailNextStep: true,
-            username: "",
-            password: localStorage.getItem("loginPassword") || '',
-            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
-            frogetPasswordStep: 1, //忘记密码的步骤
-            forgetPasswordEmail: "",
-            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
-            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
-            newPassword: "", //新密码
-            isCheckRobot: false,
-            time: 60, //60秒倒计时
-            passwordType: "password",
-            userId: "",
-            loginTime: true,
+
+    changePasswordType() {
+      this.passwordType =
+        this.passwordType === "password" ? "text" : "password";
+    },
+
+    //邮箱登录提交
+    submitEmailLogin(emailVerifyCode: any) {
+      let data = {
+        email: this.email,
+        emailVerifyCode: emailVerifyCode,
+        loginType: "EMAIL",
+        userId: this.userId,
+        organizationName: this.selectEnterprise,
+      };
+      Https.axiosPost(Https.httpUrls.accountLogin, data)
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    isCheckAgreement() {
+      message.info("Agree to all terms, privacy fees and policies");
+    },
+    //微信登录
+    wechatLogin(value: any) {
+      let data = {
+        code: value.code,
+        type: 2,
+      };
+      this.loadingShow = true;
+      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+        .then((rv: any) => {
+          this.loadingShow = false;
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {
+          this.loadingShow = false;
+        });
+    },
+    //谷歌登录
+    googelLogin(value: any) {
+      let data = { credential: value, type: 2 };
+      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    //登陆成功设置参数
+    setSuccessLogin(rv: any) {
+      if (rv) {
+        if (rv.systemUser == 4) {
+          rv.systemUser = 1;
+        }
+        this.createTimer();
+        let isTest = rv.systemUser == 3 ? true : false;
+        let isBeginner = rv.isBeginner == 1 ? true : false;
+        let token = rv.token;
+        setCookie("isMurmur", false);
+        setCookie("token", token);
+        setCookie("isTest", isTest);
+        setCookie("isBeginner", isBeginner);
+        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+        setCookie("userInfo", JSON.stringify(rv));
+        let userid: any = {
+          ueserId: rv.userId,
+          systemUser: rv.systemUser,
         };
+        if (rv.email) userid.email = rv.email;
+        this.store.commit("upUserDetail", userid);
+
+        if (window.innerWidth < 768) {
+          message.info(
+            "If you need to design, please log in using an iPad or computer."
+          );
+          this.turnToHomePage("/Square");
+        } else {
+          this.turnToHomePage("/home");
+        }
+        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+        let randomNum: any =
+          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+        sessionStorage.setItem("sessionId", randomNum);
+        sessionStorage.setItem("record", JSON.stringify([]));
+      }
     },
-	
-    methods: {
-        changeLoginType(type: string) {
-            this.loginType = type;
-        },
-
-        //是否忘记密码页面
-        changeIsLogin(isLogin: number) {
-            if (isLogin === 1) {
-                //登录
-                this.forgetPasswordEmail = "";
-                this.frogetPasswordStep = 1;
-                this.forgetEmailCode = ["", "", "", "", "", ""];
-                this.emailStap = 1;
-                this.clearTimer();
-            } else {
-                this.username = "";
-                this.password = "";
-            }
-            this.isLogin = isLogin;
-        },
-
-        //邮箱登录的下一步
-        emailNextStepFun() {
-            if (!isEmail(this.email)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.email,
-                operationType: "LOGIN",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.emailStap = 2;
-                        this.time = 60;
-                        this.emailCode = ["", "", "", "", "", ""];
-                        this.createTimer();
-                    }
-                }
-            );
-        },
-
-        //邮箱登录的上一步
-        emailLastStepFun() {
-            this.emailStap = 1;
-            (this.username = ""), (this.password = ""), (this.email = "");
-            (this.checked = false),
-                (this.loginType = "username"),
-                (this.emailCode = ["", "", "", "", "", ""]),
-                this.clearTimer();
-        },
-
-        //忘记密码的下一步
-        forgetPasswordNextStepFun() {
-            if (!isEmail(this.forgetPasswordEmail)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.forgetPasswordEmail,
-                operationType: "FORGET_PWD",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.frogetPasswordStep = 2;
-                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                            this.createTimer();
-                    }
-                }
-            );
-        },
-        //忘记密码的上一步
-        forgetPasswordLastStepFun() {
-            if (this.frogetPasswordStep === 1) {
-                this.changeIsLogin(1);
-            } else {
-                this.frogetPasswordStep = this.frogetPasswordStep - 1;
-                this.forgetPasswordEmail = "";
-                (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                    this.clearTimer();
-            }
-        },
-
-        //忘记密码填写完邮箱验证码进行下一步
-        submitPasswordCode(emailVerifyCode: any) {
-            // console.log(123123);
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: emailVerifyCode,
-                password: "",
-                verifyEmail: true,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.forgetEmailValue = emailVerifyCode;
-                        this.frogetPasswordStep = 3;
-                        this.clearTimer();
-                    }
-                }
-            );
-        },
-
-        //改变勾选是否是机器人
-        checkRobot() {
-            this.isCheckRobot = !this.isCheckRobot;
-        },
-
-        //提交账号密码预先登录
-        submitPerLogin() {
-            //输入账号密码
-            if (this.emailStap >= 2) {
-                return;
-            } else {
-                if (!this.password) {
-                    message.info(
-                        "Please enter your account number or password"
-                    );
-                    return;
-                }
-                //输入邮箱
-                if (!this.email) {
-                    message.info("Please enter your email address");
-                    return;
-                }
-				if (!this.selectEnterprise) {
-                    message.info("Please select a school");
-                    return;
-                }
-                //判断邮箱格式是否正确
-                if (!isEmail(this.email)) {
-                    message.info("The email format is incorrect");
-                    return;
-                }
-                //判断是否同意隐私政策
-                if (!this.checked) {
-                    message.info(
-                        "Agree to all terms, privacy fees and policies"
-                    );
-                    return;
-                }
-                let data = {
-                    password: md5(this.password + "abc"),
-                    userName: 'a',
-                    // userName: this.username,
-					organizationName:this.selectEnterprise,
-                    email: this.email,
-                    operationType: "LOGIN",
-                    ip: "",
-                };
-                if (this.loginTime) {
-                    this.loginTime = false;
-                    Https.axiosPost(Https.httpUrls.enterpriseLogin, data)
-                        .then((rv: any) => {
-                            if (rv) {
-								this.clearTimer()
-								this.time = 60;
-								this.emailStap = 2;
-								this.emailCode = ["", "", "", "", "", ""];
-								this.createTimer();
-                                this.userId = rv.userId;
-                                this.loginType = "email";
-								localStorage.setItem("loginEmail", this.email);
-								localStorage.setItem("loginPassword", this.password);
-                            }
-                        })
-                        .catch((res) => {
-                        });
-                    setTimeout(() => {
-                        this.loginTime = true;
-                    }, 2000);
-                }
-            }
-        },
-
-        changePasswordType() {
-            this.passwordType =
-                this.passwordType === "password" ? "text" : "password";
-        },
-
-        //邮箱登录提交
-        submitEmailLogin(emailVerifyCode: any) {
-            let data = {
-                email: this.email,
-                emailVerifyCode: emailVerifyCode,
-                loginType: "EMAIL",
-                userId: this.userId,
-				organizationName:this.selectEnterprise
-            };
-            Https.axiosPost(Https.httpUrls.accountLogin, data)
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-        },
-		isCheckAgreement(){
-			message.info(
-					"Agree to all terms, privacy fees and policies"
-				);
-		},
-		//微信登录
-		wechatLogin(value:any) {
-			let data = {
-				code : value.code,
-				type:2
-			}
-			this.loadingShow = true
-		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
-                .then((rv: any) => {
-					this.loadingShow = false
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {this.loadingShow = false});
-		},
-		//谷歌登录
-		googelLogin(value:any) {
-			let data = {credential : value,type:2}
-		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-		},
-		//登陆成功设置参数
-		setSuccessLogin(rv:any){
-			if (rv) {
-				if (rv.systemUser == 4) {
-					rv.systemUser = 1;
-				}
-				this.createTimer();
-				let isTest = rv.systemUser == 3 ? true : false;
-				let isBeginner = rv.isBeginner == 1 ? true : false;
-				let token = rv.token;
-				setCookie("isMurmur", false);
-				setCookie("token", token);
-				setCookie("isTest", isTest);
-				setCookie("isBeginner", isBeginner);
-				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
-				setCookie("userInfo", JSON.stringify(rv));
-				let userid:any = {
-					ueserId:rv.userId,
-					systemUser:rv.systemUser,
-				}
-				if(rv.email)userid.email = rv.email
-				this.store.commit("upUserDetail", userid);
-				
-				if (window.innerWidth < 768) {
-					message.info(
-						"If you need to design, please log in using an iPad or computer."
-					);
-					this.turnToHomePage("/Square");
-				} else {
-					this.turnToHomePage("/home");
-				}
-				sessionStorage.setItem(
-					"isTimeOne",
-					JSON.stringify(false)
-				); //是否需要公告 提示 弹窗
-				let randomNum: any =
-					Math.floor(Math.random() * 9000000000000000) +
-					1000000000000000;
-				sessionStorage.setItem("sessionId", randomNum);
-				sessionStorage.setItem("record", JSON.stringify([]));
-			}
-		},
-        //修改密码提交
-        submitResetPassword() {
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: this.forgetEmailValue,
-                password: md5(this.newPassword + "abc"),
-                verifyEmail: false,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        message.success("Changing the password successfully");
-                        this.changeIsLogin(1);
-                    }
-                }
-            );
-        },
-
-        //创建定时器
-        createTimer() {
-            this.timer = setInterval(() => {
-                this.time--;
-                if (!this.time) {
-                    clearInterval(this.timer);
-                }
-            }, 1000);
-        },
-
-        //清除定时器
-        clearTimer() {
-            this.time = 60;
-            if (this.timer) {
-                clearInterval(this.timer);
-            }
-        },
-
-        //跳转到首页
-        turnToHomePage(str: any) {
-            // this.getLang();
-            // this.$router.push("/home");
-            // console.log(window.location.search.substring(1));
-            this.store.commit("clearAllData");
-            this.store.commit("clearAllCollection");
-            this.store.commit("setAllBoardDataChoose", {});
-            this.store.commit("clearShowSketchboard", {});
-            this.$router.push(str);
-        },
-        //获取当前语言
-        // getLang() {
-        //     let data = {};
-        //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
-        //         (rv: any) => {
-        //             if (rv) {
-        //                 this.locale = rv;
-        //                 setLang(rv);
-        //             }
-        //         }
-        //     );
-        // },
+    //修改密码提交
+    submitResetPassword() {
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: this.forgetEmailValue,
+        password: md5(this.newPassword + "abc"),
+        verifyEmail: false,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          message.success("Changing the password successfully");
+          this.changeIsLogin(1);
+        }
+      });
     },
-	mounted() {
-		const data = this.$route.query
-		if(data?.state == 'weiXin'){
-			this.wechatLogin(data)
-		}
-	},
+
+    //创建定时器
+    createTimer() {
+      this.timer = setInterval(() => {
+        this.time--;
+        if (!this.time) {
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+
+    //清除定时器
+    clearTimer() {
+      this.time = 60;
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+
+    //跳转到首页
+    turnToHomePage(str: any) {
+      // this.getLang();
+      // this.$router.push("/home");
+      // console.log(window.location.search.substring(1));
+      this.store.commit("clearAllData");
+      this.store.commit("clearAllCollection");
+      this.store.commit("setAllBoardDataChoose", {});
+      this.store.commit("clearShowSketchboard", {});
+      this.$router.push(str);
+    },
+    //获取当前语言
+    // getLang() {
+    //     let data = {};
+    //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
+    //         (rv: any) => {
+    //             if (rv) {
+    //                 this.locale = rv;
+    //                 setLang(rv);
+    //             }
+    //         }
+    //     );
+    // },
+  },
+  mounted() {
+    const data = this.$route.query;
+    if (data?.state == "weiXin") {
+      this.wechatLogin(data);
+    }
+  },
 });
 </script>
 <style lang="less" scoped>
 .login_page {
-    width: 100%;
-    height: 100%;
-    .page_content {
-        .login_content {
-			margin: 0 auto;
-            position: relative;
-			width: 100%;
-			// height: 100%;
-			// width: 80%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            @media (max-width: 768px) {
-                width: 100%;
-            }
-            .login_content_left {
-                width: 100%;
-                @media (max-width: 768px) {
-                    width: 100%;
-                }
-                .login_form_email {
-					margin-top: 3rem;
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    background: #fff;
-                    transform: scale(0);
-                    transition: 0.3s all;
-                    border: 2px solid;
-                    border-radius: 20px;
-                    .email_last_step {
-                        width: 100%;
-                        height: 100%;
-                        #app {
-                            height: auto;
-                        }
-                    }
-                }
-                .active {
-                    transform: scale(1);
-                }
-            }
-            .login_form_title {
-                font-size: 1.6rem;
-                // color: #666666;
-                font-weight: 900;
-                color: #000;
-                display: flex;
-                justify-content: space-between;
-                box-sizing: border-box;
-                label {
-                    display: flex;
-                    span {
-                        font-size: 1.6rem;
-                        margin-left: 10px;
-                        font-weight: normal;
-                    }
-                    &.active {
-                        pointer-events: none;
-                        input {
-                            pointer-events: none;
-                        }
-                    }
-                }
-            }
-			.generalModel_state{
-				>.generalModel_state_item{
-					:deep(.ant-select-selector){
-						border: 0.1rem solid #dfdfdf;
-						border-radius: 2.5rem;
-						height: 5rem !important;
-						width: 100%;
-						box-sizing: border-box;
-						&:hover{
-							border: 0.1rem solid #000;
-						}
-					}
-				}
-			}
-            .login_form_content {
-                margin-top: 4rem;
-                position: relative;
-				
-                &[state="2"] {
-                    > * {
-                        opacity: 0;
-                    }
-                    .login_form_email {
-                        opacity: 1;
-                    }
-                }
-                .password_input_block {
-                    position: relative;
-
-                    .password_show_icon {
-                        position: absolute;
-                        font-size: 2.4rem;
-                        right: 2rem;
-                        top: 1.7rem;
-                        cursor: pointer;
-                    }
-                }
-
-                .login_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-					transition: all .3s;
-					&:hover{
-						border: 0.1rem solid #000;
-					}
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .email_last_step {
-                // margin-top: 4rem;
-                .email_last_step_bottom {
-                    padding: 0 40px;
-                }
-                .email_last_step_block {
-                    padding: 10px;
-                    border-bottom: 2px solid;
-                    box-sizing: border-box;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    .email_last_step_content {
-                        margin-left: 1rem;
-                        font-size: 2.2rem;
-                        font-weight: bold;
-                        color: #030303;
-                    }
-                    .email_last_step_block_icon {
-                        cursor: pointer;
-                        margin-right: 1rem;
-                        height: 20px;
-                    }
-                }
-
-                .fi-br-arrow-left {
-                    font-size: 2.5rem;
-                    font-weight: bold;
-                    color: #030303;
-                    transform: translateY(1rem);
-                    display: inline-block;
-                }
-            }
-
-            .login_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-				transition: all .3s;
-				&:hover{
-					background: #3C3C3C;
-				}
-                &[state="2"] {
-                    cursor: not-allowed;
-                }
-            }
-            .login_text {
-                font-size: 1.6rem;
-                margin-top: 4rem;
-                color: #151515;
-                display: flex;
-                justify-content: flex-end;
-
-                .forget_password_text {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .forget_password_content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60rem;
-            background: #ffffff;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
-            border-radius: 1rem;
-            padding: 3rem 6rem 6.5rem;
-            box-sizing: border-box;
-
-            .forget_password_content_block {
-                cursor: pointer;
-            }
-
-            .fi-br-arrow-left {
-                font-size: 3.8rem;
-                font-weight: bold;
-                color: #030303;
-                transform: translateY(1rem);
-                display: inline-block;
-            }
-            .forget_password_content_title {
-                font-size: 3.2rem;
-                font-weight: bold;
-                color: #030303;
-                margin-left: 2rem;
-            }
-
-            .forget_passored_form_content {
-                margin-top: 3.5rem;
-
-                .forget_passored_form_title {
-                    font-size: 2.4rem;
-                    font-weight: bold;
-                    color: #030303;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-                }
-
-                .forget_passored_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .forget_verif_code_des {
-                font-size: 2.4rem;
-                font-weight: bold;
-                color: #030303;
-                margin-top: 3.5rem;
-            }
-
-            .forget_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-            }
-        }
-    }
-
-    .login_footer {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        left: 0;
-        bottom: 3.5rem;
+  width: 100%;
+  height: 100%;
+  .page_content {
+    .login_content {
+      margin: 0 auto;
+      position: relative;
+      width: 100%;
+      // height: 100%;
+      // width: 80%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @media (max-width: 768px) {
         width: 100%;
-        padding: 0 4rem;
-
-        .login_footer_item {
-            display: flex;
-            align-items: center;
-
-            .login_footer_item_text {
-                font-size: 1.3rem;
-                color: #151515;
-            }
-
-            .footer_item_text_pointer {
-                cursor: pointer;
-            }
-
-            .login_footer_line {
-                width: 0.1rem;
-                height: 2rem;
-                margin: 0 2rem;
-                background: #b9b9b9;
-            }
+      }
+      .login_content_left {
+        width: 100%;
+        @media (max-width: 768px) {
+          width: 100%;
         }
-    }
-
-    .marign_top20 {
-        margin-top: 2rem;
-    }
-
-    .marign_top22 {
-        margin-top: 2.2rem;
-    }
-
-    .marign_top30 {
-        margin-top: 3rem;
-    }
-    .marign_top40 {
-        margin-top: 4rem;
-    }
-	.thirdPartyLogin{
-		display: flex;
-		// justify-content: flex-start;
-		> div{
-			position: relative;
-			margin-right: 1rem;
-			> .mask{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				z-index: 2;
-				cursor: pointer;
-			}
-		}
-	}
-    .tip_content {
-        font-size: 1.3rem;
-        font-weight: bold;
+        .login_form_email {
+          margin-top: 3rem;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          transform: scale(0);
+          transition: 0.3s all;
+          border: 2px solid;
+          border-radius: 20px;
+          .email_last_step {
+            width: 100%;
+            height: 100%;
+            #app {
+              height: auto;
+            }
+          }
+        }
+        .active {
+          transform: scale(1);
+        }
+      }
+      .login_form_title {
+        font-size: 1.6rem;
+        // color: #666666;
+        font-weight: 900;
         color: #000;
-        cursor: pointer;
-    }
-
-    .email_last_step_des {
         display: flex;
-        align-items: center;
         justify-content: space-between;
+        box-sizing: border-box;
+        label {
+          display: flex;
+          span {
+            font-size: 1.6rem;
+            margin-left: 10px;
+            font-weight: normal;
+          }
+          &.active {
+            pointer-events: none;
+            input {
+              pointer-events: none;
+            }
+          }
+        }
+      }
+      .generalModel_state {
+        > .generalModel_state_item {
+          :deep(.ant-select-selector) {
+            border: 0.1rem solid #dfdfdf;
+            border-radius: 2.5rem;
+            height: 5rem !important;
+            width: 100%;
+            box-sizing: border-box;
+            &:hover {
+              border: 0.1rem solid #000;
+            }
+          }
+        }
+      }
+      .login_form_content {
         margin-top: 4rem;
-        margin-bottom: 2rem;
+        position: relative;
 
-        .sent_email_content {
-            font-size: 1.8rem;
-            font-weight: bold;
+        &[state="2"] {
+          > * {
+            opacity: 0;
+          }
+          .login_form_email {
+            opacity: 1;
+          }
+        }
+        .password_input_block {
+          position: relative;
+
+          .password_show_icon {
+            position: absolute;
+            font-size: 2.4rem;
+            right: 2rem;
+            top: 1.7rem;
+            cursor: pointer;
+          }
+        }
+
+        .login_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+          transition: all 0.3s;
+          &:hover {
+            border: 0.1rem solid #000;
+          }
+          &::placeholder {
             color: #a5b0c2;
+          }
+        }
+      }
+
+      .email_last_step {
+        // margin-top: 4rem;
+        .email_last_step_bottom {
+          padding: 0 40px;
+        }
+        .email_last_step_block {
+          padding: 10px;
+          border-bottom: 2px solid;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .email_last_step_content {
+            margin-left: 1rem;
+            font-size: 2.2rem;
+            font-weight: bold;
+            color: #030303;
+          }
+          .email_last_step_block_icon {
+            cursor: pointer;
+            margin-right: 1rem;
+            height: 20px;
+          }
         }
 
-        .email_tip_content {
-            font-size: 1.4rem;
-            color: #030303;
+        .fi-br-arrow-left {
+          font-size: 2.5rem;
+          font-weight: bold;
+          color: #030303;
+          transform: translateY(1rem);
+          display: inline-block;
         }
+      }
+
+      .login_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          background: #3c3c3c;
+        }
+        &[state="2"] {
+          cursor: not-allowed;
+        }
+      }
+      .login_text {
+        font-size: 1.6rem;
+        margin-top: 4rem;
+        color: #151515;
+        display: flex;
+        justify-content: flex-end;
+
+        .forget_password_text {
+          cursor: pointer;
+        }
+      }
     }
+
+    .forget_password_content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60rem;
+      background: #ffffff;
+      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
+      border-radius: 1rem;
+      padding: 3rem 6rem 6.5rem;
+      box-sizing: border-box;
+
+      .forget_password_content_block {
+        cursor: pointer;
+      }
+
+      .fi-br-arrow-left {
+        font-size: 3.8rem;
+        font-weight: bold;
+        color: #030303;
+        transform: translateY(1rem);
+        display: inline-block;
+      }
+      .forget_password_content_title {
+        font-size: 3.2rem;
+        font-weight: bold;
+        color: #030303;
+        margin-left: 2rem;
+      }
+
+      .forget_passored_form_content {
+        margin-top: 3.5rem;
+
+        .forget_passored_form_title {
+          font-size: 2.4rem;
+          font-weight: bold;
+          color: #030303;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+        }
+
+        .forget_passored_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+
+          &::placeholder {
+            color: #a5b0c2;
+          }
+        }
+      }
+
+      .forget_verif_code_des {
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: #030303;
+        margin-top: 3.5rem;
+      }
+
+      .forget_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .login_footer {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    left: 0;
+    bottom: 3.5rem;
+    width: 100%;
+    padding: 0 4rem;
+
+    .login_footer_item {
+      display: flex;
+      align-items: center;
+
+      .login_footer_item_text {
+        font-size: 1.3rem;
+        color: #151515;
+      }
+
+      .footer_item_text_pointer {
+        cursor: pointer;
+      }
+
+      .login_footer_line {
+        width: 0.1rem;
+        height: 2rem;
+        margin: 0 2rem;
+        background: #b9b9b9;
+      }
+    }
+  }
+
+  .marign_top20 {
+    margin-top: 2rem;
+  }
+
+  .marign_top22 {
+    margin-top: 2.2rem;
+  }
+
+  .marign_top30 {
+    margin-top: 3rem;
+  }
+  .marign_top40 {
+    margin-top: 4rem;
+  }
+  .thirdPartyLogin {
+    display: flex;
+    // justify-content: flex-start;
+    > div {
+      position: relative;
+      margin-right: 1rem;
+      > .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+      }
+    }
+  }
+  .tip_content {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #000;
+    cursor: pointer;
+  }
+
+  .email_last_step_des {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+
+    .sent_email_content {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #a5b0c2;
+    }
+
+    .email_tip_content {
+      font-size: 1.4rem;
+      color: #030303;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/LoginPage/login/personal.vue b/src/component/LoginPage/login/personal.vue
index ee92e163..b744e615 100644
--- a/src/component/LoginPage/login/personal.vue
+++ b/src/component/LoginPage/login/personal.vue
@@ -1,228 +1,201 @@
 <template>
-    <div class="login_page">
-        <div class="page_content">
-            <!-- 账号密码和邮箱登录  start-->
-            <div class="login_content" v-if="isLogin === 1">
-                <div class="login_content_left">
-                  
-                    <!-- v-show="loginType == 'username'" -->
-                    <div>
-                        <div class="login_form_content" :state="emailStap">
-                            <!-- <div class="login_form_title">Name</div>
+  <div class="login_page">
+    <div class="page_content">
+      <!-- 账号密码和邮箱登录  start-->
+      <div class="login_content" v-if="isLogin === 1">
+        <div class="login_content_left">
+          <!-- v-show="loginType == 'username'" -->
+          <div>
+            <div class="login_form_content" :state="emailStap">
+              <!-- <div class="login_form_title">Name</div>
                             <input
                                 class="login_form_input"
                                 placeholder="Enter your username"
                                 v-model="username"
                             /> -->
-							<div v-show="emailStap === 1">
-								<div class="login_form_title marign_top30">
-									Email
-								</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your email address"
-									v-model="email"
-									@keydown.enter="submitPerLogin()"
-								/>
-								<div class="login_form_title marign_top30">
-									<div>Password</div>
-								</div>
-								<div class="password_input_block">
-									<input
-										class="login_form_input"
-										:type="passwordType"
-										placeholder="Enter your password"
-										v-model="password"
-										@keydown.enter="submitPerLogin()"
-									/>
-									<div
-										class="icon iconfont icon-yanjing_yincang_o password_show_icon"
-										@click="changePasswordType()"
-									></div>
-								</div>
-							</div>
-							
-
-                            <!-- 邮箱登录 start -->
-                            <div
-								v-show="emailStap === 2"
-                                class="login_form_email"
-                                :class="{ active: emailStap === 2 }"
-                            >
-                                <div
-                                    v-show="emailStap === 2"
-                                    class="email_last_step"
-                                >
-                                    <div class="email_last_step_block">
-                                        <span class="email_last_step_content"
-                                            >Verify with one-time verification
-                                            code</span
-                                        >
-                                        <i
-                                            class="fi fi-br-cross email_last_step_block_icon"
-                                            @click="emailLastStepFun()"
-                                        ></i>
-                                    </div>
-                                    <div class="email_last_step_bottom">
-                                        <div class="email_last_step_des">
-                                            <div class="sent_email_content">
-                                                Sent to {{ email }}
-                                            </div>
-                                            <div class="tip_content">
-                                                <span v-show="time"
-                                                    >{{ time }}s</span
-                                                >
-                                                <span
-                                                    v-show="!time"
-                                                    @click="emailNextStepFun()"
-                                                    >Resend</span
-                                                >
-                                            </div>
-                                        </div>
-                                        <VerificationCodeInput
-                                            :ct="emailCode"
-                                            @sendCaptcha="
-                                                submitEmailLogin($event)
-                                            "
-                                        ></VerificationCodeInput>
-
-                                        <div class="email_last_step_des">
-                                            <div
-                                                class="sent_email_content email_tip_content"
-                                            >
-                                                Please check the junk box if you
-                                                haven't received verification
-                                                code
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="login_form_title marign_top30">
-                            <label :class="{ active: emailStap == 2 }">
-                                <input
-                                    :state="emailStap"
-                                    type="checkbox"
-                                    v-model="checked"
-                                />
-                                <span
-                                    >I agree to all Term, Privacy Policy and
-                                    Fees</span
-                                >
-                            </label>
-                        </div>
-						<div class="thirdPartyLogin marign_top30">
-							<div class="label">
-								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-								<googleLogin @googelLogin="googelLogin"></googleLogin>
-							</div>
-							<div class="label">
-								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-								<weiXinLogin></weiXinLogin>
-							</div>
-							<!-- <phoneLogin></phoneLogin> -->
-						</div>
-                        <div
-                            class="login_submit_button marign_top40"
-                            :state="emailStap"
-                            @click="submitPerLogin()"
-                        >
-                            Sign in
-                        </div>
-
-                        <div class="login_text">
-                            <div
-                                class="forget_password_text"
-                                @click="changeIsLogin(2)"
-                            >
-                                Forgot your password
-                            </div>
-                        </div>
-                    </div>
-                    <!-- 账号密码登录 end -->
+              <div v-show="emailStap === 1">
+                <div class="login_form_title marign_top30">Email</div>
+                <input
+                  class="login_form_input"
+                  placeholder="Enter your email address"
+                  v-model="email"
+                  @keydown.enter="submitPerLogin()"
+                />
+                <div class="login_form_title marign_top30">
+                  <div>Password</div>
                 </div>
+                <div class="password_input_block">
+                  <input
+                    class="login_form_input"
+                    :type="passwordType"
+                    placeholder="Enter your password"
+                    v-model="password"
+                    @keydown.enter="submitPerLogin()"
+                  />
+                  <div
+                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+                    @click="changePasswordType()"
+                  ></div>
+                </div>
+              </div>
 
-                <!-- 邮箱登录 end -->
-            </div>
-
-            <!-- 忘记密码 start -->
-            <div class="forget_password_content" v-else>
-                <div
-                    class="forget_password_content_block"
-                    @click="forgetPasswordLastStepFun()"
-                >
-                    <!-- <span class="icon iconfont fi-br-arrow-left"></span
-                    > -->
-                    <i class="fi fi-br-arrow-left"></i>
-                    <span class="forget_password_content_title"
-                        >Retrieve password</span
+              <!-- 邮箱登录 start -->
+              <div
+                v-show="emailStap === 2"
+                class="login_form_email"
+                :class="{ active: emailStap === 2 }"
+              >
+                <div v-show="emailStap === 2" class="email_last_step">
+                  <div class="email_last_step_block">
+                    <span class="email_last_step_content"
+                      >Verify with one-time verification code</span
                     >
-                </div>
-                <div v-show="frogetPasswordStep === 1">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Email</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter your email"
-                            v-model="forgetPasswordEmail"
-                            @keydown.enter="forgetPasswordNextStepFun()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="forgetPasswordNextStepFun()"
-                    >
-                        Next step
-                    </div>
-                </div>
-
-                <div v-show="frogetPasswordStep === 2">
-                    <div class="forget_verif_code_des">Verification Code</div>
+                    <i
+                      class="fi fi-br-cross email_last_step_block_icon"
+                      @click="emailLastStepFun()"
+                    ></i>
+                  </div>
+                  <div class="email_last_step_bottom">
                     <div class="email_last_step_des">
-                        <div class="sent_email_content">
-                            Sent to {{ forgetPasswordEmail }}
-                        </div>
-                        <div class="tip_content">
-                            <span v-show="time">{{ time }}s</span>
-                            <span
-                                v-show="!time"
-                                @click="forgetPasswordNextStepFun()"
-                                >Resend</span
-                            >
-                        </div>
+                      <div class="sent_email_content">Sent to {{ email }}</div>
+                      <div class="tip_content">
+                        <span v-show="time">{{ time }}s</span>
+                        <span v-show="!time" @click="emailNextStepFun()"
+                          >Resend</span
+                        >
+                      </div>
                     </div>
                     <VerificationCodeInput
-                        :ct="emailCode"
-                        @sendCaptcha="submitPasswordCode($event)"
+                      :ct="emailCode"
+                      @sendCaptcha="submitEmailLogin($event)"
                     ></VerificationCodeInput>
-                </div>
 
-                <div v-show="frogetPasswordStep === 3">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Password</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter a new password"
-                            v-model="newPassword"
-                            @keydown.enter="submitResetPassword()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="submitResetPassword()"
-                    >
-                        Submit
+                    <div class="email_last_step_des">
+                      <div class="sent_email_content email_tip_content">
+                        Please check the junk box if you haven't received
+                        verification code
+                      </div>
                     </div>
+                  </div>
                 </div>
+              </div>
             </div>
-            <!-- 忘记密码 end -->
+
+            <div class="login_form_title marign_top30">
+              <label :class="{ active: emailStap == 2 }">
+                <input :state="emailStap" type="checkbox" v-model="checked" />
+                <span>I agree to all Term, Privacy Policy and Fees</span>
+              </label>
+            </div>
+            <div class="thirdPartyLogin marign_top30">
+              <div class="label">
+                <div
+                  class="mask"
+                  v-show="!checked"
+                  @click="isCheckAgreement"
+                ></div>
+                <googleLogin @googelLogin="googelLogin"></googleLogin>
+              </div>
+              <div class="label">
+                <div
+                  class="mask"
+                  v-show="!checked"
+                  @click="isCheckAgreement"
+                ></div>
+                <weiXinLogin></weiXinLogin>
+              </div>
+              <!-- <phoneLogin></phoneLogin> -->
+            </div>
+            <div
+              class="login_submit_button marign_top40"
+              :state="emailStap"
+              @click="submitPerLogin()"
+            >
+              Sign in
+            </div>
+
+            <div class="login_text">
+              <div class="forget_password_text" @click="changeIsLogin(2)">
+                Forgot your password
+              </div>
+            </div>
+          </div>
+          <!-- 账号密码登录 end -->
         </div>
 
+        <!-- 邮箱登录 end -->
+      </div>
 
+      <!-- 忘记密码 start -->
+      <div class="forget_password_content" v-else>
+        <div
+          class="forget_password_content_block"
+          @click="forgetPasswordLastStepFun()"
+        >
+          <!-- <span class="icon iconfont fi-br-arrow-left"></span
+                    > -->
+          <i class="fi fi-br-arrow-left"></i>
+          <span class="forget_password_content_title">Retrieve password</span>
+        </div>
+        <div v-show="frogetPasswordStep === 1">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Email</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter your email"
+              v-model="forgetPasswordEmail"
+              @keydown.enter="forgetPasswordNextStepFun()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="forgetPasswordNextStepFun()"
+          >
+            Next step
+          </div>
+        </div>
 
-        <!-- <div class="login_footer">
+        <div v-show="frogetPasswordStep === 2">
+          <div class="forget_verif_code_des">Verification Code</div>
+          <div class="email_last_step_des">
+            <div class="sent_email_content">
+              Sent to {{ forgetPasswordEmail }}
+            </div>
+            <div class="tip_content">
+              <span v-show="time">{{ time }}s</span>
+              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                >Resend</span
+              >
+            </div>
+          </div>
+          <VerificationCodeInput
+            :ct="emailCode"
+            @sendCaptcha="submitPasswordCode($event)"
+          ></VerificationCodeInput>
+        </div>
+
+        <div v-show="frogetPasswordStep === 3">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Password</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter a new password"
+              v-model="newPassword"
+              @keydown.enter="submitResetPassword()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="submitResetPassword()"
+          >
+            Submit
+          </div>
+        </div>
+      </div>
+      <!-- 忘记密码 end -->
+    </div>
+
+    <!-- <div class="login_footer">
             <div class="login_footer_item">
                 <div class="login_footer_item_text">
                     ©2025 Code-Create Limited
@@ -252,10 +225,10 @@
                 </div>
             </div>
         </div> -->
-		<div class="mark_loading" v-show="loadingShow">
-			<a-spin size="large" />
-		</div>
+    <div class="mark_loading" v-show="loadingShow">
+      <a-spin size="large" />
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -271,727 +244,711 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
+  components: {
+    VerificationCodeInput,
+    googleLogin,
+    weiXinLogin,
+    phoneLogin,
+  },
+  setup() {
+    let timer: any = 0;
+    const { locale } = useI18n();
+    const store = useStore();
+    let loadingShow = ref(false);
+    return {
+      store,
+      timer,
+      locale,
+      loadingShow,
+    };
+  },
+  data() {
+    return {
+      checked: false,
+      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
+      loginType: "username",
+      emailStap: 1, // 邮箱登录步骤
+      emailCode: ["", "", "", "", "", ""], //邮箱验证码
+      emailNextStep: true,
+      username: "",
+      password: localStorage.getItem("loginPassword") || "",
+      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+      frogetPasswordStep: 1, //忘记密码的步骤
+      forgetPasswordEmail: "",
+      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
+      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
+      newPassword: "", //新密码
+      isCheckRobot: false,
+      time: 60, //60秒倒计时
+      passwordType: "password",
+      userId: "",
+      loginTime: true,
+    };
+  },
+
+  methods: {
+    changeLoginType(type: string) {
+      this.loginType = type;
     },
-    setup() {
-        let timer: any = 0;
-        const { locale } = useI18n();
-        const store = useStore();
-		let loadingShow = ref(false)
-        return {
-            store,
-            timer,
-            locale,
-			loadingShow,
+
+    //是否忘记密码页面
+    changeIsLogin(isLogin: number) {
+      if (isLogin === 1) {
+        //登录
+        this.forgetPasswordEmail = "";
+        this.frogetPasswordStep = 1;
+        this.forgetEmailCode = ["", "", "", "", "", ""];
+        this.emailStap = 1;
+        this.clearTimer();
+      } else {
+        this.username = "";
+        this.password = "";
+      }
+      this.isLogin = isLogin;
+    },
+
+    //邮箱登录的下一步
+    emailNextStepFun() {
+      if (!isEmail(this.email)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.email,
+        operationType: "LOGIN",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.emailStap = 2;
+          this.time = 60;
+          this.emailCode = ["", "", "", "", "", ""];
+          this.createTimer();
+        }
+      });
+    },
+
+    //邮箱登录的上一步
+    emailLastStepFun() {
+      this.emailStap = 1;
+      (this.username = ""), (this.password = ""), (this.email = "");
+      (this.checked = false),
+        (this.loginType = "username"),
+        (this.emailCode = ["", "", "", "", "", ""]),
+        this.clearTimer();
+    },
+
+    //忘记密码的下一步
+    forgetPasswordNextStepFun() {
+      if (!isEmail(this.forgetPasswordEmail)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.forgetPasswordEmail,
+        operationType: "FORGET_PWD",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.frogetPasswordStep = 2;
+          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+        }
+      });
+    },
+    //忘记密码的上一步
+    forgetPasswordLastStepFun() {
+      if (this.frogetPasswordStep === 1) {
+        this.changeIsLogin(1);
+      } else {
+        this.frogetPasswordStep = this.frogetPasswordStep - 1;
+        this.forgetPasswordEmail = "";
+        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+      }
+    },
+
+    //忘记密码填写完邮箱验证码进行下一步
+    submitPasswordCode(emailVerifyCode: any) {
+      // console.log(123123);
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: emailVerifyCode,
+        password: "",
+        verifyEmail: true,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          this.forgetEmailValue = emailVerifyCode;
+          this.frogetPasswordStep = 3;
+          this.clearTimer();
+        }
+      });
+    },
+
+    //改变勾选是否是机器人
+    checkRobot() {
+      this.isCheckRobot = !this.isCheckRobot;
+    },
+
+    //提交账号密码预先登录
+    submitPerLogin() {
+      //输入账号密码
+      if (this.emailStap >= 2) {
+        return;
+      } else {
+        if (!this.password) {
+          message.info("Please enter your account number or password");
+          return;
+        }
+        //输入邮箱
+        if (!this.email) {
+          message.info("Please enter your email address");
+          return;
+        }
+        //判断邮箱格式是否正确
+        if (!isEmail(this.email)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        //判断是否同意隐私政策
+        if (!this.checked) {
+          message.info("Agree to all terms, privacy fees and policies");
+          return;
+        }
+        let data = {
+          password: md5(this.password + "abc"),
+          userName: "a",
+          // userName: this.username,
+          email: this.email,
+          operationType: "LOGIN",
+          ip: "",
         };
+        // this.loginType = 'email'
+
+        if (this.loginTime) {
+          this.loginTime = false;
+          Https.axiosPost(Https.httpUrls.preLogin, data)
+            .then((rv: any) => {
+              // if (rv) {
+              //     this.loginType = 'email'
+              // }
+              if (rv) {
+                this.clearTimer();
+                this.time = 60;
+                this.emailStap = 2;
+                this.emailCode = ["", "", "", "", "", ""];
+                this.createTimer();
+
+                this.userId = rv.userId;
+                this.loginType = "email";
+
+                localStorage.setItem("loginEmail", this.email);
+                localStorage.setItem("loginPassword", this.password);
+              }
+            })
+            .catch((res) => {});
+          setTimeout(() => {
+            this.loginTime = true;
+          }, 2000);
+        }
+      }
     },
-    data() {
-        return {
-            checked: false,
-            isLogin: 1, //是否为登录 1-登录， 2-忘记密码
-            loginType: "username",
-            emailStap: 1, // 邮箱登录步骤
-            emailCode: ["", "", "", "", "", ""], //邮箱验证码
-            emailNextStep: true,
-            username: "",
-            password: localStorage.getItem("loginPassword") || '',
-            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
-            frogetPasswordStep: 1, //忘记密码的步骤
-            forgetPasswordEmail: "",
-            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
-            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
-            newPassword: "", //新密码
-            isCheckRobot: false,
-            time: 60, //60秒倒计时
-            passwordType: "password",
-            userId: "",
-            loginTime: true,
+
+    changePasswordType() {
+      this.passwordType =
+        this.passwordType === "password" ? "text" : "password";
+    },
+
+    //邮箱登录提交
+    submitEmailLogin(emailVerifyCode: any) {
+      let data = {
+        email: this.email,
+        emailVerifyCode: emailVerifyCode,
+        loginType: "EMAIL",
+        userId: this.userId,
+      };
+      Https.axiosPost(Https.httpUrls.accountLogin, data)
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    isCheckAgreement() {
+      message.info("Agree to all terms, privacy fees and policies");
+    },
+    //微信登录
+    wechatLogin(value: any) {
+      let data = {
+        code: value.code,
+        type: 2,
+      };
+      this.loadingShow = true;
+      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+        .then((rv: any) => {
+          this.loadingShow = false;
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {
+          this.loadingShow = false;
+        });
+    },
+    //谷歌登录
+    googelLogin(value: any) {
+      let data = { credential: value, type: 2 };
+      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    //登陆成功设置参数
+    setSuccessLogin(rv: any) {
+      if (rv) {
+        if (rv.systemUser == 4) {
+          rv.systemUser = 1;
+        }
+        this.createTimer();
+        let isTest = rv.systemUser == 3 ? true : false;
+        let isBeginner = rv.isBeginner == 1 ? true : false;
+        let token = rv.token;
+        setCookie("isMurmur", false);
+        setCookie("token", token);
+        setCookie("isTest", isTest);
+        setCookie("isBeginner", isBeginner);
+        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+        setCookie("userInfo", JSON.stringify(rv));
+        let userid: any = {
+          ueserId: rv.userId,
+          systemUser: rv.systemUser,
         };
+        if (rv.email) userid.email = rv.email;
+        this.store.commit("upUserDetail", userid);
+
+        if (window.innerWidth < 768) {
+          message.info(
+            "If you need to design, please log in using an iPad or computer."
+          );
+          this.turnToHomePage("/Square");
+        } else {
+          this.turnToHomePage("/home");
+        }
+        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+        let randomNum: any =
+          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+        sessionStorage.setItem("sessionId", randomNum);
+        sessionStorage.setItem("record", JSON.stringify([]));
+      }
     },
-	
-    methods: {
-        changeLoginType(type: string) {
-            this.loginType = type;
-        },
-
-        //是否忘记密码页面
-        changeIsLogin(isLogin: number) {
-            if (isLogin === 1) {
-                //登录
-                this.forgetPasswordEmail = "";
-                this.frogetPasswordStep = 1;
-                this.forgetEmailCode = ["", "", "", "", "", ""];
-                this.emailStap = 1;
-                this.clearTimer();
-            } else {
-                this.username = "";
-                this.password = "";
-            }
-            this.isLogin = isLogin;
-        },
-
-        //邮箱登录的下一步
-        emailNextStepFun() {
-            if (!isEmail(this.email)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.email,
-                operationType: "LOGIN",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.emailStap = 2;
-                        this.time = 60;
-                        this.emailCode = ["", "", "", "", "", ""];
-                        this.createTimer();
-                    }
-                }
-            );
-        },
-
-        //邮箱登录的上一步
-        emailLastStepFun() {
-            this.emailStap = 1;
-            (this.username = ""), (this.password = ""), (this.email = "");
-            (this.checked = false),
-                (this.loginType = "username"),
-                (this.emailCode = ["", "", "", "", "", ""]),
-                this.clearTimer();
-        },
-
-        //忘记密码的下一步
-        forgetPasswordNextStepFun() {
-            if (!isEmail(this.forgetPasswordEmail)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.forgetPasswordEmail,
-                operationType: "FORGET_PWD",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.frogetPasswordStep = 2;
-                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                            this.createTimer();
-                    }
-                }
-            );
-        },
-        //忘记密码的上一步
-        forgetPasswordLastStepFun() {
-            if (this.frogetPasswordStep === 1) {
-                this.changeIsLogin(1);
-            } else {
-                this.frogetPasswordStep = this.frogetPasswordStep - 1;
-                this.forgetPasswordEmail = "";
-                (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                    this.clearTimer();
-            }
-        },
-
-        //忘记密码填写完邮箱验证码进行下一步
-        submitPasswordCode(emailVerifyCode: any) {
-            // console.log(123123);
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: emailVerifyCode,
-                password: "",
-                verifyEmail: true,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.forgetEmailValue = emailVerifyCode;
-                        this.frogetPasswordStep = 3;
-                        this.clearTimer();
-                    }
-                }
-            );
-        },
-
-        //改变勾选是否是机器人
-        checkRobot() {
-            this.isCheckRobot = !this.isCheckRobot;
-        },
-
-        //提交账号密码预先登录
-        submitPerLogin() {
-            //输入账号密码
-            if (this.emailStap >= 2) {
-                return;
-            } else {
-                if (!this.password) {
-                    message.info(
-                        "Please enter your account number or password"
-                    );
-                    return;
-                }
-                //输入邮箱
-                if (!this.email) {
-                    message.info("Please enter your email address");
-                    return;
-                }
-                //判断邮箱格式是否正确
-                if (!isEmail(this.email)) {
-                    message.info("The email format is incorrect");
-                    return;
-                }
-                //判断是否同意隐私政策
-                if (!this.checked) {
-                    message.info(
-                        "Agree to all terms, privacy fees and policies"
-                    );
-                    return;
-                }
-                let data = {
-                    password: md5(this.password + "abc"),
-                    userName: 'a',
-                    // userName: this.username,
-                    email: this.email,
-                    operationType: "LOGIN",
-                    ip: "",
-                };
-                // this.loginType = 'email'
-				
-                if (this.loginTime) {
-                    this.loginTime = false;
-                    Https.axiosPost(Https.httpUrls.preLogin, data)
-                        .then((rv: any) => {
-                            // if (rv) {
-                            //     this.loginType = 'email'
-                            // }
-                            if (rv) {
-								this.clearTimer()
-								this.time = 60;
-								this.emailStap = 2;
-								this.emailCode = ["", "", "", "", "", ""];
-								this.createTimer();
-								
-                                this.userId = rv.userId;
-                                this.loginType = "email";
-                                
-								localStorage.setItem("loginEmail", this.email);
-								localStorage.setItem("loginPassword", this.password);
-                            }
-                        })
-                        .catch((res) => {
-                        });
-                    setTimeout(() => {
-                        this.loginTime = true;
-                    }, 2000);
-                }
-            }
-        },
-
-        changePasswordType() {
-            this.passwordType =
-                this.passwordType === "password" ? "text" : "password";
-        },
-
-        //邮箱登录提交
-        submitEmailLogin(emailVerifyCode: any) {
-            let data = {
-                email: this.email,
-                emailVerifyCode: emailVerifyCode,
-                loginType: "EMAIL",
-                userId: this.userId,
-            };
-            Https.axiosPost(Https.httpUrls.accountLogin, data)
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-        },
-		isCheckAgreement(){
-			message.info(
-					"Agree to all terms, privacy fees and policies"
-				);
-		},
-		//微信登录
-		wechatLogin(value:any) {
-			let data = {
-				code : value.code,
-				type:2
-			}
-			this.loadingShow = true
-		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
-                .then((rv: any) => {
-					this.loadingShow = false
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {this.loadingShow = false});
-		},
-		//谷歌登录
-		googelLogin(value:any) {
-			let data = {credential : value,type:2}
-		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-		},
-		//登陆成功设置参数
-		setSuccessLogin(rv:any){
-			if (rv) {
-				if (rv.systemUser == 4) {
-					rv.systemUser = 1;
-				}
-				this.createTimer();
-				let isTest = rv.systemUser == 3 ? true : false;
-				let isBeginner = rv.isBeginner == 1 ? true : false;
-				let token = rv.token;
-				setCookie("isMurmur", false);
-				setCookie("token", token);
-				setCookie("isTest", isTest);
-				setCookie("isBeginner", isBeginner);
-				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
-				setCookie("userInfo", JSON.stringify(rv));
-				let userid:any = {
-					ueserId:rv.userId,
-					systemUser:rv.systemUser,
-				}
-				if(rv.email)userid.email = rv.email
-				this.store.commit("upUserDetail", userid);
-				
-				if (window.innerWidth < 768) {
-					message.info(
-						"If you need to design, please log in using an iPad or computer."
-					);
-					this.turnToHomePage("/Square");
-				} else {
-					this.turnToHomePage("/home");
-				}
-				sessionStorage.setItem(
-					"isTimeOne",
-					JSON.stringify(false)
-				); //是否需要公告 提示 弹窗
-				let randomNum: any =
-					Math.floor(Math.random() * 9000000000000000) +
-					1000000000000000;
-				sessionStorage.setItem("sessionId", randomNum);
-				sessionStorage.setItem("record", JSON.stringify([]));
-			}
-		},
-        //修改密码提交
-        submitResetPassword() {
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: this.forgetEmailValue,
-                password: md5(this.newPassword + "abc"),
-                verifyEmail: false,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        message.success("Changing the password successfully");
-                        this.changeIsLogin(1);
-                    }
-                }
-            );
-        },
-
-        //创建定时器
-        createTimer() {
-            this.timer = setInterval(() => {
-                this.time--;
-                if (!this.time) {
-                    clearInterval(this.timer);
-                }
-            }, 1000);
-        },
-
-        //清除定时器
-        clearTimer() {
-            this.time = 60;
-            if (this.timer) {
-                clearInterval(this.timer);
-            }
-        },
-
-        //跳转到首页
-        turnToHomePage(str: any) {
-            // this.getLang();
-            // this.$router.push("/home");
-            // console.log(window.location.search.substring(1));
-            this.store.commit("clearAllData");
-            this.store.commit("clearAllCollection");
-            this.store.commit("setAllBoardDataChoose", {});
-            this.store.commit("clearShowSketchboard", {});
-            this.$router.push(str);
-        },
-        //获取当前语言
-        // getLang() {
-        //     let data = {};
-        //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
-        //         (rv: any) => {
-        //             if (rv) {
-        //                 this.locale = rv;
-        //                 setLang(rv);
-        //             }
-        //         }
-        //     );
-        // },
+    //修改密码提交
+    submitResetPassword() {
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: this.forgetEmailValue,
+        password: md5(this.newPassword + "abc"),
+        verifyEmail: false,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          message.success("Changing the password successfully");
+          this.changeIsLogin(1);
+        }
+      });
     },
-	mounted() {
-		const data = this.$route.query
-		if(data?.state == 'weiXin'){
-			this.wechatLogin(data)
-		}
-	},
+
+    //创建定时器
+    createTimer() {
+      this.timer = setInterval(() => {
+        this.time--;
+        if (!this.time) {
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+
+    //清除定时器
+    clearTimer() {
+      this.time = 60;
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+
+    //跳转到首页
+    turnToHomePage(str: any) {
+      // this.getLang();
+      // this.$router.push("/home");
+      // console.log(window.location.search.substring(1));
+      this.store.commit("clearAllData");
+      this.store.commit("clearAllCollection");
+      this.store.commit("setAllBoardDataChoose", {});
+      this.store.commit("clearShowSketchboard", {});
+      this.$router.push(str);
+    },
+    //获取当前语言
+    // getLang() {
+    //     let data = {};
+    //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
+    //         (rv: any) => {
+    //             if (rv) {
+    //                 this.locale = rv;
+    //                 setLang(rv);
+    //             }
+    //         }
+    //     );
+    // },
+  },
+  mounted() {
+    const data = this.$route.query;
+    if (data?.state == "weiXin") {
+      this.wechatLogin(data);
+    }
+  },
 });
 </script>
 <style lang="less" scoped>
 .login_page {
-    width: 100%;
-    height: 100%;
-    .page_content {
-        .login_content {
-			margin: 0 auto;
-            position: relative;
-			width: 100%;
-			// height: 100%;
-			// width: 80%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            @media (max-width: 768px) {
-                width: 100%;
-            }
-            .login_content_left {
-                width: 100%;
-                @media (max-width: 768px) {
-                    width: 100%;
-                }
-                .login_form_email {
-					margin-top: 3rem;
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    background: #fff;
-                    transform: scale(0);
-                    transition: 0.3s all;
-                    border: 2px solid;
-                    border-radius: 20px;
-                    .email_last_step {
-                        width: 100%;
-                        height: 100%;
-                        #app {
-                            height: auto;
-                        }
-                    }
-                }
-                .active {
-                    transform: scale(1);
-                }
-            }
-            .login_form_title {
-                font-size: 1.6rem;
-                // color: #666666;
-                font-weight: 900;
-                color: #000;
-                display: flex;
-                justify-content: space-between;
-                box-sizing: border-box;
-                label {
-                    display: flex;
-                    span {
-                        font-size: 1.6rem;
-                        margin-left: 10px;
-                        font-weight: normal;
-                    }
-                    &.active {
-                        pointer-events: none;
-                        input {
-                            pointer-events: none;
-                        }
-                    }
-                }
-            }
-
-            .login_form_content {
-                position: relative;
-                &[state="2"] {
-                    > * {
-                        opacity: 0;
-                    }
-                    .login_form_email {
-                        opacity: 1;
-                    }
-                }
-                .password_input_block {
-                    position: relative;
-
-                    .password_show_icon {
-                        position: absolute;
-                        font-size: 2.4rem;
-                        right: 2rem;
-                        top: 1.7rem;
-                        cursor: pointer;
-                    }
-                }
-
-                .login_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-					transition: all .3s;
-					&:hover{
-						border: 0.1rem solid #000;
-					}
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .email_last_step {
-                // margin-top: 4rem;
-                .email_last_step_bottom {
-                    padding: 0 40px;
-                }
-                .email_last_step_block {
-                    padding: 10px;
-                    border-bottom: 2px solid;
-                    box-sizing: border-box;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    .email_last_step_content {
-                        margin-left: 1rem;
-                        font-size: 2.2rem;
-                        font-weight: bold;
-                        color: #030303;
-                    }
-                    .email_last_step_block_icon {
-                        cursor: pointer;
-                        margin-right: 1rem;
-                        height: 20px;
-                    }
-                }
-
-                .fi-br-arrow-left {
-                    font-size: 2.5rem;
-                    font-weight: bold;
-                    color: #030303;
-                    transform: translateY(1rem);
-                    display: inline-block;
-                }
-            }
-
-            .login_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-				transition: all .3s;
-				&:hover{
-					background: #3C3C3C;
-				}
-                &[state="2"] {
-                    cursor: not-allowed;
-                }
-            }
-            .login_text {
-                font-size: 1.6rem;
-                margin-top: 4rem;
-                color: #151515;
-                display: flex;
-                justify-content: flex-end;
-
-                .forget_password_text {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .forget_password_content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60rem;
-            background: #ffffff;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
-            border-radius: 1rem;
-            padding: 3rem 6rem 6.5rem;
-            box-sizing: border-box;
-
-            .forget_password_content_block {
-                cursor: pointer;
-            }
-
-            .fi-br-arrow-left {
-                font-size: 3.8rem;
-                font-weight: bold;
-                color: #030303;
-                transform: translateY(1rem);
-                display: inline-block;
-            }
-            .forget_password_content_title {
-                font-size: 3.2rem;
-                font-weight: bold;
-                color: #030303;
-                margin-left: 2rem;
-            }
-
-            .forget_passored_form_content {
-                margin-top: 3.5rem;
-
-                .forget_passored_form_title {
-                    font-size: 2.4rem;
-                    font-weight: bold;
-                    color: #030303;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-                }
-
-                .forget_passored_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .forget_verif_code_des {
-                font-size: 2.4rem;
-                font-weight: bold;
-                color: #030303;
-                margin-top: 3.5rem;
-            }
-
-            .forget_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-            }
-        }
-    }
-
-    .login_footer {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        left: 0;
-        bottom: 3.5rem;
+  width: 100%;
+  height: 100%;
+  .page_content {
+    .login_content {
+      margin: 0 auto;
+      position: relative;
+      width: 100%;
+      // height: 100%;
+      // width: 80%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @media (max-width: 768px) {
         width: 100%;
-        padding: 0 4rem;
-
-        .login_footer_item {
-            display: flex;
-            align-items: center;
-
-            .login_footer_item_text {
-                font-size: 1.3rem;
-                color: #151515;
-            }
-
-            .footer_item_text_pointer {
-                cursor: pointer;
-            }
-
-            .login_footer_line {
-                width: 0.1rem;
-                height: 2rem;
-                margin: 0 2rem;
-                background: #b9b9b9;
-            }
+      }
+      .login_content_left {
+        width: 100%;
+        @media (max-width: 768px) {
+          width: 100%;
         }
-    }
-
-    .marign_top20 {
-        margin-top: 2rem;
-    }
-
-    .marign_top22 {
-        margin-top: 2.2rem;
-    }
-
-    .marign_top30 {
-        margin-top: 3rem;
-    }
-    .marign_top40 {
-        margin-top: 4rem;
-    }
-	.thirdPartyLogin{
-		display: flex;
-		// justify-content: flex-start;
-		> div{
-			position: relative;
-			margin-right: 1rem;
-			> .mask{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				z-index: 2;
-				cursor: pointer;
-			}
-		}
-	}
-    .tip_content {
-        font-size: 1.3rem;
-        font-weight: bold;
+        .login_form_email {
+          margin-top: 3rem;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          transform: scale(0);
+          transition: 0.3s all;
+          border: 2px solid;
+          border-radius: 20px;
+          .email_last_step {
+            width: 100%;
+            height: 100%;
+            #app {
+              height: auto;
+            }
+          }
+        }
+        .active {
+          transform: scale(1);
+        }
+      }
+      .login_form_title {
+        font-size: 1.6rem;
+        // color: #666666;
+        font-weight: 900;
         color: #000;
-        cursor: pointer;
-    }
-
-    .email_last_step_des {
         display: flex;
-        align-items: center;
         justify-content: space-between;
-        margin-top: 4rem;
-        margin-bottom: 2rem;
+        box-sizing: border-box;
+        label {
+          display: flex;
+          span {
+            font-size: 1.6rem;
+            margin-left: 10px;
+            font-weight: normal;
+          }
+          &.active {
+            pointer-events: none;
+            input {
+              pointer-events: none;
+            }
+          }
+        }
+      }
 
-        .sent_email_content {
-            font-size: 1.8rem;
-            font-weight: bold;
+      .login_form_content {
+        position: relative;
+        &[state="2"] {
+          > * {
+            opacity: 0;
+          }
+          .login_form_email {
+            opacity: 1;
+          }
+        }
+        .password_input_block {
+          position: relative;
+
+          .password_show_icon {
+            position: absolute;
+            font-size: 2.4rem;
+            right: 2rem;
+            top: 1.7rem;
+            cursor: pointer;
+          }
+        }
+
+        .login_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+          transition: all 0.3s;
+          &:hover {
+            border: 0.1rem solid #000;
+          }
+          &::placeholder {
             color: #a5b0c2;
+          }
+        }
+      }
+
+      .email_last_step {
+        // margin-top: 4rem;
+        .email_last_step_bottom {
+          padding: 0 40px;
+        }
+        .email_last_step_block {
+          padding: 10px;
+          border-bottom: 2px solid;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .email_last_step_content {
+            margin-left: 1rem;
+            font-size: 2.2rem;
+            font-weight: bold;
+            color: #030303;
+          }
+          .email_last_step_block_icon {
+            cursor: pointer;
+            margin-right: 1rem;
+            height: 20px;
+          }
         }
 
-        .email_tip_content {
-            font-size: 1.4rem;
-            color: #030303;
+        .fi-br-arrow-left {
+          font-size: 2.5rem;
+          font-weight: bold;
+          color: #030303;
+          transform: translateY(1rem);
+          display: inline-block;
         }
+      }
+
+      .login_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          background: #3c3c3c;
+        }
+        &[state="2"] {
+          cursor: not-allowed;
+        }
+      }
+      .login_text {
+        font-size: 1.6rem;
+        margin-top: 4rem;
+        color: #151515;
+        display: flex;
+        justify-content: flex-end;
+
+        .forget_password_text {
+          cursor: pointer;
+        }
+      }
     }
+
+    .forget_password_content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60rem;
+      background: #ffffff;
+      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
+      border-radius: 1rem;
+      padding: 3rem 6rem 6.5rem;
+      box-sizing: border-box;
+
+      .forget_password_content_block {
+        cursor: pointer;
+      }
+
+      .fi-br-arrow-left {
+        font-size: 3.8rem;
+        font-weight: bold;
+        color: #030303;
+        transform: translateY(1rem);
+        display: inline-block;
+      }
+      .forget_password_content_title {
+        font-size: 3.2rem;
+        font-weight: bold;
+        color: #030303;
+        margin-left: 2rem;
+      }
+
+      .forget_passored_form_content {
+        margin-top: 3.5rem;
+
+        .forget_passored_form_title {
+          font-size: 2.4rem;
+          font-weight: bold;
+          color: #030303;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+        }
+
+        .forget_passored_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+
+          &::placeholder {
+            color: #a5b0c2;
+          }
+        }
+      }
+
+      .forget_verif_code_des {
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: #030303;
+        margin-top: 3.5rem;
+      }
+
+      .forget_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .login_footer {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    left: 0;
+    bottom: 3.5rem;
+    width: 100%;
+    padding: 0 4rem;
+
+    .login_footer_item {
+      display: flex;
+      align-items: center;
+
+      .login_footer_item_text {
+        font-size: 1.3rem;
+        color: #151515;
+      }
+
+      .footer_item_text_pointer {
+        cursor: pointer;
+      }
+
+      .login_footer_line {
+        width: 0.1rem;
+        height: 2rem;
+        margin: 0 2rem;
+        background: #b9b9b9;
+      }
+    }
+  }
+
+  .marign_top20 {
+    margin-top: 2rem;
+  }
+
+  .marign_top22 {
+    margin-top: 2.2rem;
+  }
+
+  .marign_top30 {
+    margin-top: 3rem;
+  }
+  .marign_top40 {
+    margin-top: 4rem;
+  }
+  .thirdPartyLogin {
+    display: flex;
+    // justify-content: flex-start;
+    > div {
+      position: relative;
+      margin-right: 1rem;
+      > .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+      }
+    }
+  }
+  .tip_content {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #000;
+    cursor: pointer;
+  }
+
+  .email_last_step_des {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+
+    .sent_email_content {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #a5b0c2;
+    }
+
+    .email_tip_content {
+      font-size: 1.4rem;
+      color: #030303;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/LoginPage/login/school.vue b/src/component/LoginPage/login/school.vue
index 174af49c..21b16f5b 100644
--- a/src/component/LoginPage/login/school.vue
+++ b/src/component/LoginPage/login/school.vue
@@ -1,140 +1,115 @@
 <template>
-    <div class="login_page">
-        <div class="page_content">
-            <!-- 账号密码和邮箱登录  start-->
-            <div class="login_content" v-if="isLogin === 1">
-                <div class="login_content_left">
-                    <!-- 账号密码登录 start -->
-                    <!-- v-show="loginType == 'username'" -->
-                    <div>
-                        <div class="login_form_content" :state="emailStap">
-							
-							<div v-show="emailStap === 1">
-								<div class="login_form_title marign_top30">
-									School
-								</div>
-								<div  class="generalModel_state">
-									<div class="generalModel_state_item" style="width: 100%; margin: 0;">
-										<a-select
-											placeholder="Select a school"
-											v-model:value="selectSchool"
-											:options="schoolList"
-											@change="schoolListChange"
-											style="width:100%"
-											show-search
-											size="large"
-											:fieldNames="{ label: 'name', value: 'value' }"
-											:filter-option="filterOption"
-											@focus="handleFocus"
-										>
-											<template #suffixIcon
-												><span
-													class="icon iconfont icon-xiala"
-													style="color: #000"
-												></span
-											></template>
-										</a-select>
-									</div>
-								</div>
-								<div class="login_form_title marign_top30">
-									Email
-								</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your email address"
-									v-model="email"
-									@keydown.enter="submitPerLogin()"
-								/>
-								<div class="login_form_title marign_top30">
-									<div>Password</div>
-								</div>
-								<div class="password_input_block">
-									<input
-										class="login_form_input"
-										:type="passwordType"
-										placeholder="Enter your password"
-										v-model="password"
-										@keydown.enter="submitPerLogin()"
-									/>
-									<div
-										class="icon iconfont icon-yanjing_yincang_o password_show_icon"
-										@click="changePasswordType()"
-									></div>
-								</div>
-							</div>
-							
+  <div class="login_page">
+    <div class="page_content">
+      <!-- 账号密码和邮箱登录  start-->
+      <div class="login_content" v-if="isLogin === 1">
+        <div class="login_content_left">
+          <!-- 账号密码登录 start -->
+          <!-- v-show="loginType == 'username'" -->
+          <div>
+            <div class="login_form_content" :state="emailStap">
+              <div v-show="emailStap === 1">
+                <div class="login_form_title marign_top30">School</div>
+                <div class="generalModel_state">
+                  <div
+                    class="generalModel_state_item"
+                    style="width: 100%; margin: 0"
+                  >
+                    <a-select
+                      placeholder="Select a school"
+                      v-model:value="selectSchool"
+                      :options="schoolList"
+                      @change="schoolListChange"
+                      style="width: 100%"
+                      show-search
+                      size="large"
+                      :fieldNames="{ label: 'name', value: 'value' }"
+                      :filter-option="filterOption"
+                      @focus="handleFocus"
+                    >
+                      <template #suffixIcon
+                        ><span
+                          class="icon iconfont icon-xiala"
+                          style="color: #000"
+                        ></span
+                      ></template>
+                    </a-select>
+                  </div>
+                </div>
+                <div class="login_form_title marign_top30">Email</div>
+                <input
+                  class="login_form_input"
+                  placeholder="Enter your email address"
+                  v-model="email"
+                  @keydown.enter="submitPerLogin()"
+                />
+                <div class="login_form_title marign_top30">
+                  <div>Password</div>
+                </div>
+                <div class="password_input_block">
+                  <input
+                    class="login_form_input"
+                    :type="passwordType"
+                    placeholder="Enter your password"
+                    v-model="password"
+                    @keydown.enter="submitPerLogin()"
+                  />
+                  <div
+                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+                    @click="changePasswordType()"
+                  ></div>
+                </div>
+              </div>
 
-                            <!-- 邮箱登录 start -->
-                            <div
-								v-show="emailStap === 2"
-                                class="login_form_email"
-                                :class="{ active: emailStap === 2 }"
-                            >
-                                <div
-                                    v-show="emailStap === 2"
-                                    class="email_last_step"
-                                >
-                                    <div class="email_last_step_block">
-                                        <span class="email_last_step_content"
-                                            >Verify with one-time verification
-                                            code</span
-                                        >
-                                        <i
-                                            class="fi fi-br-cross email_last_step_block_icon"
-                                            @click="emailLastStepFun()"
-                                        ></i>
-                                    </div>
-                                    <div class="email_last_step_bottom">
-                                        <div class="email_last_step_des">
-                                            <div class="sent_email_content">
-                                                Sent to {{ email }}
-                                            </div>
-                                            <div class="tip_content">
-                                                <span v-show="time"
-                                                    >{{ time }}s</span
-                                                >
-                                                <span
-                                                    v-show="!time"
-                                                    @click="emailNextStepFun()"
-                                                    >Resend</span
-                                                >
-                                            </div>
-                                        </div>
-                                        <VerificationCodeInput
-                                            :ct="emailCode"
-                                            @sendCaptcha="
-                                                submitEmailLogin($event)
-                                            "
-                                        ></VerificationCodeInput>
+              <!-- 邮箱登录 start -->
+              <div
+                v-show="emailStap === 2"
+                class="login_form_email"
+                :class="{ active: emailStap === 2 }"
+              >
+                <div v-show="emailStap === 2" class="email_last_step">
+                  <div class="email_last_step_block">
+                    <span class="email_last_step_content"
+                      >Verify with one-time verification code</span
+                    >
+                    <i
+                      class="fi fi-br-cross email_last_step_block_icon"
+                      @click="emailLastStepFun()"
+                    ></i>
+                  </div>
+                  <div class="email_last_step_bottom">
+                    <div class="email_last_step_des">
+                      <div class="sent_email_content">Sent to {{ email }}</div>
+                      <div class="tip_content">
+                        <span v-show="time">{{ time }}s</span>
+                        <span v-show="!time" @click="emailNextStepFun()"
+                          >Resend</span
+                        >
+                      </div>
+                    </div>
+                    <VerificationCodeInput
+                      :ct="emailCode"
+                      @sendCaptcha="submitEmailLogin($event)"
+                    ></VerificationCodeInput>
 
-                                        <div class="email_last_step_des">
-                                            <div
-                                                class="sent_email_content email_tip_content"
-                                            >
-                                                Please check the junk box if you
-                                                haven't received verification
-                                                code
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
+                    <div class="email_last_step_des">
+                      <div class="sent_email_content email_tip_content">
+                        Please check the junk box if you haven't received
+                        verification code
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
 
-                        <div class="login_form_title marign_top30">
-                            <label :class="{ active: emailStap == 2 }">
-                                <input
-                                    :state="emailStap"
-                                    type="checkbox"
-                                    v-model="checked"
-                                />
-                                <span
-                                    >I agree to all Term, Privacy Policy and
-                                    Fees</span
-                                >
-                            </label>
-                        </div>
-						<!-- <div class="thirdPartyLogin marign_top30">
+            <div class="login_form_title marign_top30">
+              <label :class="{ active: emailStap == 2 }">
+                <input :state="emailStap" type="checkbox" v-model="checked" />
+                <span>I agree to all Term, Privacy Policy and Fees</span>
+              </label>
+            </div>
+            <!-- <div class="thirdPartyLogin marign_top30">
 							<div class="label">
 								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
 								<googleLogin @googelLogin="googelLogin"></googleLogin>
@@ -144,15 +119,15 @@
 								<weiXinLogin></weiXinLogin>
 							</div>
 						</div> -->
-                        <div
-                            class="login_submit_button marign_top40"
-                            :state="emailStap"
-                            @click="submitPerLogin()"
-                        >
-                            Sign in
-                        </div>
+            <div
+              class="login_submit_button marign_top40"
+              :state="emailStap"
+              @click="submitPerLogin()"
+            >
+              Sign in
+            </div>
 
-                        <!-- <div class="login_text">
+            <!-- <div class="login_text">
                             <div
                                 class="forget_password_text"
                                 @click="changeIsLogin(2)"
@@ -160,91 +135,87 @@
                                 Forgot your password
                             </div>
                         </div> -->
-                    </div>
-                    <!-- 账号密码登录 end -->
-                </div>
-
-                <!-- 邮箱登录 end -->
-            </div>
-
-            <!-- 忘记密码 start -->
-            <div class="forget_password_content" v-else>
-                <div
-                    class="forget_password_content_block"
-                    @click="forgetPasswordLastStepFun()"
-                >
-                    <i class="fi fi-br-arrow-left"></i>
-                    <span class="forget_password_content_title"
-                        >Retrieve password</span
-                    >
-                </div>
-                <div v-show="frogetPasswordStep === 1">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Email</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter your email"
-                            v-model="forgetPasswordEmail"
-                            @keydown.enter="forgetPasswordNextStepFun()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="forgetPasswordNextStepFun()"
-                    >
-                        Next step
-                    </div>
-                </div>
-
-                <div v-show="frogetPasswordStep === 2">
-                    <div class="forget_verif_code_des">Verification Code</div>
-                    <div class="email_last_step_des">
-                        <div class="sent_email_content">
-                            Sent to {{ forgetPasswordEmail }}
-                        </div>
-                        <div class="tip_content">
-                            <span v-show="time">{{ time }}s</span>
-                            <span
-                                v-show="!time"
-                                @click="forgetPasswordNextStepFun()"
-                                >Resend</span
-                            >
-                        </div>
-                    </div>
-                    <VerificationCodeInput
-                        :ct="emailCode"
-                        @sendCaptcha="submitPasswordCode($event)"
-                    ></VerificationCodeInput>
-                </div>
-
-                <div v-show="frogetPasswordStep === 3">
-                    <div class="forget_passored_form_content">
-                        <div class="forget_passored_form_title">Password</div>
-                        <input
-                            class="forget_passored_form_input"
-                            placeholder="Enter a new password"
-                            v-model="newPassword"
-                            @keydown.enter="submitResetPassword()"
-                        />
-                    </div>
-                    <div
-                        class="forget_submit_button marign_top40"
-                        @click="submitResetPassword()"
-                    >
-                        Submit
-                    </div>
-                </div>
-            </div>
-            <!-- 忘记密码 end -->
+          </div>
+          <!-- 账号密码登录 end -->
         </div>
-		<div class="mark_loading" v-show="loadingShow">
-			<a-spin size="large" />
-		</div>
+
+        <!-- 邮箱登录 end -->
+      </div>
+
+      <!-- 忘记密码 start -->
+      <div class="forget_password_content" v-else>
+        <div
+          class="forget_password_content_block"
+          @click="forgetPasswordLastStepFun()"
+        >
+          <i class="fi fi-br-arrow-left"></i>
+          <span class="forget_password_content_title">Retrieve password</span>
+        </div>
+        <div v-show="frogetPasswordStep === 1">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Email</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter your email"
+              v-model="forgetPasswordEmail"
+              @keydown.enter="forgetPasswordNextStepFun()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="forgetPasswordNextStepFun()"
+          >
+            Next step
+          </div>
+        </div>
+
+        <div v-show="frogetPasswordStep === 2">
+          <div class="forget_verif_code_des">Verification Code</div>
+          <div class="email_last_step_des">
+            <div class="sent_email_content">
+              Sent to {{ forgetPasswordEmail }}
+            </div>
+            <div class="tip_content">
+              <span v-show="time">{{ time }}s</span>
+              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                >Resend</span
+              >
+            </div>
+          </div>
+          <VerificationCodeInput
+            :ct="emailCode"
+            @sendCaptcha="submitPasswordCode($event)"
+          ></VerificationCodeInput>
+        </div>
+
+        <div v-show="frogetPasswordStep === 3">
+          <div class="forget_passored_form_content">
+            <div class="forget_passored_form_title">Password</div>
+            <input
+              class="forget_passored_form_input"
+              placeholder="Enter a new password"
+              v-model="newPassword"
+              @keydown.enter="submitResetPassword()"
+            />
+          </div>
+          <div
+            class="forget_submit_button marign_top40"
+            @click="submitResetPassword()"
+          >
+            Submit
+          </div>
+        </div>
+      </div>
+      <!-- 忘记密码 end -->
     </div>
+    <div class="mark_loading" v-show="loadingShow">
+      <a-spin size="large" />
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive,toRefs } from "vue";
+import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie, WriteCookie } from "@/tool/cookie";
@@ -256,772 +227,760 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
+  components: {
+    VerificationCodeInput,
+    googleLogin,
+    weiXinLogin,
+    phoneLogin,
+  },
+  setup() {
+    let timer: any = 0;
+    const { locale } = useI18n();
+    const store = useStore();
+    let loadingShow = ref(false);
+    const data = reactive({
+      selectSchool: "",
+      schoolList: [] as any,
+    });
+    const schoolListChange = (e: any) => {};
+    const filterOption = (e: any) => {
+      let params = {
+        name: e,
+        type: "School",
+      };
+      Https.axiosPost(
+        Https.httpUrls.organizationNameSearch,
+        {},
+        { params: params }
+      ).then((rv: any) => {
+        data.schoolList = rv.map((item: any) => {
+          return {
+            label: item,
+            value: item,
+          };
+        });
+      });
+    };
+    const handleFocus = () => {
+      if (data.schoolList.length == 0) {
+        filterOption("");
+      }
+    };
+    return {
+      ...toRefs(data),
+      store,
+      timer,
+      locale,
+      loadingShow,
+      schoolListChange,
+      filterOption,
+      handleFocus,
+    };
+  },
+  data() {
+    return {
+      checked: false,
+      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
+      loginType: "username",
+      emailStap: 1, // 邮箱登录步骤
+      emailCode: ["", "", "", "", "", ""], //邮箱验证码
+      emailNextStep: true,
+      username: "",
+      password: localStorage.getItem("loginPassword") || "",
+      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+      frogetPasswordStep: 1, //忘记密码的步骤
+      forgetPasswordEmail: "",
+      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
+      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
+      newPassword: "", //新密码
+      isCheckRobot: false,
+      time: 60, //60秒倒计时
+      passwordType: "password",
+      userId: "",
+      loginTime: true,
+    };
+  },
+
+  methods: {
+    changeLoginType(type: string) {
+      this.loginType = type;
     },
-    setup() {
-        let timer: any = 0;
-        const { locale } = useI18n();
-        const store = useStore();
-		let loadingShow = ref(false)
-		const data = reactive({
-			selectSchool:'',
-			schoolList:[] as any,
-		})
-		const schoolListChange = (e:any)=>{
-		}
-		const filterOption = (e:any)=>{
-			let params = {
-				name:e,
-				type:'School'
-			}
-			Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
-				data.schoolList = rv.map((item:any)=>{
-					return {
-						label:item,
-						value:item,
-					}	
-				})
-			})
-			
-		}
-		const handleFocus= ()=>{
-			if(data.schoolList.length == 0){
-				filterOption('')
-			}
-		}
-        return {
-			...toRefs(data),
-            store,
-            timer,
-            locale,
-			loadingShow,
-			schoolListChange,
-			filterOption,handleFocus
+
+    //是否忘记密码页面
+    changeIsLogin(isLogin: number) {
+      if (isLogin === 1) {
+        //登录
+        this.forgetPasswordEmail = "";
+        this.frogetPasswordStep = 1;
+        this.forgetEmailCode = ["", "", "", "", "", ""];
+        this.emailStap = 1;
+        this.clearTimer();
+      } else {
+        this.username = "";
+        this.password = "";
+      }
+      this.isLogin = isLogin;
+    },
+
+    //邮箱登录的下一步
+    emailNextStepFun() {
+      if (!isEmail(this.email)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.email,
+        operationType: "LOGIN",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.emailStap = 2;
+          this.time = 60;
+          this.emailCode = ["", "", "", "", "", ""];
+          this.createTimer();
+        }
+      });
+    },
+
+    //邮箱登录的上一步
+    emailLastStepFun() {
+      this.emailStap = 1;
+      (this.username = ""), (this.password = ""), (this.email = "");
+      (this.checked = false),
+        (this.loginType = "username"),
+        (this.emailCode = ["", "", "", "", "", ""]),
+        this.clearTimer();
+    },
+
+    //忘记密码的下一步
+    forgetPasswordNextStepFun() {
+      if (!isEmail(this.forgetPasswordEmail)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.forgetPasswordEmail,
+        operationType: "FORGET_PWD",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.frogetPasswordStep = 2;
+          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+        }
+      });
+    },
+    //忘记密码的上一步
+    forgetPasswordLastStepFun() {
+      if (this.frogetPasswordStep === 1) {
+        this.changeIsLogin(1);
+      } else {
+        this.frogetPasswordStep = this.frogetPasswordStep - 1;
+        this.forgetPasswordEmail = "";
+        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+      }
+    },
+
+    //忘记密码填写完邮箱验证码进行下一步
+    submitPasswordCode(emailVerifyCode: any) {
+      // console.log(123123);
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: emailVerifyCode,
+        password: "",
+        verifyEmail: true,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          this.forgetEmailValue = emailVerifyCode;
+          this.frogetPasswordStep = 3;
+          this.clearTimer();
+        }
+      });
+    },
+
+    //改变勾选是否是机器人
+    checkRobot() {
+      this.isCheckRobot = !this.isCheckRobot;
+    },
+
+    //提交账号密码预先登录
+    submitPerLogin() {
+      //输入账号密码
+      if (this.emailStap >= 2) {
+        return;
+      } else {
+        if (!this.password) {
+          message.info("Please enter your account number or password");
+          return;
+        }
+        //输入邮箱
+        if (!this.email) {
+          message.info("Please enter your email address");
+          return;
+        }
+        if (!this.selectSchool) {
+          message.info("Please select a school");
+          return;
+        }
+        //判断邮箱格式是否正确
+        if (!isEmail(this.email)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        //判断是否同意隐私政策
+        if (!this.checked) {
+          message.info("Agree to all terms, privacy fees and policies");
+          return;
+        }
+        let data = {
+          password: md5(this.password + "abc"),
+          userName: "a",
+          // userName: this.username,
+          organizationName: this.selectSchool,
+          email: this.email,
+          operationType: "LOGIN",
+          ip: "",
         };
+
+        if (this.loginTime) {
+          this.loginTime = false;
+          Https.axiosPost(Https.httpUrls.schoolLogin, data)
+            .then((rv: any) => {
+              if (rv) {
+                this.clearTimer();
+                this.time = 60;
+                this.emailStap = 2;
+                this.emailCode = ["", "", "", "", "", ""];
+                this.createTimer();
+                this.userId = rv.userId;
+                this.loginType = "email";
+                localStorage.setItem("loginEmail", this.email);
+                localStorage.setItem("loginPassword", this.password);
+              }
+            })
+            .catch((res) => {
+              this.emailStap = 1;
+            });
+          setTimeout(() => {
+            this.loginTime = true;
+          }, 2000);
+        }
+      }
     },
-    data() {
-        return {
-            checked: false,
-            isLogin: 1, //是否为登录 1-登录， 2-忘记密码
-            loginType: "username",
-            emailStap: 1, // 邮箱登录步骤
-            emailCode: ["", "", "", "", "", ""], //邮箱验证码
-            emailNextStep: true,
-            username: "",
-            password: localStorage.getItem("loginPassword") || '',
-            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
-            frogetPasswordStep: 1, //忘记密码的步骤
-            forgetPasswordEmail: "",
-            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
-            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
-            newPassword: "", //新密码
-            isCheckRobot: false,
-            time: 60, //60秒倒计时
-            passwordType: "password",
-            userId: "",
-            loginTime: true,
+
+    changePasswordType() {
+      this.passwordType =
+        this.passwordType === "password" ? "text" : "password";
+    },
+
+    //邮箱登录提交
+    submitEmailLogin(emailVerifyCode: any) {
+      let data = {
+        email: this.email,
+        emailVerifyCode: emailVerifyCode,
+        loginType: "EMAIL",
+        userId: this.userId,
+        organizationName: this.selectSchool,
+      };
+      Https.axiosPost(Https.httpUrls.accountLogin, data)
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    isCheckAgreement() {
+      message.info("Agree to all terms, privacy fees and policies");
+    },
+    //微信登录
+    wechatLogin(value: any) {
+      let data = {
+        code: value.code,
+        type: 2,
+      };
+      this.loadingShow = true;
+      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+        .then((rv: any) => {
+          this.loadingShow = false;
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {
+          this.loadingShow = false;
+        });
+    },
+    //谷歌登录
+    googelLogin(value: any) {
+      let data = { credential: value, type: 2 };
+      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    //登陆成功设置参数
+    setSuccessLogin(rv: any) {
+      if (rv) {
+        if (rv.systemUser == 4) {
+          rv.systemUser = 1;
+        }
+        this.createTimer();
+        let isTest = rv.systemUser == 3 ? true : false;
+        let isBeginner = rv.isBeginner == 1 ? true : false;
+        let token = rv.token;
+        setCookie("isMurmur", false);
+        setCookie("token", token);
+        setCookie("isTest", isTest);
+        setCookie("isBeginner", isBeginner);
+        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+        setCookie("userInfo", JSON.stringify(rv));
+        let userid: any = {
+          ueserId: rv.userId,
+          systemUser: rv.systemUser,
         };
+        if (rv.email) userid.email = rv.email;
+        this.store.commit("upUserDetail", userid);
+
+        if (window.innerWidth < 768) {
+          message.info(
+            "If you need to design, please log in using an iPad or computer."
+          );
+          this.turnToHomePage("/Square");
+        } else {
+          this.turnToHomePage("/home");
+        }
+        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+        let randomNum: any =
+          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+        sessionStorage.setItem("sessionId", randomNum);
+        sessionStorage.setItem("record", JSON.stringify([]));
+      }
     },
-	
-    methods: {
-        changeLoginType(type: string) {
-            this.loginType = type;
-        },
-
-        //是否忘记密码页面
-        changeIsLogin(isLogin: number) {
-            if (isLogin === 1) {
-                //登录
-                this.forgetPasswordEmail = "";
-                this.frogetPasswordStep = 1;
-                this.forgetEmailCode = ["", "", "", "", "", ""];
-                this.emailStap = 1;
-                this.clearTimer();
-            } else {
-                this.username = "";
-                this.password = "";
-            }
-            this.isLogin = isLogin;
-        },
-
-        //邮箱登录的下一步
-        emailNextStepFun() {
-            if (!isEmail(this.email)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.email,
-                operationType: "LOGIN",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.emailStap = 2;
-                        this.time = 60;
-                        this.emailCode = ["", "", "", "", "", ""];
-                        this.createTimer();
-                    }
-                }
-            );
-        },
-
-        //邮箱登录的上一步
-        emailLastStepFun() {
-            this.emailStap = 1;
-            (this.username = ""), (this.password = ""), (this.email = "");
-            (this.checked = false),
-                (this.loginType = "username"),
-                (this.emailCode = ["", "", "", "", "", ""]),
-                this.clearTimer();
-        },
-
-        //忘记密码的下一步
-        forgetPasswordNextStepFun() {
-            if (!isEmail(this.forgetPasswordEmail)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.forgetPasswordEmail,
-                operationType: "FORGET_PWD",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.frogetPasswordStep = 2;
-                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                            this.createTimer();
-                    }
-                }
-            );
-        },
-        //忘记密码的上一步
-        forgetPasswordLastStepFun() {
-            if (this.frogetPasswordStep === 1) {
-                this.changeIsLogin(1);
-            } else {
-                this.frogetPasswordStep = this.frogetPasswordStep - 1;
-                this.forgetPasswordEmail = "";
-                (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                    this.clearTimer();
-            }
-        },
-
-        //忘记密码填写完邮箱验证码进行下一步
-        submitPasswordCode(emailVerifyCode: any) {
-            // console.log(123123);
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: emailVerifyCode,
-                password: "",
-                verifyEmail: true,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.forgetEmailValue = emailVerifyCode;
-                        this.frogetPasswordStep = 3;
-                        this.clearTimer();
-                    }
-                }
-            );
-        },
-
-        //改变勾选是否是机器人
-        checkRobot() {
-            this.isCheckRobot = !this.isCheckRobot;
-        },
-
-        //提交账号密码预先登录
-        submitPerLogin() {
-            //输入账号密码
-            if (this.emailStap >= 2) {
-                return;
-            } else {
-                if (!this.password) {
-                    message.info(
-                        "Please enter your account number or password"
-                    );
-                    return;
-                }
-                //输入邮箱
-                if (!this.email) {
-                    message.info("Please enter your email address");
-                    return;
-                }
-				if (!this.selectSchool) {
-                    message.info("Please select a school");
-                    return;
-                }
-                //判断邮箱格式是否正确
-                if (!isEmail(this.email)) {
-                    message.info("The email format is incorrect");
-                    return;
-                }
-                //判断是否同意隐私政策
-                if (!this.checked) {
-                    message.info(
-                        "Agree to all terms, privacy fees and policies"
-                    );
-                    return;
-                }
-                let data = {
-                    password: md5(this.password + "abc"),
-                    userName: 'a',
-                    // userName: this.username,
-					organizationName:this.selectSchool,
-                    email: this.email,
-                    operationType: "LOGIN",
-                    ip: "",
-                };
-               
-                if (this.loginTime) {
-                    this.loginTime = false;
-                    Https.axiosPost(Https.httpUrls.schoolLogin, data)
-                        .then((rv: any) => {
-                            if (rv) {
-								 this.clearTimer()
-								this.time = 60;
-								this.emailStap = 2;
-								this.emailCode = ["", "", "", "", "", ""];
-								this.createTimer();
-                                this.userId = rv.userId;
-                                this.loginType = "email";
-								localStorage.setItem("loginEmail", this.email);
-								localStorage.setItem("loginPassword", this.password);
-                            }
-                        })
-                        .catch((res) => {
-                            this.emailStap = 1;
-                        });
-                    setTimeout(() => {
-                        this.loginTime = true;
-                    }, 2000);
-                }
-            }
-        },
-
-        changePasswordType() {
-            this.passwordType =
-                this.passwordType === "password" ? "text" : "password";
-        },
-
-        //邮箱登录提交
-        submitEmailLogin(emailVerifyCode: any) {
-            let data = {
-                email: this.email,
-                emailVerifyCode: emailVerifyCode,
-                loginType: "EMAIL",
-                userId: this.userId,
-				organizationName:this.selectSchool
-            };
-            Https.axiosPost(Https.httpUrls.accountLogin, data)
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-        },
-		isCheckAgreement(){
-			message.info(
-					"Agree to all terms, privacy fees and policies"
-				);
-		},
-		//微信登录
-		wechatLogin(value:any) {
-			let data = {
-				code : value.code,
-				type:2
-			}
-			this.loadingShow = true
-		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
-                .then((rv: any) => {
-					this.loadingShow = false
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {this.loadingShow = false});
-		},
-		//谷歌登录
-		googelLogin(value:any) {
-			let data = {credential : value,type:2}
-		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-		},
-		//登陆成功设置参数
-		setSuccessLogin(rv:any){
-			if (rv) {
-				if (rv.systemUser == 4) {
-					rv.systemUser = 1;
-				}
-				this.createTimer();
-				let isTest = rv.systemUser == 3 ? true : false;
-				let isBeginner = rv.isBeginner == 1 ? true : false;
-				let token = rv.token;
-				setCookie("isMurmur", false);
-				setCookie("token", token);
-				setCookie("isTest", isTest);
-				setCookie("isBeginner", isBeginner);
-				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
-				setCookie("userInfo", JSON.stringify(rv));
-				let userid:any = {
-					ueserId:rv.userId,
-					systemUser:rv.systemUser,
-				}
-				if(rv.email)userid.email = rv.email
-				this.store.commit("upUserDetail", userid);
-				
-				if (window.innerWidth < 768) {
-					message.info(
-						"If you need to design, please log in using an iPad or computer."
-					);
-					this.turnToHomePage("/Square");
-				} else {
-					this.turnToHomePage("/home");
-				}
-				sessionStorage.setItem(
-					"isTimeOne",
-					JSON.stringify(false)
-				); //是否需要公告 提示 弹窗
-				let randomNum: any =
-					Math.floor(Math.random() * 9000000000000000) +
-					1000000000000000;
-				sessionStorage.setItem("sessionId", randomNum);
-				sessionStorage.setItem("record", JSON.stringify([]));
-			}
-		},
-        //修改密码提交
-        submitResetPassword() {
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: this.forgetEmailValue,
-                password: md5(this.newPassword + "abc"),
-                verifyEmail: false,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        message.success("Changing the password successfully");
-                        this.changeIsLogin(1);
-                    }
-                }
-            );
-        },
-
-        //创建定时器
-        createTimer() {
-            this.timer = setInterval(() => {
-                this.time--;
-                if (!this.time) {
-                    clearInterval(this.timer);
-                }
-            }, 1000);
-        },
-
-        //清除定时器
-        clearTimer() {
-            this.time = 60;
-            if (this.timer) {
-                clearInterval(this.timer);
-            }
-        },
-
-        //跳转到首页
-        turnToHomePage(str: any) {
-            // this.getLang();
-            // this.$router.push("/home");
-            // console.log(window.location.search.substring(1));
-            this.store.commit("clearAllData");
-            this.store.commit("clearAllCollection");
-            this.store.commit("setAllBoardDataChoose", {});
-            this.store.commit("clearShowSketchboard", {});
-            this.$router.push(str);
-        },
-        //获取当前语言
-        // getLang() {
-        //     let data = {};
-        //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
-        //         (rv: any) => {
-        //             if (rv) {
-        //                 this.locale = rv;
-        //                 setLang(rv);
-        //             }
-        //         }
-        //     );
-        // },
+    //修改密码提交
+    submitResetPassword() {
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: this.forgetEmailValue,
+        password: md5(this.newPassword + "abc"),
+        verifyEmail: false,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          message.success("Changing the password successfully");
+          this.changeIsLogin(1);
+        }
+      });
     },
-	mounted() {
-		const data = this.$route.query
-		if(data?.state == 'weiXin'){
-			this.wechatLogin(data)
-		}
-	},
+
+    //创建定时器
+    createTimer() {
+      this.timer = setInterval(() => {
+        this.time--;
+        if (!this.time) {
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+
+    //清除定时器
+    clearTimer() {
+      this.time = 60;
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+
+    //跳转到首页
+    turnToHomePage(str: any) {
+      // this.getLang();
+      // this.$router.push("/home");
+      // console.log(window.location.search.substring(1));
+      this.store.commit("clearAllData");
+      this.store.commit("clearAllCollection");
+      this.store.commit("setAllBoardDataChoose", {});
+      this.store.commit("clearShowSketchboard", {});
+      this.$router.push(str);
+    },
+    //获取当前语言
+    // getLang() {
+    //     let data = {};
+    //     Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
+    //         (rv: any) => {
+    //             if (rv) {
+    //                 this.locale = rv;
+    //                 setLang(rv);
+    //             }
+    //         }
+    //     );
+    // },
+  },
+  mounted() {
+    const data = this.$route.query;
+    if (data?.state == "weiXin") {
+      this.wechatLogin(data);
+    }
+  },
 });
 </script>
 <style lang="less" scoped>
 .login_page {
-    width: 100%;
-    height: 100%;
-    .page_content {
-        .login_content {
-			margin: 0 auto;
-            position: relative;
-			width: 100%;
-			// height: 100%;
-			// width: 80%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            @media (max-width: 768px) {
-                width: 100%;
-            }
-            .login_content_left {
-                width: 100%;
-                @media (max-width: 768px) {
-                    width: 100%;
-                }
-                .login_form_email {
-					margin-top: 3rem;
-                    position: relative;
-                    width: 100%;
-                    height: 100%;
-                    background: #fff;
-                    transform: scale(0);
-                    transition: 0.3s all;
-                    border: 2px solid;
-                    border-radius: 20px;
-                    .email_last_step {
-                        width: 100%;
-                        height: 100%;
-                        #app {
-                            height: auto;
-                        }
-                    }
-                }
-                .active {
-                    transform: scale(1);
-                }
-            }
-            .login_form_title {
-                font-size: 1.6rem;
-                // color: #666666;
-                font-weight: 900;
-                color: #000;
-                display: flex;
-                justify-content: space-between;
-                box-sizing: border-box;
-                label {
-                    display: flex;
-                    span {
-                        font-size: 1.6rem;
-                        margin-left: 10px;
-                        font-weight: normal;
-                    }
-                    &.active {
-                        pointer-events: none;
-                        input {
-                            pointer-events: none;
-                        }
-                    }
-                }
-            }
-			.generalModel_state{
-				>.generalModel_state_item{
-					:deep(.ant-select-selector){
-						border: 0.1rem solid #dfdfdf;
-						border-radius: 2.5rem;
-						height: 5rem !important;
-						width: 100%;
-						box-sizing: border-box;
-						&:hover{
-							border: 0.1rem solid #000;
-						}
-					}
-				}
-			}
-            .login_form_content {
-                margin-top: 4rem;
-                position: relative;
-				
-                &[state="2"] {
-                    > * {
-                        opacity: 0;
-                    }
-                    .login_form_email {
-                        opacity: 1;
-                    }
-                }
-                .password_input_block {
-                    position: relative;
-
-                    .password_show_icon {
-                        position: absolute;
-                        font-size: 2.4rem;
-                        right: 2rem;
-                        top: 1.7rem;
-                        cursor: pointer;
-                    }
-                }
-
-                .login_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-					transition: all .3s;
-					&:hover{
-						border: 0.1rem solid #000;
-					}
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .email_last_step {
-                // margin-top: 4rem;
-                .email_last_step_bottom {
-                    padding: 0 40px;
-                }
-                .email_last_step_block {
-                    padding: 10px;
-                    border-bottom: 2px solid;
-                    box-sizing: border-box;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    .email_last_step_content {
-                        margin-left: 1rem;
-                        font-size: 2.2rem;
-                        font-weight: bold;
-                        color: #030303;
-                    }
-                    .email_last_step_block_icon {
-                        cursor: pointer;
-                        margin-right: 1rem;
-                        height: 20px;
-                    }
-                }
-
-                .fi-br-arrow-left {
-                    font-size: 2.5rem;
-                    font-weight: bold;
-                    color: #030303;
-                    transform: translateY(1rem);
-                    display: inline-block;
-                }
-            }
-
-            .login_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-				transition: all .3s;
-				&:hover{
-					background: #3C3C3C;
-				}
-                &[state="2"] {
-                    cursor: not-allowed;
-                }
-            }
-            .login_text {
-                font-size: 1.6rem;
-                margin-top: 4rem;
-                color: #151515;
-                display: flex;
-                justify-content: flex-end;
-
-                .forget_password_text {
-                    cursor: pointer;
-                }
-            }
-        }
-
-        .forget_password_content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 60rem;
-            background: #ffffff;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
-            border-radius: 1rem;
-            padding: 3rem 6rem 6.5rem;
-            box-sizing: border-box;
-
-            .forget_password_content_block {
-                cursor: pointer;
-            }
-
-            .fi-br-arrow-left {
-                font-size: 3.8rem;
-                font-weight: bold;
-                color: #030303;
-                transform: translateY(1rem);
-                display: inline-block;
-            }
-            .forget_password_content_title {
-                font-size: 3.2rem;
-                font-weight: bold;
-                color: #030303;
-                margin-left: 2rem;
-            }
-
-            .forget_passored_form_content {
-                margin-top: 3.5rem;
-
-                .forget_passored_form_title {
-                    font-size: 2.4rem;
-                    font-weight: bold;
-                    color: #030303;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-                }
-
-                .forget_passored_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .forget_verif_code_des {
-                font-size: 2.4rem;
-                font-weight: bold;
-                color: #030303;
-                margin-top: 3.5rem;
-            }
-
-            .forget_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-            }
-        }
-    }
-
-    .login_footer {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        left: 0;
-        bottom: 3.5rem;
+  width: 100%;
+  height: 100%;
+  .page_content {
+    .login_content {
+      margin: 0 auto;
+      position: relative;
+      width: 100%;
+      // height: 100%;
+      // width: 80%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @media (max-width: 768px) {
         width: 100%;
-        padding: 0 4rem;
-
-        .login_footer_item {
-            display: flex;
-            align-items: center;
-
-            .login_footer_item_text {
-                font-size: 1.3rem;
-                color: #151515;
-            }
-
-            .footer_item_text_pointer {
-                cursor: pointer;
-            }
-
-            .login_footer_line {
-                width: 0.1rem;
-                height: 2rem;
-                margin: 0 2rem;
-                background: #b9b9b9;
-            }
+      }
+      .login_content_left {
+        width: 100%;
+        @media (max-width: 768px) {
+          width: 100%;
         }
-    }
-
-    .marign_top20 {
-        margin-top: 2rem;
-    }
-
-    .marign_top22 {
-        margin-top: 2.2rem;
-    }
-
-    .marign_top30 {
-        margin-top: 3rem;
-    }
-    .marign_top40 {
-        margin-top: 4rem;
-    }
-	.thirdPartyLogin{
-		display: flex;
-		// justify-content: flex-start;
-		> div{
-			position: relative;
-			margin-right: 1rem;
-			> .mask{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				z-index: 2;
-				cursor: pointer;
-			}
-		}
-	}
-    .tip_content {
-        font-size: 1.3rem;
-        font-weight: bold;
+        .login_form_email {
+          margin-top: 3rem;
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background: #fff;
+          transform: scale(0);
+          transition: 0.3s all;
+          border: 2px solid;
+          border-radius: 20px;
+          .email_last_step {
+            width: 100%;
+            height: 100%;
+            #app {
+              height: auto;
+            }
+          }
+        }
+        .active {
+          transform: scale(1);
+        }
+      }
+      .login_form_title {
+        font-size: 1.6rem;
+        // color: #666666;
+        font-weight: 900;
         color: #000;
-        cursor: pointer;
-    }
-
-    .email_last_step_des {
         display: flex;
-        align-items: center;
         justify-content: space-between;
+        box-sizing: border-box;
+        label {
+          display: flex;
+          span {
+            font-size: 1.6rem;
+            margin-left: 10px;
+            font-weight: normal;
+          }
+          &.active {
+            pointer-events: none;
+            input {
+              pointer-events: none;
+            }
+          }
+        }
+      }
+      .generalModel_state {
+        > .generalModel_state_item {
+          :deep(.ant-select-selector) {
+            border: 0.1rem solid #dfdfdf;
+            border-radius: 2.5rem;
+            height: 5rem !important;
+            width: 100%;
+            box-sizing: border-box;
+            &:hover {
+              border: 0.1rem solid #000;
+            }
+          }
+        }
+      }
+      .login_form_content {
         margin-top: 4rem;
-        margin-bottom: 2rem;
+        position: relative;
 
-        .sent_email_content {
-            font-size: 1.8rem;
-            font-weight: bold;
+        &[state="2"] {
+          > * {
+            opacity: 0;
+          }
+          .login_form_email {
+            opacity: 1;
+          }
+        }
+        .password_input_block {
+          position: relative;
+
+          .password_show_icon {
+            position: absolute;
+            font-size: 2.4rem;
+            right: 2rem;
+            top: 1.7rem;
+            cursor: pointer;
+          }
+        }
+
+        .login_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+          transition: all 0.3s;
+          &:hover {
+            border: 0.1rem solid #000;
+          }
+          &::placeholder {
             color: #a5b0c2;
+          }
+        }
+      }
+
+      .email_last_step {
+        // margin-top: 4rem;
+        .email_last_step_bottom {
+          padding: 0 40px;
+        }
+        .email_last_step_block {
+          padding: 10px;
+          border-bottom: 2px solid;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .email_last_step_content {
+            margin-left: 1rem;
+            font-size: 2.2rem;
+            font-weight: bold;
+            color: #030303;
+          }
+          .email_last_step_block_icon {
+            cursor: pointer;
+            margin-right: 1rem;
+            height: 20px;
+          }
         }
 
-        .email_tip_content {
-            font-size: 1.4rem;
-            color: #030303;
+        .fi-br-arrow-left {
+          font-size: 2.5rem;
+          font-weight: bold;
+          color: #030303;
+          transform: translateY(1rem);
+          display: inline-block;
         }
+      }
+
+      .login_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          background: #3c3c3c;
+        }
+        &[state="2"] {
+          cursor: not-allowed;
+        }
+      }
+      .login_text {
+        font-size: 1.6rem;
+        margin-top: 4rem;
+        color: #151515;
+        display: flex;
+        justify-content: flex-end;
+
+        .forget_password_text {
+          cursor: pointer;
+        }
+      }
     }
+
+    .forget_password_content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60rem;
+      background: #ffffff;
+      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
+      border-radius: 1rem;
+      padding: 3rem 6rem 6.5rem;
+      box-sizing: border-box;
+
+      .forget_password_content_block {
+        cursor: pointer;
+      }
+
+      .fi-br-arrow-left {
+        font-size: 3.8rem;
+        font-weight: bold;
+        color: #030303;
+        transform: translateY(1rem);
+        display: inline-block;
+      }
+      .forget_password_content_title {
+        font-size: 3.2rem;
+        font-weight: bold;
+        color: #030303;
+        margin-left: 2rem;
+      }
+
+      .forget_passored_form_content {
+        margin-top: 3.5rem;
+
+        .forget_passored_form_title {
+          font-size: 2.4rem;
+          font-weight: bold;
+          color: #030303;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+        }
+
+        .forget_passored_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+
+          &::placeholder {
+            color: #a5b0c2;
+          }
+        }
+      }
+
+      .forget_verif_code_des {
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: #030303;
+        margin-top: 3.5rem;
+      }
+
+      .forget_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .login_footer {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    left: 0;
+    bottom: 3.5rem;
+    width: 100%;
+    padding: 0 4rem;
+
+    .login_footer_item {
+      display: flex;
+      align-items: center;
+
+      .login_footer_item_text {
+        font-size: 1.3rem;
+        color: #151515;
+      }
+
+      .footer_item_text_pointer {
+        cursor: pointer;
+      }
+
+      .login_footer_line {
+        width: 0.1rem;
+        height: 2rem;
+        margin: 0 2rem;
+        background: #b9b9b9;
+      }
+    }
+  }
+
+  .marign_top20 {
+    margin-top: 2rem;
+  }
+
+  .marign_top22 {
+    margin-top: 2.2rem;
+  }
+
+  .marign_top30 {
+    margin-top: 3rem;
+  }
+  .marign_top40 {
+    margin-top: 4rem;
+  }
+  .thirdPartyLogin {
+    display: flex;
+    // justify-content: flex-start;
+    > div {
+      position: relative;
+      margin-right: 1rem;
+      > .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+      }
+    }
+  }
+  .tip_content {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #000;
+    cursor: pointer;
+  }
+
+  .email_last_step_des {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+
+    .sent_email_content {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #a5b0c2;
+    }
+
+    .email_tip_content {
+      font-size: 1.4rem;
+      color: #030303;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/LoginPage/phoneLogin.vue b/src/component/LoginPage/phoneLogin.vue
index cea50ce8..a7745cc9 100644
--- a/src/component/LoginPage/phoneLogin.vue
+++ b/src/component/LoginPage/phoneLogin.vue
@@ -1,57 +1,63 @@
 <template>
-    <div class="Container">
-        <div class="icon" @click="openphoneModel">
-			<img src="@/assets/images/loginPage/phone.svg" alt="">
-		</div>
-		<phoneModel ref="phoneModel"></phoneModel>
+  <div class="Container">
+    <div class="icon" @click="openphoneModel">
+      <img src="@/assets/images/loginPage/phone.svg" alt="" />
     </div>
+    <phoneModel ref="phoneModel"></phoneModel>
+  </div>
 </template>
 <script>
-	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
-	import phoneModel from "./phoneModel.vue";
-    export default defineComponent({
-        name: "login",
-		components: {
-		    phoneModel
-		},
-		setup() {
-			let phoneDom = reactive({
-				phoneModel:null
-			})
-			const openphoneModel = ()=>{
-				phoneDom.phoneModel.init()
-			}
-			onMounted(()=>{
-				
-			})
-			return {
-				...toRefs(phoneDom),
-				openphoneModel,
-            }
-		},
-    })
+import {
+  defineComponent,
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  nextTick,
+  toRef,
+} from "vue";
+import phoneModel from "./phoneModel.vue";
+export default defineComponent({
+  name: "login",
+  components: {
+    phoneModel,
+  },
+  setup() {
+    let phoneDom = reactive({
+      phoneModel: null,
+    });
+    const openphoneModel = () => {
+      phoneDom.phoneModel.init();
+    };
+    onMounted(() => {});
+    return {
+      ...toRefs(phoneDom),
+      openphoneModel,
+    };
+  },
+});
 </script>
 <style scoped lang="less">
-.Container{
-	position: relative;
-	.icon{
-		width: 40px;
-		height: 40px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1px solid #dadce0;
-		border-radius: 50%;
-		cursor: pointer;
-		&:hover{
-			background: #f8faff;
-		}
-		img{
-			width: 18px;
-			height: 18px;
-		}
-	}
-	&.Container:hover{
-	}
+.Container {
+  position: relative;
+  .icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dadce0;
+    border-radius: 50%;
+    cursor: pointer;
+    &:hover {
+      background: #f8faff;
+    }
+    img {
+      width: 18px;
+      height: 18px;
+    }
+  }
+  &.Container:hover {
+  }
 }
 </style>
diff --git a/src/component/LoginPage/phoneModel.vue b/src/component/LoginPage/phoneModel.vue
index c33c727c..d214df0a 100644
--- a/src/component/LoginPage/phoneModel.vue
+++ b/src/component/LoginPage/phoneModel.vue
@@ -1,81 +1,99 @@
 <template>
-	<div ref="phoneModelDom"></div>
-	<a-modal
-		class="phoneModel generalModel"
-		:get-container="() => $refs.phoneModelDom"
-		v-model:visible="phoneModel"
-		:footer="null"
-		:width="pageWidth"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		:mask="phoneModelMask"
-		:keyboard="false"
-		:destroyOnClose="true"
-		:zIndex="1000"
-	>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<!-- <i class="fi fi-rr-cross-small"></i> -->
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-		<div class="phoneLogin">
-			<!-- <div id="wx_id_signin"></div> -->
-		</div>
-	<div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div>
-	</a-modal>
-
+  <div ref="phoneModelDom"></div>
+  <a-modal
+    class="phoneModel generalModel"
+    :get-container="() => $refs.phoneModelDom"
+    v-model:visible="phoneModel"
+    :footer="null"
+    :width="pageWidth"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="phoneModelMask"
+    :keyboard="false"
+    :destroyOnClose="true"
+    :zIndex="1000"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <!-- <i class="fi fi-rr-cross-small"></i> -->
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="phoneLogin">
+      <!-- <div id="wx_id_signin"></div> -->
+    </div>
+    <div class="mark_loading" v-show="loadingShow">
+      <a-spin size="large" />
+    </div>
+  </a-modal>
 </template>
 
 <script>
-import { defineComponent,ref,reactive,toRefs, onMounted} from "vue";
+import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,
-    },
-    setup(){
-		let phoneModel = reactive({
-			phoneModel:false,
-			phoneModelMask:true,
-			pageWidth:'50%',
-		})
-		let data = reactive({
-			loadingShow:false,
-		})
-		const init = async ()=>{
-			phoneModel.phoneModel = true
-		}
-		const cancelDsign = ()=>{
-			phoneModel.phoneModel = false
-		}
-        return{
-			...toRefs(phoneModel),
-			...toRefs(data),
-			init,
-			cancelDsign,
-        }
-    },
-    data() {
-        return {
-        };
-    },
-    methods: {
-    },
+  components: {
+    VerificationCodeInput,
+  },
+  setup() {
+    let phoneModel = reactive({
+      phoneModel: false,
+      phoneModelMask: true,
+      pageWidth: "50%",
+    });
+    let data = reactive({
+      loadingShow: false,
+    });
+    const init = async () => {
+      phoneModel.phoneModel = true;
+    };
+    const cancelDsign = () => {
+      phoneModel.phoneModel = false;
+    };
+    return {
+      ...toRefs(phoneModel),
+      ...toRefs(data),
+      init,
+      cancelDsign,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {},
 });
 </script>
 <style lang="less" scoped>
 .phoneLogin {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/LoginPage/weiXinLogin.vue b/src/component/LoginPage/weiXinLogin.vue
index f5d59419..afa20ebb 100644
--- a/src/component/LoginPage/weiXinLogin.vue
+++ b/src/component/LoginPage/weiXinLogin.vue
@@ -1,70 +1,76 @@
 <template>
-    <div class="Container">
-        <div class="icon" @click="openWeiXinModel">
-			<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
-			<span>{{ $props.text }}</span>
-		</div>
-		<weiXinModel ref="weiXinModel"></weiXinModel>
+  <div class="Container">
+    <div class="icon" @click="openWeiXinModel">
+      <img src="@/assets/images/loginPage/weiXinIcon.svg" alt="" />
+      <span>{{ $props.text }}</span>
     </div>
+    <weiXinModel ref="weiXinModel"></weiXinModel>
+  </div>
 </template>
 <script>
-	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
-	import weiXinModel from "./weiXinModel.vue";
-    export default defineComponent({
-        name: "login",
-		components: {
-		    weiXinModel
-		},
-		props: {
-			text: {
-				type: String,
-				default: 'Sign in with Wechat'
-			}
-		},
-		setup() {
-			let weiXinDom = reactive({
-				weiXinModel:null
-			})
-			const openWeiXinModel = ()=>{
-				weiXinDom.weiXinModel.init()
-			}
-			onMounted(()=>{
-				
-			})
-			return {
-				...toRefs(weiXinDom),
-				openWeiXinModel,
-            }
-		},
-    })
+import {
+  defineComponent,
+  ref,
+  reactive,
+  watch,
+  onMounted,
+  nextTick,
+  toRefs,
+} from "vue";
+import weiXinModel from "./weiXinModel.vue";
+export default defineComponent({
+  name: "login",
+  components: {
+    weiXinModel,
+  },
+  props: {
+    text: {
+      type: String,
+      default: "Sign in with Wechat",
+    },
+  },
+  setup() {
+    let weiXinDom = reactive({
+      weiXinModel: null,
+    });
+    const openWeiXinModel = () => {
+      weiXinDom.weiXinModel.init();
+    };
+    onMounted(() => {});
+    return {
+      ...toRefs(weiXinDom),
+      openWeiXinModel,
+    };
+  },
+});
 </script>
 <style scoped lang="less">
-.Container{
-	position: relative;
-	.icon{
-		// width: 40px;
-		width: auto;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 1px solid #dadce0;
-		border-radius: 4rem;
-		padding: .5rem 3rem;
-		cursor: pointer;
-		box-sizing: border-box;
-		&:hover{
-			background: #f8faff;
-		}
-		img{
-			width: 3.8rem;
-			height: 3.8rem;
-		}
-		span{
-			font-size: 1.4rem;
-			margin-left: 1.4rem;
-		}
-	}
-	&.Container:hover{
-	}
+.Container {
+  position: relative;
+  .icon {
+    // width: 40px;
+    width: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #dadce0;
+    border-radius: 4rem;
+    padding: 0.5rem 3rem;
+    cursor: pointer;
+    box-sizing: border-box;
+    &:hover {
+      background: #f8faff;
+    }
+    img {
+      width: 3.8rem;
+      height: 3.8rem;
+    }
+    span {
+      font-size: 1.4rem;
+      margin-left: 1.4rem;
+    }
+  }
+  &.Container:hover {
+  }
 }
 </style>
diff --git a/src/component/Pay/payMethod.vue b/src/component/Pay/payMethod.vue
index 48603823..7c19b3ca 100644
--- a/src/component/Pay/payMethod.vue
+++ b/src/component/Pay/payMethod.vue
@@ -1,91 +1,157 @@
 <template>
-	<div class="payMethod" ref="payMethod"></div>
-	<a-modal
-		class="generalModel"
-		:get-container="() => $refs.payMethod"
-		v-model:visible="payMethodModel"
-		:footer="null"
-		:width="pageWidth"
-		height="auto"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		:mask="payMethodModelMask"
-		:keyboard="false"
-		:destroyOnClose="true"
-		:zIndex="1000"
-	>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<!-- <i class="fi fi-rr-cross-small"></i> -->
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
-
-			</div>
-		</div>
-		<div class="payMethodContent">
-			<div class="generalModelTitle">
-				{{ $t('upgradePlan.paymentmethod') }}
-			</div>
-			<div class="payMethod_list">
-				<label class="payMethod_item" v-show="$props.type == 'credits'">
-					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
-					<img src="../../assets/images/homePage/paypal.svg" alt="">
-					<span>PayPal</span>
-				</label>
-				<label class="payMethod_item">
-					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
-					<img src="../../assets/images/homePage/stripe.svg" alt="">
-					 <span>Stripe ({{ $t('Renew.CreditCard') }}、{{ $t('Renew.Alipay') }})</span>
-				</label>
-				<label class="payMethod_item" v-show="$props.type == 'credits'">
-					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
-					<img src="../../assets/images/homePage/alipay.svg" alt="">
-					<span>{{ $t('upgradePlan.Alipay') }}</span>
-					<div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
-						<label>
-							<input name="location" type="radio" value="ALIPAYHK" v-model="modeOfPaymentDetail">
-							<span>{{ $t('upgradePlan.HongKong') }}</span>
-						</label>
-						<label>
-							<input name="location" type="radio" value="ALIPAYCN" v-model="modeOfPaymentDetail">
-							<span>{{ $t('upgradePlan.MainlandChina') }}</span>
-						</label>
-					</div>
-				</label>
-			</div>
-			<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
-				<label>
-					<input type="checkbox" v-model="clause">
-					<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
-				</label>
-			</div>
-			<div class="payMethod_payAffirm_btn">
-				<div class="gallery_btn white" @click="cancelDsign">{{ $t('upgradePlan.Cancel') }}</div>
-				<div class="gallery_btn" @click="payAffirm">{{ $t('upgradePlan.Payment') }}</div>
-			</div>
-			
-		</div>
-		<div class="mark_loading" v-show="isShowMark_">
-			<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_intro">{{ $t('upgradePlan.hint') }}</div>
-			<div class="mark_loading_title_box">
-				<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $t('upgradePlan.Back') }}</div>
-				<div class="mark_loading_btn" @click="completePayment">OK</div>
-			</div>
-		</div>
-	</a-modal>
-
+  <div class="payMethod" ref="payMethod"></div>
+  <a-modal
+    class="generalModel"
+    :get-container="() => $refs.payMethod"
+    v-model:visible="payMethodModel"
+    :footer="null"
+    :width="pageWidth"
+    height="auto"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="payMethodModelMask"
+    :keyboard="false"
+    :destroyOnClose="true"
+    :zIndex="1000"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <!-- <i class="fi fi-rr-cross-small"></i> -->
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="payMethodContent">
+      <div class="generalModelTitle">
+        {{ $t("upgradePlan.paymentmethod") }}
+      </div>
+      <div class="payMethod_list">
+        <label class="payMethod_item" v-show="$props.type == 'credits'">
+          <input
+            name="payAffirm"
+            type="radio"
+            value="paypal"
+            v-model="modeOfPayment"
+          />
+          <img src="../../assets/images/homePage/paypal.svg" alt="" />
+          <span>PayPal</span>
+        </label>
+        <label class="payMethod_item">
+          <input
+            name="Stripe"
+            type="radio"
+            value="stripe"
+            v-model="modeOfPayment"
+          />
+          <img src="../../assets/images/homePage/stripe.svg" alt="" />
+          <span
+            >Stripe ({{ $t("Renew.CreditCard") }}、{{
+              $t("Renew.Alipay")
+            }})</span
+          >
+        </label>
+        <label class="payMethod_item" v-show="$props.type == 'credits'">
+          <input
+            name="payAffirm"
+            type="radio"
+            value="alipay"
+            v-model="modeOfPayment"
+          />
+          <img src="../../assets/images/homePage/alipay.svg" alt="" />
+          <span>{{ $t("upgradePlan.Alipay") }}</span>
+          <div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
+            <label>
+              <input
+                name="location"
+                type="radio"
+                value="ALIPAYHK"
+                v-model="modeOfPaymentDetail"
+              />
+              <span>{{ $t("upgradePlan.HongKong") }}</span>
+            </label>
+            <label>
+              <input
+                name="location"
+                type="radio"
+                value="ALIPAYCN"
+                v-model="modeOfPaymentDetail"
+              />
+              <span>{{ $t("upgradePlan.MainlandChina") }}</span>
+            </label>
+          </div>
+        </label>
+      </div>
+      <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
+        <label>
+          <input type="checkbox" v-model="clause" />
+          <span class="generalModelDescription"
+            >{{ $t("upgradePlan.policy1")
+            }}<a
+              href="https://code-create.com.hk/aida-terms-and-conditions/"
+              target="_blank"
+              >{{ $t("upgradePlan.policy2") }}</a
+            >{{ $t("upgradePlan.policy3")
+            }}<a
+              href="https://code-create.com.hk/aida-subscription-agreement/"
+              target="_blank"
+              >{{ $t("upgradePlan.policy4") }}</a
+            >. *</span
+          >
+        </label>
+      </div>
+      <div class="payMethod_payAffirm_btn">
+        <div class="gallery_btn white" @click="cancelDsign">
+          {{ $t("upgradePlan.Cancel") }}
+        </div>
+        <div class="gallery_btn" @click="payAffirm">
+          {{ $t("upgradePlan.Payment") }}
+        </div>
+      </div>
+    </div>
+    <div class="mark_loading" v-show="isShowMark_">
+      <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_intro">{{ $t("upgradePlan.hint") }}</div>
+      <div class="mark_loading_title_box">
+        <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
+          {{ $t("upgradePlan.Back") }}
+        </div>
+        <div class="mark_loading_btn" @click="completePayment">OK</div>
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { message } from "ant-design-vue";
@@ -93,284 +159,296 @@ import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.v
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,
+  components: {
+    VerificationCodeInput,
+  },
+  props: {
+    type: {
+      type: String,
+      default: "",
     },
-	props:{
-		type:{
-			type:String,
-			default:''
-		}
-	},
-	emits: ['completePayment'],
-    setup(prop,{emit}){
-		const store = useStore();
-		let payMethod = reactive({
-			payMethodModel:false,
-			payMethodModelMask:true,
-			pageWidth:'50%'
-		})
-		let payMethodData = reactive({
-			modeOfPayment:prop.type == 'credits'?'paypal':'stripe',
-			modeOfPaymentDetail:'ALIPAYHK',
-			labelDisclaimer:null,//dom
-			payAffirmData:{} as any,
-			clause:false,
-			newWindow:null as any,
-			isShowMark:false,
-			isShowMark_:false,
-		})
-		const init = (data:any)=>{
-			payMethod.payMethodModel = true
-			payMethodData.payAffirmData = data
-		}
-		const cancelDsign = () => {
-			payMethod.payMethodModel = false
-		}
-		const payAffirm = () => {
-		    if(!payMethodData.clause){
-				let labelDisclaimer:any = payMethodData.labelDisclaimer
-				if(!labelDisclaimer.classList.contains('animation')){
-					labelDisclaimer.classList.add('animation')
-					setTimeout(() => {
-						labelDisclaimer.classList.remove('animation')
-					}, 1000);
-				}
-				return
-			}
-			payMethodData.isShowMark_ = true
-			let httpsUrl
-			let url = window.location.origin+'/paySucceed' 
-			let payAffirmData = payMethodData.payAffirmData
-			let data = {
-				autoRenewal:payAffirmData.autoRenewal,//false为不自动续费
-				productName:payAffirmData.productName,
-				quantity:payAffirmData.quantity?payAffirmData.quantity:1,
-				returnUrl:url,
-				subscribeType:payAffirmData.subscribeType?payAffirmData.subscribeType:'',//yearly为年费，monthly为月费
-				wallet:payMethodData.modeOfPaymentDetail,
-			}
-			if(payMethodData.modeOfPayment == 'paypal'){
-				httpsUrl = Https.httpUrls.payPaypal
-			}else if (payMethodData.modeOfPayment == 'stripe') {
-				httpsUrl = Https.httpUrls.payStripe
-				// data.
-			}else{
-				httpsUrl = Https.httpUrls.payAlipayHK
-			}
-			Https.axiosPost(httpsUrl,data).then(
-				(rv: any) => {
-					var width = 800;
-					var height = 600;
-					var left = (screen.width - width) / 2;
-					var top = (screen.height - height) / 2;
-					payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
-					let herf
-					if(payMethodData.modeOfPayment == 'paypal'){
-						// 在新窗口中写入内容
-						herf = rv.approve;
-						// payMethodData.newWindow.location.href = rv.approve;
-					}else if(payMethodData.modeOfPayment == 'stripe'){
-						herf = rv
-						// payMethodData.newWindow.location.href = rv
-					}else{
-						let data = JSON.parse(rv)
-						herf = `${data.url}?${data.alipay_order_string}`
-						// payMethodData.newWindow.location.href = herf;
-					}
-					if(payMethodData.newWindow){
-						payMethodData.newWindow.location.href = herf
-					}else{
-						// window.open(herf, '_blank');
-						window.location.href=herf;  
-					}
-					payMethodData.newWindow = null
-					payMethodData.isShowMark = true
-					payMethodData.isShowMark_ = false
-				}
-			).catch(res=>{
-				payMethodData.isShowMark_ = false
-			});
-		}
-		const setPaidBack = ()=>{
-			payMethod.payMethodModel = false
-			payMethodData.isShowMark = false
-			payMethodData.clause = false
-			payMethodData.modeOfPayment = prop.type == 'credits'?'paypal':'stripe'
-			payMethodData.modeOfPaymentDetail = 'ALIPAYHK'
-		}
-		const completePayment = ()=>{
-			setPaidBack()
-			emit('completePayment')
-		}
-        return{
-			store,
-			...toRefs(payMethod),
-			...toRefs(payMethodData),
-			init,
-			cancelDsign,
-			payAffirm,
-			setPaidBack,
-			completePayment,
+  },
+  emits: ["completePayment"],
+  setup(prop, { emit }) {
+    const store = useStore();
+    let payMethod = reactive({
+      payMethodModel: false,
+      payMethodModelMask: true,
+      pageWidth: "50%",
+    });
+    let payMethodData = reactive({
+      modeOfPayment: prop.type == "credits" ? "paypal" : "stripe",
+      modeOfPaymentDetail: "ALIPAYHK",
+      labelDisclaimer: null, //dom
+      payAffirmData: {} as any,
+      clause: false,
+      newWindow: null as any,
+      isShowMark: false,
+      isShowMark_: false,
+    });
+    const init = (data: any) => {
+      payMethod.payMethodModel = true;
+      payMethodData.payAffirmData = data;
+    };
+    const cancelDsign = () => {
+      payMethod.payMethodModel = false;
+    };
+    const payAffirm = () => {
+      if (!payMethodData.clause) {
+        let labelDisclaimer: any = payMethodData.labelDisclaimer;
+        if (!labelDisclaimer.classList.contains("animation")) {
+          labelDisclaimer.classList.add("animation");
+          setTimeout(() => {
+            labelDisclaimer.classList.remove("animation");
+          }, 1000);
         }
+        return;
+      }
+      payMethodData.isShowMark_ = true;
+      let httpsUrl;
+      let url = window.location.origin + "/paySucceed";
+      let payAffirmData = payMethodData.payAffirmData;
+      let data = {
+        autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
+        productName: payAffirmData.productName,
+        quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
+        returnUrl: url,
+        subscribeType: payAffirmData.subscribeType
+          ? payAffirmData.subscribeType
+          : "", //yearly为年费，monthly为月费
+        wallet: payMethodData.modeOfPaymentDetail,
+      };
+      if (payMethodData.modeOfPayment == "paypal") {
+        httpsUrl = Https.httpUrls.payPaypal;
+      } else if (payMethodData.modeOfPayment == "stripe") {
+        httpsUrl = Https.httpUrls.payStripe;
+        // data.
+      } else {
+        httpsUrl = Https.httpUrls.payAlipayHK;
+      }
+      Https.axiosPost(httpsUrl, data)
+        .then((rv: any) => {
+          var width = 800;
+          var height = 600;
+          var left = (screen.width - width) / 2;
+          var top = (screen.height - height) / 2;
+          payMethodData.newWindow = window.open(
+            "",
+            "_blank",
+            "width=" +
+              width +
+              ", height=" +
+              height +
+              ", left=" +
+              left +
+              ", top=" +
+              top
+          );
+          let herf;
+          if (payMethodData.modeOfPayment == "paypal") {
+            // 在新窗口中写入内容
+            herf = rv.approve;
+            // payMethodData.newWindow.location.href = rv.approve;
+          } else if (payMethodData.modeOfPayment == "stripe") {
+            herf = rv;
+            // payMethodData.newWindow.location.href = rv
+          } else {
+            let data = JSON.parse(rv);
+            herf = `${data.url}?${data.alipay_order_string}`;
+            // payMethodData.newWindow.location.href = herf;
+          }
+          if (payMethodData.newWindow) {
+            payMethodData.newWindow.location.href = herf;
+          } else {
+            // window.open(herf, '_blank');
+            window.location.href = herf;
+          }
+          payMethodData.newWindow = null;
+          payMethodData.isShowMark = true;
+          payMethodData.isShowMark_ = false;
+        })
+        .catch((res) => {
+          payMethodData.isShowMark_ = false;
+        });
+    };
+    const setPaidBack = () => {
+      payMethod.payMethodModel = false;
+      payMethodData.isShowMark = false;
+      payMethodData.clause = false;
+      payMethodData.modeOfPayment =
+        prop.type == "credits" ? "paypal" : "stripe";
+      payMethodData.modeOfPaymentDetail = "ALIPAYHK";
+    };
+    const completePayment = () => {
+      setPaidBack();
+      emit("completePayment");
+    };
+    return {
+      store,
+      ...toRefs(payMethod),
+      ...toRefs(payMethodData),
+      init,
+      cancelDsign,
+      payAffirm,
+      setPaidBack,
+      completePayment,
+    };
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    turnToWindow(url: any) {
+      window.open(url);
     },
-    data() {
-        return {
-        };
-    },
-    methods: {
-		turnToWindow(url:any) {
-            window.open(url);
-        },
-    },
+  },
 });
 </script>
 <style lang="less" scoped>
 .payMethod {
-   .payMethodContent{
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		width: 60rem;
-		margin: 0 auto;
-		position: relative;
-		.generalModelTitle,.generalModelInfo{
-			width: 100%;
-		}
-		.payMethod_list{
-			margin-bottom: 4rem;
-			display: flex;
-			flex-direction: column;
-			width: 100%;
-			>label{
-					display: flex;
-					align-items: center;
-					padding: 0 2rem;
-					margin-bottom: 3rem;
-					cursor: pointer;
-					border: 2px solid #EFEFEF;
-					border-radius: 2rem;
-					height: 8rem;
-					width: 100%;
-				img{
-					margin: 0rem 2rem;
-					// max-width: 4rem;
-					width: 4rem;
-				}
-				.payAffirm_detail{
-					margin-left: auto;
-					display: flex;
-					>label{
-						cursor: pointer;
-						display: flex;
-						align-items: center;
-						margin-right: 1rem;
-						span{
-							margin-left: .5rem;
-						}
-					}
-					
-				}
-			}
-			>label:last-child{
-				margin: 0;
-			}
-		}
-		.payMethod_payAffirm_clause{
-			margin-bottom: 4rem;
-			label{
-				cursor: pointer;
-				input{
-					margin-right: 1rem;
-					cursor: pointer;
-					vertical-align: middle;
-				}
-				span{
-					vertical-align: top;
-					a{
-						color: #000;
-						text-decoration: underline;
-					}
-				}
-			}
-			&.animation{
-				animation: shake .3s linear;
-				@keyframes shake {
-					0%{
-						transform: translateX(0px);
-					}
-					25%{
-						transform: translateX(-10px);
-					}
-					50%{
-						transform: translateX(10px);
-					}
-					75%{
-						transform: translateX(-10px);
-					}
-					100%{
-						transform: translateX(0px);
-					}
-				}
-			}
-		}
-		.payMethod_payAffirm_btn{
-			display: flex;
-			justify-content: space-between;
-			width: 100%;
-			>div{
-				width: 29rem;
-			}
-		}
-		
-   }
-   .mark_loading{
-		position: absolute;
-		z-index: 2;
-		background: #fff;
-		.mark_loading_title{
-		font-size: 3rem;
-		// text-decoration: underline;
-		font-weight: 600;
-		margin-bottom: 2rem;
-		// color: #fff;
-	}
-	.mark_loading_intro{
-		color: rgba(0, 0, 0, 0.6);
-		font-size: 1.4rem;
-		margin-bottom: 2rem;
-		text-align: center;
-		width: 80%;
-	}
-	.mark_loading_title_box{
-		display: flex;
-	}
+  .payMethodContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 60rem;
+    margin: 0 auto;
+    position: relative;
+    .generalModelTitle,
+    .generalModelInfo {
+      width: 100%;
+    }
+    .payMethod_list {
+      margin-bottom: 4rem;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      > label {
+        display: flex;
+        align-items: center;
+        padding: 0 2rem;
+        margin-bottom: 3rem;
+        cursor: pointer;
+        border: 2px solid #efefef;
+        border-radius: 2rem;
+        height: 8rem;
+        width: 100%;
+        img {
+          margin: 0rem 2rem;
+          // max-width: 4rem;
+          width: 4rem;
+        }
+        .payAffirm_detail {
+          margin-left: auto;
+          display: flex;
+          > label {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            margin-right: 1rem;
+            span {
+              margin-left: 0.5rem;
+            }
+          }
+        }
+      }
+      > label:last-child {
+        margin: 0;
+      }
+    }
+    .payMethod_payAffirm_clause {
+      margin-bottom: 4rem;
+      label {
+        cursor: pointer;
+        input {
+          margin-right: 1rem;
+          cursor: pointer;
+          vertical-align: middle;
+        }
+        span {
+          vertical-align: top;
+          a {
+            color: #000;
+            text-decoration: underline;
+          }
+        }
+      }
+      &.animation {
+        animation: shake 0.3s linear;
+        @keyframes shake {
+          0% {
+            transform: translateX(0px);
+          }
+          25% {
+            transform: translateX(-10px);
+          }
+          50% {
+            transform: translateX(10px);
+          }
+          75% {
+            transform: translateX(-10px);
+          }
+          100% {
+            transform: translateX(0px);
+          }
+        }
+      }
+    }
+    .payMethod_payAffirm_btn {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      > div {
+        width: 29rem;
+      }
+    }
+  }
+  .mark_loading {
+    position: absolute;
+    z-index: 2;
+    background: #fff;
+    .mark_loading_title {
+      font-size: 3rem;
+      // text-decoration: underline;
+      font-weight: 600;
+      margin-bottom: 2rem;
+      // color: #fff;
+    }
+    .mark_loading_intro {
+      color: rgba(0, 0, 0, 0.6);
+      font-size: 1.4rem;
+      margin-bottom: 2rem;
+      text-align: center;
+      width: 80%;
+    }
+    .mark_loading_title_box {
+      display: flex;
+    }
 
-	.mark_loading_btn,.mark_loading_btn2{
-		// border: #000;
-		// color: #fff;
-		display: flex;
-		margin-top: 10px;
-		text-align: center;
-		border: 2px solid;
-		padding: 0 20px;
-		border-radius: 10px;
-		cursor: pointer;
-		padding: .3rem 4rem;
-		background: #39215b;
-		color: #fff;
-		border: none;
-		margin: 0 2rem;
-		align-items: center;
-	}
-	.mark_loading_btn2{
-		border: 2px solid #000;
-		color: #000;
-		background: rgba(0,0,0,0);
-	}
-	}
+    .mark_loading_btn,
+    .mark_loading_btn2 {
+      // border: #000;
+      // color: #fff;
+      display: flex;
+      margin-top: 10px;
+      text-align: center;
+      border: 2px solid;
+      padding: 0 20px;
+      border-radius: 10px;
+      cursor: pointer;
+      padding: 0.3rem 4rem;
+      background: #39215b;
+      color: #fff;
+      border: none;
+      margin: 0 2rem;
+      align-items: center;
+    }
+    .mark_loading_btn2 {
+      border: 2px solid #000;
+      color: #000;
+      background: rgba(0, 0, 0, 0);
+    }
+  }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/WorksPage/Falls.vue b/src/component/WorksPage/Falls.vue
index 7554d0c4..d970cda9 100644
--- a/src/component/WorksPage/Falls.vue
+++ b/src/component/WorksPage/Falls.vue
@@ -1,429 +1,452 @@
 <template>
-	<div class="Falls">
-		<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
-			:style="{
-				width: item.style.width + 'px',
-				height: item.style.height + 'px',
-				top: item.style.top + 'px',
-				left: item.style.left + 'px',
-			}"
-		>
-			<!-- 图片 -->
-			<div class="falls_item_img">
-				<img
-					v-lazy="item.canvasUrl"
-					@click="setItemDetail(item)"
-					:style="{
-						height: item.style.imgHeihgt + 'px',
-					}"
-				/>	
-				<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
-			</div>
-			
-			<!-- 文字 -->
-			<div class="falls_item_bottom" v-if="isText">
-				<div class="falls_item_text" :title="item.text">
-					{{item.text}}
-				</div>
-				<div class="falls_item_content">
-					<div class="falls_item_user">
-						<!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
-						<div class="falls_item_user_detail">
-							<span>@{{ item.userName }}</span>
-							<div :title="item.portfolioName">{{item.portfolioName}}</div>
-							<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
-						</div>
-					</div>
-					<div class="falls_item_detail">
-						<!-- <div>
+  <div class="Falls">
+    <div
+      class="falls_item"
+      v-fadeIn="isScroll"
+      v-for="item in list"
+      :key="item.id"
+      :style="{
+        width: item.style.width + 'px',
+        height: item.style.height + 'px',
+        top: item.style.top + 'px',
+        left: item.style.left + 'px',
+      }"
+    >
+      <!-- 图片 -->
+      <div class="falls_item_img">
+        <img
+          v-lazy="item.canvasUrl"
+          @click="setItemDetail(item)"
+          :style="{
+            height: item.style.imgHeihgt + 'px',
+          }"
+        />
+        <div v-if="item.original == 1" class="falls_item_user_Original">
+          {{ $t("newScaleImage.Original") }}
+        </div>
+      </div>
+
+      <!-- 文字 -->
+      <div class="falls_item_bottom" v-if="isText">
+        <div class="falls_item_text" :title="item.text">
+          {{ item.text }}
+        </div>
+        <div class="falls_item_content">
+          <div class="falls_item_user">
+            <!-- <img src="http://121.40.53.210:3000/falls/5.png" alt=""> -->
+            <div class="falls_item_user_detail">
+              <span>@{{ item.userName }}</span>
+              <div :title="item.portfolioName">{{ item.portfolioName }}</div>
+              <!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
+            </div>
+          </div>
+          <div class="falls_item_detail">
+            <!-- <div>
 							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
 								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 							</svg>
 							<span>{{item.viewNums}}</span>
 						</div> -->
-						<label @click="portfolioLike(item)">
-							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
-							<i v-else class="fi fi-rr-social-network"></i>
-							<span>{{item.likeNum}}</span>
-						</label>
-						<div>
-							<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+            <label @click="portfolioLike(item)">
+              <i
+                v-if="true"
+                class="fi fi-sr-thumbs-up"
+                style="color: rgba(158, 158, 167)"
+              ></i>
+              <i v-else class="fi fi-rr-social-network"></i>
+              <span>{{ item.likeNum }}</span>
+            </label>
+            <div>
+              <!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
 								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
 								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
 							</svg> -->
-							<i class="fi fi-sr-eye"></i>
-							<span>{{item.viewNums}}</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+              <i class="fi fi-sr-eye"></i>
+              <span>{{ item.viewNums }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
+import {
+  defineComponent,
+  h,
+  toRefs,
+  ref,
+  reactive,
+  onMounted,
+  nextTick,
+  provide,
+  computed,
+} from "vue";
 import { gsap, TweenMax } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 export default defineComponent({
-	props:{
-		isScroll:{
-			 type:Boolean,
-			 default:true,
-		 },
-		 isText:{
-			 type:Boolean,
-			 default:true,
-		 },
-		 itemWidth:{
-			 type:Number,
-			 default:300,
-		 }
-	},
-	setup(){
-		let list = ref([])
-		let wait_list = ref([])
-		let width = ref(300)
-		let num_x = ref(1)
-		let gap_x = ref(0)
-		let gap_y = ref(0)
-		let poss = ref([])
-		let loading = ref(false)
-		let computedHeight = 0
-		let imgDom = ref()
-		return{
-		    list,
-			wait_list,
-			width,
-			num_x,
-			gap_x,
-			gap_y,
-			poss,
-			loading,
-			computedHeight,
-			imgDom,
-		}
-	},
-	directives:{
-		fadeIn:{
-			mounted (el,binding) {
-				let dom
-				if(binding.value){
-					dom = document.querySelector('.works_page .page_content')
-				}else{
-					dom = document.querySelector('.homeRecommend_content_body')
-				}
-				gsap.registerPlugin(ScrollTrigger);
-				let tl1 = gsap.timeline();
-				tl1.from(el,1, {y:'30px',opacity:0},)
-				ScrollTrigger.create({
-					trigger: el, // 触发器元素
-					start: "top 90%", // 滚动触发器的起始滚动位置
-					end: '100% 80%',   // 滚动触发器的结束滚动位置
-					// markers: true, // 开启标注功能
-					scrub: true,
-					animation:tl1,
-					scroller:dom,//设置指定元素为滚动依据
-					scrub:2,
-					// onUpdate:(v)=>{
-					// 	if(v.progress < 0.1){
-					// 		v.trigger?.classList.remove('active')
-					// 	}else{
-					// 		v.trigger?.classList.add('active')
-					// 		// v.trigger?.classList.add('active')
-					// 	}
-					// }
-				});
-			}
-		},
-	},
-		mounted () {
-			this.resize()
-			window.addEventListener("resize", this.resize);
-			let domFalls = document.querySelector('.Falls')
-			let domCss = getComputedStyle(domFalls);
-			const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
-			const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
-			const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
-			const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
-			if(this.$props.isText){
-				this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
-			}
-		},
-		beforeDestroy () {
-			this.wait_list = []
-			window.removeEventListener("resize", this.resize);
-		},
-		// 挂载方法
-		methods: {
-			clearData(){
-				this.wait_list = []
-				this.width = this.itemWidth
-				this.num_x = 1
-				this.gap_x = 0
-				this.gap_y = 0
-				this.poss = []
-				this.loading = false
-				this.list = []
-				this.resize()
-				if(this.imgDom){
-					this.imgDom.remove();
-					this.imgDom = null
-				}
-			},
-			push(arr) {
-				this.wait_list = this.wait_list.concat(arr);
-				if (!this.loading) {
-					this.loading = true;
-					this.loadImg();
-				}
-			},
-			deleteItem(id){
-				for (let index = 0; index < this.list.length; index++) {
-					if(this.list[index].id == id){
-						this.list.splice(index,1)
-						this.resize()
-						break;
-					}
-				}
-			},
-			loadImg() {
-				if (this.wait_list.length <= 0) {
-					this.loading = false;
-					this.$emit("loadend");
-					return;
-				}
-				
-				let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
-				let data = this.wait_list[0]
-				this.imgDom = document.createElement("img");
-				this.imgDom.src = url;
-				this.imgDom.style.width = this.itemWidth + "px";
-				this.imgDom.style.maxHeight = this.itemWidth+330 + "px";
-				this.imgDom.style.position = "absolute";
-				this.imgDom.style.top = "-99999px";
-				document.body.appendChild(this.imgDom);
-				this.imgDom.addEventListener("load", () => {
-					if(!this.imgDom) return
-					var idx = 0;
-					var pos_num = this.poss[idx];
-					for (var i = 1; i < this.poss.length; i++) {
-						if (pos_num > this.poss[i]) {
-							idx = i;
-							pos_num = this.poss[i];
-						}
-					}
-					// this.computedHeight = 0
-					let width = this.imgDom.offsetWidth;
-					let height = this.imgDom.offsetHeight+this.computedHeight;
-					let top = this.poss[idx] + this.gap_y;
-					let left = (idx + 1) * this.gap_x + idx * width;
-					let imgHeight = height - this.computedHeight
-					this.poss[idx] = top + height;
-					let obj = {
-						canvasUrl:url,
-						style: { width, height, top, left, imgHeight },
-						...data
-					};
-					this.list.push(obj);
-					this.imgDom.remove();
-					this.imgDom = null
-					this.wait_list.splice(0, 1);
-					this.$el.style.height =
-						Math.max(...this.poss) + this.gap_y + "px";
-					if (this.wait_list.length <= 0) {
-						this.loading = false;
-						this.$emit("loadend");
-					} else {
-						this.loadImg();
-					}
-				});
-			},
-			resize() {
-				nextTick(() => {
-					var t_width = this.$el.offsetWidth;
-					var width = this.itemWidth;
-					var num_x = parseInt(t_width / (width + 20));
-					if (num_x < 1) num_x = 1;
-					var remain = t_width - width * num_x;
-					var gap_x = remain / (num_x + 1);
-					this.gap_x = gap_x;
-					this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
-					this.num_x = num_x;
-					var poss = [];
-					for (var i = 0; i < num_x; i++) poss.push(0);
-					this.poss = poss;
-					this.reset();
-				})
-				
-			},
-			reset() {
-				for (let i = 0; i < this.list.length; i++) {
-					let width = this.list[i].style.width;
-					let height = this.list[i].style.height;
-					var idx = 0;
-					var pos_num = this.poss[idx];
-					for (var j = 1; j < this.poss.length; j++) {
-						if (pos_num > this.poss[j]) {
-							idx = j;
-							pos_num = this.poss[j];
-						}
-					}
-					let top = this.poss[idx] + this.gap_y;
-					let left = (idx + 1) * this.gap_x + idx * width;
-					this.poss[idx] = top + height;
-					this.list[i].style = { width, height, top, left };
-				}
-				this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
-			},
-			setItemDetail(data){
-				this.$emit('getImgScale',data)
-			},
-			portfolioLike(data){
-				this.$emit('setPortfolioLike',data)
-			}
-		},
-})
+  props: {
+    isScroll: {
+      type: Boolean,
+      default: true,
+    },
+    isText: {
+      type: Boolean,
+      default: true,
+    },
+    itemWidth: {
+      type: Number,
+      default: 300,
+    },
+  },
+  setup() {
+    let list = ref([]);
+    let wait_list = ref([]);
+    let width = ref(300);
+    let num_x = ref(1);
+    let gap_x = ref(0);
+    let gap_y = ref(0);
+    let poss = ref([]);
+    let loading = ref(false);
+    let computedHeight = 0;
+    let imgDom = ref();
+    return {
+      list,
+      wait_list,
+      width,
+      num_x,
+      gap_x,
+      gap_y,
+      poss,
+      loading,
+      computedHeight,
+      imgDom,
+    };
+  },
+  directives: {
+    fadeIn: {
+      mounted(el, binding) {
+        let dom;
+        if (binding.value) {
+          dom = document.querySelector(".works_page .page_content");
+        } else {
+          dom = document.querySelector(".homeRecommend_content_body");
+        }
+        gsap.registerPlugin(ScrollTrigger);
+        let tl1 = gsap.timeline();
+        tl1.from(el, 1, { y: "30px", opacity: 0 });
+        ScrollTrigger.create({
+          trigger: el, // 触发器元素
+          start: "top 90%", // 滚动触发器的起始滚动位置
+          end: "100% 80%", // 滚动触发器的结束滚动位置
+          // markers: true, // 开启标注功能
+          scrub: true,
+          animation: tl1,
+          scroller: dom, //设置指定元素为滚动依据
+          scrub: 2,
+          // onUpdate:(v)=>{
+          // 	if(v.progress < 0.1){
+          // 		v.trigger?.classList.remove('active')
+          // 	}else{
+          // 		v.trigger?.classList.add('active')
+          // 		// v.trigger?.classList.add('active')
+          // 	}
+          // }
+        });
+      },
+    },
+  },
+  mounted() {
+    this.resize();
+    window.addEventListener("resize", this.resize);
+    let domFalls = document.querySelector(".Falls");
+    let domCss = getComputedStyle(domFalls);
+    const paddingBottom =
+      domCss.getPropertyValue("--paddingBottom").split("px")[0] * 1;
+    const textMarginTop =
+      domCss.getPropertyValue("--textMarginTop").split("px")[0] * 1;
+    const textHeight =
+      domCss.getPropertyValue("--textHeight").split("px")[0] * 1;
+    const contentHeight =
+      domCss.getPropertyValue("--contentHeight").split("px")[0] * 1;
+    if (this.$props.isText) {
+      this.computedHeight =
+        paddingBottom + textMarginTop + textHeight + contentHeight;
+    }
+  },
+  beforeDestroy() {
+    this.wait_list = [];
+    window.removeEventListener("resize", this.resize);
+  },
+  // 挂载方法
+  methods: {
+    clearData() {
+      this.wait_list = [];
+      this.width = this.itemWidth;
+      this.num_x = 1;
+      this.gap_x = 0;
+      this.gap_y = 0;
+      this.poss = [];
+      this.loading = false;
+      this.list = [];
+      this.resize();
+      if (this.imgDom) {
+        this.imgDom.remove();
+        this.imgDom = null;
+      }
+    },
+    push(arr) {
+      this.wait_list = this.wait_list.concat(arr);
+      if (!this.loading) {
+        this.loading = true;
+        this.loadImg();
+      }
+    },
+    deleteItem(id) {
+      for (let index = 0; index < this.list.length; index++) {
+        if (this.list[index].id == id) {
+          this.list.splice(index, 1);
+          this.resize();
+          break;
+        }
+      }
+    },
+    loadImg() {
+      if (this.wait_list.length <= 0) {
+        this.loading = false;
+        this.$emit("loadend");
+        return;
+      }
+
+      let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
+      let data = this.wait_list[0];
+      this.imgDom = document.createElement("img");
+      this.imgDom.src = url;
+      this.imgDom.style.width = this.itemWidth + "px";
+      this.imgDom.style.maxHeight = this.itemWidth + 330 + "px";
+      this.imgDom.style.position = "absolute";
+      this.imgDom.style.top = "-99999px";
+      document.body.appendChild(this.imgDom);
+      this.imgDom.addEventListener("load", () => {
+        if (!this.imgDom) return;
+        var idx = 0;
+        var pos_num = this.poss[idx];
+        for (var i = 1; i < this.poss.length; i++) {
+          if (pos_num > this.poss[i]) {
+            idx = i;
+            pos_num = this.poss[i];
+          }
+        }
+        // this.computedHeight = 0
+        let width = this.imgDom.offsetWidth;
+        let height = this.imgDom.offsetHeight + this.computedHeight;
+        let top = this.poss[idx] + this.gap_y;
+        let left = (idx + 1) * this.gap_x + idx * width;
+        let imgHeight = height - this.computedHeight;
+        this.poss[idx] = top + height;
+        let obj = {
+          canvasUrl: url,
+          style: { width, height, top, left, imgHeight },
+          ...data,
+        };
+        this.list.push(obj);
+        this.imgDom.remove();
+        this.imgDom = null;
+        this.wait_list.splice(0, 1);
+        this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
+        if (this.wait_list.length <= 0) {
+          this.loading = false;
+          this.$emit("loadend");
+        } else {
+          this.loadImg();
+        }
+      });
+    },
+    resize() {
+      nextTick(() => {
+        var t_width = this.$el.offsetWidth;
+        var width = this.itemWidth;
+        var num_x = parseInt(t_width / (width + 20));
+        if (num_x < 1) num_x = 1;
+        var remain = t_width - width * num_x;
+        var gap_x = remain / (num_x + 1);
+        this.gap_x = gap_x;
+        this.gap_y = gap_x > 30 ? 30 : gap_x < 30 ? 20 : gap_x;
+        this.num_x = num_x;
+        var poss = [];
+        for (var i = 0; i < num_x; i++) poss.push(0);
+        this.poss = poss;
+        this.reset();
+      });
+    },
+    reset() {
+      for (let i = 0; i < this.list.length; i++) {
+        let width = this.list[i].style.width;
+        let height = this.list[i].style.height;
+        var idx = 0;
+        var pos_num = this.poss[idx];
+        for (var j = 1; j < this.poss.length; j++) {
+          if (pos_num > this.poss[j]) {
+            idx = j;
+            pos_num = this.poss[j];
+          }
+        }
+        let top = this.poss[idx] + this.gap_y;
+        let left = (idx + 1) * this.gap_x + idx * width;
+        this.poss[idx] = top + height;
+        this.list[i].style = { width, height, top, left };
+      }
+      this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
+    },
+    setItemDetail(data) {
+      this.$emit("getImgScale", data);
+    },
+    portfolioLike(data) {
+      this.$emit("setPortfolioLike", data);
+    },
+  },
+});
 </script>
 
-<style lang='less' scoped>
-	.Falls {
-		width: 100%;
-		height: auto;
-		position: relative;
-		--paddingBottom:10px;
-		--textMarginTop:10px;
-		--textHeight:25px;
-		--contentHeight:35px;
-		.falls_item{
-			position: absolute;
-			transition: all 0.15s;
-			display: flex;
-			flex-direction: column;
-			background: #fff;
-			border-radius: 2rem;
-			overflow: hidden;
-			padding-bottom: var(--paddingBottom);
-			&.falls_item:hover{
-				.falls_item_img{
-					img{
-						transform: scale(1.1);
-					}
-				}
-			}
-			.falls_item_img{
-				cursor: pointer;
-				width: 100%;
-				overflow: hidden;
-				img{
-					width: 100%;
-					object-fit: cover;
-					height: 100%;
-					transition: all .3s;
-				}
-				.falls_item_user_Original{
-					font-weight: 600;
-					font-size: 12px;
-					color: #39215b;
-					background: #c9a2ff;
-					padding: 0 5px;
-					border-radius: 4px;
-					margin-right: 2px;
-					position: absolute;
-					top: 10px;
-					right: 10px;
-					left: auto;
-				}
-			}
-			.falls_item_bottom{
-				padding: 0 10px;
-				.falls_item_text{
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					font-weight: 600;
-					font-size: 18px;
-					margin-top: var(--textMarginTop);
-					height: var(--textHeight);
-				}
-				.falls_item_content{
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					color: #525252;
-					height: var(--contentHeight);
-					.falls_item_user{
-						width: 50%;
-						display: flex;
-						align-items: center;
-						flex: 1;
-						overflow: hidden;
-						img{
-							width: 25px;
-							height: 25px;
-							border-radius: 50%;
-							margin-right: 10px;
-						}
-						.falls_item_user_detail{
-							line-height: 1;
-							width: 60%;
-							width: 100%;
-							color: #000;
-							display: flex;
-							flex-direction: column;
-							align-items: flex-start;
-							
-							>div{
-								width: 100%;
-								font-size: 16px;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								white-space: nowrap;
-							}
-							span{
-								font-size: 12px;
-								color: #525252;
-							}
-						}
-					}
-					.falls_item_detail{
-						display: flex;
-						// width: 40%;
-						// width: 20%;
-						// width: 7rem;
-						// width: 70px;
-						width: auto;
-						justify-content: space-between;
-						>label:nth-child(1){
-							margin-right: 2rem;
-						}
-						>label{
-							// cursor: pointer;
-						}
-						>label,>div{
-							display: flex;
-							align-items: center;
-							i{
-								// font-size: 1.8rem;
-								font-size: 12px;
-							}
-							svg,i{
-								color: #9e9ea7;
-								display: flex;
-								// width: 10px;
-								// height: 10px;
-								margin-right: 5px;
-							}
-							span{
-								margin-left: 3px;
-								font-size: 12px;
-							}
-						}
-					}
-				}
-			}
-			
+<style lang="less" scoped>
+.Falls {
+  width: 100%;
+  height: auto;
+  position: relative;
+  --paddingBottom: 10px;
+  --textMarginTop: 10px;
+  --textHeight: 25px;
+  --contentHeight: 35px;
+  .falls_item {
+    position: absolute;
+    transition: all 0.15s;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    border-radius: 2rem;
+    overflow: hidden;
+    padding-bottom: var(--paddingBottom);
+    &.falls_item:hover {
+      .falls_item_img {
+        img {
+          transform: scale(1.1);
+        }
+      }
+    }
+    .falls_item_img {
+      cursor: pointer;
+      width: 100%;
+      overflow: hidden;
+      img {
+        width: 100%;
+        object-fit: cover;
+        height: 100%;
+        transition: all 0.3s;
+      }
+      .falls_item_user_Original {
+        font-weight: 600;
+        font-size: 12px;
+        color: #39215b;
+        background: #c9a2ff;
+        padding: 0 5px;
+        border-radius: 4px;
+        margin-right: 2px;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        left: auto;
+      }
+    }
+    .falls_item_bottom {
+      padding: 0 10px;
+      .falls_item_text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: 600;
+        font-size: 18px;
+        margin-top: var(--textMarginTop);
+        height: var(--textHeight);
+      }
+      .falls_item_content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: #525252;
+        height: var(--contentHeight);
+        .falls_item_user {
+          width: 50%;
+          display: flex;
+          align-items: center;
+          flex: 1;
+          overflow: hidden;
+          img {
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            margin-right: 10px;
+          }
+          .falls_item_user_detail {
+            line-height: 1;
+            width: 60%;
+            width: 100%;
+            color: #000;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
 
-		}
-	}
-</style>
\ No newline at end of file
+            > div {
+              width: 100%;
+              font-size: 16px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            span {
+              font-size: 12px;
+              color: #525252;
+            }
+          }
+        }
+        .falls_item_detail {
+          display: flex;
+          // width: 40%;
+          // width: 20%;
+          // width: 7rem;
+          // width: 70px;
+          width: auto;
+          justify-content: space-between;
+          > label:nth-child(1) {
+            margin-right: 2rem;
+          }
+          > label {
+            // cursor: pointer;
+          }
+          > label,
+          > div {
+            display: flex;
+            align-items: center;
+            i {
+              // font-size: 1.8rem;
+              font-size: 12px;
+            }
+            svg,
+            i {
+              color: #9e9ea7;
+              display: flex;
+              // width: 10px;
+              // height: 10px;
+              margin-right: 5px;
+            }
+            span {
+              margin-left: 3px;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/component/home/batchGeneration/createCloud.vue b/src/component/home/batchGeneration/createCloud.vue
index c468b43c..95984b3d 100644
--- a/src/component/home/batchGeneration/createCloud.vue
+++ b/src/component/home/batchGeneration/createCloud.vue
@@ -1,748 +1,855 @@
 <template>
-	<div class="createCloud" ref="createCloud"></div>
-    <a-modal
-        class="createCloud_modal generalModel"
-        v-model:visible="operationsModal"
-        :footer="null"
-		:get-container="() => $refs.createCloud"
-        width="50%"
-		:height="'77rem'"
-        :maskClosable="false"
-        :centered="true"
-        :closable="false"
-		:mask="true"
-        wrapClassName="#app"
-        :keyboard="false"
-    >
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
-					</svg>
-			</div>
-		</div>
-		<div class="modal_title_text">
-			<div>Create Batch Generation Tasks</div>
-		</div>
-		<div class="allUserPoeration_center admin_page">
-			<div class="admin_state_item">
-				<span>Task type <span>*</span></span>
-				<a-select
-					v-model:value="buildType"
-					allowClear
-					style="width: 200px"
-					placeholder="Please select"
-					:options="cloudList"
-					@change="changeBuildType"
-				></a-select>
-			</div>
-			<div class="admin_state_item">
-				<span>Project <span v-show="buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'">*</span></span>
-				<a-select
-					v-model:value="projectData"
-					show-search
-					allowClear
-					:show-arrow="false"
-						:default-active-first-option="false"
-					:not-found-content="null"
-					:filter-option="false"
-					style="width: 16rem"
-					placeholder="Please select"
-					:options="objectList"
-					@search="getHistoryProjectList"
-					@change="changeProject"
-				>
-				<template #option="{ value: val, label, icon,updateTime }">
-					<span :title="updateTime.replace('T', ' ')">{{ label }}</span>
-				</template>
-				</a-select>
-			</div>
-			<div class="admin_state_item">
-				<span>Name <span>*</span></span>
-				<input
-					v-model="porjectName"
-					:placeholder="placeholder"
-					@focus="focus"
-					@blur="blur"
-					type="text"
-					style="width: 200px"
-				/>
-			</div>
-			<div class="admin_state_item" v-show="buildType">
-				<span>Quantity <span>*</span></span>
-				<input
-					v-model="numberOfImages"
-					placeholder="Please enter number"
-					type="text"
-					style="width: 200px"
-					@input="changeNumberOfImages"
-				/>
-			</div>
-			<!-- toProductimg -->
-			 <div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item ">
-				<span>{{$t('ProductImg.Similarity')}}</span>
-				<div class="sliderAndImput" style="width: 200px">
-					<!-- <a-slider class="system_silder"
+  <div class="createCloud" ref="createCloud"></div>
+  <a-modal
+    class="createCloud_modal generalModel"
+    v-model:visible="operationsModal"
+    :footer="null"
+    :get-container="() => $refs.createCloud"
+    width="50%"
+    :height="'77rem'"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="true"
+    wrapClassName="#app"
+    :keyboard="false"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="#000"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="#000"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="modal_title_text">
+      <div>Create Batch Generation Tasks</div>
+    </div>
+    <div class="allUserPoeration_center admin_page">
+      <div class="admin_state_item">
+        <span>Task type <span>*</span></span>
+        <a-select
+          v-model:value="buildType"
+          allowClear
+          style="width: 200px"
+          placeholder="Please select"
+          :options="cloudList"
+          @change="changeBuildType"
+        ></a-select>
+      </div>
+      <div class="admin_state_item">
+        <span
+          >Project
+          <span
+            v-show="
+              buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'
+            "
+            >*</span
+          ></span
+        >
+        <a-select
+          v-model:value="projectData"
+          show-search
+          allowClear
+          :show-arrow="false"
+          :default-active-first-option="false"
+          :not-found-content="null"
+          :filter-option="false"
+          style="width: 16rem"
+          placeholder="Please select"
+          :options="objectList"
+          @search="getHistoryProjectList"
+          @change="changeProject"
+        >
+          <template #option="{ value: val, label, icon, updateTime }">
+            <span :title="updateTime.replace('T', ' ')">{{ label }}</span>
+          </template>
+        </a-select>
+      </div>
+      <div class="admin_state_item">
+        <span>Name <span>*</span></span>
+        <input
+          v-model="porjectName"
+          :placeholder="placeholder"
+          @focus="focus"
+          @blur="blur"
+          type="text"
+          style="width: 200px"
+        />
+      </div>
+      <div class="admin_state_item" v-show="buildType">
+        <span>Quantity <span>*</span></span>
+        <input
+          v-model="numberOfImages"
+          placeholder="Please enter number"
+          type="text"
+          style="width: 200px"
+          @input="changeNumberOfImages"
+        />
+      </div>
+      <!-- toProductimg -->
+      <div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item">
+        <span>{{ $t("ProductImg.Similarity") }}</span>
+        <div class="sliderAndImput" style="width: 200px">
+          <!-- <a-slider class="system_silder"
 						v-model:value="similarity"
 						range
 						:step="5"
 					>
 					</a-slider> -->
-					<div style="display: flex;">
-						<input type="number" readonly v-model="similarity[0]">
-						<div style="margin: 0 1rem;">-</div>
-						<input type="number" readonly v-model="similarity[1]">
-					</div>
-				</div>
-			</div>
-			 <div v-show="buildType == 'RELIGHT'" class="admin_state_item ">
-				<span>{{$t('ProductImg.RelightDirection')}}</span>
-				<a-select  style="width: 200px" v-model:value="relightDirection" :options="relightDirectionList"></a-select>
-			</div>
-			<div v-show="buildType == 'RELIGHT'" class="admin_state_item ">
-				<span>{{$t('ProductImg.Highlight')}}</span>
-				<div class="sliderAndImput" style="width: 200px">
-					<a-slider class="system_silder"
-						v-model:value="brightenValue"
-						:tooltipVisible="false"
-						
-						:max="3"
-						:min="1"
-						:step="0.1"
-					>
-					</a-slider>
-					<input type="number" readonly v-model="brightenValue">
-				</div>
-			</div>
-			<div v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'" class="admin_state_item">
-				<span>Keyword</span>
-				<input
-					v-model="generateText"
-					:placeholder="$t('Generate.inputContent1')"
-					type="text"
-					style="width: 200px"
-				/>
-			</div>
-			
-			<!-- <div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
+          <div style="display: flex">
+            <input type="number" readonly v-model="similarity[0]" />
+            <div style="margin: 0 1rem">-</div>
+            <input type="number" readonly v-model="similarity[1]" />
+          </div>
+        </div>
+      </div>
+      <div v-show="buildType == 'RELIGHT'" class="admin_state_item">
+        <span>{{ $t("ProductImg.RelightDirection") }}</span>
+        <a-select
+          style="width: 200px"
+          v-model:value="relightDirection"
+          :options="relightDirectionList"
+        ></a-select>
+      </div>
+      <div v-show="buildType == 'RELIGHT'" class="admin_state_item">
+        <span>{{ $t("ProductImg.Highlight") }}</span>
+        <div class="sliderAndImput" style="width: 200px">
+          <a-slider
+            class="system_silder"
+            v-model:value="brightenValue"
+            :tooltipVisible="false"
+            :max="3"
+            :min="1"
+            :step="0.1"
+          >
+          </a-slider>
+          <input type="number" readonly v-model="brightenValue" />
+        </div>
+      </div>
+      <div
+        v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'"
+        class="admin_state_item"
+      >
+        <span>Keyword</span>
+        <input
+          v-model="generateText"
+          :placeholder="$t('Generate.inputContent1')"
+          type="text"
+          style="width: 200px"
+        />
+      </div>
+
+      <!-- <div class="selectImgList generalScroll" v-mousewheel v-show="exhibitionImgList.length>0">
 				<div v-for="item in exhibitionImgList" class="item">
 					<img :src="item.designOutfitUrl||item.url" alt="">
 				</div>
 			</div> -->
-			<div class="productImg_content_item_imgBox generalScroll upload_item" v-if="buildType && buildType != 'SERIES_DESIGN' && buildType != 'SINGLE_DESIGN'" v-mousewheel>
-				<div class="content_item_imgBox_itemImg" v-for="item in uploadElement" :key="item">
-					<div
-						class="imgBox"
-						@click="()=>item.isChecked = !item.isChecked"
-					>
-						<img :class="[item?.isChecked?'active':'']" :src="item?.url" class="upload_img"/>
-						<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
-					</div>
-				</div>
-				<div class="content_item_imgBox_itemImg" v-for="(file, index) in fileList" :key="file">
-					<div class="upload_file_item_content" v-show="file?.status === 'uploading'"  style="display: flex;align-items: center;">
-						<a-spin size="large" />
-					</div>
-					<div
-						class="imgBox"
-						v-show="file?.status === 'done'"
-						@click="()=>file.isChecked = !file.isChecked"
-					>
-						<img :class="[file?.isChecked?'active':'']" :src="file?.imgUrl" class="upload_img"/>
-						<a-checkbox v-model:checked="file.isChecked"></a-checkbox>
-					</div>
-				</div>
-				<div class="upload_file_item upload_component">
-				<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
-					<a-upload
-						:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
-						list-type="picture-card"
-						:capture="null"
-						:headers="{ Authorization: getCookie('token') }"
-						:before-upload="beforeUpload"
-						:data="{
-							projectId:2061,
-						}"
-						v-model:file-list="fileList"
-						:multiple="true"
-						:maxCount="8"
-						accept=".jpg,.png,.jpeg,.bmp"
-						@change="(file) => fileUploadChange(file)"
-					>
-						<div
-							class="upload_tip_block"
-						>
-							<i class="fi fi-br-upload"></i>
-							<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-						</div>
-					</a-upload>
-				</div>
-
-			</div>
-			<!-- <div class="admin_state_item" style="width: 100%;">
+      <div
+        class="productImg_content_item_imgBox generalScroll upload_item"
+        v-if="
+          buildType &&
+          buildType != 'SERIES_DESIGN' &&
+          buildType != 'SINGLE_DESIGN'
+        "
+        v-mousewheel
+      >
+        <div
+          class="content_item_imgBox_itemImg"
+          v-for="item in uploadElement"
+          :key="item"
+        >
+          <div class="imgBox" @click="() => (item.isChecked = !item.isChecked)">
+            <img
+              :class="[item?.isChecked ? 'active' : '']"
+              :src="item?.url"
+              class="upload_img"
+            />
+            <a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+          </div>
+        </div>
+        <div
+          class="content_item_imgBox_itemImg"
+          v-for="(file, index) in fileList"
+          :key="file"
+        >
+          <div
+            class="upload_file_item_content"
+            v-show="file?.status === 'uploading'"
+            style="display: flex; align-items: center"
+          >
+            <a-spin size="large" />
+          </div>
+          <div
+            class="imgBox"
+            v-show="file?.status === 'done'"
+            @click="() => (file.isChecked = !file.isChecked)"
+          >
+            <img
+              :class="[file?.isChecked ? 'active' : '']"
+              :src="file?.imgUrl"
+              class="upload_img"
+            />
+            <a-checkbox v-model:checked="file.isChecked"></a-checkbox>
+          </div>
+        </div>
+        <div class="upload_file_item upload_component">
+          <!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
+          <a-upload
+            :action="
+              getUploadUrl() + '/api/history/toProductImageElementUpload'
+            "
+            list-type="picture-card"
+            :capture="null"
+            :headers="{ Authorization: getCookie('token') }"
+            :before-upload="beforeUpload"
+            :data="{
+              projectId: 2061,
+            }"
+            v-model:file-list="fileList"
+            :multiple="true"
+            :maxCount="8"
+            accept=".jpg,.png,.jpeg,.bmp"
+            @change="(file) => fileUploadChange(file)"
+          >
+            <div class="upload_tip_block">
+              <i class="fi fi-br-upload"></i>
+              <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+            </div>
+          </a-upload>
+        </div>
+      </div>
+      <!-- <div class="admin_state_item" style="width: 100%;">
 				<span style="margin: 0;">Generation time：19min</span>
 			</div> -->
-			<div v-show="buildType" class="admin_state_item" style="width: 100%;">
-				<span style="margin: 0;">Cost credit：{{credits * numberOfImages}}</span>
-			</div>
-		</div>
-		<div class="allUserPoeration_btn admin_page">
-			<!-- <div class="admin_search_item" @click="cancelDsign">
+      <div v-show="buildType" class="admin_state_item" style="width: 100%">
+        <span style="margin: 0"
+          >Cost credit：{{ credits * numberOfImages }}</span
+        >
+      </div>
+    </div>
+    <div class="allUserPoeration_btn admin_page">
+      <!-- <div class="admin_search_item" @click="cancelDsign">
 				Close
 			</div> -->
-			<div class="admin_search_item" @click="setOk">
-				OK
-			</div>
-		
-		</div>
-    </a-modal>
-	<div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div>
+      <div class="admin_search_item" @click="setOk">OK</div>
+    </div>
+  </a-modal>
+  <div class="mark_loading" v-show="loadingShow">
+    <a-spin size="large" />
+  </div>
 </template>
 <script>
-import { defineComponent, computed, reactive, watch, onMounted, h, nextTick, toRefs } from "vue";
+import {
+  defineComponent,
+  computed,
+  reactive,
+  watch,
+  onMounted,
+  h,
+  nextTick,
+  toRefs,
+} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import { Modal, message } from "ant-design-vue";
-import { getCookie,setCookie } from "@/tool/cookie";
+import { getCookie, setCookie } from "@/tool/cookie";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import { getUploadUrl,isMoible } from "@/tool/util";
-import dayjs, { Dayjs } from 'dayjs';
+import { getUploadUrl, isMoible } from "@/tool/util";
+import dayjs, { Dayjs } from "dayjs";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import {getMinioUrl} from '@/tool/util'
-const md5 = require("md5");
+import { getMinioUrl } from "@/tool/util";
+import md5 from "md5";
 export default defineComponent({
-    components: {
+  components: {},
+  props: {
+    cloudList: {
+      type: Array,
+      default: [],
     },
-	props:{
-		cloudList:{
-			type:Array,
-			default:[]
-		}	
-	},
-	emits: ['getContentList'],
-    setup(props,{emit}) {
-        const store = useStore();
-		let operations = reactive({
-			operationsModal:false,
-			loadingShow:false,
-		})
-		let operationsData = reactive({
-			buildType:'',
-			numberOfImages:'',
-			credits:0,
-			exhibitionImgList:[],//选择的图片
-			projectData:null,//批量id
-			objectList:[],
-			porjectName:'',//任务名字
-			//toProduct
-			generateText:'',//输入的内容
-			similarity:[20,40],
-			brightenValue:1,//亮度
-			relightDirection:'Right Light',//打光方向
-			relightDirectionList:[
-				{
-					value:'Right Light',
-					label:useI18n().t('ProductImg.RightLight')
-				},{
-					value:'Left Light',
-					label:useI18n().t('ProductImg.LeftLight')
-				},{
-					value:'Top Light',
-					label:useI18n().t('ProductImg.TopLight')
-				},{
-					value:'Bottom Light',
-					label:useI18n().t('ProductImg.BottomLight')
-				}
-			],
-			fileList:[],
-			uploadElement:[],
-			placeholder:'',
-		})
-		const getUploadElement = ()=>{
-			operations.loadingShow = true
-			let value = {
-				id:operationsData.projectData,
-				moduleList:['uploadElement']
-			}
-			operationsData.placeholder = 'Batch_' + setPlaceholder()
-			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
-				operationsData.uploadElement = rv.uploadElement
-				operations.loadingShow = false
-			}).catch((err)=>{
-				operations.loadingShow = false
-			})
-		}
-		let init = (projectData,buildType)=>{
-			operations.operationsModal = true
-			clearData()
-			if(projectData?.id){
-				operationsData.projectData = {label:projectData.name,value:projectData.id}
-				getUploadElement()
-			}
-			if(buildType.value)operationsData.buildType = buildType
-		}
-		const clearData = ()=>{
-			operationsData.porjectName = ''
-			operationsData.generateText = ''
-			operationsData.similarity = [20,40]
-			operationsData.brightenValue = 1
-			operationsData.fileList = []
-			operationsData.uploadElement = []
-		}
-		const changeProject = ()=>{
-			getUploadElement()
-		}
-		const changeBuildType = ()=>{
-			// operationsData.exhibitionImgList = []
-			operationsData.projectData = null
-			props.cloudList.forEach((item)=>{
-				if(item.value == operationsData.buildType){
-					operationsData.credits = item.consumption
-				}
-			})
-			getHistoryProjectList()
-		}
-		const getGenerateCloudImgList = (type)=>{
-			let list = []
-			if(type == 'SINGLE_DESIGN'|| type == 'SERIES_DESIGN')return list
-			let selectList = []
-			let fileList = operationsData.fileList.filter((item)=>item.isChecked)
-			let uploadElement = operationsData.uploadElement.filter((item)=>item.isChecked)
-			if(fileList)selectList.push(...fileList)
-			if(uploadElement)selectList.push(...uploadElement)
-			
-			selectList.forEach((item)=>{
-				let obj = {
-					
-				}
-				if(type == 'POSE_TRANSFER'){
-					obj = {
-						poseId:1,
-						productImage:getMinioUrl(item.imgUrl)
-					}
-				}else{
-					obj = {
-						elementId:item.id,
-						elementType:item.type||'ProductElement'
-					}
-				}
-				list.push(obj)
-			})
-			return list
-		}
-		let getPorductImg = ()=>{
-			let modularData = store.state.UploadFilesModule.modularData
-			let list = []
-			if(operationsData.buildType == 'toProductImage' || operationsData.buildType == 'relight'){
-				let productOrRelight = []
-				if(operationsData.buildType == 'toProductImage')productOrRelight = modularData.design.likeData
-				if(operationsData.buildType == 'relight')productOrRelight = modularData.toProduct
-
-				productOrRelight.forEach((item)=>{
-					if(!item.id)return
-					let obj = {
-						"createTime": "",
-						"elementId": 0,
-						"elementType": "",
-						"id": 0,
-						"isLike": 0,
-						"taskId": "",
-						"toProductImageRecordId": 0,
-						"url": "",
-					}
-					obj.elementId = item.designOutfitId
-					obj.elementType = 'DesignOutfit'
-					if(operationsData.buildType == 'relight'){
-						obj.elementId = item.id
-						obj.elementType = 'ToProductImage'
-					}
-					list.push(obj)
-				}) 
-			} 
-			return list
-		}
-		const getImageStrength = (num) => {
-			let imageStrength = num == 100? 95 :num
-			return imageStrength;
-		};
-		const getPoseTransformData = ()=>{
-			let list = []
-			let toProduct = store.state.UploadFilesModule.modularData.toProduct
-			toProduct.forEach((item)=>{
-				let obj = {
-					poseId:1,
-					productImage:getMinioUrl(item.url)
-				}	
-				list.push(obj)
-			})
-			return list
-		}
-		let setAddData = ()=>{
-			let buildTypeCorresponding = {
-				SINGLE_DESIGN:"design",
-				SERIES_DESIGN:"design",
-				TO_PRODUCT_IMAGE:"toProductImage",
-				RELIGHT:"relight",
-				POSE_TRANSFER:"poseTransfer"
-			}
-			return {
-				"buildType": buildTypeCorresponding[operationsData.buildType],
-				nums: operationsData.numberOfImages,
-				projectId: operationsData.projectData,
-				name:operationsData.porjectName || operationsData.projectData,
-				//productimg
-				toProductImage:{
-					prompt:operationsData.generateText,//输入的内容
-					toProductImageVOList:getGenerateCloudImgList(operationsData.buildType),//选择的图片
-					// toProductImageVOList:getPorductImg(),//选择的图片
-					projectId: operationsData.projectData,
-					direction:operationsData.relightDirection,//打光方向
-					brightenValue:operationsData.brightenValue,
-					imageStrength:(100 - getImageStrength())/100,
-					imageStrengthMin:(100 - getImageStrength(operationsData.similarity[1]))/100,
-					imageStrengthMax:(100 - getImageStrength(operationsData.similarity[0]))/100,
-				},
-				//poseTransform
-				// poseTransform:getPoseTransformData(),
-				poseTransform:operationsData.buildType == 'POSE_TRANSFER'?getGenerateCloudImgList('POSE_TRANSFER'):[],
-				private: operationsData.projectData,
-				ToProductImageDTO: operationsData.projectData,
-			}
-		}
-		let cancelDsign = ()=>{
-			operationsData.buildType=''
-			operationsData.numberOfImages=''
-			operations.operationsModal = false
-		}
-		let setOk = ()=>{
-			let data 
-			data = setAddData()
-			if(operationsData.buildType == 'TO_PRODUCT_IMAGE'){
-				if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("Please upload the picture first.")
-				// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
-			}else if(operationsData.buildType == 'RELIGHT'){
-				if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("Please upload the picture first.")
-				// if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
-			}else if(operationsData.buildType == 'POSE_TRANSFER'){
-				if(data.poseTransform.length == 0)return message.warning("Please upload the picture first.")
-				// if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
-			}
-			if(operationsData.buildType == 'DESIGN' && !operationsData.projectData)return message.warning('Please select a project')
-			if(!data.buildType || !data.nums || !data.name || (operationsData.buildType == 'DESIGN' && !operationsData.projectData))return message.warning('Please check the input box marked with *')
-			operations.loadingShow = true
-			Https.axiosPost(Https.httpUrls.designCloud, data).then(
-			(rv) => {
-				if (rv) {
-					operations.loadingShow = false
-					cancelDsign()
-					let porjectData = operationsData.objectList.find(item => item.id === operationsData.projectData)
-					let project = {
-						value:porjectData?.id,
-						label:porjectData?.name,
-					}
-					emit('getContentList',project)
-				}
-			}).catch((error) => {
-				operations.loadingShow = false
-			})
-		}
-		const changeNumberOfImages = ()=>{
-			if(operationsData.buildType =='relight' || operationsData.buildType == 'poseTransfer'){
-				if(operationsData.exhibitionImgList.length < Number(operationsData.numberOfImages)){
-					operationsData.numberOfImages = operationsData.exhibitionImgList.length
-				}
-			}
-		}
-		let getHistoryTime = null
-		const getHistoryProjectList = (event)=>{
-			clearTimeout(getHistoryTime)
-			if(!event && !operationsData.buildType){
-				operationsData.objectList = []
-				return
-			}
-			getHistoryTime = setTimeout(()=>{
-				let value = {
-					projectName:event,
-					page:1,
-					size:9999,
-					asc:0,
-					process:operationsData.buildType,
-				}
-				Https.axiosPost(Https.httpUrls.historyProject,value).then((rv)=>{
-					rv.content.forEach((item)=>{
-						item.value = item.id
-						item.label = item.name
-					})
-					operationsData.objectList = rv.content
-				})
-			},1000)
-		}
-		let beforeUpload = async (file)=>{
-            const isJpgOrPng =
-                file.type === "image/jpeg" ||
-                file.type === "image/png" ||
-                file.type === "image/jpg" ||
-                file.type === "image/bmp";
-            if (!isJpgOrPng) {
-                message.info(useI18n().t('MoodboardUpload.jsContent3'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(useI18n().t('MoodboardUpload.jsContent4'));
-            }
-            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-        }
-		let fileUploadChange = (data)=> {
-            let file = data.file;
-			let bor = true
-            if (file.status === "done") {
-                let res = JSON.parse(file.xhr.response);
-				if(res.errCode == 0){
-					file.imgUrl = res.data.url;
-					file.id = res.data.id
-					file.isChecked = true
-					file.type = 'ProductElement'
-					operationsData.fileList.filter((v) => v.status === "done");
-				}else{
-					bor = false
-				}
-				// this.showFileList = productImgData.fileList
-            } else if (file.status === "error") {
-				bor = false
-            }
-        }
-		const setPlaceholder = ()=>{
-			if(!operationsData.projectData)return ''
-			let index = operationsData.objectList.findIndex(item => item.id === operationsData.projectData)
-			return operationsData.objectList[index].name
-		}
-		const focus = ()=>{
-			if(operationsData.porjectName)return
-			operationsData.porjectName = operationsData.placeholder
-		}
-		const blur = ()=>{
-			if(operationsData.porjectName != operationsData.placeholder)return
-			operationsData.porjectName = ''
-		}
-        return {
-            ...toRefs(operations),
-            ...toRefs(operationsData),
-			cancelDsign,
-			init,
-			changeProject,
-			focus,
-			blur,
-			setOk,
-			changeBuildType,
-			changeNumberOfImages,
-			getHistoryProjectList,
-			beforeUpload,
-			fileUploadChange,
-			getUploadUrl,
-			getCookie,
+  },
+  emits: ["getContentList"],
+  setup(props, { emit }) {
+    const store = useStore();
+    let operations = reactive({
+      operationsModal: false,
+      loadingShow: false,
+    });
+    let operationsData = reactive({
+      buildType: "",
+      numberOfImages: "",
+      credits: 0,
+      exhibitionImgList: [], //选择的图片
+      projectData: null, //批量id
+      objectList: [],
+      porjectName: "", //任务名字
+      //toProduct
+      generateText: "", //输入的内容
+      similarity: [20, 40],
+      brightenValue: 1, //亮度
+      relightDirection: "Right Light", //打光方向
+      relightDirectionList: [
+        {
+          value: "Right Light",
+          label: useI18n().t("ProductImg.RightLight"),
+        },
+        {
+          value: "Left Light",
+          label: useI18n().t("ProductImg.LeftLight"),
+        },
+        {
+          value: "Top Light",
+          label: useI18n().t("ProductImg.TopLight"),
+        },
+        {
+          value: "Bottom Light",
+          label: useI18n().t("ProductImg.BottomLight"),
+        },
+      ],
+      fileList: [],
+      uploadElement: [],
+      placeholder: "",
+    });
+    const getUploadElement = () => {
+      operations.loadingShow = true;
+      let value = {
+        id: operationsData.projectData,
+        moduleList: ["uploadElement"],
+      };
+      operationsData.placeholder = "Batch_" + setPlaceholder();
+      Https.axiosPost(Https.httpUrls.getModuleContent, value)
+        .then(async (rv) => {
+          operationsData.uploadElement = rv.uploadElement;
+          operations.loadingShow = false;
+        })
+        .catch((err) => {
+          operations.loadingShow = false;
+        });
+    };
+    let init = (projectData, buildType) => {
+      operations.operationsModal = true;
+      clearData();
+      if (projectData?.id) {
+        operationsData.projectData = {
+          label: projectData.name,
+          value: projectData.id,
         };
-    },
-    data() {
-        return {
-			indicator: h(LoadingOutlined, {
-				style: {
-					fontSize: "2.4rem",
-				},
-				spin: true,
-			}),
-        };
-    },
-    mounted() {},
-    methods: {
-       
-    },
-	directives:{
-		mousewheel:{
-			mounted (el) {
-				el.addEventListener('mouseenter', (e)=> {
-					if(el.scrollWidth > el.clientWidth){
-						el.parentElement.style.overflowY = 'hidden';
-					}
-				});
+        getUploadElement();
+      }
+      if (buildType.value) operationsData.buildType = buildType;
+    };
+    const clearData = () => {
+      operationsData.porjectName = "";
+      operationsData.generateText = "";
+      operationsData.similarity = [20, 40];
+      operationsData.brightenValue = 1;
+      operationsData.fileList = [];
+      operationsData.uploadElement = [];
+    };
+    const changeProject = () => {
+      getUploadElement();
+    };
+    const changeBuildType = () => {
+      // operationsData.exhibitionImgList = []
+      operationsData.projectData = null;
+      props.cloudList.forEach((item) => {
+        if (item.value == operationsData.buildType) {
+          operationsData.credits = item.consumption;
+        }
+      });
+      getHistoryProjectList();
+    };
+    const getGenerateCloudImgList = (type) => {
+      let list = [];
+      if (type == "SINGLE_DESIGN" || type == "SERIES_DESIGN") return list;
+      let selectList = [];
+      let fileList = operationsData.fileList.filter((item) => item.isChecked);
+      let uploadElement = operationsData.uploadElement.filter(
+        (item) => item.isChecked
+      );
+      if (fileList) selectList.push(...fileList);
+      if (uploadElement) selectList.push(...uploadElement);
 
-				// 鼠标移出事件
-				el.addEventListener('mouseleave', ()=> {
-					el.parentElement.style.overflowY = 'auto';
-				});
-				el.addEventListener('wheel',(e)=>{
-					let num = 0
-					if(e.deltaY > 0){
-						num = 25
-					}else{
-						num = -25
-					}
-					el.scrollBy(num, 0);
-				},{ passive: true })
-			}
-		},
-	},
+      selectList.forEach((item) => {
+        let obj = {};
+        if (type == "POSE_TRANSFER") {
+          obj = {
+            poseId: 1,
+            productImage: getMinioUrl(item.imgUrl),
+          };
+        } else {
+          obj = {
+            elementId: item.id,
+            elementType: item.type || "ProductElement",
+          };
+        }
+        list.push(obj);
+      });
+      return list;
+    };
+    let getPorductImg = () => {
+      let modularData = store.state.UploadFilesModule.modularData;
+      let list = [];
+      if (
+        operationsData.buildType == "toProductImage" ||
+        operationsData.buildType == "relight"
+      ) {
+        let productOrRelight = [];
+        if (operationsData.buildType == "toProductImage")
+          productOrRelight = modularData.design.likeData;
+        if (operationsData.buildType == "relight")
+          productOrRelight = modularData.toProduct;
+
+        productOrRelight.forEach((item) => {
+          if (!item.id) return;
+          let obj = {
+            createTime: "",
+            elementId: 0,
+            elementType: "",
+            id: 0,
+            isLike: 0,
+            taskId: "",
+            toProductImageRecordId: 0,
+            url: "",
+          };
+          obj.elementId = item.designOutfitId;
+          obj.elementType = "DesignOutfit";
+          if (operationsData.buildType == "relight") {
+            obj.elementId = item.id;
+            obj.elementType = "ToProductImage";
+          }
+          list.push(obj);
+        });
+      }
+      return list;
+    };
+    const getImageStrength = (num) => {
+      let imageStrength = num == 100 ? 95 : num;
+      return imageStrength;
+    };
+    const getPoseTransformData = () => {
+      let list = [];
+      let toProduct = store.state.UploadFilesModule.modularData.toProduct;
+      toProduct.forEach((item) => {
+        let obj = {
+          poseId: 1,
+          productImage: getMinioUrl(item.url),
+        };
+        list.push(obj);
+      });
+      return list;
+    };
+    let setAddData = () => {
+      let buildTypeCorresponding = {
+        SINGLE_DESIGN: "design",
+        SERIES_DESIGN: "design",
+        TO_PRODUCT_IMAGE: "toProductImage",
+        RELIGHT: "relight",
+        POSE_TRANSFER: "poseTransfer",
+      };
+      return {
+        buildType: buildTypeCorresponding[operationsData.buildType],
+        nums: operationsData.numberOfImages,
+        projectId: operationsData.projectData,
+        name: operationsData.porjectName || operationsData.projectData,
+        //productimg
+        toProductImage: {
+          prompt: operationsData.generateText, //输入的内容
+          toProductImageVOList: getGenerateCloudImgList(
+            operationsData.buildType
+          ), //选择的图片
+          // toProductImageVOList:getPorductImg(),//选择的图片
+          projectId: operationsData.projectData,
+          direction: operationsData.relightDirection, //打光方向
+          brightenValue: operationsData.brightenValue,
+          imageStrength: (100 - getImageStrength()) / 100,
+          imageStrengthMin:
+            (100 - getImageStrength(operationsData.similarity[1])) / 100,
+          imageStrengthMax:
+            (100 - getImageStrength(operationsData.similarity[0])) / 100,
+        },
+        //poseTransform
+        // poseTransform:getPoseTransformData(),
+        poseTransform:
+          operationsData.buildType == "POSE_TRANSFER"
+            ? getGenerateCloudImgList("POSE_TRANSFER")
+            : [],
+        private: operationsData.projectData,
+        ToProductImageDTO: operationsData.projectData,
+      };
+    };
+    let cancelDsign = () => {
+      operationsData.buildType = "";
+      operationsData.numberOfImages = "";
+      operations.operationsModal = false;
+    };
+    let setOk = () => {
+      let data;
+      data = setAddData();
+      if (operationsData.buildType == "TO_PRODUCT_IMAGE") {
+        if (data.toProductImage.toProductImageVOList.length == 0)
+          return message.warning("Please upload the picture first.");
+        // if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
+      } else if (operationsData.buildType == "RELIGHT") {
+        if (data.toProductImage.toProductImageVOList.length == 0)
+          return message.warning("Please upload the picture first.");
+        // if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
+      } else if (operationsData.buildType == "POSE_TRANSFER") {
+        if (data.poseTransform.length == 0)
+          return message.warning("Please upload the picture first.");
+        // if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
+      }
+      if (operationsData.buildType == "DESIGN" && !operationsData.projectData)
+        return message.warning("Please select a project");
+      if (
+        !data.buildType ||
+        !data.nums ||
+        !data.name ||
+        (operationsData.buildType == "DESIGN" && !operationsData.projectData)
+      )
+        return message.warning("Please check the input box marked with *");
+      operations.loadingShow = true;
+      Https.axiosPost(Https.httpUrls.designCloud, data)
+        .then((rv) => {
+          if (rv) {
+            operations.loadingShow = false;
+            cancelDsign();
+            let porjectData = operationsData.objectList.find(
+              (item) => item.id === operationsData.projectData
+            );
+            let project = {
+              value: porjectData?.id,
+              label: porjectData?.name,
+            };
+            emit("getContentList", project);
+          }
+        })
+        .catch((error) => {
+          operations.loadingShow = false;
+        });
+    };
+    const changeNumberOfImages = () => {
+      if (
+        operationsData.buildType == "relight" ||
+        operationsData.buildType == "poseTransfer"
+      ) {
+        if (
+          operationsData.exhibitionImgList.length <
+          Number(operationsData.numberOfImages)
+        ) {
+          operationsData.numberOfImages =
+            operationsData.exhibitionImgList.length;
+        }
+      }
+    };
+    let getHistoryTime = null;
+    const getHistoryProjectList = (event) => {
+      clearTimeout(getHistoryTime);
+      if (!event && !operationsData.buildType) {
+        operationsData.objectList = [];
+        return;
+      }
+      getHistoryTime = setTimeout(() => {
+        let value = {
+          projectName: event,
+          page: 1,
+          size: 9999,
+          asc: 0,
+          process: operationsData.buildType,
+        };
+        Https.axiosPost(Https.httpUrls.historyProject, value).then((rv) => {
+          rv.content.forEach((item) => {
+            item.value = item.id;
+            item.label = item.name;
+          });
+          operationsData.objectList = rv.content;
+        });
+      }, 1000);
+    };
+    let beforeUpload = async (file) => {
+      const isJpgOrPng =
+        file.type === "image/jpeg" ||
+        file.type === "image/png" ||
+        file.type === "image/jpg" ||
+        file.type === "image/bmp";
+      if (!isJpgOrPng) {
+        message.info(useI18n().t("MoodboardUpload.jsContent3"));
+      }
+      const isLt2M = file.size / 1024 / 1024 < 5;
+      if (!isLt2M) {
+        message.info(useI18n().t("MoodboardUpload.jsContent4"));
+      }
+      return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+    };
+    let fileUploadChange = (data) => {
+      let file = data.file;
+      let bor = true;
+      if (file.status === "done") {
+        let res = JSON.parse(file.xhr.response);
+        if (res.errCode == 0) {
+          file.imgUrl = res.data.url;
+          file.id = res.data.id;
+          file.isChecked = true;
+          file.type = "ProductElement";
+          operationsData.fileList.filter((v) => v.status === "done");
+        } else {
+          bor = false;
+        }
+        // this.showFileList = productImgData.fileList
+      } else if (file.status === "error") {
+        bor = false;
+      }
+    };
+    const setPlaceholder = () => {
+      if (!operationsData.projectData) return "";
+      let index = operationsData.objectList.findIndex(
+        (item) => item.id === operationsData.projectData
+      );
+      return operationsData.objectList[index].name;
+    };
+    const focus = () => {
+      if (operationsData.porjectName) return;
+      operationsData.porjectName = operationsData.placeholder;
+    };
+    const blur = () => {
+      if (operationsData.porjectName != operationsData.placeholder) return;
+      operationsData.porjectName = "";
+    };
+    return {
+      ...toRefs(operations),
+      ...toRefs(operationsData),
+      cancelDsign,
+      init,
+      changeProject,
+      focus,
+      blur,
+      setOk,
+      changeBuildType,
+      changeNumberOfImages,
+      getHistoryProjectList,
+      beforeUpload,
+      fileUploadChange,
+      getUploadUrl,
+      getCookie,
+    };
+  },
+  data() {
+    return {
+      indicator: h(LoadingOutlined, {
+        style: {
+          fontSize: "2.4rem",
+        },
+        spin: true,
+      }),
+    };
+  },
+  mounted() {},
+  methods: {},
+  directives: {
+    mousewheel: {
+      mounted(el) {
+        el.addEventListener("mouseenter", (e) => {
+          if (el.scrollWidth > el.clientWidth) {
+            el.parentElement.style.overflowY = "hidden";
+          }
+        });
+
+        // 鼠标移出事件
+        el.addEventListener("mouseleave", () => {
+          el.parentElement.style.overflowY = "auto";
+        });
+        el.addEventListener(
+          "wheel",
+          (e) => {
+            let num = 0;
+            if (e.deltaY > 0) {
+              num = 25;
+            } else {
+              num = -25;
+            }
+            el.scrollBy(num, 0);
+          },
+          { passive: true }
+        );
+      },
+    },
+  },
 });
 </script>
 <style lang="less" scoped>
-:deep(.ant-modal-mask){
-	background: rgba(0, 0, 0, 0.2);
+:deep(.ant-modal-mask) {
+  background: rgba(0, 0, 0, 0.2);
 }
-:deep(.createCloud_modal){
-	
-	.ant-modal-body{
-		display: flex;
-		flex-direction: column;
-	}
+:deep(.createCloud_modal) {
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+  }
 }
-
 </style>
 <style lang="less" scoped>
-
 .createCloud_modal {
-    .closeIcon {
-        z-index: 2;
+  .closeIcon {
+    z-index: 2;
+  }
+  .productImg_content_item_imgBox {
+    display: flex;
+    overflow-x: auto;
+    width: auto;
+    margin-bottom: 2rem;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    .content_item_imgBox_itemImg {
+      display: flex;
+      margin-right: 1rem;
+      position: relative;
+      height: 20rem;
+      max-height: 100%;
+      position: relative;
+      flex-shrink: 0;
+      img {
+        height: 100%;
+        width: 100%;
+        cursor: pointer;
+        object-fit: contain;
+        opacity: 0.5;
+        &.active {
+          opacity: 1;
+        }
+      }
+      .ant-checkbox-wrapper {
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+      &.content_item_imgBox_itemImg:hover {
+        .content_item_imgBox_itemImg_delete {
+          display: block;
+          cursor: pointer;
+        }
+      }
+      .content_item_imgBox_itemImg_delete {
+        display: none;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.2);
+        position: absolute;
+        i {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          color: #fff;
+        }
+      }
     }
-	.productImg_content_item_imgBox{
-		display: flex;
-		overflow-x: auto;
-		width: auto;
-		margin-bottom: 2rem;
-		align-items: center;
-		flex-wrap: nowrap;
-		width: 100%;
-		.content_item_imgBox_itemImg{
-			display: flex;
-			margin-right: 1rem;
-			position: relative;
-			height: 20rem;
-			max-height: 100%;
-			position: relative;
-			flex-shrink: 0;
-			img{
-				height: 100%;
-				width: 100%;
-				cursor: pointer;
-				object-fit: contain;
-				opacity: .5;
-				&.active{
-					opacity: 1;
-				}
-			}
-			.ant-checkbox-wrapper{
-				position: absolute;
-				right: 0;
-				top: 0;
-			}
-			&.content_item_imgBox_itemImg:hover{
-				.content_item_imgBox_itemImg_delete{
-					display: block;
-					cursor: pointer;
-				}
-			}
-			.content_item_imgBox_itemImg_delete{
-				display: none;	
-				width: 100%;
-				height: 100%;
-				background: rgba(0,0,0,.2);
-				position: absolute;
-				i{
-					position: absolute;
-					left: 50%;
-					top: 50%;
-					transform: translate(-50%,-50%);
-					color: #fff;
-				}
-			}
-
-		}
-		:deep(.upload_file_item){
-			flex-shrink: 0;
-		}
-		.content_item_imgBox_itemImg:last-child{
-			margin-right: 0;
-		}
-	}
-	.allUserPoeration_btn{
-		display: flex;
-		flex-direction: row;
-		height: auto;
-		justify-content: flex-end;
-		padding: 1rem 0;
-		.admin_search_item{
-			margin-bottom: 0;
-		}
-	}
-	.allUserPoeration_center{
-		flex: 1;
-		overflow-y: auto;
-		flex-direction: row;
-		flex-wrap: wrap;
-		align-content: flex-start;
-		padding: 0 2rem;
-		> .selectImgList{
-			width: 100%;
-			display: flex;
-			overflow-x: auto;
-			align-items: center;
-			flex-wrap: nowrap;
-			height: 20rem;
-			margin: 2rem 0;
-			> .item{
-				height: 100%;
-				margin-right: 1rem;
-				&:last-child{
-					margin-right: 0;
-				}
-				> img{
-					height: 100%;
-				}
-			}
-			// 
-		}
-		> .admin_state_item{
-			width: auto;
-			// width: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			> span{
-				text-align: left;
-				margin: 0;
-				margin-bottom: 1.5rem;
-				font-weight: 600;
-			}
-			:deep(> .ant-select > .ant-select-selector){
-				border-radius: 1.6rem;
-			}
-			> input{
-				border-radius: 1.6rem;
-			}
-			>.sliderAndImput{
-				display: flex;
-				align-items: center;
-				flex: 1;
-				:deep(> .ant-slider){
-					// border-radius: 1.6rem;
-					flex: 1;
-				}
-				>div{
-					input{
-						border-radius: 1.6rem;
-						width: 5rem;
-						padding: 4px 11px 4px;
-						margin-left: 1rem;
-						height: 100%;
-						text-align: center;
-					}
-				}
-				
-			}
-		}
-	}
+    :deep(.upload_file_item) {
+      flex-shrink: 0;
+    }
+    .content_item_imgBox_itemImg:last-child {
+      margin-right: 0;
+    }
+  }
+  .allUserPoeration_btn {
+    display: flex;
+    flex-direction: row;
+    height: auto;
+    justify-content: flex-end;
+    padding: 1rem 0;
+    .admin_search_item {
+      margin-bottom: 0;
+    }
+  }
+  .allUserPoeration_center {
+    flex: 1;
+    overflow-y: auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    padding: 0 2rem;
+    > .selectImgList {
+      width: 100%;
+      display: flex;
+      overflow-x: auto;
+      align-items: center;
+      flex-wrap: nowrap;
+      height: 20rem;
+      margin: 2rem 0;
+      > .item {
+        height: 100%;
+        margin-right: 1rem;
+        &:last-child {
+          margin-right: 0;
+        }
+        > img {
+          height: 100%;
+        }
+      }
+      //
+    }
+    > .admin_state_item {
+      width: auto;
+      // width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      > span {
+        text-align: left;
+        margin: 0;
+        margin-bottom: 1.5rem;
+        font-weight: 600;
+      }
+      :deep(> .ant-select > .ant-select-selector) {
+        border-radius: 1.6rem;
+      }
+      > input {
+        border-radius: 1.6rem;
+      }
+      > .sliderAndImput {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        :deep(> .ant-slider) {
+          // border-radius: 1.6rem;
+          flex: 1;
+        }
+        > div {
+          input {
+            border-radius: 1.6rem;
+            width: 5rem;
+            padding: 4px 11px 4px;
+            margin-left: 1rem;
+            height: 100%;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/component/mainPage/signUp/registerModel.vue b/src/component/mainPage/signUp/registerModel.vue
index eb46a071..3297147c 100644
--- a/src/component/mainPage/signUp/registerModel.vue
+++ b/src/component/mainPage/signUp/registerModel.vue
@@ -1,112 +1,167 @@
 <template>
-	<div ref="register"></div>
-	<a-modal
-		class="register generalModel"
-		:get-container="() => $refs.register"
-		v-model:visible="registerModel"
-		:footer="null"
-		:width="pageWidth"
-		:maskClosable="false"
-		:centered="true"
-		:closable="false"
-		:mask="registerModelMask"
-		:keyboard="false"
-		:destroyOnClose="true"
-		:zIndex="1000"
-	>
-		<div class="generalModel_btn">
-			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-				<!-- <i class="fi fi-rr-cross-small"></i> -->
-				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
-						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
-						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
-					</svg>
+  <div ref="register"></div>
+  <a-modal
+    class="register generalModel"
+    :get-container="() => $refs.register"
+    v-model:visible="registerModel"
+    :footer="null"
+    :width="pageWidth"
+    :maskClosable="false"
+    :centered="true"
+    :closable="false"
+    :mask="registerModelMask"
+    :keyboard="false"
+    :destroyOnClose="true"
+    :zIndex="1000"
+  >
+    <div class="generalModel_btn">
+      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+        <!-- <i class="fi fi-rr-cross-small"></i> -->
+        <svg
+          width="46"
+          height="46"
+          viewBox="0 0 46 46"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+          <rect
+            x="32.5063"
+            y="12"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(45 32.5063 12)"
+            fill="white"
+          />
+          <rect
+            x="34.6274"
+            y="32.5059"
+            width="3"
+            height="29"
+            rx="1.5"
+            transform="rotate(135 34.6274 32.5059)"
+            fill="white"
+          />
+        </svg>
+      </div>
+    </div>
+    <div class="login_page">
+      <div class="page_content">
+        <!-- 账号密码和邮箱登录  start-->
+        <div class="login_content" v-if="isLogin === 1">
+          <div class="login_content_left">
+            <div class="login_type_list">
+              <div
+                :class="[
+                  'login_type_item',
+                  'username_login_item',
+                  'login_active',
+                ]"
+              >
+                Register for AiDA 3.0
+              </div>
+            </div>
+            <!-- 账号密码登录 start -->
+            <!-- v-show="loginType == 'username'" -->
+            <div>
+              <div class="login_form_content" :state="emailStap">
+                <div class="login_form_title">Name</div>
+                <input
+                  class="login_form_input"
+                  placeholder="Enter your username"
+                  v-model="username"
+                />
 
-			</div>
-		</div>
-		<div class="login_page">
-			<div class="page_content">
-				<!-- 账号密码和邮箱登录  start-->
-				<div class="login_content" v-if="isLogin === 1">
-					<div class="login_content_left">
-						<div class="login_type_list">
-							<div
-								:class="[
-									'login_type_item','username_login_item',
-									'login_active',
-								]"
-							>
-								Register for AiDA 3.0
-							</div>
-						</div>
-						<!-- 账号密码登录 start -->
-						<!-- v-show="loginType == 'username'" -->
-						<div >
-							<div class="login_form_content" :state="emailStap">
-									<div class="login_form_title">Name</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your username"
-									v-model="username"
-								/>
-								
-								<div class="login_form_title marign_top30">
-									<div>Password</div>
-									<!-- <div class="tip_content" @click="changeIsLogin(2)">
+                <div class="login_form_title marign_top30">
+                  <div>Password</div>
+                  <!-- <div class="tip_content" @click="changeIsLogin(2)">
 										Forgot password？
 									</div> -->
-								</div>
-								<div class="password_input_block">
-									<div v-show="passwordConditionShow" class="conditionShow">
-										<div class="item">
-											<div class="icon">
-												<i v-show="!passwordCondition.length" class="fi fi-br-cross-small"></i>
-												<i v-show="passwordCondition.length" class="fi fi-br-check"></i>
-											</div>
-											<div class="text">At least 8 characters long</div>
-										</div>
-										<div class="item">
-											<div class="icon">
-												<i v-show="!passwordCondition.special" class="fi fi-br-cross-small"></i>
-												<i v-show="passwordCondition.special" class="fi fi-br-check"></i>
-											</div>
-											<div class="text">Must contain special characters</div>
-										</div>
-										<div class="item">
-											<div class="icon">
-												<i v-show="!passwordCondition.group" class="fi fi-br-cross-small"></i>
-												<i v-show="passwordCondition.group" class="fi fi-br-check"></i>
-											</div>
-											<div class="text">Mix of uppercase, lowercase and numbers</div>
-										</div>
-									</div>
-									<input
-										class="login_form_input"
-										:class="{active:Object.values(passwordCondition).filter(value => value === true).length<3}"
-										:type="passwordType"
-										placeholder="Enter your password"
-										v-model="password"
-										@keydown.enter="submitPerLogin()"
-										@input="passwordInput"
-										@focus="()=>passwordConditionShow = true"
-										@blur="()=>passwordConditionShow = false"
-									/>
-									<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
-								</div>
-								<span style="font-weight: 400;opacity: .7;">You must satisfy ALL password conditions to register.</span>
-								<div class="login_form_title marign_top30">Email</div>
-								<input
-									class="login_form_input"
-									placeholder="Enter your email address"
-									v-model="email"
-									@keydown.enter="submitPerLogin()"
-								/>
+                </div>
+                <div class="password_input_block">
+                  <div v-show="passwordConditionShow" class="conditionShow">
+                    <div class="item">
+                      <div class="icon">
+                        <i
+                          v-show="!passwordCondition.length"
+                          class="fi fi-br-cross-small"
+                        ></i>
+                        <i
+                          v-show="passwordCondition.length"
+                          class="fi fi-br-check"
+                        ></i>
+                      </div>
+                      <div class="text">At least 8 characters long</div>
+                    </div>
+                    <div class="item">
+                      <div class="icon">
+                        <i
+                          v-show="!passwordCondition.special"
+                          class="fi fi-br-cross-small"
+                        ></i>
+                        <i
+                          v-show="passwordCondition.special"
+                          class="fi fi-br-check"
+                        ></i>
+                      </div>
+                      <div class="text">Must contain special characters</div>
+                    </div>
+                    <div class="item">
+                      <div class="icon">
+                        <i
+                          v-show="!passwordCondition.group"
+                          class="fi fi-br-cross-small"
+                        ></i>
+                        <i
+                          v-show="passwordCondition.group"
+                          class="fi fi-br-check"
+                        ></i>
+                      </div>
+                      <div class="text">
+                        Mix of uppercase, lowercase and numbers
+                      </div>
+                    </div>
+                  </div>
+                  <input
+                    class="login_form_input"
+                    :class="{
+                      active:
+                        Object.values(passwordCondition).filter(
+                          (value) => value === true
+                        ).length < 3,
+                    }"
+                    :type="passwordType"
+                    placeholder="Enter your password"
+                    v-model="password"
+                    @keydown.enter="submitPerLogin()"
+                    @input="passwordInput"
+                    @focus="() => (passwordConditionShow = true)"
+                    @blur="() => (passwordConditionShow = false)"
+                  />
+                  <div
+                    class="icon iconfont icon-yanjing_yincang_o password_show_icon"
+                    @click="changePasswordType()"
+                  ></div>
+                </div>
+                <span style="font-weight: 400; opacity: 0.7"
+                  >You must satisfy ALL password conditions to register.</span
+                >
+                <div class="login_form_title marign_top30">Email</div>
+                <input
+                  class="login_form_input"
+                  placeholder="Enter your email address"
+                  v-model="email"
+                  @keydown.enter="submitPerLogin()"
+                />
 
-							<!-- 邮箱登录 start -->
-								<div class="login_form_email" :class="{active:emailStap===2}">
-						<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
-							<!-- <div v-show="emailStap === 1" class="forget_password_content">
+                <!-- 邮箱登录 start -->
+                <div
+                  class="login_form_email"
+                  :class="{ active: emailStap === 2 }"
+                >
+                  <!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
+                  <!-- <div v-show="emailStap === 1" class="forget_password_content">
 								<div class="forget_password_content_block" @click="changeLoginType('username')">
 									<span class="icon iconfont fi-br-arrow-left"></span
 									><span class="forget_password_content_title"
@@ -130,155 +185,164 @@
 								</div>
 							</div> -->
 
-							<div v-show="emailStap === 2"  class="email_last_step">
-								
-								<div class="email_last_step_block" >
-									<span class="email_last_step_content"
-										>Verify with one-time verification code</span
-									>
-									<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
-								</div>
-								<div class="email_last_step_bottom">
-									<div class="email_last_step_des">
-									<div class="sent_email_content">
-										Sent to {{ email }}
-									</div>
-									<div class="tip_content">
-										<span v-show="time">{{ time }}s</span>
-										<span v-show="!time" @click="emailNextStepFun()"
-											>Resend</span
-										>
-									</div>
-								</div>
-								<VerificationCodeInput
-									:ct="emailCode"
-									@sendCaptcha="submitEmailLogin($event)"
-								></VerificationCodeInput>
+                  <div v-show="emailStap === 2" class="email_last_step">
+                    <div class="email_last_step_block">
+                      <span class="email_last_step_content"
+                        >Verify with one-time verification code</span
+                      >
+                      <i
+                        class="fi fi-br-cross email_last_step_block_icon"
+                        @click="emailLastStepFun()"
+                      ></i>
+                    </div>
+                    <div class="email_last_step_bottom">
+                      <div class="email_last_step_des">
+                        <div class="sent_email_content">
+                          Sent to {{ email }}
+                        </div>
+                        <div class="tip_content">
+                          <span v-show="time">{{ time }}s</span>
+                          <span v-show="!time" @click="emailNextStepFun()"
+                            >Resend</span
+                          >
+                        </div>
+                      </div>
+                      <VerificationCodeInput
+                        :ct="emailCode"
+                        @sendCaptcha="submitEmailLogin($event)"
+                      ></VerificationCodeInput>
 
-								<div class="email_last_step_des">
-									<div class="sent_email_content email_tip_content">
-									Please check the junk box if you haven't received verification code
-									</div>
-								</div>
-								</div>
-							</div>
-						</div>
-							</div>
+                      <div class="email_last_step_des">
+                        <div class="sent_email_content email_tip_content">
+                          Please check the junk box if you haven't received
+                          verification code
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-							<div  class="login_form_title marign_top30">
-								<label :class="{active:emailStap == 2}">
-									<input :state="emailStap" type="checkbox" v-model="checked">
-									<span>I agree to all Term, Privacy Policy and Fees</span>
-								</label>
-							</div>
-							<div class="thirdPartyLogin marign_top30">
-								<div class="label">
-									<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-									<googleLogin @googelLogin="googelLogin" text="Register with Google"></googleLogin>
-								</div>
-								<div class="label">
-									<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-									<weiXinLogin text="Register with wechat"></weiXinLogin>
-								</div>
-								<!-- <phoneLogin></phoneLogin> -->
-							</div>
-							<div
-								class="login_submit_button marign_top40" 
-								style="width: 100%;"
-								:state="emailStap"
-								@click="submitPerLogin()"
-							>
-							Register
-							</div>
-							
-							<!-- <div class="login_text"  >
+              <div class="login_form_title marign_top30">
+                <label :class="{ active: emailStap == 2 }">
+                  <input :state="emailStap" type="checkbox" v-model="checked" />
+                  <span>I agree to all Term, Privacy Policy and Fees</span>
+                </label>
+              </div>
+              <div class="thirdPartyLogin marign_top30">
+                <div class="label">
+                  <div
+                    class="mask"
+                    v-show="!checked"
+                    @click="isCheckAgreement"
+                  ></div>
+                  <googleLogin
+                    @googelLogin="googelLogin"
+                    text="Register with Google"
+                  ></googleLogin>
+                </div>
+                <div class="label">
+                  <div
+                    class="mask"
+                    v-show="!checked"
+                    @click="isCheckAgreement"
+                  ></div>
+                  <weiXinLogin text="Register with wechat"></weiXinLogin>
+                </div>
+                <!-- <phoneLogin></phoneLogin> -->
+              </div>
+              <div
+                class="login_submit_button marign_top40"
+                style="width: 100%"
+                :state="emailStap"
+                @click="submitPerLogin()"
+              >
+                Register
+              </div>
+
+              <!-- <div class="login_text"  >
 								<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
 							</div> -->
+            </div>
+            <!-- 账号密码登录 end -->
+          </div>
 
-						</div>
-						<!-- 账号密码登录 end -->
-						
-					</div>
-					
-					<!-- 邮箱登录 end -->
-				</div>
+          <!-- 邮箱登录 end -->
+        </div>
 
-				<!-- 忘记密码 start -->
-				<div class="forget_password_content" v-else>
-					<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
-						<!-- <span class="icon iconfont fi-br-arrow-left"></span
+        <!-- 忘记密码 start -->
+        <div class="forget_password_content" v-else>
+          <div
+            class="forget_password_content_block"
+            @click="forgetPasswordLastStepFun()"
+          >
+            <!-- <span class="icon iconfont fi-br-arrow-left"></span
 						> -->
-						<i class="fi fi-br-arrow-left"></i>
-						<span class="forget_password_content_title"
-							>Retrieve password</span
-						>
-					</div>
-					<div v-show="frogetPasswordStep === 1">
-						<div class="forget_passored_form_content">
-							<div class="forget_passored_form_title">Email</div>
-							<input
-								class="forget_passored_form_input"
-								placeholder="Enter your email"
-								v-model="forgetPasswordEmail"
-								@keydown.enter="forgetPasswordNextStepFun()"
-							/>
-						</div>
-						<div
-							class="forget_submit_button marign_top40"
-							@click="forgetPasswordNextStepFun()"
-						>
-							Next step
-						</div>
-					</div>
+            <i class="fi fi-br-arrow-left"></i>
+            <span class="forget_password_content_title">Retrieve password</span>
+          </div>
+          <div v-show="frogetPasswordStep === 1">
+            <div class="forget_passored_form_content">
+              <div class="forget_passored_form_title">Email</div>
+              <input
+                class="forget_passored_form_input"
+                placeholder="Enter your email"
+                v-model="forgetPasswordEmail"
+                @keydown.enter="forgetPasswordNextStepFun()"
+              />
+            </div>
+            <div
+              class="forget_submit_button marign_top40"
+              @click="forgetPasswordNextStepFun()"
+            >
+              Next step
+            </div>
+          </div>
 
-					<div v-show="frogetPasswordStep === 2">
-						<div class="forget_verif_code_des">Verification Code</div>
-						<div class="email_last_step_des">
-							<div class="sent_email_content">
-								Sent to {{ forgetPasswordEmail }}
-							</div>
-							<div class="tip_content">
-								<span v-show="time">{{ time }}s</span>
-								<span
-									v-show="!time"
-									@click="forgetPasswordNextStepFun()"
-									>Resend</span
-								>
-							</div>
-						</div>
-					</div>
-
-					<div v-show="frogetPasswordStep === 3">
-						<div class="forget_passored_form_content">
-							<div class="forget_passored_form_title">Password</div>
-							<input
-								class="forget_passored_form_input"
-								placeholder="Enter a new password"
-								v-model="newPassword"
-								@keydown.enter="submitResetPassword()"
-							/>
-						</div>
-						<div
-							class="forget_submit_button marign_top40"
-							@click="submitResetPassword()"
-						>
-							Submit
-						</div>
-					</div>
-				</div>
-				<!-- 忘记密码 end -->
-			
-			</div>
-		</div>
-	</a-modal>
+          <div v-show="frogetPasswordStep === 2">
+            <div class="forget_verif_code_des">Verification Code</div>
+            <div class="email_last_step_des">
+              <div class="sent_email_content">
+                Sent to {{ forgetPasswordEmail }}
+              </div>
+              <div class="tip_content">
+                <span v-show="time">{{ time }}s</span>
+                <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                  >Resend</span
+                >
+              </div>
+            </div>
+          </div>
 
+          <div v-show="frogetPasswordStep === 3">
+            <div class="forget_passored_form_content">
+              <div class="forget_passored_form_title">Password</div>
+              <input
+                class="forget_passored_form_input"
+                placeholder="Enter a new password"
+                v-model="newPassword"
+                @keydown.enter="submitResetPassword()"
+              />
+            </div>
+            <div
+              class="forget_submit_button marign_top40"
+              @click="submitResetPassword()"
+            >
+              Submit
+            </div>
+          </div>
+        </div>
+        <!-- 忘记密码 end -->
+      </div>
+    </div>
+  </a-modal>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
-import { setCookie ,WriteCookie } from "@/tool/cookie";
+import { setCookie, WriteCookie } from "@/tool/cookie";
 import { message } from "ant-design-vue";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 import googleLogin from "@/component/LoginPage/googleLogin.vue";
@@ -287,796 +351,779 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-const md5 = require("md5");
+import md5 from "md5";
 export default defineComponent({
-    components: {
-        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
+  components: {
+    VerificationCodeInput,
+    googleLogin,
+    weiXinLogin,
+    phoneLogin,
+  },
+  setup() {
+    let timer: any = 0;
+    const { locale } = useI18n();
+    const store = useStore();
+    let register = reactive({
+      registerModel: false,
+      registerModelMask: true,
+      pageWidth: "50%",
+      passwordConditionShow: false,
+      passwordCondition: {
+        length: false,
+        special: false,
+        group: false,
+      },
+    });
+    return {
+      store,
+      timer,
+      ...toRefs(register),
+      locale,
+    };
+  },
+  data() {
+    return {
+      checked: false,
+      isLogin: 1, //是否为登录 1-登录， 2-忘记密码
+      loginType: "username",
+      emailStap: 1, // 邮箱登录步骤
+      emailCode: ["", "", "", "", "", ""], //邮箱验证码
+      emailNextStep: true,
+      username: "",
+      password: "",
+      email: "", //邮箱登录邮箱
+      frogetPasswordStep: 1, //忘记密码的步骤
+      forgetPasswordEmail: "",
+      forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
+      forgetEmailValue: "", //忘记密码的邮箱验证码保存值
+      newPassword: "", //新密码
+      isCheckRobot: false,
+      time: 60, //60秒倒计时
+      passwordType: "password",
+      userId: "",
+      loginTime: true,
+    };
+  },
+  mounted() {
+    const data = this.$route.query;
+    if (data?.state == "weiXin") {
+      this.wechatLogin(data);
+    }
+  },
+  methods: {
+    init() {
+      this.registerModel = true;
+      this.emailLastStepFun();
     },
-    setup(){
-        let timer:any =  0;
-		const {locale} = useI18n()
-		const store = useStore();
-		let register = reactive({
-			registerModel:false,
-			registerModelMask:true,
-			pageWidth:'50%',
-			passwordConditionShow:false,
-			passwordCondition:{
-				length:false,
-				special:false,
-				group:false,
-			},
-		})
-        return{
-			store,
-            timer,
-			...toRefs(register),
-			locale
+    changeLoginType(type: string) {
+      this.loginType = type;
+    },
+
+    //是否忘记密码页面
+    changeIsLogin(isLogin: number) {
+      if (isLogin === 1) {
+        //登录
+        this.forgetPasswordEmail = "";
+        this.frogetPasswordStep = 1;
+        this.forgetEmailCode = ["", "", "", "", "", ""];
+        this.emailStap = 1;
+        this.clearTimer();
+      } else {
+        this.username = "";
+        this.password = "";
+      }
+      this.isLogin = isLogin;
+    },
+
+    //邮箱登录的下一步
+    emailNextStepFun() {
+      if (!isEmail(this.email)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.email,
+        operationType: "LOGIN",
+      };
+
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.emailStap = 2;
+          this.time = 60;
+          this.emailCode = ["", "", "", "", "", ""];
+          this.createTimer();
         }
+      });
     },
-    data() {
-        return {
-			checked:false,
-            isLogin: 1, //是否为登录 1-登录， 2-忘记密码
-            loginType: "username",
-            emailStap: 1, // 邮箱登录步骤
-            emailCode: ["", "", "", "", "", ""], //邮箱验证码
-            emailNextStep: true,
-            username: "",
-            password: "",
-            email: "", //邮箱登录邮箱
-            frogetPasswordStep: 1, //忘记密码的步骤
-            forgetPasswordEmail: "",
-            forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
-            forgetEmailValue: "", //忘记密码的邮箱验证码保存值
-            newPassword: "", //新密码
-            isCheckRobot: false,
-            time: 60, //60秒倒计时
-            passwordType:'password',
-            userId:'',
-			loginTime:true
+
+    //邮箱登录的上一步
+    emailLastStepFun() {
+      this.emailStap = 1;
+      (this.username = ""), (this.password = ""), (this.email = "");
+      (this.checked = false),
+        (this.loginType = "username"),
+        (this.emailCode = ["", "", "", "", "", ""]),
+        this.clearTimer();
+    },
+
+    //忘记密码的下一步
+    forgetPasswordNextStepFun() {
+      if (!isEmail(this.forgetPasswordEmail)) {
+        message.info("The email format is incorrect");
+        return;
+      }
+      let data = {
+        email: this.forgetPasswordEmail,
+        operationType: "FORGET_PWD",
+      };
+      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+        if (rv) {
+          this.frogetPasswordStep = 2;
+          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+        }
+      });
+    },
+    //忘记密码的上一步
+    forgetPasswordLastStepFun() {
+      if (this.frogetPasswordStep === 1) {
+        this.changeIsLogin(1);
+      } else {
+        this.frogetPasswordStep = this.frogetPasswordStep - 1;
+        this.forgetPasswordEmail = "";
+        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+      }
+    },
+
+    //改变勾选是否是机器人
+    checkRobot() {
+      this.isCheckRobot = !this.isCheckRobot;
+    },
+    passwordInput() {
+      this.isPassword(this.password);
+    },
+    isPassword(password: any) {
+      this.passwordCondition.length = /.{8,}/.test(password);
+      this.passwordCondition.special =
+        /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
+      this.passwordCondition.group =
+        /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password);
+      return Object.values(this.passwordCondition).filter(
+        (value) => value === true
+      ).length;
+    },
+    //提交账号密码预先登录
+    submitPerLogin() {
+      //输入账号密码
+      if (this.emailStap >= 2) {
+        return;
+      } else {
+        if (/aida/i.test(this.username)) {
+          message.info(
+            'The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.'
+          );
+          return;
+        }
+        if (!this.username || !this.password) {
+          message.info("Please enter your account number or password");
+          return;
+        }
+        //输入邮箱
+        if (!this.email) {
+          message.info("Please enter your email address");
+          return;
+        }
+        //判断邮箱格式是否正确
+        if (!isEmail(this.email)) {
+          message.info("The email format is incorrect");
+          return;
+        }
+        //判断是否同意隐私政策
+        if (!this.checked) {
+          message.info("Agree to all terms, privacy fees and policies");
+          return;
+        }
+        if (this.isPassword(this.password) < 3) {
+          message.info("You must satisfy ALL password conditions to register.");
+          return;
+        }
+
+        let data = {
+          userPassword: md5(this.password + "abc"),
+          userName: this.username,
+          userEmail: this.email,
+          browserIdentifiers: "",
+          country: "",
+          createDate: "",
+          credits: 0,
+          id: 0,
+          isBeginner: 0,
+          isTrial: 0,
+          language: "",
+          systemUser: 0,
+          updateDate: "",
+          validEndTime: 0,
+          validStartTime: 0,
         };
+        // this.loginType = 'email'
+        if (this.loginTime) {
+          this.loginTime = false;
+          Https.axiosPost(Https.httpUrls.designWorksRegister, data)
+            .then((rv: any) => {
+              // if (rv) {
+              //     this.loginType = 'email'
+              // }
+              this.emailStap = 2;
+              if (rv) {
+                this.userId = rv.userId;
+                this.loginType = "email";
+                this.time = 60;
+                this.emailCode = ["", "", "", "", "", ""];
+                this.createTimer();
+              }
+            })
+            .catch((res) => {
+              this.emailStap = 1;
+            });
+          setTimeout(() => {
+            this.loginTime = true;
+          }, 2000);
+        }
+      }
     },
-	mounted(){
-		const data = this.$route.query
-		if(data?.state == 'weiXin'){
-			this.wechatLogin(data)
-		}
-	},
-    methods: {
-		init(){
-			this.registerModel = true
-			this.emailLastStepFun()
-			
-		},
-        changeLoginType(type: string) {
-            this.loginType = type;
-        },
-
-        //是否忘记密码页面
-        changeIsLogin(isLogin: number) {
-            if (isLogin === 1) {
-                //登录
-                this.forgetPasswordEmail = "";
-                this.frogetPasswordStep = 1;
-                this.forgetEmailCode = ["", "", "", "", "", ""];
-                this.emailStap = 1;
-                this.clearTimer();
-            } else {
-                this.username = "";
-                this.password = "";
-            }
-            this.isLogin = isLogin;
-        },
-
-        //邮箱登录的下一步
-        emailNextStepFun() {
-            if (!isEmail(this.email)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.email,
-                operationType: "LOGIN",
-            };
-
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.emailStap = 2;
-                        this.time = 60;
-                        this.emailCode = ["", "", "", "", "", ""]
-                        this.createTimer();
-                    }
-                }
-            );
-        },
-
-        //邮箱登录的上一步
-        emailLastStepFun() {
-            this.emailStap = 1;
-			this.username = "",
-            this.password = "",
-            this.email = "";
-			this.checked=false,
-			this.loginType = "username",
-            (this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
-        },
-
-        //忘记密码的下一步
-        forgetPasswordNextStepFun() {
-            if (!isEmail(this.forgetPasswordEmail)) {
-                message.info("The email format is incorrect");
-                return;
-            }
-            let data = {
-                email: this.forgetPasswordEmail,
-                operationType: "FORGET_PWD",
-            };
-            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        this.frogetPasswordStep = 2;
-                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                            this.createTimer();
-                    }
-                }
-            );
-        },
-        //忘记密码的上一步
-        forgetPasswordLastStepFun() {
-            if (this.frogetPasswordStep === 1) {
-                this.changeIsLogin(1);
-            } else {
-                this.frogetPasswordStep = this.frogetPasswordStep - 1;
-                this.forgetPasswordEmail = "";
-                (this.forgetEmailCode = ["", "", "", "", "", ""]),
-                    this.clearTimer();
-            }
-        },
-
-
-        //改变勾选是否是机器人
-        checkRobot() {
-            this.isCheckRobot = !this.isCheckRobot;
-        },
-		passwordInput(){
-			this.isPassword(this.password)
-		},
-		isPassword(password:any){
-			this.passwordCondition.length = /.{8,}/.test(password)
-			this.passwordCondition.special = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
-			this.passwordCondition.group = /[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password)
-			return Object.values(this.passwordCondition).filter(value => value === true).length;
-		},
-        //提交账号密码预先登录
-        submitPerLogin() {
-			
-
-			//输入账号密码
-			if(this.emailStap>=2){
-				return;
-			}else{
-				if (/aida/i.test(this.username)) {
-					message.info('The name cannot contain "AiDA" or any combination of its uppercase and lowercase forms.');
-					return;
-				}
-				if (!this.username || !this.password) {
-					message.info("Please enter your account number or password");
-					return;
-				}
-				//输入邮箱
-				if (!this.email) {
-					message.info("Please enter your email address");
-					return;
-				}
-				//判断邮箱格式是否正确
-				if (!isEmail(this.email)) {
-					message.info("The email format is incorrect");
-					return;
-				}
-				//判断是否同意隐私政策
-				if (!this.checked) {
-					message.info("Agree to all terms, privacy fees and policies");
-					return;
-				}
-				if(this.isPassword(this.password) < 3){
-					message.info("You must satisfy ALL password conditions to register.");
-					return
-				}
-
-				let data = {
-					userPassword: md5(this.password + "abc"),
-					userName: this.username,
-					userEmail: this.email,
-					"browserIdentifiers": "",
-					"country": "",
-					"createDate": "",
-					"credits": 0,
-					"id": 0,
-					"isBeginner": 0,
-					"isTrial": 0,
-					"language": "",
-					"systemUser": 0,
-					"updateDate": "",
-					"validEndTime": 0,
-					"validStartTime": 0
-				};
-				// this.loginType = 'email'
-				if(this.loginTime){
-					this.loginTime = false
-					Https.axiosPost(Https.httpUrls.designWorksRegister, data).then(
-					(rv: any) => {
-						// if (rv) {
-						//     this.loginType = 'email'
-						// }
-						this.emailStap = 2;
-						if (rv) {
-							this.userId = rv.userId
-							this.loginType = 'email'
-							this.time = 60;
-							this.emailCode = ["", "", "", "", "", ""]
-							this.createTimer();
-						}
-					}
-					).catch(res=>{
-						this.emailStap = 1;
-					});
-					setTimeout(() => {
-						this.loginTime = true
-					}, 2000);
-				}
-		
-			}
-        },
-		isCheckAgreement(){
-			message.info(
-					"Agree to all terms, privacy fees and policies"
-				);
-		},
-        changePasswordType(){
-            this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
-        },
-		//微信登录
-		wechatLogin(value:any) {
-			let data = {
-				code : value.code,
-				type:1
-			}
-		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-		},
-		//谷歌登录
-		googelLogin(value:any) {
-			let data = {credential : value,type:1}
-		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
-                .then((rv: any) => {
-					this.setSuccessLogin(rv)
-                })
-                .catch((res) => {});
-		},
-		setSuccessLogin(rv:any){
-			if (rv) {
-				if (rv.systemUser == 4) {
-					rv.systemUser = 1;
-				}
-				this.createTimer();
-				let isTest = rv.systemUser == 3 ? true : false;
-				let isBeginner = rv.isBeginner == 1 ? true : false;
-				let token = rv.token;
-				setCookie("token", token);
-				setCookie("isTest", isTest);
-				setCookie("isBeginner", isBeginner);
-				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
-				setCookie("userInfo", JSON.stringify(rv));
-				let userid:any = {
-					ueserId:rv.userId,
-					systemUser:rv.systemUser
-				}
-				if(rv.email)userid.email = rv.email
-				this.store.commit("upUserDetail", userid);
-				
-				if (window.innerWidth < 768) {
-					message.info(
-						"If you need to design, please log in using an iPad or computer."
-					);
-					this.turnToHomePage("/Square");
-				} else {
-					this.turnToHomePage("/home");
-				}
-				sessionStorage.setItem(
-					"isTimeOne",
-					JSON.stringify(false)
-				); //是否需要公告 提示 弹窗
-				let randomNum: any =
-					Math.floor(Math.random() * 9000000000000000) +
-					1000000000000000;
-				sessionStorage.setItem("sessionId", randomNum);
-				sessionStorage.setItem("record", JSON.stringify([]));
-			}
-		},
-        //邮箱登录提交
-        submitEmailLogin(emailVerifyCode: any) {
-			let affiliateRef = sessionStorage.getItem('affiliateRef');
-            let data = {
-                email: this.email,
-                emailVerifyCode: emailVerifyCode,
-                loginType: "EMAIL",
-                userId:this.userId,
-				"userEmail":  this.email,
-				"userName": this.username,
-				"userPassword": md5(this.password + "abc"),
-				invitationCode:affiliateRef?affiliateRef:'',
-            };
-            Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
-                (rv: any) => {
-					this.setSuccessLogin(rv)
-                }
-			).catch(res=>{
-			});
-        },
-
-        //修改密码提交
-        submitResetPassword() {
-            let data = {
-                email: this.forgetPasswordEmail,
-                emailVerifyCode: this.forgetEmailValue,
-                password: md5(this.newPassword + "abc"),
-				verifyEmail:false,
-            };
-            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
-                (rv: any) => {
-                    if (rv) {
-                        message.success("Changing the password successfully");
-                        this.changeIsLogin(1);
-                    }
-                }
-            );
-        },
-
-        //创建定时器
-        createTimer() {
-            this.timer = setInterval(() => {
-                this.time--;
-                if (!this.time) {
-                    clearInterval(this.timer);
-                }
-            }, 1000);
-        },
-
-        //清除定时器
-        clearTimer() {
-            this.time = 60;
-            if (this.timer) {
-                clearInterval(this.timer);
-            }
-        },
-
-        //跳转到首页
-        turnToHomePage(str:any) {
-			this.getLang()
-            // this.$router.push("/home");
-			// console.log(window.location.search.substring(1));
-			this.store.commit("clearAllData");
-			this.store.commit("clearAllCollection");
-			this.store.commit("setAllBoardDataChoose",{});
-			this.store.commit("clearShowSketchboard",{});
-			this.$router.push(str);
-        },
-		//获取当前语言
-		getLang(){
-			let data ={}
-			Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
-                (rv: any) => {
-                    if (rv) {
-						this.locale = rv
-						setLang(rv)
-                    }
-                }
-            );
-		},
-        turnToWindow(url: any) {
-            window.open(url);
-        },
-		cancelDsign(){
-			this.registerModel = false
-		}
+    isCheckAgreement() {
+      message.info("Agree to all terms, privacy fees and policies");
     },
+    changePasswordType() {
+      this.passwordType =
+        this.passwordType === "password" ? "text" : "password";
+    },
+    //微信登录
+    wechatLogin(value: any) {
+      let data = {
+        code: value.code,
+        type: 1,
+      };
+      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    //谷歌登录
+    googelLogin(value: any) {
+      let data = { credential: value, type: 1 };
+      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+    setSuccessLogin(rv: any) {
+      if (rv) {
+        if (rv.systemUser == 4) {
+          rv.systemUser = 1;
+        }
+        this.createTimer();
+        let isTest = rv.systemUser == 3 ? true : false;
+        let isBeginner = rv.isBeginner == 1 ? true : false;
+        let token = rv.token;
+        setCookie("token", token);
+        setCookie("isTest", isTest);
+        setCookie("isBeginner", isBeginner);
+        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
+        setCookie("userInfo", JSON.stringify(rv));
+        let userid: any = {
+          ueserId: rv.userId,
+          systemUser: rv.systemUser,
+        };
+        if (rv.email) userid.email = rv.email;
+        this.store.commit("upUserDetail", userid);
+
+        if (window.innerWidth < 768) {
+          message.info(
+            "If you need to design, please log in using an iPad or computer."
+          );
+          this.turnToHomePage("/Square");
+        } else {
+          this.turnToHomePage("/home");
+        }
+        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+        let randomNum: any =
+          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+        sessionStorage.setItem("sessionId", randomNum);
+        sessionStorage.setItem("record", JSON.stringify([]));
+      }
+    },
+    //邮箱登录提交
+    submitEmailLogin(emailVerifyCode: any) {
+      let affiliateRef = sessionStorage.getItem("affiliateRef");
+      let data = {
+        email: this.email,
+        emailVerifyCode: emailVerifyCode,
+        loginType: "EMAIL",
+        userId: this.userId,
+        userEmail: this.email,
+        userName: this.username,
+        userPassword: md5(this.password + "abc"),
+        invitationCode: affiliateRef ? affiliateRef : "",
+      };
+      Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data)
+        .then((rv: any) => {
+          this.setSuccessLogin(rv);
+        })
+        .catch((res) => {});
+    },
+
+    //修改密码提交
+    submitResetPassword() {
+      let data = {
+        email: this.forgetPasswordEmail,
+        emailVerifyCode: this.forgetEmailValue,
+        password: md5(this.newPassword + "abc"),
+        verifyEmail: false,
+      };
+      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+        if (rv) {
+          message.success("Changing the password successfully");
+          this.changeIsLogin(1);
+        }
+      });
+    },
+
+    //创建定时器
+    createTimer() {
+      this.timer = setInterval(() => {
+        this.time--;
+        if (!this.time) {
+          clearInterval(this.timer);
+        }
+      }, 1000);
+    },
+
+    //清除定时器
+    clearTimer() {
+      this.time = 60;
+      if (this.timer) {
+        clearInterval(this.timer);
+      }
+    },
+
+    //跳转到首页
+    turnToHomePage(str: any) {
+      this.getLang();
+      // this.$router.push("/home");
+      // console.log(window.location.search.substring(1));
+      this.store.commit("clearAllData");
+      this.store.commit("clearAllCollection");
+      this.store.commit("setAllBoardDataChoose", {});
+      this.store.commit("clearShowSketchboard", {});
+      this.$router.push(str);
+    },
+    //获取当前语言
+    getLang() {
+      let data = {};
+      Https.axiosPost(Https.httpUrls.getUserLanguage, data).then((rv: any) => {
+        if (rv) {
+          this.locale = rv;
+          setLang(rv);
+        }
+      });
+    },
+    turnToWindow(url: any) {
+      window.open(url);
+    },
+    cancelDsign() {
+      this.registerModel = false;
+    },
+  },
 });
 </script>
 <style lang="less" scoped>
-:deep(.register){
-	@media (max-width: 768px) {
-		// box-shadow: none;
-		// height: 100%;
-		margin: 0;
-		max-width: 95%;
-		&.generalModel{
-			.ant-modal-content{
-				// height: 100%;
-			}
-			.ant-modal-body{
-				padding: 6rem 4rem;
-				// height: 100%;
-			}
-		}
-	}
+:deep(.register) {
+  @media (max-width: 768px) {
+    // box-shadow: none;
+    // height: 100%;
+    margin: 0;
+    max-width: 95%;
+    &.generalModel {
+      .ant-modal-content {
+        // height: 100%;
+      }
+      .ant-modal-body {
+        padding: 6rem 4rem;
+        // height: 100%;
+      }
+    }
+  }
 }
 </style>
 <style lang="less" scoped>
 .login_page {
-    width: 100%;
-    height: 100%;
-    .page_content {
-        // position: relative;
-        .login_content {
-            // position: relative;
-            // top: 50%;
-            // left: 50%;
-            // transform: translate(-50%,-50%);
-            // width: 60rem;
-			// width: 80%;
-            background: #FFFFFF;
-            // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
-            padding: 2rem 6rem 2rem;
-            box-sizing: border-box;
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			@media (max-width: 768px) {
-				padding: 0;
-			}
-			.login_content_left{
-				width: 100%;
-				.login_form_email{
-					position: absolute;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					top: 0;
-					background: #fff;
-					transform: scale(0);
-					transition: .3s all;
-					border: 2px solid;
-					border-radius: 20px;
-					.email_last_step{
-						width: 100%;
-						height: 100%;
-						#app{
-							height: auto;
-						}
-					}
-				}
-				.active{
-					transform: scale(1);
-				}
-			}
-            .login_type_list {
-                width: 100%;
-                display: flex;
-
-                .login_type_item {
-                    text-align: center;
-                    font-size: 3.6rem;
-                    font-weight: bold;
-                    color: #D7D7D7;
-                    cursor: pointer;
-                    height: 4rem;
-                    line-height: 4rem;
-
-                    &.login_active {
-                        color: #030303;
-                    }
-                }
-            }
-			.login_form_title {
-                    font-size: 1.6rem;
-                    // color: #666666;
-					font-weight: 900;
-					color: #000;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-					label{
-						display: flex;
-						span{
-							font-size: 1.6rem;
-							margin-left: 10px;
-							font-weight: normal;
-						}
-						&.active{
-							pointer-events:none;
-							input{
-								pointer-events:none;
-							}
-						}
-					}
-                }
-
-            .login_form_content {
-                margin-top: 4rem;
-				position: relative;
-                &[state="2"]{
-					>*{
-						opacity: 0;
-					}
-					.login_form_email{
-						opacity: 1;
-					}
-				}
-                .password_input_block{
-                    position: relative;
-
-                    .password_show_icon{
-                        position: absolute;
-                        font-size: 2.4rem;
-                        right: 2rem;
-                        top:1.7rem;
-                        cursor: pointer;
-                    }
-					> .conditionShow{
-						bottom: 0;
-						position: absolute;
-						right: 0;
-						left: auto;
-						transform: translateY(-5rem);
-						background: #404040;
-						color: #FFF;
-						font-size: 1.4rem;
-						padding: 2rem;
-						border-radius: 2rem;
-						> .item{
-							display: flex;
-							align-items: center;
-							margin-bottom: .5rem;
-							&:last-child{
-								margin-bottom: 0;
-							}
-							> .icon{
-								margin-right: 1rem;
-								i{
-									display: flex;
-									// &.fi-br-cross-small{
-									// 	color: red;
-									// }
-								}
-							}
-						}
-					}
-                }
-
-                .login_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #dfdfdf;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-					transition: all .3s;
-					&:hover{
-						border: 0.1rem solid #000;
-					}
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-					&.active{
-						border: 0.1rem solid red;
-					}
-                }
-            }
-
-            .email_last_step {
-                // margin-top: 4rem;
-				.email_last_step_bottom{
-					padding: 0 40px;
-				}
-                .email_last_step_block{
-					padding: 10px;
-					border-bottom: 2px solid;
-					box-sizing: border-box;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					.email_last_step_content {
-                    margin-left: 1rem;
-                    font-size: 2.2rem;
-                    font-weight: bold;
-                    color: #030303;
-                }
-					.email_last_step_block_icon{
-						cursor: pointer;
-						margin-right: 1rem;
-						height: 20px;
-					}
-                }
-
-                .fi-br-arrow-left {
-                    font-size: 2.5rem;
-                    font-weight: bold;
-                    color: #030303;
-					transform: translateY(1rem);
-					display: inline-block;
-                }
-
-                
-            }
-
-            .login_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-				transition: all .3s;
-				&:hover{
-					background: #3C3C3C;
-				}
-                &[state="2"] {
-                    cursor: not-allowed;
-                }
-            }
-            .login_text {
-                font-size: 1.6rem;
-                margin-top: 4rem;
-                color: #151515;
-                display: flex;
-                justify-content: flex-end;
-
-                .forget_password_text{
-                    cursor: pointer;
-                }
+  width: 100%;
+  height: 100%;
+  .page_content {
+    // position: relative;
+    .login_content {
+      // position: relative;
+      // top: 50%;
+      // left: 50%;
+      // transform: translate(-50%,-50%);
+      // width: 60rem;
+      // width: 80%;
+      background: #ffffff;
+      // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
+      padding: 2rem 6rem 2rem;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      @media (max-width: 768px) {
+        padding: 0;
+      }
+      .login_content_left {
+        width: 100%;
+        .login_form_email {
+          position: absolute;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          background: #fff;
+          transform: scale(0);
+          transition: 0.3s all;
+          border: 2px solid;
+          border-radius: 20px;
+          .email_last_step {
+            width: 100%;
+            height: 100%;
+            #app {
+              height: auto;
             }
+          }
         }
-
-        .forget_password_content {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            width: 60rem;
-            background: #FFFFFF;
-            box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
-            border-radius: 1rem;
-            padding: 3rem 6rem 6.5rem;
-            box-sizing: border-box;
-
-            .forget_password_content_block{
-                cursor: pointer;
-            }
-
-            .fi-br-arrow-left {
-                font-size: 3.8rem;
-                font-weight: bold;
-                color: #030303;
-				transform: translateY(1rem);
-				display: inline-block;
-            }
-            .forget_password_content_title {
-                font-size: 3.2rem;
-                font-weight: bold;
-                color: #030303;
-                margin-left: 2rem;
-            }
-
-            .forget_passored_form_content {
-                margin-top: 3.5rem;
-
-                .forget_passored_form_title {
-                    font-size: 2.4rem;
-                    font-weight: bold;
-                    color: #030303;
-                    display: flex;
-                    justify-content: space-between;
-                    box-sizing: border-box;
-                }
-
-                .forget_passored_form_input {
-                    width: 100%;
-                    height: 5rem;
-                    margin-top: 1rem;
-                    border: 0.1rem solid #DFDFDF;
-                    border-radius: 2.5rem;
-                    padding-left: 2.1rem;
-                    line-height: 5rem;
-                    font-size: 1.4rem;
-                    box-sizing: border-box;
-                    outline: none;
-
-                    &::placeholder {
-                        color: #a5b0c2;
-                    }
-                }
-            }
-
-            .forget_verif_code_des {
-                font-size: 2.4rem;
-                font-weight: bold;
-                color: #030303;
-                margin-top: 3.5rem;
-            }
-
-            .forget_submit_button {
-                height: 5rem;
-                background: #000;
-                border-radius: 2.5rem;
-                line-height: 5rem;
-                text-align: center;
-                font-size: 1.8rem;
-                font-weight: 500;
-                color: #ffffff;
-                cursor: pointer;
-            }
+        .active {
+          transform: scale(1);
         }
-    }
-
-
-    .marign_top20 {
-        margin-top: 2rem;
-    }
-
-    .marign_top22 {
-        margin-top: 2.2rem;
-    }
-
-    .marign_top30 {
-        margin-top: 3rem;
-    }
-    .marign_top40 {
-        margin-top: 4rem;
-    }
-	.thirdPartyLogin{
-		display: flex;
-		// justify-content: flex-start;
-		> div{
-			position: relative;
-			margin-right: 1rem;
-			> .mask{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				z-index: 2;
-				cursor: pointer;
-			}
-		}
-	}
-    .tip_content {
-        font-size: 1.3rem;
-        font-weight: bold;
-        color: #000;
-        cursor: pointer;
-    }
-
-    .email_last_step_des {
+      }
+      .login_type_list {
+        width: 100%;
         display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-top: 4rem;
-        margin-bottom: 2rem;
 
-        .sent_email_content {
-            font-size: 1.8rem;
-            font-weight: bold;
-            color: #a5b0c2;
-        }
+        .login_type_item {
+          text-align: center;
+          font-size: 3.6rem;
+          font-weight: bold;
+          color: #d7d7d7;
+          cursor: pointer;
+          height: 4rem;
+          line-height: 4rem;
 
-        .email_tip_content{
-            font-size: 1.4rem;
+          &.login_active {
             color: #030303;
+          }
         }
-    }
-}
+      }
+      .login_form_title {
+        font-size: 1.6rem;
+        // color: #666666;
+        font-weight: 900;
+        color: #000;
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        label {
+          display: flex;
+          span {
+            font-size: 1.6rem;
+            margin-left: 10px;
+            font-weight: normal;
+          }
+          &.active {
+            pointer-events: none;
+            input {
+              pointer-events: none;
+            }
+          }
+        }
+      }
 
-</style>
\ No newline at end of file
+      .login_form_content {
+        margin-top: 4rem;
+        position: relative;
+        &[state="2"] {
+          > * {
+            opacity: 0;
+          }
+          .login_form_email {
+            opacity: 1;
+          }
+        }
+        .password_input_block {
+          position: relative;
+
+          .password_show_icon {
+            position: absolute;
+            font-size: 2.4rem;
+            right: 2rem;
+            top: 1.7rem;
+            cursor: pointer;
+          }
+          > .conditionShow {
+            bottom: 0;
+            position: absolute;
+            right: 0;
+            left: auto;
+            transform: translateY(-5rem);
+            background: #404040;
+            color: #fff;
+            font-size: 1.4rem;
+            padding: 2rem;
+            border-radius: 2rem;
+            > .item {
+              display: flex;
+              align-items: center;
+              margin-bottom: 0.5rem;
+              &:last-child {
+                margin-bottom: 0;
+              }
+              > .icon {
+                margin-right: 1rem;
+                i {
+                  display: flex;
+                  // &.fi-br-cross-small{
+                  // 	color: red;
+                  // }
+                }
+              }
+            }
+          }
+        }
+
+        .login_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+          transition: all 0.3s;
+          &:hover {
+            border: 0.1rem solid #000;
+          }
+          &::placeholder {
+            color: #a5b0c2;
+          }
+          &.active {
+            border: 0.1rem solid red;
+          }
+        }
+      }
+
+      .email_last_step {
+        // margin-top: 4rem;
+        .email_last_step_bottom {
+          padding: 0 40px;
+        }
+        .email_last_step_block {
+          padding: 10px;
+          border-bottom: 2px solid;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .email_last_step_content {
+            margin-left: 1rem;
+            font-size: 2.2rem;
+            font-weight: bold;
+            color: #030303;
+          }
+          .email_last_step_block_icon {
+            cursor: pointer;
+            margin-right: 1rem;
+            height: 20px;
+          }
+        }
+
+        .fi-br-arrow-left {
+          font-size: 2.5rem;
+          font-weight: bold;
+          color: #030303;
+          transform: translateY(1rem);
+          display: inline-block;
+        }
+      }
+
+      .login_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        transition: all 0.3s;
+        &:hover {
+          background: #3c3c3c;
+        }
+        &[state="2"] {
+          cursor: not-allowed;
+        }
+      }
+      .login_text {
+        font-size: 1.6rem;
+        margin-top: 4rem;
+        color: #151515;
+        display: flex;
+        justify-content: flex-end;
+
+        .forget_password_text {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .forget_password_content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 60rem;
+      background: #ffffff;
+      box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200, 200, 200, 0.3);
+      border-radius: 1rem;
+      padding: 3rem 6rem 6.5rem;
+      box-sizing: border-box;
+
+      .forget_password_content_block {
+        cursor: pointer;
+      }
+
+      .fi-br-arrow-left {
+        font-size: 3.8rem;
+        font-weight: bold;
+        color: #030303;
+        transform: translateY(1rem);
+        display: inline-block;
+      }
+      .forget_password_content_title {
+        font-size: 3.2rem;
+        font-weight: bold;
+        color: #030303;
+        margin-left: 2rem;
+      }
+
+      .forget_passored_form_content {
+        margin-top: 3.5rem;
+
+        .forget_passored_form_title {
+          font-size: 2.4rem;
+          font-weight: bold;
+          color: #030303;
+          display: flex;
+          justify-content: space-between;
+          box-sizing: border-box;
+        }
+
+        .forget_passored_form_input {
+          width: 100%;
+          height: 5rem;
+          margin-top: 1rem;
+          border: 0.1rem solid #dfdfdf;
+          border-radius: 2.5rem;
+          padding-left: 2.1rem;
+          line-height: 5rem;
+          font-size: 1.4rem;
+          box-sizing: border-box;
+          outline: none;
+
+          &::placeholder {
+            color: #a5b0c2;
+          }
+        }
+      }
+
+      .forget_verif_code_des {
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: #030303;
+        margin-top: 3.5rem;
+      }
+
+      .forget_submit_button {
+        height: 5rem;
+        background: #000;
+        border-radius: 2.5rem;
+        line-height: 5rem;
+        text-align: center;
+        font-size: 1.8rem;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .marign_top20 {
+    margin-top: 2rem;
+  }
+
+  .marign_top22 {
+    margin-top: 2.2rem;
+  }
+
+  .marign_top30 {
+    margin-top: 3rem;
+  }
+  .marign_top40 {
+    margin-top: 4rem;
+  }
+  .thirdPartyLogin {
+    display: flex;
+    // justify-content: flex-start;
+    > div {
+      position: relative;
+      margin-right: 1rem;
+      > .mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        cursor: pointer;
+      }
+    }
+  }
+  .tip_content {
+    font-size: 1.3rem;
+    font-weight: bold;
+    color: #000;
+    cursor: pointer;
+  }
+
+  .email_last_step_des {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+
+    .sent_email_content {
+      font-size: 1.8rem;
+      font-weight: bold;
+      color: #a5b0c2;
+    }
+
+    .email_tip_content {
+      font-size: 1.4rem;
+      color: #030303;
+    }
+  }
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
index 099a2418..2763dc36 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,35 +1,42 @@
-import { createApp,defineComponent,h } from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import './assets/iconfont/iconfont.css'
-import './assets/iconfont/iconfont.js'
-import './assets/iconfont2/iconfont.css'
-import flexible from './tool/flexible.js'
-import 'ant-design-vue/dist/antd.css';
-import Antd from 'ant-design-vue';
-import './assets/style/style.less';
+import { createApp, defineComponent, h } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import "./assets/iconfont/iconfont.css";
+import "./assets/iconfont/iconfont.js";
+import "./assets/iconfont2/iconfont.css";
+import flexible from "./tool/flexible.js";
+import "ant-design-vue/dist/antd.css";
+import Antd from "ant-design-vue";
+import "./assets/style/style.less";
 import VueLazyload from "vue-lazyload";
-import i18n from './lang/index'
-import { getBrowserInfo, murmur } from './tool/util'
-import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
+import i18n from "./lang/index";
+import { getBrowserInfo, murmur } from "./tool/util";
+import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css";
 // import { Https } from "@/tool/https";
-import 'swiper/css';
-import 'swiper/css/pagination';
+import "swiper/css";
+import "swiper/css/pagination";
 
 // import "@/tool/color-thief.js";
 // import "@/tool/fabric.brushes.js";
 // import "@/tool/fabric.min.js";
 const app = createApp(App);
-flexible()
+flexible();
 
 import { getCookie, setCookie } from "@/tool/cookie";
-document.addEventListener('touchstart', function(event) {
-	event.preventDefault(); // 阻止长按选中
+import loadingGif from "./assets/images/homePage/loading.gif";
+
+document.addEventListener("touchstart", function (event) {
+  event.preventDefault(); // 阻止长按选中
 });
 let loadingParam = {
-	loading: require('./assets/images/homePage/loading.gif'),
-	attempt: 1
-}
-app.use(store).use(router).use(Antd).use(VueLazyload, loadingParam).use(i18n).mount('#app')
-
+  loading: loadingGif,
+  attempt: 1,
+};
+app
+  .use(store)
+  .use(router)
+  .use(Antd)
+  .use(VueLazyload, loadingParam)
+  .use(i18n)
+  .mount("#app");
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 2a66792a..de5045b4 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,55 +1,74 @@
 <template>
-	<div class="loginPage">
-		<div class="left">
-			<!-- :isScroll="!isMask" -->
-			<Works  :autoscroll="true" :position="'login'"></Works>
-			<div class="mask" v-show="isMask" @click="()=>isMask = !isMask">
-				<div class="content">
-					<div class="userNum">
-						<div class="title">5 000 000 +</div>
-						<div>HAPPY USERS</div>
-					</div>
-					<div class="info">Millions trust AI products every day</div>
-				</div>
-			</div>
-		</div>
-		<div class="right">
-			<div class="Text" v-show="!loginType">
-				<div class="title">Join millions <br />using AI every day</div>
-				<div class="info">Experience secure,spam-free support that empowers you to grow, create,and succeed with confidence</div>
-			</div>
-			<div class="loginBox">
-				<div class="selectType" v-show="!loginType">
-					<div class="text">
-						Continue with one of these:
-					</div>
-					<div class="typeList">
-						<div class="gallery_btn white" @click="setLoginType('personal')">personal</div>
-						<div class="gallery_btn white" @click="setLoginType('school')">school</div>
-						<div class="gallery_btn white" @click="setLoginType('enterprise')">enterprise</div>
-					</div>
-				</div>
-				<div class="login" v-show="loginType">
-					<div class="title">
-						<i class="fi fi-br-angle-small-left" @click="()=>loginType = ''"></i>
-						<!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
-						<span>Log on to AiDA 3.0</span>
-					</div>
-					<personal v-show="loginType == 'personal'"></personal>
-					<school v-show="loginType == 'school'"></school>
-					<enterprise v-show="loginType == 'enterprise'"></enterprise>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="loginPage">
+    <div class="left">
+      <!-- :isScroll="!isMask" -->
+      <Works :autoscroll="true" :position="'login'"></Works>
+      <div class="mask" v-show="isMask" @click="() => (isMask = !isMask)">
+        <div class="content">
+          <div class="userNum">
+            <div class="title">5 000 000 +</div>
+            <div>HAPPY USERS</div>
+          </div>
+          <div class="info">Millions trust AI products every day</div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="Text" v-show="!loginType">
+        <div class="title">Join millions <br />using AI every day</div>
+        <div class="info">
+          Experience secure,spam-free support that empowers you to grow,
+          create,and succeed with confidence
+        </div>
+      </div>
+      <div class="loginBox">
+        <div class="selectType" v-show="!loginType">
+          <div class="text">Continue with one of these:</div>
+          <div class="typeList">
+            <div class="gallery_btn white" @click="setLoginType('personal')">
+              personal
+            </div>
+            <div class="gallery_btn white" @click="setLoginType('school')">
+              school
+            </div>
+            <div class="gallery_btn white" @click="setLoginType('enterprise')">
+              enterprise
+            </div>
+          </div>
+        </div>
+        <div class="login" v-show="loginType">
+          <div class="title">
+            <i
+              class="fi fi-br-angle-small-left"
+              @click="() => (loginType = '')"
+            ></i>
+            <!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
+            <span>Log on to AiDA 3.0</span>
+          </div>
+          <personal v-show="loginType == 'personal'"></personal>
+          <school v-show="loginType == 'school'"></school>
+          <enterprise v-show="loginType == 'enterprise'"></enterprise>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {
+  defineComponent,
+  computed,
+  ref,
+  provide,
+  nextTick,
+  createVNode,
+  toRefs,
+  reactive,
+} from "vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import { useI18n } from 'vue-i18n'
-const md5 = require("md5");
+import { useI18n } from "vue-i18n";
+import md5 from "md5";
 import Works from "@/views/HomeView/Works.vue";
 import { message } from "ant-design-vue";
 import { isEmail } from "@/tool/util";
@@ -57,149 +76,158 @@ import personal from "@/component/LoginPage/login/personal.vue";
 import school from "@/component/LoginPage/login/school.vue";
 import enterprise from "@/component/LoginPage/login/enterprise.vue";
 export default defineComponent({
-	components:{
-		Works,personal,school,enterprise
-	},
-	props:{
-	},
-	emits:[],
-	setup(props,{emit}) {
-		const store = useStore();
-		const loginData = reactive({
-			loginType:'',
-			isMask:true,
-		})
-		const dataDom = reactive({
-		})
-		const setLoginType = (str:any)=>{
-			loginData.loginType = str
-		}
-		return{
-			...toRefs(dataDom),
-			...toRefs(loginData),
-			setLoginType,
-		}
-	},
-	provide() {
-		return {
-		}
-	},
-})
+  components: {
+    Works,
+    personal,
+    school,
+    enterprise,
+  },
+  props: {},
+  emits: [],
+  setup(props, { emit }) {
+    const store = useStore();
+    const loginData = reactive({
+      loginType: "",
+      isMask: true,
+    });
+    const dataDom = reactive({});
+    const setLoginType = (str: any) => {
+      loginData.loginType = str;
+    };
+    return {
+      ...toRefs(dataDom),
+      ...toRefs(loginData),
+      setLoginType,
+    };
+  },
+  provide() {
+    return {};
+  },
+});
 </script>
 <style lang="less" scoped>
-	.loginPage{
-		width: 100%;
-		height: 100%;
-		position: relative;
-		display: flex;
-		> .left,>.right{
-			height: 100%;
-		}
-		> .left{
-			width: 60%;
-			background: #f7f8fa;
-			position: relative;
-			> .mask{
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-				background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, .8) 100%);
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				color: #fff;
-				cursor: pointer;
-				> .content{
-					text-align: center;
-					padding: 15rem;
-					//黑色径向渐变
-					background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 70%);
-					.userNum{
-						line-height: 1;
-						margin-bottom: 3rem;
-						> .title{
-							font-size: 8rem;
-							font-weight: 900;
-						}
-						> div{
-							font-size: 3rem;
-							font-weight: 500;
-						}
-					}	
-					> .info{
-						font-size: 4rem;
-						font-weight: 500;
-					}
-				}
-			}
-		}
-		> .right{
-			display: flex;
-			width: 40%;
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-			> .Text{
-				width: 60rem;
-				text-align: center;
-				> .title{
-					font-size: 4rem;
-					font-weight: 900;
-					line-height: 1.2;
-					margin-bottom: 2rem;
-				}
-				> .info{
-					font-size: 1.8rem;
-					margin-bottom: 2rem;
-					line-height: 1.2;
-				}
-				> .continue{
-					> i{
-						margin-left: 1rem;
-					}
-				}
-			}
-			> .loginBox{
-				width: 60rem;
-				> .selectType{
-					width: 100%;
-					text-align: center;
-					> .text{
-						font-size: 2.5rem;
-						font-weight: 600;
-					}	
-					> .typeList{
-						> div{
-							margin: 0 auto;
-							width: 33rem;
-							margin-top: .8rem;
-							border-radius: 1rem;
-							border: 2px solid;
-							display: flex;
-							align-items: center;
-							justify-content: center;
-						}
-					}
-				}
-				> .login{
-					position: relative;
-					> .title{
-						font-size: 4rem;
-						font-weight: 900;
-						display: flex;
-						align-items: center;
-						> i{
-							margin-right: 2rem;
-							font-size: 3rem;
-							display: flex;
-							cursor: pointer;
-							align-items: center;
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+.loginPage {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  > .left,
+  > .right {
+    height: 100%;
+  }
+  > .left {
+    width: 60%;
+    background: #f7f8fa;
+    position: relative;
+    > .mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background: linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(0, 0, 0, 0.8) 100%
+      );
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      cursor: pointer;
+      > .content {
+        text-align: center;
+        padding: 15rem;
+        //黑色径向渐变
+        background: radial-gradient(
+          ellipse at center,
+          rgba(0, 0, 0, 0.3) 0%,
+          rgba(0, 0, 0, 0) 70%
+        );
+        .userNum {
+          line-height: 1;
+          margin-bottom: 3rem;
+          > .title {
+            font-size: 8rem;
+            font-weight: 900;
+          }
+          > div {
+            font-size: 3rem;
+            font-weight: 500;
+          }
+        }
+        > .info {
+          font-size: 4rem;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  > .right {
+    display: flex;
+    width: 40%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    > .Text {
+      width: 60rem;
+      text-align: center;
+      > .title {
+        font-size: 4rem;
+        font-weight: 900;
+        line-height: 1.2;
+        margin-bottom: 2rem;
+      }
+      > .info {
+        font-size: 1.8rem;
+        margin-bottom: 2rem;
+        line-height: 1.2;
+      }
+      > .continue {
+        > i {
+          margin-left: 1rem;
+        }
+      }
+    }
+    > .loginBox {
+      width: 60rem;
+      > .selectType {
+        width: 100%;
+        text-align: center;
+        > .text {
+          font-size: 2.5rem;
+          font-weight: 600;
+        }
+        > .typeList {
+          > div {
+            margin: 0 auto;
+            width: 33rem;
+            margin-top: 0.8rem;
+            border-radius: 1rem;
+            border: 2px solid;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+      > .login {
+        position: relative;
+        > .title {
+          font-size: 4rem;
+          font-weight: 900;
+          display: flex;
+          align-items: center;
+          > i {
+            margin-right: 2rem;
+            font-size: 3rem;
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+}
+</style>