Procházet zdrojové kódy

fix: 调整侧边动画不完整版

outaozhen před 4 roky
rodič
revize
2048c54ad3

binární
public/sideBg.png


+ 27 - 17
src/components/RightContent/Book/components/UserList/index.less

@@ -116,24 +116,34 @@
     transform: scale(1);
   }
 }
-.circle-one {
+// .circle-one {
+//   position: absolute;
+//   z-index: -1;
+//   width: 30px;
+//   height: 46px;
+//   color: #b0b0b0;
+//   background: #eee6f5;
+//   border: 1px solid #d9d9d9;
+//   border-right: none;
+//   border-top-left-radius: 80%;
+//   border-top-right-radius: 70%;
+//   border-bottom-right-radius: 70%;
+//   border-bottom-left-radius: 80%;
+//   cursor: pointer;
+// }
+// .circle-one:hover {
+//   color: #ffffff;
+//   background: #decced;
+//   border: 1px solid #a590c1;
+//   border-right: none;
+// }
+.sideBg {
   position: absolute;
   z-index: -1;
-  width: 30px;
-  height: 46px;
-  color: #b0b0b0;
-  background: #eee6f5;
-  border: 1px solid #d9d9d9;
-  border-right: none;
-  border-top-left-radius: 80%;
-  border-top-right-radius: 70%;
-  border-bottom-right-radius: 70%;
-  border-bottom-left-radius: 80%;
-  cursor: pointer;
+  width: 15px;
+  height: 95px;
+  background: url('/sideBg.png') no-repeat -14px 0;
 }
-.circle-one:hover {
-  color: #ffffff;
-  background: #decced;
-  border: 1px solid #a590c1;
-  border-right: none;
+.sideBg:hover {
+  background: url('/sideBg.png') no-repeat 0 0;
 }

+ 2 - 5
src/components/RightContent/Book/components/UserList/index.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import { useIntl } from 'umi'
-import { Right } from '@icon-park/react'
 import './index.less'
 
 interface StaffItem {
@@ -21,10 +20,8 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
   const intl = useIntl()
   return (
     <>
-      <span className="absolute top-12 left-[-1rem]" onClick={() => setVisible(!visible)}>
-        <div className="circle-one">
-          <Right size="20" />
-        </div>
+      <span className="absolute top-70 left-[-0.75rem]" onClick={() => setVisible(!visible)}>
+        <div className="sideBg" />
       </span>
       <div
         className={[

+ 6 - 11
src/pages/Product/Lock/LockStore/components/LocksDetail/LockModal.jsx

@@ -257,8 +257,7 @@ const LockModal = props => {
             </Button>
           </div>
         )
-      }
-    >
+      }>
       {type === lockTypeEnum.SALE ? (
         <div className="text-center mb-6">
           <Radio.Group value={state.sellStatus} buttonStyle="solid" onChange={checkGroupOnChange}>
@@ -273,8 +272,7 @@ const LockModal = props => {
           className={styles.modalContainer}
           ref={scrollRef}
           onScroll={handleListScroll}
-          style={{ paddingBottom: 0 }}
-        >
+          style={{ paddingBottom: 0 }}>
           <div className={styles.modalContent}>
             <Spin spinning={state.loading}>
               {type === lockTypeEnum.SALE &&
@@ -289,8 +287,7 @@ const LockModal = props => {
                         title="确认选择ta"
                         onConfirm={() => connectClient(item.id)}
                         okText="确认"
-                        cancelText="取消"
-                      >
+                        cancelText="取消">
                         <Button type="primary" size="small">
                           选择ta
                         </Button>
@@ -308,8 +305,7 @@ const LockModal = props => {
                         title="确认选择ta"
                         onConfirm={() => connectLongle(item.id)}
                         okText="确认"
-                        cancelText="取消"
-                      >
+                        cancelText="取消">
                         <Button type="primary" size="small">
                           更换
                         </Button>
@@ -338,13 +334,12 @@ const LockModal = props => {
                     }
                     // 表示该产品已升级
                     if (value && upgradeProduct.includes(value)) {
-                      return Promise.reject(new Error('该产品已升级'))
+                      return Promise.reject(new Error('该产品已存在,无法升级'))
                     }
                     return Promise.resolve(value)
                   }
                 })
-              ]}
-            >
+              ]}>
               <Select
                 placeholder="请选择产品"
                 onDropdownVisibleChange={async e => {