Merge refs/remotes/KXMH/develop into refs/heads/develop

pages/index/index/index.js

@@ -1,214 +1,272 @@
-  // pages/index/index.js
+// pages/index/index.js
 import {
-  httpUtil,location_city
+    httpUtil,
+    location_city
 } from '../../../utils/util'
 Page({
 
-  /**
-   * 页面的初始数据
-   */
-  data: {
-    latitude: '',
-    longitude: '',
-    city: '',
-    swiperIdx: 0,
-    swith_area: 0,
-    swich_space:['综合排序','近期上演','限时钜惠'],
-    show_list: [
-      {sort_type:'1',list:'newMake',page:'1',has_more:'false'},
-      {sort_type:'2',list:'newMake',page:'1',has_more:'false'},
-      {sort_type:'3',list:'newMake',page:'1',has_more:'false'},
-    ],
-  },
-  // 轮播图
-  bindchange(e) {
-    this.setData({
-      swiperIdx: e.detail.current
-    })
-  },
-  swith_tab: function (e) {
-    let swith_area=e.currentTarget.dataset.index
-    this.setData({
-      swith_area
-    })
-    if( 'newMake' == this.data.show_list[swith_area].list){
-this.get_show_list(this.data.city_id,swith_area+1,1)
-    }else{
-      this.setData({current_list:this.data.show_list[swith_area].list,no_more:!this.data.show_list[swith_area].has_more})
-    }
-  },
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        latitude: '',
+        longitude: '',
+        city: '',
+        swiperIdx: 0,
+        swith_area: 0,
+        swich_space: ['综合排序', '近期上演', '限时钜惠'],
+        show_list: [
+            { sort_type: '1', list: 'newMake', page: '1', has_more: 'false' },
+            { sort_type: '2', list: 'newMake', page: '1', has_more: 'false' },
+            { sort_type: '3', list: 'newMake', page: '1', has_more: 'false' },
+        ],
+        screen_list: [], //开屏广告信息
+        //   screen_imgUrl: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61382ab58bf84d41d8cd98f00b204e9800998ecf8427e.jpg',
+        isActionMarkShow: false, //开屏广告
+        isGiftMarkShow: false //首页弹窗
+    },
+    // 轮播图
+    bindchange(e) {
+        this.setData({
+            swiperIdx: e.detail.current
+        })
+    },
+    swith_tab: function (e) {
+        let swith_area = e.currentTarget.dataset.index
+        this.setData({
+            swith_area
+        })
+        if ('newMake' == this.data.show_list[swith_area].list) {
+            this.get_show_list(this.data.city_id, swith_area + 1, 1)
+        } else {
+            this.setData({ current_list: this.data.show_list[swith_area].list, no_more: !this.data.show_list[swith_area].has_more })
+        }
+    },
 
-  write_in(e){
-    this.setData({keyword:e.detail.value})
-  },
-search(e){
-  this.setData({keyword:e.detail.value})
-  wx.navigateTo({
-    url: '/pages/index/search/search?city_id='+this.data.city_id+"&keyword="+e.detail.value,
-  })
-},
-search1(){
-  wx.navigateTo({
-    url: '/pages/index/search/search?city_id='+this.data.city_id+"&keyword="+this.data.keyword,
-  })
-},
+    write_in(e) {
+        this.setData({ keyword: e.detail.value })
+    },
+    search(e) {
+        this.setData({ keyword: e.detail.value })
+        wx.navigateTo({
+            url: '/pages/index/search/search?city_id=' + this.data.city_id + "&keyword=" + e.detail.value,
+        })
+    },
+    search1() {
+        wx.navigateTo({
+            url: '/pages/index/search/search?city_id=' + this.data.city_id + "&keyword=" + this.data.keyword,
+        })
+    },
 
-  // 封装 获取banner｜获取城市列表｜获取演出列表
-  // 方便刷新全局数据
-  refresh_info: function (city_id) {
-    var that = this
-    // 获取banner列表
-    httpUtil("/api/v1/banner-list", "get", {
-      city_id
-    }).then(res => {
-      if (0 != res.banner_list.length) {
-        that.setData({
-          banner_list:res.banner_list
-        })
-      }
-    })
-    // 获取search关键词
-      httpUtil("/api/v1/hot-search","get").then(res=>{
-        that.setData({placeholder:res.keyword})
-      })
-    // 获取演出城市列表
-    httpUtil("/api/v1/city-list", "get", {
-      city_id
-    }).then(res2 => {
-      that.setData({
-        city_list: res2,city_id:res2.current.city_id,city:res2.current.city_name
-      })
-    })
+    // 封装 获取banner｜获取城市列表｜获取演出列表
+    // 方便刷新全局数据
+    refresh_info: function (city_id) {
+        var that = this
+        // 获取banner列表
+        httpUtil("/api/v1/banner-list", "get", {
+            city_id
+        }).then(res => {
+            if (0 != res.banner_list.length) {
+                that.setData({
+                    banner_list: res.banner_list
+                })
+            }
+        })
+        // 获取search关键词
+        httpUtil("/api/v1/hot-search", "get").then(res => {
+            that.setData({ placeholder: res.keyword })
+        })
+        // 获取演出城市列表
+        httpUtil("/api/v1/city-list", "get", {
+            city_id
+        }).then(res2 => {
+            that.setData({
+                city_list: res2,
+                city_id: res2.current.city_id,
+                city: res2.current.city_name
+            })
+        })
 
-    // 获取演出列表
-    let sort_type =1
-    let page = 1
-   this.get_show_list( city_id,sort_type,page)
-  },
-// 获取演出列表方法封装
-get_show_list( city_id,sort_type,page){
-  httpUtil("/api/v1/show-list", "get", {
-    city_id,sort_type,page
-  }).then(res => {
-    let show_list=this.data.show_list
-    show_list[sort_type-1].list=res.show_list
-    show_list[sort_type-1].has_more=res.has_more
-    this.setData({
-      show_list,current_list:res.show_list,no_more:!res.has_more
-    })
-  })
-},
-banner_nav:function(e){
-  let url = e.currentTarget.dataset.key
-  console.log("前往地址：",url)
-  wx.navigateTo({
-  //  url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key,
-  url
-  })
-},
-  calendar_nav: function () {
-    wx.navigateTo({
-      url: '/pages/index/calendar/calendar?city_id=' + this.data.city_id,
-    })
-  },
-  area_nav: function () {
-    wx.navigateTo({
-      url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this.data.city_list),
-  // url: '/pages/index/city/selectcity'
-    })
-  },
+        // 获取演出列表
+        let sort_type = 1
+        let page = 1
+        this.get_show_list(city_id, sort_type, page)
+        //   获取开屏广告
+        httpUtil("/api/v1/home-promotion", "get", {
+            city_id
+        }).then(res => {
+            if (res.length == 0) {
+                return
+            }
+            let key = wx.getStorageSync('key')
+            // console.log(key);
+            // console.log(key.indexOf(res.id));
+            if(key.indexOf(res.id)!=-1){
+                // console.log('我尊在');
+                return
+            }
+            this.setData({
+                screen_list: res,
+                isActionMarkShow: true
+            })
+        })
+        wx.stopPullDownRefresh()
+    },
+    // 获取演出列表方法封装
+    get_show_list(city_id, sort_type, page) {
+        httpUtil("/api/v1/show-list", "get", {
+            city_id,
+            sort_type,
+            page
+        }).then(res => {
+            let show_list = this.data.show_list
+            show_list[sort_type - 1].list = res.show_list
+            show_list[sort_type - 1].has_more = res.has_more
+            this.setData({
+                show_list,
+                current_list: res.show_list,
+                no_more: !res.has_more
+            })
+        })
+    },
 
-  show_detail:function(e){
-    wx.navigateTo({
-      url: '/pages/opera/show/show_detail?cycle_id='+e.currentTarget.dataset.cycle_id,
-    })
-  },
-  /**
-   * 生命周期函数--监听页面加载
-   */
-  onLoad: function (options) {
-    if( !getApp().globalData.city_id){
-    // 默认北京写法
-    //location_city("beijing").then(res=>{
-      location_city().then(res=>{
-      var city = res.city_info.city_name
-      var city_id = res.city_info.city_id
-      getApp().globalData.city_id = city_id
-      this.refresh_info(city_id)
-    })
-  }else{
-    this.refresh_info(  getApp().globalData.city_id )
-  }
-  },
+    banner_nav: function (e) {
+        let url = e.currentTarget.dataset.key
+        console.log("前往地址：", url)
+        wx.navigateTo({
+            //  url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key,
+            url
+        })
+    },
+    calendar_nav: function () {
+        wx.navigateTo({
+            url: '/pages/index/calendar/calendar?city_id=' + this.data.city_id,
+        })
+    },
+    area_nav: function () {
+        wx.navigateTo({
+            url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this.data.city_list),
+            // url: '/pages/index/city/selectcity'
+        })
+    },
 
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
+    show_detail: function (e) {
+        wx.navigateTo({
+            url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id,
+        })
+    },
+    cancle_mark(e) {
+        let id=e.currentTarget.dataset.id
+        let key=wx.getStorageSync('key')
+        if(key.indexOf(id)==-1){
+            wx.setStorageSync('key',[...key,id])
+        }
+        this.setData({
+            isActionMarkShow: false,
+            isGiftMarkShow: true
+        })
+    },
+    advertisementMark_show() {
+        this.setData({
+            isActionMarkShow: true,
+            isGiftMarkShow: false
+        })
+    },
+    onlinkurl(e) {
+        let link_url = e.currentTarget.dataset.link_url
+        wx.navigateTo({
+            url: link_url
+        })
+    },
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        if (!getApp().globalData.city_id) {
+            // 默认北京写法
+            //location_city("beijing").then(res=>{
+            location_city().then(res => {
+                var city = res.city_info.city_name
+                var city_id = res.city_info.city_id
+                getApp().globalData.city_id = city_id
+                this.refresh_info(city_id)
+            })
+        } else {
+            this.refresh_info(getApp().globalData.city_id)
+        }
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+        wx.setStorageSync('key',[])
+    },
 
-  },
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () { },
 
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {},
+    /**
+     * 生命周期函数--监听页面隐藏 
+     */
+    onHide: function () {
 
-  /**
-   * 生命周期函数--监听页面隐藏 
-   */
-  onHide: function () {
+    },
 
-  },
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
 
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
+    },
 
-  },
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+        // wx.reLaunch({
+        //     url: '/pages/index/index/index'
+        // })
+        this.refresh_info(getApp().globalData.city_id)
         
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
- wx.reLaunch({
-   url: '/pages/index/index/index'
- })
-  },
+    },
 
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-    let show_list = this.data.show_list
-    let current=show_list[this.data.swith_area]
-    if(current.has_more){
-      wx.showNavigationBarLoading(); //在标题栏中显示加载图标
-    let page = parseInt(current.page)+1
-    let city_id = this.data.city_id
-    let sort_type =current.sort_type
-    httpUtil("/api/v1/show-list", "get", {city_id,page,sort_type}).then(res => {
-      wx.hideNavigationBarLoading(); //完成停止加载图标
-      show_list[this.data.swith_area].list=current.list.concat(res.show_list)
-      show_list[this.data.swith_area].page=page
-      show_list[this.data.swith_area].has_more=res.has_more
-      this.setData({
-        show_list,current_list: show_list[this.data.swith_area].list,no_more:!res.has_more
-      })
-    })
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+        let show_list = this.data.show_list
+        let current = show_list[this.data.swith_area]
+        if (current.has_more) {
+            wx.showNavigationBarLoading(); //在标题栏中显示加载图标
+            let page = parseInt(current.page) + 1
+            let city_id = this.data.city_id
+            let sort_type = current.sort_type
+            httpUtil("/api/v1/show-list", "get", { city_id, page, sort_type }).then(res => {
+                wx.hideNavigationBarLoading(); //完成停止加载图标
+                show_list[this.data.swith_area].list = current.list.concat(res.show_list)
+                show_list[this.data.swith_area].page = page
+                show_list[this.data.swith_area].has_more = res.has_more
+                this.setData({
+                    show_list,
+                    current_list: show_list[this.data.swith_area].list,
+                    no_more: !res.has_more
+                })
+            })
 
-  }else{
-    this.setData({no_more:true})
-  }
-  },
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-    return {
-      title: '开心麻花小程序 - 优惠购票',
-      path: '/pages/index/index/index',
-      imageUrl:'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png'
+        } else {
+            this.setData({ no_more: true })
+        }
+    },
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+        return {
+            title: '开心麻花小程序 - 优惠购票',
+            path: '/pages/index/index/index',
+            imageUrl: 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png'
+        }
     }
-  }
 })

pages/index/index/index.wxml

@@ -20,6 +20,21 @@
     </block>
   </swiper>
 </view> -->
+<!-- 开屏广告 -->
+<view class="markinfo" wx:if="{{isActionMarkShow}}" bindtouchstart='buttonStart' catchtouchmove='buttonMove'>
+  <view class="fiexbox">
+    <view class="box" bind:tap="onlinkurl" data-link_url="{{screen_list.link_url}}">
+      <image
+        src="{{screen_list.img_url}}"
+        ></image>
+    </view>
+    <view class="btn" catchtap="cancle_mark" data-id="{{screen_list.id}}">×</view>
+  </view>
+</view>
+<!-- 礼物弹窗 -->
+<view class="surprise" bindtap="advertisementMark_show"  wx:if="{{isGiftMarkShow}}">
+  <view class="img"></view>
+</view>
 
 <!-- 搜索栏 -->
 <view class="search_area">

pages/index/index/index.wxss

@@ -4,176 +4,293 @@
 .pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;}
 .pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */
 
-.bannner{
+.bannner {}
 
+.banner .swiper {
+    text-align: center;
+    margin-top: 40rpx;
+    height: 560rpx;
+    display: flex;
+    align-items: center;
 }
 
-.banner .swiper{
-  text-align: center;
-  margin-top: 40rpx;
-  height: 560rpx;
-  display: flex;
-  align-items: center;
+.banner .swiper .swiper_item {
+    width: 640rpx;
 }
 
-.banner .swiper .swiper_item{
-  width: 640rpx;
-}
-.banner .shadow{
-  width: 550rpx;
-  height: 212rpx;
-  background: #7b7b7b;
-  border-radius: 8rpx;
-  opacity: 0.3;
-  filter: blur(12px);
-  position: absolute;
-  left: 60rpx;
-  top: 310rpx;
-  z-index: -1;
+.banner .shadow {
+    width: 550rpx;
+    height: 212rpx;
+    background: #7b7b7b;
+    border-radius: 8rpx;
+    opacity: 0.3;
+    filter: blur(12px);
+    position: absolute;
+    left: 60rpx;
+    top: 310rpx;
+    z-index: -1;
 }
-.banner .swiper .active{
 
-}
-.banner .swiper .quiet{
-  /* transform: scale(0.8333333); */
+.banner .swiper .active {}
+
+.banner .swiper .quiet {
+    /* transform: scale(0.8333333); */
 }
 
-.banner .swiper .swiper_item .img{
-  width: 640rpx;
-  height: 500rpx;
-  border-radius: 16rpx;
-box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
+.banner .swiper .swiper_item .img {
+    width: 640rpx;
+    height: 500rpx;
+    border-radius: 16rpx;
+    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
 }
+
 .banner .indicator_dsn {
-display: flex;
-justify-content: center;
-/* margin: 20rpx 0 40rpx 0; */
-position: absolute;
-top: 560rpx;
-left: 50%;
-transform: translate( -50%);
-}
-.banner .indicator_dsn .dot{
-  width: 8rpx;
+    display: flex;
+    justify-content: center;
+    /* margin: 20rpx 0 40rpx 0; */
+    position: absolute;
+    top: 560rpx;
+    left: 50%;
+    transform: translate( -50%);
+}
+
+.banner .indicator_dsn .dot {
+    width: 8rpx;
     height: 8rpx;
     margin: 0 10rpx;
     border-radius: 8rpx;
     background-color: #FFFFFF;
 }
-.banner .indicator_dsn .dot.active{
-  width: 32rpx;
-  background-color:#FF446B;
+
+.banner .indicator_dsn .dot.active {
+    width: 32rpx;
+    background-color: #FF446B;
 }
-.search_area{
-  display:flex;    padding: 0 20rpx 20rpx 20rpx;align-items:center;
+
+.search_area {
+    display: flex;
+    padding: 0 20rpx 20rpx 20rpx;
+    align-items: center;
 }
-.search_area .cal{
-  width: 60rpx;
-  height: 60rpx;
-  margin: 0 26rpx 0 6rpx;
-  background: #FFFFFF;
-  box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
-  border: 2rpx solid #E9E9E9;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+.search_area .cal {
+    width: 60rpx;
+    height: 60rpx;
+    margin: 0 26rpx 0 6rpx;
+    background: #FFFFFF;
+    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
+    border: 2rpx solid #E9E9E9;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.search_area ._search{
-  display:flex;flex:1;background-color:#ffffff;border-radius:60rpx;justify-content:space-between;align-items: center; 
-  box-shadow: 0 4rpx 20rpx 0 #F3F3F3;font-size:24rpx;height: 64rpx;
-  padding: 0 20rpx;    margin-right: 10rpx;    border: 2rpx solid #EBEBEB;
+.search_area ._search {
+    display: flex;
+    flex: 1;
+    background-color: #ffffff;
+    border-radius: 60rpx;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 4rpx 20rpx 0 #F3F3F3;
+    font-size: 24rpx;
+    height: 64rpx;
+    padding: 0 20rpx;
+    margin-right: 10rpx;
+    border: 2rpx solid #EBEBEB;
 }
-.search_area ._search ._search1{
-  display: flex;
-  align-items: center;
-  width: 100%;
+
+.search_area ._search ._search1 {
+    display: flex;
+    align-items: center;
+    width: 100%;
 }
-.search_area ._search ._search1 .input{
-  flex: 1;
+
+.search_area ._search ._search1 .input {
+    flex: 1;
+}
+
+.line {
+    display: flex;
+    margin-bottom: 20rpx;
 }
-.line{
-  display: flex;     margin-bottom: 20rpx;
+
+.line .topLine {
+    width: 33%;
+    text-align: center;
+    margin: 20rpx;
+    color: #7B7B7B;
 }
-.line .topLine{width: 33%;text-align: center;margin: 20rpx;color: #7B7B7B;}
 
-.line .topLine.active{
-  position: relative;color: #181818;font-weight: bold;
+.line .topLine.active {
+    position: relative;
+    color: #181818;
+    font-weight: bold;
 }
 
 .line .topLine.active:after {
-  content: " ";
-   width:1rem;
-  height: 0.12rem;
-  background: #fff;
-  position: absolute;
-  /* bottom: -0.1rem; */
-  bottom: -0.2rem;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: #FF446B;
-  border-radius:0.12rem;
-}
-._list{
-  display:flex;flex-wrap:wrap;    justify-content: flex-start;
-}
-._list ._demo{
-  margin: 0 0 40rpx 26rpx;
- width: 336rpx;
-background: #fff;
-border-radius: 16rpx;
-overflow:auto;
-display: flex;
-flex-direction: column;
-justify-content: space-between;
-}
-._list ._demo .list_img{
-  width: 336rpx;
-height: 504rpx;
-}
-._list ._demo ._ln{
-  margin: 4rpx 10rpx 12rpx 12rpx;
-}
-._list ._demo ._ln1{
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 20rpx;
-  color: #7B7B7B;
-}
-._list ._demo ._ln2{
-  margin: 5rpx 0;
-  font-size: 28rpx;
-font-weight: bold;
-color: #181818;
-}
-._list ._demo ._ln3{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 16rpx;
-}
-._list ._demo ._ln3 ._ln4{
-display: flex;
-align-items: center;
-}
-._list ._demo ._ln3 ._detail{
-  font-size: 24rpx;
-  white-space: nowrap;
-  border-radius: 22rpx;
-  text-align: center;
-  margin: 0;
-  background: linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);
-  color: #fff;
-  line-height: 42rpx;
-}
-
-.more{
+    content: " ";
+    width: 1rem;
+    height: 0.12rem;
+    background: #fff;
+    position: absolute;
+    /* bottom: -0.1rem; */
+    bottom: -0.2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #FF446B;
+    border-radius: 0.12rem;
+}
+
+._list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+._list ._demo {
+    margin: 0 0 40rpx 26rpx;
+    width: 336rpx;
+    background: #fff;
+    border-radius: 16rpx;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+._list ._demo .list_img {
+    width: 336rpx;
+    height: 504rpx;
+}
+
+._list ._demo ._ln {
+    margin: 4rpx 10rpx 12rpx 12rpx;
+}
+
+._list ._demo ._ln1 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20rpx;
     color: #7B7B7B;
+}
+
+._list ._demo ._ln2 {
+    margin: 5rpx 0;
+    font-size: 28rpx;
+    font-weight: bold;
+    color: #181818;
+}
+
+._list ._demo ._ln3 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 16rpx;
+}
+
+._list ._demo ._ln3 ._ln4 {
+    display: flex;
+    align-items: center;
+}
+
+._list ._demo ._ln3 ._detail {
+    font-size: 24rpx;
+    white-space: nowrap;
+    border-radius: 22rpx;
     text-align: center;
-    margin:70rpx 0 40rpx 0;
+    margin: 0;
+    background: linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);
+    color: #fff;
+    line-height: 42rpx;
 }
 
+.more {
+    color: #7B7B7B;
+    text-align: center;
+    margin: 70rpx 0 40rpx 0;
+}
+
+.fiexbox {
+    width: 400rpx;
+    border-radius: 4rpx;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0px;
+    bottom: 0;
+    margin: auto;
+    z-index: 100;
+    height: 700rpx;
+}
 
+.fiexbox .box image {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+}
 
+.fiexbox .box {
+    width: 400rpx;
+    height: 600rpx;
+    margin-bottom: 10px;
+    border-radius: 4rpx;
+}
+
+.fiexbox .btn {
+    margin-top: 10px;
+    border-radius: 50%;
+    border: 1px solid #FFFAF0;
+    color: #FFFAF0;
+    width: 50rpx;
+    height: 50rpx;
+    text-align: center;
+    line-height: 50rpx;
+    margin: 0 auto;
+    background: rgba(228, 220, 220, 0.3) !important;
+}
+
+.markinfo {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    background: rgba(0, 0, 0, 0.64) !important;
+    z-index: 100;
+}
+
+.surprise {
+    position: fixed;
+    right: 10rpx;
+    bottom: 0rpx;
+    z-index: 100;
+}
+
+.surprise .img {
+    width: 150rpx;
+    height: 150rpx;
+    text-align: center;
+    line-height: 150rpx;
+    background: url(https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61415f6cf0837b03af37cc5d456f21c901e1413071d7f.png);
+    background-size: 150rpx 150rpx;
+}
+
+.surprise .img image {
+    width: 100%;
+    height: 100%;
+}
+
+.cton {
+    background: yellow;
+    color: #CCC;
+    border-radius: 8rpx;
+    width: 50rpx;
+    /* margin: 0 auto; */
+    text-align: center;
+}