Merge branch 'test' of gitlab.aodianyun.com:activities/web-lottery into test

8630356b · 赖慧粮 · 4dab8f40 · cca12ef7 · 8630356b · 8630356b
Commit 8630356b authored Apr 20, 2022 by 赖慧粮
16 changed files
--- a/components/Lottery/Instant/Introduction.vue
+++ b/components/Lottery/Instant/Introduction.vue
 <template>
-  <div class="introduction" :style="introBoxStyle">
+  <div class="introduction">
-    <div class="introduction__sec-title" :style="titleStyle">{{ titleText }}</div>
+    <div class="introduction__sec-title">活动介绍</div>
-    <div class="introduction__wrap" :style="wrapStyle">
+    <div class="introduction__wrap">
-      <div class="introduction__content" :style="contentStyle">
+      <div class="introduction__content">
-        <p v-if="rule.position === 'top'" class="introduction__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
+        <p v-if="rulePosition === 'top'" class="introduction__intro">{{ lotteryInfo.intro }}</p>
        <template v-if="!!lotteryInfo.isShowPrize">
          <div class="introduction__title">本场活动奖品：</div>
          <div class="introduction__prize">
@@ -19,7 +19,7 @@
            </ul>
          </div>
        </template>
-        <div v-if="rule.position === 'bottom'" class="introduction__intro" :style="rule.style">
+        <div v-if="rulePosition === 'bottom'" class="introduction__intro">
          <p class="introduction__intro-rule">活动规则</p>
          <p>{{ lotteryInfo.intro }}</p>
        </div>
@@ -35,33 +35,10 @@ import img from '@/assets/images/lottery/gift.png'
 export default {
  name: 'Introduction',
  props: {
-    rule: {
+    rulePosition: {
-      type: Object,
-      default: () => ({
-        position: 'top',
-        style: {}
-      })
-    },
-    titleStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    titleText: {
      type: String,
-      default: ''
+      default: 'top'
-    },
-    wrapStyle: {
-      type: Object,
-      default: () => ({})
    },
-    contentStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    introBoxStyle: {
-      type: Object,
-      default: () => ({})
-    }
  },
  data() {
    return {
@@ -91,6 +68,7 @@ export default {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
+    font-size: 0;
  }
  &__wrap {
    width: 100%;

--- a/components/Lottery/Instant/IntroductionPopup.vue
+++ b/components/Lottery/Instant/IntroductionPopup.vue
@@ -5,15 +5,14 @@
    position="bottom"
    transition="van-fade"
    class="introduction-popup"
-    :style="popupStyle"
  >
    <div class="introduction-popup__main">
-      <div class="introduction-popup__sec-title" :style="titleStyle">活动介绍</div>
+      <div class="introduction-popup__sec-title">活动介绍</div>
-      <div class="introduction-popup__wrap" :style="wrapStyle">
+      <div class="introduction-popup__wrap">
-        <div class="introduction-popup__content" :style="contentStyle">
+        <div class="introduction-popup__content">
-          <p v-if="rule.position === 'top'" class="introduction-popup__intro" :style="rule.style">{{ lotteryInfo.intro }}</p>
+          <p v-if="rulePosition === 'top'" class="introduction-popup__intro">{{ lotteryInfo.intro }}</p>
          <template v-if="!!lotteryInfo.isShowPrize">
-            <div class="introduction-popup__box" :style="contentBoxStyle">
+            <div class="introduction-popup__box">
              <div class="introduction-popup__title">本场活动奖品：</div>
              <div class="introduction-popup__prize">
                <ul
@@ -29,13 +28,13 @@
              </div>
            </div>
          </template>
-          <div v-if="rule.position === 'bottom'" class="introduction-popup__intro" :style="rule.style">
+          <div v-if="rulePosition === 'bottom'" class="introduction-popup__intro">
            <p class="introduction-popup__intro-rule">活动规则</p>
            <p>{{ lotteryInfo.intro }}</p>
          </div>
        </div>
      </div>
-      <div class="introduction-popup__back" :style="backStyle" @click="visible = false">返回活动</div>
+      <div class="introduction-popup__back" @click="visible = false">返回活动</div>
    </div>
  </van-popup>
 </template>
@@ -52,37 +51,10 @@ export default {
      type: Boolean,
      default: false
    },
-    rule: {
+    rulePosition: {
-      type: Object,
+      type: String,
-      default: () => ({
+      default: 'top'
-        position: 'top',
-        style: {}
-      })
    },
-    contentBoxStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    titleStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    wrapStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    contentStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    popupStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    backStyle: {
-      type: Object,
-      default: () => ({})
-    }
  },
  data() {
    return {

--- a/components/Lottery/Instant/Main.vue
+++ b/components/Lottery/Instant/Main.vue
@@ -150,7 +150,7 @@
        </div>
      </div>
      <Records></Records>
-      <Introduction class="lottery-instant__intro" :title-style="wheelIntroductionTitleStyle"></Introduction>
+      <Introduction class="lottery-instant__intro"></Introduction>
      <WinPopup v-model="isShowWin" :info="winInfo"></WinPopup>
      <BindPhoneDialog v-model="isShowBindPhone"></BindPhoneDialog>
    </section>
@@ -162,7 +162,6 @@ import { setLottery } from '@/api/modules/lottery'
 import { LOTTERY_STATUS, LOTTERY_STATUS_TXT, LOTTERY_STYLE } from '@/utils/constant'
 import { PrizeGrid, PrizeWheel } from 'lotteries'
 import 'lotteries/lib/index.css'
-import wheelIntroductionTitleImg from '@/assets/images/lottery/intro_title.png'
 import Bus from '@/utils/Bus'
 export default {
@@ -251,11 +250,6 @@ export default {
      }
      return ''
    },
-    wheelIntroductionTitleStyle() {
-      return {
-        backgroundImage: `url(${wheelIntroductionTitleImg})`
-      }
-    }
  },
  mounted() {
    // this.lotteryInfo.showType = 4

--- a/components/Lottery/Instant/RecordsPupupNew.vue
+++ b/components/Lottery/Instant/RecordsPupupNew.vue
 <template>
  <van-popup v-model="visible" class="records-popup" swipeable>
-    <div class="records-popup__close" :style="closeBg" @click="closePopup"></div>
+    <div class="records-popup__close" @click="closePopup"></div>
    <div class="records-popup__title">
      <div class="records-popup__title-personal" :style="personalBg" @click="changeActive('personal')"></div>
      <div class="records-popup__title-winners" :style="winnersBg" @click="changeActive('winners')"></div>
@@ -11,13 +11,17 @@
          <div class="records-popup__phone" :style="normalTextColor">
            领奖手机号：
            <span v-if="isBindPhone" :style="normalTextColor">{{ userInfo.phone }}</span>
-            <span v-else class="records-popup__bind-phone" :style="prizebindTextColor" @click="bindMobile">绑定手机号</span>
+            <span v-else class="records-popup__bind-phone" :style="prizebindTextColor" @click="bindMobile"
+              >绑定手机号</span
+            >
          </div>
          <ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
            <li v-for="(session, key, index) in recordList" :key="index">
              <div v-for="(item, itemIndex) in session" :key="itemIndex" class="records-popup__session-info">
                <div class="records-popup__info-wrap">
-                  <div v-if="session.length > 1" class="records-popup__session" :style="normalTextColor">第{{ NUMBER_LIST[index + 1] }}场次</div>
+                  <div v-if="session.length > 1" class="records-popup__session" :style="normalTextColor">
+                    第{{ NUMBER_LIST[index + 1] }}场次
+                  </div>
                  <div class="records-popup__time" :style="normalTextColor">
                    <span>{{ (item.drawTime * 1000) | formatDate('MM-DD HH:mm:ss') }}</span>
                  </div>
@@ -26,7 +30,12 @@
              </div>
            </li>
          </ul>
-          <div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data" :style="noDataColor">暂无记录</div>
+          <div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data" :style="noDataColor">
+            暂无记录
+          </div>
+        </div>
+        <div class="records-popup__jump-detail">
+          <span @click="jumpDetail">查看奖品详情</span>
        </div>
      </div>
      <div v-show="active === 'winners' && isShowWinnersList" class="records-popup__winners-record">
@@ -197,6 +206,14 @@ export default {
    },
    closePopup() {
      this.$emit('setIsShowRecordsPopup', false)
+    },
+    jumpDetail() {
+      this.$router.push({
+        path: '/records',
+        query: {
+          uin: this.uin
+        }
+      })
    }
  }
 }
@@ -239,6 +256,18 @@ export default {
      transition: all 0.2s;
    }
  }
+  &__record-content {
+    height: 85%;
+  }
+  &__jump-detail {
+    width: 100%;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    color: #ff0024;
+    font-size: 12px;
+    margin-top: 10px;
+  }
  /deep/ .van-popup__close-icon {
    right: -22px;
    top: -20px;

--- a/components/Lottery/Instant/WinPopupNew.vue
+++ b/components/Lottery/Instant/WinPopupNew.vue
 <template>
  <van-popup v-model="visible" class="win-popup" :style="{ background: 'transparent' }">
    <div class="win-popup__container">
-      <div class="win-popup__close" :style="closeBg" @click="closePopup"></div>
+      <div class="win-popup__close" :style="closeBg" @click="onClose"></div>
      <div class="win-popup__wrap" :style="wrapBg">
        <div class="win-popup__content">
          <div v-if="isWin" class="win-popup__header">
@@ -21,9 +21,16 @@
            <slot name="thanks"></slot>
          </div>
        </div>
+        <div v-if="isWin" class="win-popup__bottom">
-        <div class="win-popup__footer" @click="know">
+          <van-button class="win-popup__sure" color="linear-gradient(#fff0cd, #fdbf2c)" round @click="know"
-          <img :src="winConfig.winKnow" />
+            >查看奖品详情</van-button
+          >
+          <p class="win-popup__win-msg">根据活动说明进行领取</p>
+        </div>
+        <div v-else class="win-popup__bottom">
+          <van-button class="win-popup__sure" color="linear-gradient(#fff0cd, #fdbf2c)" round @click="visible = false"
+            >我知道了</van-button
+          >
        </div>
      </div>
    </div>
@@ -82,8 +89,8 @@ export default {
    know() {
      Bus.$emit('updateMain', { func: 'winCallback' })
    },
-    closePopup() {
+    onClose() {
-      Bus.$emit('updateMain', { isShowWin: false })
+      Bus.$emit('updateMain', { func: 'winCloseCallback' })
    }
  }
 }
@@ -128,6 +135,7 @@ export default {
    color: #fff;
    font-size: 16px;
    width: 100%;
+    height: 100%;
    overflow: hidden;
  }
  &__win-info {
@@ -195,6 +203,13 @@ export default {
      font-size: 18px;
    }
  }
+  &__bottom {
+    height: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+  }
  &__footer {
    position: absolute;
    bottom: 14%;
@@ -220,19 +235,21 @@ export default {
    }
  }
  &__sure {
-    width: 126px;
+    width: 157px;
-    height: 33px;
+    height: 49px;
-    line-height: 33px;
+    line-height: 49px;
-    border: 0;
+    border-radius: 20px;
    outline: none;
    /deep/ .van-button__text {
-      font-size: 13px;
+      font-size: 16px;
-      color: #fb1f34;
+      color: #860300;
-      font-weight: 500;
+      font-weight: 600;
+      text-shadow: 1px 0 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
    }
  }
  &__win-msg {
-    margin: 13px 0 20px;
+    text-align: center;
+    margin: 5px 0;
    font-size: 12px;
    color: #fff;
  }

--- a/components/Lottery/Instant/type/TypeGashapon.vue
+++ b/components/Lottery/Instant/type/TypeGashapon.vue
@@ -27,15 +27,7 @@
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
-    <Introduction
+    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
-      class="lottery-instant__intro"
-      :title-text="introConfig.titleText"
-      :rule="introConfig.rule"
-      :title-style="introConfig.introTitleStyle"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :intro-box-style="introConfig.introBoxStyle"
-    ></Introduction>
  </section>
 </template>
@@ -47,7 +39,6 @@ import { mapGetters } from 'vuex'
 import { LOTTERY_STATUS } from '@/utils/constant'
 import Bus from '@/utils/Bus'
 import {
-  introductionConfigGashapon,
  winConfigGashapon,
  recordsConfigGashapon,
  ballListGashapon,
@@ -93,7 +84,6 @@ export default {
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
      winConfig: winConfigGashapon, // 开奖样式
-      introConfig: introductionConfigGashapon,
      barStyle: countDownBarPurple,
      ballListGashapon // 扭蛋球图片
    }
@@ -220,4 +210,35 @@ export default {
    white-space: nowrap;
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction {
+    background-color: #7826A9;
+    padding: 8px 15px 30px 15px;
+    border-radius: 0;
+    &__sec-title {
+      background-image: none;
+      font-size: 16px;
+      font-weight: 700;
+      text-align: center;
+      width: 22%;
+      height: auto;
+      padding: 4px 0;
+      left: 50%;
+      color: #fff;
+      transform: translate(-50%, 50%);
+      background-color: #ffffff63;
+      border-radius: 2px;
+    }
+    &__wrap {
+      background-color: #7826a9;
+      padding: 2px;
+    }
+    &__content {
+      background: #7826a9;
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGashapon2.vue
+++ b/components/Lottery/Instant/type/TypeGashapon2.vue
@@ -29,15 +29,7 @@
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
-    <Introduction
+    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
-      class="lottery-instant__intro"
-      :title-text="introConfig.titleText"
-      :rule="introConfig.rule"
-      :title-style="introConfig.introTitleStyle"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :intro-box-style="introConfig.introBoxStyle"
-    ></Introduction>
  </section>
 </template>
@@ -49,7 +41,6 @@ import { mapGetters } from 'vuex'
 import { LOTTERY_STATUS } from '@/utils/constant'
 import Bus from '@/utils/Bus'
 import {
-  introductionConfigGashapon2 as introductionConfigGashapon,
  winConfigGashapon2 as winConfigGashapon,
  recordsConfigGashapon2 as recordsConfigGashapon,
  ballListGashapon,
@@ -95,7 +86,6 @@ export default {
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
      winConfig: winConfigGashapon, // 开奖样式
-      introConfig: introductionConfigGashapon,
      barStyle: countDownBarNone,
      ballListGashapon // 扭蛋球图片
    }
@@ -218,4 +208,36 @@ export default {
    }
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction {
+    background-color: #ffbd33;
+    padding: 75px 11px 8px 11px;
+    border-radius: 0;
+    &__sec-title {
+      background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-title.png');
+      width: 95%;
+      padding: 4px 0;
+      color: #fff;
+      font-size: 18px;
+      text-align: center;
+      line-height: 2;
+      top: -7%;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+    &__wrap {
+      background-image: url('@/assets/images/lottery/gashapon2/intro-wrap-bg.png');
+      background-size: 100% 100%;
+      padding: 15px 18px 25px 18px;
+      background-color: transparent;
+    }
+    &__content {
+      background: #fff9e9;
+      border-radius: 2px;
+      color: #000;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGashaponMini.vue
+++ b/components/Lottery/Instant/type/TypeGashaponMini.vue
@@ -30,12 +30,7 @@
    <Records :records-config="recordsConfig"></Records>
    <IntroductionPopup
      :value="isShowIntro"
-      :wrap-style="introConfig.introWrapStyle"
+      rule-position="bottom"
-      :content-style="introConfig.introContentStyle"
-      :popup-style="introConfig.introPopupStyle"
-      :content-box-style="introConfig.contentBoxStyle"
-      :back-style="introConfig.backStyle"
-      :rule="introConfig.rule"
    ></IntroductionPopup>
  </section>
 </template>
@@ -48,7 +43,6 @@ import { mapGetters } from 'vuex'
 import { LOTTERY_STATUS } from '@/utils/constant'
 import Bus from '@/utils/Bus'
 import {
-  introductionConfigGashaponMini,
  winConfigGashapon,
  recordsConfigGashapon,
  ballListGashapon,
@@ -98,7 +92,6 @@ export default {
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
      winConfig: winConfigGashapon, // 开奖样式
-      introConfig: introductionConfigGashaponMini,
      barStyle: countDownBarPurple,
      ballListGashapon // 扭蛋球图片
    }
@@ -239,4 +232,37 @@ export default {
    border-radius: 10px 0 0 10px;
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction-popup {
+    background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
+    &__wrap {
+      background-color: transparent;
+      padding: 2px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #fff;
+      padding: 0;
+    }
+    &__box {
+      background-color: #00000030;
+      padding: 1px 15px 15px 15px;
+      border-radius: 22px;
+    }
+    &__back {
+      top: 10px;
+      right: 0;
+      background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
+      box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
+      border-radius: 10px 0 0 10px;
+      padding: 6px 3px;
+      border: 0;
+    }
+    &__intro {
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGashaponMini2.vue
+++ b/components/Lottery/Instant/type/TypeGashaponMini2.vue
@@ -29,12 +29,7 @@
    <Records :records-config="recordsConfig"></Records>
    <IntroductionPopup
      :value="isShowIntro"
-      :wrap-style="introConfig.introWrapStyle"
+      rule-position="bottom"
-      :content-style="introConfig.introContentStyle"
-      :popup-style="introConfig.introPopupStyle"
-      :content-box-style="introConfig.contentBoxStyle"
-      :back-style="introConfig.backStyle"
-      :rule="introConfig.rule"
    ></IntroductionPopup>
  </section>
 </template>
@@ -47,7 +42,6 @@ import { mapGetters } from 'vuex'
 import { LOTTERY_STATUS } from '@/utils/constant'
 import Bus from '@/utils/Bus'
 import {
-  introductionConfigGashaponMini2 as introductionConfigGashaponMini,
  winConfigGashapon2 as winConfigGashapon,
  recordsConfigGashapon2 as recordsConfigGashapon,
  ballListGashapon,
@@ -97,7 +91,6 @@ export default {
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigGashapon, // 中奖记录样式配置
      winConfig: winConfigGashapon, // 开奖样式
-      introConfig: introductionConfigGashaponMini,
      barStyle: countDownBarWhite,
      ballListGashapon // 扭蛋球图片
    }
@@ -221,4 +214,37 @@ export default {
    border-radius: 10px 0 0 10px;
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction-popup {
+    background: url('@/assets/images/lottery/gashapon2/intro-bg-mini.png');
+    &__wrap {
+      background-color: transparent;
+      padding: 2px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #fff;
+      padding: 0;
+    }
+    &__box {
+      background-color: #00000030;
+      padding: 1px 15px 15px 15px;
+      border-radius: 22px;
+    }
+    &__back {
+      top: 10px;
+      right: 0;
+      background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
+      box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
+      border-radius: 10px 0 0 10px;
+      padding: 6px 3px;
+      border: 0;
+    }
+    &__intro {
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGuess.vue
+++ b/components/Lottery/Instant/type/TypeGuess.vue
@@ -34,15 +34,7 @@
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
-    <Introduction
+    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
-      class="lottery-instant__intro"
-      :title-text="introConfig.titleText"
-      :rule="introConfig.rule"
-      :title-style="introConfig.introTitleStyle"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :intro-box-style="introConfig.introBoxStyle"
-    ></Introduction>
  </section>
 </template>
@@ -54,7 +46,6 @@ import {
  blindBoxListGuess,
  recordsConfigGuess,
  winConfigGuess,
-  introductionConfigGuess,
  countDownBarDeepPurple,
  starConfig
 } from './config'
@@ -101,7 +92,6 @@ export default {
      blindBoxList: blindBoxListGuess,
      recordsConfig: recordsConfigGuess, // 中奖记录样式配置
      winConfig: winConfigGuess, // 开奖样式
-      introConfig: introductionConfigGuess,
      barStyle: countDownBarDeepPurple,
      starConfig
    }
@@ -251,4 +241,29 @@ export default {
  opacity: 0;
  top: 0 !important;
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction {
+    background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
+    padding: 30px 15px;
+    border-radius: 0;
+    &__sec-title {
+      background-image: none;
+      font-size: 16px;
+      font-weight: 700;
+      text-align: center;
+      color: #fff;
+      padding-top: 8px;
+    }
+    &__wrap {
+      background-color: #7f17e3;
+      padding: 2px;
+    }
+    &__content {
+      background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGuess2.vue
+++ b/components/Lottery/Instant/type/TypeGuess2.vue
@@ -34,15 +34,7 @@
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
-    <Introduction
+    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
-      class="lottery-instant__intro"
-      :title-text="introConfig.titleText"
-      :rule="introConfig.rule"
-      :title-style="introConfig.introTitleStyle"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :intro-box-style="introConfig.introBoxStyle"
-    ></Introduction>
  </section>
 </template>
@@ -54,7 +46,6 @@ import {
  blindBoxListGuess2,
  recordsConfigGuess,
  winConfigGuess,
-  introductionConfigGuess2 as introductionConfigGuess,
  countDownBarDeepPurple,
  starConfig
 } from './config'
@@ -101,7 +92,6 @@ export default {
      blindBoxList: blindBoxListGuess2,
      recordsConfig: recordsConfigGuess, // 中奖记录样式配置
      winConfig: winConfigGuess, // 开奖样式
-      introConfig: introductionConfigGuess,
      barStyle: countDownBarDeepPurple,
      starConfig
    }
@@ -249,4 +239,33 @@ export default {
 .choose-fade-leave-to {
  opacity: 0;
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction {
+    background: linear-gradient(180deg, #682ca1 0%, #a649d8 100%);
+    padding: 30px 15px;
+    border-radius: 0;
+    &__sec-title {
+      width: 97px;
+      height: 20px;
+      left: 50%;
+      transform: translate(-50%, 12px);
+      font-size: 0;
+      font-weight: 700;
+      text-align: center;
+      color: #fff;
+      background-image: url('@/assets/images/lottery/guess2/intro-title.png');
+      background-size: 100% 100%;
+    }
+    &__wrap {
+      background-color: #7f17e3;
+      padding: 2px;
+    }
+    &__content {
+      background: linear-gradient(180deg, #7b07c5 0%, #450393 100%);
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGuessMini.vue
+++ b/components/Lottery/Instant/type/TypeGuessMini.vue
@@ -35,15 +35,7 @@
    </WinPopupNew>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
    <Records :records-config="recordsConfig"></Records>
-    <IntroductionPopup
+    <IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
-      :value="isShowIntro"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :popup-style="introConfig.introPopupStyle"
-      :content-box-style="introConfig.contentBoxStyle"
-      :back-style="introConfig.backStyle"
-      :rule="introConfig.rule"
-    ></IntroductionPopup>
  </section>
 </template>
@@ -51,14 +43,7 @@
 import { PrizeGuess } from 'lotteries'
 import { mapGetters } from 'vuex'
 import Bus from '@/utils/Bus'
-import {
+import { blindBoxListGuess, recordsConfigGuess, winConfigGuess, countDownBarDeepPurple, starConfig } from './config'
-  blindBoxListGuess,
-  recordsConfigGuess,
-  winConfigGuess,
-  introductionConfigGuessMini,
-  countDownBarDeepPurple,
-  starConfig
-} from './config'
 export default {
  components: {
@@ -106,7 +91,6 @@ export default {
      blindBoxList: blindBoxListGuess,
      recordsConfig: recordsConfigGuess, // 中奖记录样式配置
      winConfig: winConfigGuess, // 开奖样式
-      introConfig: introductionConfigGuessMini,
      barStyle: countDownBarDeepPurple,
      starConfig
    }
@@ -274,4 +258,37 @@ export default {
  opacity: 0;
  top: 0 !important;
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction-popup {
+    background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
+    &__wrap {
+      background-color: transparent;
+      padding: 2px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #fff;
+      padding: 0;
+    }
+    &__box {
+      background-color: #00000030;
+      padding: 1px 15px 15px 15px;
+      border-radius: 22px;
+    }
+    &__back {
+      top: 10px;
+      right: 0;
+      background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
+      box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
+      border-radius: 10px 0 0 10px;
+      padding: 6px 3px;
+      border: 0;
+    }
+    &__intro {
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeGuessMini2.vue
+++ b/components/Lottery/Instant/type/TypeGuessMini2.vue
@@ -37,12 +37,7 @@
    <Records :records-config="recordsConfig"></Records>
    <IntroductionPopup
      :value="isShowIntro"
-      :wrap-style="introConfig.introWrapStyle"
+      rule-position="bottom"
-      :content-style="introConfig.introContentStyle"
-      :popup-style="introConfig.introPopupStyle"
-      :content-box-style="introConfig.contentBoxStyle"
-      :back-style="introConfig.backStyle"
-      :rule="introConfig.rule"
    ></IntroductionPopup>
  </section>
 </template>
@@ -55,7 +50,6 @@ import {
  blindBoxListGuess2 as blindBoxListGuess,
  recordsConfigGuess,
  winConfigGuess,
-  introductionConfigGuessMini,
  countDownBarDeepPurple,
  starConfig
 } from './config'
@@ -106,7 +100,6 @@ export default {
      blindBoxList: blindBoxListGuess,
      recordsConfig: recordsConfigGuess, // 中奖记录样式配置
      winConfig: winConfigGuess, // 开奖样式
-      introConfig: introductionConfigGuessMini,
      barStyle: countDownBarDeepPurple,
      starConfig
    }
@@ -272,4 +265,37 @@ export default {
 .choose-fade-leave-to {
  opacity: 0;
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction-popup {
+    background: url('@/assets/images/lottery/guess/intro-bg-mini.png');
+    &__wrap {
+      background-color: transparent;
+      padding: 2px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #fff;
+      padding: 0;
+    }
+    &__box {
+      background-color: #00000030;
+      padding: 1px 15px 15px 15px;
+      border-radius: 22px;
+    }
+    &__back {
+      top: 10px;
+      right: 0;
+      background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
+      box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
+      border-radius: 10px 0 0 10px;
+      padding: 6px 3px;
+      border: 0;
+    }
+    &__intro {
+      color: #fff;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeScratch.vue
+++ b/components/Lottery/Instant/type/TypeScratch.vue
@@ -47,15 +47,13 @@
        </div>
      </div>
    </div>
+    <WinPopupNew :value="isShowWin" :info="winInfo" :win-config="winConfig">
+      <template #thanks>
+        <div class="slot-thanks">你没有刮到奖品</div>
+      </template>
+    </WinPopupNew>
    <Records :records-config="recordsConfig"></Records>
-    <Introduction
+    <Introduction class="lottery-instant__intro" rule-position="bottom"></Introduction>
-      class="lottery-instant__intro"
-      :rule="introConfig.rule"
-      :title-style="introConfig.introTitleStyle"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :intro-box-style="introConfig.introBoxStyle"
-    ></Introduction>
  </section>
 </template>
@@ -67,10 +65,11 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
 import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
 import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
 import Bus from '@/utils/Bus'
-import { introductionConfigScratch, recordsConfigScratch, countDownBarBlue } from './config'
+import { recordsConfigScratch, countDownBarBlue, winConfigGashapon2 as winConfigScratch } from './config'
 export default {
  components: {
+    WinPopupNew: () => import('@/components/Lottery/Instant/WinPopupNew'),
    CountdownBar: () => import('@/components/Lottery/Instant/CountdownBar'),
    Introduction: () => import('@/components/Lottery/Instant/Introduction'),
    Records: () => import('@/components/Lottery/Instant/Records'),
@@ -107,7 +106,7 @@ export default {
      sid: this.$route.query.sid || null, // 引用id
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigScratch, // 中奖记录样式配置
-      introConfig: introductionConfigScratch,
+      winConfig: winConfigScratch, // 开奖样式
      barStyle: countDownBarBlue
    }
  },
@@ -150,6 +149,9 @@ export default {
        duration: 1500
      })
      Bus.$emit('updateMain', { isLottering: false })
+      setTimeout(() => {
+        Bus.$emit('updateMain', { isShowWin: true })
+      }, 400)
      if (this.lotteryInfo.userTimes === 0) {
        this.$refs.prizeScratchRef.tryAgain()
        this.firstTimeLottering = true
@@ -297,4 +299,25 @@ export default {
    }
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction {
+    padding: 38px 15px;
+    &__sec-title {
+      background-image: url('@/assets/images/lottery/scratch/introduction.png');
+      width: 38%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &__wrap {
+      background-color: #0000001a;
+      border-radius: 22px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #000;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/TypeScratchMini.vue
+++ b/components/Lottery/Instant/type/TypeScratchMini.vue
@@ -49,15 +49,7 @@
    </div>
    <div class="lottery-instant__intro-entry" @click="changeIsShowIntro">活动介绍</div>
    <Records :records-config="recordsConfig"></Records>
-    <IntroductionPopup
+    <IntroductionPopup :value="isShowIntro" rule-position="bottom"></IntroductionPopup>
-      :value="isShowIntro"
-      :wrap-style="introConfig.introWrapStyle"
-      :content-style="introConfig.introContentStyle"
-      :popup-style="introConfig.introPopupStyle"
-      :content-box-style="introConfig.contentBoxStyle"
-      :back-style="introConfig.backStyle"
-      :rule="introConfig.rule"
-    ></IntroductionPopup>
  </section>
 </template>
@@ -69,7 +61,7 @@ import coverImg from '@/assets/images/lottery/scratch/mask.png'
 import onStartImg from '@/assets/images/lottery/scratch/on-start.png'
 import onStartDidabledImg from '@/assets/images/lottery/scratch/on-start-disabled.png'
 import Bus from '@/utils/Bus'
-import { introductionConfigScratchMini2, recordsConfigScratch, countDownBarBlue } from './config'
+import { recordsConfigScratch, countDownBarBlue } from './config'
 export default {
  components: {
@@ -113,7 +105,6 @@ export default {
      sid: this.$route.query.sid || null, // 引用id
      stype: this.$route.query.stype || null, // 引用类型
      recordsConfig: recordsConfigScratch, // 中奖记录样式配置
-      introConfig: introductionConfigScratchMini2,
      barStyle: countDownBarBlue
    }
  },
@@ -324,4 +315,37 @@ export default {
    border-radius: 10px 0 0 10px;
  }
 }
+// 样式穿透
+.lottery-instant {
+  /deep/ .introduction-popup {
+    background: linear-gradient(180deg, #60bdff 0%, #aaeefb 100%);
+    &__wrap {
+      background-color: transparent;
+      padding: 2px;
+    }
+    &__content {
+      background-color: transparent;
+      color: #fff;
+      padding: 0;
+    }
+    &__box {
+      background-color: #00000030;
+      padding: 1px 15px 15px 15px;
+      border-radius: 22px;
+    }
+    &__back {
+      top: 10px;
+      right: 0;
+      background: linear-gradient(180deg, #ffd63e 0%, #fca60d 100%);
+      box-shadow: 0 1px 2px 0 rgba(202, 146, 46, 1);
+      border-radius: 10px 0 0 10px;
+      padding: 6px 3px;
+      border: 0;
+    }
+    &__intro {
+      color: #000;
+    }
+  }
+}
 </style>
--- a/components/Lottery/Instant/type/config.js
+++ b/components/Lottery/Instant/type/config.js
@@ -5,10 +5,6 @@ import gift2 from '@/assets/images/lottery/guess/gift_2.png'
 import gift3 from '@/assets/images/lottery/guess/gift_3.png'
 import gift4 from '@/assets/images/lottery/guess/gift_4.png'
-// 介绍背景图
-import introBgMiniPurple from '@/assets/images/lottery/guess/intro-bg-mini.png'
-import introBgMiniYellow from '@/assets/images/lottery/gashapon2/intro-bg-mini.png'
 /* 猜盲盒2 */
 // 游戏礼物样式
 import gift1Guess2 from '@/assets/images/lottery/guess2/gift_1.png'
@@ -16,7 +12,6 @@ import gift2Guess2 from '@/assets/images/lottery/guess2/gift_2.png'
 import gift3Guess2 from '@/assets/images/lottery/guess2/gift_3.png'
 import gift4Guess2 from '@/assets/images/lottery/guess2/gift_4.png'
 import gift5Guess2 from '@/assets/images/lottery/guess2/gift_5.png'
-import introTitleBg from '@/assets/images/lottery/guess2/intro-title.png'
 /* 扭蛋机 */
 import ballGashapon1 from '@/assets/images/lottery/gashapon-ball/red-blue.png'
@@ -25,13 +20,6 @@ import ballGashapon3 from '@/assets/images/lottery/gashapon-ball/phone.png'
 import ballGashapon4 from '@/assets/images/lottery/gashapon-ball/gift.png'
 import ballGashapon5 from '@/assets/images/lottery/gashapon-ball/egg-red.png'
-/* 扭蛋机2 */
-import introTitleGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-title.png'
-import introWrapBgGashapon2 from '@/assets/images/lottery/gashapon2/intro-wrap-bg.png'
-/* 刮刮乐 */
-import IntroTitleScratch from '@/assets/images/lottery/scratch/introduction.png'
 // 记录样式
 import recordsBgPurple from '@/assets/images/lottery/records-new/bg-purple.png'
 import personalBgPurple from '@/assets/images/lottery/records-new/personal-purple.png'
@@ -92,104 +80,6 @@ const winConfigBlue = {
  winClose: winCloseBlue,
  winPrizeBg: winPrizeBgBlue
 }
-const introductionConfigMiniPurple = {
-  introWrapStyle: {
-    backgroundColor: 'transparent',
-    padding: '0.03rem'
-  },
-  introContentStyle: {
-    backgroundColor: 'transparent',
-    color: '#fff',
-    padding: 0
-  },
-  introPopupStyle: {
-    backgroundImage: `url(${introBgMiniPurple})`
-  },
-  contentBoxStyle: {
-    backgroundColor: '#00000030',
-    padding: '0.01rem 0.2rem 0.2rem 0.2rem',
-    borderRadius: '0.3rem'
-  },
-  backStyle: {
-    top: '0.12667rem',
-    right: 0,
-    background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
-    boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
-    borderRadius: '0.13333rem 0 0 0.13333rem',
-    padding: '0.08rem 0.04rem',
-    border: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
-const introductionConfigMiniYellow = {
-  introWrapStyle: {
-    backgroundColor: 'transparent',
-    padding: '0.03rem'
-  },
-  introContentStyle: {
-    backgroundColor: 'transparent',
-    color: '#fff',
-    padding: 0
-  },
-  introPopupStyle: {
-    background: `url(${introBgMiniYellow})`
-  },
-  contentBoxStyle: {
-    backgroundColor: '#00000030',
-    padding: '0.01rem 0.2rem 0.2rem 0.2rem',
-    borderRadius: '0.3rem'
-  },
-  backStyle: {
-    top: '0.12667rem',
-    right: 0,
-    background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
-    boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
-    borderRadius: '0.13333rem 0 0 0.13333rem',
-    padding: '0.08rem 0.04rem',
-    border: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
-const introductionConfigMiniBlue = {
-  introWrapStyle: {
-    backgroundColor: 'transparent',
-    padding: '0.03rem'
-  },
-  introContentStyle: {
-    backgroundColor: 'transparent',
-    color: '#fff',
-    padding: 0
-  },
-  introPopupStyle: {
-    background: 'linear-gradient(180deg, #60BDFF 0%, #AAEEFB 100%)'
-  },
-  contentBoxStyle: {
-    backgroundColor: '#00000030',
-    padding: '0.01rem 0.2rem 0.2rem 0.2rem',
-    borderRadius: '0.3rem'
-  },
-  backStyle: {
-    top: '0.12667rem',
-    right: 0,
-    background: 'linear-gradient(180deg, #ffd63e 0%, #fca60d 100%)',
-    boxShadow: '0 0.01333rem 0.02667rem 0 rgba(202, 146, 46, 1)',
-    borderRadius: '0.13333rem 0 0 0.13333rem',
-    padding: '0.08rem 0.04rem',
-    border: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {
-      color: '#000'
-    }
-  }
-}
 const countDownBarBlue = {
  minWidth: '2.13rem',
  padding: '0 0.12rem',
@@ -209,7 +99,6 @@ const countDownBarNone = {
 /* 猜盲盒 */
 const recordsConfigGuess = recordsConfigPurple
 const winConfigGuess = Object.assign({}, winConfigPurple, { winTitle: winTitleGuess })
-const introductionConfigGuessMini = introductionConfigMiniPurple
 const starConfig = [
  {
    width: '0.3rem',
@@ -252,37 +141,6 @@ const blindBoxListGuess = [
    img: gift4
  }
 ]
-const introductionConfigGuess = {
-  // 标题
-  introTitleStyle: {
-    backgroundImage: 'none',
-    fontSize: '0.22rem',
-    fontWeight: '700',
-    textAlign: 'center',
-    color: '#fff',
-    paddingTop: '0.1rem'
-  },
-  titleText: '活动介绍',
-  // 外框
-  introWrapStyle: {
-    backgroundColor: '#7F17E3',
-    padding: '0.03rem'
-  },
-  // 内容
-  introContentStyle: {
-    background: 'linear-gradient(180deg, #7B07C5 0%, #450393 100%)',
-    color: '#fff'
-  },
-  introBoxStyle: {
-    background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
-    padding: '0.4rem 0.2rem',
-    borderRadius: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
 // 猜盲盒2
 const blindBoxListGuess2 = [
@@ -302,31 +160,10 @@ const blindBoxListGuess2 = [
    img: gift5Guess2
  }
 ]
-const introductionConfigGuess2 = Object.assign({}, introductionConfigGuess, {
-  introTitleStyle: {
-    backgroundImage: `url(${introTitleBg})`,
-    backgroundSize: '100% 100%',
-    width: '1.3rem',
-    height: '0.27rem',
-    left: '50%',
-    transform: 'translate(-50%, 0.16rem)'
-  },
-  titleText: '',
-  introContentStyle: {
-    background: '#450393',
-    color: '#fff'
-  },
-  introBoxStyle: {
-    background: 'linear-gradient(180deg, #682CA1 0%, #A649D8 100%)',
-    padding: '0.4rem 0.2rem',
-    borderRadius: 0
-  }
-})
 /* 扭蛋机 */
 const recordsConfigGashapon = recordsConfigPurple
 const winConfigGashapon = Object.assign({}, winConfigPurple, { winTitle: winTitleGashapon })
-const introductionConfigGashaponMini = introductionConfigMiniPurple
 const ballListGashapon = [
  {
    img: ballGashapon1,
@@ -367,144 +204,30 @@ const ballListGashapon = [
 ]
 // 扭蛋机1
-const introductionConfigGashapon = {
-  // 标题
-  introTitleStyle: {
-    backgroundImage: 'none',
-    fontSize: '0.22rem',
-    fontWeight: '700',
-    textAlign: 'center',
-    width: '22%',
-    height: 'auto',
-    padding: '0.05rem 0',
-    left: '50%',
-    color: '#fff',
-    transform: 'translate(-50%, 50%)',
-    backgroundColor: '#ffffff63',
-    borderRadius: '0.03rem'
-  },
-  titleText: '活动介绍',
-  // 外框
-  introWrapStyle: {
-    backgroundColor: '#7826A9',
-    padding: '0.03rem'
-  },
-  // 内容
-  introContentStyle: {
-    background: '#7826A9',
-    color: '#fff'
-  },
-  // 外框颜色
-  introBoxStyle: {
-    backgroundColor: '#7826A9',
-    padding: '0.10667rem 0.2rem 0.4rem 0.2rem',
-    borderRadius: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
 // 扭蛋机2
-const introductionConfigGashapon2 = {
-  // 标题
-  introTitleStyle: {
-    backgroundImage: `url(${introTitleGashapon2})`,
-    width: '95%',
-    padding: '0.05rem 0',
-    color: '#fff',
-    fontSize: '0.25rem',
-    textAlign: 'center',
-    lineHeight: '2',
-    top: '-7%',
-    left: '50%',
-    transform: 'translate(-50%, 50%)'
-  },
-  titleText: '活动介绍',
-  // 内框
-  introWrapStyle: {
-    backgroundImage: `url(${introWrapBgGashapon2})`,
-    backgroundSize: '100% 100%',
-    padding: '0.2rem 0.24rem 0.34rem',
-    backgroundColor: 'transparent'
-  },
-  // 内容
-  introContentStyle: {
-    background: '#FFF9E9',
-    borderRadius: '0.03rem',
-    color: '#000'
-  },
-  // 外框
-  introBoxStyle: {
-    backgroundColor: '#FFBD33',
-    padding: '1rem 0.15rem 0.1rem',
-    borderRadius: 0
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
 const recordsConfigGashapon2 = recordsConfigBlue
 const winConfigGashapon2 = Object.assign({}, winConfigBlue, { winTitle: winTitleGashapon })
-const introductionConfigGashaponMini2 = introductionConfigMiniYellow
-// 刮刮乐
-const introductionConfigScratch = {
-  // 介绍组件样式
-  introTitleStyle: {
-    backgroundImage: `url(${IntroTitleScratch})`,
-    width: '38%',
-    left: '50%',
-    transform: 'translateX(-50%)'
-  },
-  // 介绍组件外框样式
-  introWrapStyle: {
-    backgroundColor: '#0000001a',
-    borderRadius: '0.3rem'
-  },
-  // 介绍组件内容样式
-  introContentStyle: {
-    backgroundColor: 'transparent',
-    color: '#000'
-  },
-  introBoxStyle: {
-    padding: '0.5rem 0.2rem'
-  },
-  rule: {
-    position: 'bottom',
-    style: {}
-  }
-}
 const recordsConfigScratch = Object.assign({}, recordsConfigBlue, { textColor: '#093C85' })
-const introductionConfigScratchMini2 = introductionConfigMiniBlue
 export {
  // 猜盲盒
  blindBoxListGuess,
  recordsConfigGuess,
  winConfigGuess,
-  introductionConfigGuess,
-  introductionConfigGuessMini,
  // 猜盲盒2
  blindBoxListGuess2,
-  introductionConfigGuess2,
  // 扭蛋机
  ballListGashapon,
-  introductionConfigGashapon,
  recordsConfigGashapon,
  winConfigGashapon,
-  introductionConfigGashaponMini,
  // 扭蛋机2
-  introductionConfigGashapon2,
  recordsConfigGashapon2,
  winConfigGashapon2,
-  introductionConfigGashaponMini2,
  // 刮刮乐
-  introductionConfigScratch,
  recordsConfigScratch,
-  introductionConfigScratchMini2,
  // countDown
  countDownBarBlue,
  countDownBarPurple,