修复部分bug和调整首页的移动端布局

.env.dev

@@ -3,8 +3,8 @@ NODE_ENV = 'development'
 # VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 
 # VUE_APP_BASE_URL = 'http://18.167.251.121:10086'
-# VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
+VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
-VUE_APP_BASE_URL = 'https://api.aida.com.hk'
+# VUE_APP_BASE_URL = 'https://api.aida.com.hk'
 # 佩佩
 # VUE_APP_BASE_URL = 'http://192.168.1.7:5567'
 # 海波

package-lock.json

@@ -24,6 +24,7 @@
         "md5": "^2.3.0",
         "quantize": "^1.0.2",
         "sortablejs": "^1.15.0",
+        "swiper": "^11.1.4",
         "vue": "^3.2.13",
         "vue-class-component": "^8.0.0-0",
         "vue-cropper": "^1.0.5",
@@ -10800,6 +10801,24 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
@@ -20807,6 +20826,11 @@
         }
       }
     },
+    "swiper": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.1.4.tgz",
+      "integrity": "sha512-1n7kbYJB2dFEpUHRFszq7gys/ofIBrMNibwTiMvPHwneKND/t9kImnHt6CfGPScMHgI+dWMbGTycCKGMoOO1KA=="
+    },
     "table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "md5": "^2.3.0",
     "quantize": "^1.0.2",
     "sortablejs": "^1.15.0",
+    "swiper": "^11.1.4",
     "vue": "^3.2.13",
     "vue-class-component": "^8.0.0-0",
     "vue-cropper": "^1.0.5",

src/assets/style/style.css

@@ -15,6 +15,11 @@ input {
   outline: none;
   border: 0.1rem solid #dcdfe6;
 }
+@media (max-width: 768px) {
+  .mdhidden {
+    display: none !important;
+  }
+}
 select {
   height: 2.5rem;
   border: 0.2rem solid #c4c4c4 !important;

src/assets/style/style.less

@@ -16,6 +16,11 @@ input{
 	outline: none;
 	border: .1rem solid #dcdfe6;
 }
+@media (max-width: 768px) {
+	.mdhidden{
+		display: none !important;				
+	}
+}
 select{
 	height: 2.5rem;
 	border: 0.2rem solid #c4c4c4 !important;

src/component/HomePage/sketchCategory.vue

@@ -108,6 +108,7 @@ export default defineComponent({
 			for (let item of props.generateList) {
 				item.categoryShow = false;
 			}
+			file.level2Type = cate.value;
 			file.categoryValue = cate.value;
 			file.category = cate.name;
 			if(props.isSetSketchCategory){

src/component/Login/registerModel.vue

@@ -3,7 +3,7 @@
 		class="registerModel_modal generalModel"
 		v-model:visible="registerModel"
 		:footer="null"
-		width="50%"
+		:width="pageWidth"
 		:maskClosable="false"
 		:centered="true"
 		:closable="false"
@@ -248,6 +248,7 @@ export default defineComponent({
 		let register = reactive({
 			registerModel:false,
 			registerModelMask:false,
+			pageWidth:'50%'
 		})
         return{
 			store,
@@ -555,6 +556,27 @@ export default defineComponent({
     },
 });
 </script>
+<style lang="less">
+.registerModel_modal{
+	@media (max-width: 768px) {
+		// box-shadow: none;
+		// height: 100%;
+		margin: 0;
+		max-width: 95%;
+		&.generalModel{
+			.ant-modal-content{
+				// height: 100%;
+			}
+			.ant-modal-body{
+				padding: 6rem 4rem;
+				// height: 100%;
+			}
+		}
+	}
+	
+}
+	
+</style>
 <style lang="less" scoped>
 .login_page {
     width: 100%;
@@ -568,7 +590,7 @@ export default defineComponent({
             left: 50%;
             transform: translate(-50%,-50%);
             // width: 60rem;
-			width: 70%;
+			width: 80%;
             background: #FFFFFF;
             // box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
             border-radius: 1rem;
@@ -577,7 +599,9 @@ export default defineComponent({
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-
+			@media (max-width: 768px) {
+				padding: 0;
+			}
 			.login_content_left{
 				width: 100%;
 				.login_form_email{

src/main.ts

@@ -14,6 +14,9 @@ import i18n from './lang/index'
 import { getBrowserInfo, murmur } from './tool/util'
 import "../node_modules/@flaticon/flaticon-uicons/css/all/all.css"
 import { Https } from "@/tool/https";
+import 'swiper/css';
+import 'swiper/css/pagination';
+
 // import "@/tool/color-thief.js";
 // import "@/tool/fabric.brushes.js";
 // import "@/tool/fabric.min.js";

src/views/HomeRecommend.vue

@@ -12,7 +12,7 @@
             </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" @click="goHome">Home</div>
+				<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">
@@ -22,7 +22,7 @@
         </header>
 		<div class="homeRecommend_content_body">
 			<div class="homeRecommend_content_body_recommend" id="aaaa">
-				<div class="content_body_recommend_left">
+				<div class="content_body_recommend_left mdhidden">
 					<img class="content_body_img1 content_body_img" src="/image/mainImg/img1.png" alt="">
 					<img class="content_body_img2 content_body_img" src="/image/mainImg/img2.png" alt="">
 					<img class="content_body_img3 content_body_img" src="/image/mainImg/img3.png" alt="">
@@ -39,7 +39,7 @@
 						<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">START TRIAL</a>
 					</div>
 				</div>
-				<div class="content_body_recommend_right">
+				<div class="content_body_recommend_right mdhidden">
 					<img class="content_body_img1 content_body_img" src="/image/mainImg/img6.png" alt="">
 					<img class="content_body_img2 content_body_img" src="/image/mainImg/img7.png" alt="">
 					<img class="content_body_img3 content_body_img" src="/image/mainImg/img8.png" alt="">
@@ -57,7 +57,7 @@
 	
 </template>
 <script >
-import { defineComponent, createVNode, ref , nextTick,computed } from "vue";
+import { defineComponent, createVNode, ref , nextTick,computed, onMounted } from "vue";
 import { isEmail } from "@/tool/util";
 import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
@@ -84,6 +84,7 @@ export default defineComponent({
         const store = useStore();
 		const router = useRouter();
 		let registerModel = ref()
+		let isMoblie = ref(false)
 		let systemUser = computed(()=>{
 			return store.state.UserHabit.systemUser
 		})
@@ -92,6 +93,9 @@ export default defineComponent({
 		}
 		let setRegister = () =>{
 			// ler
+			if(window.innerWidth < 768){
+				registerModel.value.pageWidth = '100%'
+			}
 			registerModel.value.init()
 			// router.push("/register");
 		}
@@ -117,6 +121,11 @@ export default defineComponent({
 		let goHome = ()=>{
 			router.push('/home');
 		}
+		onMounted(()=>{
+			if(window.innerWidth < 768){
+				isMoblie.value = true
+			}
+		})
 		return {
 			systemUser,
 			setLogin,
@@ -125,6 +134,7 @@ export default defineComponent({
 			setAdminUp,
 			logout,
 			goHome,
+			isMoblie,
 		}
 	},
     data() {
@@ -193,6 +203,7 @@ export default defineComponent({
 	display: flex;
 	height: 100%;
 	flex-direction: column;
+	
 	.homeRecommend_content_body{
 		flex: 1;
 	}
@@ -209,8 +220,10 @@ export default defineComponent({
     // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
     position: relative;
     align-items: center;
-
 	z-index: 1049;
+	@media (max-width: 768px) {
+		z-index: 1000;
+	}
 	background-color: #fff;
 	.homeRecommend_right{
 		width: 33%;
@@ -386,6 +399,9 @@ export default defineComponent({
 			transform: translateX(-50%);
 			z-index: 2;
 			opacity: 0;
+			@media (max-width: 768px) {
+				width: 80%;
+			}
 			.content_body_recommend_center_title{
 				h1{
 					line-height: 1;

src/views/HomeView/Works.vue

@@ -24,6 +24,7 @@
 		</div>
 		
 		<newScaleImage ref="newScaleImage" @deletePorfolio="deletePorfolio"></newScaleImage>
+		<newScaleImageMobile ref="newScaleImageMobile" @deletePorfolio="deletePorfolio"></newScaleImageMobile>
 		<!-- <RobotAssist></RobotAssist> -->
 
     </div>
@@ -40,6 +41,8 @@ import { useStore } from "vuex";
 import { Https } from "@/tool/https";
 import { getCookie } from "@/tool/cookie";
 import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
+import newScaleImageMobile from "@/component/WorksPage/newScaleImageMobile.vue";
+
 import { useI18n } from "vue-i18n";
 import { ElCascader } from 'element-plus'
 import { remove } from "jszip";
@@ -49,6 +52,7 @@ import Falls from "@/component/WorksPage/Falls.vue";
 export default defineComponent({
     components: {
         newScaleImage,
+		newScaleImageMobile,
 		Falls,
 		generalMenu,
     },
@@ -121,6 +125,7 @@ export default defineComponent({
 			value:'all',
 		})
 		let newScaleImage:any = ref()
+		let newScaleImageMobile:any = ref()
 		let fall:any = ref()
 		let setWorksSelect = (val:any) => {
 			filter.worksSelect = val.value
@@ -141,8 +146,16 @@ export default defineComponent({
 		let likeFile = (item:any,type:string) => {
 		}
 		let getImgScale = (item:any)=>{
-			newScaleImage.value.scaleImageMask = true
+			let newScaleModel = null
-			newScaleImage.value.init(item)
+			if(window.innerWidth < 768){
+				newScaleModel = newScaleImageMobile
+			}else{
+				newScaleModel = newScaleImage
+				newScaleModel.value.scaleImageMask = true
+
+			}
+			newScaleModel.value.init(item)
+			
 		}
 		let getPorfolio = ()=>{
 			let data = filter.getListDate
@@ -216,6 +229,7 @@ export default defineComponent({
 			menuList,
 			selectMenu,
 			newScaleImage,
+			newScaleImageMobile,
 			fall,
 			setWorksSelect,
 			likeFile,

src/views/LoginPage.vue

@@ -139,7 +139,7 @@
 				</div>
                 
                 <!-- 邮箱登录 end -->
-				<div class="login_content_right">
+				<div class="login_content_right mdhidden">
 					<img
 						src="@/assets/images/loginPage/aida_logo_centent.jpg"
 					/>
@@ -477,9 +477,13 @@ export default defineComponent({
 						this.store.commit("setSystemUser", rv.systemUser)
 						if(rv.systemUser == 0){
 							this.turnToHomePage('/');
+						}else{
+							if(window.innerWidth < 768){
+								this.turnToHomePage('/');
 							}else{
 								this.turnToHomePage('/home');
 							}
+						}
 						sessionStorage.setItem('isTimeOne', JSON.stringify(false));//是否需要公告 提示 弹窗
 						let randomNum:any = Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
 						sessionStorage.setItem('sessionId', randomNum);  
@@ -585,9 +589,14 @@ export default defineComponent({
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-
+			@media (max-width: 768px) {
+				width: 100%;
+			}
 			.login_content_left{
 				width: 40%;
+				@media (max-width: 768px) {
+					width: 100%;
+				}
 				.login_form_email{
 					position: absolute;
 					left: 0;