Browse Source

fix: 侧边小动画优化

outaozhen 4 years atrás
parent
commit
8f1d4fc9d1

BIN
public/sideBg.png


+ 3 - 2
src/components/RightContent/Book/components/UserList/index.less

@@ -68,6 +68,7 @@
   }
   &.show-short {
     width: 3rem;
+    border-left: 1px solid #d6d6d6;
     &:hover {
       width: 14.563rem;
       border-left-color: rgba(0, 0, 0, 0.1);
@@ -145,7 +146,7 @@
   background: url('/sideBg.png') no-repeat -14px 0;
   cursor: pointer;
 }
-.show-short .side-bg {
+.side-bg:hover {
   background: url('/sideBg.png') no-repeat 0 0;
 }
 .side-bg-current {
@@ -157,7 +158,7 @@
   height: 95px;
   background: url('/sideBg-current.png') no-repeat -1px 0;
   transition: all 0.5s cubic-bezier(0.34, 1.25, 0.3, 1);
-  transition-delay: 0.1s;
+  transition-delay: 0.3s;
 }
 .show-side-bg.side-bg-current:hover {
   background: url('/sideBg-current.png') no-repeat 0 0;

+ 1 - 1
src/components/RightContent/Book/components/UserList/index.tsx

@@ -27,7 +27,7 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
       </span>
       <div
         className={[
-          'book-list border border-solid border-hex-1d1d1d border-opacity-7 bg-hex-f7f9fa flex flex-col bg-hex-f9f7fa text-hex-666',
+          'book-list bg-hex-f7f9fa flex flex-col bg-hex-f9f7fa text-hex-666',
           visible ? 'show-short' : ''
         ].join(' ')}>
         <div className="flex-1 h-full custom-scroll">

+ 1 - 1
src/components/RightContent/Book/index.tsx

@@ -29,7 +29,7 @@ const Book = () => {
     }
   }, [initialState?.currentUser])
   return (
-    <div className="fixed top-50px right-0">
+    <div className="fixed top-48px right-0">
       <div className="relative">
         <UesrList onlineList={onlineList} />
       </div>