CSS样式揭秘

修改组件样式：
1.去背景：background:none；
2.去边框下划线：box-shadow: none;
3.去鼠标事件：cursor: default;
3.背景图片居中：background-position: center;
4.背景图片随边框变化：background-size: contain;
4.1.background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形
4.2.background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
4.3.background-size：100% 100%;—把背景图片放大到适合元素容器的尺寸，图片比例缩放。
5.去除div元素底部白色边框：display:flow-root；

无论是内联元素，还是原本就是块级元素，在应用 display:flow-root 声明后，
都会变成块级元素，同时这个元素会建立新的块级格式上下文，也就是业界常说的BFC。

作用：
可以让元素块状化，同时包含格式化上下文BFC；
可以用来清除浮动，去除 margin 合并，实现两栏自适应布局等。

总结：

background-size：100%;总是X轴100%铺满整个容器，Y轴可能被裁剪会出现空白填不满部分，图片不变形。
background-size：100% 100%;图片不保持比例放大或缩小使X轴与Y轴都铺满整个容器，图片可能会变形。
background-size：cover;图片保持比例放大或缩小使X轴与Y轴都铺满整个容器，但图片超出容器部分会被裁剪掉，图片不变形。
background-size：contain;图片保持比例放大或缩小填充容器，若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。

5.设置不重复背景图像（及如何重复）：background-repeat: no-repeat;
也可以直接合并成 background: url('~@/assets/bgi.png') no-repeat;：

引入图片为什么要加一~呢？

以_{符号作为前缀主要是因为vue-cli默认配置的publicPath为/src，别名为@，而在scss中@是变量定义的前缀，所以需要加上}以示区分

以需要加上~以示区分
6. .less中添加背景图片：
7.line-height:行高（按钮文字上下居中）

 	background-image: url("../images/trial-model-bg.png");
    background-repeat: no-repeat; // 去图片重复
    background-position: center;
    background-color: transparent;
    box-shadow: none;
    background-size: contain;

7.禁止元素填充背景颜色：background-color: transparent;
8.覆盖组件样式(建议不必要不使用)：… !important
9.设置自定义滚动条

 // 滚动条
  .scroll {
   
    &::-webkit-scrollbar {
   
      width: 10px;
      overflow: hidden;
      border-radius: 0 18px 18px 0;
      background: rgba(219, 219, 219, 1);
    }
    &::-webkit-scrollbar-thumb {
   
      border-radius: inherit;
      background-color: rgba(192, 183, 245, 1);
    }
  }

10：通用组件样式：

.corrTotal {
   
          margin: auto !important;
          width: 50%;
          background: #63d3ab;
          border: 5px solid rgba(145, 243, 208, 1);
          .utils-num();
          & > img {
   
            width: 5vw;
            margin-left: -2.5vw;
          }

          & > span {
   
            font-size: 1.2vw;
            left: 0vw;
          }
        }

.utils-num {
   
  width: 9vw;
  height: 2 * @rem;
  color: white;
  box-shadow: 0px 3px 2px 0px rgba(39, 77, 132, 0.32);
  border-radius: 24px;
  .display-flex(@jc: center; @al: center;);
  margin: 5vw 2.5vw;
}

Tab页切换

import React, {
    useState, useEffect } from "react";
import "./styles.less";
import HeaderLayout from "@/common-components/HeaderLayout";
import IconFont from "@/common-components/Icon";
import {
    Tabs, Row, Col } from "antd";
import classnames from "classnames";
const {
    TabPane } = Tabs;

const TabCard = ({
    
  background,
  tittle,
  age,
  standard,
  highOrder,
  containText,
  LessionNum
}) => {
   
  return (
    <div
      className="tabCard"
      style={
   {
   
        textAlign: "center",
        borderColor: background,
        width: "70vh",
        hight: "70vh"
      }}
    >
      <div className="tabCard-top" style={
   {
    background: background }}>
        <Row type="flex" justify="space-between" align="middle">
          <Col span={
   6}>
            <span>{
   LessionNum}</span>
            <span>{
   highOrder}</span>
          </Col>
          <Col span={
   12}>
            <span>{
   age}</span>
            <span>{
   standard}</span>
          </Col>
        </Row>
      </div>
      <div className="tabCard-bottom">{
   containText}</div>
    </div>
  );
};

const Card = ({
    
  icon,
  background,
  backgroundColor_span,
  num,
  noun,
  ascension,
  age,
  standard,
  series,
  bottemContainer
}) => {
   
  return (
    <div
      className="card"
      style={
   {
   
        textAlign: "center"
      }}
    >
      <div className="card-top" style={
   {
    background: background }}>
        <Row type="flex" justify="space-between" align="middle">
          <Col span={
   8}>{
   series}</Col>
          <Col span={
   16}>
            <span>{
   age} 岁</span>
            <span>{
   standard}</span>
          </Col>
        </Row>
        <Row type="flex" justify="space-between" className="card-top-last">
          <Col span={
   2} style={
   {
    background: backgroundColor_span }}>
            <span>收获</span>
          </Col>

          <Col span={
   22}>
            <div>
              产出至少{
   num}个{
   noun}
            </div>
            <div>{
   ascension}</div>
          </Col>
        </Row>
        <IconFont
          type={
   icon}
          className="card-icon"
          style={
   {
    fontSize: "8em" }}
        />
      </div>
      <div className="card-bottom" style={
   {
    height: "21vh" }}>
        {
   bottemContainer}
      </div>
    </div>
  );
};

const Subject = ({
     icon, title, subTile, color, background }) => {
   
  return (
    <div
      style={
   {
   
        borderRadius: 10,
        textAlign: "center",
        color: color,
        background: background
      }}
    >
      <IconFont type={
   icon} style={
   {
    fontSize: "3em" }} />
      <div>{
   title}</div>
      <div>{
   subTile}</div>
    </div>
  );
};
const BottomArraw = ({
    borderColor,arrawFirstColor}) => {
   
  return (
    <div style={
   {
    position: "relative" }}>
      <div
        style={
   {
   
          width: "7vw",
          borderColor: borderColor,
          position: "absolute",
          top: "2.1vw",
          left: "0.2vw",
          borderRadius: "0.9vw 0 0 0",
          boxShadow:"0 10px 0 0 rgba(50,39,18,0.29)"
        }}
        className="border-arw"
      ></div>
      <div
        className="border-arw"
        style={
   {
   
          width: "0",
          borderColor: arrawFirstColor,
          position: "absolute",
          top: "2.1vw",
          left: "7.2vw",
          zIndex: "10"
        }}
      ></div>
      <div
        className="border-arw "
        style={
   {
   
          width: "0",
          borderColor:
            "transparent transparent transparent rgba(50,39,18,0.29)",