Pārlūkot izejas kodu

修改css样式

tianyunperfect 4 gadi atpakaļ
vecāks
revīzija
73ad29ac5c
3 mainītis faili ar 84 papildinājumiem un 80 dzēšanām
  1. 2 2
      package.json
  2. 5 0
      src/pages/Memory/index.less
  3. 77 78
      src/pages/Memory/index.tsx

+ 2 - 2
package.json

@@ -54,7 +54,7 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^5.0.8",
     "@ant-design/pro-table": "2.2.0",
-    "antd": "^4.0.0",
+    "antd": "^4.7.3",
     "classnames": "^2.2.6",
     "immer": "^6.0.3",
     "lodash": "^4.17.19",
@@ -68,7 +68,7 @@
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",
     "react-quill": "^1.3.5",
-    "umi": "^3.0.14",
+    "umi": "^3.2.24",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1"
   },

+ 5 - 0
src/pages/Memory/index.less

@@ -14,3 +14,8 @@
 .minHeight{
   min-height: 100px;
 }
+.ant-divider-horizontal.ant-divider-with-text::before,
+.ant-divider-horizontal.ant-divider-with-text::after
+{
+  border-top: 1px solid #ba5656;
+}

+ 77 - 78
src/pages/Memory/index.tsx

@@ -7,7 +7,7 @@ import UpdateForm from '@/pages/Memory/components/UpdateForm';
 import {TableListItem} from '../MemoryList/data.d';
 import service from './service';
 import styles from './index.less';
-import {ExclamationCircleOutlined} from '@ant-design/icons/lib';
+import {DownOutlined, ExclamationCircleOutlined} from '@ant-design/icons/lib';
 import {getRandom, getTextFromHtml} from "@/utils/utils";
 
 enum Step {
@@ -24,6 +24,7 @@ interface State {
 
 const TableList: React.FC<{}> = () => {
   const [btnDisable, setBtnDisable] = useState(false);
+  const [showMore, setShowMore] = useState(false);
   let counting = false;
 
   const {confirm} = Modal;
@@ -245,84 +246,82 @@ const TableList: React.FC<{}> = () => {
                   简单
                 </Button>
                 <span> </span>
-                <Button
-                  type="primary"
-                  disabled={btnDisable}
-                  onClick={async () => {
-                    setBtnDisable(true);
-                    memoryRes(await service.delay(memory));
-                  }}
-                >
-                  搁置
-                </Button>
-                <p/>
-                <div>
-                  <Button
-                    type="primary"
-                    disabled={btnDisable}
-                    onClick={async () => {
-                      setBtnDisable(true);
-                      memoryRes(await service.restart(memory));
-                    }}
-                  >
-                    重新开始复习
-                  </Button>
-                  <span> </span>
-                  <Button
-                    type="primary"
-                    disabled={btnDisable}
-                    onClick={async () => {
-                      setBtnDisable(true);
-                      memoryRes(await service.noMemory(memory));
-                    }}
-                  >
-                    不在复习
-                  </Button>
-                  <span> </span>
-                  <Button
-                    type="primary"
-                    disabled={btnDisable}
-                    onClick={async () => {
-                      confirm({
-                        title: '确定删除吗?',
-                        icon: <ExclamationCircleOutlined/>,
-                        content: '删除后无法恢复',
-                        okText: '确定',
-                        okType: 'danger',
-                        cancelText: '取消',
-                        async onOk() {
+
+                <Button type="text" onClick={() => {
+                  setShowMore(!showMore);
+                }}><DownOutlined/></Button>
+                {showMore ? (
+                  <div>
+                    <p/>
+                    <div>
+                      <Button
+                        type="primary"
+                        disabled={btnDisable}
+                        onClick={async () => {
+                          setBtnDisable(true);
+                          memoryRes(await service.delay(memory));
+                        }}
+                      >
+                        搁置
+                      </Button>
+                      <span> </span>
+                      <Button
+                        type="primary"
+                        disabled={btnDisable}
+                        onClick={async () => {
                           setBtnDisable(true);
-                          memoryRes(await service.delete(memory));
-                        },
-                        onCancel() {
-                          console.log('Cancel');
-                        },
-                      });
-                    }}
-                  >
-                    删除
-                  </Button>
-                </div>
-                <p/>
-                <div>
-                  <Button
-                    type="primary"
-                    onClick={() => {
-                      setState({step: Step.ADD});
-                    }}
-                  >
-                    编辑
-                  </Button>
-                  <span> </span>
-                  <Button
-                    type="primary"
-                    onClick={() => {
-                      setState({step: Step.MAIN});
-                    }}
-                  >
-                    关闭
-                  </Button>
-                </div>
+                          memoryRes(await service.restart(memory));
+                        }}
+                      >
+                        重新复习
+                      </Button>
+                      <span> </span>
+                      <Button
+                        type="primary"
+                        disabled={btnDisable}
+                        onClick={async () => {
+                          confirm({
+                            title: '确定删除吗?',
+                            icon: <ExclamationCircleOutlined/>,
+                            content: '删除后无法恢复',
+                            okText: '确定',
+                            okType: 'danger',
+                            cancelText: '取消',
+                            async onOk() {
+                              setBtnDisable(true);
+                              memoryRes(await service.delete(memory));
+                            },
+                            onCancel() {
+                              console.log('Cancel');
+                            },
+                          });
+                        }}
+                      >
+                        删除
+                      </Button>
+                    </div>
+                    <p/>
+                    <div>
+                      <Button
+                        type="primary"
+                        onClick={() => {
+                          setState({step: Step.ADD});
+                        }}
+                      >
+                        编辑
+                      </Button>
+                      <span> </span>
+                      <Button
+                        type="primary"
+                        onClick={() => {
+                          setState({step: Step.MAIN});
+                        }}
+                      >
+                        关闭
+                      </Button>
+                    </div>
+                  </div>
+                ) : null}
               </div>
             </div>
           ) : (