feature

1. 增加红包雨红包封面

assets/css/font.css

+@font-face {
+  font-family: 'Regular35';
+  font-weight: normal;
+  src: url('../fonts/35--Regular.eot'); /* IE9 Compat Mode */
+  src: url('../fonts/35--Regular.woff') format('woff'),
+       url('../fonts/35--Regular.eot') format('eot'),
+       url('../fonts/35--Regular.svg') format('svg'); 
+}
\ No newline at end of file

components/modules/redBox/index.vue

@@ -3,6 +3,7 @@
     <div class="suspension-red">
       <answer-box :answerList="answerList"></answer-box>
       <business-box :businessList="businessList"></business-box>
+      <rainBox/>
     </div>
     <transition name="fade">
         <default-box v-show="showRedInfo.type == 1 && showRedInfo.id && showRed"></default-box>
@@ -11,7 +12,6 @@
     <transition name="fade">
         <password-box v-show="showRedInfo.type == 3 && showRedInfo.id && showRed"></password-box>
     </transition>
-    <rainBox/>
   </div>
 </template>
 

components/modules/redBox/rain/index.vue

 <template>
   <div>
-    <div class="business-list" v-show="list.length">
-      <div
-        class="item"
-        v-for="(item, index) in list"
-        :key="index"
-        @click="_showRed(item.redpacketId)"
-      ></div>
+    <div class="rain-list">
       <div class="receive">
-        待领取
-        <i>{{ rodNum }}</i>
       </div>
     </div>
     <transition name="fade">
-      123
+      <div> <!-- v-show="showRedInfo.type == 15 && showRedInfo.id && showRed" -->
+        <div class="rain" >
+          <div class="rain-box" >
+            <i class="close" ></i>
+            <div class="info">
+                <div class="greeting">
+                    红包雨来袭
+                    <div class="big">快来戳!</div>
+                </div>
+            </div>
+            <div class="btn">立即抢红包</div>
+          </div>
+        </div>
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
-const RED_TYPE = 5;
+const RED_TYPE = 14;
 import { mapGetters, mapMutations } from 'vuex';
 export default {
   name: 'red-rain-box',
@@ -42,30 +47,6 @@ export default {
       showRed: 'showRed',
       showRedInfo: 'showRedInfo'
     }),
-    list() {
-      const arr = [];
-      const businessList = this.businessList;
-      for (let i = 0; i < businessList.length; i++) {
-        const item = this.businessList[i];
-        if (item.isRob === 2) {
-          arr.push(item);
-        } else {
-          arr.unshift(item);
-        }
-      }
-      return arr;
-    },
-    rodNum() {
-      let num = 0;
-      const businessList = this.businessList;
-      for (let i = 0; i < businessList.length; i++) {
-        const item = this.businessList[i];
-        if (item.isExpire !== 1 && item.isRob !== 1 && item.isEmpty !== 0) {
-          num++;
-        }
-      }
-      return num;
-    }
   },
   methods: {
     ...mapMutations({
@@ -91,23 +72,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.business-list {
+.rain-list {
   position: relative;
   display: block;
   width: 0.4rem;
-  height: 0.65rem;
+  height: 0.4rem;
   margin-bottom: 0.05rem;
-  .item {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    margin: auto;
-    width: 0.4rem;
-    height: 0.5rem;
-    // background: url('./img/business-red.png') no-repeat center center;
-    background-size: 100% 100%;
-  }
+  background: url('./img/red-small.png') no-repeat center right;
+  background: url('./img/red-small.png') no-repeat center right;
   .receive {
     position: absolute;
     bottom: 0;
@@ -116,7 +88,6 @@ export default {
     height: 0.25rem;
     line-height: 0.25rem;
     width: 0.6rem;
-    // background: url('./img/icon-yun.png') no-repeat center right;
     background-size: auto 100%;
     text-align: center;
     font-size: 0.1rem;
@@ -125,7 +96,7 @@ export default {
     }
   }
 }
-.business {
+.rain {
   position: fixed;
   top: 0;
   left: 0;
@@ -134,7 +105,7 @@ export default {
   z-index: 500;
   background-color: rgba(0, 0, 0, 0.3);
 
-  .business-box {
+  .rain-box {
     position: absolute;
     top: 0;
     left: 0;
@@ -146,12 +117,12 @@ export default {
     height: 4.625rem;
     .close {
       position: absolute;
-      right: 0;
-      top: -0.1rem;
+      left: calc(50% - 0.16rem);
+      bottom: -0.1rem;
       z-index: 2;
       width: 0.32rem;
       height: 0.32rem;
-      // background: url('./img/icon-close.png') no-repeat center center;
+      background: url('./img/icon-close.png') no-repeat center center;
       background-size: 100% 100%;
     }
     .info {
@@ -161,10 +132,42 @@ export default {
       background: url('./img/red-bg.png') no-repeat 0 0;
       background-size: 100% 100%;
       overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .greeting {
+         margin-top: 1.3rem;
+         z-index: 2;
+         font-size: .3rem;
+         font-family: Regular35;
+         font-weight: 400;
+         font-style: italic;
+         color: #FFFFFF;
+         line-height: 47px;
+         background: linear-gradient(180deg, #FFC788 0%, #FFFAEF 100%);
+         background-clip: text;
+         -webkit-text-fill-color: transparent;
+         .big {
+           font-size: .36rem;
+           text-align: center;
+         }
+      }
     }
-    .list {
-      height: 0.75rem;
-      padding-top: 0.1rem;
+    .btn {
+      position: absolute;
+      left: calc(50% - .8rem);
+      bottom: 0.8rem;
+      z-index: 2;
+      width: 1.6rem;
+      height: .35rem;
+      background: linear-gradient(180deg, #FFEDB0, #FF9D29);
+      border-radius: 41px;
+      text-align: center;
+      line-height: .35rem;
+      font-weight: normal;
+      font-style: italic;
+      color: #CF0B00;
     }
   }
 }

package.json

 {
   "name": "ssr-program-live",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "My superb Nuxt.js project",
   "author": "1006903445@qq.com",
   "private": true,

plugins/Mixin/dms.js

@@ -133,6 +133,7 @@ const mixin = {
       });
     },
     _dmsChat(data) {
+      console.log(data)
       if (data.cmd === 'watchCode') {
         const tokenKey = `white-${this.type}-${this.channelInfo.id}`;
         if (data.clearAll === 1) {

plugins/main.js

 import Vue from 'vue';
 import '@/assets/css/transition.css';
+import '@/assets/css/font.css';
 
 import '@/plugins/Filters/index';