Merge remote-tracking branch 'origin/develop' into dev_vite

src/assets/style/style.css

@@ -886,6 +886,12 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
   overflow: hidden;
   box-sizing: border-box;
 }
+.ant-select-dropdown .ant-select-item {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  padding: 0.8rem 1.8rem;
+  min-height: 3.2rem;
+}
 .generalModel {
   -moz-user-select: none;
   -webkit-user-select: none;

src/assets/style/style.less

@@ -970,6 +970,15 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 		overflow: hidden;
 		box-sizing: border-box;
 	}
+	.ant-select-item{
+		font-size: 1.6rem;
+		line-height: 2.4rem;
+		padding: .8rem 1.8rem;
+		min-height: 3.2rem;
+		.ant-select-item-option-content{
+			
+		}
+	}
 }
 
 .generalModel{//自带关闭的页面

src/component/DetailCopy/model/modelPosition.vue

@@ -485,6 +485,7 @@ export default defineComponent({
 					float: left;
 					user-select:none;
 					-webkit-user-drag: none;
+					object-fit: cover;
 				}
 				.modal_imgItem{
 					position: absolute;

src/component/Events/eventsDetail.vue

@@ -101,7 +101,7 @@ export default defineComponent({
 				eventLangData = eventDataCn
 			}
 			eventLangData.eventsItem.forEach((item:any)=>{
-				if(item.id == router.currentRoute.value.query.id){
+				if(item.id == router.currentRoute.value.query.eventId){
 					filter.eventsDetail = item;
 				}
 			})

src/component/HomePage/Generate.vue

@@ -728,11 +728,6 @@ export default defineComponent({
 								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 									message.info(this.t('Generate.effectPoor'));
 								}else{
-									nextTick().then(()=>{
-										if(this.driver__.driver){
-											driverObj__.moveNext()
-										}
-									})
 								}
 								
 								this.store.dispatch('getCredits')

src/component/HomePage/scaleImage.vue

@@ -687,7 +687,7 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				justify-content: center;
-				z-index: 2;
+				z-index: 99;
 				.operate_icon{
 					font-size: 1.8rem;
 					color: #fff;

src/component/LoginPage/login/enterprise.vue

@@ -8,19 +8,19 @@
                     <!-- 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="login_form_title marign_top30">
+									Enterprise
+								</div>
 								<div  class="generalModel_state">
-                  <div
+									<div class="generalModel_state_item" style="width: 100%; margin: 0;">
-                    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%"
+											style="width:100%"
 											show-search
 											size="large"
 											:fieldNames="{ label: 'name', value: 'value' }"
@@ -36,7 +36,9 @@
 										</a-select>
 									</div>
 								</div>
-                <div class="login_form_title marign_top30">Email</div>
+								<div class="login_form_title marign_top30">
+									Email
+								</div>
 								<input
 									class="login_form_input"
 									placeholder="Enter your email address"
@@ -61,16 +63,21 @@
 								</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
+                                    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
+                                            >Verify with one-time verification
+                                            code</span
                                         >
                                         <i
                                             class="fi fi-br-cross email_last_step_block_icon"
@@ -79,23 +86,34 @@
                                     </div>
                                     <div class="email_last_step_bottom">
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content">Sent to {{ email }}</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"
-                        <span v-show="!time" @click="emailNextStepFun()"
+                                                    >{{ time }}s</span
+                                                >
+                                                <span
+                                                    v-show="!time"
+                                                    @click="emailNextStepFun()"
                                                     >Resend</span
                                                 >
                                             </div>
                                         </div>
                                         <VerificationCodeInput
                                             :ct="emailCode"
-                      @sendCaptcha="submitEmailLogin($event)"
+                                            @sendCaptcha="
+                                                submitEmailLogin($event)
+                                            "
                                         ></VerificationCodeInput>
 
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content email_tip_content">
+                                            <div
-                        Please check the junk box if you haven't received
+                                                class="sent_email_content email_tip_content"
-                        verification code
+                                            >
+                                                Please check the junk box if you
+                                                haven't received verification
+                                                code
                                             </div>
                                         </div>
                                     </div>
@@ -105,8 +123,15 @@
 
                         <div class="login_form_title marign_top30">
                             <label :class="{ active: emailStap == 2 }">
-                <input :state="emailStap" type="checkbox" v-model="checked" />
+                                <input
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                                    :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">
@@ -140,6 +165,7 @@
                 </div>
 
                 <!-- 邮箱登录 end -->
+               
             </div>
 
             <!-- 忘记密码 start -->
@@ -149,7 +175,9 @@
                     @click="forgetPasswordLastStepFun()"
                 >
                     <i class="fi fi-br-arrow-left"></i>
-          <span class="forget_password_content_title">Retrieve password</span>
+                    <span class="forget_password_content_title"
+                        >Retrieve password</span
+                    >
                 </div>
                 <div v-show="frogetPasswordStep === 1">
                     <div class="forget_passored_form_content">
@@ -177,7 +205,9 @@
                         </div>
                         <div class="tip_content">
                             <span v-show="time">{{ time }}s</span>
-              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                            <span
+                                v-show="!time"
+                                @click="forgetPasswordNextStepFun()"
                                 >Resend</span
                             >
                         </div>
@@ -215,7 +245,7 @@
 </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";
@@ -227,47 +257,42 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-import md5 from "md5";
+const md5 = require("md5");
 export default defineComponent({
     components: {
-    VerificationCodeInput,
+        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
-    googleLogin,
-    weiXinLogin,
-    phoneLogin,
     },
     setup() {
         let timer: any = 0;
         const { locale } = useI18n();
         const store = useStore();
-    let loadingShow = ref(false);
+		let loadingShow = ref(false)
 		const data = reactive({
-      selectEnterprise: "",
+			selectEnterprise:'',
-      schoolList: [] as any,
+			schoolList:[] as any,
-    });
+		})
-    const schoolListChange = (e: any) => {};
+		const schoolListChange = (e:any)=>{
-    const filterOption = (e: any) => {
+		}
-      let params = {
+		const filterOption = (e:any)=>{
-        name: e,
+			let params = {
-        type: "Enterprise",
+				name:e,
-      };
+				type:'Enterprise'
-      Https.axiosPost(
+			}
-        Https.httpUrls.organizationNameSearch,
+			Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
-        {},
+				data.schoolList = rv.map((item:any)=>{
-        { params: params }
+					return {
-      ).then((rv: any) => {
+						label:item,
-        data.schoolList = rv.map((item: any) => {
+						value:item,
-          return {
+					}	
-            label: item,
+				})
-            value: item,
+			})
-          };
+			
-        });
+		}
-      });
+		const handleFocus= ()=>{
-    };
+			if(data.schoolList.length == 0){
-    const handleFocus = () => {
+				filterOption('')
-      if (data.schoolList.length == 0) {
+			}
-        filterOption("");
 		}
-    };
         return {
 			...toRefs(data),
             store,
@@ -275,8 +300,7 @@ export default defineComponent({
             locale,
 			loadingShow,
 			schoolListChange,
-      filterOption,
+			filterOption,handleFocus
-      handleFocus,
         };
     },
     data() {
@@ -288,8 +312,8 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             emailNextStep: true,
             username: "",
-      password: localStorage.getItem("loginPassword") || "",
+            password: localStorage.getItem("loginPassword") || '',
-      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
             frogetPasswordStep: 1, //忘记密码的步骤
             forgetPasswordEmail: "",
             forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -334,14 +358,16 @@ export default defineComponent({
                 email: this.email,
                 operationType: "LOGIN",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.emailStap = 2;
                         this.time = 60;
                         this.emailCode = ["", "", "", "", "", ""];
                         this.createTimer();
                     }
-      });
+                }
+            );
         },
 
         //邮箱登录的上一步
@@ -364,12 +390,15 @@ export default defineComponent({
                 email: this.forgetPasswordEmail,
                 operationType: "FORGET_PWD",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.frogetPasswordStep = 2;
-          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                            this.createTimer();
                     }
-      });
+                }
+            );
         },
         //忘记密码的上一步
         forgetPasswordLastStepFun() {
@@ -378,7 +407,8 @@ export default defineComponent({
             } else {
                 this.frogetPasswordStep = this.frogetPasswordStep - 1;
                 this.forgetPasswordEmail = "";
-        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+                (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                    this.clearTimer();
             }
         },
 
@@ -391,13 +421,15 @@ export default defineComponent({
                 password: "",
                 verifyEmail: true,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.forgetEmailValue = emailVerifyCode;
                         this.frogetPasswordStep = 3;
                         this.clearTimer();
                     }
-      });
+                }
+            );
         },
 
         //改变勾选是否是机器人
@@ -412,7 +444,9 @@ export default defineComponent({
                 return;
             } else {
                 if (!this.password) {
-          message.info("Please enter your account number or password");
+                    message.info(
+                        "Please enter your account number or password"
+                    );
                     return;
                 }
                 //输入邮箱
@@ -431,14 +465,16 @@ export default defineComponent({
                 }
                 //判断是否同意隐私政策
                 if (!this.checked) {
-          message.info("Agree to all terms, privacy fees and policies");
+                    message.info(
+                        "Agree to all terms, privacy fees and policies"
+                    );
                     return;
                 }
                 let data = {
                     password: md5(this.password + "abc"),
-          userName: "a",
+                    userName: 'a',
                     // userName: this.username,
-          organizationName: this.selectEnterprise,
+					organizationName:this.selectEnterprise,
                     email: this.email,
                     operationType: "LOGIN",
                     ip: "",
@@ -448,7 +484,7 @@ export default defineComponent({
                     Https.axiosPost(Https.httpUrls.enterpriseLogin, data)
                         .then((rv: any) => {
                             if (rv) {
-                this.clearTimer();
+								this.clearTimer()
 								this.time = 60;
 								this.emailStap = 2;
 								this.emailCode = ["", "", "", "", "", ""];
@@ -459,7 +495,8 @@ export default defineComponent({
 								localStorage.setItem("loginPassword", this.password);
                             }
                         })
-            .catch((res) => {});
+                        .catch((res) => {
+                        });
                     setTimeout(() => {
                         this.loginTime = true;
                     }, 2000);
@@ -479,44 +516,44 @@ export default defineComponent({
                 emailVerifyCode: emailVerifyCode,
                 loginType: "EMAIL",
                 userId: this.userId,
-        organizationName: this.selectEnterprise,
+				organizationName:this.selectEnterprise
             };
             Https.axiosPost(Https.httpUrls.accountLogin, data)
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
         },
-    isCheckAgreement() {
+		isCheckAgreement(){
-      message.info("Agree to all terms, privacy fees and policies");
+			message.info(
+					"Agree to all terms, privacy fees and policies"
+				);
 		},
 		//微信登录
-    wechatLogin(value: any) {
+		wechatLogin(value:any) {
 			let data = {
-        code: value.code,
+				code : value.code,
-        type: 2,
+				type:2
-      };
+			}
-      this.loadingShow = true;
+			this.loadingShow = true
-      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
                 .then((rv: any) => {
-          this.loadingShow = false;
+					this.loadingShow = false
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
-        .catch((res) => {
+                .catch((res) => {this.loadingShow = false});
-          this.loadingShow = false;
-        });
 		},
 		//谷歌登录
-    googelLogin(value: any) {
+		googelLogin(value:any) {
-      let data = { credential: value, type: 2 };
+			let data = {credential : value,type:2}
-      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
 		},
 		//登陆成功设置参数
-    setSuccessLogin(rv: any) {
+		setSuccessLogin(rv:any){
 			if (rv) {
 				if (rv.systemUser == 4) {
 					rv.systemUser = 1;
@@ -531,11 +568,11 @@ export default defineComponent({
 				setCookie("isBeginner", isBeginner);
 				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
 				setCookie("userInfo", JSON.stringify(rv));
-        let userid: any = {
+				let userid:any = {
-          ueserId: rv.userId,
+					ueserId:rv.userId,
-          systemUser: rv.systemUser,
+					systemUser:rv.systemUser,
-        };
+				}
-        if (rv.email) userid.email = rv.email;
+				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
 				if (window.innerWidth < 768) {
@@ -546,9 +583,13 @@ export default defineComponent({
 				} else {
 					this.turnToHomePage("/home");
 				}
-        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+				sessionStorage.setItem(
+					"isTimeOne",
+					JSON.stringify(false)
+				); //是否需要公告 提示 弹窗
 				let randomNum: any =
-          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+					Math.floor(Math.random() * 9000000000000000) +
+					1000000000000000;
 				sessionStorage.setItem("sessionId", randomNum);
 				sessionStorage.setItem("record", JSON.stringify([]));
 			}
@@ -561,12 +602,14 @@ export default defineComponent({
                 password: md5(this.newPassword + "abc"),
                 verifyEmail: false,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         message.success("Changing the password successfully");
                         this.changeIsLogin(1);
                     }
-      });
+                }
+            );
         },
 
         //创建定时器
@@ -612,9 +655,9 @@ export default defineComponent({
         // },
     },
 	mounted() {
-    const data = this.$route.query;
+		const data = this.$route.query
-    if (data?.state == "weiXin") {
+		if(data?.state == 'weiXin'){
-      this.wechatLogin(data);
+			this.wechatLogin(data)
 		}
 	},
 });
@@ -686,15 +729,15 @@ export default defineComponent({
                     }
                 }
             }
-      .generalModel_state {
+			.generalModel_state{
-        > .generalModel_state_item {
+				>.generalModel_state_item{
-          :deep(.ant-select-selector) {
+					:deep(.ant-select-selector){
 						border: 0.1rem solid #dfdfdf;
 						border-radius: 2.5rem;
 						height: 5rem !important;
 						width: 100%;
 						box-sizing: border-box;
-            &:hover {
+						&:hover{
 							border: 0.1rem solid #000;
 						}
 					}
@@ -735,8 +778,8 @@ export default defineComponent({
                     font-size: 1.4rem;
                     box-sizing: border-box;
                     outline: none;
-          transition: all 0.3s;
+					transition: all .3s;
-          &:hover {
+					&:hover{
 						border: 0.1rem solid #000;
 					}
                     &::placeholder {
@@ -789,9 +832,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
-        transition: all 0.3s;
+				transition: all .3s;
-        &:hover {
+				&:hover{
-          background: #3c3c3c;
+					background: #3C3C3C;
 				}
                 &[state="2"] {
                     cursor: not-allowed;
@@ -937,13 +980,13 @@ export default defineComponent({
     .marign_top40 {
         margin-top: 4rem;
     }
-  .thirdPartyLogin {
+	.thirdPartyLogin{
 		display: flex;
 		// justify-content: flex-start;
-    > div {
+		> div{
 			position: relative;
 			margin-right: 1rem;
-      > .mask {
+			> .mask{
 				position: absolute;
 				width: 100%;
 				height: 100%;

src/component/LoginPage/login/personal.vue

@@ -4,6 +4,7 @@
             <!-- 账号密码和邮箱登录  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">
@@ -14,7 +15,9 @@
                                 v-model="username"
                             /> -->
 							<div v-show="emailStap === 1">
-                <div class="login_form_title marign_top30">Email</div>
+								<div class="login_form_title marign_top30">
+									Email
+								</div>
 								<input
 									class="login_form_input"
 									placeholder="Enter your email address"
@@ -39,16 +42,21 @@
 								</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
+                                    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
+                                            >Verify with one-time verification
+                                            code</span
                                         >
                                         <i
                                             class="fi fi-br-cross email_last_step_block_icon"
@@ -57,23 +65,34 @@
                                     </div>
                                     <div class="email_last_step_bottom">
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content">Sent to {{ email }}</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"
-                        <span v-show="!time" @click="emailNextStepFun()"
+                                                    >{{ time }}s</span
+                                                >
+                                                <span
+                                                    v-show="!time"
+                                                    @click="emailNextStepFun()"
                                                     >Resend</span
                                                 >
                                             </div>
                                         </div>
                                         <VerificationCodeInput
                                             :ct="emailCode"
-                      @sendCaptcha="submitEmailLogin($event)"
+                                            @sendCaptcha="
+                                                submitEmailLogin($event)
+                                            "
                                         ></VerificationCodeInput>
 
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content email_tip_content">
+                                            <div
-                        Please check the junk box if you haven't received
+                                                class="sent_email_content email_tip_content"
-                        verification code
+                                            >
+                                                Please check the junk box if you
+                                                haven't received verification
+                                                code
                                             </div>
                                         </div>
                                     </div>
@@ -83,25 +102,24 @@
 
                         <div class="login_form_title marign_top30">
                             <label :class="{ active: emailStap == 2 }">
-                <input :state="emailStap" type="checkbox" v-model="checked" />
+                                <input
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                                    :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
+								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-                  class="mask"
-                  v-show="!checked"
-                  @click="isCheckAgreement"
-                ></div>
 								<googleLogin @googelLogin="googelLogin"></googleLogin>
 							</div>
 							<div class="label">
-                <div
+								<div class="mask" v-show="!checked" @click="isCheckAgreement"></div>
-                  class="mask"
-                  v-show="!checked"
-                  @click="isCheckAgreement"
-                ></div>
 								<weiXinLogin></weiXinLogin>
 							</div>
 							<!-- <phoneLogin></phoneLogin> -->
@@ -115,7 +133,10 @@
                         </div>
 
                         <div class="login_text">
-              <div class="forget_password_text" @click="changeIsLogin(2)">
+                            <div
+                                class="forget_password_text"
+                                @click="changeIsLogin(2)"
+                            >
                                 Forgot your password
                             </div>
                         </div>
@@ -135,7 +156,9 @@
                     <!-- <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>
+                    <span class="forget_password_content_title"
+                        >Retrieve password</span
+                    >
                 </div>
                 <div v-show="frogetPasswordStep === 1">
                     <div class="forget_passored_form_content">
@@ -163,7 +186,9 @@
                         </div>
                         <div class="tip_content">
                             <span v-show="time">{{ time }}s</span>
-              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                            <span
+                                v-show="!time"
+                                @click="forgetPasswordNextStepFun()"
                                 >Resend</span
                             >
                         </div>
@@ -195,6 +220,8 @@
             <!-- 忘记密码 end -->
         </div>
 
+
+
         <!-- <div class="login_footer">
             <div class="login_footer_item">
                 <div class="login_footer_item_text">
@@ -244,19 +271,16 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-import md5 from "md5";
+const md5 = require("md5");
 export default defineComponent({
     components: {
-    VerificationCodeInput,
+        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
-    googleLogin,
-    weiXinLogin,
-    phoneLogin,
     },
     setup() {
         let timer: any = 0;
         const { locale } = useI18n();
         const store = useStore();
-    let loadingShow = ref(false);
+		let loadingShow = ref(false)
         return {
             store,
             timer,
@@ -273,8 +297,8 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             emailNextStep: true,
             username: "",
-      password: localStorage.getItem("loginPassword") || "",
+            password: localStorage.getItem("loginPassword") || '',
-      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
             frogetPasswordStep: 1, //忘记密码的步骤
             forgetPasswordEmail: "",
             forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -319,14 +343,16 @@ export default defineComponent({
                 email: this.email,
                 operationType: "LOGIN",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.emailStap = 2;
                         this.time = 60;
                         this.emailCode = ["", "", "", "", "", ""];
                         this.createTimer();
                     }
-      });
+                }
+            );
         },
 
         //邮箱登录的上一步
@@ -349,12 +375,15 @@ export default defineComponent({
                 email: this.forgetPasswordEmail,
                 operationType: "FORGET_PWD",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.frogetPasswordStep = 2;
-          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                            this.createTimer();
                     }
-      });
+                }
+            );
         },
         //忘记密码的上一步
         forgetPasswordLastStepFun() {
@@ -363,7 +392,8 @@ export default defineComponent({
             } else {
                 this.frogetPasswordStep = this.frogetPasswordStep - 1;
                 this.forgetPasswordEmail = "";
-        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+                (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                    this.clearTimer();
             }
         },
 
@@ -376,13 +406,15 @@ export default defineComponent({
                 password: "",
                 verifyEmail: true,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.forgetEmailValue = emailVerifyCode;
                         this.frogetPasswordStep = 3;
                         this.clearTimer();
                     }
-      });
+                }
+            );
         },
 
         //改变勾选是否是机器人
@@ -397,7 +429,9 @@ export default defineComponent({
                 return;
             } else {
                 if (!this.password) {
-          message.info("Please enter your account number or password");
+                    message.info(
+                        "Please enter your account number or password"
+                    );
                     return;
                 }
                 //输入邮箱
@@ -412,12 +446,14 @@ export default defineComponent({
                 }
                 //判断是否同意隐私政策
                 if (!this.checked) {
-          message.info("Agree to all terms, privacy fees and policies");
+                    message.info(
+                        "Agree to all terms, privacy fees and policies"
+                    );
                     return;
                 }
                 let data = {
                     password: md5(this.password + "abc"),
-          userName: "a",
+                    userName: 'a',
                     // userName: this.username,
                     email: this.email,
                     operationType: "LOGIN",
@@ -433,7 +469,7 @@ export default defineComponent({
                             //     this.loginType = 'email'
                             // }
                             if (rv) {
-                this.clearTimer();
+								this.clearTimer()
 								this.time = 60;
 								this.emailStap = 2;
 								this.emailCode = ["", "", "", "", "", ""];
@@ -446,7 +482,8 @@ export default defineComponent({
 								localStorage.setItem("loginPassword", this.password);
                             }
                         })
-            .catch((res) => {});
+                        .catch((res) => {
+                        });
                     setTimeout(() => {
                         this.loginTime = true;
                     }, 2000);
@@ -469,40 +506,40 @@ export default defineComponent({
             };
             Https.axiosPost(Https.httpUrls.accountLogin, data)
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
         },
-    isCheckAgreement() {
+		isCheckAgreement(){
-      message.info("Agree to all terms, privacy fees and policies");
+			message.info(
+					"Agree to all terms, privacy fees and policies"
+				);
 		},
 		//微信登录
-    wechatLogin(value: any) {
+		wechatLogin(value:any) {
 			let data = {
-        code: value.code,
+				code : value.code,
-        type: 2,
+				type:2
-      };
+			}
-      this.loadingShow = true;
+			this.loadingShow = true
-      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
                 .then((rv: any) => {
-          this.loadingShow = false;
+					this.loadingShow = false
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
-        .catch((res) => {
+                .catch((res) => {this.loadingShow = false});
-          this.loadingShow = false;
-        });
 		},
 		//谷歌登录
-    googelLogin(value: any) {
+		googelLogin(value:any) {
-      let data = { credential: value, type: 2 };
+			let data = {credential : value,type:2}
-      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
 		},
 		//登陆成功设置参数
-    setSuccessLogin(rv: any) {
+		setSuccessLogin(rv:any){
 			if (rv) {
 				if (rv.systemUser == 4) {
 					rv.systemUser = 1;
@@ -517,11 +554,11 @@ export default defineComponent({
 				setCookie("isBeginner", isBeginner);
 				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
 				setCookie("userInfo", JSON.stringify(rv));
-        let userid: any = {
+				let userid:any = {
-          ueserId: rv.userId,
+					ueserId:rv.userId,
-          systemUser: rv.systemUser,
+					systemUser:rv.systemUser,
-        };
+				}
-        if (rv.email) userid.email = rv.email;
+				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
 				if (window.innerWidth < 768) {
@@ -532,9 +569,13 @@ export default defineComponent({
 				} else {
 					this.turnToHomePage("/home");
 				}
-        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+				sessionStorage.setItem(
+					"isTimeOne",
+					JSON.stringify(false)
+				); //是否需要公告 提示 弹窗
 				let randomNum: any =
-          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+					Math.floor(Math.random() * 9000000000000000) +
+					1000000000000000;
 				sessionStorage.setItem("sessionId", randomNum);
 				sessionStorage.setItem("record", JSON.stringify([]));
 			}
@@ -547,12 +588,14 @@ export default defineComponent({
                 password: md5(this.newPassword + "abc"),
                 verifyEmail: false,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         message.success("Changing the password successfully");
                         this.changeIsLogin(1);
                     }
-      });
+                }
+            );
         },
 
         //创建定时器
@@ -598,9 +641,9 @@ export default defineComponent({
         // },
     },
 	mounted() {
-    const data = this.$route.query;
+		const data = this.$route.query
-    if (data?.state == "weiXin") {
+		if(data?.state == 'weiXin'){
-      this.wechatLogin(data);
+			this.wechatLogin(data)
 		}
 	},
 });
@@ -706,8 +749,8 @@ export default defineComponent({
                     font-size: 1.4rem;
                     box-sizing: border-box;
                     outline: none;
-          transition: all 0.3s;
+					transition: all .3s;
-          &:hover {
+					&:hover{
 						border: 0.1rem solid #000;
 					}
                     &::placeholder {
@@ -760,9 +803,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
-        transition: all 0.3s;
+				transition: all .3s;
-        &:hover {
+				&:hover{
-          background: #3c3c3c;
+					background: #3C3C3C;
 				}
                 &[state="2"] {
                     cursor: not-allowed;
@@ -908,13 +951,13 @@ export default defineComponent({
     .marign_top40 {
         margin-top: 4rem;
     }
-  .thirdPartyLogin {
+	.thirdPartyLogin{
 		display: flex;
 		// justify-content: flex-start;
-    > div {
+		> div{
 			position: relative;
 			margin-right: 1rem;
-      > .mask {
+			> .mask{
 				position: absolute;
 				width: 100%;
 				height: 100%;

src/component/LoginPage/login/school.vue

@@ -8,19 +8,19 @@
                     <!-- 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="login_form_title marign_top30">
+									School
+								</div>
 								<div  class="generalModel_state">
-                  <div
+									<div class="generalModel_state_item" style="width: 100%; margin: 0;">
-                    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%"
+											style="width:100%"
 											show-search
 											size="large"
 											:fieldNames="{ label: 'name', value: 'value' }"
@@ -36,7 +36,9 @@
 										</a-select>
 									</div>
 								</div>
-                <div class="login_form_title marign_top30">Email</div>
+								<div class="login_form_title marign_top30">
+									Email
+								</div>
 								<input
 									class="login_form_input"
 									placeholder="Enter your email address"
@@ -61,16 +63,21 @@
 								</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
+                                    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
+                                            >Verify with one-time verification
+                                            code</span
                                         >
                                         <i
                                             class="fi fi-br-cross email_last_step_block_icon"
@@ -79,23 +86,34 @@
                                     </div>
                                     <div class="email_last_step_bottom">
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content">Sent to {{ email }}</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"
-                        <span v-show="!time" @click="emailNextStepFun()"
+                                                    >{{ time }}s</span
+                                                >
+                                                <span
+                                                    v-show="!time"
+                                                    @click="emailNextStepFun()"
                                                     >Resend</span
                                                 >
                                             </div>
                                         </div>
                                         <VerificationCodeInput
                                             :ct="emailCode"
-                      @sendCaptcha="submitEmailLogin($event)"
+                                            @sendCaptcha="
+                                                submitEmailLogin($event)
+                                            "
                                         ></VerificationCodeInput>
 
                                         <div class="email_last_step_des">
-                      <div class="sent_email_content email_tip_content">
+                                            <div
-                        Please check the junk box if you haven't received
+                                                class="sent_email_content email_tip_content"
-                        verification code
+                                            >
+                                                Please check the junk box if you
+                                                haven't received verification
+                                                code
                                             </div>
                                         </div>
                                     </div>
@@ -105,8 +123,15 @@
 
                         <div class="login_form_title marign_top30">
                             <label :class="{ active: emailStap == 2 }">
-                <input :state="emailStap" type="checkbox" v-model="checked" />
+                                <input
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                                    :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">
@@ -149,7 +174,9 @@
                     @click="forgetPasswordLastStepFun()"
                 >
                     <i class="fi fi-br-arrow-left"></i>
-          <span class="forget_password_content_title">Retrieve password</span>
+                    <span class="forget_password_content_title"
+                        >Retrieve password</span
+                    >
                 </div>
                 <div v-show="frogetPasswordStep === 1">
                     <div class="forget_passored_form_content">
@@ -177,7 +204,9 @@
                         </div>
                         <div class="tip_content">
                             <span v-show="time">{{ time }}s</span>
-              <span v-show="!time" @click="forgetPasswordNextStepFun()"
+                            <span
+                                v-show="!time"
+                                @click="forgetPasswordNextStepFun()"
                                 >Resend</span
                             >
                         </div>
@@ -215,7 +244,7 @@
 </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";
@@ -227,47 +256,42 @@ import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { setLang } from "@/tool/guide";
-import md5 from "md5";
+const md5 = require("md5");
 export default defineComponent({
     components: {
-    VerificationCodeInput,
+        VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
-    googleLogin,
-    weiXinLogin,
-    phoneLogin,
     },
     setup() {
         let timer: any = 0;
         const { locale } = useI18n();
         const store = useStore();
-    let loadingShow = ref(false);
+		let loadingShow = ref(false)
 		const data = reactive({
-      selectSchool: "",
+			selectSchool:'',
-      schoolList: [] as any,
+			schoolList:[] as any,
-    });
+		})
-    const schoolListChange = (e: any) => {};
+		const schoolListChange = (e:any)=>{
-    const filterOption = (e: any) => {
+		}
-      let params = {
+		const filterOption = (e:any)=>{
-        name: e,
+			let params = {
-        type: "School",
+				name:e,
-      };
+				type:'School'
-      Https.axiosPost(
+			}
-        Https.httpUrls.organizationNameSearch,
+			Https.axiosPost(Https.httpUrls.organizationNameSearch,{},{params:params}).then((rv:any)=>{
-        {},
+				data.schoolList = rv.map((item:any)=>{
-        { params: params }
+					return {
-      ).then((rv: any) => {
+						label:item,
-        data.schoolList = rv.map((item: any) => {
+						value:item,
-          return {
+					}	
-            label: item,
+				})
-            value: item,
+			})
-          };
+			
-        });
+		}
-      });
+		const handleFocus= ()=>{
-    };
+			if(data.schoolList.length == 0){
-    const handleFocus = () => {
+				filterOption('')
-      if (data.schoolList.length == 0) {
+			}
-        filterOption("");
 		}
-    };
         return {
 			...toRefs(data),
             store,
@@ -275,8 +299,7 @@ export default defineComponent({
             locale,
 			loadingShow,
 			schoolListChange,
-      filterOption,
+			filterOption,handleFocus
-      handleFocus,
         };
     },
     data() {
@@ -288,8 +311,8 @@ export default defineComponent({
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             emailNextStep: true,
             username: "",
-      password: localStorage.getItem("loginPassword") || "",
+            password: localStorage.getItem("loginPassword") || '',
-      email: localStorage.getItem("loginEmail") || "", //邮箱登录邮箱
+            email: localStorage.getItem("loginEmail") || '', //邮箱登录邮箱
             frogetPasswordStep: 1, //忘记密码的步骤
             forgetPasswordEmail: "",
             forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
@@ -334,14 +357,16 @@ export default defineComponent({
                 email: this.email,
                 operationType: "LOGIN",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.emailStap = 2;
                         this.time = 60;
                         this.emailCode = ["", "", "", "", "", ""];
                         this.createTimer();
                     }
-      });
+                }
+            );
         },
 
         //邮箱登录的上一步
@@ -364,12 +389,15 @@ export default defineComponent({
                 email: this.forgetPasswordEmail,
                 operationType: "FORGET_PWD",
             };
-      Https.axiosPost(Https.httpUrls.accountSendEmail, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.frogetPasswordStep = 2;
-          (this.forgetEmailCode = ["", "", "", "", "", ""]), this.createTimer();
+                        (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                            this.createTimer();
                     }
-      });
+                }
+            );
         },
         //忘记密码的上一步
         forgetPasswordLastStepFun() {
@@ -378,7 +406,8 @@ export default defineComponent({
             } else {
                 this.frogetPasswordStep = this.frogetPasswordStep - 1;
                 this.forgetPasswordEmail = "";
-        (this.forgetEmailCode = ["", "", "", "", "", ""]), this.clearTimer();
+                (this.forgetEmailCode = ["", "", "", "", "", ""]),
+                    this.clearTimer();
             }
         },
 
@@ -391,13 +420,15 @@ export default defineComponent({
                 password: "",
                 verifyEmail: true,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         this.forgetEmailValue = emailVerifyCode;
                         this.frogetPasswordStep = 3;
                         this.clearTimer();
                     }
-      });
+                }
+            );
         },
 
         //改变勾选是否是机器人
@@ -412,7 +443,9 @@ export default defineComponent({
                 return;
             } else {
                 if (!this.password) {
-          message.info("Please enter your account number or password");
+                    message.info(
+                        "Please enter your account number or password"
+                    );
                     return;
                 }
                 //输入邮箱
@@ -431,14 +464,16 @@ export default defineComponent({
                 }
                 //判断是否同意隐私政策
                 if (!this.checked) {
-          message.info("Agree to all terms, privacy fees and policies");
+                    message.info(
+                        "Agree to all terms, privacy fees and policies"
+                    );
                     return;
                 }
                 let data = {
                     password: md5(this.password + "abc"),
-          userName: "a",
+                    userName: 'a',
                     // userName: this.username,
-          organizationName: this.selectSchool,
+					organizationName:this.selectSchool,
                     email: this.email,
                     operationType: "LOGIN",
                     ip: "",
@@ -449,7 +484,7 @@ export default defineComponent({
                     Https.axiosPost(Https.httpUrls.schoolLogin, data)
                         .then((rv: any) => {
                             if (rv) {
-                this.clearTimer();
+								 this.clearTimer()
 								this.time = 60;
 								this.emailStap = 2;
 								this.emailCode = ["", "", "", "", "", ""];
@@ -482,44 +517,44 @@ export default defineComponent({
                 emailVerifyCode: emailVerifyCode,
                 loginType: "EMAIL",
                 userId: this.userId,
-        organizationName: this.selectSchool,
+				organizationName:this.selectSchool
             };
             Https.axiosPost(Https.httpUrls.accountLogin, data)
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
         },
-    isCheckAgreement() {
+		isCheckAgreement(){
-      message.info("Agree to all terms, privacy fees and policies");
+			message.info(
+					"Agree to all terms, privacy fees and policies"
+				);
 		},
 		//微信登录
-    wechatLogin(value: any) {
+		wechatLogin(value:any) {
 			let data = {
-        code: value.code,
+				code : value.code,
-        type: 2,
+				type:2
-      };
+			}
-      this.loadingShow = true;
+			this.loadingShow = true
-      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
                 .then((rv: any) => {
-          this.loadingShow = false;
+					this.loadingShow = false
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
-        .catch((res) => {
+                .catch((res) => {this.loadingShow = false});
-          this.loadingShow = false;
-        });
 		},
 		//谷歌登录
-    googelLogin(value: any) {
+		googelLogin(value:any) {
-      let data = { credential: value, type: 2 };
+			let data = {credential : value,type:2}
-      Https.axiosGet(Https.httpUrls.parseGoogleCredential, { params: data })
+		    Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
                 .then((rv: any) => {
-          this.setSuccessLogin(rv);
+					this.setSuccessLogin(rv)
                 })
                 .catch((res) => {});
 		},
 		//登陆成功设置参数
-    setSuccessLogin(rv: any) {
+		setSuccessLogin(rv:any){
 			if (rv) {
 				if (rv.systemUser == 4) {
 					rv.systemUser = 1;
@@ -534,11 +569,11 @@ export default defineComponent({
 				setCookie("isBeginner", isBeginner);
 				setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
 				setCookie("userInfo", JSON.stringify(rv));
-        let userid: any = {
+				let userid:any = {
-          ueserId: rv.userId,
+					ueserId:rv.userId,
-          systemUser: rv.systemUser,
+					systemUser:rv.systemUser,
-        };
+				}
-        if (rv.email) userid.email = rv.email;
+				if(rv.email)userid.email = rv.email
 				this.store.commit("upUserDetail", userid);
 				
 				if (window.innerWidth < 768) {
@@ -549,9 +584,13 @@ export default defineComponent({
 				} else {
 					this.turnToHomePage("/home");
 				}
-        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
+				sessionStorage.setItem(
+					"isTimeOne",
+					JSON.stringify(false)
+				); //是否需要公告 提示 弹窗
 				let randomNum: any =
-          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
+					Math.floor(Math.random() * 9000000000000000) +
+					1000000000000000;
 				sessionStorage.setItem("sessionId", randomNum);
 				sessionStorage.setItem("record", JSON.stringify([]));
 			}
@@ -564,12 +603,14 @@ export default defineComponent({
                 password: md5(this.newPassword + "abc"),
                 verifyEmail: false,
             };
-      Https.axiosPost(Https.httpUrls.accountResetPwd, data).then((rv: any) => {
+            Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
+                (rv: any) => {
                     if (rv) {
                         message.success("Changing the password successfully");
                         this.changeIsLogin(1);
                     }
-      });
+                }
+            );
         },
 
         //创建定时器
@@ -615,9 +656,9 @@ export default defineComponent({
         // },
     },
 	mounted() {
-    const data = this.$route.query;
+		const data = this.$route.query
-    if (data?.state == "weiXin") {
+		if(data?.state == 'weiXin'){
-      this.wechatLogin(data);
+			this.wechatLogin(data)
 		}
 	},
 });
@@ -689,15 +730,15 @@ export default defineComponent({
                     }
                 }
             }
-      .generalModel_state {
+			.generalModel_state{
-        > .generalModel_state_item {
+				>.generalModel_state_item{
-          :deep(.ant-select-selector) {
+					:deep(.ant-select-selector){
 						border: 0.1rem solid #dfdfdf;
 						border-radius: 2.5rem;
 						height: 5rem !important;
 						width: 100%;
 						box-sizing: border-box;
-            &:hover {
+						&:hover{
 							border: 0.1rem solid #000;
 						}
 					}
@@ -738,8 +779,8 @@ export default defineComponent({
                     font-size: 1.4rem;
                     box-sizing: border-box;
                     outline: none;
-          transition: all 0.3s;
+					transition: all .3s;
-          &:hover {
+					&:hover{
 						border: 0.1rem solid #000;
 					}
                     &::placeholder {
@@ -792,9 +833,9 @@ export default defineComponent({
                 font-weight: 500;
                 color: #ffffff;
                 cursor: pointer;
-        transition: all 0.3s;
+				transition: all .3s;
-        &:hover {
+				&:hover{
-          background: #3c3c3c;
+					background: #3C3C3C;
 				}
                 &[state="2"] {
                     cursor: not-allowed;
@@ -940,13 +981,13 @@ export default defineComponent({
     .marign_top40 {
         margin-top: 4rem;
     }
-  .thirdPartyLogin {
+	.thirdPartyLogin{
 		display: flex;
 		// justify-content: flex-start;
-    > div {
+		> div{
 			position: relative;
 			margin-right: 1rem;
-      > .mask {
+			> .mask{
 				position: absolute;
 				width: 100%;
 				height: 100%;

src/component/WorksPage/Falls.vue

@@ -1,10 +1,6 @@
 <template>
 	<div class="Falls">
-    <div
+		<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
-      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',
@@ -21,22 +17,20 @@
 						height: item.style.imgHeihgt + 'px',
 					}"
 				/>	
-        <div v-if="item.original == 1" class="falls_item_user_Original">
+				<div v-if="item.original == 1" class="falls_item_user_Original">{{$t('newScaleImage.Original')}}</div>
-          {{ $t("newScaleImage.Original") }}
-        </div>
 			</div>
 			
 			<!-- 文字 -->
 			<div class="falls_item_bottom" v-if="isText">
 				<div class="falls_item_text" :title="item.text">
-          {{ 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>
+							<div :title="item.portfolioName">{{item.portfolioName}}</div>
 							<!-- <span :title="item.portfolioDes">{{item.portfolioDes}}</span> -->
 						</div>
 					</div>
@@ -48,13 +42,9 @@
 							<span>{{item.viewNums}}</span>
 						</div> -->
 						<label @click="portfolioLike(item)">
-              <i
+							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></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>
+							<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;">
@@ -62,7 +52,7 @@
 								<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>
+							<span>{{item.viewNums}}</span>
 						</div>
 					</div>
 				</div>
@@ -72,46 +62,36 @@
 </template>
 
 <script>
-import {
+import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
-  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: {
+	props:{
-    isScroll: {
+		isScroll:{
-      type: Boolean,
+			 type:Boolean,
-      default: true,
+			 default:true,
 		 },
-    isText: {
+		 isText:{
-      type: Boolean,
+			 type:Boolean,
-      default: true,
+			 default:true,
 		 },
-    itemWidth: {
+		 itemWidth:{
-      type: Number,
+			 type:Number,
-      default: 300,
+			 default:300,
+		 }
 	},
-  },
+	setup(){
-  setup() {
+		let list = ref([])
-    let list = ref([]);
+		let wait_list = ref([])
-    let wait_list = ref([]);
+		let width = ref(300)
-    let width = ref(300);
+		let num_x = ref(1)
-    let num_x = ref(1);
+		let gap_x = ref(0)
-    let gap_x = ref(0);
+		let gap_y = ref(0)
-    let gap_y = ref(0);
+		let poss = ref([])
-    let poss = ref([]);
+		let loading = ref(false)
-    let loading = ref(false);
+		let computedHeight = 0
-    let computedHeight = 0;
+		let imgDom = ref()
-    let imgDom = ref();
+		return{
-    return {
 		    list,
 			wait_list,
 			width,
@@ -122,29 +102,29 @@ export default defineComponent({
 			loading,
 			computedHeight,
 			imgDom,
-    };
+		}
 	},
-  directives: {
+	directives:{
-    fadeIn: {
+		fadeIn:{
-      mounted(el, binding) {
+			mounted (el,binding) {
-        let dom;
+				let dom
-        if (binding.value) {
+				if(binding.value){
-          dom = document.querySelector(".works_page .page_content");
+					dom = document.querySelector('.works_page .page_content')
-        } else {
+				}else{
-          dom = document.querySelector(".homeRecommend_content_body");
+					dom = document.querySelector('.homeRecommend_content_body')
 				}
 				gsap.registerPlugin(ScrollTrigger);
 				let tl1 = gsap.timeline();
-        tl1.from(el, 1, { y: "30px", opacity: 0 });
+				tl1.from(el,1, {y:'30px',opacity:0},)
 				ScrollTrigger.create({
 					trigger: el, // 触发器元素
 					start: "top 90%", // 滚动触发器的起始滚动位置
-          end: "100% 80%", // 滚动触发器的结束滚动位置
+					end: '100% 80%',   // 滚动触发器的结束滚动位置
 					// markers: true, // 开启标注功能
 					scrub: true,
-          animation: tl1,
+					animation:tl1,
-          scroller: dom, //设置指定元素为滚动依据
+					scroller:dom,//设置指定元素为滚动依据
-          scrub: 2,
+					scrub:2,
 					// onUpdate:(v)=>{
 					// 	if(v.progress < 0.1){
 					// 		v.trigger?.classList.remove('active')
@@ -154,46 +134,41 @@ export default defineComponent({
 					// 	}
 					// }
 				});
-      },
-    },
-  },
-  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 = [];
+		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() {
+			clearData(){
-      this.wait_list = [];
+				this.wait_list = []
-      this.width = this.itemWidth;
+				this.width = this.itemWidth
-      this.num_x = 1;
+				this.num_x = 1
-      this.gap_x = 0;
+				this.gap_x = 0
-      this.gap_y = 0;
+				this.gap_y = 0
-      this.poss = [];
+				this.poss = []
-      this.loading = false;
+				this.loading = false
-      this.list = [];
+				this.list = []
-      this.resize();
+				this.resize()
-      if (this.imgDom) {
+				if(this.imgDom){
 					this.imgDom.remove();
-        this.imgDom = null;
+					this.imgDom = null
 				}
 			},
 			push(arr) {
@@ -203,11 +178,11 @@ export default defineComponent({
 					this.loadImg();
 				}
 			},
-    deleteItem(id) {
+			deleteItem(id){
 				for (let index = 0; index < this.list.length; index++) {
-        if (this.list[index].id == id) {
+					if(this.list[index].id == id){
-          this.list.splice(index, 1);
+						this.list.splice(index,1)
-          this.resize();
+						this.resize()
 						break;
 					}
 				}
@@ -220,16 +195,16 @@ export default defineComponent({
 				}
 				
 				let url = this.wait_list[0].canvasUrl || this.wait_list[0].url;
-      let data = this.wait_list[0];
+				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.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;
+					if(!this.imgDom) return
 					var idx = 0;
 					var pos_num = this.poss[idx];
 					for (var i = 1; i < this.poss.length; i++) {
@@ -240,21 +215,22 @@ export default defineComponent({
 					}
 					// this.computedHeight = 0
 					let width = this.imgDom.offsetWidth;
-        let height = this.imgDom.offsetHeight + this.computedHeight;
+					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;
+					let imgHeight = height - this.computedHeight
 					this.poss[idx] = top + height;
 					let obj = {
-          canvasUrl: url,
+						canvasUrl:url,
 						style: { width, height, top, left, imgHeight },
-          ...data,
+						...data
 					};
 					this.list.push(obj);
 					this.imgDom.remove();
-        this.imgDom = null;
+					this.imgDom = null
 					this.wait_list.splice(0, 1);
-        this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
+					this.$el.style.height =
+						Math.max(...this.poss) + this.gap_y + "px";
 					if (this.wait_list.length <= 0) {
 						this.loading = false;
 						this.$emit("loadend");
@@ -278,7 +254,8 @@ export default defineComponent({
 					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++) {
@@ -299,26 +276,26 @@ export default defineComponent({
 				}
 				this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
 			},
-    setItemDetail(data) {
+			setItemDetail(data){
-      this.$emit("getImgScale", data);
+				this.$emit('getImgScale',data)
 			},
-    portfolioLike(data) {
+			portfolioLike(data){
-      this.$emit("setPortfolioLike", data);
+				this.$emit('setPortfolioLike',data)
+			}
 		},
-  },
+})
-});
 </script>
 
-<style lang="less" scoped>
+<style lang='less' scoped>
-.Falls {
+	.Falls {
 		width: 100%;
 		height: auto;
 		position: relative;
-  --paddingBottom: 10px;
+		--paddingBottom:10px;
-  --textMarginTop: 10px;
+		--textMarginTop:10px;
-  --textHeight: 25px;
+		--textHeight:25px;
-  --contentHeight: 35px;
+		--contentHeight:35px;
-  .falls_item {
+		.falls_item{
 			position: absolute;
 			transition: all 0.15s;
 			display: flex;
@@ -327,24 +304,24 @@ export default defineComponent({
 			border-radius: 2rem;
 			overflow: hidden;
 			padding-bottom: var(--paddingBottom);
-    &.falls_item:hover {
+			&.falls_item:hover{
-      .falls_item_img {
+				.falls_item_img{
-        img {
+					img{
 						transform: scale(1.1);
 					}
 				}
 			}
-    .falls_item_img {
+			.falls_item_img{
 				cursor: pointer;
 				width: 100%;
 				overflow: hidden;
-      img {
+				img{
 					width: 100%;
 					object-fit: cover;
 					height: 100%;
-        transition: all 0.3s;
+					transition: all .3s;
 				}
-      .falls_item_user_Original {
+				.falls_item_user_Original{
 					font-weight: 600;
 					font-size: 12px;
 					color: #39215b;
@@ -358,9 +335,9 @@ export default defineComponent({
 					left: auto;
 				}
 			}
-    .falls_item_bottom {
+			.falls_item_bottom{
 				padding: 0 10px;
-      .falls_item_text {
+				.falls_item_text{
 					overflow: hidden;
 					text-overflow: ellipsis;
 					white-space: nowrap;
@@ -369,25 +346,25 @@ export default defineComponent({
 					margin-top: var(--textMarginTop);
 					height: var(--textHeight);
 				}
-      .falls_item_content {
+				.falls_item_content{
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
 					color: #525252;
 					height: var(--contentHeight);
-        .falls_item_user {
+					.falls_item_user{
 						width: 50%;
 						display: flex;
 						align-items: center;
 						flex: 1;
 						overflow: hidden;
-          img {
+						img{
 							width: 25px;
 							height: 25px;
 							border-radius: 50%;
 							margin-right: 10px;
 						}
-          .falls_item_user_detail {
+						.falls_item_user_detail{
 							line-height: 1;
 							width: 60%;
 							width: 100%;
@@ -396,20 +373,20 @@ export default defineComponent({
 							flex-direction: column;
 							align-items: flex-start;
 							
-            > div {
+							>div{
 								width: 100%;
 								font-size: 16px;
 								overflow: hidden;
 								text-overflow: ellipsis;
 								white-space: nowrap;
 							}
-            span {
+							span{
 								font-size: 12px;
 								color: #525252;
 							}
 						}
 					}
-        .falls_item_detail {
+					.falls_item_detail{
 						display: flex;
 						// width: 40%;
 						// width: 20%;
@@ -417,29 +394,27 @@ export default defineComponent({
 						// width: 70px;
 						width: auto;
 						justify-content: space-between;
-          > label:nth-child(1) {
+						>label:nth-child(1){
 							margin-right: 2rem;
 						}
-          > label {
+						>label{
 							// cursor: pointer;
 						}
-          > label,
+						>label,>div{
-          > div {
 							display: flex;
 							align-items: center;
-            i {
+							i{
 								// font-size: 1.8rem;
 								font-size: 12px;
 							}
-            svg,
+							svg,i{
-            i {
 								color: #9e9ea7;
 								display: flex;
 								// width: 10px;
 								// height: 10px;
 								margin-right: 5px;
 							}
-            span {
+							span{
 								margin-left: 3px;
 								font-size: 12px;
 							}
@@ -447,6 +422,8 @@ export default defineComponent({
 					}
 				}
 			}
+			
+
+		}
 	}
-}
 </style>

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

@@ -928,8 +928,8 @@ export default defineComponent({
 						right: 1rem;
 						top: 1rem;
 						// opacity: 0;
-						width: 3.5rem;
+						width: 3rem;
-						height: 3.5rem;
+						height: 3rem;
 						transition: all 0.3s ease-in-out;
 					}
 					&.modal_imgItem:nth-child(even) {
@@ -942,10 +942,10 @@ export default defineComponent({
 					}
 					.pin_block{
 						position: absolute;
-						left: 1rem;
+						left: .5rem;
 						top: 1rem;
-						width: 8rem;
+						width: 7rem;
-						height: 3.5rem;
+						height: 3rem;
 						border-radius: 3rem;
 						background: rgba(0,0,0,.7);
 						color: #fff;
@@ -960,8 +960,8 @@ export default defineComponent({
 							padding-left: .2rem;
 						}
 						i{
-							width: 3rem;
+							width: 2.5rem;
-							height: 3rem;
+							height: 2.5rem;
 							border-radius: 50%;
 							display: flex;
 							align-items: center;
@@ -974,7 +974,7 @@ export default defineComponent({
 							}
 						}
 						span{
-							font-size: 1.8rem;
+							font-size: 1.4rem;
 							font-weight: 600;
 						}
 					}

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

@@ -882,8 +882,8 @@ export default defineComponent({
 						right: 1rem;
 						top: 1rem;
 						// opacity: 0;
-						width: 3.5rem;
+						width: 3rem;
-						height: 3.5rem;
+						height: 3rem;
 						transition: all 0.3s ease-in-out;
 					}
 					&.modal_imgItem:nth-child(even) {
@@ -900,10 +900,10 @@ export default defineComponent({
 					}
 					.pin_block{
 						position: absolute;
-						left: 1rem;
+						left: .5rem;
 						top: 1rem;
-						width: 8rem;
+						width: 7rem;
-						height: 3.5rem;
+						height: 3rem;
 						border-radius: 3rem;
 						background: rgba(0,0,0,.7);
 						color: #fff;
@@ -918,8 +918,8 @@ export default defineComponent({
 							padding-left: .2rem;
 						}
 						i{
-							width: 3rem;
+							width: 2.5rem;
-							height: 3rem;
+							height: 2.5rem;
 							border-radius: 50%;
 							display: flex;
 							align-items: center;
@@ -932,7 +932,7 @@ export default defineComponent({
 							}
 						}
 						span{
-							font-size: 1.8rem;
+							font-size: 1.4rem;
 							font-weight: 600;
 						}
 					}

src/component/home/index.vue

@@ -65,6 +65,7 @@ export default defineComponent({
 				}else{
 					data.openType = ''
 					data.dataLoad = false
+					return
 				}
 				// if((query.history || query.id) != (oldQuery.history || oldQuery.id)){
 				// }

src/component/home/newProject/index.vue

@@ -5,14 +5,7 @@
 				<div class="title">How can I help you today?</div>
 				<div class="selectFlow">
 					<div class="select">
-            <div
+						<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
-              class="item"
-              @click="setFlow(item)"
-              :class="{ active: item.title == selectFlow.title }"
-              v-for="item in flowList"
-            >
-              {{ item.title }}
-            </div>
 					</div>
 					<div class="describe">
 						<p v-for="item in selectFlow.describe">{{ item }}</p>
@@ -20,50 +13,24 @@
 				</div>
 				<div class="chatOrSetting">
 					<div class="select">
-            <div
+						<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">Chat</div>
-              class="item"
+						<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">Setting</div>
-              @click="setChatOrSetting('chat')"
-              :class="{ active: chatOrSetting == 'chat' }"
-            >
-              Chat
-            </div>
-            <div
-              class="item"
-              @click="setChatOrSetting('setting')"
-              :class="{ active: chatOrSetting == 'setting' }"
-            >
-              Setting
-            </div>
 					</div>
 				</div>
 				<div class="chatBox" v-show="chatOrSetting == 'chat'">
-          <textarea
+					<textarea ref="textarea" @input="inputText($event)" @keydown.enter.prevent="sendChat" placeholder="Write your message"></textarea>
-            ref="textarea"
-            @input="inputText($event)"
-            @keydown.enter.prevent="sendChat"
-            placeholder="Write your message"
-          ></textarea>
 					<div class="btn">
 						<div class="uploadBox">
 							<div class="filList">
-                <div class="item" v-for="(item, index) in filList">
+								<div class="item" v-for="item,index in filList">
-                  <div>{{ item.name }}</div>
+									<div>{{item.name}}</div>
-                  <span
+									<span class="icon iconfont icon-shanchu" @click="deleteFile(item,index)"></span>
-                    class="icon iconfont icon-shanchu"
-                    @click="deleteFile(item, index)"
-                  ></span>
 								</div>
 							</div>
 							<i class="fi fi-rs-paperclip-vertical">
-                <input type="file" @change="handleFileUpload($event)" />
+								<input type="file" @change="handleFileUpload($event)">
 							</i>
-              <div
+							<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
-                class="enableThinking"
-                :class="{ active: enableThinking }"
-                @click="() => (enableThinking = !enableThinking)"
-              >
-                Deep Thinking
-              </div>
 						</div>
 						<div class="sendBox">
 							<div class="maxNum">{{ chatContent.length }}/10000</div>
@@ -74,19 +41,10 @@
 					</div>
 				</div>
 				<div v-show="chatOrSetting != 'chat'" class="workspaceBox">
-          <workspace
+					<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
-            @setProject="setProject"
-            :httpWorkflowType="selectFlow.value"
-          ></workspace>
 				</div>
 				<div class="hint" v-show="chatOrSetting == 'chat'">
-          <div
+					<div class="item" v-for="item in hintList" @click="addChatContent(item)">{{ item }}</div>
-            class="item"
-            v-for="item in hintList"
-            @click="addChatContent(item)"
-          >
-            {{ item }}
-          </div>
 				</div>
 			</div>
 		</div>
@@ -96,129 +54,103 @@
 	</div>
 </template>
 <script lang="ts">
-import {
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
-  defineComponent,
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  computed,
-  ref,
-  provide,
-  nextTick,
-  createVNode,
-  toRefs,
-  reactive,
-  onMounted,
-} from "vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import { Modal, message, Upload, CascaderProps } from "ant-design-vue";
+import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
-import { useI18n } from "vue-i18n";
+import { useI18n } from 'vue-i18n'
-import { getCookie, clonAllCookie } from "@/tool/cookie";
+import {getCookie,clonAllCookie} from '@/tool/cookie'
-import router from "@/router";
+import router from '@/router';
-import workspace from "./workspace.vue";
+import workspace from './workspace.vue'
 export default defineComponent({
-  components: {
+	components:{
 		workspace,
 	},
-  props: {},
+	props:{
-  emits: ["newProject"],
+	},
-  setup(props, { emit }) {
+	emits:['newProject'],
+	setup(props,{emit}) {
 		const store = useStore();
 		const data = reactive({
-      flowList: [
+			flowList:[
 				{
-          title: "Series Design",
+					title:'Series Design',
-          value: "SERIES_DESIGN",
+					value:'SERIES_DESIGN',
-          describe: [
+					describe:[
-            "Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.",
+						'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
-          ],
+					]
 				},
 				{
-          title: "Single Design",
+					title:'Single Design',
-          value: "SINGLE_DESIGN",
+					value:'SINGLE_DESIGN',
-          describe: [
+					describe:[
-            "Single Design centers on the independent design of a single clothing category, such as a T-shirt, dress, or jacket, without considering coordination with other items. Use the Moodboard, Printboard, Colorboard, and Sketchboard in the Design Assests panel to gather inspiration and focus on crafting a unique piece. Once completed, optimize your design in the Draft and Collection panels with tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to display your individual creation.",
+						'Single Design centers on the independent design of a single clothing category, such as a T-shirt, dress, or jacket, without considering coordination with other items. Use the Moodboard, Printboard, Colorboard, and Sketchboard in the Design Assests panel to gather inspiration and focus on crafting a unique piece. Once completed, optimize your design in the Draft and Collection panels with tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to display your individual creation.',
-          ],
+					]
 				},
 			],	
-      selectFlow: {
+			selectFlow:{
-        title: "Series Design",
+				title:'Series Design',
-        value: "SERIES_DESIGN",
+				value:'SERIES_DESIGN',
-        describe: [
+				describe:[
-          "Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.",
+					'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
-        ],
+				]
 			},
-      chatContent: "",
+			chatContent:'',
-      hintList: [
+			hintList:[
-        "设计一套田园风衣服",
+				'设计一套田园风衣服',
-        "设计一套夏日风衣服",
+				'设计一套夏日风衣服',
-        "设计一套未来风格的衣服",
+				'设计一套未来风格的衣服',
 			],
-      enableThinking: false, //深度思考
+			enableThinking:false,//深度思考
-      uploadFile: null as any,
+			uploadFile:null as any,
-      loadingShow: false,
+			loadingShow:false,
-      text: "",
+			text:'',
-      filList: [] as any,
+			filList:[] as any,
-      textarea: null as any,
+			textarea:null as any,
-      chatOrSetting: "chat",
+			chatOrSetting:'chat',
-    });
+		})
-    const dataDom = reactive({});
+		const dataDom = reactive({
-    const setFlow = (item: any) => {
+		})
-      data.selectFlow = item;
+		const setFlow = (item:any)=>{
-    };
+			data.selectFlow = item
+		}
 		
-    const inputText = (e: any) => {
+		const inputText = (e:any)=>{
-      if (e.target.value.length <= 1000) {
+			if(e.target.value.length <= 1000){
-        data.chatContent = e.target.value;
+				data.chatContent = e.target.value
-      } else {
+			}else{
-        e.target.value = data.chatContent;
+				e.target.value = data.chatContent 
 			}
 			e.target.style.height = `${e.target.scrollHeight}px`;
-    };
-    const addChatContent = (item: any) => {
-      if (data.textarea.value?.length + item.length > 10000) return;
-      data.chatContent += item;
-      data.textarea.value += item;
-    };
-    const sendChat = () => {
-      if (!data.chatContent) return;
-      data.loadingShow = true;
-      let fileList = JSON.parse(JSON.stringify(data.filList));
-      let fileUrl =
-        fileList.filter((item: any) => item.type == "file").length > 0
-          ? fileList.filter((item: any) => item.type == "file")[0].minioPath
-          : "";
-      let imageUrlList =
-        fileList.filter((item: any) => item.type == "image").length > 0
-          ? fileList
-              .filter((item: any) => item.type == "image")
-              .map((item: any) => item.minioPath)
-              .join(",")
-          : "";
-      Https.axiosGet(Https.httpUrls.chatCreateProject, {
-        params: {
-          prompt: data.chatContent,
-          process: data.selectFlow.value,
-          fileUrl: fileUrl,
-          imageUrlList,
-        },
-      })
-        .then((rv) => {
-          if (rv) {
-            data.loadingShow = false;
-            let value = {
-              id: rv,
-              fileList: fileList,
-              chatContent: data.chatContent,
-              enableThinking: data.enableThinking,
-            };
-            emit("newProject", value);
 		}
+		const addChatContent = (item:any)=>{
+			if((data.textarea.value?.length + item.length) > 10000)return
+			data.chatContent += item
+			data.textarea.value += item
+		}
+		const sendChat = ()=>{
+			if(!data.chatContent)return
+			data.loadingShow = true
+			let fileList = JSON.parse(JSON.stringify(data.filList))
+			let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
+			let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
+			Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
+				if(rv){
+					data.loadingShow = false
+					let value = {
+						id:rv,
+						fileList:fileList,
+						chatContent:data.chatContent,
+						enableThinking:data.enableThinking,
+					}
+					emit('newProject',value)
+				}
+			}).catch(()=>{
+				data.loadingShow = false
 			})
-        .catch(() => {
-          data.loadingShow = false;
-        });
 			// let projectId = ''
-      // const eventSource = new EventSource(`${import.meta.env.VITE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
+			// const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
 			// eventSource.onmessage = function(event) {
 			// 	let eventData = JSON.parse(event.data)
 			// 	if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
@@ -236,64 +168,59 @@ export default defineComponent({
 			// 	}
 			// 	data.loadingShow = false
 			// };
-    };
-    const handleFileUpload = (event: any) => {
-      if (event.target.files[0].size > 5 * 1024 * 1024) {
-        // 5MB
-        message.info("The file size cannot exceed 5MB.");
-        return;
 		}
-      let type = event.target.files[0].type.startsWith("image/");
+		const handleFileUpload = (event:any)=>{
-      if (type) {
+			if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
-        if (
+				message.info('The file size cannot exceed 5MB.');
-          data.filList.filter((item: any) => item.type == "image").length >= 5
+				return
-        ) {
-          message.info("You can only upload five pictures.");
-          return;
 			}
-      } else {
+			let type = event.target.files[0].type.startsWith('image/')
-        if (
+			if(type){
-          data.filList.filter((item: any) => item.type == "file").length >= 1
+				if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
-        ) {
+					message.info('You can only upload five pictures.');
-          message.info("You can only upload one file.");
+					return	
-          return;
+				}
+			}else{
+				if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
+					message.info('You can only upload one file.');
+					return	
 				}
 			}
-      data.loadingShow = true;
+			data.loadingShow = true
 			const formData = new FormData();
-      formData.append("file", event.target.files[0]);
+			formData.append('file', event.target.files[0]);
-      let config: any = {
+			let config:any = {
-        headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+				headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  },
-        params: formData,
+				params:formData,
-      };
+			}
-      Https.axiosPost(Https.httpUrls.llmUploadFile, formData, config)
+			Https.axiosPost(Https.httpUrls.llmUploadFile,formData,config)
 			.then((rv: any) => {
 				let obj = {
-            name: event.target.files[0].name,
+					name:event.target.files[0].name,
-            type: type ? "image" : "file",
+					type:type?'image':'file',
-            minioPath: rv[0],
+					minioPath:rv[0],
-            url: rv[1],
+					url:rv[1],
-          };
+				}
-          data.filList.push(obj);
+				data.filList.push(obj)
-          data.loadingShow = false;
+				data.loadingShow = false
+			}
+			).catch(rv=>{
+				data.loadingShow = false
 			})
-        .catch((rv) => {
+		}
-          data.loadingShow = false;
+		const deleteFile = (item:any,index:number)=>{
-        });
+			data.filList.splice(index,1)
-    };
+		}
-    const deleteFile = (item: any, index: number) => {
+		const setChatOrSetting = (str:any)=>{
-      data.filList.splice(index, 1);
+			data.chatOrSetting = str
-    };
+		}
-    const setChatOrSetting = (str: any) => {
+		const setProject = (item:any)=>{
-      data.chatOrSetting = str;
+			router.push(`home?history=${item.id}`)
-    };
+		}
-    const setProject = (item: any) => {
+		onMounted(()=>{
-      router.push(`home?history=${item.id}`);
+			store.commit('createProbject')
-    };
+		})
-    onMounted(() => {
+		return{
-      store.commit("createProbject");
-    });
-    return {
 			...toRefs(dataDom),
 			...toRefs(data),
 			setFlow,
@@ -304,80 +231,81 @@ export default defineComponent({
 			deleteFile,
 			setChatOrSetting,
 			setProject,
-    };
+		}
 	},
 	provide() {
-    return {};
+		return {
+		}
 	},
-});
+})
 </script>
 <style lang="less" scoped>
-.newProject {
+	.newProject{
 		width: 100%;
 		height: 100%;
 		position: relative;
-  > .contentBox {
+		> .contentBox{
 			width: 100%;
 			height: calc(100% - 3.9rem);
 			// height: calc(100% - 7.8rem);
 			display: flex;
 			align-items: center;
 			justify-content: center;
-    > .content {
+			> .content{
 				// background: red;
 				width: 88rem;
 				height: 100%;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
-      > .title {
+				> .title{
 					font-size: 2rem;
 					font-weight: 600;
 					text-align: center;
 				}
-      > .workspaceBox {
+				> .workspaceBox{
 					flex: 1;
 					border-radius: 2.4rem;
 					padding: 1.2rem;
 					border: 1px solid #0000001a;
-        :deep(.workspace) {
+					:deep(.workspace){
 						padding: 0;
 						height: auto;
 					}
 				}
-      > .selectFlow {
+				> .selectFlow{
 					margin-top: 4.8rem;
 					width: 100%;
 					border-radius: 2.4rem;
 					border: 1px solid #0000001a;
 					padding: 1.2rem;
-        > .select {
+					> .select{
 						border: 1px solid #0000001a;
 						border-radius: 2.4rem;
 						display: flex;
-          padding: 0.2rem;
+						padding: .2rem;
 						border-radius: 2rem;
-          > div {
+						> div{
 							white-space: nowrap;
 							justify-content: space-between;
 							border-radius: 2.2rem;
 							font-size: 1.6rem;
-            padding: 0.6rem 0.8rem;
+							padding: .6rem .8rem;
 							min-width: 25%;
 							text-align: center;
 							font-weight: 600;
 							color: #71717a;
 							cursor: pointer;
-            &.active {
+							&.active{
 								background: #efeff1;
 								color: #3f3f46;
 							}
 						}
 					}
-        > .describe {
+					> .describe{
 						margin-top: 1.6rem;
-          margin-left: 0.8rem;
+						margin-left: .8rem;
-          > p {
+						> p{
 							margin: 0;
 							color: #71717a;
 							font-weight: 400;
@@ -385,40 +313,40 @@ export default defineComponent({
 						}
 					}
 				}
-      > .chatOrSetting {
+				> .chatOrSetting{
 					margin-top: 2.4rem;
 					width: min-content;
 					margin-left: auto;
-        > .select {
+					> .select{
 						border: 1px solid #0000001a;
 						border-radius: 2.4rem;
 						display: flex;
-          padding: 0.2rem;
+						padding: .2rem;
 						border-radius: 2rem;
-          > div {
+						> div{
 							white-space: nowrap;
 							justify-content: space-between;
 							border-radius: 2.2rem;
 							font-size: 1.6rem;
-            padding: 0.6rem 0.8rem;
+							padding: .6rem .8rem;
 							min-width: 10rem;
 							text-align: center;
 							font-weight: 600;
 							color: #71717a;
 							cursor: pointer;
-            &.active {
+							&.active{
 								background: #efeff1;
 								color: #3f3f46;
 							}
 						}
 					}
 				}
-      > .chatBox {
+				> .chatBox{
-        margin-top: 0.4rem;
+					margin-top: .4rem;
 					border-radius: 2.4rem;
 					position: relative;
 					background: #f5f5f5;
-        > textarea {
+					> textarea{
 						padding: 1.6rem 2rem 0;
 						background: #f5f5f5;
 						width: 100%;
@@ -431,56 +359,57 @@ export default defineComponent({
 						border: none;
 						overflow-y: hidden;
 					}
-        > .btn {
+					> .btn{
 						padding: 0 1.2rem 1.2rem;
 						display: flex;
 						justify-content: space-between;
-          > .uploadBox {
+						> .uploadBox{
 							display: flex;
 							align-items: center;
-            > .filList {
+							> .filList{
 								display: flex;
-              > .item {
+								> .item{
 									height: 3rem;
-                padding: 0.5rem 1rem;
+									padding: .5rem 1rem;
 									background: #efeff1;
-                border-radius: 0.5rem;
+									border-radius: .5rem;
 									margin-right: 1rem;
 									font-size: 1.4rem;
 									line-height: 2rem;
 									display: flex;
-                > div {
+									> div{
 										white-space: nowrap;
 										overflow: hidden;
 										max-width: 10rem;
 										text-overflow: ellipsis;
 									}
-                > span {
+									> span{
 										cursor: pointer;
 									}
 								}
 							}
-            > .enableThinking {
+							> .enableThinking{
 								width: 10rem;
-              padding: 0.2rem 0.4rem;
+								padding: .2rem .4rem;
 								margin-left: 1rem;
 								text-align: center;
 								font-size: 1.4rem;
 								border: 1px solid #000;
-              border-radius: 0.4rem;
+								border-radius: .4rem;
 								cursor: pointer;
-              &.active {
+								&.active{
 									background: #000;
 									color: #fff;
+
 								}
 							}
 						}
-          i {
+						i{
 							font-size: 2rem;
 							display: flex;
 							cursor: pointer;
 							position: relative;
-            > input {
+							> input{
 								width: 100%;
 								height: 100%;
 								position: absolute;
@@ -493,22 +422,22 @@ export default defineComponent({
 								}
 							}
 						}
-          > .sendBox {
+						> .sendBox{
 							display: flex;
 							align-items: center;
 							
-            > .maxNum {
+							> .maxNum{
 								font-size: 1.2rem;
-              margin-right: 0.8rem;
+								margin-right: .8rem;
 								font-weight: 400;
 							}
 						}
 					}
 				}
-      > .hint {
+				> .hint{
 					display: flex;
 					margin-top: 2.4rem;
-        > div {
+					> div{
 						background: #efeff1;
 						width: 25rem;
 						height: 4.8rem;
@@ -516,15 +445,15 @@ export default defineComponent({
 						border-radius: 1.6rem;
 						cursor: pointer;
 						padding: 1.2rem;
-          &:hover {
+						&:hover{
 							background: #f5f5f5;
 						}
-          :first-child {
+						:first-child{
 							margin-right: 0;
 						}
 					}
 				}
 			}
 		}
-}
+	}
 </style>

src/component/modules/generalMiniCanvas.vue

@@ -1,843 +1,142 @@
 <template>
-    <div class="generalMiniCanvas">
+	<div class="generalCanvas">
-		<div class="addDetails_canvasCenter">
+		<div class="canvasBox" ref="canvasBox">
-			<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
+			<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
-				<div class="generalMiniCanvas_input_item brushwork" v-show="canvasState == 'pencil'">
-					<span >{{ $t('exportModel.Brushwork') }}:</span>
-					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-						style="width: 20rem"
-						@change="brushworkChange"
-						>
-						<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-							<img :src="item.url" alt="">
-						</a-select-option>
-					</a-select>
 		</div>
-				<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation' && canvasState != 'movePosition' && canvasState != 'zoomIn' && canvasState != 'zoomOut' && brushworkValue != 'RibbonBrush' && brushworkValue != 'LongfurBrush')">
+		<div class="mark_loading" v-show="isShowMark">
-					<span>{{ $t('exportModel.Size') }}</span>
+			<a-spin size="large" />
-					<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 		</div>
-				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
-					<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
-					<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
-					<span>{{ $t('exportModel.density') }}</span>
-					<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
-				</div>
-				<div class="generalMiniCanvas_input_item" v-show=" canvasState == 'pencil'">
-					<span>{{ $t('exportModel.Color') }}</span>
-					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-				</div>
-				
-			</div>
-			<div class="exportCanvasBox_center_data">
-				<div class="generalMiniCanvas_btn generalMiniCanvas_item" :class="{spread:spreadState}">
-					<!-- <div @click="setOperation('')" class="generalMiniCanvas_btn_item">
-						<div>新增</div>
-					</div> -->
-					<i class="icon iconfont icon-chehui" @click="canvasGeneral.historyState('')"></i>
-					<i class="icon iconfont icon-fanchehui" @click="canvasGeneral.historyState('reverse')"></i>
-					<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasState == 'movePosition'}"></i>
-					<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
-					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
-					<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
-					<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
-					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
-					<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasState == 'zoomIn'}"></i>
-					<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasState == 'zoomOut'}"></i>
-				</div>
-				
-				<div class="exportCanvasBox_center_box">
-					<div class="exportCanvasBox_center">
-						
-					</div>
-					<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
-					<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
-					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
-				</div>
-			</div>
-			
-		</div>
-		<div class="exportCanvasBox_submit" @click="setSubmit(false)">
-			<div class="started_btn">
-				{{ $t('addDetails.submit') }}
-			</div>
-		</div>
-		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
+import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
+} from "vue";
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
+import {message} from 'ant-design-vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
+import canvasGeneral from "@/tool/canvasGeneralCopy";
-import { getMousePosition } from "@/tool/mdEvent";
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
-import liquefaction from "@/component/modules/liquefaction.vue";
+
+
 export default defineComponent({
     components: {
-		creditsDetail,
+		editCanvas,
-		liquefaction
     },
-	emits: ['submitBase64Data'],
+	props:{
-	props: {
+		imgUrl:{
-		imgUrl: {
+			type:String,
-			type: String,
+			default:''
-			default: ''
+		}
 	},
-	},
+	emits:['submitBase64Data'],
-	// watch: {
-	// 	// imgUrl: function(newVal, oldVal) {
-	// 	// 	console.log(newVal);
-	// 	// 	// 当propertyName数据发生变化时，执行相应的操作
-	// 	// }
-	// 	imgUrl(newVal, oldVal) {
-	// 		console.log(`imgUrl changed from ${oldVal} to ${newVal}`);
-	// 	},
-	// },
     setup(props,{emit}) {
-        let presentState = ref('paypal');
+		const { t } = useI18n();
-        let showPayOrder = ref(false);
+		const store = useStore();
-        let loadingShow = ref(false);
+		const isShowMark = ref(false)
-        let { t } = useI18n();
+		const component = reactive({
-        let canvas = reactive({});
-		let scale = 2;
-		let ratio = [1,1]
-		let exportWH = 512
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
 		})
-		let canvasBtn = reactive({
+		const data = reactive({
-			canvasState:'move',
+			canvasLoad:false,
-			canvasPencilWidth:{
+			canvasConfig:{
-				pencil:20,
+
-				eraser:20,
-				routes:30,
-				density:30,
 			},
-			canvasPencilColor:'#000000',
-			spreadState:false,
 		})
-		let canvasWH = ref(0);
+		const dataDom = reactive({
-		let arrows = ref({
+			editCanvas:null,
-			show:false,
+			canvasBox:null,
-			domStyle:{
+		})
-				left:0,
+		const openSetData = ()=>{
-				top:0,
+			data.canvasLoad = true
-				width:0,
-				height:0,
-			},
-			jiantouStyle:{
-				height:'1px',
-				transform:`translateY(-100%) rotate(${90}deg)`,
 		}
-		})
+		const addImage = (value)=>{
-		watch(
+			console.log(value)
-		() => props.imgUrl,  
+			dataDom.editCanvas.addImageToLayer(value.imgUrl)
-		(newValue, oldValue) => {
-			init()
-		})
-		
-		onMounted(()=>{
-			init()
-		})
-		onBeforeUnmount(()=>{
-			canvasGeneral.canvasClear()
-		})
-		let reverseCanvasState = ref([])//存放canvas操作
-		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
-		let isMovePostion = false
-		let init = ()=>{
-			normalCanvasState.value = []
-			reverseCanvasState.value = []
-            showPayOrder.value = true;
-			ratio = [1,1]
-			nextTick(()=>{
-				let canvasBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center");
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('touchmove', touchmove);
-
-				let img = new Image();
-				img.onload = async function(){
-					loadingShow.value = true
-					let height = canvasBox.offsetHeight;
-					canvasWH.value = height
-					// canvasBox.style.width = height+'px'
-					let wScale = 1
-					let hScale = 1
-					if(img.width>img.height){
-						hScale = img.height/img.width
-						exportWH = img.width
-					}else{
-						wScale = img.width/img.height
-						exportWH = img.height
 		}
-					ratio = [wScale,hScale]
+		const addBottomImage = (value)=>{
-					canvas = canvasGeneral.canvasInit(canvasBox,{
+			dataDom.editCanvas.changeFixedImage(value)
-						width:canvasWH.value * wScale,
-						height:canvasWH.value * hScale,
-					})
-					canvas.selection = false;
-					// canvas.set({
-					// 	backgroundColor: 'lightblue'
-					// });
-					scale = img.height/canvas.height
-					pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
-					
-					fabric.Object.prototype.cornerSize = 10
-					fabric.Object.prototype.transparentCorners = false 
-					await fabric.Image.fromURL(props.imgUrl, async function(img) {
-						// 设置背景图对象的宽度和高度与 canvas 相同
-						img.scaleToWidth(canvas.width);
-						img.scaleToHeight(canvas.height);
-						img.set({
-							scaleX: canvas.width / img.width,
-							scaleY: canvas.height / img.height
-						});
-						// 将背景图添加到 canvas 的底层
-						await canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-						if(!fabric.Object.prototype.controls.deleteControl){
-							JSSetRemoveImage(deleteObj)
-						}else{
-							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 		}
-						setPencilWidth()
+		const getData = async ()=>{
-						canvasGeneral.updateCanvasState()
-					},{ crossOrigin: "Anonymous" });
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(isMovePostion)isMovePostion = false
-						// if(canvasBtn.canvasState != 'move')canvasGeneral.updateCanvasState('mouseUp')
-					});
-					canvas.on("mouse:down", event=>setCanvasDown(event));
-					canvas.on('mouse:wheel', opt => {
-						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-						let zoom = canvas.getZoom() // 获取画布当前缩放值
-						zoom *= 0.999 ** delta
-						if (zoom > 20) zoom = 20
-						if (zoom < 0.01) zoom = 0.01
-						canvas.zoomToPoint(
-							{ // 关键点
-							x: opt.e.offsetX,
-							y: opt.e.offsetY
-							},
-							zoom
-						)
-						opt.e.preventDefault()
-						opt.e.stopPropagation()
-						upDataPencilWidth(zoom)
-					})
-					canvas.on("mouse:move", event=>setCanvasMove(event));
 		
-					//画布上移动
+		}
-					document.addEventListener('mousemove', mouseMove);
+		const getCanvasData = ()=>{
-					document.addEventListener('touchmove', touchmove);
+			
-					setOperation('pencil')
+			return canvasExport
-					img.remove()
+		}
+        onMounted(() => {
+			if(props.imgUrl){
+				let img = new Image()
+				img.onload = ()=>{
+					let domHeight = dataDom.canvasBox.offsetHeight
+					let imgHeight = img.height
+					data.canvasConfig.height = domHeight
+					data.canvasConfig.width = imgHeight/domHeight * img.width
+					// canvasWH.value = height
+					// // canvasBox.style.width = height+'px'
+					// let wScale = 1
+					// let hScale = 1
+					// if(img.width>img.height){
+					// 	hScale = img.height/img.width
+					// 	exportWH = img.width
+					// }else{
+					// 	wScale = img.width/img.height
+					// 	exportWH = img.height
+					// }
+					// ratio = [wScale,hScale]
+					// canvas = canvasGeneral.canvasInit(canvasBox,{
+					// 	width:canvasWH.value * wScale,
+					// 	height:canvasWH.value * hScale,
+					// })
+					// canvas.selection = false;
+					// dataDom.editCanvas.addImageToLayer(img)
+					data.canvasLoad = true
 				}
 				img.src = props.imgUrl
-				
-			})
-        }
-		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
-			canvasGeneral.canvasClear()
-		}
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setDomMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setDomMove(e)
-		}
-		let setDomMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setCanvasMove = (event) =>{
-			if(canvasBtn.canvasState == 'movePosition' && isMovePostion)setCanvasPosition(event)
-		}
-		let lastPosX = 0
-		let lastPosY = 0
-		let setCanvasDown = (event)=>{
-			if(canvasBtn.canvasState == 'movePosition'){
-				isMovePostion = true;
-				lastPosX = event.pointer.x;
-				lastPosY = event.pointer.y;
-				return
-			}
-			if(canvasBtn.canvasState == 'zoomIn' || canvasBtn.canvasState == 'zoomOut'){
-				setCanvasZoom(event)
-				return
-			}
-		}
-		let setCanvasPosition = (event)=>{
-			const e = event;
-            const vpt = canvas.viewportTransform;
-
-            vpt[4] += e.pointer.x - lastPosX; // 更新水平偏移
-            vpt[5] += e.pointer.y - lastPosY; // 更新垂直偏移
-
-            canvas.requestRenderAll(); // 请求重绘画布
-            lastPosX = e.pointer.x;
-            lastPosY = e.pointer.y;
-		}
-		let setCanvasZoom = (opt)=>{
-			let zoom = canvas.getZoom() // 获取画布当前缩放值
-			let num = -100
-			if(canvasBtn.canvasState == 'zoomOut') num = 100
-			zoom *= 0.999 ** num
-			if (zoom > 20) zoom = 20
-			if (zoom < 0.01) zoom = 0.01
-			// console.log(zoom);
-			canvas.zoomToPoint(
-				{ // 关键点
-				x: opt.pointer.x,
-				y: opt.pointer.y
-				},
-				zoom
-			)
-			opt.e.preventDefault()
-			opt.e.stopPropagation()
-			upDataPencilWidth(zoom)
-		}
-		let setOperation = (str)=>{
-			canvasBtn.canvasState = str
-			let canvasCenterBox = document.querySelector(".generalMiniCanvas .exportCanvasBox_center_box");
-			let classList = canvasCenterBox.className.split(' ');
-			canvasCenterBox.className = 'exportCanvasBox_center_box'
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-				canvasCenterBox.className = 'exportCanvasBox_center_box'
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'liquidation'){
-				canvas.isDrawingMode = false
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorNone'
-			}else if(str == 'zoomIn' || str == 'zoomOut'){
-				pencilbtnStyle.value.display = `none`
-				canvas.isDrawingMode = false
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvasCenterBox.className = 'exportCanvasBox_center_box'
-			}else if(str == 'movePosition'){
-				canvas.isDrawingMode = false
-				pencilbtnStyle.value.display = `none`
-				canvas.forEachObject((obj) =>obj.selectable = false);
-				canvasCenterBox.className = 'exportCanvasBox_center_box cursorMove'
-			}
-		}
-		let brushworkValue = ref('PencilBrush')
-		let brushworkChange = (value)=>{
-			brushworkValue.value = value
-			setPencil()
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let brushList = ref([
-			{
-				value:'PencilBrush',
-				url:'/image/brush/PencilBrush.jpg'
-			},{
-				value:'Marking',
-				url:'/image/brush/PencilBrush-2.jpg'
-			},{
-				value:'InkBrush',
-				url:'/image/brush/InkBrush.jpg'
-			},{
-				value:'CrayonBrush',
-				url:'/image/brush/CrayonBrush.jpg'
-			},{
-				value:'RibbonBrush',
-				url:'/image/brush/RibbonBrush.jpg'
-			},{
-				value:'MarkerBrush',
-				url:'/image/brush/MarkerBrush.jpg'
-			},{
-				value:'WritingBrush',
-				url:'/image/brush/WritingBrush.jpg'
-			},{
-				value:'LongfurBrush',
-				url:'/image/brush/LongfurBrush.jpg'
-			},{
-				value:'SpraypaintBrush',
-				url:'/image/brush/SpraypaintBrush.jpg'
-			},
-		])
-		let setPencil = ()=>{
-			let pencil
-			canvas.isDrawingMode = true//开启绘画模式
-			if(brushworkValue.value == 'PencilBrush'){
-				pencil = new fabric.PencilBrush(canvas,{}); //普通笔
-			}else if(brushworkValue.value == 'Marking'){
-				pencil = new fabric.PencilBrush(canvas,); //记号笔
-			}else if(brushworkValue.value == 'InkBrush'){
-				pencil = new fabric.InkBrush(canvas,{}); //油画笔
-			}else if(brushworkValue.value=='CrayonBrush'){
-				pencil = new fabric.CrayonBrush(canvas,{}); //蜡笔
-			}else if(brushworkValue.value == 'RibbonBrush'){
-				pencil = new fabric.RibbonBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'MarkerBrush'){
-				pencil = new fabric.MarkerBrush(canvas,{}); //书写笔
-				// pencil = new fabric.PenBrush(canvas,{}); //书写笔
-			}else if(brushworkValue.value == 'WritingBrush'){
-				pencil = new fabric.WritingBrush(canvas,{}); //毛笔
-			}else if(brushworkValue.value == 'LongfurBrush'){
-				pencil = new fabric.LongfurBrush(canvas,{width: 1,}); //色带
-			}else if(brushworkValue.value == 'SpraypaintBrush'){
-				pencil = new fabric.SpraypaintBrush(canvas,{}); //长毛刷
-			}
-			
-            canvas.freeDrawingBrush = pencil
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-
-			pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
-			canvas.freeDrawingBrush.isEraser = false
-			setPencilWidth()
-			pencilColor()
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let upDataPencilWidth = (zoom)=>{
-			if(canvasBtn.canvasPencilWidth[canvasBtn?.canvasState]){
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom;
-			}
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOut = {
-		    pencilWidth:null,
-			color:null,
-		}
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.pencilWidth)
-			setTimeOut.pencilWidth = setTimeout(()=>{
-				let zoom = canvas.getZoom() // 获取画布当前缩放值
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]) / zoom
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
-					canvas.freeDrawingBrush.width = 1;
-					pencilbtnStyle.value.height = 1+'px'
-					pencilbtnStyle.value.width = 1+'px'
-				}
-			},300)
-		}
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOut.color)
-			// clearTimeout(setTimeOut.colorHistory)
-			setTimeOut.color = setTimeout(()=>{
-				pencilColor()
-			},200)
-			// setTimeOut.colorHistory = setTimeout(()=>{
-			// 	colorHistoryList.value.push(canvasPencilColor.value)
-			// },1000)
-		}
-		let hexToRgba=(hex, alpha)=> {
-			const r = parseInt(hex.slice(1, 3), 16);
-			const g = parseInt(hex.slice(3, 5), 16);
-			const b = parseInt(hex.slice(5, 7), 16);
-			return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-		}
-		let pencilColor = ()=>{
-			if(canvas.freeDrawingBrush.isEraser){
-				canvas.freeDrawingBrush.color = '#FFFFFF';
 			}else{
-				pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
+				data.canvasLoad = true
-				if(brushworkValue.value == 'Marking'){
-					console.log(canvasBtn.canvasPencilColor);
-					console.log(hexToRgba(canvasBtn.canvasPencilColor,.5));
-					canvas.freeDrawingBrush.color = hexToRgba(canvasBtn.canvasPencilColor,.5)
-				}else{
-					canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
 			}
-			}
-		}
-		let routesChange = (str)=>{
-			canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
-			if (canvasBtn.canvasPencilWidth[str] < 10) {
-				canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
-			} else if (canvasBtn.canvasPencilWidth[str] > 100) {
-				canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
-			}
-		}
-		let setSubmit = (liquefation)=>{
-			return new Promise((resolve,reject)=>{
-				var allObjects = canvas.getObjects();
-				// return
-				// if(allObjects.length == 0){
-				// 	return message.info(t('addDetails.jsContent1'))
-				// }
-				var canvasDom = document.createElement("canvas");
-				let exportCanvas = new fabric.Canvas(canvasDom, {
-					backgroundColor: "#FFFFFF",
-					width: exportWH * ratio[0],
-					height: exportWH * ratio[1],
-					isDrawingMode: false, // 开启绘图模式
 		});
-				canvas.backgroundImage.clone(async (back)=>{
+		onBeforeUnmount(()=>{
-					back.set({
+			data.canvasLoad = false
-						scaleX:1,
+			// canvasGeneral.canvasClear()
-						scaleY:1,
-						left:back.left*scale,
-						top:back.top*scale ,
 		})
-					exportCanvas.backgroundImage = back
-					await new Promise((resolve, reject) => {
-						if(allObjects.length == 0)resolve('')
-						allObjects.forEach((item,index)=>{
-							// let obj = fabric.util.object.clone(item);
-							if(item.type == 'circle')return
-							let obj 
-							item.clone((cloned)=>{
-								console.log(cloned);
-								obj = cloned
-								console.log(obj.set);
-								if(obj.set){
-									obj.set(
-										{
-											scaleX:(item.scaleX?item.scaleX:1)*scale,
-											scaleY:(item.scaleY?item.scaleY:1)*scale,
-											left:item.left*scale,
-											top:item.top*scale,
-										}
-									)
-								}
-								// else{
-								// 	console.log(item.width,scale);
-									
-								// 	obj.width = (item.width?item.width:1)*scale
-								// 	obj.height = (item.height?item.height:1)*scale
-								// 	obj.left = item.left*scale
-								// 	obj.top = item.top*scale
-
-								// }
-								exportCanvas.add(obj)
-								if(index == allObjects.length - 1){
-									resolve('')
-								}
-							})
-							
-						})
-					})
-					let position = JSON.parse(JSON.stringify(canvas.viewportTransform))
-					position[4] *= scale
-					position[5] *= scale
-					//设置画布当前那位置和缩放
-					// exportCanvas.viewportTransform = position
-					let data = exportCanvas.toDataURL("image/png");
-					if(liquefation){
-						return resolve(data)
-					}
-					cancelDsign()
-					clearCanvas()
-					emit('submitBase64Data',data)
-					resolve('')
-				})
-			})
-			
-		}
-		let cancelDsign = ()=>{
-			showPayOrder.value = false
-		}
-		let liquefactionData = ref(null)
-		let liquefaction = ref(null)
-		let submitLiquefaction = (rv)=>{
-			// const originalWidth = liquefactionData.value.width // 保存原始宽度
-			// const originalHeight = liquefactionData.value.height; // 保存原始高度
-			canvas.viewportTransform = [1,0,0,1,0,0]
-			fabric.Image.fromURL(rv, function(img) {
-				// 设置背景图对象的宽度和高度与 canvas 相同
-				img.scaleToWidth(canvas.width);
-				img.scaleToHeight(canvas.height);
-				img.set({
-					scaleX: canvas.width / img.width,
-					scaleY: canvas.height / img.height
-				});
-				// 将背景图添加到 canvas 的底层
-				canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-				if(!fabric.Object.prototype.controls.deleteControl){
-					JSSetRemoveImage(deleteObj)
-				}else{
-					fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-				}
-				setPencilWidth()
-				canvasGeneral.updateCanvasState()
-			},{ crossOrigin: "Anonymous" });
-		}
-		let setLiquefaction =async ()=>{
-			// const activeObjects = canvas.backgroundImage // 获取选中的对象
-			// console.log(setSubmit(true));
-			let activeObjects = await setSubmit(true)
-			if (activeObjects) {
-				liquefactionData.value = activeObjects
-				liquefaction.value.init(activeObjects)
-			} else {
-				// message.info(useI18.t('exportModel.jsContent6'))
-				return null;
-			}
-		}
         return {
-            presentState,
+			...toRefs(data),
-            showPayOrder,
+			...toRefs(dataDom),
-			loadingShow,
+			isShowMark,
-            t,
+			addImage,
-			pencilbtnStyle,
+			getData,
-			...toRefs(canvasBtn),
+			getCanvasData,
-			arrows,
-
-			liquefactionData,
-			liquefaction,
-			init,
-			setOperation,
-			setPencilWidth,
-			setPencilColor,
-			setSubmit,
-			cancelDsign,
-			submitLiquefaction,
-			setLiquefaction,
-			routesChange,
-			brushList,
-			brushworkValue,
-			brushworkChange,
-			canvasGeneral,
         };
     },
-    data() {
+    data(prop) {
         return {
 		};
+    },
+	computed: {
+	},
+    watch: {
+      
     },
     mounted() {},
+
     methods: {
 		
 	},
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
-
+.generalCanvas{
-.generalMiniCanvas{
-	position: relative;
-	height: 100%;
-	display: flex;
 	width: 100%;
-	// flex-direction: column;
+	height: 100%;
-	margin: 0 auto;
-	flex-direction: row;
-	flex: 1;
-	overflow: hidden;
-	.generalMiniCanvas_item{
-		// position: relative;
-		background: #fff;
-		position: absolute;
-		
-		display: flex;
-		// border: 0.2rem solid #c4c4c4;
-		width: 25rem;
-		border-radius: 4px; /* 设置圆角半径 */
-		flex-wrap: wrap;
-		.generalMiniCanvas_btn_item{
-			display: flex;
-			align-items: center;
-			padding: 1rem 0;
-		}
-	}
-	.generalMiniCanvas_input,.generalMiniCanvas_btn{
-		z-index: 2;
-		padding: 1rem 1.5rem;
 	position: relative;
-		width: auto;
+	display: flex;
-		flex-wrap: nowrap;
 	flex-direction: column;
-	}
-	.generalMiniCanvas_input{
-		flex-direction: row;
-		align-items: center;
-		margin-left: 7rem;
-		height: 6rem;
-		.generalMiniCanvas_input_item{
-			display: flex;
-			margin-right: 3rem;
-			align-items: center;
-			&.brushwork{
-				img{
-					width: 100%;
-					max-height: 100%;
-					object-fit: contain;
-				}
-			}
-			span{
-				margin-right: 1rem;
-			}
-		}
-		.generalMiniCanvas_input_item:last-child{
-			margin-right: 0;
-		}
-	}
-	.generalMiniCanvas_btn{
-		
-			input{
-				// width: 100%;
-				width: 30rem;
-				// margin-top: 1rem;
-				flex: 1;
-			}
-			.icon-xiala{
-				position: absolute;	
-				width: 2rem;
-				bottom: 0;
-				transform: translate(-50%, 90%);
-				left: 50%;
-				width: 6rem;
-				background: #fff;
-				text-align: center;
-				cursor: pointer;
-				&.icon-xiala::before{
-					transition: all .3s;
-				}
-				&.btnRotate::before{
-					transform: rotate(180deg);
-					display: block;
-				}
-			}
-			i{
-				font-size: 2.5rem;
-				cursor: pointer;
-				width: 4rem;
-				height: 4rem;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				&.active{
-					border: 1px solid;
-					border-radius: .4rem;
-				}
-			}
-			&.spread{
-				transform: translate(-50%,0);
-			}
-		}
-	.addDetails_canvasCenter{
-		flex: 1;
 	overflow: hidden;
-		display: flex;
+	padding-top: 4rem;
-		// flex-direction: column;
+	> .canvasBox{
-		// flex-direction: row;
-		position: relative;
-		margin: 0 auto;
-		flex-direction: column;
-	}
-	.exportCanvasBox_center_data{
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
-	.exportCanvasBox_center_box{
-		padding: 3rem;
-		height: 100%;
 		flex: 1;
 		position: relative;
-		overflow: hidden;
-		width: 100%;
-		background: #e6e6e6;
-		cursor: inherit;
-		&.cursorNone:hover{
-			cursor: none;
 	}
-		&.cursorMove:hover{
-			cursor: move;
-			canvas{
-				cursor: move !important;
-			}
-		}
-		.editFrontBack_pencilbtn{
-			position: absolute;
-			z-index: 1;
-			border-radius: 50%;
-			border: 1px solid #000;
-			pointer-events: none;
-			transform: translate(-50%,-50%);
-		}
-	}
-	.exportCanvasBox_center{
-		height: 100%;
-		flex: 1;
-		position: relative;
-		overflow: hidden;
-		background: #e6e6e6;
-		// overflow: scroll;
-		.canvas-container{
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%,-50%);
-		}
-		.editFrontBack_pencilbtn{
-			position: absolute;
-			z-index: 1;
-			border-radius: 50%;
-			border: 1px solid #000;
-			pointer-events: none;
-			transform: translate(-50%,-50%);
-		}
-	}
-	.exportCanvasBox_center:hover{
-		.generalMiniCanvas_btn{
-			// transform: translate(-50%,-101%);
-			// &.spread{
-			// 	transform: translate(-50%,0);
-			// }
-		}
-	}
-}
-.exportCanvasBox_submit{
-	margin-top: auto;
-	margin-left: 1rem;
-	text-align: center;
 }
 </style>

src/main.ts

@@ -21,8 +21,8 @@ import "swiper/css/pagination";
 // import "@/tool/fabric.brushes.js";
 // import "@/tool/fabric.min.js";
 const app = createApp(App);
-flexible();
+flexible()
-
+// alert(window.innerWidth)
 import { getCookie, setCookie } from "@/tool/cookie";
 import loadingGif from "./assets/images/homePage/loading.gif";
 

src/tool/flexible.js

@@ -1,11 +1,16 @@
+import { getUniversalZoomLevel } from "@/tool/util";
+
 let flexible = (designWidth, maxWidth,minWidth) =>{
     var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
     designWidth = designWidth || 1920;
     maxWidth = maxWidth || 2560;
-    minWidth = minWidth || 1024;
+    minWidth = minWidth || 500;
+    // minWidth = minWidth || 1024;
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
         var height = docEl.getBoundingClientRect().height;
+		width = getUniversalZoomLevel() * width
+		height = getUniversalZoomLevel() * height
         maxWidth = maxWidth || 1920;
 		if(width/height>1.98) width = height * 1.98;
         width > maxWidth && (width = maxWidth);

src/tool/util.js

@@ -1,37 +1,36 @@
-import Fingerprint2 from "fingerprintjs2"; //获取浏览器唯一标识
+import Fingerprint2 from 'fingerprintjs2';//获取浏览器唯一标识
 const isEmail = (email) => {
 	// let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,})$/
-  let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+	let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
-  let result = reg.test(email);
+	let result = reg.test(email)
-  return result;
+	return result
-};
+}
 
 const getUploadUrl = () => {
-  let url = import.meta.env.VITE_APP_BASE_URL || "";
+	let url = process.env.VUE_APP_BASE_URL || ''
 	// let url = "http://18.167.251.121:10086"
-  return url;
+	return url
-};
+}
 const getMinioUrl = (url) => {
     const { pathname } = new URL(url);
 	const result = pathname.slice(1);
-  return result;
+	return result
-};
+}
-const rgbaToHex = (rgba) => {
+const rgbaToHex = (rgba)=> { // rgba转16进制
-  // rgba转16进制
+	let hex = '#';
-  let hex = "#";
+	rgba.forEach((i,index) => {
-  rgba.forEach((i, index) => {
+		if(index == 3){
-    if (index == 3) {
+			hex += Math.round(i * 255).toString(16)
-      hex += Math.round(i * 255).toString(16);
+		}else{
-    } else {
+			hex += Number(i).toString(16).padStart(2, '0');
-      hex += Number(i).toString(16).padStart(2, "0");
 		}
 	});
   
 	return hex;
-};
+}
 
-function base64ToFile(urlData, name) {
+function base64ToFile(urlData,name) {
-  let arr = urlData.split(",");
+	let arr = urlData.split(',');
 	let mime = arr[0].match(/:(.*?);/)[1];
 	let bstr = atob(arr[1]);
 	let n = bstr.length;
@@ -40,13 +39,12 @@ function base64ToFile(urlData, name) {
 		u8arr[n] = bstr.charCodeAt(n);
 	}
 	return new File([u8arr], name, {
-    type: mime,
+		type: mime
 	});
 }
 
-function dataURLtoBlob(dataurl) {
+function dataURLtoBlob(dataurl) {//吧data url转为blob对象
-  //吧data url转为blob对象
+	var arr = dataurl.split(',');
-  var arr = dataurl.split(",");
 	var mime = arr[0].match(/:(.*?);/)[1];
 	var bstr = atob(arr[1]);
 	var n = bstr.length;
@@ -57,43 +55,37 @@ function dataURLtoBlob(dataurl) {
 	return new Blob([u8arr], { type: mime });
 }
 
-function blobToFile(blob, fileName) {
+function blobToFile(blob, fileName) {//给blob文件设置名字和日期
-  //给blob文件设置名字和日期
 	blob.lastModifiedDate = new Date();
 	blob.name = fileName;
 	return blob;
 }
 //下载图片
-function downloadIamge(imgsrc, name) {
+function downloadIamge(imgsrc, name) { // 下载图片地址和图片名
-  // 下载图片地址和图片名
+	var image = new Image()
-  var image = new Image();
 	// 解决跨域 Canvas 污染问题
-  image.setAttribute("crossOrigin", "anonymous");
+	image.setAttribute('crossOrigin', 'anonymous')
 	image.onload = function () {
-    var canvas = document.createElement("canvas");
+		var canvas = document.createElement('canvas')
-    canvas.width = image.width;
+		canvas.width = image.width
-    canvas.height = image.height;
+		canvas.height = image.height
-    var context = canvas.getContext("2d");
+		var context = canvas.getContext('2d')
-    context.drawImage(image, 0, 0, image.width, image.height);
+		context.drawImage(image, 0, 0, image.width, image.height)
-    var url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
+		var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
-    var a = document.createElement("a"); // 生成一个a元素
+		var a = document.createElement('a') // 生成一个a元素
-    var event = new MouseEvent("click"); // 创建一个单击事件
+		var event = new MouseEvent('click') // 创建一个单击事件
-    a.download = name || "generate"; // 设置图片名称
+		a.download = name || 'generate' // 设置图片名称
-    a.href = url; // 将生成的URL设置为a.href属性
+		a.href = url // 将生成的URL设置为a.href属性
-    a.target = "_blank";
+		a.target = '_blank'
-    a.dispatchEvent(event); // 触发a的单击事件
+		a.dispatchEvent(event) // 触发a的单击事件
-    image.remove();
+		image.remove()
-  };
+	}
-  image.src = imgsrc;
+	image.src = imgsrc
 }
 
-function dataURLtoFile(dataurl, filename) {
+function dataURLtoFile(dataurl, filename) {//吧url转为文件对象，指定文件名称
-  //吧url转为文件对象，指定文件名称
+	var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
-  var arr = dataurl.split(","),
+		bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-    mime = arr[0].match(/:(.*?);/)[1],
-    bstr = atob(arr[1]),
-    n = bstr.length,
-    u8arr = new Uint8Array(n);
 	while (n--) {
 		u8arr[n] = bstr.charCodeAt(n);
 	}
@@ -101,44 +93,42 @@ function dataURLtoFile(dataurl, filename) {
 	return blobToFile(blob, filename);
 }
 
-const base64toFile = (dataurl, filename = "file") => {
+const base64toFile = (dataurl, filename = 'file') => {//转换base64
-  //转换base64
+	let arr = dataurl.split(',')
-  let arr = dataurl.split(",");
+	let mime = arr[0].match(/:(.*?);/)[1]
-  let mime = arr[0].match(/:(.*?);/)[1];
+	let suffix = mime.split('/')[1]
-  let suffix = mime.split("/")[1];
+	let bstr = atob(arr[1])
-  let bstr = atob(arr[1]);
+	let n = bstr.length
-  let n = bstr.length;
+	let u8arr = new Uint8Array(n)
-  let u8arr = new Uint8Array(n);
 	while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
+		u8arr[n] = bstr.charCodeAt(n)
 	}
 	return new File([u8arr], `${filename}.${suffix}`, {
-    type: mime,
+		type: mime
-  });
+	})
-};
 
-function rgbToHsv([R, G, B]) {
+}
-  //根据rgb获取hsv
+
-  R /= 255;
+function rgbToHsv([R, G, B]) {//根据rgb获取hsv
-  G /= 255;
+	R /= 255
-  B /= 255;
+	G /= 255
-  const max = Math.max(R, G, B);
+	B /= 255
-  const min = Math.min(R, G, B);
+	const max = Math.max(R, G, B)
-  const delta = max - min;
+	const min = Math.min(R, G, B)
-  var H, S, V;
+	const delta = max - min
+	var H, S, V
 	if (delta === 0) {
 		H = 0;
 	} else if (max === R) {
 		H = ((G - B) / delta) % 6;
 	} else if (max === G) {
 		H = (B - R) / delta + 2;
-  } else {
+	} else { // max === B
-    // max === B
 		H = (R - G) / delta + 4;
 	}
 	H = Math.round(H * 60); // 范围为 0-360
 	if (H < 0) {
-    H = 360 + H;
+		H = 360 + H
 	}
 	if (max === 0) {
 		S = 0;
@@ -147,11 +137,10 @@ function rgbToHsv([R, G, B]) {
 	}
 	S = Math.round(S * 100); // 范围为 0-100
 	V = Math.round(max * 100); // 范围为 0-100
-  return [H, S, V];
+	return [H, S, V]
 }
 
-const formatTime = (timestamp, fmt) => {
+const formatTime = (timestamp, fmt) => {//吧时间戳转为YYYY-MM-DD hh:mm:ss格式
-  //吧时间戳转为YYYY-MM-DD hh:mm:ss格式
 	// date = new Date(), fmt = 'MM/dd/yyyy';
 	let date = new Date();
 	date.setTime(timestamp * 1000);
@@ -161,46 +150,38 @@ const formatTime = (timestamp, fmt) => {
 	}
 	// console.log(formatRule)
 	let o = {
-    "M+": date.getMonth() + 1, // 月份
+		'M+': date.getMonth() + 1, // 月份
-    "D+": date.getDate(), // 日
+		'D+': date.getDate(), // 日
-    "h+": date.getHours(), // 小时
+		'h+': date.getHours(), // 小时
-    "m+": date.getMinutes(), // 分
+		'm+': date.getMinutes(), // 分
-    "s+": date.getSeconds(), // 秒
+		's+': date.getSeconds(), // 秒
-    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
+		'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
-    "S+": date.getMilliseconds(), // 毫秒
+		'S+': date.getMilliseconds(), // 毫秒
-    a: date.getHours() > 12 ? "PM" : "AM", // 上午还是下午
+		'a': date.getHours() > 12
+			? 'PM'
+			: 'AM' // 上午还是下午
 	};
 	if (/(Y+)/.test(fmt)) {
-    fmt = fmt.replace(
+		fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
-      RegExp.$1,
-      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
-    );
 	}
-  if (/(a)/.test(fmt) && o["h+"] > 12) {
+	if (/(a)/.test(fmt) && o['h+'] > 12) {
-    o["h+"] = o["h+"] - 12;
+		o['h+'] = o['h+'] - 12
 	}
 	for (let k in o) {
-    if (new RegExp("(" + k + ")").test(fmt)) {
+		if (new RegExp('(' + k + ')').test(fmt)) {
-      fmt = fmt.replace(
+			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1)
-        RegExp.$1,
+				? (o[k])
-        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+				: (('00' + o[k]).substr(('' + o[k]).length)));
-      );
 		}
 	}
 
 	return fmt;
-};
+}
 
-const isMoible = () => {
+const isMoible = () => {//判断是否是移动端
-  //判断是否是移动端
+	let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
-  let is_mobile =
-    navigator.userAgent
-      .toLowerCase()
-      .match(
-        /(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i
-      ) != null;
 	// alert(navigator.userAgent.toLowerCase())
-  var isiPad = navigator.maxTouchPoints && navigator.maxTouchPoints > 1;
+	var isiPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 1);
 	// if (is_mobile) {
 	// 	return true//判断是否在正则内
 	// } else if(window.matchMedia("(pointer:fine)").matches){
@@ -209,13 +190,13 @@ const isMoible = () => {
 	// 	isiPad//判断触摸点
 	// }
 	if (is_mobile) {
-    return true; //判断是否在正则内
+		return true//判断是否在正则内
-  } else {
+	} else{
-    return isiPad; //判断触摸点
+		return isiPad//判断触摸点
 	}
-};
+}
 
-let setPubDate = (date) => {
+let setPubDate = (date)=>{
 	const timestamp = new Date(date);
 	const now = new Date();
 	// 计算时间差（以毫秒为单位）
@@ -244,18 +225,16 @@ let setPubDate = (date) => {
 	} else {
 		return `1 minute ago`;
 	}
-};
+}
 
-function getBrowserInfo() {
+function getBrowserInfo() {//获取是什么浏览器
-  //获取是什么浏览器
 	var agent = navigator.userAgent.toLowerCase();
 	var userAgent = navigator.userAgent; 
 	var regStr_ie = /msie [\d.]+;/gi;
-  var regStr_ff = /firefox\/[\d.]+/gi;
+	var regStr_ff = /firefox\/[\d.]+/gi
 	var regStr_chrome = /chrome\/[\d.]+/gi;
 	var regStr_saf = /safari\/[\d.]+/gi;
-  var isIE =
+	var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 
-    userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
 	var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
 	//IE
 	if (agent.indexOf("msie") > 0) {
@@ -274,11 +253,13 @@ function getBrowserInfo() {
 		return agent.match(regStr_saf);
 	}
 }
-async function murmur() {
+async function murmur(){//生成唯一标识 ，暂时没有使用
-  //生成唯一标识 ，暂时没有使用
+	return await new Promise((resolve,reject)=>{
-  return await new Promise((resolve, reject) => {
 		Fingerprint2.get(function (components) {
-      const values = components.map(function (component, index) {
+			const values = components.map(function (
+				component,
+				index
+			) {
 				if (index === 0) {
 					//把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样
 					return component.value.replace(/\bNetType\/\w+\b/, "");
@@ -287,9 +268,9 @@ async function murmur() {
 			});
 			// 生成最终id murmur
 			let murmur = Fingerprint2.x64hash128(values.join(""), 31);
-      resolve(murmur);
+			resolve(murmur)
-    });
 		});
+	})
 }
 /**
  * @description: 计算canvas渐变起始坐标
@@ -298,7 +279,7 @@ async function murmur() {
  * @param {number} angle 角度
  * @return {*}
  */
-function calculateGradientCoordinate(width, height, angle) {
+function calculateGradientCoordinate(width,height,angle) {
 	if (angle >= 360) angle = angle - 360;
 	if (angle < 0) angle = angle + 360;
 	angle = Math.round(angle);
@@ -343,7 +324,7 @@ function calculateGradientCoordinate(width, height, angle) {
 	const alpha = Math.round(
 	  (Math.asin(width / Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))) *
 		180) /
-      Math.PI
+		Math.PI,
 	);
   
 	// 当渐变轴分别于矩形的两条对角线重合情况下的四种结果
@@ -442,64 +423,61 @@ function calculateGradientCoordinate(width, height, angle) {
 	y0 = Math.round(height / 2 - y0);
 	x1 = Math.round(x1 + width / 2);
 	y1 = Math.round(height / 2 - y1);
-  return { x0, y0, x1, y1 };
+	return  {x0, y0, x1, y1};
-}
+  }
   
-const setGradual = (colorObj, colorWidth, colorHeight) => {
+const setGradual = (colorObj,colorWidth,colorHeight)=>{
 	return new Promise((resolve, reject) => {
-    let width = colorWidth || 320;
+		let width = colorWidth || 320
-    let height = colorHeight || 700;
+		let height = colorHeight || 700
 		const canvas = document.createElement("canvas");
 		const ctx = canvas.getContext("2d");
 		canvas.width = width;
 		canvas.height = height;
-    let { x0, y0, x1, y1 } = calculateGradientCoordinate(
+		let {x0, y0, x1, y1} = calculateGradientCoordinate(width,height,colorObj.angle)
-      width,
-      height,
-      colorObj.angle
-    );
 		const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
-    colorObj.gradientList.forEach((item) => {
+		colorObj.gradientList.forEach(item => {
-      let left = item.left.split("%")[0] / 100;
+			let left = item.left.split('%')[0]/100
-      let rgba = `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`;
+			let rgba = `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`
 			gradient.addColorStop(left, rgba); // 起始颜色
 		});
 		ctx.fillStyle = gradient;
 		ctx.fillRect(0, 0, width, height);
 		// let dataURL = canvas.toDataURL('image/jpg');
-    resolve(canvas.toDataURL("image/jpg"));
+		resolve(canvas.toDataURL('image/jpg'))
-  });
+	})
-};
+}
-function segmentImage(markerImage, fullImage, size) {
+function segmentImage(markerImage,fullImage,size){
 	return new Promise((resolve, reject) => {
-    const markerCanvas = document.createElement("canvas");
+		const markerCanvas = document.createElement('canvas');
-    const fullCanvas = document.createElement("canvas");
+		const fullCanvas = document.createElement('canvas');
-    const nullCanvas = document.createElement("canvas");
+		const nullCanvas = document.createElement('canvas');
-    const ctx1 = markerCanvas.getContext("2d");
+		const ctx1 = markerCanvas.getContext('2d');
-    const ctx2 = fullCanvas.getContext("2d");
+		const ctx2 = fullCanvas.getContext('2d');
-    const ctx3 = nullCanvas.getContext("2d");
+		const ctx3 = nullCanvas.getContext('2d');
-    markerCanvas.width = size.width;
+		markerCanvas.width=size.width
-    markerCanvas.height = size.height;
+		markerCanvas.height=size.height
-    fullCanvas.height = size.height;
+		fullCanvas.height=size.height
-    fullCanvas.width = size.width;
+		fullCanvas.width=size.width
-    nullCanvas.height = size.height;
+		nullCanvas.height=size.height
-    nullCanvas.width = size.width;
+		nullCanvas.width=size.width
-    let targetFrontUrl = "";
+		let targetFrontUrl = ''
-    let targetBackUrl = "";
+		let targetBackUrl = ''
 		const marker = new Image();
 		const full = new Image();
-    marker.crossOrigin = "anonymous";
+		marker.crossOrigin = 'anonymous';
-    full.crossOrigin = "anonymous";
+		full.crossOrigin = 'anonymous';
 		marker.onload = () => {
-      ctx1.drawImage(marker, 0, 0, size.width, size.height);
+			ctx1.drawImage(marker,0,0 ,size.width, size.height);
 			full.onload = () => {
-        ctx2.drawImage(full, 0, 0, size.width, size.height);
+				ctx2.drawImage(full,0,0, size.width, size.height);
 				segmentImageItem();
 			};
 			full.src = fullImage;
 		};
 		marker.src = markerImage; 
 		function segmentImageItem() {
+				
 			const markerData = ctx1.getImageData(0, 0, size.width, size.height);
 			const fullData = ctx2.getImageData(0, 0, size.width, size.height);
 
@@ -513,7 +491,8 @@ function segmentImage(markerImage, fullImage, size) {
 			// 	(Math.abs(b - color.b) < threshold) || (Math.abs(0 - color.b) < threshold)
 
 			const isColorMatch = (r, g, b, color) => 
-        (color.r >= color.g && r >= g) || (color.r < color.g && r < g);
+				((color.r >= color.g) && r >= g) ||
+				((color.r < color.g) && r < g)
 
 				// (Math.abs(b - color.b) < threshold || Math.abs(0 - color.b) < threshold)
 
@@ -524,8 +503,8 @@ function segmentImage(markerImage, fullImage, size) {
 				const g = markerData.data[i + 1];
 				const b = markerData.data[i + 2];
 				let a = markerData.data[i + 3];
-        a > 1 ? (a = 255) : 0;
+				a>1?a = 255:0
-        if (r >= g && a > 1) {
+				if (r>=g && a>1) {
 					// 将完整图像中对应的像素复制到第一个输出图像
 					output1.data[i] = fullData.data[i];
 					output1.data[i + 1] = fullData.data[i + 1];
@@ -540,7 +519,7 @@ function segmentImage(markerImage, fullImage, size) {
 					output2.data[i + 1] = 0;
 					output2.data[i + 2] = 0;
 					output2.data[i + 3] = 0;
-        } else if (r < g && a > 1) {
+				} else if (r<g && a>1) {
 					// 将完整图像中对应的像素复制到第二个输出图像
 					output2.data[i] = fullData.data[i];
 					output2.data[i + 1] = fullData.data[i + 1];
@@ -569,23 +548,23 @@ function segmentImage(markerImage, fullImage, size) {
 				}
 			}
 			const createImageURL = (imageData) => {
-        const canvas = document.createElement("canvas");
+				const canvas = document.createElement('canvas');
 				canvas.width = size.width;
 				canvas.height = size.height;
-        const ctx = canvas.getContext("2d");
+				const ctx = canvas.getContext('2d');
 				ctx.putImageData(imageData, 0, 0);
-        let data = canvas.toDataURL("image/png");
+				let data = canvas.toDataURL('image/png')
-        canvas.remove();
+				canvas.remove()
 				return data;
 			};
-      targetBackUrl = createImageURL(output2);
+			targetBackUrl =createImageURL(output2)
-      targetFrontUrl = createImageURL(output1);
+			targetFrontUrl =createImageURL(output1)
-      resolve({ targetFrontUrl, targetBackUrl });
+			resolve({targetFrontUrl, targetBackUrl})
-      markerCanvas.remove();
+			markerCanvas.remove()
-      fullCanvas.remove();
+			fullCanvas.remove()
-      nullCanvas.remove();
+			nullCanvas.remove()
 		}
-  });
+	})
 }
 export {
 	isEmail,
@@ -607,4 +586,4 @@ export {
 	setGradual,
 	calculateGradientCoordinate,
 	segmentImage,
-};
+}

src/views/HomeMain.vue

@@ -35,7 +35,7 @@
 								<div v-for="historyTypeItem in historyData.updateTimeType" :key="historyTypeItem">
 									<div class="timeType" v-if="historyTypeItem == 'Todaylist' && item.Todaylist.length>0">Today</div>
 									<div class="timeType" v-if="historyTypeItem == 'Yesterdaylist' && item.Yesterdaylist.length>0">Yesterday</div>
-									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a wseek</div>
+									<div class="timeType" v-if="historyTypeItem == 'WithinAWeeklist' && item.WithinAWeeklist.length>0">Within a week</div>
 									<div class="timeType" v-if="historyTypeItem == 'EarlierTodaylist' && item.EarlierTodaylist.length>0">Earlier</div>
 									<div v-for="childItem,index in item[historyTypeItem]" class="detailItem history" @click="setHistory(item,childItem)" :class="{active:openTypeChild == childItem.id}">
 										<div class="text" style="width: 100%;">
@@ -844,13 +844,13 @@ export default defineComponent({
             };
 			await Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 				// WriteCookie("token");
+				clonAllCookie()
 			});
 			this.$router.replace("/");
 			this.store.commit('createDetail')
 			this.store.commit('createProbject')
 
 			// WriteCookie("token");
-			clonAllCookie()
 			// window.location.reload()
             
         },
@@ -983,6 +983,11 @@ export default defineComponent({
 				border-radius: 2rem;
 				&.history{
 					flex: 1;
+					> .detailBox{
+						>.detail{
+							min-height: 10rem;
+						}
+					}
 				}
 				> .titleBox{
 					padding: 1.2rem;
@@ -1027,7 +1032,6 @@ export default defineComponent({
 					> .detail{
 						position: relative;
 						height: 100%;
-						min-height: 10rem;
 						> img{
 							width: 100%;
 						}
@@ -1421,7 +1425,7 @@ export default defineComponent({
 						height: 6rem;
 						width: 6rem;
 						position: relative;
-						transform-origin: top;
+						// transform-origin: top;
 						overflow: hidden;
 						z-index: 2;
 						left: 0;
@@ -1429,9 +1433,10 @@ export default defineComponent({
 						cursor: pointer;
 						background: #fff;
 						img{
+							background: #000;
 							width: 100%;
 							height: 100%;
-							object-fit: contain;
+							object-fit: cover;
 						}
 						// transition: all .3s;
 					}

src/views/HomeView/Events.vue

@@ -123,7 +123,7 @@ export default defineComponent({
 		let {t} = useI18n()
 		let openEventsDetail = (item:any)=>{
 			let path = router.currentRoute._value.path.split('/')[1]
-			router.push(`/${path}/eventsDetail?id=${item.id}`)
+			router.push(`/${path}/eventsDetail?eventId=${item.id}`)
 			// router.push(`${path}?id=${item.id}`)
 		}
 		onMounted (()=>{
@@ -244,7 +244,7 @@ export default defineComponent({
 			display: flex;
 			flex-wrap: wrap;
 			.page_content_item{
-				max-width: 25%;
+				width: 25%;
 				padding: 2rem;
 				@media (max-width: 768px) {
 					max-width: 100%;
@@ -265,6 +265,7 @@ export default defineComponent({
 					color: #5f5f5f;
 				}
 				.page_content_item_title{
+					font-size: 1.6rem;
 					text-overflow: ellipsis; /* 显示省略号 */
 					overflow: hidden; /* 溢出隐藏 */
 					display: -webkit-box;

src/views/HomeView/Works.vue

@@ -10,7 +10,7 @@
 			<div v-show="!isScroll" class="modal_title_text_assistant gallery_btn white" :class="{active:'NewYear_2025' == worksSelect}" @click="setWorksSelect({value:'NewYear_2025'})">NewYear_2025</div>
 		</div> -->
         <div class="page_content" ref="autoscrollDom">
-			<Falls ref="fall" @loadend="isShowMark = false" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
+			<Falls ref="fall" @loadend="isShowMark = false" :itemWidth="failWidth" @setPortfolioLike="setPortfolioLike" :isScroll="isScroll" @getImgScale="getImgScale"></Falls>
 			<div class="page_loading_box" v-show="!isNoData">
 				<span class="page_loading" v-show="!isShowMark"></span>
 				<span v-show="isShowMark">
@@ -72,6 +72,7 @@ export default defineComponent({
 		let filter:any = reactive({
 			worksSelect: 'all',
 			isNull:true,
+			failWidth:300,
 			worksType: [
 				{
 					name: useI18n().t('works.all'),
@@ -163,16 +164,57 @@ export default defineComponent({
 		}
 		let getImgScale = (item:any)=>{
 			let newScaleModel = null
-			if(window.innerWidth < 768){
+			if(getScreenOrientation() == 'landscape'){
-				newScaleModel = newScaleImageMobile
-			}else{
 				newScaleModel = newScaleImage
 				newScaleModel.value.scaleImageMask = true
-
+			}else{
+				newScaleModel = newScaleImageMobile
 			}
 			newScaleModel.value.init(item)
 			
 		}
+		function getScreenOrientation() {
+			// 优先使用标准API
+			if (screen.orientation) {
+				return screen.orientation.type.includes('portrait') ? 'portrait' : 'landscape';
+			}
+			// 回退到宽高比检测
+			return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
+			}
+
+			// 监听方向变化
+			function setupOrientationListener(callback:any) {
+			// 标准事件
+			const handleOrientationChange = () => {
+				callback(getScreenOrientation());
+			};
+
+			// 优先使用标准API
+			if (screen.orientation) {
+				screen.orientation.addEventListener('change', handleOrientationChange);
+			} 
+			// 回退到resize事件
+			else {
+				window.addEventListener('resize', handleOrientationChange);
+			}
+			// 返回清除监听的方法
+			return () => {
+				if (screen.orientation) {
+				screen.orientation.removeEventListener('change', handleOrientationChange);
+				} else {
+				window.removeEventListener('resize', handleOrientationChange);
+				}
+			};
+			}
+			const cleanup = setupOrientationListener((orientation:any) => {
+				if (orientation === 'portrait') {
+					// 竖屏逻辑
+					return 'portrait'
+				} else {
+					// 横屏逻辑
+					return 'landscape'
+				}
+		});
 		let getPorfolio = ()=>{
 			let data = filter.getListDate
 			if(filter.isShowMark && !filter.isNoData)return
@@ -253,6 +295,7 @@ export default defineComponent({
 			{ immediate: true } // 立即触发一次以处理初始参数
 			);
 		onMounted (()=>{
+			if(window.innerWidth < 1200)filter.failWidth = 120
 			nextTick(()=>{
 				setPorfolioDom()
 			})