style: 优化名字过长显示,更换左侧导航图标

BoBoooooo · Dec 25, 2020 · d46be56 · d46be56
1 parent a810587
commit d46be56
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/client/package.json b/client/package.json
@@ -1,10 +1,10 @@
 {
   "name": "tyloo-chat-client",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "author": "[email protected]",
   "license": "MIT",
   "scripts": {
-    "start": "vue-cli-service serve",
+    "start": "vue-cli-service serve --mode",
     "build:in": "vue-cli-service build --mode in",
     "build:out": "vue-cli-service build --mode out",
     "lint": "vue-cli-service lint"

diff --git a/client/src/components/Avatar.vue b/client/src/components/Avatar.vue
@@ -111,6 +111,12 @@ export default class Avatar extends Vue {
   .avatar-name {
     margin: 0 12px;
     color: #080808;
+    margin: 0 12px;
+    max-width: 160px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #080808;
   }
   .avatar-time {
     font-size: 12px;
@@ -128,6 +134,10 @@ export default class Avatar extends Vue {
   h2 {
     display: inline-block;
     line-height: 60px;
+    max-width: 190px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
   > div {
     margin: 4px;

diff --git a/client/src/components/Contact.vue b/client/src/components/Contact.vue
@@ -184,15 +184,17 @@ $color: #6f6f6f;
       border-bottom: 1px solid rgb(198, 198, 198);
     }
     .contact-box {
-      padding: 10px 20px;
+      padding: 10px 25px 10px 20px;
       margin: 0 -20px;
+      text-overflow: ellipsis; //溢出用省略号显示
+      white-space: nowrap; //溢出不换行
+      overflow: hidden;
       cursor: pointer;
       &:hover {
         background: #d6d6d6;
       }
       .contact-name {
         margin-left: 10px;
-
         color: #080808;
       }
       .contact-avatar {

diff --git a/client/src/components/Nav.vue b/client/src/components/Nav.vue
@@ -30,7 +30,7 @@
     <!-- 消息列表/通讯录切换 -->
     <a-tooltip placement="left" title="消息列表" arrow-point-at-center>
       <a-icon
-        type="message"
+        type="wechat"
         theme="filled"
         class="tool-message icon"
         :class="{
@@ -44,7 +44,7 @@
         :class="{
           'tool-active': activeTabName === 'contacts',
         }"
-        type="contacts"
+        type="team"
         class="tool-contacts icon"
         @click="setActiveTabName('contacts')"
       />