<template>
	<!-- #ifdef H5 -->
  <view>
    <zj-page-layout
      :hasFooter="false"
      :isScroll="true"
      :isLoading="isLoading"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
      <template slot="header">
        <view class="search-container">
          <view class="mask" @tap.stop="searchData"></view>
          <u-search
            shape="round"
            :showAction="false"
            placeholder="搜索商品名称或型号"
            v-model="keyword"
            disabled>
          </u-search>
        </view>
      </template>

      <view class="swiper-container" v-if="templateInfo.carouseStatus && bannerList.length > 0">
        <u-swiper
          :list="bannerList"
          keyName="imgSrc"
          autoplay
          circular
          indicator
          indicatorMode="line"
          height="175"
          @click="clickBanner"
        ></u-swiper>
      </view>

      <view class="bigActivity-container" v-if="templateInfo.active1Status && templateInfo.active1Image">
        <image :src="templateInfo.active1Image" mode="widthFix" @tap="toActivityList(3)"></image>
      </view>

      <view class="classify-container" v-if="templateInfo.categoryStatus">
        <view class="content">
          <block v-for="(item, index) in classifyList" :key='index'>
            <view class="item" @tap="toClassifyList(item.categoryId)">
              <image :src="item.imgUrl" mode="aspectFill"></image>
              <text class="ellipsis">{{item.name}}</text>
            </view>
          </block>
          <view class="item" @tap="toClassifyList('')">
            <image src="@/static/home/class_more2.png" mode="aspectFill"></image>
            <text>更多分类</text>
          </view>
        </view>
      </view>

      <view class="other-container" v-if="templateInfo.active2Status && (templateInfo.active2LeftImage || templateInfo.active2RightImage)">
        <image :src="templateInfo.active2LeftImage" v-if="templateInfo.active2LeftImage" mode="aspectFill" @tap="toActivityList(4)"></image>
        <image :src="templateInfo.active2RightImage" v-if="templateInfo.active2RightImage" mode="aspectFill" @tap="toActivityList(5)"></image>
      </view>

      <view class="smallActivity-container" v-if="templateInfo.onlyStatus">
        <view class="content">
          <view class="title">专场专区</view>
          <view class="list">
            <view class="item">
              <image :src="templateInfo.only1Image" mode="aspectFill" @tap="toActivityList(6)"></image>
            </view>
            <view class="item">
              <image :src="templateInfo.only2Image" mode="aspectFill" @tap="toActivityList(7)"></image>
            </view>
            <view class="item">
              <image :src="templateInfo.only3Image" mode="aspectFill" @tap="toActivityList(8)"></image>
            </view>
            <view class="item">
              <image :src="templateInfo.only4Image" mode="aspectFill" @tap="toActivityList(9)"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="notice-container" v-if="templateInfo.notiveStatus && noticeList.length > 0 && userInfo && userInfo.type === 'SERVICE'">
        <view class="content">
          <view class="left">
            <image src="@/static/home/notice.png"></image>
          </view>
          <swiper class="swiper" :autoplay="true" :vertical="true" :circular="true" :disable-touch="true">
            <block v-for="(item,index) in noticeList" :key='index'>
              <swiper-item @touchmove.stop='stopTouchMove'>
                <view class="ellipsis">{{item.workUserName}}成功分享商城，获得收益{{item.amount}}元</view>
              </swiper-item>
            </block>
          </swiper>
        </view>
      </view>

      <view class="seckill2-container" v-if="templateInfo.killStatus && seckillTimeList.length > 0">
        <view class="content">
          <view class="top">
            <view class="left">
              <view class="title">秒杀专区</view>
              <view class="timeout">
                <view class="text">{{countdownText}}</view>
                <view class="time">{{countdownTime}}</view>
              </view>
            </view>
            <view class="right" @tap="toSeckillGoodsList()">更多<image src="@/static/icon/right.png"></image></view>
          </view>
          <view class="list">
            <block v-for="(item, index) in seckillGoodsList" :key='index'>
              <view class="item" @tap="toSeckillGoodsDetail(item.goodsId)">
                <image :src="item.imgUrl" mode="aspectFill"></image>
                <view class="title ellipsis-2">{{item.goodsName}}</view>
                <view class="price">¥{{item.price | priceFilter}}</view>
              </view>
            </block>
          </view>
        </view>
      </view>

      <view class="swiper2-container" v-if="tradeinBannerList.length > 0">
        <u-swiper
          :list="tradeinBannerList"
          keyName="imgSrc"
          autoplay
          circular
          indicator
          indicatorMode="line"
          height="100"
          @click="toClassifyList('', 1)"
        ></u-swiper>
      </view>

      <view class="recom-container" v-if="templateInfo.newsStatus">
        <view class="top">
          <scroll-view
            :scroll-x="true"
            :scroll-left="scrollLeft"
            scroll-with-animation
            :show-scrollbar="false"
            class="tabs-view"
            ref="tabs-view">
            <view class="tab">
              <block v-for="(item, index) in tabList" :key='index'>
                <view class="item" :ref="`tabs-item-${index}`" :class="[`tabs-item-${index}`, item.goodsNewsCategoryId == tabCurrent ? 'current':'']" @tap="changeTab(item.goodsNewsCategoryId)">
                  <view class="name">{{item.mainTitle}}</view>
                  <view class="text">{{item.subTitle}}</view>
                </view>
              </block>
            </view>
          </scroll-view>
        </view>
        <view class="goods-row-list" v-if="recomList.length > 0">
          <block v-for="(item, index) in recomList" :key='index'>
            <view class="item" @tap="toGoodsDetail(item.goodsId)">
              <view class="image">
                <image :src="item.imgUrl" mode="aspectFill" class="img"></image>
                <image :src="item.logo" mode="heightFix" class="water" v-if="item.isShowWater"></image>
              </view>

              <view class="right">
                <view>
                  <view class="title ellipsis-2">{{item.goodsName}}</view>
                  <view class="tags" v-if="item.tags1 && item.tags1.length > 0">
                    <view class="it" v-for="(it, idx) in item.tags1" :key="idx">{{it}}</view>
                  </view>
                  <view class="tags2" v-if="(item.tags2 && item.tags2.length > 0) || item.promotionFullPiece || item.isTrade == 'YES'">
                    <view class="it" v-if="item.promotionFullPiece">满件打折</view>
                    <view class="it" v-if="item.isTrade == 'YES'">以旧换新</view>
                    <view class="it" v-for="(it, idx) in item.tags2" :key="idx">{{it}}</view>
                  </view>
                </view>
                <view>
                  <view class="bottom">
                    <view class="price">
                      <view class="price-1">¥{{item.goodsPrice | priceFilter}}</view>
                      <view class="price-2">¥{{item.orgGoodsPrice | priceFilter}}</view>
                    </view>
                    <view class="text">销量：{{item.soldNum}}</view>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
        <Loading :loadStatus="loadStatus" :dataList="recomList" />
      </view>

      <view class="dialog-container" v-if="templateInfo.popupStatus && templateInfo.popupImage && isShowDialog">
      	<u-transition ref="dialog" mode-class="zoom-in" :duration="1000" :show="templateInfo.popupStatus && templateInfo.popupImage && isShowDialog">
      		<image class="image" :src="templateInfo.popupImage" mode="widthFix" @tap="toActivityList(2)"></image>
      	</u-transition>
      	<u-transition ref="dialogBtn" mode-class="fade" :duration="1000" :show="templateInfo.popupStatus && templateInfo.popupImage && isShowDialog">
          <text class="iconfont icon-close2" @tap="closeDialog()"></text>
      	</u-transition>
      </view>

    </zj-page-layout>

  </view>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/pages/goods/index`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  import { compareTime, selectionChange } from '@/common/utils/util.js'

  export default {
    data() {
      return {
        isLoading: true,
        refresherTriggered: false, // 下拉刷新状态

        userInfo: {},
        templateInfo: {},

        keyword: '', // 搜索关键词
        classifyList: [], // 分类列表
        seckillTimeList: [], // 秒杀时间段列表
        seckillTimeCurrent: 0, // 秒杀时间段选择
        seckillGoodsList: [], // 秒杀商品列表
        seckillGoodsPage: 1, // 秒杀商品分页
        seckillGoodsNoMore: false, //
        countdownText: '', // 倒计时文字
        countdownTime: '', // 倒计时时间
        endDatetime: '', // 倒计时结束时间
        nowDate: null, // 当前时间
        dateInterval: null, // 时间定时器
        recomList: [], // 好物推荐列表
        pageNum: 1,
        loadStatus: 0,

        bannerList: [], // 轮播图列表
        tradeinBannerList: [], // 以旧换新轮播图列表
        noticeList: [],

        tabList: [], // 好物推荐分类列表
        tabCurrent: 1, // 好物推荐分类当前值
        scrollLeft: 50,
        scrollViewWidth: 0,
        tabsRect: {
        	left: 0
        },

        isShowDialog: true,
      }
    },

    computed:{
      isLogin() {
        return this.$store.state.user.token ? true : false;
      },
    },

    watch: {
      nowDate() {
        let hh = this.nowDate.getHours(),
          mm = this.nowDate.getMinutes(),
          ss = this.nowDate.getSeconds();
        let hs = [10, 12, 15, 18, 20];
        if (mm == 0 && ss == 0 && hs.indexOf(hh) >= 0) {
          setTimeout(() => {
            this.getSeckillTimeList();
          }, 1000)
        }
      },

    },

    async onShow() {
      selectionChange();

      this.keyword = '';

      if(this.isLogin) {
        this.userInfo = await this.$getUserInfo();
      }

      await this.getHomePage();
      await this.getBannerList();
      await this.getTradeinBannerList();
      await this.getNoticeList();
      await this.getTabList();
      await this.getSeckillTimeList();
      await this.getClassflyList();

      this.isLoading = false;

      this.dateInterval = setInterval(() => {
        this.nowDate = new Date();
      }, 1000)
    },

    onHide() {
      clearInterval(this.dateInterval);
    },

    methods: {
      // 触发下拉刷新
      async refresherrefresh(e) {
        this.refresherTriggered = true;
        this.keyword = '';

        if(this.isLogin) {
          this.userInfo = await this.$getUserInfo();
        }

        await this.getHomePage();
        await this.getBannerList();
        await this.getTradeinBannerList();
        await this.getNoticeList();
        await this.getTabList();
        await this.getSeckillTimeList();
				await this.getClassflyList();

        this.refresherTriggered = false;
      },

      scrolltolower() {
        if (this.loadStatus === 0) {
          this.pageNum++;
          this.getRecomList();
        }
      },

      async getHomePage() {
        return new Promise((resolve, reject) => {
          this.$api.get('/renovation/detail')
            .then(res => {
              if (res.data) {
                this.templateInfo = res.data;
              }
            }).finally(res => {
              resolve(1);
            })
        })
      },

      // 获取公告列表
      async getNoticeList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/renovation/settle/list')
          .then(res => {
            if (res.data) {
              res.data.forEach(item => {
                item.workUserName = item.workUserName.slice(0, 1) + '师傅';
              })
              this.noticeList = res.data;
            }
          }).finally(res => {
            resolve(1);
          })
        })
      },

      // 搜索商品
      searchData() {
        this.navToPage('/packageGoods/pages/search')
      },

      // 获取轮播图列表
      async getBannerList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/common/list/page', {
            pageNum: 1,
            pageSize: -1,
            state: true,
            port: 'SHOP'
          }).then(res => {
            this.bannerList = res.data.records;
          }).finally(res => {
            resolve(1);
          })
        })
      },

      // 点击轮播图
      clickBanner(index) {
        let item = this.bannerList[index];
        if(item.type == 2) {
          this.toMiniProgram(item.appId, item.linkUrl);
        }else if(item.type == 3) {
          this.toActivityList(item.goodsId);
        }else {
          this.toGoodsDetail(item.goodsId);
        }
      },

      // 获取以旧换新轮播图列表
      async getTradeinBannerList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/common/list/page', {
            pageNum: 1,
            pageSize: -1,
            state: true,
            port: 'YJHX'
          }).then(res => {
            this.tradeinBannerList = res.data.records;
          }).finally(res => {
            resolve(1);
          })
        })
      },

      // 获取一级菜单
      async getTabList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/goods/category/list', {
            type: 1
          }).then(res => {
            this.classifyList = res.data.slice(0, 9);
          }).finally(res => {
            resolve(1)
          })
        })
      },

      // 去分类列表
      toClassifyList(categoryId, isTradein = 0) {
        this.navToPage(`/packageGoods/pages/classify?categoryId=${categoryId}&isTradein=${isTradein}`)
      },

      findElem(array, attr, val) {
        for (var i = 0; i < array.length; i++) {
          if (array[i][attr] == val) {
            return i; //返回当前索引值
          }
        }
        return -1;
      },

      // 计算倒计时
      countTime() {
      	let endDatetime = this.endDatetime.replace(/\-/g, '/');
      	// console.log(endDatetime)
          var nowtime = new Date(),  //获取当前时间
              endtime = new Date(endDatetime);  //定义结束时间
          var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
      		dd = Math.floor(lefttime/(1000*60*60)/24),  //计算天数
              hh = Math.floor(lefttime/(1000*60*60)),  //计算小时数
              mm = Math.floor(lefttime/(1000*60)%60),  //计算分钟数
              ss = Math.floor(lefttime/1000%60);  //计算秒数
      	// console.log(new Date(endDatetime))
      	function checkTime(i){
      		if (i<10) {
      			i = "0"+i;
      		}
      		return i;
      	}
      	setTimeout(() => {
      		this.countTime();
      	}, 1000);
      	this.countdownTime = (dd > 0 ? dd + '天 ' : '') + checkTime(hh) + ":" + checkTime(mm) + ":" + checkTime(ss);
      	// console.log(this.countdownTime)
      },

      // 获取秒杀时间列表
      async getSeckillTimeList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/goods/sec/time')
          .then(res => {
            if(res.data.length < 1) {return false;}
            this.seckillTimeList = res.data;
            this.endDatetime = this.seckillTimeList[0].endDatetime;
            this.countdownText = this.seckillTimeList[0].type == 'jxz' ? '距离结束':'即将开始';
            this.countTime();
            this.getSeckillGoodsList();
          }).finally(res => {
            resolve(1);
          })
        })
      },

      // 获取秒杀商品列表
      getSeckillGoodsList(loadMore) {
        if(this.seckillGoodsNoMore && loadMore)return;
        if(!loadMore) {
        	this.seckillGoodsNoMore = false;
        	this.seckillGoodsPage = 1;
        }
        let secKillId = this.seckillTimeList[0].secKillId;
        this.$api.get('/goods/sec/goods/list', {
          pageNum: this.seckillGoodsPage,
          pageSize: 3,
          secKillId: secKillId,
        }).then(res => {
        	let _list = res.data.records;
        	let pageTotal = res.data.pages;
        	if(this.seckillGoodsPage >= pageTotal){
        		this.seckillGoodsNoMore = true;
        	}
        	if (_list.length) {
        		this.seckillGoodsPage += 1;
        	}
        	if (loadMore) {
        		this.seckillGoodsList = this.seckillGoodsList.concat(_list);
        	} else {
        		this.seckillGoodsList = _list;
        	}
        })
      },

      // 进入秒杀商品详情
      toSeckillGoodsDetail(id) {
        if (!id) {
          return false;
        }
        if (this.seckillTimeList[this.seckillTimeCurrent].type == 'wks') {
          return this.$toast('活动未开始');
        }
        if (this.seckillTimeList[this.seckillTimeCurrent].type == 'yjs') {
          return this.$toast('活动已结束');
        }
        this.navToPage('/packageGoods/pages/detail?id=' + id)
      },

      // 获取推荐分类
      getClassflyList() {
        return new Promise((resolve, reject) => {
          this.$api.get('/renovation/category/list', {
            pageNo: 1,
            pageSize: -1
          }).then(res => {
            this.tabList = res.data.records;
            this.tabList.unshift({
              goodsNewsCategoryId: '',
              mainTitle: '全部宝贝',
              subTitle: '全部宝贝',
            })
            setTimeout(() => {
              this.resize()
            }, 500)
            this.tabCurrent = res.data.records.length > 0 ? res.data.records[0].goodsNewsCategoryId : 0;
            this.refreshRecomList();
          }).finally(res => {
            resolve(1);
          })
      	})
      },

      // 切换一级菜单
      changeTab(current) {
      	this.tabCurrent = current;
      	this.refreshRecomList();
      	this.resize();
      },

      // 获取推荐商品列表
      getRecomList() {
        this.loadStatus = 1;
        this.$api.get('/renovation/goods/list', {
          pageNo: this.pageNum,
          pageSize: 5,
          type: this.tabCurrent ? 1 : '',
          objId: this.tabCurrent,
          sort: 1
        }).then(res => {
          res.data.records.forEach(item => {
            if (item.logo && item.logoStartTime) {
              item.isShowWater = compareTime(item.logoStartTime, item.logoEndTime);
            } else {
              item.isShowWater = false;
            }
          })
          this.loadStatus = 0;
          let list = res.data.records;
          if (list.length < 5) {
            this.loadStatus = 2;
          }
          this.recomList = this.recomList.concat(list);
        }).catch(() => {
          this.loadStatus = 2;
        })
      },

      refreshRecomList() {
        this.pageNum = 1;
        this.recomList = [];
        this.getRecomList();
      },

      // 进入商品详情
      toGoodsDetail(id) {
        if (!id) return false;
        this.navToPage('/packageGoods/pages/detail?id=' + id)
      },

      // 进入活动列表
      toActivityList(type) {
        this.navToPage('/packageGoods/pages/activity?type=' + type)
      },

      // 进入秒杀商品列表
      toSeckillGoodsList() {
        this.navToPage('/packageGoods/pages/seckill')
      },

      setScrollLeft() {
      	// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
      	const index = this.findElem(this.tabList, 'goodsNewsCategoryId', this.tabCurrent);
      	const tabRect = this.tabList[index]
      	// 累加得到当前item到左边的距离
      	const offsetLeft = this.tabList
      		.slice(0, index)
      		.reduce((total, curr) => {
      			return total + curr.rect.width
      		}, 0)
      	// 此处为屏幕宽度
      	const res = uni.getSystemInfoSync();
      	const windowWidth = res.windowWidth;
      	// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
      	let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2

      	// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
      	scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
      	this.scrollLeft = Math.max(0, scrollLeft)
      },
      // 获取所有标签的尺寸
      resize() {
      	// 如果不存在list，则不处理
      	if(this.tabList.length === 0) {
      		return
      	}
      	Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
      		this.tabsRect = tabsRect
      		this.scrollViewWidth = 0
      		itemRect.map((item, index) => {
      			// 计算scroll-view的宽度，这里
      			this.scrollViewWidth += item.width
      			// 另外计算每一个item的中心点X轴坐标
      			this.tabList[index].rect = item
      		})
      		// 获取了tabs的尺寸之后，设置滑块的位置
      		this.setScrollLeft()
      	})
      },
      // 获取导航菜单的尺寸
      getTabsRect() {
      	return new Promise(resolve => {
      		this.queryRect('tabs-view').then(size => resolve(size))
      	})
      },
      // 获取所有标签的尺寸
      getAllItemRect() {
      	return new Promise(resolve => {
      		const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
      			`tabs-item-${index}`, true))
      		Promise.all(promiseAllArr).then(sizes => resolve(sizes))
      	})
      },
      // 获取各个标签的尺寸
      queryRect(el, item) {
      	const query = uni.createSelectorQuery().in(this);
      	return new Promise(resolve => {
      		query.select(`.${el}`).boundingClientRect(data => {
      			resolve(data)
      		}).exec();
      	})
      },

      navToPage(url) {
        this.$navToPage({
          url
        })
      },

      // 关闭弹窗
      closeDialog() {
      	this.isShowDialog = false;
      },
    }
  }
  // #endif
  // #ifndef H5

  import { getNoticeNum, getOrderNum } from '@/common/utils/util.js';

  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;

      getNoticeNum()
      getOrderNum()
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
  .search-container {
  	background: #ffffff;
    padding: 20rpx;
    position: relative;
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 999;
    }
  	::v-deep .u-search {
  		height: 60rpx;
      input {
        background: #F7F8FF !important;
      }
  		.u-search__content {
        background: #F7F8FF !important;
  			height: 60rpx;
  		}
  	}
  }

  .classify-container {
  	margin-top: 20rpx;
  	position: relative;
  	z-index: 1;
  	padding: 0 20rpx;
  	&.whiteBg {
  		.content {
  			background: #ffffff;
  			text {
  				color: #666666;
  			}
  		}
  	}
  	.content {
  		border-radius: 20rpx;
  		padding-top: 30rpx;
  		display: flex;
  		flex-wrap: wrap;
  		.item {
  			display: flex;
  			flex-direction: column;
  			align-items: center;
  			width: 142rpx;
  			margin-bottom: 30rpx;
  			image {
  				width: 78rpx;
  				height: 78rpx;
  				display: block;
  				border-radius: 30rpx;
  				overflow: hidden;
  			}
  			text {
  				font-size: 24rpx;
  				color: #333333;
  				margin-top: 10rpx;
  				width: 150rpx;
  				text-align: center;
  			}
  		}
  	}
  }

  .swiper-container {
  	margin-top: 20rpx;
    padding: 0 20rpx;
    ::v-deep .u-swiper {
      height: 350rpx !important;
      .u-swiper__wrapper {
        height: 350rpx !important;
      }
      .u-swiper__wrapper__item__wrapper__image {
        height: 350rpx !important;
      }
    }
  }

  .bigActivity-container {
  	position: relative;
  	z-index: 9;
  	margin-top: 40rpx;
  	padding: 0 20rpx;
  	image {
  		width: 710rpx;
  		display: block;
  	}
  }
  .other-container {
  	display: flex;
  	padding: 0 20rpx;
  	margin-top: 20rpx;
  	justify-content: space-between;
  	image {
  		display: block;
  		width: 350rpx;
  		height: 240rpx;
  		border-radius: 20rpx;
  	}
  }
  .smallActivity-container {
  	margin-top: 20rpx;
  	padding: 0 20rpx;
  	.content {
  		background: #FFFFFF;
  		border-radius: 20rpx;
  		.title {
  			font-size: 32rpx;
  			color: #333333;
  			line-height: 74rpx;
  			padding-left: 20rpx;
  			font-weight: 600;
  		}
  		.list {
  			display: flex;
  			flex-wrap: wrap;
  			padding: 0 20rpx;
  			.item {
  				width: 320rpx;
  				margin-right: 30rpx;
  				margin-bottom: 20rpx;
  				&:nth-child(2n) {
  					margin-right: 0;
  				}
  				image {
  					width: 320rpx;
  					height: 200rpx;
  					display: block;
  					border-radius: 20rpx;
  				}
  			}
  		}
  	}
  }
  .notice-container {
  	padding: 0 20rpx;
  	margin-top: 20rpx;
  	.content {
  		display: flex;
  		align-items: center;
  		height: 100rpx;
  		background: #FFFFFF;
  		border-radius: 20rpx;
  	}
  	.left{
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		width: 96rpx;
  		height: 48rpx;
  		margin-right: 20rpx;
  		border-right: 2rpx solid #E5E5E5;
  		image {
  			width: 60rpx;
  			height: 30rpx;
  			display: block;
  		}
  	}
  	.swiper{
  		height: 100rpx;
  		flex: 1;
  		padding-right: 20rpx;
  		::v-deep swiper-item {
  			display: block;
  			height: 100rpx;
  			width: 100%;
  			line-height: 100rpx;
  		}
  	}
  }

  .seckill2-container {
  	padding: 0 20rpx;
  	.content {
      @include zj-card;
  		background: #FFFFFF;
  		border-radius: 20rpx;
  		padding: 0 20rpx;
  		.top {
  			display: flex;
  			justify-content: space-between;
  			align-items: center;
  			height: 86rpx;
  			.left {
  				display: flex;
  				align-items: center;
  				.title {
  					font-size: 32rpx;
  					color: #333333;
  					line-height: 74rpx;
  					font-weight: 600;
  				}
  				.timeout {
  					display: flex;
  					align-items: center;
  					margin-left: 20rpx;
  					border-radius: 44rpx;
  					height: 44rpx;
  					overflow: hidden;
  					.text {
  						font-size: 24rpx;
  						color: #FFFFFF;
  						width: 120rpx;
              height: 44rpx;
              line-height: 44rpx;
  						text-align: center;
  						background: #FF3F42;
  						border-radius: 44rpx;
  						position: relative;
  						z-index: 1;
  					}
  					.time {
  						padding: 0 20rpx 0 32rpx;
              height: 44rpx;
              line-height: 44rpx;
  						background: #FFD3B5;
  						font-size: 24rpx;
  						color: #FF3F42;
  						margin-left: -20rpx;
  						position: relative;
  						z-index: 0;
  					}
  				}
  			}
  			.right {
  				display: flex;
  				align-items: center;
  				font-size: 28rpx;
  				color: #999999;
  				image {
  					width: 12rpx;
  					height: 26rpx;
  					display: block;
  					margin-left: 8rpx;
  				}
  			}
  		}
  		.list {
  			display: flex;
  			.item {
  				width: 210rpx;
  				margin-right: 20rpx;
  				padding-bottom: 20rpx;
  				&:last-child {
  					margin-right: 0;
  				}
  				image {
  					width: 210rpx;
  					height: 210rpx;
  					display: block;
  				}
  				.title {
  					font-size: 28rpx;
  					color: #333333;
  					line-height: 36rpx;
  					font-weight: 600;
  					margin-top: 6rpx;
  				}
  				.price {
  					font-size: 32rpx;
  					color: $minor-color;
  					line-height: 36rpx;
  					margin-top: 6rpx;
  				}
  			}
  		}
  	}
  }

  .swiper2-container {
    padding: 0 20rpx;
    margin-top: 20rpx;
    ::v-deep .u-swiper {
      height: 200rpx !important;
      .u-swiper__wrapper {
        height: 200rpx !important;
      }
      .u-swiper__wrapper__item__wrapper__image {
        height: 200rpx !important;
      }
    }
  }

  .recom-container {
  	margin-top: 20rpx;
    padding-bottom: 30rpx;
  	.top {
  		.tab {
  			display: flex;
  			.item {
  				display: flex;
  				flex-direction: column;
  				align-items: center;
  				justify-content: center;
  				flex-shrink: 0;
  				width: 187.5rpx;
  				font-size: 28rpx;
  				color: #666666;
  				position: relative;
  				height: 130rpx;
  				.name {
  					font-size: 36rpx;
  					color: #333333;
  				}
  				.text {
  					font-size: 24rpx;
  					color: #666666;
  					margin-top: 8rpx;
  				}
  				&.current {
  					.name {
  						color: $theme-color;
  						font-weight: 600;
  					}
  					.text {
  						color: $theme-color;
  					}
  					&::after {
  						content: '';
  						display: block;
  						width: 48rpx;
  						height: 6rpx;
  						background: $theme-color;
  						position: absolute;
  						bottom: 0;
  						left: 50%;
  						margin-left: -24rpx;
  					}
  				}
  			}
  		}
  	}
  }

  .dialog-container {
  	position: fixed;
  	z-index: 1000000;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100vh;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	flex-direction: column;
  	background: rgba($color: #000000, $alpha: .6);
  	.image {
  		width: 600rpx;
  		display: block;
  		border-radius: 20rpx;
  		margin-top: 40rpx;
  	}
  	.iconfont {
      font-size: 68rpx;
      color: #ffffff;
  		display: block;
  		margin-top: 40rpx;
  	}
  }
</style>
<style>
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
</style>
