Antdv常用的默认样式更改

AVTDV4.X的input

:deep(.ant-input) {
  color: @text2;
  height: 64px;
  font-size: 14px;
  border-radius: 0;
  &::placeholder {
    color: @text4;
    font-size: 14px;
    border-radius: 0;
  }
}

折叠面板collapse

重置面板的默认样式，可以自定义自己的样式 图标用的iconPark

  /deep/
    .ant-collapse-icon-position-right
    > .ant-collapse-item
    > .ant-collapse-header {
    padding: 0 !important;
  }
  /deep/ .ant-collapse-content > .ant-collapse-content-box {
    padding: 0 !important;
  }
  /deep/
    .ant-collapse-icon-position-right
    > .ant-collapse-item
    > .ant-collapse-header
    .ant-collapse-arrow {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 4px;
  }

Vue代码

 <div class="collapse">
      <a-collapse
        v-model="activeKey"
        expand-icon-position="right"
        :bordered="false"
      >
        <template #expandIcon="props">
          <div class="collapse-reduce" v-if="props.isActive">
            <minus theme="filled" size="14" fill="#333" :strokeWidth="2" />
          </div>
          <div class="collapse-add" v-else>
            <plus theme="filled" size="14" fill="#333" :strokeWidth="2" />
          </div>
        </template>

        <a-collapse-panel
          :key="item.id"
          :style="customStyle"
          v-for="(item, index) in matchList"
        >
          <template #header="props">
            <div
              class="match-title"
              :style="{ backgroundColor: props.isActive ? '#e5f0f9' : '#fff' }"
            >
              <svg
                class="iconpark-icon"
                style="width: 40px; height: 40px; margin-right: 5px"
              >
                <use :href="item.icon" color="#0167C3"></use>
              </svg>
              <span>{{ item.title }}</span>
            </div>
          </template>
          <div class="match">
            <div class="match-item" v-for="(i, j) in item.child" :key="j">
              <div class="match-left">{{ i.time }}</div>
              <div class="match-center">
                <div>
                  <div>{{ i.project }}</div>
                  <div>
                    <dot
                      theme="filled"
                      size="8"
                      fill="#999"
                      :strokeWidth="1"
                      style="margin: 0 10px"
                    />
                    <span>预赛</span>
                  </div>
                </div>
                <div>{{ i.address }}</div>
              </div>
              <div class="match-right" @click="matchDetail(item)">
                <span>查看详情</span>
                <arrow-right
                  theme="filled"
                  size="20"
                  fill="#999"
                  :strokeWidth="3"
                  style="margin: 8px 0 0 8px"
                />
              </div>
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    

  data() {
    return {
      activeKey: ["1"],
      customStyle: "background-color: #fff;border: 0;overflow: hidden;",
      matchList: [
        {
          title: "足球",
          id: "1",
          icon: "#q3",
          child: [
            {
              id: 1,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
            {
              id: 2,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
            {
              id: 3,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
          ],
        },
        {
          id: "2",
          icon: "#q2",
          title: "跆拳道",
          child: [
            {
              id: 1,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
            {
              id: 2,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
            {
              id: 3,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              type: "1/16",
              address: "体育中心",
            },
          ],
        },
        {
          id: "3",
          icon: "#q1",
          title: "自由搏击",
          child: [
            {
              id: 1,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              address: "体育中心",
            },
            {
              id: 2,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              address: "体育中心",
            },
            {
              id: 3,
              time: "上午9：00",
              project: "成年乙组跆拳道正式赛预赛",
              address: "体育中心",
            },
          ],
        },
      ],
    };
  },

效果图

collapse面板默认是超出自动隐藏的，但是有时候是需要定位超出显示，尝试很多方法，找到一个可以实现看前后样式图

代码实现

 <a-collapse
        v-model="activeKey"
        expand-icon-position="right"
        :bordered="false"
        @change="addStyle"
      >
</a-collapse>
  mounted() {
    this.overflowVisible();
  },
  methods: {
    overflowVisible() {
      this.$nextTick(() => {
        const customCollapseContents = document.querySelectorAll(
          ".ant-collapse-content.ant-collapse-content-active"
        );
        customCollapseContents.forEach((content) => {
          content.style.overflow = "visible";
        });
      });
    },
    addStyle() {
      this.overflowVisible();
    },
  },

ANTDV4.X的collapse

:deep(.ant-collapse) {
  border: none;
}
:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-header) {
  border-radius: 0 !important;
  border: none;
  background-color: @white;
  font-size: 18px;
  font-weight: bold;
}

:deep(.ant-collapse > .ant-collapse-item) {
  font-size: 16px;
}
:deep(.ant-collapse > .ant-collapse-item > .ant-collapse-content-active) {
  border: none;
}
:deep(.ant-collapse-content > .ant-collapse-content-box) {
  padding: 0 !important;
}
:deep(
    .ant-collapse-icon-position-right
      > .ant-collapse-item
      > .ant-collapse-header
      .ant-collapse-arrow
  ) {
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 4px;
}

选择框select

图标用的iconPark

 <a-select
      v-if="select"
      :style="{ width: selectWidth, fontWeight: 'bold' }"
      @change="handleChange"
      :defaultValue="selectList[0].id"
    >
      <template slot="menuItemSelectedIcon">
        <up-one theme="filled" size="14" fill="#C4C4C4" :strokeWidth="1" />
      </template>
      <template slot="suffixIcon">
        <down-one theme="filled" size="14" fill="#C4C4C4" :strokeWidth="1" />
      </template>
      <a-select-option :value="i.id" v-for="(i, j) in selectList" :key="j"
        >{{ i.name }}
      </a-select-option>
    </a-select>

/deep/ .ant-select {
  width: 100%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  color: @main;
}
/deep/ .ant-select-selection--single {
  border: 1px solid @main;
  width: 100%;
  height: 50px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 50px;
}
/deep/ .ant-select-arrow {
  font-size: 18px;
  font-weight: bold;
  color: @main;
}

  data() {
    return {
      selectList: [
        {
          id: 1,
          name: "单项奖牌榜1",
        },
        {
          id: 2,
          name: "单项奖牌榜2",
        },
        {
          id: 3,
          name: "单项奖牌榜3",
        },
      ],
      selectWidth: "170px",
    };
  },

效果图

ANTDV4.x的select

:deep(.ant-select-selector) {
  height: 48px !important;
  border-radius: 0 !important;
  line-height: 48px !important;
}
:deep(.ant-select-selector .ant-select-selection-item) {
  height: 48px !important;
  border-radius: 0 !important;
  line-height: 48px !important;
}

:deep(.ant-select-arrow) {
  font-size: 16px;
  color: #31383f;
  font-weight: bold;
}

ANTDV4.X的tabs面板

//下划线修改
:deep(.ant-tabs-ink-bar) {
  background-color: @bg03;
}
//按钮大小
:deep(.ant-tabs-tab .ant-tabs-tab-btn) {
  width: 88px;
  text-align: center;
  color: @text2;
}
//选中颜色修改和按钮大小
:deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
  width: 88px;
  text-align: center;
  color: @text2;
}

//悬浮颜色修改
:deep(.ant-tabs-tab:hover) {
  color: @text2;
}