修改

public/drawCarousel.html

@@ -44,8 +44,10 @@
     #app {
       background: url('https://xiaoyou.dgtis.com/images/image/2023/08/16/obnd1td7k6c65ehxciz6.png') no-repeat;
       background-size: 100% 100%;
-      width: 720px;
-      height: 480px;
+      width: 640px;
+      height: 680px;
+      margin: 0 auto;
+      margin-top: 20px;
     }
     .el-dialog__body{
       padding-top: 0px !important;
@@ -72,7 +74,7 @@
         cursor: pointer;
         position: absolute;
         right: 10%;
-        top: 15%;
+        top: 12%;
     }
 
     .recordBtn>img {
@@ -81,8 +83,8 @@
     }
     .container {
       overflow: hidden;
-      width: 352px;
-      height: 352px;
+      width: 500px;
+      height: 500px;
       margin: 0 auto;
       position: relative;
       top: 23%;
@@ -106,9 +108,9 @@
     }
 
     .prize-item img {
-      width: 25%;
+      width: 35%;
       /* height: 25%; */
-      margin: 25px auto 10px;
+      margin: 35px auto 10px;
       display: block;
     }
 
@@ -146,7 +148,7 @@
       transform: rotate(-5deg); */
     }
     .recordListBox{
-      height: 200px;
+      max-height: 200px;
       overflow: auto;
     }
     .title{
@@ -159,6 +161,11 @@
       align-items: center;
       margin: 10px 0;
     }
+    .recordItem .prise .recordItem .priseTime{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   </style>
 </head>
 
@@ -195,12 +202,13 @@
     >
     <div class="recordListBox">
       <div class="recordItem title">
-        <div class="prise">奖品</div>
-        <div class="priseTime">获奖时间</div>
+        <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>
+      <el-empty description="暂无数据" v-if="recordList.length==0" :image-size="20"></el-empty>
+      <div class="recordItem" v-for="(item, index) in recordList">
+        <div class="prise">{{item.createTime}}</div>
+        <div class="priseTime">{{item.prizeName}}</div>
       </div>
     </div>
   </el-dialog>
@@ -224,6 +232,7 @@
     createApp({
       setup() {
         const state = reactive({
+          recordList:[],
           dialogRecordList:false,
           dialogVisible:false,
           rule:'',
@@ -298,8 +307,8 @@
           const _degree = rotateAngle.value
           return (i) => {
             return `
-              width: ${2 * 176 * Math.sin(_degree / 2 * Math.PI / 180)}px;
-              height: 176px;
+              width: ${2 * 250 * Math.sin(_degree / 2 * Math.PI / 180)}px;
+              height: 250px;
               transform: rotate(${_degree * i + _degree / 2}deg);
               transform-origin: 50% 100%;
             `
@@ -368,6 +377,26 @@
           
         };
 
+        //抽奖记录
+        async function getRecordList() {
+          const postData = {
+              actId: state.actId,
+            };
+            let res = await httpAjax('get', '/mall-prize/prize/user/list', postData);
+            if (res.errno === 0) {
+              console.log('抽奖记录',res.data);
+              state.recordList = res.data;
+            } else {
+              state.isRunning = false;
+              ElementPlus.ElMessage({
+                showClose: true,
+                message: res.errmsg,
+                type: 'error',
+              });
+            }  
+          
+        };
+
         // 简单封装ajax
         const httpAjax = (type, url, data) => {
           ajaxHeaders = {
@@ -421,6 +450,7 @@
           state.dialogVisible = true;
         }
         const showRecordList = () =>{
+          getRecordList();
           state.dialogRecordList = true;
         }
         const start = () => {

src/views/HomeView/DrawCarouselGame/DrawCarouselGame.vue

@@ -61,7 +61,7 @@ export default{
 }
 .timeline-entry-list .gameBox{
     width: 720px;
-    height: 480px;
+    height: 720px;
     background-color: #fff;
 }
 </style>