新增活动页面

src/App.vue

@@ -59,7 +59,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_wzxnabnk91k.css';
+@import '//at.alicdn.com/t/font_863923_qlcuzib5xj.css';
 @import './assets/global/global.css';
 body,html{
   padding: 0px;

src/components/newPersonalCenter/integral/model/commodity.vue

@@ -77,7 +77,7 @@
 <template>
   <el-row class="commodity">
     <el-col :span="10" class="com_BigDiv">
-      <div class="info" v-if="index==0" v-for="(item,index) in message">
+      <div class="info" v-if="index==0" v-for="(item,index) in message" :key="index">
         <div>
           <img class="com_bigImg" :src="getImgUrl(message[0].Images)" alt>
         </div>
@@ -87,7 +87,7 @@
     </el-col>
     <el-col :span="14">
       <el-row>
-        <el-col :span="8"  class="small" v-if="index>0&&index<4" v-for="(item,index) in message">
+        <el-col :span="8"  class="small" v-if="index>0&&index<4" v-for="(item,index) in message" :key="index">
           <div @click="goDetail(item.Id)">
             <div class="r_item_img_box">
               <img :src="getImgUrl(item.Images)" alt>
@@ -98,7 +98,7 @@
         </el-col>
       </el-row>
       <el-row>
-        <el-col :span="12" class="medium f" v-if="index>3" v-for="(item,index) in message">
+        <el-col :span="12" class="medium f" v-if="index>3" v-for="(item,index) in message" :key="index">
           <div @click="goDetail(item.Id)">
             <div class="r_item_btmBox">
               <img :src="getImgUrl(item.Images)" alt>

src/components/newPersonalCenter/integral/model/integralHomeV2.vue

@@ -176,7 +176,7 @@
         </el-col>
       </el-row>
       <!-- class -->
-      <el-row class="class" v-for="item in dataList">
+      <el-row class="class" v-for="(item, index) in dataList" :key="index">
         <el-row class="tit">
           <div>
             <!-- <img src="../../../../assets/img/ps/jifenhot.png" alt=""> -->

src/components/taskPage/IceCream/assignment.vue

+<style>
+.assignment {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2018;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.assignment .assignment_bg {
+  height: 718px;
+  width: 872px;
+  background: url("../../../assets/img/task/renwu_bg.png");
+  background-size: 100% 100%;
+  position: relative;
+}
+.assignment .assignment_close {
+  position: absolute;
+  top: 145px;
+  right: -10px;
+  cursor: pointer;
+}
+.assignment .assignment_box {
+  margin-top: 258px;
+  height: 405px;
+  padding: 0 0 0 85px;
+  overflow: auto;
+  margin-right: 85px;
+}
+.assignment .assignment_box::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 14px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 47px;
+}
+.assignment .assignment_box::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 4px;
+  background: rgba(255, 197, 21, 1);
+}
+.assignment .assignment_box::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  border-radius: 4px;
+  background: rgba(204, 68, 39, 1);
+}
+.assignment .assignment_box .assignment_item {
+  margin: 0 25px 5px 0;
+  padding: 7px 16px;
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 231, 85, 1);
+  background-image: -webkit-linear-gradient(#ffe34d, #ffc208);
+  background-image: linear-gradient(#ffe34d, #ffc208);
+  border-radius: 8px;
+}
+.assignment .assignment_box .assignment_item .item_img {
+  width: 83px;
+  height: 83px;
+  margin-right: 14px;
+  background: url("../../../assets/img/task/renwu_left_bg.png");
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.assignment .assignment_box .assignment_item .item_info {
+  margin-right: 36px;
+}
+.assignment .assignment_box .assignment_item .item_info ._name {
+  font-size: 32px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  -webkit-text-stroke: 2px rgba(185, 51, 0, 1);
+  min-width: 350px;
+  max-width: 350px;
+  overflow: hidden;
+}
+.assignment .assignment_box .assignment_item .item_info ._info {
+  font-size: 16px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(180, 64, 47, 1);
+}
+.assignment .assignment_box .assignment_item .item_btn img {
+  display: block;
+  cursor: pointer;
+}
+.assignment .assignment_box .assignment_item .item_btn ._gray {
+  background-color: #CCCCCC;
+  color: white;
+  display: inline-block;
+  width: 148px;
+  height: 58px;
+  line-height: 58px;
+  text-align: center;
+  font-size: 28px;
+  font-family: "PingFangR";
+  font-weight: bold;
+  color: rgba(255, 255, 255, 1);
+  border-radius: 17px
+}
+.assignment .assignment_box .assignment_item .item_btn ._gray._green{
+  background-color: #5FBF8D;
+}
+</style>
+<template>
+  <div class="assignment">
+    <div class="assignment_bg" :style="{zoom: zoom}">
+      <ul class="assignment_box">
+        <li class="assignment_item" v-for="(item, index) in dataList">
+          <div class="item_img">
+            <img src="../../../assets/img/task/bingqiling1.png" alt>
+          </div>
+          <div class="item_info">
+            <p class="_name">{{item.taskName}}</p>
+            <p class="_info">{{item.awardMaterials}}</p>
+          </div>
+          <div class="item_btn">
+            <img v-if="item.taskStatus === 0" src="../../../assets/img/task/renwu_qu.png" alt>
+            <span class="_gray _green" v-else-if="item.taskStatus === 1">已完成</span>
+            <span class="_gray" v-else>未完成</span>
+          </div>
+        </li>
+      </ul>
+      <div
+        @mouseover="closeShow = 1"
+        @mouseout="closeShow = 2"
+        class="assignment_close"
+        @click="close"
+      >
+        <img v-if="closeShow === 2" src="../../../assets/img/task/renwu_close.png" alt>
+        <img v-else src="../../../assets/img/task/renwu_close.png" alt>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["zoom"],
+  data() {
+    return {
+      closeShow: 2,
+      dataList: [],
+    };
+  },
+  methods: {
+    getTask: function(customerId) {
+      let msg = {
+        customerId: customerId,
+        activityId: 1
+      };
+      this.apiJavaPost(
+        "/api/mactivity/getTask",
+        msg,
+        res => {
+          if (res.data.resultCode == 1) {
+            let data = res.data.data
+            this.dataList = data;
+          } else {
+            this.Error(res.data.message);
+          }
+        },
+        null
+      );
+    },
+    close: function() {
+      this.$emit("closeMyWindow", "myAssignment");
+    }
+  },
+  mounted() {
+    let userInfo = JSON.parse(localStorage.userInfo)
+    this.getTask(userInfo.customerId);
+  }
+};
+</script>

src/components/taskPage/IceCream/description.vue

@@ -12,19 +12,20 @@
   justify-content: center;
 }
 .description .description_bg{
-  height: 397px;
-  width: 337px;
+  height: 558px;
+  width: 474px;
   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;
+  padding: 251px 89px 0 89px;
+  font-weight: bold;
+  font-size: 14px;
+  font-family: 'PingFangR';
 }
 .description_info p{
-  max-height: 132px;
+  max-height: 186px;
   overflow: auto;
 }
 .description_info p::-webkit-scrollbar{
@@ -45,11 +46,13 @@
 }
 .description_close{
   text-align: center;
-  padding-top: 30px;
+  position: absolute;
+  width: 100%;
+  bottom: 25px;
 }
 .description_close img{
-  width: 137px;
-  height: 35px;
+  width: 192px;
+  height: 49px;
   cursor: pointer;
 }
 .description_bg>img{
@@ -63,7 +66,7 @@
 </style>
 <template>
   <div class="description">
-    <div class="description_bg">
+    <div class="description_bg" :style="{zoom: zoom}">
       <div class="description_info">
         <p>{{data}}</p>
       </div>
@@ -79,7 +82,7 @@
 </template>
 <script>
 export default {
-  props:['data'],
+  props:['data', 'zoom'],
   data(){
     return{
       closeShow: 2

src/components/taskPage/IceCream/myExchange.vue

+<style scoped>
+.myExchange{
+  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;
+}
+.myExchange .myExchange_bg{
+  height: 727px;
+  width: 935px;
+  background: url('../../../assets/img/task/duihuan_bg.png');
+  background-size: 100% 100%;
+  position: relative;
+}
+.myExchange .myExchange_box{
+  padding: 202px 65px 55px 65px;
+  display: flex;
+  /* justify-content: space-between; */
+  flex-wrap: wrap;
+}
+.myExchange .myExchange_box .item{
+  width: 198px;
+  height: 220px;
+  background: url('../../../assets/img/task/duihuan_small_bg.png');
+  background-size: 100% 100%;
+  margin-bottom: 30px;
+  text-align: center;
+  position: relative;
+}
+.myExchange .myExchange_box .item .item_img{
+  height: 139px;
+  max-width: 70%;
+  margin: 20px auto 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.myExchange .myExchange_box .item .item_img img{
+  max-height: 139px;
+  max-width: 70%;
+}
+.myExchange .myExchange_box .item .item_name{
+  font-size: 16px;
+  color: rgba(72, 17, 0, 1);
+  width: 125px;
+  height: 33px;
+  background:rgba(255,204,0,1);
+  box-shadow: 0px 2px 7px 0px rgba(255,114,0,0.5);
+  border-radius: 16px;
+  display: inline-block;
+  line-height: 33px;
+  cursor: pointer;
+  transition: all linear .5s;
+}
+.myExchange .myExchange_box .item .item_name:hover{
+  background:rgb(239, 194, 18);
+}
+.myExchange .myExchange_close{
+  position: absolute;
+  right: 0;
+  top: 135px;
+  cursor: pointer;
+}
+.myExchange .myExchange_box .item .right_number{
+  display: inline-block;
+  width:39px;
+  height:39px;
+  background:rgba(255,86,86,1);
+  border-radius:50%;
+  text-align: center;
+  line-height: 39px;
+  font-weight:500;
+  color:rgba(255,255,255,1);
+  font-size: 20px;
+  font-family: 'PingFangR';
+  position: absolute;
+  right: 5px;
+}
+</style>
+<template>
+  <div class="myExchange">
+    <div class="myExchange_bg" :style="{zoom: zoom}">
+      <div class="myExchange_box">
+        <div class="item" v-for="(item, index) in list">
+          <span class="right_number">x1</span>
+          <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="myExchange_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 {
+  props: ['zoom'],
+  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', 'Exchange')
+    },
+  },mounted(){
+
+  }
+
+}
+</script>

src/components/taskPage/IceCream/myTicket.vue

@@ -65,7 +65,7 @@
 </style>
 <template>
   <div class="myTicket">
-    <div class="myTicket_bg">
+    <div class="myTicket_bg" :style="{zoom: zoom}">
       <div class="myTicket_box">
         <div class="item" v-for="(item, index) in list">
           <div class="item_img">
@@ -84,6 +84,7 @@
 
 <script>
 export default {
+  props: ['zoom'],
   data(){
     return{
       closeShow: 2,

src/components/taskPage/IceCream/raffleTickets.vue

@@ -46,7 +46,7 @@
   font-family: 'PingFangR';
   position: absolute;
   left: 166px;
-  top: 167px;
+  top: 203px;
   text-align: center;
 }
 .raffleTickets .tips .small{
@@ -64,10 +64,6 @@
           <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>
@@ -78,7 +74,6 @@ export default {
   props:['data'],
   data(){
     return{
-      closeShow: 2
     }
   },methods:{
     close: function () {

src/components/taskPage/IceCream/signCalendar.vue

+<style>
+.signCalendar{
+  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;
+}
+.signCalendar .signCalendar_bg{
+  min-height: 666px;
+  width: 498px;
+  background: url('../../../assets/img/task/qiandao_bg.png');
+  background-size: 100% 100%;
+  position: relative;
+  box-sizing: border-box;
+  padding: 156px 67px 108px 13px;
+}
+.signCalendar .signCalendar_bg>img{
+  position: absolute;
+  right: -40px;
+  top: 66px;
+  cursor: pointer;
+  width: 38px;
+  height: 38px;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit{
+  text-align: center;
+  color: #FFFFFF;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit .el-icon{
+  cursor: pointer;
+}
+.signCalendar .signCalendar_bg .signCalendar_tit span{
+  padding: 0 60px;
+  font-weight:800;
+  font-family: 'PingFangR'
+}
+.signCalendar .signCalendar_box{
+  padding: 26px 25px;
+}
+.signCalendar .signCalendar_box .signCalendar_box_tit{
+  padding: 0 15px;
+  font-size: 20px;
+  font-weight: 600;
+  font-family: 'PingFangR';
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 30px;
+  background:rgba(255,167,72,1);
+  border-radius:15px;
+  color: white;
+}
+.signCalendar .monthDayList{
+  padding: 10px 0;
+}
+.signCalendar .monthDayList .dayList {
+  position: relative;
+  float: left;
+  width: 42px;
+  height: 48px;
+  border: none;
+  font-size: 12px;
+  text-align: center;
+  box-sizing: border-box;
+  margin: 5px;
+}
+.signCalendar .monthDayList .dayList.behind{
+  background-color: #FFF5B9 !important;
+}
+.signCalendar .monthDayList .dayList.behind div{
+  color: #FF8400 !important;
+  border-color: #FF8400 !important;
+}
+.signCalendar .monthDayList .dayList div{
+  height: 23px;
+  width: 23px;
+  border-radius: 50%;
+  margin: 0 auto;
+  border: 1px solid #FFFFFF;
+  color: #FFFFFF;
+  margin-top: 2px;
+  line-height: 23px;
+}
+.signCalendar .monthDayList .dayList p{
+  background:rgba(255,132,0,1);
+  font-size: 12px;
+  color: white;
+  margin: 0 auto;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+.signCalendar .monthDayList .yiqiandao{
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background:rgba(255,76,76,1);
+  color: white;
+  line-height: 16px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+}
+</style>
+<template>
+  <div class="signCalendar">
+    <div class="signCalendar_bg" :style="{zoom: zoom}">
+      <p class="signCalendar_tit"><i class="el-icon el-icon-caret-left"></i> <span>2019年6月</span> <i class="el-icon el-icon-caret-right"></i></p>
+      <div class="signCalendar_box">
+        <div class="signCalendar_box_tit">
+          <span v-for="(item, index) in week" :key="index">{{item}}</span>
+        </div>
+        <div class="monthDayList clearfix">
+          <div v-for="(item,index) in daysData" class="dayList" :style="{backgroundColor: item.day !== ' ' ? '#CCCCCC' : '', cursor: item.cup ? 'pointer' : ''}" :class="{behind: item.day!==' ' && currentDay < item.day}" :key="index"  >
+            <span v-if="item.qian" class="yiqiandao el-icon-check"></span>
+            <div v-if="item.day">
+              <span class="iconfont icon-caidan_wujiaoxingkong" v-if="!item.today"></span>
+              <span v-else>签</span>
+            </div>
+            <p>{{item.day}}</p>
+          </div>
+        </div>
+      </div>
+      <img class="__close" @click="close" src="../../../assets/img/task/des_close.png" alt="">
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['zoom'],
+  data(){
+    return{
+      week: ['日','一','二','三','四','五','六'],
+      DaysInMonth: [],
+      daysData: [],
+      currentMonth: 0,
+      currentYear: 0,
+      currentDay: 0,
+    }
+  },methods:{
+    getYearMonthDay(){
+      let date = new Date();
+      let newDate = date.getFullYear()+"-"+((date.getMonth()+1) < 9 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + "-" + (date.getDate() < 9 ? '0' + date.getDate() : date.getDate() );
+      let currentYear = newDate.substring(0,4); //当前年份
+      let currentMonth = newDate.substring(5,7); //当前月份
+      let newDay = date.getDate(); //当前天
+			let strDate = date.getDate();
+			let strMonth = (date.getMonth()+1).toString();
+			// alert(typeof strMonth)
+		//判断是否是闰年
+			if (this.isleapYears(currentYear)) { 
+				this.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+			}else{
+				this.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+			}
+			let monthDay = this.DaysInMonth[Number(currentMonth)-1];//当前月的天数			
+			let daysData = [];
+			//给数据源赋值
+			for (var i = 0 ;i < Number(monthDay) ;i++) {
+				var priceDict = {
+          'day': i+1,
+          'price': 0,
+          'today': i+1 === newDay ? true : false,
+          'cup': (this.currentYear === currentYear && this.currentMonth === currentMonth && this.currentDay === i+1) ? true : false,
+          'qian': i+1 < this.currentDay ? true : false
+        };
+				daysData.push(priceDict);
+			}
+			this.daysData = daysData;
+			var currentDay = `${currentYear}-${currentMonth}-01`;
+			var dateObject = new Date(currentDay);
+      var firstDay = dateObject.getDay();//得到每个月1号是周几
+			if (firstDay > 0) {
+				var firstDayData = [];
+				for (var i=0; i< firstDay;i++) {
+					var dict = {'day':' ',price:'','dis':true};
+					firstDayData.push(dict);
+				}
+				this.daysData = firstDayData.concat(daysData);
+			}else{
+				this.daysData = daysData;
+			}
+		},		
+		isleapYears(year){
+			if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) { 
+				return true;
+			} else{				
+				return false;
+			}
+		},
+    close: function () {
+      this.$emit('closeMyWindow', 'signCalendar')
+    }
+  },mounted(){
+    let date = new Date();
+    let newDate = date.getFullYear()+"-"+((date.getMonth()+1) < 9 ? '0' + (date.getMonth()+1) : date.getMonth()+1) + "-" + (date.getDate() < 9 ? '0' + date.getDate() : date.getDate() );
+    this.currentYear = newDate.substring(0,4);
+    this.currentMonth = newDate.substring(5,7);
+    this.currentDay = date.getDate(); //当前天
+    this.getYearMonthDay()
+  }
+}
+</script>

src/components/taskPage/IceCream/ticketList.vue

@@ -12,8 +12,8 @@
   justify-content: center;
 }
 .ticketList .ticketList_bg{
-  height: 538px;
-  width: 300px;
+  min-height: 756px;
+  width: 422px;
   background: url('../../../assets/img/task/quanlist.png');
   background-size: 100% 100%;
   position: relative;
@@ -29,35 +29,185 @@
   height:37px;
 }
 .ticketList .ticketList_box{
-  padding: 10px;
+  padding: 17px 15px;
 }
 .ticketList .ticketList_tit{
-  width:280px;
-  height:85px;
-  background:rgba(255,255,255,.68);
-  border-top-left-radius:21px;
-  border-top-right-radius:21px;
+  width: 392px;
+  /* height: 85px; */
+  background: rgba(255,255,255,.68);
+  border-top-left-radius: 21px;
+  border-top-right-radius: 21px;
 }
 .ticketList .ticketList_tit .top_btn{
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 52px;
-  padding: 4px 8px 0;
-  border-bottom:2px dashed rgba(255,148,21,1);
+  padding: 15px 15px 5px;
+  
 }
 .ticketList .ticketList_tit .top_btn img{
-  width:127px;
-  height:40px;
+  width: 178px;
+  height: 56px;
   cursor: pointer;
 }
+.ticketList .ticketList_tit .hebing_nav{
+  border-top:2px dashed rgba(255,148,21,1);
+}
+.ticketList .ticketList_tit .hebing_nav .hebing{
+  width:64px;
+  height:20px;
+  display: inline-block;
+  background-color: RGBA(154, 154, 154, 1);
+  text-align: center;
+  line-height: 20px;
+  color: white;
+  border-radius: 16px;
+  cursor: pointer;
+  font-size: 12px;
+}
+.ticketList .ticketList_tit .hebing_nav .hebing.hebing2{
+  background-color: #ff5656;
+}
+.ticketList .ticketList_tit .hebing_nav {
+  display: flex;
+  align-items: center;
+  padding: 4px 6px;
+  padding-right: 15px;
+  justify-content: space-between;
+}
 .ticketList .el-checkbox__inner{
   border-radius: 50%;
 }
+.ticketList .el-checkbox-group .el-checkbox{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 10px 20px 5px;
+}
+.ticketList .el-checkbox__input.is-checked .el-checkbox__inner{
+  background-color: white;
+  border-color: rgba(255, 86, 86, 1);
+} 
+.ticketList .el-checkbox__input.is-indeterminate .el-checkbox__inner{
+  background-color: #ff5656;
+  border-color: #ff5656;
+}
+.ticketList .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #ff5656;
+}
+.ticketList .el-checkbox__inner:hover {
+  border-color: #ff5656;
+}
+.ticketList .container{
+  height: 550px;
+  overflow: auto;
+}
+.ticketList .container::-webkit-scrollbar{
+  /*滚动条整体样式*/
+  width: 13px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+.ticketList .container::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 4px; 
+  background: rgba(255, 224, 100, 1);
+}
+.ticketList .container::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/ 
+  border-radius: 4px;
+  background: rgba(31, 168, 176, 1);
+}
+.ticketList .container .item{
+  width: 316px;
+  height: 102px;
+  background:rgba(255,255,255,1);
+  border-radius:14px;
+  position: relative;
+  overflow: hidden;
+}
+.ticketList .container2 .item{
+  position: relative;
+  margin: 20px auto;
+  overflow: hidden;
+}
+.ticketList .bottom_btn{
+  text-align: center;
+  padding: 8px ;
+}
+.ticketList .bottom_btn img{
+  width: 185px;
+  height: 64px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.ticketList .item .el-row{
+  height: 100%;
+  display: flex;
+}
+.ticketList .item .el-row .left{
+  background:rgba(255,136,136,1);
+  color: white;
+  height: calc(100% - 32px);
+  display: flex;
+  align-items: flex-end;
+  padding: 16px 6px
+}
+.ticketList .item .el-row .left .num{
+  font-size: 88px;
+  font-family: 'PingFangR';
+  font-weight: bold;
+  margin-bottom: -26px;
+  position: relative;
+}
+.ticketList .item .el-row .left .num span{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  right: 1px;
+  top: 37px;
+  background-color: #ff8888;
+  border-radius: 50%;
+}
+.ticketList .item .el-row .right {
+  padding: 11px 20px;
+  line-height: 25px;
+}
+.ticketList .item .el-row .right ._name{
+  font-size:28px;
+  font-family: 'PingFangR';
+  font-weight:bold;
+  color:rgba(63,63,63,1);
+}
+.ticketList .item .el-row .right ._type{
+  font-size: 22px;
+  color:rgba(63,63,63,1);
+  margin-top: 3px;
+}
+.ticketList .item .el-row .right ._btn{
+  display: inline-block;
+  width: 110px;
+  text-align: center;
+  font-size: 20px;
+  color: white;
+  background:rgba(255,86,86,1);
+  margin-top: 3px;
+  cursor: pointer;
+}
+.ticketList .el-checkbox__inner::after{
+  border: 1px solid #ff5656;
+  border-left: 0;
+  border-top: 0;
+}
 </style>
 <template>
   <div class="ticketList">
-    <div class="ticketList_bg">
+    <div class="ticketList_bg" :style="{zoom: zoom}">
       <div class="ticketList_box">
         <div class="ticketList_tit">
           <div class="top_btn">
@@ -70,16 +220,45 @@
               <img v-else @click="activeNav = 2" src="../../../assets/img/task/yishiyong.png" alt="">
             </div>
           </div>
-          <div>
-            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
-            <span>合并</span>
+          <div v-if="activeNav === 1" class="hebing_nav">
+            <template>
+              <el-checkbox v-if="hebing === 2" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+              <span v-else>&nbsp;</span>
+            </template>
+            <span @click="hebing = hebing===1 ? 2 : 1, checkedCities=[]" :class="{'hebing2': hebing===1}" class="hebing">合并</span>
           </div>
         </div>
-        <div>
+        <div class="container" v-if="activeNav === 1 && hebing === 2">
           <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
-            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
+            <el-checkbox v-for="city in cities" :label="city" :key="city">
+              <div class="item">
+                
+              </div>
+            </el-checkbox>
           </el-checkbox-group>
         </div>
+        <div class="container container2" v-else>
+          <div class="item" v-for="city in cities" :label="city" :key="city">
+            <el-row>
+              <el-col :span="10">
+                <div class="left">
+                  ￥<span class="num">20<span>元</span></span>
+                </div>
+              </el-col>
+              <el-col :span="14">
+                <div class="right">
+                  <p class="_name">签证</p>
+                  <p class="_type">现金抵用券</p>
+                  <span class="_btn">立即使用</span>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div @mouseover="hebingBtn = 1" @mouseout="hebingBtn = 2" class="bottom_btn">
+          <img v-if="hebingBtn === 2" src="../../../assets/img/task/hebing.png" alt="">
+          <img v-else src="../../../assets/img/task/hebing1.png" alt="">
+        </div>
       </div>
       <div @mouseover="closeShow = 1" @mouseout="closeShow = 2" class="ticketList_close" @click="close">
         <img v-if="closeShow === 2" src="../../../assets/img/task/close.png" alt="">
@@ -89,17 +268,19 @@
   </div>
 </template>
 <script>
-const cityOptions = ['上海', '北京', '广州', '深圳'];
+const cityOptions = ['上海', '北京', '广州', '深圳', '成都'];
 export default {
-  props: ['id'],
+  props: ['id', 'zoom'],
   data() {
     return{
       closeShow: 1,
       activeNav: 1,
-      heckAll: false,
-      checkedCities: ['上海', '北京'],
+      checkAll: false,
+      checkedCities: [],
       cities: cityOptions,
-      isIndeterminate: true
+      isIndeterminate: true,
+      hebing: 1,
+      hebingBtn: 1,
     }
   },methods:{
     handleCheckAllChange(val) {

src/plugins/index.js

@@ -31,7 +31,7 @@ export default {
                     DomainUrl: domainUrl,
                     //常用提交数据URL 
                     PostUrl: domainUrl + "/api/common/post",
-                    javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.215:9000",
+                    javaUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? (locationName.indexOf('oytour') !== -1 ? "http://efficient.oytour.com" : "http://47.96.12.235:9001") : "http://192.168.2.106:9000",
                     ViittoFileUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://imgfile.oytour.com" : 'http://192.168.2.214:8130',
                     UploadUrl: locationName.indexOf('oytour') !== -1 || locationName.indexOf('viitto') !== -1 ? "http://upload.oytour.com" : "http://192.168.2.214:8120",
                     LocalFileStreamDownLoadUrl: domainUrl + "/api/file/GetFileFromWebApi",