1、必填标志添加一个红色的*

  • css: 
    1. .bitian::before {
    2.      content: '*' !important;
    3.      color: #ff4f4f !important;
    4.  }
  • html 
    1. <div className={`${style.xxx} bitian`}>企业ID：</div>

2、文字超出隐藏

  • 让文字只显示一行，超出显示省略号 
    1.  overflow: hidden;
    2.  white-space: nowrap;
    3.  text-overflow: ellipsis;
  • 让文字最多只显示两行，超出后显示省略号 
    1.  overflow:hidden;
    2.  text-overflow:ellipsis;
    3.  display:-webkit-box;
    4.  -webkit-box-orient:vertical;
    5.  -webkit-line-clamp:2;

3、and-desgin组件常用组件及设置

table表格默认样式设置

  • 方案一：
    :global {
    // 表格样式统一
    .ant-table-wrapper {
    height: 100%;
    // 去除底部分页
    .ant-table-pagination {
    display: none;
    } 

    1.        .ant-spin-nested-loading {
    2.            height: 100%;
    3.        }
    5.        .ant-spin-container {
    6.            height: 100%;
    7.        }
    9.        .ant-table {
    10.            height: 100%;
    12.            .ant-table-container {
    13.                height: 100%;
    15.                .ant-table-body {
    16.                    height: 100%;
    17.                }
    18.            }
    19.        }
    20.    }
    22.    .ant-table-body {
    23.        overflow: auto !important;
    24.    }
    26.    .ant-table-tbody > tr {
    27.        cursor: pointer;
    28.    }
    30.    .ant-table-thead > tr > th {
    31.        .ant-table-filter-trigger-container {
    32.            position: unset;
    33.            width: 0.5px;
    34.        }
    36.        .ant-table-filter-column-title {
    37.            padding: 0 0 0 16px;
    38.        }
    40.        .ant-table-column-sorters {
    41.            padding: 0;
    42.        }
    44.        font-size: 14px !important;
    45.    }
    47.    .ant-table-tbody > tr.ant-table-row:hover > td {
    48.        background-color: #f5faff !important;
    49.    }
    51.    .ant-table-thead .ant-table-cell {
    52.        padding: 0;
    53.        font-weight: bold;
    54.    }
    56.    .ant-table-tbody > tr > td {
    57.        padding: 0;
    58.        color: #535353;
    59.        font-size: 13px;
    60.    }
    62.    .ant-table-tbody > tr > td:nth-child(1) {
    63.        padding: 0;
    64.    }
    66.    .ant-table-tbody > tr > td:nth-child(1),
    67.    .ant-table-tbody > tr > td:nth-child(2),
    68.    .ant-table-tbody > tr > td:nth-child(4) {
    69.        div {
    70.            overflow: hidden;
    71.            text-overflow: ellipsis;
    72.            display: -webkit-box;
    73.            -webkit-line-clamp: 1;
    74.            line-clamp: 1;
    75.            -webkit-box-orient: vertical;
    76.            line-height: 20px;
    77.        }
    78.    }
    80.    .ant-table-placeholder {
    81.        // table为空时去除边距
    82.        & > td:nth-child(1) {
    83.            padding-left: 0 !important;
    84.        }
    86.        .ant-table-expanded-row-fixed {
    87.            margin: 0 !important;
    88.            padding: 0 !important;
    89.        }
    90.    }
    91. }
  • 方案二： 
  1. :global {
  2.             .ant-table-body {
  3.                 //表格滚动条问题
  4.                 overflow: auto scroll !important;
  5.                 height: calc(100vh - 255px) !important;
  6.             }
  7.             .ant-popover-open {
  8.                 background: none !important;
  9.             } // 这个看需求写
  11.             .ant-btn-text:hover {
  12.                 background: none !important;
  13.             } // 这个看需求写
  15.             // 测试环境表格表头突然变高
  16.             .ant-table-thead > tr > th {
  17.                 .ant-table-column-sorters {
  18.                     padding: 0 !important;
  19.                 }
  20.             }
  21.         }
  • 方案三：
  1. .table_box {
  2.         :global {
  3.             .ant-table-body {
  4.                 height: 100vh;
  5.             }
  7.             // 测试环境表格表头突然变高
  8.             .ant-table-thead > tr > th {
  9.                 .ant-table-column-sorters {
  10.                     padding: 0 !important;
  11.                 }
  12.             }
  13.         }
  14.     }
  2. #### table设置
  1.                             <Table
  2.                                 scroll={{x: '900px', y: 'calc(100vh)'}}
  3.                                 className={style.content_1_table_info}
  4.                                 rowKey="id"
  5.                                 dataSource={microFissionStores.activeList || []}
  6.                                 columns={this.columns1}
  7.                                 pagination={false}
  8.                             />

4、title样式前面hover蓝色代码块

  1. .title::before {
  2.                 content: '';
  3.                 display: inline-block;
  4.                 width: 5px;
  5.                 height: 15px;
  6.                 background: #4096ff;
  7.                 vertical-align: middle;
  8.                 margin-bottom: 2px;
  9.                 margin-right: 5px;
  10.             }

5、原生JS实现tooltip功能(css实现)

  • html代码如下：
  1. <h1>
  2.   HTML/CSS tooltip
  3. </h1>
  4. <p>
  5.   Hover <span class="tooltip" tooltip-data="Tooltip Content">Here</span> to see the tooltip.
  6. </p>
  7. <p>
  8.   You can also hover <span class="tooltip" tooltip-data="This is another Tooltip Content">here</span> to see another example.
  9. </p>
  • css 代码如下：
  1. .tooltip {
  2.   position: relative;
  3.   border-bottom: 1px dotted black;
  4. }
  6. .tooltip:before {
  7.   content: attr(tooltip-data); 
  8.   position: absolute;
  9.   width: 250px;
  10.   background-color: #efba93;
  11.   color: #fff;
  12.   text-align: center;
  13.   padding: 15px;
  14.   line-height: 1.1;
  15.   border-radius: 5px;
  16.   z-index: 1;
  17.   opacity: 0;
  18.   transition: opacity .5s;
  19.   bottom: 125%;
  20.   left: 50%;
  21.   margin-left: -60px;
  22.   font-size: 0.70em;
  23.   visibility: hidden;
  24. }
  26. .tooltip:after {
  27.   content: "";
  28.   position: absolute;
  29.   bottom: 75%;
  30.   left: 50%;
  31.   margin-left: -5px;
  32.   border-width: 5px;
  33.   border-style: solid;
  34.   opacity: 0;
  35.   transition: opacity .5s;
  36.   border-color: #000 transparent transparent transparent;
  37.   visibility: hidden;
  38. }
  40. .tooltip:hover:before, 
  41. .tooltip:hover:after {
  42.   opacity: 1;
  43.   visibility: visible;
  44. }

点击查看详细内容

6、侧边栏的 Hover 效果

  • html代码如下：
  1. <div class="css-dynamic-sidebar">
  3.   <nav>
  4.     <a class="" href="#">Menu #1</a>
  5.     <a class="" href="#">Menu #2</a>
  6.     <a class="" href="#">Menu #3</a>
  7.   </nav>
  9. <div class="site-content">
  10.   <p>Hover over the sidebar</p>
  11.   <p>Also work with Tab selector (for accessibility)</p>
  12. </div>
  13. </div>
  • css 代码如下：
  1. .css-dynamic-sidebar {
  2.     overflow: hidden;
  3.     position: relative;
  4.     height: 50em;
  5.     max-width: 50em;
  6.     margin: auto;
  7. }
  9. .site-content {
  10.     margin: auto;
  11. }
  13. nav {
  14.     display: flex;
  15.     flex-direction: column;
  16.     position: absolute;
  17.     right: 100%;
  18.     padding: 1em;
  19.     background-color: #f3f3f3;
  20.     transform: translateX(1em);
  21.     transition: 0.2s transform;
  22. }
  24. nav:hover,
  25. nav:focus-within {
  26.     transform: translateX(100%);
  27. }
  29. a {
  30.     white-space: pre;
  31.     color: black;
  32. }
  34. p {
  35.     font-size: 2em;
  36.     font-family: monospace;
  37.     text-align: center;
  38. }

点击查看详细内容