首页和library布局调整

src/assets/style/style.css

@@ -235,10 +235,10 @@ li {
 .started_btn {
   padding: 0 calc(1.8rem*1.2);
   display: inline-block;
-  border-radius: calc(2rem*1.2);
+  border-radius: 4rem;
   font-size: calc(1.2rem*1.2);
   color: #fff;
-  background-color: #39215b;
+  background-color: #000000;
   cursor: pointer;
   height: 3.3rem;
   line-height: 3.3rem;
@@ -263,6 +263,10 @@ li {
 }
 .el-popper {
   padding: 0.5rem 1.1rem;
+  border: 2px solid;
+}
+.el-popper .el-popper__arrow {
+  display: none;
 }
 .hideEvents {
   pointer-events: none !important;
@@ -1232,7 +1236,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .libraryPageCascader .cascader_btn_max {
   height: 4.5rem;
   width: 100%;
-  border-bottom: 1px solid #e1e1e1;
   display: flex;
   align-items: center;
 }
@@ -1755,8 +1758,7 @@ textarea:focus {
 .accountEdit_page .input_border .search_keyword .search_keyword_center .search_keyword_center_item,
 .generalMenu_printModel_upload .input_border .search_keyword .search_keyword_center .search_keyword_center_item {
   border-radius: 0.4rem;
-  border: solid 1px #39215b;
+  background-color: #000000;
-  background-color: #8156bd;
   margin-right: 1rem;
   margin-bottom: 1rem;
   padding: 0.5rem 1rem;
@@ -1779,18 +1781,21 @@ textarea:focus {
 .productImg_modal .input_border .input_box_btnBox,
 .accountEdit_page .input_border .input_box_btnBox,
 .generalMenu_printModel_upload .input_border .input_box_btnBox {
-  border: calc(0.1rem*1.2) solid #F1F1F1;
+  border: 1px solid #000;
+  border-radius: 4rem;
   width: var(--width);
   display: flex;
   float: left;
   align-items: center;
+  padding: 1.5rem 2rem;
+  padding-right: 0;
 }
-.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
+.collection_modal_body .input_border .input_box_btnBox border .ant-spin-text,
-.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
+.design_detail_modal_component .input_border .input_box_btnBox border .ant-spin-text,
-.library_page .input_border .input_box_btnBox .ant-spin-text,
+.library_page .input_border .input_box_btnBox border .ant-spin-text,
-.productImg_modal .input_border .input_box_btnBox .ant-spin-text,
+.productImg_modal .input_border .input_box_btnBox border .ant-spin-text,
-.accountEdit_page .input_border .input_box_btnBox .ant-spin-text,
+.accountEdit_page .input_border .input_box_btnBox border .ant-spin-text,
-.generalMenu_printModel_upload .input_border .input_box_btnBox .ant-spin-text {
+.generalMenu_printModel_upload .input_border .input_box_btnBox border .ant-spin-text {
   font-size: 1.2rem;
 }
 .collection_modal_body .input_border .input_box_btnBox .search_seed,
@@ -1805,6 +1810,29 @@ textarea:focus {
   font-size: 1.2rem;
   border-right: calc(0.1rem*1.2) solid #F1F1F1;
 }
+.collection_modal_body .input_border .input_box_btnBox .upload_item,
+.design_detail_modal_component .input_border .input_box_btnBox .upload_item,
+.library_page .input_border .input_box_btnBox .upload_item,
+.productImg_modal .input_border .input_box_btnBox .upload_item,
+.accountEdit_page .input_border .input_box_btnBox .upload_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item {
+  width: 5.7rem;
+}
+.collection_modal_body .input_border .input_box_btnBox .upload_item .upload_file_item,
+.design_detail_modal_component .input_border .input_box_btnBox .upload_item .upload_file_item,
+.library_page .input_border .input_box_btnBox .upload_item .upload_file_item,
+.productImg_modal .input_border .input_box_btnBox .upload_item .upload_file_item,
+.accountEdit_page .input_border .input_box_btnBox .upload_item .upload_file_item,
+.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 5.7rem;
+  width: 5.7rem;
+  border-radius: 50%;
+  overflow: hidden;
+}
 .collection_modal_body .input_border input,
 .design_detail_modal_component .input_border input,
 .library_page .input_border input,
@@ -1816,7 +1844,9 @@ textarea:focus {
   border: 1px solid rgba(0, 0, 0, 0.15);
   padding-left: calc(1.5rem*1.2);
   border: calc(0.1rem*1.2) solid #ffffff00;
-  font-size: calc(1.6rem*1.2);
+  font-size: 1.8rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
   font-weight: 400;
 }
 .collection_modal_body .input_border inputinput:-moz-placeholder,
@@ -2001,6 +2031,7 @@ textarea:focus {
 .generalMenu_printModel_upload .input_border .generage_btn_box .content > div {
   background: #cccccc;
   line-height: 2;
+  font-size: 1.8rem;
   cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
@@ -2022,6 +2053,9 @@ textarea:focus {
 .generalMenu_printModel_upload .input_border .generage_btn {
   margin-left: 2rem;
   display: flex;
+  font-size: 1.8rem;
+  padding: 1rem 2rem;
+  box-sizing: content-box;
 }
 .hideChecked {
   user-select: none;

src/assets/style/style.less

@@ -242,10 +242,10 @@ input:focus{
 .started_btn{
 	padding: 0 calc(1.8rem*1.2);
 	display: inline-block;
-	border-radius: calc(2rem*1.2);
+	border-radius: 4rem;
 	font-size: calc(1.2rem*1.2);
 	color: #fff;
-	background-color: #39215b;
+	background-color: #000000;
 	cursor: pointer;
 	height: 3.3rem;
 	line-height: 3.3rem;
@@ -275,6 +275,10 @@ input:focus{
 
 .el-popper{
 	padding: .5rem 1.1rem;
+	border: 2px solid;
+	.el-popper__arrow{
+		display: none;
+	}
 }
 
 .hideEvents{
@@ -1342,7 +1346,6 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	.cascader_btn_max{
 		height: 4.5rem;
 		width: 100%;
-		border-bottom: 1px solid rgb(225 225 225);
 		display: flex;
 		align-items: center;
 		.cascader_btn1{
@@ -1844,8 +1847,7 @@ textarea:focus{
 				}
 				.search_keyword_center_item{
 					border-radius: .4rem;
-					border: solid 1px #39215b;
+					background-color: #000000;
-					background-color: #8156bd;
 					margin-right: 1rem;
 					margin-bottom: 1rem;
 					padding: .5rem 1rem;
@@ -1860,11 +1862,15 @@ textarea:focus{
 			}
 		}
 		.input_box_btnBox{
-			border: calc(0.1rem*1.2) solid #F1F1F1;
+			border: 1px solid #000;
+			border-radius: 4rem;
 			width: var(--width);
 			display: flex;
 			float: left;
 			align-items: center;
+			padding: 1.5rem 2rem;
+			padding-right: 0;
+			border
 			.ant-spin-text{
 				font-size: 1.2rem;
 			}
@@ -1875,6 +1881,19 @@ textarea:focus{
 				font-size: 1.2rem;
 				border-right: calc(0.1rem* 1.2) solid #F1F1F1;
 			}
+			.upload_item{
+				width: 5.7rem;
+				.upload_file_item{
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					height: 5.7rem;
+					width: 5.7rem;
+					border-radius: 50%;
+					overflow: hidden;
+				}
+			}
 		}
 		
 		input{
@@ -1884,7 +1903,9 @@ textarea:focus{
 			padding-left: calc(1.5rem*1.2);
 			border: calc(0.1rem*1.2) solid #ffffff00;
 			// border: calc(0.1rem*1.2) solid #F1F1F1;
-			font-size: calc(1.6rem*1.2);
+			font-size: 1.8rem;
+			height: 2.5rem;
+			line-height: 2.5rem;
 			font-weight: 400;
 			&input:-moz-placeholder{   
 				color: rgba(0,0,0,.15);   
@@ -1969,6 +1990,7 @@ textarea:focus{
 			position: relative;
 			display: flex;
 			align-items: center;
+			
 			.icon-xiala{
 				margin-left: 1rem;
 				transition: all .3s;
@@ -1990,6 +2012,7 @@ textarea:focus{
 				>div{
 					background: #cccccc;
 					line-height: 2;
+					font-size: 1.8rem;
 					cursor: pointer;
 					white-space: nowrap;
 					overflow: hidden;
@@ -2004,6 +2027,9 @@ textarea:focus{
 			// margin: 0 auto;
 			margin-left: 2rem;
 			display: flex;
+			font-size: 1.8rem;
+			padding: 1rem 2rem;
+			box-sizing: content-box;
 		}
 	}
 	

src/component/Detail/DesignDetailAlter.vue

@@ -1364,8 +1364,8 @@ export default defineComponent({
 					margin: 0;
 
 					margin-bottom: calc(2rem*1.2);
-					width: calc(9rem*1.2);
+					width: 10rem;
-					height: calc(9rem*1.2);
+					height: 10rem;
                     display: flex;
                     align-items: center;
                     justify-content: center;

src/component/HomePage/Generate.vue

@@ -15,7 +15,7 @@
         <div class="input_border" >
 			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
 				<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
-					<div class="upload_item">
+					<div class="upload_item" v-show="sketchboardList?.length != 0">
 						<div
 							class="upload_file_item Guide_1_2_7"
 							v-for="(file, index) in sketchboardList"
@@ -939,7 +939,7 @@ export default defineComponent({
 	position: relative;
 	// padding-top: calc(2.5rem*1.2);
 	.input_border{
-		padding-top: calc(2.5rem*1.2);
+		padding-top: 1rem;
 	}
     
 	.mark_loading{

src/component/HomePage/PrintboardUpload.vue

@@ -737,8 +737,8 @@ export default defineComponent({
                 margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 				// margin: 0 2rem*1.2) 2rem*1.2) 0;
 				display: inline-block;
-				width: calc(10rem*1.2);
+				width: 10rem;
-				height: calc(10rem*1.2);
+				height: 10rem;
 				border: 1px solid #f5f5f5;
 				vertical-align: top;
 				position: relative;

src/component/HomePage/SketchboardUpload.vue

@@ -701,8 +701,8 @@ export default defineComponent({
 			margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 			// margin: 0 2rem*1.2) 2rem*1.2) 0;
 			display: inline-block;
-			width: calc(10rem*1.2);
+			width: 10rem;
-			height: calc(10rem*1.2);
+			height: 10rem;
 			border: 1px solid #f5f5f5;
 			vertical-align: top;
 			position: relative;

src/component/HomePage/bindEmail.vue

@@ -112,7 +112,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
+import { defineComponent,ref,reactive,toRefs ,computed} from "vue";
 import { Https } from "@/tool/https";
 import { isEmail } from "@/tool/util";
 import { setCookie ,WriteCookie } from "@/tool/cookie";
@@ -132,7 +132,9 @@ export default defineComponent({
 		const {locale} = useI18n()
 		const store = useStore();
 		let register = reactive({
-			registerModel:false,
+			registerModel:computed(()=>{
+				return store.state.UserHabit.isBindEmail
+			}),
 			registerModelMask:true,
 			pageWidth:'45%'
 		})

src/component/HomePage/collectionModal.vue

@@ -426,7 +426,7 @@ export default defineComponent({
 		font-size: var(--aida-fsize2);
 		font-weight: 900;
 		color: rgba(0,0,0,.65);
-		z-index: 2;
+		z-index: 999;
 		align-items: center;
 		width: calc(35rem*1.2);
 		justify-content: space-between;

src/component/HomePage/generalMenu.vue

@@ -200,14 +200,15 @@ import { message, Upload, Modal } from "ant-design-vue";
 		>div{
 			// display: flex;
 			display: block;
-			width: calc(13rem*1.2);
+			width: 20rem;
-			border-radius: calc(1rem*1.2);
+			border-radius: 4rem;
 			margin: 0;
-			border: 2px solid;
+			border: 1px solid;
             cursor: pointer;
-			padding: 0 calc(1rem*1.2);
+			padding: 1.5rem 2rem;
 			text-align: center;
 			display: flex;
+			font-size: 1.8rem;
 			justify-content: space-around;
 			> span{
 				white-space: nowrap; 
@@ -221,7 +222,8 @@ import { message, Upload, Modal } from "ant-design-vue";
 		}
 		ul{
 			position: absolute;
-			width: calc(13rem*1.2);
+			border: 1px solid;
+			width: 20rem;
 			text-align: center;
 			margin-top: calc(.3rem*1.2);
 			border-radius: calc(1rem*1.2);
@@ -229,7 +231,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 			z-index: 3;
 			li{
 				// background: rgba(0,0,0,.2);
-				background: #cccccc;
+				background: #fff;
 				line-height: 2;
 				cursor: pointer;
 				white-space: nowrap; 
@@ -257,7 +259,7 @@ import { message, Upload, Modal } from "ant-design-vue";
 			}
 			.printModel_item:hover{
 				// background: rgba(0,0,0,.4);
-				background: #999999;
+				background: #f3f3f6;
 				color: #000;
 			}
 		}

src/component/LoginPage/googleLogin.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="Container">
         <!-- 谷歌登录 -->
+		 <div class="icon">
+			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
+			<span>{{ $props.text }}</span>
+		 </div>
         <div class="g_id_signin" id="g_id_signin">
 			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
 		</div>
@@ -12,6 +16,12 @@
     export default defineComponent({
         name: "login",
 		emits: ['googelLogin'],
+		props: {
+			text: {
+				type: String,
+				default: 'Sign in with Google'
+			}
+		},
 		setup(props, { emit }) {
 			const  handleCredentialResponse = async (response) => {
                 // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
@@ -69,27 +79,50 @@
 </script>
 <style scoped lang="less">
 .Container{
+	position: relative;
 	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
 		justify-content: center;
 		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
 			padding: 0;
 		}
 	}
-	.g_id_signin{
+	:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK){
-		width: 40px;
+		width: 100%;
-		height: 40px;
+	}
+	.icon{
+		// width: 40px;
+		width: auto;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: 1px solid #dadce0;
-		border-radius: 50%;
+		border-radius: 4rem;
+		padding: .5rem 3rem;
 		cursor: pointer;
+		box-sizing: border-box;
 		&:hover{
 			background: #f8faff;
 		}
 		img{
-			width: 18px;
+			width: 3.8rem;
-			height: 18px;
+			height: 3.8rem;
+		}
+		span{
+			font-size: 1.4rem;
+			margin-left: 1.4rem;
+		}
+	}
+	.g_id_signin{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		opacity: 0;
+	}
+	&:hover{
+		.icon{
+			background: #f8faff;
 		}
 	}
 }

src/component/LoginPage/weiXinLogin.vue

@@ -2,6 +2,7 @@
     <div class="Container">
         <div class="icon" @click="openWeiXinModel">
 			<img src="@/assets/images/loginPage/weiXinIcon.svg" alt="">
+			<span>{{ $props.text }}</span>
 		</div>
 		<weiXinModel ref="weiXinModel"></weiXinModel>
     </div>
@@ -14,6 +15,12 @@
 		components: {
 		    weiXinModel
 		},
+		props: {
+			text: {
+				type: String,
+				default: 'Sign in with Wechat'
+			}
+		},
 		setup() {
 			let weiXinDom = reactive({
 				weiXinModel:null
@@ -35,20 +42,26 @@
 .Container{
 	position: relative;
 	.icon{
-		width: 40px;
+		// width: 40px;
-		height: 40px;
+		width: auto;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: 1px solid #dadce0;
-		border-radius: 50%;
+		border-radius: 4rem;
+		padding: .5rem 3rem;
 		cursor: pointer;
+		box-sizing: border-box;
 		&:hover{
 			background: #f8faff;
 		}
 		img{
-			width: 18px;
+			width: 3.8rem;
-			height: 18px;
+			height: 3.8rem;
+		}
+		span{
+			font-size: 1.4rem;
+			margin-left: 1.4rem;
 		}
 	}
 	&.Container:hover{

src/component/mainPage/signUp/registerModel.vue

@@ -143,8 +143,8 @@
 								</label>
 							</div>
 							<div class="thirdPartyLogin marign_top30">
-								<googleLogin @googelLogin="googelLogin"></googleLogin>
+								<googleLogin @googelLogin="googelLogin" text="Register with Google"></googleLogin>
-								<weiXinLogin></weiXinLogin>
+								<weiXinLogin text="Register with wechat"></weiXinLogin>
 								<!-- <phoneLogin></phoneLogin> -->
 							</div>
 							<div
@@ -644,16 +644,14 @@ export default defineComponent({
     .page_content {
         // position: relative;
         .login_content {
-			
+            // position: relative;
-            position: absolute;
+            // top: 50%;
-            top: 50%;
+            // left: 50%;
-            left: 50%;
+            // transform: translate(-50%,-50%);
-            transform: translate(-50%,-50%);
             // width: 60rem;
-			width: 80%;
+			// width: 80%;
             background: #FFFFFF;
             // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
-            border-radius: 1rem;
             padding: 3rem 6rem 6.5rem;
             box-sizing: border-box;
 			display: flex;

src/lang/cn.ts

@@ -155,6 +155,7 @@ export default {
 		Design:'设计',
 		Redesign:'重新设计',
 		GeneratedDesign:'生成设计，请选择您最喜欢的设计',
+		recycleBin:'回收站',
 		SelectedDesign:'喜欢的设计',
 		Export:'导出',
 		moodboard:"情绪板",

src/lang/en.ts

@@ -155,6 +155,7 @@ export default {
 		Design:'Design',
 		Redesign:'Redesign',
 		GeneratedDesign:'Generated Design，please choose your favorite design',
+		recycleBin:'Recycle Bin',
 		SelectedDesign:'Selected Design',
 		Export:'Export',
 		moodboard:"moodboard",

src/main.ts

@@ -8,7 +8,7 @@ import './assets/iconfont2/iconfont.css'
 import flexible from './tool/flexible.js'
 import 'ant-design-vue/dist/antd.css';
 import Antd from 'ant-design-vue';
-// import (reference) './assets/style/style.less';
+import './assets/style/style.less';
 import VueLazyload from "vue-lazyload";
 import i18n from './lang/index'
 import { getBrowserInfo, murmur } from './tool/util'

src/store/homeStore/homeStore.ts

@@ -4,6 +4,7 @@ import {RootState} from '../index'
 interface DesignDetail{
     designCollectionList:any,
     likeDesignCollectionList:any,
+    deleteDesignCollectionList:any,
     userGroupId:any,
     designCollectionId:any,
     templateId:any,
@@ -16,6 +17,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
     state:{
         designCollectionList:[],
         likeDesignCollectionList:[],
+        deleteDesignCollectionList:[],
         userGroupId:'',
         designCollectionId:'',
         templateId:'',
@@ -32,6 +34,16 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
         },
         setLikeDesignCollectionList(state,data){
             state.likeDesignCollectionList = data
+        },
+		setDeleteDesignCollectionList(state,data){
+            let obj = state.designCollectionList.splice(data,1)
+			state.deleteDesignCollectionList.unshift(...obj)
+        },
+		cancelDeleteDesignCollectionList(state,data){
+            let obj = state.deleteDesignCollectionList.splice(data,1)
+			console.log(obj);
+			
+			state.designCollectionList.unshift(...obj)
         },
         setSingleDesignCollectionList(state,data){
             state.designCollectionList[data.index] = data.design
@@ -73,6 +85,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
             state.designCollectionList=[]
             state.likeDesignCollectionList = []
             state.designCollectionId = ''
+			state.deleteDesignCollectionList = []
         },
         setTemplateData(state,data){
             state.templateId=data.id

src/store/userHabit/userHabit.ts

@@ -22,6 +22,7 @@ interface UserHabit{
     messageSystem:any,
     sex:any,
 	userDetail:any,
+	isBindEmail:any,
 }
 
 const userHabit : Module<UserHabit,RootState> = {
@@ -77,7 +78,8 @@ const userHabit : Module<UserHabit,RootState> = {
 			},
 			subscriptionType:null,
 			subscriptionId:null,
-		}
+		},
+		isBindEmail:false
     },
     mutations:{
         res_clothingType(state,data){
@@ -175,10 +177,13 @@ const userHabit : Module<UserHabit,RootState> = {
 				//是否是affiliate用户
 				affiliate:false,
 			}
+			state.isBindEmail = false
 		},
 		setUserDetail(state,data){
-			console.log(data);
+			// console.log(data);
-			
+			// console.log(data.email,state.userDetail.email);
+			if(!data.email && !state.userDetail.email)state.isBindEmail = true
+			// if(!data.email && !state.userDetail.email)state.isBindEmail = true
 			// state.userDetail = data
 			state.userDetail.email = data.email?data.email:'------'
 			state.userDetail.userName = data.userName//用户名

src/tool/flexible.js

@@ -10,8 +10,8 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
 		if(width/height>1.98) width = height * 1.98;
         width > maxWidth && (width = maxWidth);
         width < minWidth && (width = minWidth);
-        var rem = width * 10 / designWidth;
+        // var rem = width * 10 / designWidth;
-        // var rem = Math.round(width * 10 / designWidth);
+        var rem = Math.round(width * 10 / designWidth);
 		docEl.style.fontSize = rem+'px'
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
     }

src/tool/mdEvent.js

@@ -1,5 +1,6 @@
 const getMousePosition = (e,bor,dom) => {
 	e.stopPropagation()
+	e.preventDefault();
 	if(bor){
 		const touch = e.changedTouches[0];
 		event = {

src/views/Administrator.vue

@@ -214,7 +214,7 @@ export default defineComponent({
 				// },
 			],
 		},{
-			name:'Trial Affiliate',
+			name:'Approval Affiliate',
 			icon:'usetime',
 			route:'/administrator/affiliateAudit',
 			key:'sub10',

src/views/HomeMain.vue

@@ -209,7 +209,6 @@ export default defineComponent({
 
 		let newPosted = ref(null)
 
-		let bindEmail = ref(null)
 		let getUnreadCount = ()=>{
 			Https.axiosGet(Https.httpUrls.getUnreadCount).then((rv)=>{
 				if(rv){
@@ -312,7 +311,6 @@ export default defineComponent({
 			messageType,
 			...toRefs(stateList),
 			newPosted,
-			bindEmail,
 			openNewPosted,
 			changeLanguage,
 			closeShowOperateContent,
@@ -322,8 +320,6 @@ export default defineComponent({
 	},
     data() {
         return {
-            bindEmailVisible: false,
-            bindEmailStep: 1,
             email: "",
             emailCode: ["", "", "", "", "", ""], //邮箱验证码
             time: 60, //60秒倒计时
@@ -346,20 +342,6 @@ export default defineComponent({
 			],
         };
     },
-	watch: {
-		'userDetail.email':{
-			handler(newVal, oldVal){
-				nextTick(()=>{
-					if(newVal == '-------------'){
-						setTimeout(()=>{
-						    this.setBindEmail()//如果没有绑定邮箱就弹窗
-						},1000)
-					}
-				})
-			},
-			immediate: true
-		},
-	},
 	directives:{
 		moveOpenDetal:{
 			mounted (el,binding) {
@@ -438,9 +420,6 @@ export default defineComponent({
 			this.openTask(data)
 		},
        
-		setBindEmail(){
-			this.bindEmail.init()
-		},
         turnToPage(name) {
             let noRefresh = name === "home" ? true : false;
             this.$router.push({ name: name, params: { noRefresh: noRefresh } });
@@ -895,6 +874,9 @@ export default defineComponent({
 					// height: 3.2rem;
 					div{
 						height: 100%;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 					}
 				}
 			}

src/views/HomeView/HomeView.vue

@@ -57,7 +57,7 @@
 							</div>
 							<!-- 有图状态 end-->
 						</div>
-						<div class="home_page_left_bottom" @click="()=>domHidden = !domHidden" v-show="designCollectionId">
+						<div class="home_page_left_bottom" @click="setShowHide('domHidden')" v-show="designCollectionId">
 							<span class="icon iconfont icon-xiala" :class="{'active':domHidden}"></span>
 						</div>
 					</div>
@@ -89,127 +89,120 @@
 								</div>
 							</div>
 						</div>
-
+						<div class="right_content_block_box">
-						<div class="right_content_block">
+							<div class="right_content_block">
-							<div class="right_content_header">
+								<div class="right_content_header">
-								<div class="content_header_left">
+									<div class="content_header_left">
-									<i class="fi fi-rs-comments"></i><span class="content_header_des">
+										<i class="fi fi-rs-comments"></i><span class="content_header_des">
-										{{ $t('HomeView.GeneratedDesign') }}
+											{{ $t('HomeView.GeneratedDesign') }}
-										</span>
+											</span>
+									</div>
 								</div>
-							</div>
 
-							<div class="right_content_body">
+								<div class="right_content_body">
-								<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
+									<div class="right_content_img_block scroll_style Guide_1_17 active" :class="[driver__.driver?'showEvents':'']">
-									<div class="right_content_img_item" ref="designImg">
+										<div class="right_content_img_item" ref="designImg">
-										<!-- <draggable 
-											group="people" > -->
 										
-										<div class="content_img_block active" :style="collStyle" draggable
+											<div class="content_img_block active" :style="collStyle"  @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))"
-											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
+												v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-											@click="designDetail(
+												@click="designDetail(
-													design,
-													index,
-													likeDesignCollectionList,
-													'like'
-												)"
-											@dragstart="dragstart($event, index)"
-											@dragover.prevent 
-											@drop="dragDrop($event, index,likeDesignCollectionList)">
-											<div class="content_img_flex">
-												<img class="content_img" :src="design.designOutfitUrl"
-													:key="design.designOutfitUrl" />
-											</div>
-											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												dislikeDesignCollection(
-													design,
-													index
-												)">
-											</div>
-										</div>
-										<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
-											<a-spin size="large"></a-spin>
-										</div>
-										<!-- </draggable> -->
-										<div class="content_img_block" :style="collStyle" draggable v-for="(
-												design, index
-											) in designCollectionList" :key="design?.designItemId">
-												<div class="content_img_flex" 
-												:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
-													@click="
-													designDetail(
 														design,
 														index,
-														designCollectionList,
+														likeDesignCollectionList,
-														'dislike'
+														'like'
-													)"
+													)">
-												@dragstart="dragstart($event, index)"
+												<div class="content_img_flex">
-												@dragover.prevent 
+													<img class="content_img" :src="design.designOutfitUrl"
-												@drop="dragDrop($event, index,designCollectionList)">
+														:key="design.designOutfitUrl" designType="like" :index="index"/>
-													<img class="content_img" :src="design.designOutfitUrl" />
+												</div>
-												</div> 
+												<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
+													dislikeDesignCollection(
-													likeDesignCollection(
 														design,
 														index
-													)
+													)">
-													">
 												</div>
-												<i class="fi fi-rr-trash icon_delete" @click.stop="
+											</div>
-													deleteDesignCollection(
+											<div class="content_img_block" v-show="showDesignMark" :style="collStyle">
-														designCollectionList,
+												<a-spin size="large" class="content_img_flex"></a-spin>
-														index
+											</div>
-													)
+											<div class="content_img_block" :style="collStyle" v-for="(
-													">
+													design, index
-												</i>
+												) in designCollectionList" :key="design?.designItemId" @mousedown.stop="designMousedown(getMousePosition($event,false))" @touchstart.passive="designMousedown(getMousePosition($event,true))">
+													<div class="content_img_flex" 
+													:class="[(driver__.driver && driver__.index == 32)?'hideEvents':'']"
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<img class="content_img" :src="design.designOutfitUrl" designType="dislike" :index="index"/>
+													</div> 
+													<div class="icon iconfont icon-jushoucang icon_like" :class="[driver__.driver?index == 0?driver__.index == 32?'Guide_img showEvents':'':'':'']" @click.stop="
+														likeDesignCollection(
+															design,
+															index
+														)
+														">
+													</div>
+													<i class="fi fi-rr-trash icon_delete" @click.stop="
+														setDeleteDesign(index)">
+													</i>
+											</div>
+										
 										</div>
-									
 									</div>
 								</div>
 							</div>
-
+							<div class="right_content_block recycleBin" :class="{recycleBinShow:recycleDomHidden && designCollectionId}">
-							<!-- <div class="right_content_header">
+								<div class="right_content_header">
-								<div class="content_header_left">
+									<div class="content_header_left">
-									<i class="fi fi-rs-comments"></i><span class="content_header_des">{{ $t('HomeView.SelectedDesign') }}</span>
+										<i class="fi fi-rs-comments"></i><span class="content_header_des">
+											{{ $t('HomeView.recycleBin') }}
+											</span>
+									</div>
 								</div>
-								<div class="right_content_export" v-show="likeDesignCollectionList.length">
+
+								<div class="right_content_body">
+									<div class="right_content_img_block scroll_style">
+										<div class="right_content_img_item">
+											<div class="content_img_block" v-for="(
+													design, index
+												) in deleteDesignCollectionList" :key="design?.designItemId">
+													<div class="content_img_flex" 
+														@click="
+														designDetail(
+															design,
+															index,
+															designCollectionList,
+															'dislike'
+														)">
+														<img class="content_img" :src="design.designOutfitUrl" />
+													</div> 
+													<div class="Dustbin" @click.stop="
+														cancelDeleteDesign(index)">
+														Dustbin
+													</div>
+											</div>
+										
+										</div>
+									</div>
 								</div>
 								
 							</div>
-
+							<div class="home_page_left_bottom" :class="{active:recycleDomHidden}" @click="setShowHide('recycleDomHidden')" v-show="designCollectionId">
-							<div class="right_content_body">
+								<span class="icon iconfont icon-xiala" :class="{'active':recycleDomHidden}"></span>
-								<div class="right_content_img_block scroll_style" :class="{active:likeDesignCollectionList.length != 0}">
+							</div>
-									<div class="right_content_img_item" id="right_content_img_block">
-										<div class="content_img_block" draggable
-											v-for="(design, index) in likeDesignCollectionList" :key="design.id"
-											@click="designDetail(
-													design,
-													index,
-													likeDesignCollectionList,
-													'like'
-												)"
-											@dragstart="dragstart($event, index)"
-											@dragover.prevent 
-											@drop="dragDrop($event, index)">
-											<div class="content_img_flex">
-												<img class="content_img" :src="design.designOutfitUrl"
-													:key="design.designOutfitUrl" />
-											</div>
-											<div class="icon iconfont icon-jushoucanggift icon_like" @click.stop="
-												dislikeDesignCollection(
-													design,
-													index
-												)
-												"></div>
-										</div>
-									</div>
-								</div>
-							</div> -->
 						</div>
+						
 					</div>
 				</div>
 			</div>
 		</div>
+		<teleport to="body">
+			<img class="moveDataImg" v-if="moveDataImg" :style="moveDataStyle" :src="moveDataImg" alt="">
+		</teleport>
 		<KeepAlive>
 			<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
 		</KeepAlive>
@@ -241,7 +234,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount} from "vue";
+import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nextTick,createVNode,onBeforeUnmount, toRef} from "vue";
 // import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
@@ -258,11 +251,11 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
-import draggable from 'vuedraggable'
 // import JSZip, { forEach } from "jszip";
 import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import i18n from "@/lang";
 import { useI18n } from "vue-i18n";
+import { getMousePosition } from "@/tool/mdEvent";
 const FileSaver = require("file-saver");
 
 export default defineComponent({
@@ -275,7 +268,6 @@ export default defineComponent({
 		DesignDetail,
 		ExportNewCoolection,
 		affiche,
-		draggable,
 		productImg,
 		generalCanvas
 	},
@@ -293,6 +285,9 @@ export default defineComponent({
 		let likeDesignCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.likeDesignCollectionList;
 		});
+		let deleteDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.deleteDesignCollectionList;
+		});
 		let designCollectionList: any = computed(() => {
 			return store.state.HomeStoreModule.designCollectionList;
 		});
@@ -375,6 +370,9 @@ export default defineComponent({
 			collTime:null as any,
 		})
 		let designImg = ref()
+		let domHidden = ref(JSON.parse(sessionStorage.getItem('domHidden') as any) || false);
+		let recycleDomHidden = ref(JSON.parse(sessionStorage.getItem('recycleDomHidden') as any) || false);
+		let getDesignTime = null as any;
 		const setSystemDesigner = (time:any)=>{
 			clearTimeout(collItemSize.collTime)
 			collItemSize.collTime = setTimeout(()=>{
@@ -390,18 +388,91 @@ export default defineComponent({
 		const setDesignImgWidth = ()=>{
 			nextTick(()=>{
 				let width = designImg.value.parentElement.offsetWidth
-				let sonDom = designImg.value.querySelectorAll('div')[0]
+				let sonDom = designImg.value.querySelectorAll('.content_img_block')[designImg.value.querySelectorAll('.content_img_block').length - 1]
 				if(Math.floor(width / (sonDom.offsetWidth+10 + 1)) > (likeDesignCollectionList.value.length + designCollectionList.value.length)){
 					designImg.value.style.width = 100+'%'
 				}else{
-					designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1) + 'px'
+					// let recycleBinW = recycleDomHidden.value?'53rem':0
+					designImg.value.style.width = Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)+ 'px'
+					// designImg.value.style.width = `calc(${Math.floor(width / (sonDom.offsetWidth+10 + 1)) * (sonDom.offsetWidth + 10 + 1)}px - ${recycleBinW})`
 				}
 			})
 		}
+		const setDeleteDesign = (index:any)=>{
+			store.commit("setDeleteDesignCollectionList",index);
+		}
+		const cancelDeleteDesign = (index:any)=>{
+			store.commit("cancelDeleteDesignCollectionList",index);
+		}
 		setSystemDesigner(0)
+
+		let moveData = reactive({
+			moveDataImg:'',
+			moveDataImg_:'',
+			moveDataStyle:{
+				position: 'absolute',
+				top: '0',
+				left: '0',
+				width:'',
+				height:'',
+				zIndex: 9,
+				opacity:.5,
+				pointerEvents:'none'
+			},
+			downIndex:-1,
+			downXy:{x:0,y:0},
+		})
+		const designMousedown = (e:any)=>{
+			if(e.target.getAttribute('index')){
+				moveData.downIndex = e.target.getAttribute('index');
+			    moveData.moveDataImg_ = e.target.src
+				moveData.downXy.x = e.clientX
+				moveData.downXy.y = e.clientY
+				moveData.moveDataStyle.width = e.target.offsetWidth + 'px'
+				moveData.moveDataStyle.height = e.target.offsetHeight + 'px'
+				
+				window.addEventListener('mousemove', mouseMove);
+				window.addEventListener('touchmove', touchmove);
+				window.addEventListener('mouseup', designMouseup);
+				window.addEventListener('touchend', designMouseup);
+			}
+		}
+		let mouseMove = function(event:any){
+			let e = getMousePosition(event,false)
+			desingMousemove(e)
+		}
+		let touchmove = function(event:any){
+			let e = getMousePosition(event,true)
+			desingMousemove(e)
+		}
+		const designMouseup = (e:any)=>{
+			document.removeEventListener('mousemove',mouseMove)
+			document.removeEventListener('touchmove',touchmove)
+			document.removeEventListener('mouseup',designMouseup) 
+			document.removeEventListener('touchend',designMouseup) 
+			moveData.moveDataImg = ''
+			moveData.moveDataImg_ = ''
+			moveData.downXy = {x:0,y:0}
+			var type = e.target.getAttribute('designType');
+			var index = e.target.getAttribute('index');
+			if(index){
+				let arr = type == 'like'?likeDesignCollectionList.value:designCollectionList.value
+				// arr[index]
+				let item = arr.splice(moveData.downIndex, 1)
+				arr.splice(index, 0, ...item) 
+			}
+		}
+		const desingMousemove = (e:any)=>{
+			if(!moveData.moveDataImg)moveData.moveDataImg = moveData.moveDataImg_
+			let width = moveData.moveDataStyle.width.split('px')[0]
+			let height = moveData.moveDataStyle.height.split('px')[0]
+			moveData.moveDataStyle.left = e.clientX - Number(width)/2+'px'
+			moveData.moveDataStyle.top = e.clientY - Number(height)/2+'px'
+		}
 		return {
 			store,
 			likeDesignCollectionList,
+			deleteDesignCollectionList,
 			designCollectionList,
 			userGroupId,
 			userDetail,
@@ -423,7 +494,16 @@ export default defineComponent({
 			setSystemDesigner,
 			...toRefs(collItemSize),
 			designImg,
+			domHidden,
+			recycleDomHidden,
+			getDesignTime,
+
 			setDesignImgWidth,
+			setDeleteDesign,
+			cancelDeleteDesign,
+			...toRefs(moveData),
+			designMousedown,
+			getMousePosition,
 		};
 	},
 	data() {
@@ -446,9 +526,7 @@ export default defineComponent({
 			likeLoading: false, //喜欢防抖
 			dragIdx:0,
 			designRandom:'',
-			domHidden:JSON.parse(sessionStorage.getItem('domHidden') as any) || false,
+			
-
-			getDesignTime:null as any,
 		};
 	},
 	watch: {
@@ -467,6 +545,7 @@ export default defineComponent({
 	beforeUnmount(){
 		clearTimeout(this.getDesignTime);
 		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
+		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
 		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
 	},
 	async mounted() {
@@ -614,17 +693,6 @@ export default defineComponent({
 			
 			// affiche.afficheMask = true
 		},
-		dragstart (e:any, index:any) {
-			
-		this.dragIdx = index
-		},
-		dragDrop (e:any, index:any,list:any) {
-		let _teams = list  //将hotteams存起来
-		let _dragitem = _teams[this.dragIdx]  //将被拖拽的那条数据存起来
-		if(!_dragitem)return
-		_teams.splice(this.dragIdx, 1)      //删除被拖拽的那条数据
-		_teams.splice(index, 0, _dragitem)  //将被拖拽的那条数据放到数组中指定的位置
-		},
 		
 		//判断模特和当前start的sketch是否匹配
 		isMannequin(){
@@ -1264,6 +1332,11 @@ export default defineComponent({
 			this.$emit('setTask',data)
 			// this.exportModel()
 		},
+		setShowHide(str:string){
+			if(str == 'recycleDomHidden')this.recycleDomHidden = !this.recycleDomHidden
+			if(str == 'domHidden')this.domHidden = !this.domHidden
+			this.setDesignImgWidth()
+		}
 	},
 });
 </script>
@@ -1278,8 +1351,10 @@ export default defineComponent({
 	// left: 50%;
 	// margin-left: -50%;
 	// transform: translateX(-50%);
+	
 	.page_content {
 		position: relative;
+		
 		.userSystem{
 			position: absolute;
 			width: 100%;
@@ -1293,6 +1368,31 @@ export default defineComponent({
 			font-weight: 600;
 			font-size: 4rem;
 		}
+		.home_page_left_bottom{
+			position: absolute;
+			width: 4rem;
+			height: 7rem;
+			background: #fff;
+			border: 2px solid;
+			border-right: none;
+			border-radius: 2rem 0 0 2rem;
+			top: 50%;
+			transform: translate(-100%,-50%);
+			left: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
+			cursor: pointer;
+			>span{
+				transition: all .3s;
+				transform: rotate(90deg);
+				&.active{
+					transform: rotate(270deg);
+				}
+			}
+			
+		}
 		.page_content_body {
 			position: absolute;
 			width: 100%;
@@ -1316,31 +1416,7 @@ export default defineComponent({
 					position: relative;
 					// overflow: hidden;
 					
-					.home_page_left_bottom{
+					
-						position: absolute;
-						width: 4rem;
-						height: 7rem;
-						background: #fff;
-						border: 2px solid;
-						border-right: none;
-						border-radius: 2rem 0 0 2rem;
-						top: 50%;
-						transform: translate(-100%,-50%);
-						left: 100%;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						z-index: 2;
-						cursor: pointer;
-						>span{
-							transition: all .3s;
-							transform: rotate(90deg);
-							&.active{
-								transform: rotate(270deg);
-							}
-						}
-						
-					}
 					.home_page_left_content {
 						height: 100%;
 						width: 55rem;
@@ -1439,10 +1515,27 @@ export default defineComponent({
 					// width: calc(100% - 44.4rem);
 					flex: 1;
 					height: 100%;
-					overflow: hidden;
+					width: 100%;
+					// overflow: hidden;
 					display: flex;
 					flex-direction: column;
 					justify-content: space-between;
+					position: relative;
+					.home_page_left_bottom{
+						border-radius: 0 2rem 2rem 0rem;
+						left: 2rem;
+						top: 50%;
+						left: auto;
+						right: 0;
+						transform: translate(100%, -50%);
+						// top: calc(50% - 10.4rem / 2);
+						border: 2px solid;
+						border-left: none;
+						&.active{
+							right: 53rem;
+							transform: translate(0, -50%);
+						}
+					}
 					.right_top {
 						padding: 2rem 3.2rem 2rem 1.2rem;
 						display: flex;
@@ -1477,12 +1570,35 @@ export default defineComponent({
 							}
 						}
 					}
-
+					.right_content_block_box{
-					.right_content_block {
-						overflow-y: auto;
 						flex: 1;
 						display: flex;
+						overflow: hidden;
+					}
+					.right_content_block {
+						flex: 1;
+						display: flex;
+						width: 0;
 						flex-direction: column;
+						&.recycleBin{
+							flex: none;
+							margin-left: 0;
+							width: 0;
+							overflow: hidden;
+							&.recycleBinShow{
+								width: auto;
+								margin-left: 2rem;
+							}
+							.right_content_body {
+								width: 55rem;
+								.right_content_img_block{
+									.content_img_block{
+										width: 16rem;
+										height: 23rem;
+									}
+								}
+							}
+						}
 						&.right_content_block::-webkit-scrollbar{display: none;}
 						&.active{
 							overflow: hidden;
@@ -1616,7 +1732,7 @@ export default defineComponent({
 									display: flex;
 									align-items: center;
 									justify-content: center;
-									&:hover .icon_like,&:hover .icon_delete {
+									&:hover .icon_like,&:hover .icon_delete,&:hover .Dustbin {
 										display: block;
 									}
 
@@ -1631,7 +1747,7 @@ export default defineComponent({
 										width: 100%;
 										height: 100%;
 										border-radius: 2rem;
-										
+										border: 2px solid #E0E0E0;
 									}
 									&.active{
 										.icon_like,.icon_delete{
@@ -1648,7 +1764,19 @@ export default defineComponent({
 										// max-height: 100%;
 										object-fit: contain;
 									}
-
+									.Dustbin{
+										position: absolute;
+										top: 50%;
+										left: 50%;
+										transform: translate(-50%,-50%);
+										cursor: pointer;
+										color: #fff;
+										border-radius: 4rem;
+										font-size: 1.8rem;
+										padding: 1rem 1.5rem;
+										background: rgba(0, 0, 0, 0.7);
+										display: none;
+									}
 									.icon_like,.icon_delete {
 										font-size: 2.4rem;
 										top: 1rem;

src/views/HomeView/library.vue

@@ -242,7 +242,7 @@
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
 											<div class="input_box_btnBox"  v-if="scene?.value != 'extract'">
-												<div class="upload_item" v-show="selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
+												<div class="upload_item" v-show="selectGenerateList.length != 0 && selectCode !== 'Moodboard' && ((selectCode == 'Printboard' && scene?.value == 'Pattern') || (selectCode == 'Printboard' && scene?.value == 'Slogan') || selectCode == 'Sketchboard')">
 													<div
 														class="upload_file_item"
 														v-for="(file, index) in selectGenerateList"
@@ -272,7 +272,6 @@
 													<input class="search_seed" max="9999" v-show="selectCode == 'Printboard' && scene?.value == 'Logo'" @input="ifSeedValue" v-model="searchPictureSeed" type="Number" placeholder='Seed' min="0">
 												</a-popover> -->
 												<input 
-													class="search_input " 
 													@input="ifMaximumLength" 
 													:maxlength='inputShow?0:9999' 
 													@keydown.enter="getgenerate"  
@@ -1872,7 +1871,10 @@ export default defineComponent({
 						.intersection{
 							cursor: pointer;
 							margin-right: 3rem;
-							font-size: 3rem;
+							>div{
+								font-size: 3rem;
+								font-weight: 900;
+							}
 						}
 						
 					}

vue.config.js

@@ -56,7 +56,6 @@ module.exports = defineConfig({
   css: {
     loaderOptions: {
       less: {
-		additionalData: `@import (reference) "~@/assets/style/style.less";`,
         lessOptions: {
           modifyVars: {
             'primary-color': '#ec6800'