丝滑9宫格的画法

总结一个丝滑的九宫格画法,组件的总结，致力于早早下班，或者有时间摸鱼。哈哈，希望大家都能工作愉快且生活美满。

import styles from './comp.module.less';
import { Input, Tabs, Row, Col } from 'antd';
import { SearchOutlined, SmileOutlined } from '@ant-design/icons';
const { Search } = Input;
const CardArea = props => {
  return (
    <div className={styles.card_area}>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map(i => (
        <div className={styles.card} key={i}>
          <div className={styles.card_title}>
            <span className={styles.card_title_text}>O2O</span>
            <span>
              <img src={require('../images/like.png')} alt="" />
            </span>
          </div>
          <div className={styles.card_content}>
            这是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述是描述
          </div>
          <div className={styles.card_footer}>
            <img src={require('../images/dislike.png')} alt="" />
            <span>商品中心</span>
          </div>
        </div>
      ))}
    </div>
  );
};
const NoticeBoard = () => {
  const items = [
    {
      key: '1',
      label: (
        <>
          <img src={require('../images/tabMyLikeIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>我的收藏</span>
        </>
      ),
      children: <CardArea key="1" />,
    },
    {
      key: '2',
      label: (
        <>
          <img src={require('../images/tabRecentIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>最近访问</span>
        </>
      ),
      children: <CardArea key="2" />,
    },
    {
      key: '3',
      label: (
        <>
          <img src={require('../images/tabAllIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>全部</span>
        </>
      ),
      children: <CardArea key="3" />,
    },
    {
      key: '4',
      label: (
        <>
          <img src={require('../images/tabPersonalIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>用户中心</span>
        </>
      ),
      children: <CardArea key="4" />,
    },
    {
      key: '5',
      label: (
        <>
          <img src={require('../images/tabFinanceIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>财务中心</span>
        </>
      ),
      children: <CardArea key="5" />,
    },
    {
      key: '6',
      label: (
        <>
          <img src={require('../images/tabStoreIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>店铺中心</span>
        </>
      ),
      children: <CardArea key="6" />,
    },
    {
      key: '7',
      label: (
        <>
          <img src={require('../images/tabCouponIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>卡券中心</span>
        </>
      ),
      children: <CardArea key="7" />,
    },
    {
      key: '8',
      label: (
        <>
          <img src={require('../images/tabPerformanceIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>履约中心</span>
        </>
      ),
      children: <CardArea key="8" />,
    },
    {
      key: '9',
      label: (
        <>
          <img src={require('../images/tabProductIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>商品中心</span>
        </>
      ),
      children: <CardArea key="9" />,
    },
    {
      key: '10',
      label: (
        <>
          <img src={require('../images/tabMarketIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>营销中心</span>
        </>
      ),
      children: <CardArea key="10" />,
    },
    {
      key: '11',
      label: (
        <>
          <img src={require('../images/tabPayIcon.png')} alt="" style={{ marginRight: '6px' }} />
          <span>支付中心</span>
        </>
      ),
      children: <CardArea key="11" />,
    },
  ];
  const onChange = key => {
    console.log(key);
  };
  const onSearch = val => {
    console.log(val);
  };
  return (
    <div className={styles.board}>
      <Row>
        <Col span={10}>
          <div className={styles.board_header}>
            <img src={require('../images/systemModuleEntryIcon.png')} alt="" />
            <span className={styles.board_title}>系统模块入口</span>
          </div>
        </Col>
        <Col span={14} align="right">
          <Input.Search
            // prefix={<SearchOutlined />}
            style={{ width: 388 }}
            placeholder="请输入搜索内容"
            onSearch={onSearch}
          />
        </Col>
      </Row>
      <div className={styles.board_content}>
        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
      </div>
    </div>
  );
};
export default NoticeBoard;

样式如下：

// 多行文本溢出显示省略号
.multiple-line-clamp(@height,@line) {
  height: @height;
  line-height: calc(@height / @line);
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: @line;
  -webkit-box-orient: vertical;
}

.board {
  border-radius: 8px;
  padding: 20px;
  margin: 6px;
  background: #fff;
  &:hover {
    box-shadow: 3px 3px 3px #f6f6f6;
  }
  &_header {
    display: flex;
    line-height: 24px;
    align-items: center;
    &_left {
      width: 150px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    &_right {
      flex: 1;
      overflow: hidden;
    }
  }
  &_btn {
    border: 1px solid @primary-color;
    border-radius: 14px;
    padding: 4px 6px;
  }
  &_title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 24px 0 8px;
    color: #183a33;
  }
  &_dropdown {
    width: 200px;
    height: 500px;
    overflow: auto;
    border: 1px solid #006241;
    border-radius: 6px;
    background-color: #fff;
  }
  .more {
    line-height: 30px;
  }
  &_content {
    padding-top: 14px;
  }
  // 个人总览
  .personal_overview {
    background: #f3f8f6;
    border-radius: 4px;
    padding: 25px;
    &_header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #d9e1de;
      padding: 0 10px 25px;
      margin-bottom: 10px;
      .avatar {
        display: inline-block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 50%;
        background-color: #ebd367;
        color: #020202;
        font-weight: 700;
        text-align: center;
      }
      .greeting {
        font-size: 20px;
        font-weight: 700;
        color: #020202;
        padding-left: 16px;
      }
    }
    .label {
      font-size: 14px;
      color: #707683;
      margin: 0 10px 0 6px;
    }
    .value {
      font-size: 14px;
      color: #333;
      margin-right: 12px;
    }
  }
  // 系统模块入口
  .system_module_entry {
    padding: 10px;
  }
  .card_area {
    background: #f3f8f6;
    border-radius: 4px;
    padding: 6px;
    display: grid;
    overflow: auto;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    .card {
      height: 120px;
      background-color: #fff;
      border-radius: 4px;
      margin: 6px;
      padding: 16px;
      &_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &_text {
          font-size: 16px;
          font-weight: 500;
        }
      }
      &_content {
        font-size: 14px;
        color: #707683;
        margin: 9px 0;
        .multiple-line-clamp(22px, 1);
      }
      &_footer {
        border-top: 1px dashed #d9e1de;
        display: flex;
        align-items: center;
        padding: 6px 0;
      }
    }
  }
}
.badge {
  :global {
    .ant-badge-dot {
      top: 4px;
      right: 20px;
    }
  }
}
.notice_item {
  .notice {
    --dot-size: 4px;

    flex: 1 1 0;
    padding-left: 8px;
    padding-right: 20px;
    color: var(--color);
    position: relative;
    cursor: pointer;

    & > a[href] {
      cursor: pointer;
      color: #006241;
      text-decoration: underline;
      margin: 0 2px;

      &:hover,
      &:focus {
        // color: rgba(255, 255, 255, 0.8);
      }
    }

    & > :global(.price-manage) {
      word-break: break-all;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &:hover {
      color: var(--hover-color);
    }

    &::before {
      content: ' ';
      display: inline-block;
      position: absolute;
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 50%;
      background-color: rgba(238, 59, 61, 1);
      top: 9px;
      left: 0;
    }
  }
  .read {
    & .notice {
      color: var(--hover-color);
    }
  }

  .clear {
    cursor: pointer;
    ---size: 20px;
    font-size: var(---size);
    width: var(---size);
    height: var(---size);
    text-align: center;
    margin-top: 3px;

    & .delIcon {
      color: var(--color);
      transform: translateY(-5px);
    }

    &:hover {
      .delIcon {
        color: var(--hover-color);
      }
    }
  }
}

/*** 通知栏轮播部分 ***/
.page-container {
  width: 100%;
  overflow: hidden;
  .noticebar {
    width: 100%;
    --height: 30px;
    box-sizing: border-box;
    color: #2e3346;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .noticebar-list-container {
      width: 100%;
      height: var(--height);
      overflow: hidden;
      flex-shrink: 0;
    }
  }
  .noticebar-close-icon {
    width: 15px;
    height: 15px;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .noticebar-item {
    height: var(--height);
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .notice {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .custom-notice-item {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 30px;
  }
}