fix

.env.dev

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

package.json

@@ -80,4 +80,5 @@
 	  "not dead",
 	  "not ie 11"
 	]
-}
+  }
+  

src/assets/style/style.css

@@ -1282,6 +1282,10 @@ li {
   width: 2rem;
   min-width: 2rem;
   padding: 0;
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .homeMain_heade sup.ant-scroll-number .ant-scroll-number-only {
   width: 100%;

src/assets/style/style.less

@@ -1427,6 +1427,10 @@ input:focus{
 		width: 2rem;
 		min-width: 2rem;
 		padding: 0;
+		font-size: 1.1rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		.ant-scroll-number-only{
 			width: 100%;
 			height: 100%;

src/component/Account/account.vue

@@ -88,6 +88,7 @@ export default defineComponent({
 .account_page{
 	height: 100%;
 	overflow-y: auto;
+	padding: 0 9rem;
 	.account_page_titleImg{
 		img{
 			width: 100%;
@@ -96,7 +97,7 @@ export default defineComponent({
 		}
 	}
 	.account_page_content_box{
-		padding: 5rem 10rem;
+		padding: 5rem 0;
 		.account_page_content{
 			box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
 			border: 1px solid #e9eaec;

src/component/Account/accountMessage.vue

@@ -10,11 +10,15 @@
 			<a-tab-pane key="1" tab="系统消息">
 				<system ref="system"></system>
 			</a-tab-pane>
-			<a-tab-pane key="2" tab="私信" force-render>
+			<!-- <a-tab-pane key="2" tab="私信" force-render>
 				<privateChat ref="privateChat"></privateChat>
+			</a-tab-pane> -->
+			<a-tab-pane key="3" tab="评论">
+				<comment></comment>
+			</a-tab-pane>
+			<a-tab-pane key="4" tab="点赞">
+				<likeMessage></likeMessage>
 			</a-tab-pane>
-			<a-tab-pane key="3" tab="评论">Content of Tab Pane 3</a-tab-pane>
-			<a-tab-pane key="4" tab="点赞">Content of Tab Pane 3</a-tab-pane>
 			<a-tab-pane key="6" tab="新增粉丝">
 				<newFollow ref="newFollow"></newFollow>
 			</a-tab-pane>
@@ -32,12 +36,16 @@ import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
 import system from '@/component/Account/message/system.vue'
 import privateChat from '@/component/Account/message/privateChat.vue'
 import newFollow from '@/component/Account/message/newFollow.vue'
+import likeMessage from '@/component/Account/message/likeMessage.vue'
+import comment from '@/component/Account/message/comment.vue'
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
 		system,
 		privateChat,
 		newFollow,
+		likeMessage,
+		comment,
     },
     setup() {
 		const router = useRouter()

src/component/Account/message/comment.vue

@@ -0,0 +1,207 @@
+<template>
+    <div class="account_comment">
+		<div class="account_comment_title modal_title_text">
+			收到的评论
+		</div>
+		<div class="account_comment_center modal_title_text">
+			<div class="account_comment_item">
+				<div class="account_comment_item_right">
+					<div class="account_comment_item_right_img" @click="openOtherUsers">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_comment_item_right_title">
+						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_comment_item_right_works modal_title_text_intro">回复作品名</div>
+					</div>
+				</div>
+				<div class="account_comment_item_left">
+					<div class="account_comment_item_left_delete modal_title_text_intro">
+						<span class="icon iconfont icon-shanchu operate_icon"></span>
+					</div>
+					<div class="modal_title_text_intro">2024-06-05</div>
+				</div>
+			</div>
+			<div class="account_comment_item">
+				<div class="account_comment_item_right">
+					<div class="account_comment_item_right_img">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_comment_item_right_title">
+						<div class="account_comment_item_right_title_name">名字 <span>回复你的作品</span></div>
+						<div class="account_comment_item_right_title_center modal_title_text_assistant">回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容回复内容</div>
+						<div class="account_comment_item_right_works modal_title_text_intro">回复作品名</div>
+					</div>
+				</div>
+				<div class="account_comment_item_left">
+					<div class="account_comment_item_left_delete modal_title_text_intro">
+						<span class="icon iconfont icon-shanchu operate_icon"></span>
+					</div>
+					<div class="modal_title_text_intro">2024-06-05</div>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+    setup() {
+		const router = useRouter()
+        const store = useStore();
+		let accountMessage = reactive({
+			activeKey: ref('1'),
+			followList:ref([
+				{
+					name:'张三',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+					time:'2024-01-01 12:00:00',
+					content:'关注了你',
+					isRead:false
+				},
+				{
+					name:'李四',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+				}
+			])
+		})
+		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		// console.log(ws);
+		
+		// ws.onopen = ()=>{
+		// 	console.log(222);
+		// 	let data = {
+		// 		cmd:4, 
+		// 		data:{
+		// 			msg:'222'
+		// 		} 
+		// 	}
+		// 	ws.send(JSON.stringify(data))
+		// 	// ws.onmessage = (data)=>{
+		// 	// 	console.log(data); 
+		// 	// }
+		// }
+		// provide('exhibitionList',exhibitionList)
+		let openOtherUsers = ()=>{
+			const routeUrl = router.resolve({
+				path:'/home/otherUsers',
+				query:{
+					id:123
+				}
+			})
+			window.open(routeUrl.href,'_blank')
+		}
+		onMounted (()=>{
+		})
+        return{
+           ...toRefs(accountMessage),
+		   openOtherUsers,
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_comment{
+	width: 100%;
+	.account_comment_title{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 2rem 5rem;
+		border-bottom: 1px solid #e9eaec;
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		border: 1px solid #e9eaec;
+		border-radius: 5px;
+		.account_comment_title_setting{
+			cursor: pointer;
+		}
+	}
+	.account_comment_center{
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		border: 1px solid #e9eaec;
+		border-radius: 5px;
+		padding: 2rem 5rem;
+		.account_comment_item{
+			display: flex;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 2rem 0;
+			border-bottom: 1px solid #e9eaec;
+			.account_comment_item_right{
+				display: flex;
+				align-items: center;
+				margin-right: 1rem;
+				.account_comment_item_right_works{
+					cursor: pointer;
+				}
+				.account_comment_item_right_works:hover{
+					text-decoration: underline;
+				}
+				.account_comment_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					flex-shrink: 0;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+				.account_comment_item_right_title{
+					display: flex;
+					flex-direction: column;
+					align-items: flex-start;
+					.account_comment_item_right_title_center{
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						overflow: hidden;
+					}
+					.account_comment_item_right_title_name{
+						font-weight: 600;
+						font-weight: 500;
+						color: #000;
+						span{
+							font-weight: 500;
+							color: #9999aa;
+						}
+					}
+				}
+			}
+			.account_comment_item_left{
+				text-align: right;
+				flex-shrink: 0;
+				.account_comment_item_left_delete{
+					span{
+						cursor: pointer;
+					}
+				}
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+				}
+			}
+		}
+		.account_comment_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>

src/component/Account/message/likeMessage.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="account_like">
+		<div class="account_like_title modal_title_text">
+			点赞
+		</div>
+		<div class="account_like_center modal_title_text">
+			<div class="account_like_item">
+				<div class="account_like_item_right">
+					<div class="account_like_item_right_img">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_like_item_right_title">
+						<div class="account_like_item_right_title_name">名字 <span>等人攒了你的作品</span></div>
+						<div>作品名字</div>
+					</div>
+				</div>
+				<div class="account_like_item_left">
+					<div class="account_like_item_left_delete modal_title_text_intro">
+						<span class="icon iconfont icon-shanchu operate_icon"></span>
+					</div>
+					<div class="modal_title_text_intro">2024-06-05</div>
+				</div>
+			</div>
+			<div class="account_like_item">
+				<div class="account_like_item_right">
+					<div class="account_like_item_right_img">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_like_item_right_title">
+						<div class="account_like_item_right_title_name">名字 <span>等人攒了你的作品</span></div>
+						<div>作品名字</div>
+					</div>
+				</div>
+				<div class="account_like_item_left">
+					<div class="account_like_item_left_delete modal_title_text_intro">
+						<span class="icon iconfont icon-shanchu operate_icon"></span>
+					</div>
+					<div class="modal_title_text_intro">2024-06-05</div>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+    },
+    setup() {
+		const router = useRouter()
+        const store = useStore();
+		let accountMessage = reactive({
+			activeKey: ref('1'),
+			followList:ref([
+				{
+					name:'张三',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+					time:'2024-01-01 12:00:00',
+					content:'关注了你',
+					isRead:false
+				},
+				{
+					name:'李四',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+				}
+			])
+		})
+		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		// console.log(ws);
+		
+		// ws.onopen = ()=>{
+		// 	console.log(222);
+		// 	let data = {
+		// 		cmd:4, 
+		// 		data:{
+		// 			msg:'222'
+		// 		} 
+		// 	}
+		// 	ws.send(JSON.stringify(data))
+		// 	// ws.onmessage = (data)=>{
+		// 	// 	console.log(data); 
+		// 	// }
+		// }
+		// provide('exhibitionList',exhibitionList)
+		
+		onMounted (()=>{
+		})
+        return{
+           ...toRefs(accountMessage),
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.account_like{
+	width: 100%;
+	.account_like_title{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 2rem 5rem;
+		border-bottom: 1px solid #e9eaec;
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		border: 1px solid #e9eaec;
+		border-radius: 5px;
+		.account_like_title_setting{
+			cursor: pointer;
+		}
+	}
+	.account_like_center{
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		border: 1px solid #e9eaec;
+		border-radius: 5px;
+		padding: 2rem 5rem;
+		.account_like_item{
+			display: flex;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 2rem 0;
+			border-bottom: 1px solid #e9eaec;
+			.account_like_item_right{
+				display: flex;
+				align-items: center;
+				margin-right: 1rem;
+				.account_like_item_right_img{
+					width: 8rem;
+					height: 8rem;
+					margin-right: 2rem;
+					flex-shrink: 0;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+				.account_like_item_right_title{
+					.account_like_item_right_title_name{
+						font-weight: 600;
+						font-weight: 500;
+						color: #000;
+						span{
+							font-weight: 500;
+							color: #9999aa;
+						}
+					}
+				}
+			}
+			.account_like_item_left{
+				text-align: right;
+				flex-shrink: 0;
+				.account_like_item_left_delete{
+					span{
+						cursor: pointer;
+					}
+				}
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+				}
+			}
+		}
+		.account_like_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
+		}
+	}
+}
+</style>

src/component/Account/message/newFollow.vue

@@ -1,20 +1,38 @@
 <template>
-    <div class="account_systemMessage">
+    <div class="account_newFollow">
-		<div class="account_systemMessage_title modal_title_text">
+		<div class="account_newFollow_title modal_title_text">
-			系统消息
+			新增粉丝
 		</div>
-		<div class="account_systemMessage_item modal_title_text">
+		<div class="account_newFollow_center modal_title_text">
-			<div class="account_systemMessage_item_title">
+			<div class="account_newFollow_item">
-				<div>Open Call for International Young Fashion Talent</div>
+				<div class="account_newFollow_item_right">
-				<div class="modal_title_text_intro">31 Aug 2024</div>
+					<div class="account_newFollow_item_right_img">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_newFollow_item_right_title">
+						<div class="">名字</div>
+						<div class="modal_title_text_intro">2024-01-01 12:00:00 关注了你</div>
+					</div>
+				</div>
+				<div class="account_newFollow_item_left">
+					<div>回关</div>
+				</div>
+			</div>
+			<div class="account_newFollow_item">
+				<div class="account_newFollow_item_right">
+					<div class="account_newFollow_item_right_img">
+						<img src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" alt="">
+					</div>
+					<div class="account_newFollow_item_right_title">
+						<div class="">名字</div>
+						<div class="modal_title_text_intro">2024-01-01 12:00:00 关注了你</div>
+					</div>
+				</div>
+				<div class="account_newFollow_item_left">
+					<div>回关</div>
 				</div>
-			<div class="modal_title_text_intro">
-				10 selected young fashion talent will be mentored by the AiDA development team to learn and explore the possibilities of AiDA. Each selected young fashion talent will create a 4-outfit collection themed “Culture” with AiDA. They will receive full technical support and subsidies for the associated production fee. Selected International/ Mainland young talent will also be able to attend the Culture X AI Internation Fashion Show in Hong Kong that is scheduled on 11 March 2025.
-				<span class="account_systemMessage_item_link">网页链接</span>
 			</div>
 		</div>
-		<div></div>
-		<div></div>
     </div>
 </template>
 <script lang="ts">
@@ -33,6 +51,19 @@ export default defineComponent({
         const store = useStore();
 		let accountMessage = reactive({
 			activeKey: ref('1'),
+			followList:ref([
+				{
+					name:'张三',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+					time:'2024-01-01 12:00:00',
+					content:'关注了你',
+					isRead:false
+				},
+				{
+					name:'李四',
+					avatar:'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+				}
+			])
 		})
 		// let ws = new WebSocket('ws://127.0.0.1:3000')
 		// console.log(ws);
@@ -66,9 +97,9 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-.account_systemMessage{
+.account_newFollow{
 	width: 100%;
-	.account_systemMessage_title{
+	.account_newFollow_title{
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -77,27 +108,49 @@ export default defineComponent({
 		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
 		border: 1px solid #e9eaec;
 		border-radius: 5px;
-		.account_systemMessage_title_setting{
+		.account_newFollow_title_setting{
 			cursor: pointer;
 		}
 	}
-	.account_systemMessage_item{
+	.account_newFollow_center{
 		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
 		border: 1px solid #e9eaec;
 		border-radius: 5px;
-		padding: 5rem 5rem;
+		padding: 2rem 5rem;
-		.account_systemMessage_item_title{
+		.account_newFollow_item{
+			display: flex;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 2rem 0;
+			border-bottom: 1px solid #e9eaec;
+			.account_newFollow_item_right{
 				display: flex;
 				align-items: center;
-			margin-bottom: 2rem;
+				.account_newFollow_item_right_img{
-			.modal_title_text_intro{
+					width: 8rem;
-				margin-left: 4rem;
+					height: 8rem;
-			}
+					margin-right: 2rem;
-		}
-		.account_systemMessage_item_link{
-			color: #39215b;
 					cursor: pointer;
-			font-weight: 600;
+					img{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+					}
+				}
+			}
+			.account_newFollow_item_left{
+				div{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+		}
+		.account_newFollow_item:last-child{
+			margin-bottom: 0;
+			border-bottom: none;
 		}
 	}
 }

src/component/Account/otherUsers.vue

@@ -0,0 +1,198 @@
+<template>
+    <div class="otherUsers">
+		<div class="otherUsers_page_titleImg">
+			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+		</div>
+		<div class="otherUsers_userDetail">
+			<div class="otherUsers_userDetail_img">
+				<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
+			</div>
+			<div class="otherUsers_userDetail_center">
+				<div class="otherUsers_userDetail_center_name modal_title_text">
+					<div>用户名</div>
+					<div class="userDetail_center_name_left">关注</div>
+				</div>
+				<div class="otherUsers_userDetail_center_data">
+					<div class="userDetail_center_data_item modal_title_text">
+						<div>99999</div>
+						<span class="modal_title_text_intro">访问量</span>
+					</div>
+					<div class="userDetail_center_data_item modal_title_text">
+						<div>123</div>
+						<span class="modal_title_text_intro">作品</span>
+					</div>
+					<div class="userDetail_center_data_item modal_title_text">
+						<div>999</div>
+						<span class="modal_title_text_intro">粉丝</span>
+					</div>
+					<div class="userDetail_center_data_item modal_title_text">
+						<div>22</div>
+						<span class="modal_title_text_intro">关注</span>
+					</div>
+				</div>
+				<div class="otherUsers_userDetail_center_signature">
+					<div class="modal_title_text">
+						<div class="modal_title_text_intro">个性签名个性签名个性签名</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="otherUser_works">
+			<div class="otherUser_works_title modal_title_text">
+				<div>他的作品</div>
+			</div>
+			<Works :isScroll="false" :otherUsers="true" :userId=userId></Works>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useRouter,useRoute } from 'vue-router'
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import { useI18n } from 'vue-i18n'
+import Works from '@/views/HomeView/Works.vue';
+export default defineComponent({
+    components:{
+		Works
+    },
+    setup() {
+		const router:any = useRouter()
+        const store = useStore();
+		let otherUsers = reactive({
+			userId:'0'
+		})
+		// let ws = new WebSocket('ws://127.0.0.1:3000')
+		// console.log(ws);
+		
+		// ws.onopen = ()=>{
+		// 	console.log(222);
+		// 	let data = {
+		// 		cmd:4, 
+		// 		data:{
+		// 			msg:'222'
+		// 		} 
+		// 	}
+		// 	ws.send(JSON.stringify(data))
+		// 	// ws.onmessage = (data)=>{
+		// 	// 	console.log(data); 
+		// 	// }
+		// }
+		// provide('exhibitionList',exhibitionList)
+		onMounted (()=>{
+			otherUsers.userId = router.currentRoute.value.query?.id
+			// alert()
+		})
+        return{
+           ...toRefs(otherUsers),
+        }
+    },
+    data(){
+        return{
+            
+        }
+    },
+})
+</script>
+<style lang="less" scoped>
+.otherUsers{
+	width: 100%;
+	height: 100%;
+	padding: 0 9rem;
+	display: flex;
+    flex-direction: column;
+	overflow-y: auto;
+	.otherUsers_page_titleImg{
+		img{
+			width: 100%;
+			height: 30rem;
+			object-fit: cover;
+		}
+	}
+	.otherUsers_userDetail{
+		padding: 2rem;
+		display: flex;
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		margin-bottom: 2rem;
+		.modal_title_text{
+			margin-bottom: .5rem;
+		}
+		.otherUsers_userDetail_img{
+			width: 10rem;
+			height: 10rem;
+			// transform: translateY(-4rem);
+			margin-right: 4rem;
+			flex-shrink: 0;
+			img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+				border-radius: 50%;
+			}
+		}
+		.otherUsers_userDetail_center{
+			flex: 1;
+			.otherUsers_userDetail_center_name{
+				display: flex;
+				justify-content: space-between;
+				.userDetail_center_name_left{
+					padding: .5rem 2rem;
+					border-radius: 4rem;
+					border: 2px solid #e9eaec;
+					cursor: pointer;
+				}
+			}
+			.otherUsers_userDetail_center_data{
+				display: flex;
+				.userDetail_center_data_item{
+					display: flex;
+					>div{
+						margin-right: 1rem;
+					}
+				}
+				.userDetail_center_data_item::after{
+					content: '';
+					display: block;
+					width: 1px;
+					height: 2rem;
+					background-color: #ccc;
+					margin: 0 2rem;
+				}
+				.userDetail_center_data_item:last-child::after{
+					display: none;
+				}
+			}
+			.otherUsers_userDetail_center_signature{
+				>div{
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+				}
+			}
+		}
+		
+	}
+	.otherUser_works{
+		height: auto;
+		box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.12);
+		position: relative;
+		padding: 0 2rem;
+		.otherUser_works_title{
+			padding: 2rem 0;
+			position: sticky;
+			top: 0;
+			background: #fff;
+			margin: 0;
+			z-index: 2;
+		}
+		.otherUser_works_content{
+			height: 200px;
+			width: 100%;
+			background: #ccc;
+		}
+	}
+}
+</style>

src/component/Detail/DesignDetail.vue

@@ -463,6 +463,8 @@ export default defineComponent({
 					DesignDetailAlter.terminate()
 					// this.designItemDetail = {}
 					this.frontBack = {}
+					let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+					setDesignItem.clear()
 				}
                 
 				

src/component/Detail/setDesignItem.vue

@@ -105,8 +105,12 @@ export default defineComponent({
         return {
             loadingShow:false,//加载中
             store: useStore(),
+			setImgSizeTimeout:null
         };
     },
+	mounted () {
+		window.addEventListener('resize', this.setImgSizeTime);
+	},
     methods: {
 		init(){
 			let DesignParent = this.$parent
@@ -134,7 +138,14 @@ export default defineComponent({
 			})
 			this.setImgSize()
 		},
+		setImgSizeTime(){
+			clearTimeout(this.setImgSizeTimeout)
+			this.setImgSizeTimeout = setTimeout(()=>{
+				this.setImgSize()
+			},300)
+		},
 		async setImgSize(){
+			this.frontBack.body = null
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let front = []
 			let back = []
@@ -218,6 +229,9 @@ export default defineComponent({
 			}
 			return num
 		},
+		clear(){
+			window.removeEventListener('resize', this.setImgSizeTime);
+		},
 		setpitch(item,index){
 			this.frontBack.front.forEach((v)=>{
 				v.designOpenrtionBtn = false
@@ -472,6 +486,7 @@ export default defineComponent({
 					this.$emit('setDesignCoverage');
 					this.store.commit("setDesignItemDetail", designItemDetail);
 					this.setRevocation(designItemDetail,data)
+					this.clear()
                 }
             ).catch(res=>{ 
 				// this.$parent.loadingShow = false
@@ -506,13 +521,14 @@ export default defineComponent({
 	height: 100%;
 	width: 100%;	
 	.designOpenrtion_centent{
-		flex: 1;
+		// flex: 1;
+		height: 100%;
 		display: flex;
 		flex-direction: column;
 		align-content: space-around;
 		flex-wrap: nowrap;
 		margin: 0 auto;
-		overflow: hidden;
+		// overflow: hidden;
 		justify-content: space-between;
 		position: relative;
 		user-select:none;
@@ -525,8 +541,8 @@ export default defineComponent({
 			width: auto;
 			height: auto;
 			position: relative;
-			height: 100%;
+			height: calc(100% - 1.2rem - 4.8rem - 20%);
-			overflow: hidden;
+			// overflow: hidden;
 			>img{
 				z-index: 2;
 				position: relative;

src/component/Detail/setDesignItemMobile.vue

@@ -100,8 +100,12 @@ export default defineComponent({
         return {
             loadingShow:false,//加载中
             store: useStore(),
+			setImgSizeTimeout:null
         };
     },
+	mounted () {
+		window.addEventListener('resize', this.setImgSizeTime);
+	},
     methods: {
 		init(){
 			let DesignParent = this.$parent
@@ -129,7 +133,14 @@ export default defineComponent({
 			})
 			this.setImgSize()
 		},
+		setImgSizeTime(){
+			clearTimeout(this.setImgSizeTimeout)
+			this.setImgSizeTimeout = setTimeout(()=>{
+				this.setImgSize()
+			},300)
+		},
 		async setImgSize(){
+			this.frontBack.body = null
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let front = []
 			let back = []
@@ -214,6 +225,9 @@ export default defineComponent({
 			}
 			return num
 		},
+		clear(){
+			window.removeEventListener('resize', this.setImgSizeTime);
+		},
 		setpitch(item,index){
 			this.frontBack.front.forEach((v)=>{
 				v.designOpenrtionBtn = false
@@ -439,6 +453,7 @@ export default defineComponent({
 					this.$emit('setDesignCoverage');
 					this.store.commit("setDesignItemDetail", designItemDetail);
 					this.setRevocation(designItemDetail,data)
+					this.clear()
                 }
             ).catch(res=>{ 
 				this.$emit('setParentLoadingShow');
@@ -477,13 +492,14 @@ export default defineComponent({
 	height: 100%;
 	width: 100%;	
 	.designOpenrtion_centent{
-		flex: 1;
+		// flex: 1;
+		height: 100%;
 		display: flex;
 		flex-direction: column;
 		align-content: space-around;
 		flex-wrap: nowrap;
 		margin: 0 auto;
-		overflow: hidden;
+		// overflow: hidden;
 		justify-content: space-between;
 		position: relative;
 		user-select:none;
@@ -496,8 +512,9 @@ export default defineComponent({
 			width: auto;
 			height: auto;
 			position: relative;
-			height: 100%;
+			// height: 100%;
-			overflow: hidden;
+			// overflow: hidden;
+			height: calc(100% - 1.2rem - 4.8rem - 20%);
 			margin: 0 auto;
 			>img{
 				z-index: 2;

src/component/HomePage/ExportModel.vue

@@ -468,8 +468,10 @@ export default defineComponent({
 							for (const key in allBoardData.value) {
 								if (item == key) {
 									//循环渲染顺序
-										
+									let imgWidth //这是设置画布等宽
-									let imgWidth = setImageWidth(key); //这是设置画布等宽
+									if(item !== 'likeDesignCollectionList' && item !== 'FinalizeImage'){
+										imgWidth = await setImageWidth(key);
+									}
 									let sketchGroupingItem = [];
 									if (
 										item == "moodboardFiles" &&
@@ -478,7 +480,7 @@ export default defineComponent({
 										continue;
 									}
 									for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
-										await new Promise((resolve, reject) => {
+										await new Promise(async (resolve, reject) => {
 											if(!allItem){
 												resolve()
 											}
@@ -497,9 +499,11 @@ export default defineComponent({
 											} else {
 												let itemCanvasImg = allItem.imgUrl;
 												if (key == "likeDesignCollectionList") {
+													
 													itemCanvasImg =
 														allItem.designOutfitUrl;
 												}
+												if(item == 'likeDesignCollectionList' || item == 'FinalizeImage')imgWidth = await setImageWidth(key,itemCanvasImg); 
 												fabric.Image.fromURL(itemCanvasImg,(img) => {
 													let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
 													if(key == "sketchboardFiles"){
@@ -513,7 +517,7 @@ export default defineComponent({
 															position.y = maxHeight;
 														}
 													}
-													setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
+													setCanvasImage(img,key,position.x,position.y,allItem,imgWidth)//设置图片
 													position.height = img.height * scaleWH + margin;
 													if (key == "sketchboardFiles") {
 														if (sketchGroupingItem.length <3) {
@@ -608,7 +612,7 @@ export default defineComponent({
 			}
 		
 		
-		let setImageWidth = (key)=>{
+		let setImageWidth = async (key,img)=>{
 			let imgWidth = canvasWH.value.width; //这是设置画布等宽
 			if (
 				disposeMoodboardShow &&
@@ -632,14 +636,29 @@ export default defineComponent({
 					sketchGrouping;
 			}
 			if (key == "likeDesignCollectionList" || key == 'FinalizeImage') {
-				imgWidth =
+				if(img){
-					(canvasWH.value.width -
+					await new Promise((resolve, reject) => {
-						(likeDesign - 1) * 20) /
+						let imgObj = new Image();
-					likeDesign;
+						imgObj.onload = function () {
+							let height = imgObj.height
+							imgObj.height = canvasWH.value.width / 4 * 1.8
+							let heightScale = imgObj.height / height
+							imgWidth = imgObj.width * heightScale
+							// imgObj.remove()
+							resolve(imgObj.width)
+						}
+						imgObj.src = img;
+					})
+				}
+				// imgWidth =
+
+				// 	(canvasWH.value.width -
+				// 		(likeDesign - 1) * 20) /
+				// 	likeDesign;
 			}
 			return imgWidth
 		}
-		let setCanvasImage = (img,key,left,top,data)=>{
+		let setCanvasImage = (img,key,left,top,data,imgWidth)=>{
 			// data
 			let imgId = 0
 			let minioUrl = ''//表示收藏或者generate
@@ -671,7 +690,7 @@ export default defineComponent({
 			minioUrl = match[2]
 			// let id = 
 			let proportion = img.height / img.width; //计算图形宽高比例
-			let imgWidth = setImageWidth(key)
+			// let imgWidth = setImageWidth(key)
 			let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
 			img.set({
 				// width: imgWidth/img.width,

src/component/HomePage/productImg.vue

@@ -760,7 +760,7 @@ methods: {
 		height: 14rem;
 		position: relative;
 		img{
-			width: 100%;
+			height: 100%;
 			cursor: pointer;
 			object-fit: contain;
 			opacity: .5;
@@ -825,7 +825,7 @@ methods: {
 	// width: 45%;
 	.productImg_content_item_imgBox{
 		.content_item_imgBox_itemImg{
-			width: 7rem;
+			width: auto;
 			flex-shrink: 0;
 		}
 	}

src/router/index.ts

@@ -99,6 +99,10 @@ const routes: Array<RouteRecordRaw> = [
 						component: _import_component('Account/accountFollowFans.vue'),
 					}
 				]
+			},{
+				path:'otherUsers',
+				name:'otherUsers',
+				component: _import_component('Account/otherUsers.vue'),
 			}
 		]
 	},

src/store/homeStore/homeStore.ts

@@ -10,7 +10,6 @@ interface DesignDetail{
     templateImgUrl:any,
     designId:any,
 	showSketchList:any,
-    
 }
 
 const HomeStoreModule : Module<DesignDetail,RootState> = {
@@ -86,7 +85,6 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 		
 
         
-        
     },
     actions:{
 

src/store/userHabit/userHabit.ts

@@ -14,6 +14,7 @@ interface UserHabit{
 	MalePosition:any,
 	Position:any,
 	systemUser:any,
+    messageSystem:any,
 }
 
 const userHabit : Module<UserHabit,RootState> = {
@@ -39,7 +40,9 @@ const userHabit : Module<UserHabit,RootState> = {
 		systemUser:{
 			value : -1
 		},
-
+		messageSystem:{
+			messageNum:4,
+		},
     },
     mutations:{
         res_clothingType(state,data){
@@ -73,6 +76,10 @@ const userHabit : Module<UserHabit,RootState> = {
 		clearSystemUser(state){
 			state.systemUser.value = -1
 		},
+		setMessageSystem(state,data){
+			state.messageSystem = data
+		},
+       
     },
 
     actions:{

src/tool/https.js

@@ -88,6 +88,7 @@ axios.interceptors.response.use((res) =>{
     }
 }, function(error) {
     if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
+		clonAllCookie()
 		if(!isLoginTime){
 			isLoginTime = true
 			let isSystemUserRouteList = ['/Square']//如果是这两个页面就无需跳转未登录页
@@ -102,7 +103,6 @@ axios.interceptors.response.use((res) =>{
 				router.replace('/')
 			}
 			message.warning('Please login and try again~')
-			clonAllCookie()
 			store.commit('clearSystemUser')
 			setTimeout(()=>[
 				isLoginTime = false

src/tool/webSocket.js

@@ -0,0 +1,46 @@
+class MyWs {
+	constructor() {
+		this.ws = null;
+		// this.ws = new WebSocket();
+	}
+	linkWs(url) {
+		if (this.ws && this.ws.readyState == 1) return
+		this.ws = new WebSocket(url)
+	}
+	sendMessage(data) {
+		console.log(this);
+		if (this.ws && this.ws.readyState == 1) {
+			let obj = {
+				cmd: 1,
+				data: {
+					name: '123',
+				}
+			}
+			this.send(obj)
+			obj = {
+				cmd: 4,
+				data: {
+					msg: data,
+				}
+			}
+			this.send(obj)
+			// obj = {
+			// 	cmd: 6,
+			// 	data: {
+			// 		msg: data,
+			// 	}
+			// }
+			// this.send(obj,this.ws)
+		}
+	}
+ 	send(obj) {
+		console.log(2323);
+		this.ws.send(JSON.stringify(obj))
+	}
+	close(){
+		if (this.ws && this.ws.readyState == 1) {
+			this.ws.close()
+		}
+	}
+}
+export default new MyWs();

src/views/HomeMain.vue

@@ -49,7 +49,7 @@
                    
                 </div>
 				<div class="trialApproval button_second credits message">
-					<a-badge :count="5">
+					<a-badge :count="messageNum">
 						<i class="fi fi-rr-envelope" @click="openMessage"></i>
 					</a-badge>
 				</div>
@@ -169,6 +169,7 @@ import  showViewVideo from "@/tool/mount";
 import { useI18n } from "vue-i18n";
 import { gsap, TweenMax,TweenLite } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
+import MyWs from "@/tool/webSocket";
 export default defineComponent({
     components: {
         VerificationCodeInput,
@@ -181,9 +182,18 @@ export default defineComponent({
 		navRouter,
     },
 	setup(){
+		let url = '127.0.0.1:3000'
+		MyWs.linkWs("ws://"+url)
+		console.log();
+		setTimeout(() => {
+			MyWs.sendMessage('aaaa')
+		}, 3000);
         const store = useStore();
 		const {t} = useI18n()
 		const {locale} = useI18n()
+		MyWs.ws.onmessage = (data)=>{
+			console.log(JSON.parse(data.data),232);
+		}
 		let isTest = ref()
 		let isMurmur = ref()
 		let credits = computed(()=>{
@@ -215,6 +225,10 @@ export default defineComponent({
 				name:t('Header.EVENTS')
 			},
 		]
+		let messageNum = computed(()=>{
+			return store.state.UserHabit.messageSystem.messageNum
+		})
+		store.commit('setMessageSystem',{messageNum:22})
 		return {
 			store,
 			t,
@@ -226,6 +240,7 @@ export default defineComponent({
 			getLangIsShowMark,
 			AdministratorUserIdList,
 			navRouterList,
+			messageNum,
 		}
 	},
     data() {

src/views/HomeView/Works.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="works_page" :class="{active:isScroll}">
+    <div class="works_page" :class="{active:isScroll,'otherUsersActive':otherUsers}">
 		<!-- <div class="modal_title_text">
 			<div>Works</div>
 		</div> -->
-		<div class="modal_title_text modal_search">
+		<div class="modal_title_text modal_search" v-if="!otherUsers">
 			<div v-show="isScroll" v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
 				{{ item.name }}
 			</div>
@@ -53,8 +53,16 @@ export default defineComponent({
 			 type:Boolean,
 			 default:true,
 		 },
+		 otherUsers:{
+			 type:Boolean,
+			 default:false,
 		 },
-    setup() {
+		 userId:{
+			 type:String,
+			 default:'-1',
+		 },
+	},
+    setup(prop) {
 		let filter:any = reactive({
 			worksSelect: 'all',
 			isNull:true,
@@ -153,6 +161,9 @@ export default defineComponent({
 			let data = filter.getListDate
 			if(filter.isShowMark && !filter.isNoData)return
 			filter.isShowMark = true
+			// if(prop.otherUsers){
+			// 	console.log(prop.userId);
+			// }
 			Https.axiosPost(Https.httpUrls.getPorfolio, data)
                 .then((rv) => {
 					if(data.page == 1 && rv.content.length == 0){
@@ -198,7 +209,7 @@ export default defineComponent({
 			fall.value.deleteItem(value); 
 			
 		}
-		onMounted (()=>{
+		let setPorfolioDom = ()=>{
 			filter.isShowMark = false
 			filter.isNoData = false
 			getPorfolio()
@@ -214,6 +225,11 @@ export default defineComponent({
 				},
 				// { root:worksPage }
 			).observe(imgParent);
+		}
+		onMounted (()=>{
+			nextTick(()=>{
+				setPorfolioDom()
+			})
 		})
         return {
 			...toRefs(filter),
@@ -310,6 +326,9 @@ export default defineComponent({
 			width: 100%;
 		}
 	}
+	&.otherUsersActive{
+		padding: 0;
+	}
 	
 }
 </style>