Skip to content

N
NEWYEARPARTY
Commit 2ee78736 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

颁奖

parent f0610e44
Hide whitespace changes
Inline Side-by-side
Showing with 968 additions and 58 deletions
src/App.vue
View file @ 2ee78736
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
:loop="barrageLoop" :loop="barrageLoop"
> >
</vue-baberrage> </vue-baberrage>
<div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div> <!-- <div style="position: absolute;left: 0;top: 0;padding: 2%;background-color: red;z-index: 10086;" @click="sendMsg()">sendMsg</div> -->
<!-- style="position: absolute; top: 20%;z-index: 20199" --> <!-- style="position: absolute; top: 20%;z-index: 20199" -->
<audio style="position: absolute; top: -20%;z-index: -1" ref="homeAudio" :loop="AudioPlayType ? true : false" :src="url" controls></audio> <audio style="position: absolute; top: -20%;z-index: -1" ref="homeAudio" :loop="AudioPlayType ? true : false" :src="url" controls></audio>
</div> </div>
......
src/assets/css/Awards.css 0 → 100644
View file @ 2ee78736
.lingfont{
text-align: center;
-webkit-background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(/static/image/fongt-bg.png);
background-position: left top;
background-repeat: repeat;
word-break: break-all;
transform-origin: 0px 0px 0px;
}
.mb3{
margin-bottom: 3%;
}
.mb2{
margin-bottom: 2%;
}
.f14{
font-size: 14rem;
}
.f12{
font-size: 12rem;
}
.f10{
font-size: 10rem;
}
.f9{
font-size: 9rem;
}
.f8{
font-size: 8rem;
}
.f7{
font-size: 7rem;
}
.f6{
font-size: 6rem;
}
.f5{
font-size: 5rem;
}
.f4{
font-size: 4rem;
}
.f3{
font-size: 3rem;
}
.f2{
font-size: 2rem;
}
.Awards1{
position: absolute;
width: 100%;
top: 49%;
transform: translate(0, -50%);
display: flex;
align-items: center;
}
.Awards1 .left{
width: 60%;
box-sizing: border-box;
float: left;
}
.Awards1 .left p{
margin-bottom: 4rem;
text-align: center;
}
.Awards1 .right{
width: 40%;
float: left;
padding-top: 1rem;
padding-left: 10%;
box-sizing: border-box;
}
.Awards1 .right .head{
position: relative;
width: 50%;
height: 0;
padding-bottom: 50%;
border-radius: 50%;
border: 5px solid yellow;
}
.touxiang{
background: url(http://imgfile.oytour.com/Upload/User/636812405296221015.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards1 .right .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards1 .right .head img.beizi{
position: absolute;
bottom: -12%;
left: -7%;
width: 114%;
}
.Awards2 .box{
display: flex;
align-items: center;
justify-content: space-between;
width: 78%;
margin: 0 auto;
}
.Awards3 .box{
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
margin: 0 auto;
margin-bottom: 6%;
}
.Awards3 .box .head{
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
border: 5px solid yellow;
}
.Awards3 .box .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards3 .box .head img.beizi{
position: absolute;
bottom: -25px;
left: -10px;
width: 160px;
height: 160px;
}
.Awards3 .box .head .name{
background: url(/static/image/banjiang/name.png);
width: 140px;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 48px;
margin: 0 auto;
margin-top: 27px;
display: flex;
justify-content: center;
line-height: 43px;
}
.Awards6 .box{
width: 65%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4rem;
}
.Awards6 .box .item{
position: relative;
}
.Awards6 .box .item .bg-img{
width: 350px;
}
.Awards6 .box .item .head-img{
position: absolute;
left: 55px;
top: 11px;
width: 241px;
height: 261px;
}
.Awards6 .box .item .name{
position: absolute;
bottom: 85px;
right: 80px;
}
.Awards0{
width: 100%;
height: 100%;
}
.Awards0 .left{
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 70%;
}
.Awards0 .left img{
width: 100%;
}
.Awards0 .left p{
text-align: center;
}
.jinren{
position: absolute;
right: 5%;
}
\ No newline at end of file
src/assets/css/bierede.css
View file @ 2ee78736
...@@ -343,11 +343,12 @@ ...@@ -343,11 +343,12 @@
.container .hole-container { .container .hole-container {
position: absolute; position: absolute;
bottom: 18%; bottom: 18%;
left: 20%; left: 50%;
width: 60%; width: 60%;
height: 38%; height: 38%;
z-index: 5 z-index: 5;
transform: translate(-28%, 0);
} }
.container .hole-container .hole { .container .hole-container .hole {
...@@ -1032,4 +1033,7 @@ ...@@ -1032,4 +1033,7 @@
.number-ani-box img { .number-ani-box img {
margin-left: 8px margin-left: 8px
}
.winner-topBs img{
width: 100%;
} }
\ No newline at end of file
src/assets/css/init.css
View file @ 2ee78736
...@@ -9,7 +9,15 @@ ...@@ -9,7 +9,15 @@
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
} }
.PingFangR{
font-family: 'PingFangR';
}
.logo{
left: 2rem;
top: 2rem;
position: absolute;
z-index: 10010;
}
.yinxiang2020 { .yinxiang2020 {
font-family: 'yinxiang2020'; font-family: 'yinxiang2020';
} }
...@@ -26,6 +34,9 @@ color: #e9d5ab !important; ...@@ -26,6 +34,9 @@ color: #e9d5ab !important;
.el-select-dropdown{ .el-select-dropdown{
border: none border: none
} }
.w170{
width: 170px;
}
html, html,
body, body,
h1, h1,
......
src/components/Awarding.vue
View file @ 2ee78736
<template> <template>
<div class="bg_box Awarding" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}"> <div class="Awarding-box">
<div class="bg_video_box"> <img class="logo" src="/static/image/jiemu/logo.png" alt="">
<video :src="`/static/video/bjiang${videoIndex}.mp4`" muted="muted" autoplay="autoplay" loop="loop" id="homeBGvideo"></video> <div class="bg_box Awarding" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
<div class="bg_video_box">
<video :src="`/static/video/bjiang${videoIndex}.mp4`" muted="muted" autoplay="autoplay" loop="loop" id="homeBGvideo"></video>
</div>
</div>
<div class="Awards">
<Awards-z v-show="listVal === -1" />
<Awards-yi v-show="listVal === 0" />
<Awards-er v-show="listVal === 1" />
<Awards-san v-show="listVal === 2" />
<Awards-si v-show="listVal === 3" />
<Awards-wu v-show="listVal === 4" />
<Awards-liu v-show="listVal === 5" />
<Awards-qi v-show="listVal === 6" />
<Awards-ba v-show="listVal === 7" />
</div> </div>
<div class="hd-game-btn-container"> <div class="hd-game-btn-container">
<div class="award-ctrl"> <div class="award-ctrl">
<span class="iconfont iconzuosanjiaoxing" :style="{'color': listVal === 0 ? 'gray' : '#000'}" @click="switchAward(1)"></span> <span class="iconfont iconzuosanjiaoxing" :style="{'color': listVal === 0 ? 'gray' : '#000'}" @click="switchAward(1)"></span>
<el-select v-model="listVal" class="w60"> <el-select v-model="listVal" class="w170" @change="setVideo">
<el-option <el-option
v-for="item in bjList" v-for="item in bjList"
:key="item.i" :key="item.i"
...@@ -17,18 +31,11 @@ ...@@ -17,18 +31,11 @@
<span class="iconfont iconyousanjiaoxing" :style="{'color': this.listVal === this.bjList.length-1 ? 'gray' : '#000'}" @click="switchAward(2)"></span> <span class="iconfont iconyousanjiaoxing" :style="{'color': this.listVal === this.bjList.length-1 ? 'gray' : '#000'}" @click="switchAward(2)"></span>
</div> </div>
</div> </div>
<Awards-yi v-show="listVal === 0" />
<Awards-er v-show="listVal === 1" />
<Awards-san v-show="listVal === 2" />
<Awards-si v-show="listVal === 3" />
<Awards-wu v-show="listVal === 4" />
<Awards-liu v-show="listVal === 5" />
<Awards-qi v-show="listVal === 6" />
<Awards-ba v-show="listVal === 7" />
</div> </div>
</template> </template>
<script> <script>
import Awards0 from './Awards/Awards0'
import Awards1 from './Awards/Awards1' import Awards1 from './Awards/Awards1'
import Awards2 from './Awards/Awards2' import Awards2 from './Awards/Awards2'
import Awards3 from './Awards/Awards3' import Awards3 from './Awards/Awards3'
...@@ -39,7 +46,8 @@ import Awards7 from './Awards/Awards7' ...@@ -39,7 +46,8 @@ import Awards7 from './Awards/Awards7'
import Awards8 from './Awards/Awards8' import Awards8 from './Awards/Awards8'
export default { export default {
components: { components: {
'Awards-yi': Awards1, 'Awards-z': Awards0,
'Awards-yi': Awards1,
'Awards-er': Awards2, 'Awards-er': Awards2,
'Awards-san': Awards3, 'Awards-san': Awards3,
'Awards-si': Awards4, 'Awards-si': Awards4,
...@@ -62,9 +70,13 @@ export default { ...@@ -62,9 +70,13 @@ export default {
transformScale1: 0, transformScale1: 0,
transformScale2: 0 transformScale2: 0
}, },
videoIndex: 1, videoIndex: 3,
listVal: 0, listVal: -1,
bjList: [ bjList: [
{
s: '年会颁奖首页 ',
i: -1
},
{ {
s: '2019年明星俱乐部 1000万', s: '2019年明星俱乐部 1000万',
i: 0 i: 0
...@@ -108,22 +120,40 @@ export default { ...@@ -108,22 +120,40 @@ export default {
this.windowResize() this.windowResize()
}, },
mounted () { mounted () {
const that = this const $this = this
document.onkeydown = function(e){
var keyNum = window.event ? e.keyCode :e.which;
if(keyNum === 37){
$this.switchAward(1)
} else if (keyNum === 39) {
$this.switchAward(2)
}
}
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
that.windowResize() $this.windowResize()
})() })()
} }
}, },
methods: { methods: {
setVideo: function () {
if (this.listVal === 0 || this.listVal === 7) {
this.videoIndex = 1
} else if (this.listVal === 1 || this.listVal === 2 || this.listVal === 3 || this.listVal === 4 || this.listVal === 5) {
this.videoIndex = 2
} else {
this.videoIndex = 3
}
},
switchAward: function (type) { switchAward: function (type) {
if (type === 1) { if (type === 1) {
if (this.listVal === 0) return if (this.listVal === -1) return
this.listVal-- this.listVal--
} else { } else {
if (this.listVal === this.bjList.length-1) return if (this.listVal === this.bjList.length-2) return
this.listVal++ this.listVal++
} }
this.setVideo()
}, },
windowResize: function () { windowResize: function () {
let WindowW = window.innerWidth let WindowW = window.innerWidth
...@@ -140,18 +170,26 @@ export default { ...@@ -140,18 +170,26 @@ export default {
.Awarding{ .Awarding{
z-index: 10009 !important; z-index: 10009 !important;
} }
.Awarding .el-input__inner{ .Awarding-box .el-input__inner{
background-color: #150c0e45; background-color: #150c0e45;
color: white; color: white;
border: none; border: none;
} }
.Awarding .el-select-dropdown{ .Awarding-box .el-select-dropdown{
z-index: 10086 !important z-index: 10086 !important
} }
</style> </style>
<style scoped> <style scoped>
@import "../assets/css/index.css"; @import "../assets/css/index.css";
.Awards{
position: absolute;
width: 100%;
height: 100%;
z-index: 10009;
left: 0;
top: 0;
}
.content{ .content{
text-align: center; text-align: center;
-webkit-background-clip: text; -webkit-background-clip: text;
...@@ -189,7 +227,6 @@ export default { ...@@ -189,7 +227,6 @@ export default {
right: .5%; right: .5%;
z-index: 1000; z-index: 1000;
width: 220px; width: 220px;
height: 135px;
border-radius: 8px; border-radius: 8px;
background: url(/static/image/shuqian/g_footer_bg2.png) no-repeat; background: url(/static/image/shuqian/g_footer_bg2.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -200,11 +237,20 @@ export default { ...@@ -200,11 +237,20 @@ export default {
padding: 1rem; padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
z-index: 10086; z-index: 10086;
opacity: .2;
transition: all linear .5s;
}
.hd-game-btn-container:hover{
opacity: 1;
} }
.award-ctrl{ .award-ctrl{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 65px;
position: relative;
left: 0;
top: 0;
} }
.award-ctrl .iconfont{ .award-ctrl .iconfont{
cursor: pointer; cursor: pointer;
......
src/components/Awards/Awards0.vue 0 → 100644
View file @ 2ee78736
<template>
<div class="Awards0 PingFangR">
<div class="left">
<img src="/static/image/banjiang/wenzi.png" alt="">
<p class="f6"><span v-for="item in tit" class="lingfont">{{item}}</span></p>
</div>
<img class="jinren" src="/static/image/banjiang/jinren.png" alt="">
</div>
</template>
<script>
export default {
data () {
return {
tit: '十年随影·感恩有你 印象之旅10周年生日快乐！'
}
},
activated () {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped>
@import "../../assets/css/Awards.css";
</style>
src/components/Awards/Awards1.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards1 PingFangR">
爱美女士的八十八端口 <div class="left">
<p class="lingfont f14">年度销售明星奖</p>
<p class="f6"> <span class="lingfont">2019年</span><span class="lingfont">明星俱乐部</span> <span class="lingfont">1000万</span></p>
<p class="lingfont f8">获奖者：肖自立</p>
</div> </div>
<div class="right">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +27,5 @@ export default { ...@@ -17,5 +27,5 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
</style> </style>
src/components/Awards/Awards2.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards2 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10 mb3">2019年明星俱乐部 700万</p>
<div class="box">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
徐树学
</div>
</div>
<div class="head">
<div class="touxiang touxiang1"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
陈佳
</div>
</div>
<div class="head">
<div class="touxiang touxiang2" src="/static/image/banjiang/tangping.png"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
唐萍
</div>
</div>
<div class="head">
<div class="touxiang touxiang3"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
张婷
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +47,64 @@ export default { ...@@ -17,5 +47,64 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards2 .box .head{
position: relative;
width: 15%;
height: 0;
border-radius: 50%;
border: 5px solid yellow;
padding-bottom: 15%;
}
.Awards2 .box .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards2 .box .head img.beizi{
position: absolute;
bottom: -41px;
left: 0;
width: 100%;
}
.Awards2 .box .head .name{
background: url(/static/image/banjiang/name.png);
width: 200px;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80px;
margin: 0 auto;
margin-top: 56px;
display: flex;
justify-content: center;
line-height: 70px;
}
.Awards2 .box .head .touxiang{
background: url(/static/image/banjiang/xushuxue.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang1{
background: url(/static/image/banjiang/chenjia.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang2{
background: url(/static/image/banjiang/tangping.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang3{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
</style> </style>
src/components/Awards/Awards3.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards2 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10 mb3">2019年明星俱乐部 600万</p>
<div class="box">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
魏俊
</div>
</div>
<div class="head">
<div class="touxiang touxiang1"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
慕大强
</div>
</div>
<div class="head">
<div class="touxiang touxiang2"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
王亚荣
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +40,57 @@ export default { ...@@ -17,5 +40,57 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards2 .box .head{
position: relative;
width: 15%;
height: 0;
border-radius: 50%;
border: 5px solid yellow;
padding-bottom: 15%;
}
.Awards2 .box .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards2 .box .head img.beizi{
position: absolute;
bottom: -41px;
left: 0;
width: 100%;
}
.Awards2 .box .head .name{
background: url(/static/image/banjiang/name.png);
width: 200px;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80px;
margin: 0 auto;
margin-top: 56px;
display: flex;
justify-content: center;
line-height: 70px;
}
.Awards2 .box .head .touxiang{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang1{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang2{
background: url(/static/image/banjiang/wangyarong.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
</style> </style>
src/components/Awards/Awards4.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards2 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10 mb3">2019年明星俱乐部 500万</p>
<div class="box">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
李景晨
</div>
</div>
<div class="head">
<div class="touxiang touxiang1"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
魏俞婷
</div>
</div>
<div class="head">
<div class="touxiang touxiang2"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
钟伟
</div>
</div>
<div class="head">
<div class="touxiang touxiang3"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
谢燕
</div>
</div>
<div class="head">
<div class="touxiang touxiang4"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
邱磊
</div>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +54,71 @@ export default { ...@@ -17,5 +54,71 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards2 .box .head{
position: relative;
width: 15%;
height: 0;
border-radius: 50%;
border: 5px solid yellow;
padding-bottom: 15%;
}
.Awards2 .box .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards2 .box .head img.beizi{
position: absolute;
bottom: -41px;
left: 0;
width: 100%;
}
.Awards2 .box .head .name{
background: url(/static/image/banjiang/name.png);
width: 200px;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 80px;
margin: 0 auto;
margin-top: 56px;
display: flex;
justify-content: center;
line-height: 70px;
}
.Awards2 .box .head .touxiang{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang1{
background: url(/static/image/banjiang/weiyuting.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang2{
background: url(/static/image/banjiang/zhongwei.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang3{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards2 .box .head .touxiang4{
background: url(/static/image/banjiang/qiulei.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
</style> </style>
src/components/Awards/Awards5.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards3 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10">2019年明星俱乐部 400万</p>
<div class="box">
<div class="head">
<div class="touxiang"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
吴攀
</div>
</div>
<div class="head">
<div class="touxiang touxiang1"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
周岚
</div>
</div>
<div class="head">
<div class="touxiang touxiang2"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
刘依桐
</div>
</div>
<div class="head">
<div class="touxiang touxiang3"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
张马倩
</div>
</div>
<div class="head">
<div class="touxiang touxiang4"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
刘远
</div>
</div>
</div> </div>
<div class="box">
<div class="head">
<div class="touxiang touxiang5"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
蒋玉芳
</div>
</div>
<div class="head">
<div class="touxiang touxiang6"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
石明恬
</div>
</div>
<div class="head">
<div class="touxiang touxiang7"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
赵颖
</div>
</div>
<div class="head">
<div class="touxiang touxiang8"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
王凯利
</div>
</div>
<div class="head">
<div class="touxiang touxiang9"></div>
<img class="beizi" src="/static/image/banjiang/jiangbei1.png" alt="">
<div class="name f3">
刘婷
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +91,106 @@ export default { ...@@ -17,5 +91,106 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards3 .box .head{
position: relative;
width: 10%;
height: 0;
border-radius: 50%;
border: 5px solid yellow;
padding-bottom: 10%;
}
.Awards3 .box .head img{
width: 100%;
height: 100%;
border-radius: 50%;
}
.Awards3 .box .head img.beizi{
position: absolute;
bottom: -24px;
left: 0;
width: 100%;
}
.Awards3 .box .head .name{
background: url(/static/image/banjiang/name.png);
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 60px;
margin: 0 auto;
margin-top: 27px;
display: flex;
justify-content: center;
line-height: 55px;
}
.Awards3 .box .head .touxiang{
background: url(/static/image/banjiang/wupan.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang1{
background: url(/static/image/banjiang/zhoulan.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang2{
background: url(/static/image/banjiang/liuyitong.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang3{
background: url(/static/image/banjiang/zhangmaqian.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang4{
background: url(/static/image/banjiang/liuyuan.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang5{
background: url(/static/image/banjiang/jiangyufang.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang6{
background: url(/static/image/banjiang/shimingtian.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang7{
background: url(/static/image/banjiang/zhaoying.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang8{
background: url(/static/image/banjiang/meiyou.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards3 .box .head .touxiang9{
background: url(/static/image/banjiang/liuting.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
</style> </style>
src/components/Awards/Awards6.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards6 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10 mb3">2019年销售排名</p>
<div class="box">
<div class="item">
<img class="bg-img" src="/static/image/banjiang/ranke.png" alt="">
<img class="head-img" src="http://imgfile.oytour.com/Upload/User/636812405296221015.jpg" alt="">
<span class="name f3">肖自立</span>
</div>
<div class="item">
<img class="bg-img" src="/static/image/banjiang/ranke1.png" alt="">
<img class="head-img" src="/static/image/banjiang/xushuxue.png" alt="">
<span class="name f3">徐树学</span>
</div>
<div class="item">
<img class="bg-img" src="/static/image/banjiang/ranke2.png" alt="">
<img class="head-img" src="/static/image/banjiang/chenjia.jpg" alt="">
<span class="name f3">陈佳</span>
</div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
...@@ -17,5 +34,5 @@ export default { ...@@ -17,5 +34,5 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
</style> </style>
src/components/Awards/Awards7.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards7 PingFangR">
爱美女士的八十八端口 <p class="lingfont f10 mb2">2019年区域销售冠军奖</p>
<div class="box">
<div class="head" v-for="(item, index) in list" v-if="index < 6">
<div class="touxiang"></div>
<div class="name f3">
<p class="PingFangR">{{item.n}}</p>
<p class="PingFangR f2">{{item.b}}</p>
</div>
</div>
</div> </div>
<div class="box">
<div class="head" v-for="(item, index) in list" v-if="index > 5">
<div class="touxiang"></div>
<div class="name f3">
<p class="PingFangR">{{item.n}}</p>
<p class="PingFangR f2">{{item.b}}</p>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
list: [
{
b: '成都公司',
n: '徐树学'
},
{
b: '武汉公司',
n: '肖自立'
},
{
b: '西安公司',
n: '张婷'
},
{
b: '长沙公司',
n: '陈鹏'
},
{
b: '贵阳公司',
n: '陈欢'
},
{
b: '合肥公司',
n: '李振业'
},
{
b: '南宁公司',
n: '吴攀'
},
{
b: '南京公司',
n: '石明恬'
},
{
b: '昆明公司',
n: '慕大强'
},
{
b: '厦门公司',
n: '黄菲虹'
},
{
b: '重庆公司',
n: '瞿玉琳'
},
{
b: '南昌公司',
n: '罗娟'
},
]
} }
}, },
activated () {}, activated () {},
...@@ -17,5 +84,42 @@ export default { ...@@ -17,5 +84,42 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards7 .box{
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
margin: 0 auto;
margin-bottom: 13%;
}
.Awards7 .box .head{
position: relative;
width: 12%;
height: 0;
}
.Awards7 .box .head img.beizi{
position: absolute;
bottom: -24px;
left: 0;
width: 100%;
}
.Awards7 .box .head .touxiang{
background: url(/static/image/banjiang/jiangbei2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 100%;
border-radius: 50%;
}
.Awards7 .box .head .name{
text-align: center;
color:rgba(255,255,255,1);
background:linear-gradient(0deg,rgba(252,187,68,1) 0%, rgba(255,254,153,1) 50.5126953125%, rgba(255,181,41,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
position: absolute;
width: 100%;
top: 0;
font-weight: bold;
}
</style> </style>
src/components/Awards/Awards8.vue
View file @ 2ee78736
<template> <template>
<div class="Awards1"> <div class="Awards1 PingFangR">
爱美女士的八十八端口 <div class="left">
<p class="lingfont f12">2019年公司利润第一</p>
<p class="f6"> <span class="lingfont">十年随影·</span><span class="lingfont">感恩有你</span></p>
<p class="lingfont f8">获奖者：西安公司（何江波）</p>
</div>
<div class="right">
<div class="r-box">
<img class="bg-img" src="/static/image/banjiang/gongsi.png" alt="">
<img class="hz-img" src="/static/image/banjiang/hezhao.jpg" alt="">
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -17,5 +27,22 @@ export default { ...@@ -17,5 +27,22 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
@import "../../assets/css/Awards.css";
.Awards1 .right{
padding-left: 0%;
}
.r-box{
width: 90%;
position: relative;
}
.r-box .bg-img{
width: 100%;
}
.hz-img{
position: absolute;
left: 9%;
top: 3%;
width: 82.5%;
height: 63.8%;
}
</style> </style>
src/components/CountDown.vue
View file @ 2ee78736
<template> <template>
<div class="bg_box" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}"> <div class="bg_box" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
<div class="bg_video_box"> <div class="bg_video_box">
<video src="/static/video/daojishi.mp4" autoplay="autoplay" id="homeBGvideo"></video> <video src="/static/video/daojishi.mp4" autoplay="autoplay" @ended="goJiemudan()" id="homeBGvideo"></video>
</div> </div>
</div> </div>
</template> </template>
...@@ -22,7 +22,8 @@ export default { ...@@ -22,7 +22,8 @@ export default {
offsetY: 0, offsetY: 0,
transformScale1: 0, transformScale1: 0,
transformScale2: 0 transformScale2: 0
} },
jiemuList: []
} }
}, },
activated () { activated () {
...@@ -33,14 +34,40 @@ export default { ...@@ -33,14 +34,40 @@ export default {
this.windowResize() this.windowResize()
}, },
mounted () { mounted () {
const that = this const $this = this
setTimeout(()=>{
$this.$PROXY.invoke("GetVoteProgarm", 1).done(m=>{
let list = []
m.map(y=>{
let obj = {
Name: y.t,
Id: y.i,
bg: y.bg,
mv: y.m,
brc: y.b,
pp: y.p,
type: y.type,
Url: 'PerformRanking'
}
list.push(obj)
})
$this.jiemuList = list
});
}, 2000)
window.onresize = () => { window.onresize = () => {
return (() => { return (() => {
that.windowResize() $this.windowResize()
})() })()
} }
}, },
methods: { methods: {
goJiemudan: function () {
let obj = this.jiemuList[0]
this.$router.push({
name: 'PerformRanking',
query: obj,
})
},
windowResize: function () { windowResize: function () {
let WindowW = window.innerWidth let WindowW = window.innerWidth
let WindowH = window.innerHeight let WindowH = window.innerHeight
......
static/image/banjiang/liuyitong.jpg 0 → 100644
View file @ 2ee78736
This diff is collapsed.
static/image/banjiang/liuyuan.jpg 0 → 100644
View file @ 2ee78736
This diff is collapsed.
static/image/banjiang/zhoulan.jpg 0 → 100644
View file @ 2ee78736
This diff is collapsed.
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 to comment