Skip to content

A
Athena
Commit 310b38c7 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

提交数据

parent 371aa0f5
Hide whitespace changes
Inline Side-by-side
Showing with 645 additions and 0 deletions
src/assets/img/task/task_home1.png 0 → 100644
View file @ 310b38c7
This diff is collapsed.
src/components/taskPage/IceCream/IceCreamTask.vue 0 → 100644
View file @ 310b38c7
<style>
.IceCreamTask{
width: 100%;
height: 100%;
background: url('../../../assets/img/task/task_home1.png');
background-size: 100% 100%;
min-height: 768px;
/* min-height: 868px; */
overflow: hidden;
}
.IceCreamTask .duihuanBtn{
width: 76px;
height: 81px;
background: url('../../../assets/img/task/task_home7.png');
background-size: 100% 100%;
position: absolute;
right: 129px;
bottom: -71px;
cursor: pointer;
}
.IceCreamTask .right_box{
position: absolute;
right: 150px;
top: 7.5%;
width: 152px;
text-align: center;
z-index: 20;
}
.IceCreamTask .IceCreamTask_main{
width: 1280px;
height: 100%;
margin: 0 auto;
position: relative;
}
.IceCreamTask .IceCreamTask_main .right_box>div{
display: flex;
align-items: center;
justify-content: center;
background:rgba(71,27,238,1);
border-radius:19px;
color: #FFFFFF;
font-size: 14px;
padding: 5px;
}
.IceCreamTask .IceCreamTask_main .right_box>div>img{
padding-right: 10px;
}
.IceCreamTask .IceCreamTask_main .right_box>img{
display: inline-block;
margin-top: 10px;
cursor: pointer;
width: 85px;
height: 94px;
}
.IceCreamTask .IceCreamTask_main .home_tit{
text-align: center;
padding-top: 60px;
position: relative;
}
.IceCreamTask .IceCreamTask_main .home_tit img{
width: 610px;
}
.IceCreamTask .IceCreamTask_main .home_tit p{
font-size: 16px;
font-family: 'PingFangR';
font-weight: bold;
color: rgba(254,30,12,1);
position: absolute;
bottom: 23px;
width: 100%;
}
.IceCreamTask .bottom_box{
display: flex;
/* padding: 0 150px; */
position: absolute;
bottom: 45px;
left: 91px;
align-items: flex-end;
}
.IceCreamTask .bottom_box>div>img{
width: 100%;
}
.IceCreamTask .bottom_box .left{
width: 188px;
height: 274px;
background: url('../../../assets/img/task/bg.png');
background-size: 100% 100%;
position: relative;
bottom: 0;
left: 17%;
padding: 63px 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.IceCreamTask .bottom_box .left .caomei{
width: 180px;
height: 54px;
position: absolute;
bottom: 10px;
left: 36px;
bottom: -7px;
}
.IceCreamTask .bottom_box .center{
width: 218px;
height: 296px;
margin-left: 58px;
position: relative;
bottom: 11px;
left: 17%
}
.IceCreamTask .bottom_box .binggao{
width: 115px;
height: 88px;
position: absolute;
bottom: -23px;
left: -97px;
}
.IceCreamTask .bottom_box .right{
width: 332px;
height: 253px;
margin-left: 13px;
position: relative;
bottom: 56px;
left: 40px;
left: 21%;
}
.IceCreamTask .bottom_box .left .left_item{
width: 90px;
text-align: center;
margin-bottom: 20px;
text-align: center;
}
.IceCreamTask .bottom_box .left .left_item>div>img{
width: 90px;
}
.IceCreamTask .bottom_box .left .left_item>img{
width: 84px;
cursor: pointer;
}
</style>
<template>
<el-row class="IceCreamTask">
<div class="IceCreamTask_main">
<!-- 上面标题 -->
<div class="home_tit">
<img src="../../../assets/img/task/home_tit.png" alt="">
<p>活动时间：6月21日~8月21日</p>
</div>
<!-- 右边积分什么的 -->
<div class="right_box">
<div>
<img src="../../../assets/img/task/task_home3.png" alt="">
<p>当前积分：1500</p>
</div>
<img @click="descriptionShow = true" src="../../../assets/img/task/task_home5.png" alt="">
<img src="../../../assets/img/task/task_home8.png" alt="">
<img src="../../../assets/img/task/task_home6.png" alt="">
</div>
<!-- 底部一坨 -->
<div class="bottom_box">
<!-- 分类 -->
<div class="left">
<div class="left_item" v-for="item in list" @click="openLayer(item)">
<div>
<img :src="item.src" alt="">
</div>
<img src="../../../assets/img/task/task_home2.png" alt="">
</div>
<img class="caomei" src="../../../assets/img/task/caomei.png" alt="">
</div>
<!-- 大象 -->
<div class="center">
<img src="../../../assets/img/task/daxiang.png" alt="">
<img class="binggao" src="../../../assets/img/task/bingqiling.png" alt="">
</div>
<!-- 兑换商店 -->
<div class="right">
<img src="../../../assets/img/task/shangcehng.png" alt="">
<div class="duihuanBtn"></div>
</div>
</div>
</div>
<!-- 我的奖券 -->
<myTicket v-show="myTicketShow" @closeMyWindow="closeMyWindow" name='Ticket'/>
<!-- 活动说明 -->
<description v-show="descriptionShow" :data="info" @closeMyWindow="closeMyWindow" name='Active'/>
<!-- 全家桶 -->
<allHome v-show="allHomeShow" :data="info" @closeMyWindow="closeMyWindow" name='allHome'/>
<!-- 抽奖券 -->
<raffleTickets v-show="raffleTicketsShow" :data="info" @closeMyWindow="closeMyWindow" name='raffleTickets'/>
</el-row>
</template>
<script>
import myTicket from './myTicket'
import description from './description'
import allHome from './allHome'
import raffleTickets from './raffleTickets'
export default {
components: {
myTicket,
description,
allHome,
raffleTickets
},
data(){
return{
myTicketShow: false,
descriptionShow: false,
allHomeShow: false,
raffleTicketsShow: true,
info: '瓜分现金作为本次获得的爆点，吸引用户。能领到抽奖券的用户，肯定是已经交过客人，大部分会是交过10个人以上的用户，小概率会有人没有交到10个人的，所以看看能不能做0.88+8.8+18.8+68.8+288的现金红包（68的设定30个以内，288设定1个），其它都是小红包的，交客数量最多的前三随机获得288，前50随机获得68，其他人获得小红包。',
list: [
{
id: 0,
name: '冰激凌任务',
src: require('../../../assets/img/task/task_home4.png'),
},
{
id: 1,
name: '我的冰激凌',
src: require('../../../assets/img/task/task_home9.png'),
},
{
id: 2,
name: '我的冰奖券',
src: require('../../../assets/img/task/task_home11.png'),
},
{
id: 4,
name: '我的兑换',
src: require('../../../assets/img/task/task_home10.png'),
},
]
}
},methods:{
openLayer: function (obj) {
if (obj.id === 2) {
this.myTicketShow = true;
}
},
closeMyWindow: function (val) {
if (val === 'Ticket') {
this.myTicketShow = false
} else if (val === 'Active') {
this.descriptionShow = false
} else if (val === 'allHome') {
this.allHomeShow = false
} else if (val === 'raffleTickets') {
this.raffleTicketsShow = false
}
}
},mounted(){
}
}
</script>
src/components/taskPage/IceCream/allHome.vue 0 → 100644
View file @ 310b38c7
<style scoped>
.allHome{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
z-index: 2018;
display: flex;
align-items: center;
justify-content: center;
}
.allHome .allHome_bg{
height: 392px;
width: 508px;
background: url('../../../assets/img/task/quanjiatong.png');
background-size: 100% 100%;
position: relative;
}
.allHome_close{
text-align: center;
padding-top: 30px;
position: absolute;
bottom: -10px;
width: 100%;
}
.allHome_close img{
width: 137px;
height: 35px;
cursor: pointer;
}
.allHome_bg>img{
position: absolute;
right: -1px;
top: 5px;
cursor: pointer;
width: 26px;
height: 26px;
}
</style>
<template>
<div class="allHome">
<div class="allHome_bg">
<div>
<div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="allHome_close">
<img @click="close" v-if="closeShow === 2" src="../../../assets/img/task/qjt_lq.png" alt="">
<img @click="close" v-else src="../../../assets/img/task/qjt_lq1.png" alt="">
</div>
</div>
<img @click="close" src="../../../assets/img/task/des_close.png" alt="">
</div>
</div>
</template>
<script>
export default {
props:['data'],
data(){
return{
closeShow: 2
}
},methods:{
close: function () {
this.$emit('closeMyWindow', 'allHome')
}
},mounted(){
}
}
</script>
src/components/taskPage/IceCream/description.vue 0 → 100644
View file @ 310b38c7
<style scoped>
.description{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
z-index: 2018;
display: flex;
align-items: center;
justify-content: center;
}
.description .description_bg{
height: 397px;
width: 337px;
background: url('../../../assets/img/task/des_bg.png');
background-size: 100% 100%;
position: relative;
}
.description_info{
font-size: 12px;
color: #494949;
padding: 180px 60px 0 60px;
}
.description_info p{
max-height: 132px;
overflow: auto;
}
.description_info p::-webkit-scrollbar{
/*滚动条整体样式*/
width: 4px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 8px;
}
.description_info p::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 4px;
background: rgb(255, 206, 208);
}
.description_info p::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 4px;
background: rgba(255, 206, 208 , .5);
}
.description_close{
text-align: center;
padding-top: 30px;
}
.description_close img{
width: 137px;
height: 35px;
cursor: pointer;
}
.description_bg>img{
position: absolute;
right: -1px;
top: 5px;
cursor: pointer;
width: 26px;
height: 26px;
}
</style>
<template>
<div class="description">
<div class="description_bg">
<div class="description_info">
<p>{{data}}</p>
</div>
<div>
<div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="description_close">
<img @click="close" v-if="closeShow === 2" src="../../../assets/img/task/yes1.png" alt="">
<img @click="close" v-else src="../../../assets/img/task/yes2.png" alt="">
</div>
</div>
<img @click="close" src="../../../assets/img/task/des_close.png" alt="">
</div>
</div>
</template>
<script>
export default {
props:['data'],
data(){
return{
closeShow: 2
}
},methods:{
close: function () {
this.$emit('closeMyWindow', 'Active')
}
},mounted(){
}
}
</script>
src/components/taskPage/IceCream/myTicket.vue 0 → 100644
View file @ 310b38c7
<style scoped>
.myTicket{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
z-index: 2018;
display: flex;
align-items: center;
justify-content: center;
}
.myTicket .myTicket_bg{
height: 727px;
width: 935px;
background: url('../../../assets/img/task/myTicket_bg.png');
background-size: 100% 100%;
position: relative;
}
.myTicket .myTicket_box{
padding: 180px 75px 55px 75px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.myTicket .myTicket_box .item{
width: 225px;
height: 222px;
background: url('../../../assets/img/task/quan_bg.png');
background-size: 100% 100%;
margin-bottom: 30px;
text-align: center;
}
.myTicket .myTicket_box .item .item_img{
height: 140px;
width: 185px;
margin: 20px auto 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.myTicket .myTicket_box .item .item_name{
font-size: 16px;
color: rgba(255,255,255,1);
width: 184px;
height: 33px;
background: rgba(31,168,176,1);
box-shadow: 0px 2px 7px 0px rgba(0,71,75,0.5);
border-radius: 16px;
display: inline-block;
line-height: 33px;
cursor: pointer;
transition: all linear .5s;
}
.myTicket .myTicket_box .item .item_name:hover{
background:rgba(66,201,209,1);
}
.myTicket .myTicket_close{
position: absolute;
right: 0;
top: 135px;
cursor: pointer;
}
</style>
<template>
<div class="myTicket">
<div class="myTicket_bg">
<div class="myTicket_box">
<div class="item" v-for="(item, index) in list">
<div class="item_img">
<img :src="item.src" alt="">
</div>
<span class="item_name">{{item.name}}</span>
</div>
</div>
<div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="myTicket_close" @click="close">
<img v-if="closeShow === 2" src="../../../assets/img/task/close.png" alt="">
<img v-else src="../../../assets/img/task/close2.png" alt="">
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
closeShow: 2,
list: [
{
id: 0,
name: '签证',
src: require('../../../assets/img/task/img1.png'),
},
{
id: 1,
name: '特价机票',
src: require('../../../assets/img/task/img2.png'),
},
{
id: 2,
name: '跟团游',
src: require('../../../assets/img/task/img3.png'),
},
{
id: 3,
name: '当地游',
src: require('../../../assets/img/task/img4.png'),
},
{
id: 4,
name: '自由行',
src: require('../../../assets/img/task/img5.png'),
},
{
id: 5,
name: '抽奖券',
src: require('../../../assets/img/task/img6.png'),
}
]
}
},methods:{
close: function () {
this.$emit('closeMyWindow', 'Ticket')
}
},mounted(){
}
}
</script>
src/components/taskPage/IceCream/raffleTickets.vue 0 → 100644
View file @ 310b38c7
<style scoped>
.raffleTickets{
width: 100%;
height: 100%;
background:rgba(0, 0, 0, .5);
position: absolute;
left: 0;
top: 0;
z-index: 2018;
display: flex;
align-items: center;
justify-content: center;
}
.raffleTickets .raffleTickets_bg{
height: 391px;
width: 484px;
background: url('../../../assets/img/task/cquan_bg.png');
background-size: 100% 100%;
position: relative;
}
.raffleTickets_close{
text-align: center;
position: absolute;
bottom: 30px;
width: 100%;
}
.raffleTickets_close img{
width: 137px;
height: 35px;
cursor: pointer;
}
.raffleTickets_bg>img{
position: absolute;
right: 105px;
top: 5px;
cursor: pointer;
width: 26px;
height: 26px;
}
.raffleTickets .tips{
width: 174px;
padding: 10px 0;
font-size: 24px;
color: rgba(255, 78, 0, 1);
font-weight:bold;
font-family: 'PingFangR';
position: absolute;
left: 166px;
top: 167px;
text-align: center;
}
.raffleTickets .tips .small{
color: RGBA(123, 53, 0, 1);
font-size: 12px;
line-height: 13px;
text-align: left;
}
</style>
<template>
<div class="raffleTickets">
<div class="raffleTickets_bg">
<div>
<div class="tips">
<p>抽奖券</p>
<p class="small">仅限于（2019年8月21日 21：）“ 狂欢夜·瓜分百万现金 ”活动中使用</p>
</div>
<div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="raffleTickets_close">
<img @click="close" v-if="closeShow === 2" src="../../../assets/img/task/quan_lq.png" alt="">
<img @click="close" v-else src="../../../assets/img/task/quan_lq1.png" alt="">
</div>
</div>
<img @click="close" src="../../../assets/img/task/des_close.png" alt="">
</div>
</div>
</template>
<script>
export default {
props:['data'],
data(){
return{
closeShow: 2
}
},methods:{
close: function () {
this.$emit('closeMyWindow', 'raffleTickets')
}
},mounted(){
}
}
</script>
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