使用vant 自定義彈框全過程

 <van-popup
     v-model="show"
     closeable
     class="dialog-test"
     close-icon="close"
     close-icon-position="top-right"
     :style="{ height: '30%' }"
   >
     <div class="dialog-content">
       <div v-for="(item, index) in multipleContent" :key="`dialog_${index}`">
         <div class="title">{{ item.title }}</div>
         <div class="container">
           <p v-for="(p, i) in item.content" :key="i" class="content">
             {{ p }}
           </p>
         </div>
       </div>
     </div>
   </van-popup>

import { Dialog, Popup } from "vant";

multipleContent: [
       {
         title: "設計說明",
         content: [
           "1. 請圍繞CS:GO設計遊戲周邊，作品要求原創，如使用到遊戲內官方元素則需進行二次創作。",
           "2. 周邊設計類別不限，除“T恤”和“鼠標墊”有單獨的展示模塊，其餘類別設計均請投稿至“其他”模塊。",
           "3. 創作不限美術風格，不限展示模板和載體，可使用大賽給出的模板（見資源下載部分）。",
           "4. 作品可包含但不限於周邊設計稿、過程稿、創意靈感圖等，上傳圖片具體要求如下：",
           "【尺寸】16:9",
           "【大小】2M以內，清晰可辨",
           "【格式】jpg/png/gif",
           "5. 請在“我要投稿”頁面提交作品展示圖及設計源文件，超過50mb的源文件則請單獨發送至官方郵箱[email protected]",
           "6. 同時也歡迎大傢以視頻的形式記錄周邊創作過程和背後故事，並分享至專題頁；視頻不在參賽范圍，但精彩視頻會獲官方推薦，還有機會得點卡獎勵哦！"
         ]
       },
       {
         title: "參賽須知",
         content: [
           "1. 參賽者在提交作品前請確保已經閱讀並且願意遵守相關比賽規則，參賽者所有圖片文字都需要經過主辦方審核後才可發佈，任何違反比賽規則的作品，主辦方有權取消其參賽資格。",
           "2. 參賽者提交的參賽作品均須未被商用、未授權他人使用、未參加其他同類比賽，必須為參賽者原創，不得抄襲、盜用他人作品，且版權未移交他人。（如作品中含有素材元素<非原創部分>，作者需擁有該素材版權的使用授權許可）若在比賽或商業應用過程中發生版權糾紛，主辦方有權追回已經發放的獎金，其法律責任由參賽者本人承擔）",
           "3. 參賽期間，參賽者不得將參賽作品轉讓或授權給任何第三方，不得用參賽作品參與與本賽事相同或類似的其他活動。",
           "4. 如多人合作，需征得所有合作者同意並標明所有合作者姓名；同一用戶名可上傳多組不同參賽作品，出現同一作品重復投稿情況則以第一次投稿作品為準；評選結果以作品為單位，即同一用戶名可獲得多個獎項。",
           "5. 為保證本次賽事活動的公平公正，參賽作品不得添加任何與本次大賽無關的第三方LOGO，主辦方在職員工參賽一律不參與評獎。",
           "6. 為瞭作品呈現的統一性以及便於主辦方的傳播推廣，請使用本次大賽專題頁的投稿功能上傳作品，並註意作品的大小、尺寸、格式等模板要求，但模板要求不作為決定作品獲獎的必要因素。",
           "7. 請參賽者註意截稿時間及時投稿，進入評審階段前，參賽者可以對作品進行修改調整，重新提交後需再次審核。參賽作品不得涉及色情、暴力，不得發表違法、惡搞、冒名、過於潦草隨意等不符合參賽要求的'占位'作品。",
           "8. 大賽專題頁為唯一報名參賽渠道，請參賽者按照賽事規定報名參賽，並上傳參賽作品（其他渠道報名及參賽的作品均視為參賽無效）。",
           "9. 因賽事中後期作品上傳量較大，請參賽者合理安排參賽時間，及時交稿，避免重復上傳或上傳失敗。",
           " 10. 大賽期間進行創作交流和信息咨詢，請加入官方交流群，QQ群796851868。"
         ]
       },
       {
         title: "相關權益",
         content: [
           "1. 一等獎作品的知識產權歸主辦方公司所有。在主辦方支付相應獎金後，主辦方有權對一等獎作品進行任何形式的使用，包括出版、發行、修改、授權、許可、活動和各種商業開發應用等。作者可以保留對一等獎作品的永久署名權。",
           "2. 若主辦方需對一等獎作品進行進一步完善或開發、設計周邊產品，獲獎作者需協助配合。",
           "3. 主辦方擁有對所有參賽作品進行展示、報道、宣傳及用於市場活動的權利。主辦方如需對除一等獎之外的作品進行開發、生產、銷售等商業用途，需取得作者書面許可，並向作者支付相應設計費用。",
           "4. 所有作品一經提交，將視為參賽作者同意並遵守比賽相關規定，若主辦方在按照活動規則使用參賽作品時其著作權存在爭議，主辦單位不承擔因作品侵犯他人（或單位）的權利而產生的法律責任，由提供作品的參賽者承擔全部法律責任。",
           "主辦方對本活動保留最終解釋權。"
         ]
       }
     ],

::-webkit-scrollbar {
  width: 10px;
  /*對垂直流動條有效*/
  height: 10px;
  cursor: pointer;
  /*對水平流動條有效*/
}

/*定義滾動條的軌道顏色、內陰影及圓角 （特別註意border-radius 必須是要寫的，這裡設置為0）*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
  background-color: rgba(128, 0, 0, 0.8);
  border-radius: 0px;
}

/*定義滑塊顏色、內陰影及圓角*/
::-webkit-scrollbar-thumb {
  // border-radius: 7px;
  /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
  background-color: rgba(255, 228, 225, 0.6);
  cursor: pointer;
}

/*定義兩端按鈕的樣式*/
::-webkit-scrollbar-button {
  background-color: #7b0f0e;
  cursor: pointer;
}

/*定義右下角匯合處的樣式*/
::-webkit-scrollbar-corner {
  background: #7b0f0e;
}

::-webkit-scrollbar-corner {
  background-color: #7b0f0e;
}

<style>
bigWrap{
transform:translate(0, 0)
}
</style>

<van-dialog use-slot v-model="isShow" :confirmButtonText="$t('btn.cancelBtn')">
<div :class="['codeTitle',type] "></div>
      <img :src="require(`@/assets/img/${type}${radio}.png`)" />
 </van-dialog>
      <!-- <van-popup v-model="isShow">
        <div :class="['codeTitle',type] "></div>
        <img :src="require(`@/assets/img/${type}${radio}.png`)" />
      </van-popup> -->