修改部分bug和调整布局

src/component/Administrator/allUserPoerations.vue

@@ -216,6 +216,8 @@ export default defineComponent({
 				"credits": operationsData.credits,
 				"systemUser": operationsData.systemUser,
 				"validEndTime": setTime(operationsData.validEndTime),
+				"userName": operationsData.userName,
+				"userEmail": operationsData.userEmail,
 			}
 		}
 		let cancelDsign = ()=>{
@@ -244,7 +246,7 @@ export default defineComponent({
 			);
 			}else{
 				data = setEditData()
-				if(!data.userName || !data.userEmail || !data.validStartTime || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
+				if(!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)return message.warning('Please check the input box marked with *')
 				Https.axiosPost(Https.httpUrls.modifyUser,{},{params:data}).then(
 				(rv) => {
 					if (rv) {

src/component/Detail/DesignDetailEnd.vue

@@ -371,7 +371,7 @@ export default defineComponent({
 			})
 			index = index? index:0
 			if(!this.current.id){
-				if(index){
+				if(index && data?.designSingleItemDTOList){
 					data.designSingleItemDTOList[index].priority = zIndex+=1
 				}
 			}

src/component/Detail/DesignPrintOperation.vue

@@ -39,9 +39,9 @@
 						</div>
 						<div class="print_right show_print_right Guide_1_25" :class="[driver__.driver?'showEvents':'']">
 							<div class="designOpenrtion_nav">
+								<!-- :class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''"  -->
 								<div 
 									class="designOpenrtion_single" 
-									:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''" 
 									v-for="item,index in designOpenrtionList" :key="item" 
 									:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
 									>
@@ -49,7 +49,6 @@
 								</div>
 								<div 
 									class="designOpenrtion_single" 
-									:class="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')?'isOverall':''" 
 									v-for="item,index in designList" :key="item" 
 									:title="(stateOverallSingle == 'single' && item.level2Type == 'Pattern')? $t('DesignPrintOperation.isOverall'):''"
 									>

src/component/HomePage/ExportModel.vue

@@ -198,11 +198,12 @@
 				<div class="exportCanvasBox_center">
 					<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
 				</div>
+				<div class="exportCanvasBox_scroll">
+					<div></div>
+				</div>
 			</div>
             
-			<!-- <div v-if="isMoible" class="exportCanvasBox_scroll">
+			
-				<div></div>
-			</div> -->
 			<div class="exportCanvasBox_bottom">
 				
 				<div class="exportCanvasBox_left_btn Guide_1_38">
@@ -308,6 +309,7 @@ import { useI18n } from "vue-i18n";
 import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
 import publish from "@/component/WorksPage/publish.vue";
 import liquefaction from "@/component/modules/liquefaction.vue";
+import { getMousePosition } from "@/tool/mdEvent";
 
 export default defineComponent({
     components: {
@@ -631,6 +633,69 @@ export default defineComponent({
 					driverObj__.moveNext()
 				}
 				
+				let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
+				let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
+				let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+				let mouseDownOperation = (event)=>{//按下
+					console.log(canvasWH.value.height , canvasBoxDom.offsetHeight,canvasBoxDom.offsetHeight , height);
+					let position = {
+						y:event.screenY,
+						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+					}
+						// let top = 
+					let scrollMousemove = (e)=>{
+						let height = scrollBox.style.height.split('px')[0]*1
+						let offsetTop = position.top+e.screenY - position.y
+						offsetTop = offsetTop <= 0? 0 : offsetTop
+						offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
+						scrollBox.style.marginTop = offsetTop+'px'
+						canvasBoxDom.scroll({
+							top: offsetTop*scale, // 纵向滚动距离
+							left: 0, // 横向滚动距离
+						});
+					}
+					let mouseMove = function(event){
+						let e = getMousePosition(event,false)
+						scrollMousemove(e)
+					}
+					let touchmove = function(event){
+						let e = getMousePosition(event,true)
+						scrollMousemove(e)
+					}
+					let mouseup = function(){
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
+					}
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+
+					// document.addEventListener('touchmove',scrollMousemove)
+					// scrollBox.addEventListener('touchend',mouseup)
+				}
+				canvasBoxDom.addEventListener('scroll', function() {
+					const scrollTop = canvasBoxDom.scrollTop;
+					scrollBox.style.marginTop = scrollTop/scale+'px'
+				});
+				let mousedown = function(event){
+					let e = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event){
+					let e = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				scrollBox.addEventListener('mousedown',mousedown)
+				scrollBox.addEventListener('touchstart',touchstart)
+				// scrollBox.removeEventListener('touchstart',mousedown)
+				// scrollBox.addEventListener('touchstart',mousedown)
+				
             });
 			
         };
@@ -2096,57 +2161,24 @@ export default defineComponent({
 		}
 	},
     watch: {
-        // 'canvasWH.height':{
+        'canvasWH.height':{
-        // 	handler(newVal,oldVal){
+        	handler(newVal,oldVal){
-		// 		if(!this.isMoible){
+				let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
-		// 			return
+				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
-		// 		}
+				if(!canvasBox || !scrollBox)return
-		// 		return
+				canvasBox.scroll({
-		// 		let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+					top: 0, // 纵向滚动距离
-		// 		let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
+					left: 0, // 横向滚动距离
-		// 		canvasBox.scroll({
+				});
-		// 			top: 0, // 纵向滚动距离
+				scrollBox.style.marginTop = 0+'px'
-		// 			left: 0, // 横向滚动距离
+				let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
-		// 		});
+				scrollBox.style.height = height +'px'
-		// 		scrollBox.style.marginTop = 0+'px'
+        	}
-		// 		let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
+        },
-		// 		scrollBox.style.height = height +'px'
-		// 		let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
-				
-
-		// 		let mousedown = (event)=>{//按下
-		// 			let position = {
-		// 				y:event.touches[0].screenY,
-		// 				top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
-		// 			}
-		// 			// let top = 
-		// 			let scrollMousemove = (e)=>{
-		// 				let height = scrollBox.style.height.split('px')[0]*1
-		// 				let offsetTop = position.top+e.touches[0].screenY - position.y
-		// 				offsetTop = offsetTop <= 0? 0 : offsetTop
-		// 				offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
-		// 				scrollBox.style.marginTop = offsetTop+'px'
-		// 				canvasBox.scroll({
-		// 					top: offsetTop*scale, // 纵向滚动距离
-		// 					left: 0, // 横向滚动距离
-		// 				});
-		// 			}
-		// 			let mouseup = ()=>{//抬起
-		// 				window.removeEventListener('touchmove',scrollMousemove)
-		// 				scrollBox.removeEventListener('touchend',mouseup)
-		// 			}
-		// 			window.addEventListener('touchmove',scrollMousemove)
-		// 			scrollBox.addEventListener('touchend',mouseup)
-		// 		}
-		// 		scrollBox.removeEventListener('touchstart',mousedown)
-		// 		scrollBox.addEventListener('touchstart',mousedown)
-				
-
-				
-        // 	}
-        // },
     },
-    mounted() {},
+    mounted() {
+		
+	},
 
     methods: {
 		
@@ -2456,6 +2488,7 @@ export default defineComponent({
             height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
+			// overflow: hidden;
 			position: relative;
 			.editFrontBack_pencilbtn{
 				position: absolute;
@@ -2465,31 +2498,18 @@ export default defineComponent({
 				pointer-events: none;
 				transform: translate(-50%,-50%);
 			}
-			&.exportCanvasBox_center::-webkit-scrollbar-button:single-button{
-			}
 			&.exportCanvasBox_center::-webkit-scrollbar {
 				/* 竖轴的宽度 */
-				width: 2rem;
+				display: none
-				/* 横轴的高度 */
-				height: 1rem;
-				transition: all .3s;
-			}
-			/* 进度 */
-			&.exportCanvasBox_center::-webkit-scrollbar-thumb {
-				border-radius: 1rem;
-				background: #543087;
-			}
-			/* 轨道 */
-			&.exportCanvasBox_center::-webkit-scrollbar-track {
-				border-radius: 1rem;
-				background: rgba(84, 48, 135,.2);
-					// background: rgba(238, 238, 244, 0);
 			}
         }
 		.exportCanvasBox_scroll{
 			height: 100%;
 			width: 2rem;
 			background: #d6cfe3;
+			position: absolute;
+			right: 0;
+			top: 0;
 			border-radius: 1rem;
 			div{
 				background: #543087;

src/component/HomePage/MoodboardUpload.vue

@@ -552,6 +552,8 @@ export default defineComponent({
         width: 47%;
 		display: flex;
 		flex-direction: column;
+		flex-shrink: 0;
+        width: 50%;
         // width: 50rem*1.2);
         .switch_type_list {
             display: flex;

src/component/HomePage/PrintboardUpload.vue

@@ -920,6 +920,9 @@ export default defineComponent({
 					position: relative;
 					cursor: pointer;
 					text-align: center;
+					&.modal_imgItem:nth-child(even) {
+						margin-right: 0;
+					}
 					img{
 						object-fit: cover;
 						height: 100%;

src/component/HomePage/SketchboardUpload.vue

@@ -891,6 +891,9 @@ export default defineComponent({
 					position: relative;
 					cursor: pointer;
 					text-align: center;
+					&.modal_imgItem:nth-child(even) {
+						margin-right: 0;
+					}
 					&:hover .delete_like_file_block{
 						display: block;
 						opacity: 1;

src/component/HomePage/layout.vue

@@ -30,7 +30,7 @@
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
 					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" @mousedown="setpitch(item,index)"  @touchstart="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':item.angle?`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`:`translate(-50%, -50%) scale(${item.zoom}) rotateZ(${item.angle}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
+						<img crossOrigin="anonymous" :src="item.imgUrl" :style="{'transform':`translate(-50%, -50%) scale(${item.zoom?item.zoom:1}) rotateZ(${item.angle?item.angle:0}deg)`}"  draggable="false" :class="moodbClassName[index]" v-modelImg> 
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>

src/component/HomePage/productImg.vue

@@ -25,7 +25,7 @@
 				<div class="productImg_left">
 					<div class="Guide_1_32">
 						<div class="productImg_content_item_title productImg_content_item_title_menu">
-							<span>{{$t('ProductImg.MagicTools')}}</span>
+							<!-- <span>{{$t('ProductImg.MagicTools')}}</span> -->
 							<generalMenu class="productImg_content_item_title_menubtn" :class="{hideEvents:driver__.driver}" :dataList="productimgMenuList" @setprintModel="setproduct" :item="productimgMenu"></generalMenu>
 						</div>
 						<div class="input_border productImg_content_item_generate">
@@ -899,7 +899,11 @@ methods: {
 	.productImg_content_item_imgBox{
 		.content_item_imgBox_itemImg{
 			width: auto;
+			max-width: 9rem;
 			flex-shrink: 0;
+			img{
+				object-fit: contain;
+			}
 		}
 	}
 	.productImg_content_item_generate{

src/component/LoginPage/verificationCodeInput.vue

@@ -2,6 +2,7 @@
   <div id="app">
     <div class="captcha">
       <input v-for="(c, index) in getCtData" :key="index"
+		type="number"
         v-model="getCtData[index]" ref="input" 
         @input="e => {onInput(e.target.value, index)}" 
         @keydown.delete="e=>{onKeydown(e.target.value, index)}"

src/component/modules/generalMiniCanvas.vue

@@ -358,10 +358,12 @@ export default defineComponent({
 					)
 					exportCanvas.add(obj)
 				})
-				let data = exportCanvas.toDataURL('jpg')
+				let data = canvas.toDataURL({
+					format: 'png',
+					quality: 1 // 质量参数，范围 0.0 - 1.0
+				});
 				cancelDsign()
 				clearCanvas()
-				console.log(data);
 				emit('submitBase64Data',data)
 			})
 		}

src/lang/cn.ts

@@ -67,7 +67,7 @@ export default {
 		Scale:'倍率',
 		Cancel:'取消',
 		size:'区域',
-		density:'密度',
+		density:'强度',
 		jsContent1:"您是否已经保存画布内容？如果没有，请再关闭前点击'保存'。",
 		jsContent2:'我们只支持对印花进行超分',
 		jsContent3:'您的积分小于一次超分',

src/tool/mdEvent.js

@@ -7,6 +7,8 @@ const getMousePosition = (e,bor,dom) => {
 			offsetY: touch.clientY - e.target.getBoundingClientRect().top,
 			clientX:touch.clientX,
 			clientY:touch.clientY,
+			screenX:touch.screenX,
+			screenY:touch.screenY,
 			target:e.target,
 		}
 		if(dom){
@@ -19,6 +21,8 @@ const getMousePosition = (e,bor,dom) => {
 			offsetY:e.offsetY,
 			clientX:e.clientX,
 			clientY:e.clientY,
+			screenX:e.screenX,
+			screenY:e.screenY,
 			target:e.target,
 		}
 	}

src/views/HomeRecommend.vue

@@ -1,69 +1,53 @@
 <template>
     <div class="homeRecommend_max Guide_1_16_1">
+        <header class="homeRecommend_heade">
+            <div class="homeRecommend_right_content">
+                <div class="homeRecommend_user_content">
+                    <img
+						class="homeRecommend_logo"
+						@click="turnToNewPage('https://www.aidlab.hk/en/')"
+						src="@/assets/images/loginPage/aida_logo.png"
+					/>
+                </div>
+            </div>
+			<div class="homeRecommend_right">
+				<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
+				<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
+				<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
+			</div>
+			<div class="homeRecommend_right" v-if="systemUser.value == -1">
+				<div class="started_btn" @click="setLogin">Login</div>
+				<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
+			</div>
+        </header>
 		<div class="homeRecommend_content_body">
-			<div class="homeRecommend_content_sticky">
+			<div class="homeRecommend_content_body_recommend" id="aaaa">
-				<header class="homeRecommend_heade">
+				<div class="content_body_recommend_left mdhidden">
-					<div class="homeRecommend_right_content">
+					<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
-						<div class="homeRecommend_user_content">
+					<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
-							<img
+					<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
-								class="homeRecommend_logo"
+					<img class="content_body_img4 content_body_img" src="/image/mainImg/img4.png" alt="">
-								@click="turnToNewPage('https://www.aidlab.hk/en/')"
+					<img class="content_body_img5 content_body_img" src="/image/mainImg/img5.png" alt="">
-								src="@/assets/images/loginPage/aida_logo.png"
+				</div>
-							/>
+				<div class="content_body_recommend_center content_body_text">
-						</div>
+					<div class="content_body_recommend_center_title">
+						<h1>AiDA</h1>
+						<h3>bloom your creativity</h3>
 					</div>
-					<div class="homeRecommend_right">
+					<div class="content_body_recommend_center_btn">
-						<a class="started_btn" v-if="systemUser.value == 0" href="https://code-create.com.hk/aida/" target="_blank">Upgrade to an official user</a>
+						<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
-						<div class="started_btn" v-if="systemUser.value == 1 && !isMoblie" @click="goHome">Home</div>
+						<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
-						<div class="started_btn started_btn2" v-if="systemUser.value != -1" @click="logout">log off</div>
 					</div>
-					<div class="homeRecommend_right" v-if="systemUser.value == -1">
+				</div>
-						<div class="started_btn" @click="setLogin">Login</div>
+				<div class="content_body_recommend_right mdhidden">
-						<div class="started_btn started_btn2" @click="setRegister">Visitor registration</div>
+					<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
-					</div>
+					<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
-				</header>
+					<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
-				<div class="homeRecommend_content_body_recommend">
+					<img class="content_body_img4 content_body_img" src="/image/mainImg/img9.png" alt="">
-					<div class="content_body_recommend_top">
+					<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
-						<h1>AIDA</h1>
-						<div class="zindex">
-							Blooming <br>
-							Your Creativity
-						</div>
-					</div>
-					<img src="../../public/video/homeVideo.gif" alt="">
-					<!-- <video src="@/assets/video/homeVideo.mov" autoplay loop muted controls="controls" type="video/quicktime"></video> -->
-					<div class="content_body_recommend_content">
-						<div class="content_body_recommend_content_left">
-							Start enjoying the amazing experiences <br>
-							of using our AI-based <br>
-							interactive design assistant.
-						</div>
-						<div class="content_body_recommend_content_right zindex" @click="setLogin">
-							<i class="fi fi-rr-arrow-small-right"></i> Start Creating
-						</div>
-					</div>
-					<!-- <div class="content_body_recommend_bottom ">
-						<div class="zindex" @click="startCreating">Start Creating</div>
-					</div> -->
-
 				</div>
 			</div>
-			
+			<Works :isScroll="false"></Works>
-			<!-- <div class="content_body_recommend_center content_body_text">
-				<div class="content_body_recommend_center_title">
-					<h1>AiDA</h1>
-					<h3>bloom your creativity</h3>
-				</div>
-				<div class="content_body_recommend_center_btn">
-					<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">SUBSCRIBE NOW</a>
-					<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
-				</div>
-			</div> -->
-			<div style="background-color: #fff;position: relative;">
-				<!-- <navRouter :routerList="navRouterList"></navRouter> -->
-				<router-view :isScroll="false"></router-view>
-			</div>
-			
 		</div>
 		<div class="homeRecommend_content_adminTop" @click="setAdminUp">
 			<i class="fi fi-rr-arrow-small-up"></i>
@@ -74,22 +58,27 @@
 </template>
 <script >
 import { defineComponent, createVNode, ref , nextTick,computed, onMounted } from "vue";
-import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
 import Habit from "@/component/Detail/habit.vue";
 import { Https } from "@/tool/https";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import Works from "@/views/HomeView/Works.vue";
 import { useStore } from "vuex";
+import { setLang } from "@/tool/guide";
+import { useI18n } from "vue-i18n";
 import { useRouter } from 'vue-router';
 import { gsap, TweenMax } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import registerModel from '@/component/Login/registerModel.vue'
-import navRouter from "@/component/modules/navRouter.vue";
 export default defineComponent({
     components: {
         VerificationCodeInput,
 		Habit,
+		Works,
 		registerModel,
-		navRouter,
     },
 	setup(){
         const store = useStore();
@@ -99,17 +88,6 @@ export default defineComponent({
 		let systemUser = computed(()=>{
 			return store.state.UserHabit.systemUser
 		})
-		let navRouterList = [
-			{
-				routerName:['SquareWorks'],
-				router:'/Square/works',
-				name:'GALLERY'
-			},{
-				routerName:['SquareEvents','SquareEventsDetail'],
-				router:'/Square/events',
-				name:'EVENTS'
-			},
-		]
 		let setLogin = ()=>{
 			router.push("/login");
 		}
@@ -122,7 +100,7 @@ export default defineComponent({
 			// router.push("/register");
 		}
 		let setAdminUp = ()=>{
-			let scrollDom = document.querySelector('.homeRecommend_max')
+			let scrollDom = document.querySelector('.homeRecommend_content_body')
 			scrollDom.scrollTo({
 				top: 0,
 				behavior: 'smooth' // 平滑滚动到顶部
@@ -138,42 +116,18 @@ export default defineComponent({
 			// console.log(getCookie("token"));
 			Https.axiosPost(Https.httpUrls.accountLogout, data).then((rv) => {
 				clonAllCookie();
-			}).catch((err) => {
+			});
-				clonAllCookie();
-			})
-			;
 		}
 		let goHome = ()=>{
 			router.push('/home');
 		}
-		let startCreating = ()=>{
-			if(systemUser.value.value == -1){
-				setLogin()
-			}else if(systemUser.value.value == 0){
-				window.open('https://code-create.com.hk/aida/','_blank')
-			}else if(systemUser.value.value == 1){
-				goHome()
-			}
-		}
 		onMounted(()=>{
-			let scrollDom = document.querySelector('.homeRecommend_max')
-			scrollDom.addEventListener('scroll', function() {
-				if(scrollDom.scrollTop > 200){
-					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '1'
-					document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 999
-				}else{
-					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
-					document.querySelector('.homeRecommend_content_adminTop').style.opacity = '0'
-					document.querySelector('.homeRecommend_content_adminTop').style.zIndex = 0
-				}
-			});
 			if(window.innerWidth < 768){
 				isMoblie.value = true
 			}
 		})
 		return {
 			systemUser,
-			navRouterList,
 			setLogin,
 			registerModel,
 			setRegister,
@@ -181,7 +135,6 @@ export default defineComponent({
 			logout,
 			goHome,
 			isMoblie,
-			startCreating,
 		}
 	},
     data() {
@@ -194,49 +147,49 @@ export default defineComponent({
 		// }
 	},
     mounted() {
-		// nextTick().then(()=>{
+		nextTick().then(()=>{
-		// 	let dom = document.querySelector('.homeRecommend_content_body')
+			let dom = document.querySelector('.homeRecommend_content_body')
-		// 	let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
+			let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
-		// 	let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
+			let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
-		// 	for (let index = 0; index < codeTween.length; index++) {
+			for (let index = 0; index < codeTween.length; index++) {
-		// 		gsap.from(codeTween[index],.5, {scale:.6 },);
+				gsap.from(codeTween[index],.5, {scale:.6 },);
-		// 		gsap.registerPlugin(ScrollTrigger);
+				gsap.registerPlugin(ScrollTrigger);
-		// 		let tl1 = gsap.timeline();
+				let tl1 = gsap.timeline();
-		// 		tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
+				tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
-		// 		ScrollTrigger.create({
+				ScrollTrigger.create({
-		// 			trigger: codeTween[index], // 触发器元素
+					trigger: codeTween[index], // 触发器元素
-		// 			start: "top 0%", // 滚动触发器的起始滚动位置
+					start: "top 0%", // 滚动触发器的起始滚动位置
-		// 			end: '200% 20%',   // 滚动触发器的结束滚动位置
+					end: '200% 20%',   // 滚动触发器的结束滚动位置
-		// 			// markers: true, // 开启标注功能
+					// markers: true, // 开启标注功能
-		// 			scrub: true,
+					scrub: true,
-		// 			animation:tl1,
+					animation:tl1,
-		// 			scroller:dom,//设置指定元素为滚动依据
+					scroller:dom,//设置指定元素为滚动依据
-		// 			scrub:2,
+					scrub:2,
-		// 			// onUpdate:(v)=>{
+					// onUpdate:(v)=>{
-		// 			// 	if(v.progress < 0.1){
+					// 	if(v.progress < 0.1){
-		// 			// 		v.trigger?.classList.remove('active')
+					// 		v.trigger?.classList.remove('active')
-		// 			// 	}else{
+					// 	}else{
-		// 			// 		v.trigger?.classList.add('active')
+					// 		v.trigger?.classList.add('active')
-		// 			// 		// v.trigger?.classList.add('active')
+					// 		// v.trigger?.classList.add('active')
-		// 			// 	}
+					// 	}
-		// 			// }
+					// }
-		// 		});
+				});
-		// 	}
+			}
-		// 	gsap.registerPlugin(ScrollTrigger);
+			gsap.registerPlugin(ScrollTrigger);
-		// 	let tl1 = gsap.timeline();
+			let tl1 = gsap.timeline();
-		// 	tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
+			tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
-		// 	ScrollTrigger.create({
+			ScrollTrigger.create({
-		// 		trigger: codeTweenText, // 触发器元素
+				trigger: codeTweenText, // 触发器元素
-		// 		start: "top 0%", // 滚动触发器的起始滚动位置
+				start: "top 0%", // 滚动触发器的起始滚动位置
-		// 		end: '200% 20%',   // 滚动触发器的结束滚动位置
+				end: '200% 20%',   // 滚动触发器的结束滚动位置
-		// 		// markers: true, // 开启标注功能
+				// markers: true, // 开启标注功能
-		// 		scrub: true,
+				scrub: true,
-		// 		animation:tl1,
+				animation:tl1,
-		// 		scroller:dom,//设置指定元素为滚动依据
+				scroller:dom,//设置指定元素为滚动依据
-		// 		scrub:2,
+				scrub:2,
 				
-		// 	});
+			});
-		// })
+		})
     },
     methods: {
 		
@@ -250,11 +203,7 @@ export default defineComponent({
 	display: flex;
 	height: 100%;
 	flex-direction: column;
-	overflow-y: auto;
+	
-	overflow-x: hidden;
-	&.homeRecommend_max::-webkit-scrollbar {
-		display: none;
-	}
 	.homeRecommend_content_body{
 		flex: 1;
 	}
@@ -263,11 +212,9 @@ export default defineComponent({
     display: flex;
 	justify-content: space-between;
 	// padding: 0 30px;
-	// padding: 0 9rem;
+	padding: 0 9rem;
-	padding: 4rem 2rem;
-	padding-bottom: 0;
     width: 100%;
-    // height: 7rem;
+    height: 7rem;
 	flex-shrink: 0;
     background: rgba(255, 255, 255, 0.2);
     // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
@@ -336,74 +283,142 @@ export default defineComponent({
     
 }
 .homeRecommend_content_body{
-	// overflow-y: auto;
+	overflow-y: auto;
-	// overflow-x: hidden;
+	overflow-x: hidden;
-	
+	&.homeRecommend_content_body::-webkit-scrollbar {
-	// &.homeRecommend_content_body::-webkit-scrollbar {
+		display: none;
-	// 	display: none;
-	// }
-	.homeRecommend_content_sticky{
-		position: sticky;
-		top: 0;
-	}
-	.zindex{
-		z-index: 2;
-	}
-	@media (max-width: 768px) {
-		br{
-			display: none;
-		}
 	}
 	.homeRecommend_content_body_recommend{
-		padding: 0 2rem;
+		// display: flex;
-		padding-right: 4rem;
+		// justify-content: center;
+		position: relative;
 		border-bottom: 1px solid #ececec;
-		--margin:3rem;
+		
-		padding-top: 10rem;
+		.content_body_recommend_left,
-		padding-bottom: 15rem;
+		.content_body_recommend_right{
-		@media (max-width: 768px) {
-			padding-right: 2rem;
-		}
-		img{
 			position: absolute;
 			top: 0;
-			width: 50%;
+			img{
-			right: 0;
+				border-radius: 2rem;
-			top: 9%;
+				position: absolute;
-			width: 70%;
+				width: 20px;
-			@media (max-width: 768px) {
+				object-fit: cover;
-				position: relative;
-				top: 0;
-				left: 50%;
-				transform: translateX(-50%);
-			}
-		}
-		.content_body_recommend_top,.content_body_recommend_content{
-			display: flex;
-			justify-content: space-between;
-			@media (max-width: 768px) {
-				flex-direction: column;
-			}
-		}
-		.content_body_recommend_top{
-			h1{
-				font-family: 'pixel';
-				line-height: .6;
-				font-size: 50rem;
-				margin: 0;
-				line-height: 1.2;
-				@media (max-width: 768px) {
-					font-size: 30rem;
-					text-align: center;
-				}
-			}
-			div{
-				font-size: 5rem;
-				@media (max-width: 768px) {
-					text-align: center;
-				}
 			}
 			
+		}
+		--margin:3rem;
+		.content_body_recommend_right{
+			right: 0;
+			.content_body_img1{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: 10rem;
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img2{
+				width: 15rem;
+				height: 15rem;
+				object-fit: cover;
+				top: calc(30rem + var(--margin));
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img3{
+				top: 38rem;
+				width: 30rem;
+				height: 30rem;
+				object-fit: cover;
+				right: calc(-13rem + var(--margin));
+			}
+			.content_body_img4{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: 51rem;
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img5{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: 15rem;
+				right: 0;
+			}
+		}
+		.content_body_recommend_left{
+			left: 0;
+			.content_body_img1{
+				width: 15rem;
+				height: 15rem;
+				object-fit: cover;
+				top: 5rem;
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img2{
+				width: 25rem;
+				height: 25rem;
+				object-fit: cover;
+				top: calc(20rem + var(--margin));
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img3{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: calc(10rem + var(--margin));
+				// left: calc(0 + var(--margin));
+			}
+			.content_body_img4{
+				width: 30rem;
+				height: 30rem;
+				object-fit: cover;
+				top: 36rem;
+				left: calc(-13rem + var(--margin));
+			}
+			.content_body_img5{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: 51rem;
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img6{
+				width: 20rem;
+				height: 20rem;
+				object-fit: cover;
+				top: 20rem;
+				left: calc(0 + var(--margin));
+			}
+		}
+		.content_body_recommend_center{
+			padding: 20rem 0;
+			text-align: center;
+			width: 50%;
+			position: relative;
+			left: 50%;
+			transform: translateX(-50%);
+			z-index: 2;
+			opacity: 0;
+			@media (max-width: 768px) {
+				width: 80%;
+			}
+			.content_body_recommend_center_title{
+				h1{
+					line-height: 1;
+					font-size: 13rem;
+					font-weight: 900;
+					margin: 7rem;
+					div{
+						color: #341e57;
+					}
+				}
+				h3{
+					line-height: 1;
+					margin: 7rem;
+					font-size: 5rem;
+					font-weight: 900;
+				}
+			}
 			.content_body_recommend_center_btn{
 				display: flex;
 				justify-content: center;
@@ -413,36 +428,6 @@ export default defineComponent({
 				}
 			}
 		}
-		.content_body_recommend_content{
-			align-items: center;
-			@media (max-width: 768px) {
-				align-items: flex-start;
-			}
-			.content_body_recommend_content_right{
-				font-family: 'pixel';
-				font-size: 15rem;
-				background: linear-gradient(90deg, #be5865, #39215b);
-				-webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
-				background-clip: text;
-				line-height: 1;
-				i{
-					font-size: 6rem;
-				}
-			}
-		}
-		.content_body_recommend_bottom{
-			text-align: right;
-			div{
-				padding: 0 1rem;
-				display: inline-block;
-				background: #000000;
-				color: #fff;
-				border-radius: 4px;
-				position: relative;
-				cursor: pointer;
-			}
-		}
 	}
 }
 .homeRecommend_content_adminTop{
@@ -458,9 +443,7 @@ export default defineComponent({
     align-items: center;
     justify-content: center;
 	background: #fff;
-	z-index: 0;
+	z-index: 999;
-	transition: all .3s;
-	opacity: 0;
 	i{
 		display: flex;
 		font-size: 3rem;

src/views/HomeView/HomeView.vue

@@ -1347,7 +1347,7 @@ export default defineComponent({
 							padding: 0 1.8rem 0 1.2rem;
 							background: rgba(255, 255, 255, 0.2);
 							height: calc(50% - 4.5rem);
-							min-height: 280px;
+							// min-height: 280px;
 
 							.right_content_img_block {
 								// overflow-y: auto;
@@ -1404,7 +1404,8 @@ export default defineComponent({
 									margin-right: 1rem;
 									// margin-bottom: 1rem;
 									min-width: 127px;
-									min-height: 271px;
+									// min-height: 271px;
+									max-height: 100%;
 
 									display: inline-block;
 									position: relative;
@@ -1430,6 +1431,7 @@ export default defineComponent({
 									.content_img {
 										max-width: 100%;
 										max-height: 100%;
+										object-fit: contain;
 									}
 
 									.icon_like {

src/views/HomeView/history.vue

@@ -8,7 +8,6 @@
             <div class="page_content_body">
                 <!-- <HeaderComponent></HeaderComponent> -->
                 <div class="history_page_body">
-                    <div class="history_header">{{ $t('HistoryPage.History') }}</div>
                     <div class="history_table_search">
                        
                         <!-- <div class="content_search_block">