vant custom popup

Use vant to make a bullet box, as follows:

html layer

<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>

data layer:

import { Dialog, Popup } from "vant";

Because there is a lot of text, we directly put the text content in the data, which is convenient for maintenance and modification.

multipleContent: [
       {
         title: "Design Description",
         content: [
           "1. Please design the game peripherals around CS:GO. The works must be original. If you use the official elements in the game, you need to re-create them.",
           "2. There are no restrictions on peripheral design categories. Except for "T-shirt" and "Mouse Pad", which have separate display modules, all other categories of designs should be submitted to the "Other" module.",
           "3. The creation is not limited to artistic style, display templates and carriers, and the templates given by the competition can be used (see the resource download section).",
           "4. Works can include but are not limited to peripheral design drafts, process drafts, creative inspiration drawings, etc. The specific requirements for uploading pictures are as follows:",
           "[Size] 16:9",
           "[Size] Within 2M, clearly discernible",
           "[Format] jpg/png/gif",
           "5. Please submit the work display and design source files on the "I want to contribute" page, and please send the source files over 50mb to the official email [email protected]",
           "6. At the same time, you are also welcome to record the surrounding creative process and stories in the form of videos, and share them on the special page; videos are not within the scope of the competition, but wonderful videos will be officially recommended, and there is a chance to get reward points!"
         ]
       },
       {
         title: "Participant Instructions",
         content: [
           "1. Before submitting your works, please make sure you have read and are willing to abide by the relevant competition rules. All pictures and texts of the participants must be reviewed by the organizer before they can be published. Any work that violates the competition rules, the organizer reserves the right to cancel the entry. qualifications.",
           "2. The entries submitted by the entrants must not be commercialized, not authorized to be used by others, and have not participated in other similar competitions. They must be original by the entrants, and must not copy or embezzle the works of others, and the copyright has not been transferred to others. (If the works contain The material element <non-original part>, the author needs to have the authorization to use the copyright of the material) If there is a copyright dispute during the competition or commercial application, the organizer has the right to recover the bonus that has been issued, and the legal responsibility shall be borne by the contestant himself )",
           "3. During the competition, the entrant shall not transfer or authorize the entry to any third party, and shall not use the entry to participate in other activities that are the same or similar to this competition.",
           "4. If multiple people cooperate, it is necessary to obtain the consent of all collaborators and indicate the names of all collaborators; the same user name can upload multiple sets of different entries, and if the same work is repeatedly submitted, the first submission shall prevail; The results are based on works, that is, the same username can get multiple awards.",
           "5. In order to ensure the fairness and impartiality of this competition, the entries shall not add any third-party LOGO unrelated to this competition, and the current employees of the organizer will not participate in the awards.",
           "6. In order to present the works uniformly and facilitate the dissemination and promotion of the organizer, please use the submission function of the special page of this competition to upload the works, and pay attention to the template requirements such as the size, size and format of the works, but the template requirements do not serve as a decision on the works. Necessary factors for winning.",
           "7. Participants are requested to pay attention to the deadline and submit their papers in time. Before entering the review stage, participants can modify and adjust their works. After resubmission, they need to be reviewed again. The entries must not involve pornography or violence, and must not publish illegal, spoof, impersonation, or excessive Scratch and other "placeholder" works that do not meet the entry requirements.",
           "8. The special page of the competition is the only channel for registration and participation. Participants are requested to register for the competition in accordance with the regulations of the competition, and upload their entries (the entries and entries from other channels are considered invalid).",
           "9. Due to the large amount of uploads in the middle and later stages of the competition, participants are requested to arrange the competition time reasonably and submit the manuscripts in time to avoid repeated uploads or upload failures.",
           " 10. For creative exchanges and information consultation during the competition, please join the official communication group, QQ group 796851868."
         ]
       },
       {
         title: "Related Benefits",
         content: [
           "1. The intellectual property rights of the first-prize works are owned by the sponsor company. After the sponsor pays the corresponding bonus, the sponsor has the right to use the first-prize works in any form, including publication, distribution, modification, authorization, license, Activities and various commercial development applications, etc. The author can retain the permanent authorship of the first prize works.",
           "2. If the organizer needs to further improve the first prize works or develop and design peripheral products, the award-winning author needs to assist.",
           "3. The organizer has the right to display, report, publicize and use all entries for market activities. If the organizer needs to develop, produce, and sell the works other than the first prize for commercial purposes, it is necessary to obtain the author Written permission and payment of the corresponding design fee to the author.",
           "4. Once all works are submitted, it will be deemed that the contestants agree and abide by the relevant regulations of the competition. If the organizer uses the entries in accordance with the rules of the event, there is a dispute over the copyright, the organizer will not be responsible for the infringement of the rights of others (or units) due to the works. The resulting legal responsibility shall be borne by the contestants who provide the works.",
           "The organizer reserves the right of final interpretation of this event."
         ]
       }
     ],

scroll bar style

::-webkit-scrollbar {
  width: 10px;
  /* Valid for vertical flow bars */
  height: 10px;
  cursor: pointer;
  /*Valid for horizontal flow bar*/}/*Define the track color, inner shadow and rounded corners of the scroll bar (especially note that border-radius must be written, set to 0 here)*/::-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;}/*Define slider color, inner shadow and rounded corners*/::-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;}/*Define the style of the buttons at both ends*/::-webkit-scrollbar-button {
  background-color: #7b0f0e;
  cursor: pointer;}/*Define the style of the bottom right confluence */::-webkit-scrollbar-corner {
  background: #7b0f0e;}::-webkit-scrollbar-corner {
  background-color: #7b0f0e;}

vant popup and popup layer

Today I found a style problem about the vant bullet box and pop-up layer

Once the parent node uses transform:translate(); or animation: mt 1s both; after transform:translate() is defined in mt, the child nodes van-dialog and van-popup will have problems up and down. Attention!

<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> -->