diff --git a/package-lock.json b/package-lock.json index 949a1df7..f96e9bed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "element-plus": "^2.8.6", "vite": "^5.4.10", "vue": "^3.2.13", - "vue-router": "^4.4.5" + "vue-router": "^4.4.5", + "vue-virtual-scroller": "^1.1.2" }, "devDependencies": { "@babel/core": "^7.12.16", @@ -2320,7 +2321,7 @@ "version": "0.3.5", "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz", "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -2335,7 +2336,7 @@ "version": "3.1.2", "resolved": "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -2345,7 +2346,7 @@ "version": "1.2.1", "resolved": "https://registry.npmmirror.com/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "devOptional": true, + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -2355,7 +2356,7 @@ "version": "0.3.6", "resolved": "https://registry.npmmirror.com/@jridgewell/source-map/-/source-map-0.3.6.tgz", "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", @@ -2372,7 +2373,7 @@ "version": "0.3.25", "resolved": "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -2957,7 +2958,7 @@ "version": "22.8.1", "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.8.1.tgz", "integrity": "sha512-k6Gi8Yyo8EtrNtkHXutUu2corfDf9su95VYVP10aGYMMROM6SAItZi0w1XszA6RtWTHSVp5OeFof37w0IEqCQg==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.19.8" @@ -4063,7 +4064,7 @@ "version": "8.14.0", "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.14.0.tgz", "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==", - "devOptional": true, + "dev": true, "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -4721,7 +4722,7 @@ "version": "1.1.2", "resolved": "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/bytes": { @@ -11072,6 +11073,12 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/scrollparent": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz", + "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==", + "license": "ISC" + }, "node_modules/scule": { "version": "1.3.0", "resolved": "https://registry.npmmirror.com/scule/-/scule-1.3.0.tgz", @@ -11430,7 +11437,7 @@ "version": "0.6.1", "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz", "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "devOptional": true, + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -11449,7 +11456,7 @@ "version": "0.5.21", "resolved": "https://registry.npmmirror.com/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "devOptional": true, + "dev": true, "license": "MIT", "dependencies": { "buffer-from": "^1.0.0", @@ -11806,7 +11813,7 @@ "version": "5.36.0", "resolved": "https://registry.npmmirror.com/terser/-/terser-5.36.0.tgz", "integrity": "sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==", - "devOptional": true, + "dev": true, "license": "BSD-2-Clause", "dependencies": { "@jridgewell/source-map": "^0.3.3", @@ -11879,7 +11886,7 @@ "version": "2.20.3", "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/text-table": { @@ -12072,7 +12079,7 @@ "version": "6.19.8", "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-6.19.8.tgz", "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", - "devOptional": true, + "dev": true, "license": "MIT" }, "node_modules/unicode-canonical-property-names-ecmascript": { @@ -12664,6 +12671,21 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/vue-observe-visibility": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz", + "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==", + "license": "MIT" + }, + "node_modules/vue-resize": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", + "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==", + "license": "MIT", + "peerDependencies": { + "vue": "^2.3.0" + } + }, "node_modules/vue-router": { "version": "4.4.5", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.5.tgz", @@ -12704,6 +12726,20 @@ "dev": true, "license": "MIT" }, + "node_modules/vue-virtual-scroller": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.1.2.tgz", + "integrity": "sha512-SkUyc7QHCJFB5h1Fya7LxVizlVzOZZuFVipBGHYoTK8dwLs08bIz/tclvRApYhksaJIm/nn51inzO2UjpGJPMQ==", + "license": "MIT", + "dependencies": { + "scrollparent": "^2.0.1", + "vue-observe-visibility": "^0.4.4", + "vue-resize": "^0.4.5" + }, + "peerDependencies": { + "vue": "^2.6.11" + } + }, "node_modules/watchpack": { "version": "2.4.2", "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz", diff --git a/package.json b/package.json index 6e6c1034..fb8d97fe 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "element-plus": "^2.8.6", "vite": "^5.4.10", "vue": "^3.2.13", - "vue-router": "^4.4.5" + "vue-router": "^4.4.5", + "vue-virtual-scroller": "^1.1.2" }, "devDependencies": { "@babel/core": "^7.12.16", diff --git a/public/icon/abc.jpg b/public/icon/abc.jpg new file mode 100644 index 00000000..5c33d3dc Binary files /dev/null and b/public/icon/abc.jpg differ diff --git a/public/icon/bird.jpg b/public/icon/bird.jpg new file mode 100644 index 00000000..a3d1b6cd Binary files /dev/null and b/public/icon/bird.jpg differ diff --git a/public/icon/icon.png b/public/icon/icon.png new file mode 100644 index 00000000..4bbd68ea Binary files /dev/null and b/public/icon/icon.png differ diff --git a/src/assets/css/chat/honneyBtn.css b/src/assets/css/chat/honneyBtn.css index ac3e6cba..56693139 100644 --- a/src/assets/css/chat/honneyBtn.css +++ b/src/assets/css/chat/honneyBtn.css @@ -1,26 +1,27 @@ /* 给圆形定义关键帧 */ @keyframes switch { 0% { - left: calc(4px * 0.5); + left: calc(4px * 0.2); } 60% { - left:calc(4px * 0.5); - width: calc(112px * 0.5); + left:calc(4px * 0.2); + width: calc(112px * 0.2); } 100%{ - left: calc(104px * 0.5); + left: calc(104px * 0.2); } } @keyframes reverse_switch { 0% { - left: calc(104px * 0.5); + left: calc(104px * 0.2); + } 60%{ - left: calc(74px * 0.5); - width: calc(112px * 0.5); + left: calc(74px * 0.2); + width: calc(112px * 0.2); } 100%{ - left: calc(4px * 0.5); + left: calc(4px * 0.2); } } diff --git a/src/assets/pictures/chat/bird.jpg b/src/assets/pictures/chat/bird.jpg new file mode 100644 index 00000000..a3d1b6cd Binary files /dev/null and b/src/assets/pictures/chat/bird.jpg differ diff --git a/src/main.js b/src/main.js index 1422671b..af0323c6 100644 --- a/src/main.js +++ b/src/main.js @@ -5,10 +5,12 @@ import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' + const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } + app.use(ElementPlus) app.use(router) app.mount('#app') diff --git a/src/views/chat/ChatCard.vue b/src/views/chat/ChatCard.vue new file mode 100644 index 00000000..7d0325c3 --- /dev/null +++ b/src/views/chat/ChatCard.vue @@ -0,0 +1,77 @@ + + + + + + \ No newline at end of file diff --git a/src/views/chat/HonneyBtn.vue b/src/views/chat/HonneyBtn.vue index f89e469f..dfdca88a 100644 --- a/src/views/chat/HonneyBtn.vue +++ b/src/views/chat/HonneyBtn.vue @@ -16,14 +16,19 @@ export default{ }, mounted(){ // 后端接口获取好友状态 - this.status = true - } + this.status = this.Status + }, + props:{ + Status:String, + // Status2:String + }, } \ No newline at end of file diff --git a/src/views/chat/chat.vue b/src/views/chat/chat.vue index c281c8fb..4b2a627c 100644 --- a/src/views/chat/chat.vue +++ b/src/views/chat/chat.vue @@ -20,63 +20,141 @@ -
-
+
+
+ +
+
+ + + +
+
+
+ +

{{ getFriendObject.name }}

+
+ +

{{ getFriendObject.position }}

+ +

{{ getFriendObject.birth }}

+
+
+
+ +

他的主页

+
+
+ +

族谱树

+
+
+
+
+
你和他已经聊了{{ beeing_friends_time }}天
+
+ +

关注他

+ +
+
+ +

拉黑他

+ +
+
+

可能感兴趣的人

+
+
+ +

{{ item.name }}

+
+
+
@@ -147,8 +274,10 @@ export default { .chat-totallayout{ display: flex; flex-direction: row; - height: 600px; + height: 85%; width: 100%; + /* flex-grow: 0; + flex-shrink: 0; */ /* background-color: aqua; */ } .chat-leftlayout{ @@ -159,18 +288,22 @@ export default { flex-direction: column; } .chat-middlelayout{ - background-color: yellow; + background: linear-gradient(to top, #fff9a1 65%, #fcdcd7); width: 55%; height: 100%; display: flex; flex-direction: column; + position: relative; } .chat-rightlayout{ - background-color: red; + /* background-color: red; */ + position: relative; width: 20%; height: 100%; display: flex; flex-direction: column; + align-items: center; + margin-top: 3%; } /**************整体布局***************/ /*************左边************** *****/ @@ -246,6 +379,9 @@ export default { .chat-friends:hover{ background-color: #fff2f9; } +.chat-friends:active{ + background-color: #fcb8dd; +} .chat-friend-text{ position: relative; width: 60%; @@ -276,4 +412,92 @@ export default { color: gray; /* background-color: #fdadd8; */ } +/*****************中间****************** */ +.send-msg{ + align-self: center; + justify-self: flex-end; + display: flex; + position: absolute; + bottom: 5%; + width: 80%; +} +#send-msg-input{ + outline: none; + border: 1px solid #E44B9D; + border-radius: 10px; + width: 90%; + margin: 5px; +} +.search-btn{ + background-image: url("@/assets/pictures/chat/SendBtn.png"); + background-size: 100% 100%; + width: 40px; + height: 40px; + border: none; + overflow: hidden; + border-radius: 10px; +} +.search-btn:active{ + background-image: url("@/assets/pictures/chat/SendBtn.png"); + background-size: 100% 100%; + width: 40px; + height: 40px; + border: none; + overflow: hidden; + border-radius: 10px; + background-color: #a75efb; +} +/*****************右边***************************/ +.friend-information{ + width: 75%; + display: flex; + justify-content: space-around; + color: gray; + position: relative; + top: 0%; +} +.friend-information p{ + position: relative; + top: -31%; +} + +.chat-special-btn{ + display: flex; + justify-content: space-around; + width: 85%; + height: 20%; +} +.chat-home-tree-btn{ + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; +} +.chat-home-page-btn{ + background-color: #f85096; + background-image: url('../../assets/pictures/chat/portrait.png'); + background-size: 60% 60%; + background-position: center center; + background-repeat: no-repeat; + height: 60px;width: 60px; border: none; border-radius: 50%; +} +.chat-tree-btn{ + background-color: #a75efb; + background-image: url('../../assets/pictures/chat/tree.png'); + background-size: 60% 60%; + background-position: center center; + background-repeat: no-repeat; + height: 60px;width: 60px; border: none; border-radius: 50%; +} +.chat-connection{ + display: flex; + width: 62%; + justify-content: space-around; +} +.chat-recomend{ + display: flex; + flex-direction: row; + justify-content: space-around; + width: 90%; +} \ No newline at end of file