events页面

src/component/Events/eventsDetail.vue

@@ -0,0 +1,188 @@
+<template>
+    <div class="eventsDetail_page" :class="{active:isScroll}">
+		<div class="modal_title_text modal_search">
+			<div v-show="isScroll || systemUser.value>-1" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
+				{{ item.name }}
+			</div>
+			<div v-show="!isScroll && systemUser.value == -1" class="modal_title_text_assistant active">All</div>
+		</div>
+        <div class="page_content" >
+			<div class="page_content_itemBox">
+				<div class="page_content_item" v-for="item in worksList" :key="item.id" @click="setWorksDetail(item)">
+					<div class="page_content_item_img">
+						<img :src="item.imgUrl" alt="">
+					</div>
+					<div class="page_content_item_time">{{ item.time }}</div>
+					<div class="page_content_item_title">{{ item.title }}</div>
+				</div>
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
+// import HeaderComponent from "@/component/HomePage/Header.vue";
+// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import { Https } from "@/tool/https";
+import { useI18n } from "vue-i18n";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { useStore } from "vuex";
+export default defineComponent({
+    components: {
+		generalMenu,
+    },
+	props:{
+		isScroll:{
+			 type:Boolean,
+			 default:true,
+		 },
+	},
+    setup() {
+		// console.log(this.$route.params.id);
+        const store = useStore();
+		let filter:any = reactive({
+			worksSelect: 'all',
+			worksType: [
+				{
+					name: useI18n().t('works.all'),
+					value: 'all'
+				},
+				// {
+				// 	name: useI18n().t('works.FavoriteWorks'),
+				// 	value: 'favoriteWorks'
+				// },
+				// {
+				// 	name: useI18n().t('works.MyWorks'),
+				// 	value: 'myWorks'
+				// },
+			],
+			worksList: [
+				{
+					title:'Source Fashion 2024',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},{
+					title:'Source Fashion 2024 Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},{
+					title:'Source Fashion 2024',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},
+			],
+			getListDate:{
+				"getLikePortfolio": 0,
+				"getMyPortfolio": 0,
+				page:1,
+				size:10,
+			},
+			isShowMark:false,
+			isNoData:false,//如果数据为空就不加载
+		})
+		let systemUser = computed(()=>{
+			return store.state.UserHabit.systemUser
+		})
+		let selectMenu:any = ref({
+			label:'全部',
+			value:'all',
+		})
+		let setWorksSelect = (val:any) => {
+			// filter.worksSelect = val.value
+			// filter.getListDate.getLikePortfolio = 0
+			// filter.getListDate.getMyPortfolio = 0
+			// if(val.value == 'all'){
+			// }else if(val.value == 'favoriteWorks'){
+			// 	filter.getListDate.getLikePortfolio = 1
+			// }else if(val.value == 'myWorks'){
+			// 	filter.getListDate.getMyPortfolio = 1
+			// }
+			// filter.getListDate.page = 0
+			filter.isShowMark = false
+			filter.isNoData = false
+			// getPorfolio()
+		}
+		let likeFile = (item:any,type:string) => {
+		}
+		let getImgScale = (item:any)=>{
+		}
+		let getPorfolio = ()=>{
+			let data = filter.getListDate
+			if(filter.isShowMark && !filter.isNoData)return
+			filter.isShowMark = true
+			Https.axiosPost(Https.httpUrls.getPorfolio, data)
+                .then((rv) => {
+					if (rv.content.length > 0) {
+
+					} else {
+						filter.isNoData = true
+					}
+					filter.isShowMark = false
+                })
+                .catch((rv) => {
+					filter.isShowMark = false
+					filter.isNoData = true
+				});
+		}
+		let {t} = useI18n()
+		let setprintModel= (data:any)=>{
+			selectMenu.value = data
+		}
+		let setPortfolioLike = (value:any) =>{
+			// let data = {id:value.id}
+			// Https.axiosGet(Https.httpUrls.portfolioLike, {params:data})
+			// .then((rv) => {
+				
+			// })
+			// .catch((rv) => {
+			// });
+		}
+		
+		onMounted (()=>{
+			// filter.isShowMark = false
+			// filter.isNoData = false
+			// getPorfolio()
+			// let worksPage:any = document.querySelector('.eventsDetail_page')
+			// let imgParent:any = document.querySelector('.eventsDetail_page .page_loading')
+			// new IntersectionObserver(
+			// 	(entries, observer) => {
+			// 		// 如果不是相交，则直接返回
+			// 		if (!entries[0].intersectionRatio) return;
+			// 		filter.getListDate.page += 1
+			// 		getPorfolio()
+			// 	},
+			// ).observe(imgParent);
+		})
+        return {
+			...toRefs(filter),
+			systemUser,
+			selectMenu,
+			setWorksSelect,
+			likeFile,
+			getImgScale,
+			t,
+			setprintModel,
+			setPortfolioLike,
+        }
+    },
+    async mounted(){
+	
+    },
+})
+</script>
+<style lang="less">
+.eventsDetail_page {
+	
+	
+}
+</style>

src/component/HomePage/UpgradePlan.vue

@@ -77,15 +77,23 @@
 			<div class="UpgradePlan_payAffirm_content">
 				<label>
 					<input name="payAffirm" type="radio" value="paypal" v-model="modeOfPayment">
-					<img src="https://ecmb.bdimg.com/tam-ogel/-1860672422_-148079605_900_900.png" alt="">
+					<img src="../../assets/images/homePage/paypal.png" alt="">
 					<span>PayPal</span>
 				</label>
 				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'paypal'?'active':'']">
 
+				</div>
+				<label>
+					<input name="Stripe" type="radio" value="stripe" v-model="modeOfPayment">
+					<img src="../../assets/images/homePage/StripeIcon.png" alt="">
+					<span>Stripe</span>
+				</label>
+				<div class="UpgradePlan_payAffirm_content_btn" :class="[modeOfPayment == 'stripe'?'active':'']">
+
 				</div>
 				<label>
 					<input name="payAffirm" type="radio" value="alipay" v-model="modeOfPayment">
-					<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAANmSURBVEiJvZZdaFxFFMd/M/cj926yu02MWWObEm3quoHGYBJBC4aCqbRRKoE+aLH6JhUFBT9Aij4oiooSfKn4oiA+FKlIkfbBj3TZYkGDDVWs1M1aaKgkJqEJazab+zE+3Gziunu3qwmep7kz95zfzH/OmRmhlFL8D6aXGl9ecjl2dpncnIe/QbQmIdmm8dwei/6OACGUUiqTc3nqxBKbvTgp4NjBRu7u1JEAo+nlTYcA+Ao+OFcEVqWbnPXqcoxZgvdGGtEljE95jJ4pXNcnN+evg+rdkyZTcOc2DYA//vTr8inF1sN+MDXQpCjrs4z1b10KbEP80w3XVzhVBAoFvf5AhL1JI3Sm93TqfP1krKL/xIUV3hmrlDQU9MLJAi+Kcof2qODUE1EAvvjZ4ZXTS6ETqRvkK8XANp2bYnKtrzmyLtXOVsnhgYYyn29/c8jOVt+7UBBAe1zS1SrL+j76rrjWbm0U9G7V6d0aJMhDOTc0Vk3QyZ9Wag0D8OEjTQBcnvfJzYWXSVVQS0QylNRJtmlYusDxFNN5RXbWZ2LKZSYfyNPZoq2l++c/1p5UBWgoafDq/giWDtN5haVB3BaUMl0p+GXG46tLDqmEhgCuFRTHz/8LUGeL5I3hCO+fK/LJeJGCE1RbxBR0JzQGu3T2pUxSCY1UQlvzuzzvs71Z4+J0+B4JpZTqeWsBgGcHLYQQvFvjaNGlYKTH4Oheu2Ls6oLPWNblm18dfphy8XyI25LM09HyFW1v1vjsQm0JpAjkBSi6iquLiltagsy8OS451GdyqM9kcVmRybmMXwlWWQaayfsMdulkck5VyI1NgjcfjNDfoeP5QVGfyTrcu0Pnsbss+jvW5YxZguFug+FuoxL06USR449HWfHg4++L/L4YZNcNjZKRHpNH+0222IJ8UXH0VIGxbDCh9KRLejJPKqFxeKCB+2830MvLr3yPAPbsNHhtn03UCgI6HmyxBWI168aveLx8eompa+Gnd1uT4OG+Bg7eYRKzRHVQadn7Uya72iUxW1BYgdy8TzrrcHG6vrsLwDYEB3YZvHSfHYB6317Y8DshzKSAiefjwVV+a6t2vf//s+1YjS0BjuwO6mezTQjBM4NW0C696zI5l9H0MpOzG39uSRGodGS3xdBtf3tubSxsffYXznw1EQcnMd4AAAAASUVORK5CYII=" alt="">
+					<img src="../../assets/images/homePage/alipay.png" alt="">
 					<span>支付宝</span>
 					<div v-show="modeOfPayment == 'alipay'" class="UpgradePlan_payAffirm_content_detail">
 						<label>
@@ -241,9 +249,12 @@ export default defineComponent({
 			let httpsUrl
 			if(this.modeOfPayment == 'paypal'){
 				httpsUrl = Https.httpUrls.payPaypal+`/${this.price.num}?returnUrl=${url}`
+			}else if (this.modeOfPayment == 'stripe') {
+				httpsUrl = Https.httpUrls.payStripe+`/${this.price.num}?returnUrl=${url}`
 			}else{
 				httpsUrl = Https.httpUrls.payAlipayHK+`/${this.modeOfPaymentDetail}/${this.price.num}`
 			}
+
 			Https.axiosPost(httpsUrl).then(
 				(rv: any) => {
 					var width = 800;
@@ -254,6 +265,8 @@ export default defineComponent({
 					if(this.modeOfPayment == 'paypal'){
 						// 在新窗口中写入内容
 						this.newWindow.location.href = rv.approve;
+					}else if(this.modeOfPayment == 'stripe'){
+						this.newWindow.location.href = rv
 					}else{
 						let data = JSON.parse(rv)
 						let herf = `${data.url}?${data.alipay_order_string}`
@@ -459,6 +472,8 @@ export default defineComponent({
 		display: flex;
 		flex-direction: column;
 		margin: 3rem 0;
+		height: 20rem;
+		overflow-y: auto;
 		>label{
 			display: flex;
 			align-items: center;

src/component/HomePage/scaleVideo.vue

@@ -4,7 +4,9 @@
 			<div class="general_video_btn" @click="clearVideo">
 				<i class="fi fi-rr-cross-small"></i>
 			</div>
-			<video ref="video" controls>
+			<video ref="video" controls poster="https://code-create.com.hk/wp-content/uploads/2024/01/Aida_opening-v3c_img.png">
+				<source :src="url" type="video/mp4">
+				<source :src="url" type="video/mp4">
 				<source :src="url" type="video/mp4">
 				Your browser does not support the video tag or the file format of this video.
 			</video>

src/component/WorksPage/newScaleImage.vue

@@ -267,7 +267,7 @@ import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
 
 export default defineComponent({
     components:{fullScreenImg},
-	emits:['deletePorfolio','bbb'],
+	emits:['deletePorfolio'],
     setup(props:any,{emit}) {
 		let {t} = useI18n()
 		//首先在setup中定义

src/component/modules/navRouter.vue

@@ -0,0 +1,77 @@
+<template>
+	<nav class="homeMain_nav_content">
+		<!-- <router-link  :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
+			{{$t('Header.HOME')}}
+		</router-link>
+		<router-link  :class="['nav_item',$route.name === 'library' ? 'select_nav' : '', ]" :to="`/home/library`">
+			{{$t('Header.LIBRARY')}}
+		</router-link>
+		<router-link  :class="['nav_item',$route.name === 'history' ? 'select_nav' : '', ]" :to="`/home/history`">
+			{{$t('Header.HISTORY')}}
+		</router-link>
+		<router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
+			{{$t('Header.WORKS')}}
+		</router-link> -->
+		<router-link v-for="item in routerList" :class="['nav_item',$route.name === item.routerName ? 'select_nav' : '', ]" :to="item.router">{{ item.name }}</router-link>
+	</nav>
+</template>
+
+<script >
+import { defineProps } from 'vue';
+import { defineComponent, createVNode, ref, computed } from "vue";
+export default defineComponent({
+	components: {
+    },
+	props:['routerList'],
+	setup(props,{emit}){
+		return {
+			
+		}
+	},
+})
+</script>
+
+<style lang="less" scoped>
+.homeMain_nav_content {
+	display: flex;
+	// margin-left: 28.9rem;
+	// margin-left: 46.2rem;
+	align-items: center;
+	height: 7rem;
+	justify-content: center;
+	.nav_item {
+		padding: 1.1rem 1rem;
+		border-bottom: 0.1rem solid transparent;
+		margin-right: 3.4rem;
+		font-size: 1.6rem;
+		line-height: 1.3rem;
+		// color: #333333;
+		color: #000;
+		cursor: pointer;
+		font-weight: 900;
+		position: relative;
+		&.nav_item:last-child{
+			margin: 0;
+		}
+		&.nav_item::before {
+			position: absolute;
+			content: "";
+			display: block;
+			background: #000;
+			height: .3rem;
+			left: 50%;
+			transform: translateX(-50%);
+			bottom: .3rem;
+			width: 0px;
+			transition: 0.3s all;
+		}
+		&.select_nav {
+			color: #000;
+			transform: scale(1.15);
+		}
+		&.select_nav::before {
+			width: 80%;
+		}
+	}
+}
+</style>

src/lang/cn.ts

@@ -5,6 +5,7 @@ export default {
 		LIBRARY:'收藏',
 		HISTORY:'历史',
 		WORKS:'作品广场',
+		EVENTS:'活动',
 		bindEmail:'绑定邮箱',
 		logOff:'退出登录',
 		Tutorial:'教程',

src/lang/en.ts

@@ -5,6 +5,7 @@ export default {
 		LIBRARY:'LIBRARY',
 		HISTORY:'HISTORY',
 		WORKS:'GALLERY',
+		EVENTS:'EVENTS',
 		bindEmail:'bind email',
 		logOff:'log off',
 		Tutorial:'Tutorial',

src/router/index.ts

@@ -2,18 +2,17 @@ import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory }
 import { defineAsyncComponent } from 'vue'
 import store from "@/store"
 import { getCookie, setCookie } from "@/tool/cookie";
-const _import = (path: string) => defineAsyncComponent(() => import(`../views/${path}.vue`));
+const _import = (path: string) => () => import(`../views/${path}.vue`);
-const _import_component = (path : string) => defineAsyncComponent(() => import(`../component/${path}`));
+const _import_component = (path : string) => () => import(`../component/${path}`);
-const _import_custom = (path : string) => defineAsyncComponent(() => import(`../views/${path}`));
+const _import_custom = (path : string) => () => import(`../views/${path}`);
-
+// defineAsyncComponent(import(`../views/${path}.vue`))
 const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/",
 		// redirect重定向
-		// redirect: "/login"
+		redirect: "/Square"
 		// redirect: "/upgrade"
-		name: "HomeRecommend",
+		
-		component: _import('HomeRecommend'),
 	},
 	{
 		path: '/login',
@@ -39,18 +38,16 @@ const routes: Array<RouteRecordRaw> = [
 		path: '/home',
 		name: 'home',
 		component: _import('HomeMain'),
-		meta:{keepAlive:true},
 		children:[
 			{
 				path: "",
-				name:'""',
+				name:'HomeChil',
-				redirect: "home/homePage"
+				redirect: "/home/homePage"
 			},
 			{
 				path:'homePage',
 				name:'homePage',
 				component: _import_custom('HomeView/HomeView.vue'),
-					meta:{keepAlive:true},
 				},{
 				path:'library',
 				name:'library',
@@ -63,6 +60,43 @@ const routes: Array<RouteRecordRaw> = [
 				path:'works',
 				name:'works',
 				component: _import_custom('HomeView/Works.vue'),
+			},{
+				path:'events',
+				name:'events',
+				component: _import_custom('HomeView/Events.vue'),
+			},
+		]
+	},
+	{
+		path: '/Square',
+		name: "HomeRecommend",
+		component: _import('HomeRecommend'),
+		children:[
+			{
+				path: "",
+				name:'SquareChil',
+				redirect: "/Square/works"
+			},
+			{
+				path:'works',
+				name:'SquareWorks',
+				component: _import_custom('HomeView/Works.vue'),
+			},{
+				path:'events',
+				name:'SquareEvents',
+				component: _import_custom('HomeView/Events.vue'),
+				children:[
+					{
+						path: "",
+						name:'eventsDetail',
+						redirect: "/Square/events/eventsDetail"
+					},
+					{
+						path:'eventsDetail',
+						name:'eventsDetail',
+						component: _import_custom('Events/eventsDetail.vue'),
+					}
+				]
 			},
 		]
 	},
@@ -182,8 +216,10 @@ router.beforeEach((to, from, next) => {
 	let token = getCookie("token");
 	let isMurmur = JSON.parse(getIsMurmur)
     let routeList = ['/testClickData','/trialApproval']//指定页面需要指定id才能进入
-    let userIdList = [88,6,46,31,73,83,87]
+    let userIdList = [88,6,46,31,73,83,87,4]
-    let isSystemUserRouteList = ['/login','/']//指定页面
+    let isSystemUserRouteList = ['/login','/Square']//游客用户只能进入这两个页面
+    let upgradeList = ['/feedbackSurvey','/feedbackSurveyCN']//指定页面系统维护也可以访问
+
 
 	let systemUser = state.UserHabit.systemUser
 	const routeExists = router.getRoutes().some(({ name }) =>{
@@ -193,25 +229,36 @@ router.beforeEach((to, from, next) => {
 			return false
 		}
 	});
-	if(systemUser.value == 0){
+	if(upgradeList.indexOf(to.path) > -1){//指定页面任何用户都可以进入
-		if(isSystemUserRouteList.indexOf(to.path) > -1){
+		next();
+		return
+	}
+	if(systemUser.value == 0){//游客用户只能进入这两个页面
+		let sSystemUser = false
+		for (let index = 0; index < isSystemUserRouteList.length; index++) {
+			if(to.path.indexOf(isSystemUserRouteList[index]) > -1){
+				
+				sSystemUser = true
+				break
+			}
+		}
+		if(sSystemUser){
 			next();
 		}else{
-			next('/');
+			next('/Square');
 		}
 		return
 	}
-	if (routeExists) {
+	if (routeExists) {//检测档期那页面是否存在
 		if (isMurmur && murmurStr && token) {
 			const toName = to.name === 'login';
 			if (toName) {
-				next({ name: '/homePage' });
+				next({ name: '/home' });//机房用户
 			} else {
 				next();
 			}
 		} else {
-			if (routeList.indexOf(to.path) > -1 ) {
+			if (routeList.indexOf(to.path) > -1 ) {//指定也买你必须指定用户可以进入
-				
 				if(userIdList.indexOf(userInfo.userId) > -1){
 					next();
 				}else{

src/tool/https.js

@@ -152,6 +152,7 @@ export const Https = {
         productList:`/api/product/list`, //获取商品列表
         payAlipay:`/api/ali-pay/trade/page/pay`, //支付宝确认支付
         payAlipayHK:`/api/alipay-hk/createOrder`, //香港支付宝确认支付
+        payStripe:`/api/stripe/createOrder`, //Stripe支付
         payPaypal:`/api/paypal/trade`, //paypal确认支付
         getCredits:`/api/credits/getCredits`, //查询用户积分
 		

src/views/HomeMain.vue

@@ -34,7 +34,7 @@
                 </div>
 				
             </div>
-            <nav class="homeMain_nav_content">
+            <!-- <nav class="homeMain_nav_content">
 				<router-link  :class="['nav_item',$route.name === 'homePage' ? 'select_nav' : '', ]" :to="`/home/homePage`">
 					{{$t('Header.HOME')}}
 				</router-link>
@@ -47,8 +47,8 @@
 				<router-link  :class="['nav_item',$route.name === 'works' ? 'select_nav' : '', ]" :to="`/home/works`">
 					{{$t('Header.WORKS')}}
 				</router-link>
-            </nav>
+            </nav> -->
-           
+			<navRouter :routerList="navRouterList"></navRouter>
 			<div class="homeMain_right">
 				<img
                 class="homeMain_logo"
@@ -127,6 +127,7 @@ import { Modal, message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import RobotAssist from "@/component/HomePage/RobotAssist.vue";
 import scaleVideo from "@/component/HomePage/scaleVideo.vue";
+import navRouter from "@/component/modules/navRouter.vue";
 import { useStore } from "vuex";
 import { setLang } from "@/tool/guide";
 import  showViewVideo from "@/tool/mount";
@@ -140,6 +141,7 @@ export default defineComponent({
 		UpgradePlan,
 		payOrder,
 		TaskPage,
+		navRouter,
     },
 	setup(){
         const store = useStore();
@@ -152,7 +154,30 @@ export default defineComponent({
 		})
 		let activeCredits = ref(false)
 		let getLangIsShowMark = ref(true)
-		let AdministratorUserIdList = [88,6,46,31,73,83,87]
+		let AdministratorUserIdList = [88,6,46,31,73,83,87,4]
+		let navRouterList = [
+			{
+				routerName:'homePage',
+				router:'/home/homePage',
+				name:t('Header.HOME')
+			},{
+				routerName:'library',
+				router:'/home/library',
+				name:t('Header.LIBRARY')
+			},{
+				routerName:'history',
+				router:'/home/history',
+				name:t('Header.HISTORY')
+			},{
+				routerName:'works',
+				router:'/home/works',
+				name:t('Header.WORKS')
+			},{
+				routerName:'events',
+				router:'/home/events',
+				name:t('Header.EVENTS')
+			},
+		]
 		return {
 			store,
 			t,
@@ -163,6 +188,7 @@ export default defineComponent({
 			activeCredits,
 			getLangIsShowMark,
 			AdministratorUserIdList,
+			navRouterList,
 		}
 	},
     data() {
@@ -463,47 +489,7 @@ export default defineComponent({
 		margin-top: 0;
     }
 
-    .homeMain_nav_content {
-        display: flex;
-        // margin-left: 28.9rem;
-		// margin-left: 46.2rem;
-        align-items: center;
     
-        .nav_item {
-            padding: 1.1rem 1rem;
-            border-bottom: 0.1rem solid transparent;
-            margin-right: 3.4rem;
-            font-size: 1.6rem;
-            line-height: 1.3rem;
-            // color: #333333;
-            color: #000;
-            cursor: pointer;
-            font-weight: 900;
-			position: relative;
-			&.nav_item:last-child{
-				margin: 0;
-			}
-			&.nav_item::before {
-				position: absolute;
-				content: "";
-				display: block;
-				background: #000;
-				height: .3rem;
-				left: 50%;
-				transform: translateX(-50%);
-				bottom: .3rem;
-				width: 0px;
-				transition: 0.3s all;
-			}
-			&.select_nav {
-				color: #000;
-				transform: scale(1.15);
-			}
-			&.select_nav::before {
-				width: 80%;
-			}
-        }
-    }
 
     .homeMain_right_content {
         // position: absolute;

src/views/HomeRecommend.vue

@@ -47,7 +47,8 @@
 					<img class="content_body_img5 content_body_img" src="/image/mainImg/img10.png" alt="">
 				</div>
 			</div>
-			<Works :isScroll="false"></Works>
+			<navRouter :routerList="navRouterList"></navRouter>
+			<router-view :isScroll="false"></router-view>
 		</div>
 		<div class="homeRecommend_content_adminTop" @click="setAdminUp">
 			<i class="fi fi-rr-arrow-small-up"></i>
@@ -58,27 +59,22 @@
 </template>
 <script >
 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";
+import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
 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();
@@ -88,6 +84,17 @@ export default defineComponent({
 		let systemUser = computed(()=>{
 			return store.state.UserHabit.systemUser
 		})
+		let navRouterList = [
+			{
+				routerName:'SquareWorks',
+				router:'/Square/works',
+				name:'GALLERY'
+			},{
+				routerName:'SquareEvents',
+				router:'/Square/events',
+				name:'EVENTS'
+			},
+		]
 		let setLogin = ()=>{
 			router.push("/login");
 		}
@@ -128,6 +135,7 @@ export default defineComponent({
 		})
 		return {
 			systemUser,
+			navRouterList,
 			setLogin,
 			registerModel,
 			setRegister,

src/views/HomeView/Events.vue

@@ -0,0 +1,283 @@
+<template>
+    <div class="events_page" :class="{active:isScroll}">
+		<div class="modal_title_text modal_search">
+			<div v-show="isScroll || systemUser.value>-1" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
+				{{ item.name }}
+			</div>
+			<div v-show="!isScroll && systemUser.value == -1" class="modal_title_text_assistant active">All</div>
+		</div>
+        <div class="page_content" >
+			<div class="page_content_itemBox">
+				<div class="page_content_item" v-for="item in worksList" :key="item.id">
+					<div class="page_content_item_img" @click="openEventsDetail(item)">
+						<img :src="item.imgUrl" alt="">
+					</div>
+					<div class="page_content_item_time">{{ item.time }}</div>
+					<div class="page_content_item_title" @click="openEventsDetail(item)">{{ item.title }}</div>
+				</div>
+			</div>
+			<div class="page_loading_box" v-show="!isNoData">
+				<span class="page_loading" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
+// import HeaderComponent from "@/component/HomePage/Header.vue";
+// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
+import { Https } from "@/tool/https";
+import { useI18n } from "vue-i18n";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { useStore } from "vuex";
+import { useRouter } from 'vue-router'
+export default defineComponent({
+    components: {
+		generalMenu,
+    },
+	props:{
+		isScroll:{
+			 type:Boolean,
+			 default:true,
+		 },
+	},
+    setup() {
+		const router:any = useRouter()
+        const store = useStore();
+		let filter:any = reactive({
+			worksSelect: 'all',
+			worksType: [
+				{
+					name: useI18n().t('works.all'),
+					value: 'all'
+				},
+				// {
+				// 	name: useI18n().t('works.FavoriteWorks'),
+				// 	value: 'favoriteWorks'
+				// },
+				// {
+				// 	name: useI18n().t('works.MyWorks'),
+				// 	value: 'myWorks'
+				// },
+			],
+			worksList: [
+				{
+					title:'Source Fashion 2024',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},{
+					title:'Source Fashion 2024 Culture x AI - KAN TAI KEUNG X AIDLAB X HONG KONG FASHION DESIGNERS SHOW',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},{
+					title:'Source Fashion 2024',
+					time:'14 Jul 2024',
+					id:1,
+					imgUrl:'https://www.aidlab.hk/uploads/n_image2_1715053576.png'
+				},
+			],
+			getListDate:{
+				"getLikePortfolio": 0,
+				"getMyPortfolio": 0,
+				page:1,
+				size:10,
+			},
+			isShowMark:false,
+			isNoData:false,//如果数据为空就不加载
+		})
+		let systemUser = computed(()=>{
+			return store.state.UserHabit.systemUser
+		})
+		let selectMenu:any = ref({
+			label:'全部',
+			value:'all',
+		})
+		let setWorksSelect = (val:any) => {
+			// filter.worksSelect = val.value
+			// filter.getListDate.getLikePortfolio = 0
+			// filter.getListDate.getMyPortfolio = 0
+			// if(val.value == 'all'){
+			// }else if(val.value == 'favoriteWorks'){
+			// 	filter.getListDate.getLikePortfolio = 1
+			// }else if(val.value == 'myWorks'){
+			// 	filter.getListDate.getMyPortfolio = 1
+			// }
+			// filter.getListDate.page = 0
+			filter.isShowMark = false
+			filter.isNoData = false
+			// getPorfolio()
+		}
+		let likeFile = (item:any,type:string) => {
+		}
+		let getImgScale = (item:any)=>{
+		}
+		let getPorfolio = ()=>{
+			let data = filter.getListDate
+			if(filter.isShowMark && !filter.isNoData)return
+			filter.isShowMark = true
+			Https.axiosPost(Https.httpUrls.getPorfolio, data)
+                .then((rv) => {
+					if (rv.content.length > 0) {
+
+					} else {
+						filter.isNoData = true
+					}
+					filter.isShowMark = false
+                })
+                .catch((rv) => {
+					filter.isShowMark = false
+					filter.isNoData = true
+				});
+		}
+		let {t} = useI18n()
+		let openEventsDetail = (item:any)=>{
+			router.push(`${router.currentRoute._value.path}/eventsDetail?id=${item.id}`)
+		}
+		onMounted (()=>{
+			// filter.isShowMark = false
+			// filter.isNoData = false
+			// getPorfolio()
+			// let worksPage:any = document.querySelector('.events_page')
+			// let imgParent:any = document.querySelector('.events_page .page_loading')
+			// new IntersectionObserver(
+			// 	(entries, observer) => {
+			// 		// 如果不是相交，则直接返回
+			// 		if (!entries[0].intersectionRatio) return;
+			// 		filter.getListDate.page += 1
+			// 		getPorfolio()
+			// 	},
+			// ).observe(imgParent);
+		})
+        return {
+			...toRefs(filter),
+			systemUser,
+			selectMenu,
+			setWorksSelect,
+			likeFile,
+			getImgScale,
+			t,
+			openEventsDetail,
+        }
+    },
+    async mounted(){
+	
+    },
+})
+</script>
+<style lang="less">
+.el-icon{
+	font-size: 14px;
+}
+.events_page {
+	border-radius: 4rem;
+    width: 100%;
+	// overflow: hidden;
+    // height: 100%;
+	height: auto;
+		min-height: 100%;
+	padding: 0 9rem;
+	// min-width: 1440px;
+	position: relative;
+	padding-top: 5rem;
+	display: flex;
+    flex-direction: column;
+	.modal_title_text{
+		display: flex;
+		margin: 0;
+		padding-bottom: 2.4rem;
+		.modal_title_text_assistant{
+			padding: 1rem 3rem;
+			border-radius: 2rem;
+			background: #eee;
+			margin-right: 1rem;
+			cursor: pointer;
+		}
+		.modal_title_text_assistant:last-child{
+			margin-right: 0;
+		}
+		.active{
+			background: #39215b;
+			color: #fff;
+		}
+		.modal_search_menu{
+			margin-left: auto;
+			z-index: 10;
+			.generalMenu_printModel{
+				margin-right: 0;
+			}
+		}
+	}
+    .page_content {
+        position: relative;
+		min-height: 80%;
+		height: auto;
+		background: #f7f8fa;
+		width: 100%;
+		flex: 1;
+		
+		.page_content_itemBox{
+			display: flex;
+			flex-wrap: wrap;
+			.page_content_item{
+				max-width: 25%;
+				padding: 2rem;
+				.page_content_item_img{
+					width: 100%;
+					aspect-ratio: 16 / 10;
+					display: flex;
+					align-items: center;
+					cursor: pointer;
+					img{
+						width: 100%;
+						object-fit: contain;
+						border-radius: 2rem;
+					}
+				}
+				.page_content_item_time{
+					color: #5f5f5f;
+				}
+				.page_content_item_title{
+					text-overflow: ellipsis; /* 显示省略号 */
+					overflow: hidden; /* 溢出隐藏 */
+					display: -webkit-box;
+					-webkit-line-clamp: 2; /* 限制显示的行数 */
+					-webkit-box-orient: vertical;
+					font-weight: 800;
+					color: #000000;
+					cursor: pointer;
+				}
+				.page_content_item_title:hover{
+					text-decoration: underline;
+				}
+			}
+		}
+		.page_loading_box{
+			text-align: center;
+			height: 50px;
+			.page_loading{
+				display: block;
+				width: 50px;
+				height: 50px;
+			}
+		}
+    }
+	
+	&.active{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.page_content{
+			overflow-y: auto;
+			width: 100%;
+			
+		}
+	}
+	
+}
+</style>

src/views/HomeView/Works.vue

@@ -34,18 +34,10 @@ import { LoadingOutlined } from "@ant-design/icons-vue";
 import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import {getUploadUrl,isMoible} from '@/tool/util'
-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";
 import generalMenu from "@/component/HomePage/generalMenu.vue";
 
 import Falls from "@/component/WorksPage/Falls.vue";
@@ -208,7 +200,6 @@ export default defineComponent({
 		}
 		onMounted (()=>{
 			filter.isShowMark = false
-			
 			filter.isNoData = false
 			getPorfolio()
 			let worksPage:any = document.querySelector('.works_page')
@@ -240,37 +231,6 @@ export default defineComponent({
 			deletePorfolio,
         }
     },
-	data() {
-        return {
-            userInfo: {},
-			indicator: h(LoadingOutlined, {
-                style: {
-                    fontSize: "2.4rem",
-                },
-                spin: true,
-            }),
-            upload: {
-                isPin: 0,
-				gender:'',
-                level1Type: this.selectCode,
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-            },
-            token: "",
-        };
-    },
-	watch:{
-		sex(newVal,oldVal){
-			this.upload.gender = newVal.value
-		},
-		searchPictureName(newVal,oldVal){
-			// clearTimeout(this.getLibraryListInputTime)
-			// this.getLibraryListInputTime = setTimeout(() => {
-			// 	if(newVal != oldVal){
-			// 		this.currentPage = 1
-			// 	}
-			// }, 500);
-		},
-	},
     async mounted(){
 	
     },

src/views/LoginPage.vue

@@ -476,11 +476,11 @@ export default defineComponent({
                         setCookie("userInfo", JSON.stringify(rv));
 						this.store.commit("setSystemUser", rv.systemUser)
 						if(rv.systemUser == 0){
-							this.turnToHomePage('/');
+							this.turnToHomePage('/Square');
 						}else{
 							if(window.innerWidth < 768){
 								message.info("If you need to design, please log in using an iPad or computer.");
-								this.turnToHomePage('/');
+								this.turnToHomePage('/Square');
 							}else{
 								this.turnToHomePage('/home');
 							}