导航栏

web/client/src/layout/components/header/index.jsx

@@ -72,8 +72,8 @@ const Header = (props) => {
                                  color: "white",
                               }}
                            >
-                              <Avatar size="small" color="light-blue" style={{ marginRight: 4 }}>
-                                 <img src="/assets/images/avatar/6.png" />
+                              <Avatar size="extra-small" color="light-blue" style={{marginRight:4}}>
+                                    U
                               </Avatar>
                               <div style={{
                                  display: "inline-block", position: "relative",

web/client/src/layout/components/header/index.less

@@ -1,5 +1,6 @@
 #top-slider{
     .semi-navigation-item-text{
+        font-size: 13px;
         color: #F2F3F5;
     }
     .semi-navigation-item-icon{
@@ -8,6 +9,9 @@
     .semi-navigation-item-selected{
         background: none;
     }
+    .semi-navigation-item{
+        margin: 0px;
+    }
     .semi-navigation-item-text{
         overflow: inherit;
     }

web/client/src/layout/components/sider/index.jsx

@@ -47,15 +47,15 @@ const Sider = (props) => {
         }
     })
     return (
-        <div id={'page-slider'} style={{ height: clientHeight, position: 'relative', background: '#101531', width: 180 }}>
+        <div id={'page-slider'} style={{ height: clientHeight, position: 'relative', background: '#101531' }}>
             <Nav
-                style={{ background: '#101531', width: 180, padding: 0 }}
+                style={{ background: '#101531', padding: 0 }}
                 selectedKeys={selectedKeys}
-                // bodyStyle={{}}
-                // mode = "vertical"
-                // footer={{
-                //     collapseButton: true,
-                // }}
+                bodyStyle={{height:clientHeight-64}}
+                mode = "vertical"
+                footer={{
+                    collapseButton: true,
+                }}
                 openKeys={openKeys}
                 onSelect={({ selectedItems, selectedKeys, }) => {
                     const selectItem = selectedItems[0]

web/client/src/layout/components/sider/index.less

@@ -11,5 +11,20 @@
     }
     .semi-navigation-sub-title-selected{
         background: #1D2343;
+        .semi-navigation-item-icon{
+            color: #0F7EFB !important;
+        }
+        .semi-icon-code{
+            color: #0F7EFB !important;
+        }
+    }
+    .semi-navigation{
+        width: 180px;
+    }
+    .semi-navigation-collapsed{
+        width: 48px !important;
+    }
+    .semi-button-with-icon{
+        color:#F2F3F5
     }
 }

web/client/src/sections/example/containers/example.jsx

@@ -29,6 +29,16 @@ const Example = (props) => {
    return (
       <Spin tip="biubiubiu~" spinning={loading}>
          <div id='example'>
+         <div className="loader1">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </div>
+                <div className='loader2'>
+
+                </div>
             <p>STYLE EXAMPLE</p>
          </div>
          {/* <Card

web/client/src/sections/example/style.less

@@ -4,4 +4,26 @@
 
 #example:hover {
     color: yellowgreen;
-}
+}
+ .loader2 {
+    width:25px;
+    height:25px;
+    display:inline-block;
+    padding:0px;
+    border-radius:100%;
+    border:5px solid;
+    border-top-color:rgba(254, 168, 23, 0.65);
+    border-bottom-color:rgba(57, 154, 219, 0.65);
+    border-left-color:rgba(188, 84, 93, 0.95);
+    border-right-color:rgba(137, 188, 79, 0.95);
+    -webkit-animation: loader2 2s ease-in-out infinite alternate;
+    animation: loader2 1s ease-in-out infinite alternate;
+ }
+ @keyframes loader2 {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(720deg);}
+ }
+ @-webkit-keyframes loader2 {
+    from {-webkit-transform: rotate(0deg);}
+    to {-webkit-transform: rotate(720deg);}
+ }