修改

public/drawCarousel.html

@@ -7,6 +7,34 @@
   <title>转盘抽奖</title>
   <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
   <style>
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(#101F1C, 0.1);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(144,147,153,.5);
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144,147,153,.3);
+}
+
     * {
       margin: 0;
       padding: 0;
@@ -20,7 +48,7 @@
       height: 480px;
     }
     .el-dialog__body{
-      padding-top: 0px;
+      padding-top: 0px !important;
     }
     [v-cloak] {
       display: none;
@@ -40,6 +68,17 @@
       left: 10%;
       top: 15%;
     }
+    .recordBtn {
+        cursor: pointer;
+        position: absolute;
+        right: 10%;
+        top: 15%;
+    }
+
+    .recordBtn>img {
+        width: 80px;
+        height: auto;
+    }
     .container {
       overflow: hidden;
       width: 352px;
@@ -106,6 +145,20 @@
       /* -webkit-transform: rotate(-5deg);
       transform: rotate(-5deg); */
     }
+    .recordListBox{
+      height: 200px;
+      overflow: auto;
+    }
+    .title{
+      font-size: 15px;
+      font-weight: 600;
+    }
+    .recordItem{
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      margin: 10px 0;
+    }
   </style>
 </head>
 
@@ -114,6 +167,9 @@
     <div class="rules" @click="showRules">
       抽奖<br>规则
     </div>
+    <div class="recordBtn" @click="showRecordList">
+      <img src="https://xiaoyou.dgtis.com/images/image/2023/09/06/lt1vbg426idwq725ysdm.png" alt="抽奖记录">
+    </div>
     <div class="container">
       <div class="prize-list" ref="prizeWrap" :style="bgColor">
         <div class="prize-item" v-for="(item, index) in prizeList" :style="prizeStyle(index)">
@@ -127,9 +183,27 @@
       v-model="dialogVisible"
       title="抽奖规则"
       width="50%"
+      center
     >
       <div v-html="rule"></div>
     </el-dialog>
+    <el-dialog
+      v-model="dialogRecordList"
+      title="抽奖记录"
+      width="50%"
+      center
+    >
+    <div class="recordListBox">
+      <div class="recordItem title">
+        <div class="prise">奖品</div>
+        <div class="priseTime">获奖时间</div>
+      </div>
+      <div class="recordItem" v-for="(item, index) in 20">
+        <div class="prise">小象巨蛋</div>
+        <div class="priseTime">2023-09-06</div>
+      </div>
+    </div>
+  </el-dialog>
   </div>
 
   <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
@@ -150,6 +224,7 @@
     createApp({
       setup() {
         const state = reactive({
+          dialogRecordList:false,
           dialogVisible:false,
           rule:'',
           token: '',
@@ -345,6 +420,9 @@
         const showRules = () =>{
           state.dialogVisible = true;
         }
+        const showRecordList = () =>{
+          state.dialogRecordList = true;
+        }
         const start = () => {
           debugger
           // ElementPlus.ElMessage({
@@ -399,7 +477,8 @@
           prizeStyle,
           prizeWrap,
           start,
-          showRules
+          showRules,
+          showRecordList
         }
       }
     }).use(ElementPlus).mount('#app')