refactor login dialog for front page

web/src/assets/css/chat-app.styl

@@ -2,15 +2,6 @@
   background-color: #282c34;
   height 100%
 
-  .title {
-    text-align center
-    background-color #25272d
-    font-size 24px
-    color #ffffff
-    padding 10px
-    border-bottom 1px solid #3c3c3c
-  }
-
   .inner {
     display flex
     color #ffffff
@@ -19,51 +10,71 @@
     overflow-x hidden
 
     .list-box {
-      .app-item {
-        border 1px solid #666666
-        border-radius 6px
-        overflow hidden
-        transition: all 0.3s ease; /* 添加过渡效果 */
+      .item {
+        display flex
+        flex-flow row
+        border 1px solid #3c3c3c
+        padding 10px
 
-        .el-image {
-          padding 6px
-
-          .el-image__inner {
-            border-radius 10px
-          }
+        .image {
+          width 80px
+          height 80px
+          min-width 80px
+          border-radius 5px
+          overflow hidden
         }
 
-        .title {
+        .inner {
           display flex
-          padding 10px
+          flex-flow column
+          padding 0 0 0 10px
+          width 100%
 
-          .name {
-            width 100%
+          .info {
             text-align left
-            font-size 16px
-            font-weight bold
-            color #47fff1
+
+            .info-title {
+              color var(--el-text-color)
+              font-size 1.25rem
+              line-height 1.75rem
+              letter-spacing: .025em;
+              font-weight: 600;
+              word-break: break-all;
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+            }
+
+            .info-text {
+              padding 8px 0
+              overflow: hidden;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              word-break: break-all;
+              height 34px
+              font-size: .875rem;
+              color #999999
+            }
           }
 
-          .opt {
-            position: relative;
-            width 100%
-            top -5px
+          .btn {
+            margin-top 10px
+            display flex
+            justify-content right
+
+            .el-button {
+              margin-left 10px
+
+              .el-icon {
+                margin-right 5px
+              }
+            }
           }
         }
-
-        .hello-msg {
-          height 60px
-          padding 10px
-          font-size 14px
-          color #999999
-        }
-
-        &:hover {
-          box-shadow: 0 0 10px rgba(71, 255, 241, 0.6); /* 添加阴影效果 */
-          transform: translateY(-10px); /* 向上移动10像素 */
-        }
       }
+
     }
   }
 

web/src/assets/css/home.styl

@@ -140,6 +140,7 @@
 
     .content {
       width: 100%
+      overflow auto
       box-sizing: border-box
       background-color #282c34
     }

web/src/assets/css/member.styl

@@ -65,9 +65,12 @@
     padding 15px 0 15px 15px;
     overflow-x hidden
     overflow-y visible
+    display flex
+    flex-flow row
 
     .user-profile {
       padding 10px 20px 20px 20px
+      width 300px
       background-color #393F4A
       color #ffffff
       border-radius 10px
@@ -91,12 +94,15 @@
 
 
     .product-box {
+      padding 0 20px
+      width 100%
+
       .info {
         .el-alert__description {
           font-size 14px !important
           margin 0
         }
-        padding 10px 20px 20px 0
+        padding 0 0 20px 0
       }
 
       .list-box {