✨ 优化用户中心界面

Licoy · Jan 27, 2023 · ba598ba · ba598ba
1 parent 0eb5202
commit ba598ba
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 19 deletions.
diff --git a/assets/dist/js/libs.min.js b/assets/dist/js/libs.min.js
diff --git a/assets/dist/style/screen.min.css b/assets/dist/style/screen.min.css
diff --git a/assets/dist/style/style.min.css b/assets/dist/style/style.min.css
diff --git a/assets/style/screen.less b/assets/style/screen.less
@@ -24,4 +24,22 @@
       padding-left: 130px;
     }
   }
+  #user-center{
+    .user-center-menus{
+      flex-direction: row;
+      overflow-x: scroll;
+
+      .list-group-item{
+        flex-shrink: 0;
+      }
+      .list-group-item:last-child:not(:first-child){
+        border-top-right-radius: var(--bs-list-group-border-radius);
+        border-bottom-left-radius: 0;
+      }
+      .list-group-item+.list-group-item{
+        border-top-width: var(--bs-list-group-border-width);
+        border-left-width: 0;
+      }
+    }
+  }
 }
diff --git a/assets/style/style.less b/assets/style/style.less
@@ -801,7 +801,8 @@ a:hover {
 
         img {
           height: 100%;
-          &.lazy:not(.loaded){
+
+          &.lazy:not(.loaded) {
             height: auto !important;
           }
         }
@@ -815,9 +816,11 @@ a:hover {
     &.post-item-card {
       .thumbnail {
         width: 100%;
-        img{
+
+        img {
           width: 100%;
-          &.lazy:not(.loaded){
+
+          &.lazy:not(.loaded) {
             width: 120px;
           }
         }
@@ -2047,10 +2050,24 @@ a:hover {
   }
 }
 
-#user-center{
-  .form-control{
+#user-center {
+  .form-control {
     .fs14;
   }
+
+  .user-center-menus {
+    .sub-title{
+      .fs12;
+      color: var(--pk-c-secondary);
+    }
+    .list-group-item:hover, .current {
+      background-color: var(--pk-c-primary);
+      color: #fff;
+      .sub-title{
+        color: #fff !important;
+      }
+    }
+  }
 }
 
 //企业风格

diff --git a/inc/page/user-center.php b/inc/page/user-center.php
@@ -13,19 +13,13 @@
     <div class="p-block" id="user-center">
         <div class="row row-cols-1">
             <div class="col-lg-3 col-md-12">
-                <div class="list-group">
-                    <a href="#" class="ta3 list-group-item d-flex justify-content-between align-items-start">
+                <div class="list-group user-center-menus">
+                    <a href="#" class="ta3 list-group-item d-flex justify-content-between align-items-start current">
                         <div class="ms-2 me-auto">
                             <div>基本信息</div>
-                            <span class="c-sub fs12">基本信息</span>
+                            <span class="sub-title d-none d-md-inline-block">基本信息</span>
                         </div>
                     </a>
-<!--                    <a href="#" class="ta3 list-group-item d-flex justify-content-between align-items-start">-->
-<!--                        <div class="ms-2 me-auto">-->
-<!--                            <div>社交账号</div>-->
-<!--                            <span class="c-sub fs12">第三方社交账号绑定</span>-->
-<!--                        </div>-->
-<!--                    </a>-->
                 </div>
             </div>
             <div class="col-lg-9 col-md-12 fs14">