oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-10-12 21:44:15 +08:00
1 parent 76957e637d
commit a6c5e70f85
1 file changed
+62 -36
Download Patch File Download Diff File Expand all files Collapse all files
code/link/link-frontend/src/views/im/index.vue
+62 -36
View File
@@ -44,37 +44,20 @@ import Icon from '@/components/icon.vue'
单聊
</div>
<div class="im__list-body">
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
<div class="im__chat-user">
<Avatar name="A" />
<div class="im__chat-user-info">
<div class="im__chat-user-main">
<div class="im__chat-user-name">张三</div>
<div class="im__chat-user-last-time">聊天时间</div>
</div>
<div class="im__chat-user-message">
<div class="im__chat-user-last-message">下周一起吃个饭</div>
<div class="im__chat-user-unread-count">2</div>
</div>
</div>
</div>
</div>
</div>
@@ -83,7 +66,14 @@ import Icon from '@/components/icon.vue'
群聊
</div>
<div class="im__list-body">
body
<div>
Operation feedback: enable the users to clearly perceive their
operations by style updates and interactive effects;
</div>
<div>
Visual feedback: reflect current state by updating or rearranging
elements of the page.
</div>
</div>
</div>
</div>
@@ -105,6 +95,26 @@ import Icon from '@/components/icon.vue'
width: 100%;
background-color: #f5f6fa;
& *::-webkit-scrollbar {
width: 8px;
height: 8px;
}
& *::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 10px;
}
& *::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
border: 2px solid #f1f1f1;
}
& *::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.im__container {
width: 1300px;
height: 80%;
@@ -112,6 +122,8 @@ import Icon from '@/components/icon.vue'
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 2px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.im__header {
@@ -121,7 +133,7 @@ import Icon from '@/components/icon.vue'
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
.im__desc {
display: flex;
align-items: center;
@@ -186,24 +198,26 @@ import Icon from '@/components/icon.vue'
.im__body {
display: flex;
flex: 1;
min-height: 0;
}
.im__list {
width: 300px;
border-right: 1px solid #ddd;
overflow: none;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
.im__list-input {
padding: 10px;
background-color: #1553f1;
}
.im__list-item {
flex: 1;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
.im__list-header {
font-size: 14px;
padding: 8px 10px;
@@ -213,6 +227,18 @@ import Icon from '@/components/icon.vue'
.im__list-body {
overflow-y: auto;
flex: 1;
min-height: 0;
.im__chat-user {
display: flex;
align-items: center;
height: 56px;
width: 100%;
padding: 0 10px;
&:hover {
background-color: #f5f7fa;
cursor: pointer;
}
}
}
}
}