抽奖样式调整

components.d.ts

@@ -72,4 +72,7 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/mall/components/prizeDraw.vue

@@ -7,15 +7,13 @@
       :prizes="prizes"
       :blocks="blocks"
       :buttons="buttons"
-      :activeStyle="activeStyle"
-      :defaultStyle="defaultStyle"
+      :default-config="defaultConfig"
       :disabled="true"
       class="prizeDraw"
       @start="startCallback"
       @end="endCallback"
     />
-    <!-- <v-btn @click="startCallback" class="mt-3" color="primary">开始抽奖</v-btn> -->
-    <div class="numberBox mt-5">你还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div>
+    <div class="numberBox mt-5">您还剩余<span class="colorBase">{{ number }}</span>次抽奖机会</div>
   </div>
 </template>
 
@@ -34,8 +32,8 @@ import { ref } from 'vue'
 
 const myLucky = ref()
 const blocks = [
-  { padding: '10px', background: '#fff', imgs:[] },
-  { padding: '10px', background: '#e9e8fe' },
+  // { padding: '10px', background: '#fff', imgs:[] },
+  { padding: '10px', background: '#00897B', borderRadius: 6 },
 ]
 const prizeImg = {
   src: 'https://img1.baidu.com/it/u=681765036,1809656907&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
@@ -43,11 +41,6 @@ const prizeImg = {
   width: '100%',
   top: '0%'
 }
-// const cellImg = {
-//   src: '/static/imgs/cell-80.png',
-//   width: '100%',
-//   height: '100%'
-// }
 const prizes = [
   { x: 0, y: 0, imgs: [prizeImg] },
   { x: 1, y: 0, imgs: [prizeImg] },
@@ -62,8 +55,7 @@ const buttons = [
   {
     x: 1, y: 1,
     background: '#fe920200',
-    borderRaduis: '10px',
-    // fonts: [{ text: '开始抽奖', fontColor: '#fff', margin: '10px', top: 30}],
+    borderRadius: '10px',
     imgs: [{
       src: 'https://img1.baidu.com/it/u=3949019928,2138080900&fm=253&fmt=auto&app=138&f=PNG?w=300&h=300',
       width: '100%',
@@ -71,12 +63,9 @@ const buttons = [
     }],
   }
 ]
-const defaultStyle = {
-  background: '#b8c5f2'
-}
-const activeStyle = {
-  fontColor: 'red',
-  background: '#869cfa'
+const defaultConfig = {
+  gutter: 10, // 格子之间的间隙
+  speed: 10 // 旋转速度的峰值
 }
 
 const startCallback = () => {
@@ -126,7 +115,7 @@ getData()
   font-size: 20px;
   font-weight: bold;
   padding: 2px 38px;
-  border-bottom: 3px solid #b6b5c5;
+  border-bottom: 3px solid #00897B;
 }
 .colorBase {
   color: var(--v-primary-base);

src/views/mall/payOver/index.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <!-- <Navbar v-if="props.showNavbar" class="mb-3" /> -->
-  <v-card class="default-width">
+  <v-card class="default-width mt-15 mb-3">
     <showText></showText>
     <!-- 抽奖 -->
     <prizeDraw class="prizeDraw mx-15 my-7" ></prizeDraw>