Skip to content

A
Athena
Commit fd4815ae authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/athena

parents f3cb543e 310b38c7
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1272 additions and 127 deletions
src/App.vue
View file @ fd4815ae
......@@ -76,6 +76,12 @@ body,html{
}
.el-scrollbar__wrap{
overflow: auto !important;
width: 100%;
height: 100%
}
.el-scrollbar__view{
width: 100%;
height: 100%;
}
.page-component-up {
background-color: #fff;
......
src/assets/img/task/task_home1.png 0 → 100644
View file @ fd4815ae
This diff is collapsed.
src/components/IntegralMall/IntegralMall.vue
View file @ fd4815ae
......@@ -46,77 +46,14 @@
</el-row>
<recommend/>
</div>
<div class="_block">
<div class="_block" v-for="item in ClassifyGoodsList">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shafa.png" alt="">
<p>家纺家饰</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/jiaju.png" alt="">
<p>家居日用</p>
<p>{{item.typeName}}</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/chuju.png" alt="">
<p>厨具锅具</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/canju.png" alt="">
<p>餐具水具</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shuma.png" alt="">
<p>数码生活</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/muying.png" alt="">
<p>母婴亲子</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/xiangbao.png" alt="">
<p>箱包手袋</p>
</div>
</el-row>
<commodity2/>
</div>
<div class="_block">
<el-row class="tit">
<div>
<img src="../../assets/img/ps/shishang.png" alt="">
<p>个护时尚</p>
</div>
</el-row>
<commodity2/>
<commodity2 :data="item"/>
</div>
</el-row>
</el-row>
......@@ -138,8 +75,26 @@ export default {
},
data(){
return{
ClassifyGoodsList: [],
}
},methods: {
getClassifyGoods: function () {
this.apiJavaPost(
"/api/goodsMarket/getClassifyGoods",
{id: ''},
res => {
if (res.data.resultCode === 1) {
this.ClassifyGoodsList = res.data.data;
} else {
this.Error(res.data.message);
}
},
null
);
}
},
mounted() {
this.getClassifyGoods()
}
}
</script>
src/components/IntegralMall/block/commodity2.vue
View file @ fd4815ae
......@@ -12,6 +12,9 @@
.commodity2 .commodity2_left .l_img{
position: relative;
height: 480px;
align-items: center;
display: flex;
background-color: #c1c1c1;
}
.commodity2 .commodity2_left .l_img .see_all{
position: absolute;
......@@ -29,7 +32,8 @@
cursor: pointer;
}
.commodity2 .commodity2_left .l_img img{
height: 480px;
/* height: 480px; */
width: 100%;
}
.commodity2 .commodity2_right .r_item{
height: 240px;
......@@ -37,10 +41,12 @@
border: 1px solid rgba(236, 236, 236, 1);
border-right: none;
border-top: none;
cursor: pointer;
}
.commodity2 .commodity2_right .r_item>div img{
max-height: 150px;
margin: 15px 0;
max-width: 80%;
}
.commodity2 .commodity2_right .r_item p{
font-size: 12px
......@@ -49,24 +55,29 @@
color: #FF0101;
padding-top: 10px
}
.commodity2 .r_item_img_box{
height: 175px;
}
</style>
<template>
<el-row class="commodity2">
<el-col :span="5" class="commodity2_left">
<div class="l_img">
<img src="../../../assets/img/img-01.png" alt="">
<span class="see_all">查看全部 ></span>
<img :src="data.list[0].Images.split(',')[0]" alt="">
<span class="see_all" @click="goList(data.typeId)">查看全部 ></span>
</div>
</el-col>
<el-col :span="19" class="commodity2_right">
<el-row>
<template v-for="item in list">
<template v-for="item in data.list">
<el-col :span="6" class="r_item">
<div>
<img src="../../../assets/img/img-01.png" alt="">
<div @click="goDetail(item.Id)">
<div class="r_item_img_box">
<img :src="item.Images.split(',')[0]" alt="">
</div>
<p>{{item.name}}</p>
<p>¥ {{item.Price}}积分</p>
</div>
<p>洁丽雅 纯棉清新格纹面巾3条装</p>
<p>¥ 299,900积分</p>
</el-col>
</template>
</el-row>
......@@ -77,12 +88,20 @@
export default {
components: {
},
props:{
},
props:['data'],
data(){
return{
list: [1,2,3,4,5,6,7,8]
}
},
methods:{
//跳转详情页面
goDetail: function (id) {
this.$router.push({ path: 'productDetail', query: {id: id}})
},
goList: function (type) {
this.$router.push({path: 'productList', query: {type: type}})
}
}
}
</script>
src/components/IntegralMall/confirOrder.vue
View file @ fd4815ae
This diff is collapsed.
src/components/IntegralMall/productDetail.vue
View file @ fd4815ae
......@@ -24,7 +24,8 @@
}
.pd_top_info_left ._img_item_box{
display: flex;
justify-content: space-between;
/* justify-content: space-between; */
margin-top: 9px;
}
.pd_top_info_left ._img_item_box>div{
width: 82px;
......@@ -36,6 +37,10 @@
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.pd_top_info_left ._img_item_box>div:nth-child(5){
margin-right: 0;
}
.pd_top_info_left ._img_item_box>div>img{
max-height: 82px;
......@@ -153,25 +158,33 @@
.pd_bottom_detail{
margin-top: 30px;
}
.pd_bottom_detail_right {
padding: 20px;
background-color: white;
}
.pd_bottom_detail_right img{
max-width: 100%;
}
</style>
<template>
<el-row class="productDetail">
<el-row class="productDetail" v-loading="loading">
<div class="w1180">
<el-row>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
<el-breadcrumb-item :to="{ path: '/IntegralMall' }">积分商城</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/productList' }">商城列表</el-breadcrumb-item>
<el-breadcrumb-item>商品详情</el-breadcrumb-item>
<el-breadcrumb-item>商品详情-{{detail.name}}</el-breadcrumb-item>
</el-breadcrumb>
</el-row>
<el-row class="pd_top_info" :gutter="40">
<el-col :span="10" class="pd_top_info_left">
<div class="_img_box">
<img :src="imgList[activeIndex]" alt="">
<img :src="detail.imgArr[activeIndex]" ></img>
<!-- <img-zoom :src="detail.imgArr[activeIndex]" :bigsrc="detail.imgArr[activeIndex]" :configs="configs"></img-zoom> -->
</div>
<div class="_img_item_box">
<template v-for="(item, index) in imgList">
<template v-for="(item, index) in detail.imgArr">
<div :class="{'_active': activeIndex === index}" @click="activeIndex = index">
<img :src="item" alt="">
</div>
......@@ -179,23 +192,24 @@
</div>
</el-col>
<el-col :span="14" class="pd_top_info_right">
<p class="_tit">小米（MI）小米手环3 心率监测 来电 微信提醒</p>
<p class="_sub_tit">防水计步器 50米防水 20天续航 运动时长、里程记录</p>
<p class="_price">售价<span class="jifen">¥ <span>2400</span> 积分</span> <span class="yishou">已售 <span>350</span></span></p>
<p class="_tit">{{detail.name}}</p>
<p class="_sub_tit">{{detail.packing}}</p>
<p class="_price">售价<span class="jifen">¥ <span>{{detail.price}}</span> {{detail.priceUnit === 1 ? '现金' : '积分'}}</span> <span class="yishou">已售 <span>99</span></span></p>
<div class="_colors">
<span class="_colors_name">颜色</span>
<template v-for="(item, index) in colors">
<!-- <template v-for="(item, index) in colors">
<span class="_colors_item" :class="{'_active': colorsIndex === index}" @click="colorsIndex = index">{{item}}</span>
</template>
</template> -->
<span class="">无</span>
</div>
<div class="_numbers">
<span class="_numbers_name">数量</span>
<el-input-number v-model="numbers" :min="1" :max="99" size="mini"></el-input-number>
<el-input-number v-model="numbers" :min="1" :max="detail.quota === 0 ? '' : detail.quota" size="mini"></el-input-number>
</div>
<div class="_yunfei">
<span class="_yunfei_name">运费</span>
<div>
<p>包邮</p>
<p>{{detail.logistic}}</p>
<p>由<span>印象之旅</span>发货，并提供服务</p>
</div>
</div>
......@@ -207,13 +221,20 @@
</div>
</el-col>
</el-row>
<el-row class="pd_bottom_detail">
<el-row class="pd_bottom_detail" :gutter="20">
<el-col :span="5">
<detailsLeftHot/>
</el-col>
<el-col :span="19">
<el-col :span="19" class="pd_bottom_detail_right">
<el-row>
<div v-html="detail.description">
</div>
<div>
<template v-for="item in detail.deImgArr">
<img :src="item" alt="">
</template>
</div>
</el-row>
</el-col>
</el-row>
......@@ -222,12 +243,16 @@
</template>
<script>
import detailsLeftHot from '@/components/IntegralMall/block/detailsLeftHot'
import imgZoom from 'vue2.0-zoom'
export default {
components:{
detailsLeftHot,
imgZoom,
},
data(){
return {
id: 0,
loading: false,
numbers: 1,
activeIndex: 0,
colorsIndex: 0,
......@@ -238,18 +263,54 @@ export default {
require('../../assets/img/nll.jpg'),
require('../../assets/img/img-02.png')
],
detail: {
imgArr: [],
deImgArr: [],
},
colors: [
'黑色',
'红色',
'白色'
]
],
configs: {
width:650,
height:350,
maskWidth:100,
maskHeight:100,
maskColor:'red',
maskOpacity:0.2
}
}
},methods:{
//获取详情
getDetail: function () {
this.loading = true;
this.apiJavaPost(
"/api/goodsMarket/getGoodsDetail",
{goodId: this.id},
res => {
this.loading = false;
if (res.data.resultCode === 1) {
let detail = res.data.data
let imgArr = detail.images.split(',')
let deImgArr = detail.descripImg.split(',')
detail.imgArr = imgArr
detail.deImgArr = deImgArr
this.detail = detail
} else {
this.Error(res.data.message);
}
},
null
);
},
PlacingOrder: function (id) {
this.$router.push({name: 'confirOrder', query: { id: id, num: this.numbers}})
}
},mounted(){
this.getDetail()
},created(){
this.id = this.$route.query.id
}
}
</script>
src/components/IntegralMall/productList.vue
View file @ fd4815ae
......@@ -93,7 +93,6 @@
margin-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.productList .list_item .list_item_box{
padding: 12px 20px;
......@@ -101,10 +100,18 @@
font-size: 12px;
background-color: white;
margin-bottom: 15px;
margin-right: 10px;
cursor: pointer;
}
.productList .list_item .list_item_box .img_box{
width: 178px;
width: 188px;
height: 146px;
display: flex;
align-items: center;
justify-content: center;
}
.productList .list_item .list_item_box:nth-child(5n) {
margin-right: 0;
}
.productList .list_item .list_item_box .img_box img{
max-width: 178px;
......@@ -142,7 +149,7 @@
}
</style>
<template>
<div class="productList">
<div class="productList" v-loading="loading">
<div class="w1180">
<div>
<el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
......@@ -154,8 +161,8 @@
<el-row class="tabs">
<span class="_name">分类</span>
<div class="tabs_box">
<template v-for="(item, index) in typeList">
<span :class="{'_active': typeListIndex === index}" @click="typeListIndex = index">{{item.name}}</span>
<template v-for="(item, index) in goodsTypeManagerList">
<span :class="{'_active': typeListIndex === item.id}" @click="typeListIndex = item.id, getList()">{{item.name}}</span>
</template>
</div>
</el-row>
......@@ -169,8 +176,8 @@
</el-row>
<el-row>
<div class="paxu">
<span :class="{'_active': paxuIndex === 1}" @click="paxuIndex = 1">综合排序</span>
<span :class="{'_active': paxuIndex === 2}" @click="paxuIndex = 2">积分排序
<span :class="{'_active': paxuIndex === 1}" @click="paxuIndex = 1, getList()">综合排序</span>
<span :class="{'_active': paxuIndex === 2}" @click="paxuIndex = 2, getList()">积分排序
<span class="caret-wrapper" @click.stop="ascFunc">
<i class="sort-caret ascending" :class="{'ascActive': asc === 1}"></i>
<i class="sort-caret descending" :class="{'desActive': asc === 2}"></i>
......@@ -179,14 +186,18 @@
</div>
</el-row>
</div>
<div class="list_item">
<div class="list_item_box" v-for="item in dataList">
<div class="list_item" >
<div class="list_item_box" v-for="item in dataList" :key="item.id" @click="goDetail(item.id)">
<div class="img_box">
<img src="../../assets/img/img-01.png" alt="">
<img :src="item.images.split(',')[0]" alt="">
</div>
<p class="_name">夏新养生煲</p>
<p class="_num">¥ 299,900积分</p>
</div>
<p class="_name">{{item.name}}</p>
<p class="_num">¥ {{item.price}}积分</p>
</div>
</div>
<div class="empty-data" v-if="dataList.length<1">
<i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
<!-- 分页 -->
<el-row class="_pagination">
......@@ -194,7 +205,7 @@
:current-page.sync="currentPage"
:page-size="msg.pageSize"
layout="total, prev, pager, next"
:total="Count"
:total="total"
@current-change="handleCurrentChange"
></el-pagination>
</el-row>
......@@ -212,11 +223,13 @@ export default {
typeListIndex: 0,
activeName: 'first',
currentPage: 1,
totalCount: 1,
total: 1,
Count: 1,
msg: {
ranks: '',
type: '',
pageSize: 15,
pageIndex: 1,
pageSize: 25,
},
typeList: [
{
......@@ -296,9 +309,57 @@ export default {
name: '红烧肉',
}
],
dataList: [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,71,2,3,4,5,6],
dataList: [],
goodsTypeManagerList: [],
loading: false,
}
},methods:{
//跳转详情页面
goDetail: function (id) {
this.$router.push({ path: 'productDetail', query: {id: id}})
},
// 获取列表
getList: function () {
this.msg.type = this.typeListIndex === 0 ? '' : this.typeListIndex
this.loading = true;
this.apiJavaPost(
"/api/goodsMarket/getGoodsList",
this.msg,
res => {
this.loading = false;
if (res.data.resultCode === 1) {
this.dataList = res.data.data.pageData
this.total = res.data.data.count;
} else {
this.dataList = [];
if (res.data.message !== '暂无数据'){
this.Error(res.data.message);
}
}
},
null
);
},
// 获取商品类型
getGoodsTypeManager: function () {
this.apiJavaPost(
"/api/IntegralManager/goodsTypeManager",
{ reqType: "find" },
res => {
if (res.data.resultCode === 1) {
this.goodsTypeManagerList.push({
id: 0,
name: '全部'
})
this.goodsTypeManagerList.push(...res.data.data)
} else {
this.Error(res.data.message);
}
},
null
);
},
// 积分排序 （1“DESC”：降序；2 "ASC":升序）默认为空
ascFunc: function () {
if (!this.asc) {
this.asc = 1
......@@ -307,12 +368,19 @@ export default {
}else if (this.asc === 2) {
this.asc = null
}
this.msg.ranks = this.asc ? (this.asc === 1 ? 'ASC' : 'DESC') : ''
this.getList()
},
handleCurrentChange(val) {
// 翻页
}
},mounted(){
this.getGoodsTypeManager();
this.getList();
},created(){
if (this.$route.query.type) {
this.msg.type = this.typeListIndex = parseInt(this.$route.query.type)
}
}
}
......
src/components/global/newHead.vue
View file @ fd4815ae
......@@ -288,7 +288,7 @@
</li>
<!-- 活动中心 -->
<li :class="{_active: navActive === 9}">
<div @click="handleSelect('/', 9), navActive = 9">
<div @click="handleSelect('/IceCreamTask', 9), navActive = 9">
<span>活动中心</span>
<span class="__splice">|</span>
</div>
......
src/components/taskPage/IceCream/IceCreamTask.vue 0 → 100644
View file @ fd4815ae
<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 @ fd4815ae
<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 @ fd4815ae
<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 @ fd4815ae
<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 @ fd4815ae
<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>
src/router.js
View file @ fd4815ae
......@@ -2,7 +2,7 @@ import Vue from "vue";
import Router from "vue-router";
import index from "./views/index";
import login from "./views/login";
import IceCreamTask from "./components/taskPage/IceCream/IceCreamTask";
Vue.use(Router);
export default new Router({
......@@ -160,6 +160,14 @@ export default new Router({
title: "商城列表-印象之旅~感动与世界同步"
}
},
{
path: "/productList/:type",
name: "productList",
component: resolve => require(["@/components/IntegralMall/productList"], resolve),
meta: {
title: "商城列表-印象之旅~感动与世界同步"
}
},
{
path: "/productDetail",
name: "productDetail",
......@@ -511,6 +519,14 @@ export default new Router({
]
},
{
path: "/IceCreamTask",
name: "IceCreamTask",
component: IceCreamTask,
meta: {
title: "印象之旅~感动与世界同步",
headerShow: true,
},
},
]
});
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