UI组件使用技巧

ANTDV

modal样式

<div class="game-modal">
      <div ref="yourModal">div>
      <a-modal class="modal" v-model="showModal" @ok="handleOk"   :footer="null"  :maskClosable="false" :getContainer="() => $refs.yourModal">
        
        <template v-slot:closeIcon>
          <div class="close-icon">
           <img src="../../assets/cha.svg" alt="">
          div>
        template>
        <DefaultGameModal />
      a-modal>
 div>
1
2
3
4
5
6
7
8
9
10
11
12

  // 对战弹窗
 /deep/ .ant-modal {
  width: 1200px !important;
}
 /deep/ .ant-modal-content {
  border-radius: 20px !important;
}
  .close-icon{
    border-radius: 20px;
    position: absolute;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    top:-15px;
    margin-left: 60px;
    box-sizing: border-box;
    background-color: #ffffff;
    img{
      margin-top: -4px;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22