Skip to content

broadcast_cloud / web-live

Go to a project
Commit 76403b7d by MichaelJier
Options

feature 

1. 增加红包雨红包封面
parent 23fa9511
Showing with 73 additions and 59 deletions
assets/css/font.css 0 → 100644
@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
assets/fonts/35--Regular.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
components/modules/redBox/index.vue
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<div class="suspension-red"> <div class="suspension-red">
<answer-box :answerList="answerList"></answer-box> <answer-box :answerList="answerList"></answer-box>
<business-box :businessList="businessList"></business-box> <business-box :businessList="businessList"></business-box>
<rainBox/>
</div> </div>
<transition name="fade"> <transition name="fade">
<default-box v-show="showRedInfo.type == 1 && showRedInfo.id && showRed"></default-box> <default-box v-show="showRedInfo.type == 1 && showRedInfo.id && showRed"></default-box>
...@@ -11,7 +12,6 @@ ...@@ -11,7 +12,6 @@
<transition name="fade"> <transition name="fade">
<password-box v-show="showRedInfo.type == 3 && showRedInfo.id && showRed"></password-box> <password-box v-show="showRedInfo.type == 3 && showRedInfo.id && showRed"></password-box>
</transition> </transition>
<rainBox/>
</div> </div>
</template> </template>
......
components/modules/redBox/rain/index.vue
<template> <template>
<div> <div>
<div class="business-list" v-show="list.length"> <div class="rain-list">
<div
class="item"
v-for="(item, index) in list"
:key="index"
@click="_showRed(item.redpacketId)"
></div>
<div class="receive"> <div class="receive">
待领取
<i>{{ rodNum }}</i>
</div> </div>
</div> </div>
<transition name="fade"> <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> </transition>
</div> </div>
</template> </template>
<script> <script>
const RED_TYPE = 5; const RED_TYPE = 14;
import { mapGetters, mapMutations } from 'vuex'; import { mapGetters, mapMutations } from 'vuex';
export default { export default {
name: 'red-rain-box', name: 'red-rain-box',
...@@ -42,30 +47,6 @@ export default { ...@@ -42,30 +47,6 @@ export default {
showRed: 'showRed', showRed: 'showRed',
showRedInfo: 'showRedInfo' 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: { methods: {
...mapMutations({ ...mapMutations({
...@@ -91,23 +72,14 @@ export default { ...@@ -91,23 +72,14 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.business-list { .rain-list {
position: relative; position: relative;
display: block; display: block;
width: 0.4rem; width: 0.4rem;
height: 0.65rem; height: 0.4rem;
margin-bottom: 0.05rem; margin-bottom: 0.05rem;
.item { background: url('./img/red-small.png') no-repeat center right;
position: absolute; background: url('./img/red-small.png') no-repeat center right;
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%;
}
.receive { .receive {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
...@@ -116,7 +88,6 @@ export default { ...@@ -116,7 +88,6 @@ export default {
height: 0.25rem; height: 0.25rem;
line-height: 0.25rem; line-height: 0.25rem;
width: 0.6rem; width: 0.6rem;
// background: url('./img/icon-yun.png') no-repeat center right;
background-size: auto 100%; background-size: auto 100%;
text-align: center; text-align: center;
font-size: 0.1rem; font-size: 0.1rem;
...@@ -125,7 +96,7 @@ export default { ...@@ -125,7 +96,7 @@ export default {
} }
} }
} }
.business { .rain {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
...@@ -134,7 +105,7 @@ export default { ...@@ -134,7 +105,7 @@ export default {
z-index: 500; z-index: 500;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
.business-box { .rain-box {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
...@@ -146,12 +117,12 @@ export default { ...@@ -146,12 +117,12 @@ export default {
height: 4.625rem; height: 4.625rem;
.close { .close {
position: absolute; position: absolute;
right: 0; left: calc(50% - 0.16rem);
top: -0.1rem; bottom: -0.1rem;
z-index: 2; z-index: 2;
width: 0.32rem; width: 0.32rem;
height: 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%; background-size: 100% 100%;
} }
.info { .info {
...@@ -161,10 +132,42 @@ export default { ...@@ -161,10 +132,42 @@ export default {
background: url('./img/red-bg.png') no-repeat 0 0; background: url('./img/red-bg.png') no-repeat 0 0;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; 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 { .btn {
height: 0.75rem; position: absolute;
padding-top: 0.1rem; 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", "name": "ssr-program-live",
"version": "1.1.0", "version": "1.2.0",
"description": "My superb Nuxt.js project", "description": "My superb Nuxt.js project",
"author": "1006903445@qq.com", "author": "1006903445@qq.com",
"private": true, "private": true,
......
plugins/Mixin/dms.js
...@@ -133,6 +133,7 @@ const mixin = { ...@@ -133,6 +133,7 @@ const mixin = {
}); });
}, },
_dmsChat(data) { _dmsChat(data) {
console.log(data)
if (data.cmd === 'watchCode') { if (data.cmd === 'watchCode') {
const tokenKey = `white-${this.type}-${this.channelInfo.id}`; const tokenKey = `white-${this.type}-${this.channelInfo.id}`;
if (data.clearAll === 1) { if (data.clearAll === 1) {
......
plugins/main.js
import Vue from 'vue'; import Vue from 'vue';
import '@/assets/css/transition.css'; import '@/assets/css/transition.css';
import '@/assets/css/font.css';
import '@/plugins/Filters/index'; import '@/plugins/Filters/index';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment