yicangzongtai_app_240321/pages/research/homepage/index.vue

<template>
  <view class="index">
    <navbar :config="config" @searchClick="searchClick">
      <view
        slot="right"
        style="
          font-size: 36rpx;
          font-weight: 500;
          color: #ffffff;
          margin-right: 30rpx;
        "
      >
        <text class="iconfont" style="font-size: 40rpx;" @click="goToMsg()">
          &#xe66d;
          <view class="num" v-if="msgCenter==0?false:msgCenter">{{msgCenter}}</view>
        </text>
      </view>
    </navbar>
    <view class="top"></view>
    <view class="swiper">
      <view class="uni-margin-wrap">
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="1000"
		  circular=ture
        >
          <swiper-item v-for="item in shopBanner" :key="item.id"
            ><view
              class="swiper-item"
              @click="
                imgLink(item.model_type, item.model_id, item.url, item.shop_id)
              ">
              <image
                class="bannersize"
                :src="item.cover"
								mode="aspectFill"
              ></image> </view
          ></swiper-item>
        </swiper>
      </view>
    </view>

    <view class="list">
      <view class="item" @click="goDetail('/pages/research/nearby/timeLimit')">
        <image :src="imgUrl+'/index/alarmClock.png'" mode=""></image>
        <view class="font">限时秒杀</view>
      </view>
      <view
        class="item"
        @click="goDetail('/pages/research/homepage/groupList')"
      >
        <image :src="imgUrl+'/index/spell.png'" mode=""></image>
        <view class="font">拼团</view>
      </view>
      <view class="item" @click="goDetail('/pages/pointsMall/index')">
        <image :src="imgUrl+'/index/integral.png'" mode=""></image>
        <view class="font">积分商城</view>
      </view>
      <!-- <view class="item" @click="goDetail('/pages/user/wallet/cardBag', true)">
        <image :src="imgUrl+'/index/oneCardSolution.png'" mode=""></image>
        <view class="font">一卡通</view>
      </view> -->
      <view class="item" @click="goDetail('/pages/research/nearby/facade')">
        <image :src="imgUrl+'/index/nearby.png'" mode=""></image>
        <view class="font">附近门店</view>
      </view>
    </view>
    <!-- 广告 -->
    <view class="advertisement" v-for='item in shopBanner2' :key="item.id"
       @click="
                imgLink(item.model_type, item.model_id, item.url)
              "
      ><image :src="item.cover" mode=""></image
    ></view>
    <!-- 限时秒杀 -->
    <view class="seckill" v-if="currSeckill && currSeckill.length > 0">
      <view class="seckill-item">
        <view
          class="seckill-top"
          @click="goDetail('/pages/research/nearby/timeLimit')"
        >
          <view class="left">限时秒杀</view>
          <view class="line" v-if="currTime"></view>
          <view class="time" v-if="currTime">{{ currTime }}点场 剩余</view>
          <view class="reciprocal" v-if="currTime">
            <uni-countdown
              :backgroundColor="'none'"
              @timeup="overDown2"
              :color="'#fff'"
              :splitorColor="'#fff'"
              :show-day="time2[0] > 0"
              :day="time2[0]"
              :hour="time2[1]"
              :minute="time2[2]"
              :second="time2[3]"
            ></uni-countdown
          ></view>
        </view>
        <view class="option" v-if="currSeckill && currSeckill.length > 0">
          <swiper
            :indicator-dots="false"
            :autoplay="false"
            :display-multiple-items="itemsDis2"
            @change="imgActiveFun2"
            style="height: 220rpx"
			circular="true"
          >
            <swiper-item
              class="option-item"
              @click="
                goProductDetails(
                  '/pages/product/goods/seckillGoods?id=' + item.id
                )
              "
              v-for="item in currSeckill"
              :key="item.id"
            >
              <!-- <view class="option-item" v-for="item in currSeckill" :key="item.id"> -->
              <image
                v-if="item && item.cover"
                :src="item.cover"
                mode=""
              ></image>
              <view class="number">
                <rich-text
                  :nodes="$mUtil.priceBigSmall(item.min_price)"
                ></rich-text>
              </view>
              <!-- </view> -->
            </swiper-item></swiper
          >
		  <view class="slide-box">
          <view
            class="dotBox"
            :style="{ marginLeft: ml2 + 'rpx' }"
            v-if="currSeckill.length > 0"
          >
            <view
              class="dotBox_item"
              v-for="(v, i) in keyList2"
              :key="i"
              :class="{ active_dotBox: activeBannerIndex2 == i }"
            ></view>
          </view>
		   </view>
        </view>
        <!-- <view class="scroll" v-if="currSeckill && currSeckill.length > 0"
          ><view class="scroll-red"></view
        ></view> -->
        <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
      </view>
    </view>

    <!-- 拼团购 -->
    <view class="group-work" v-if="groupList && groupList.length > 0">
      <view
        class="work-top"
        @click="goDetail('/pages/research/homepage/groupList')"
      >
        <view class="top-left">拼团购</view>
        <view class="top-right">
          查看更多
          <text class="iconfont u-font24 u-999">&#xe6c7;</text>
        </view>
      </view>
      <view v-if="groupList && groupList.length > 0">
        <view
          class="middle"
          v-for="item in groupList"
          :key="item.id"
          @click="
            goProductDetails('/pages/product/goods/puzzleGoods?id=' + item.id)
          "
        >
          <view class="middle-left"
            ><image v-if="item && item.cover" :src="item.cover" mode=""></image
          ></view>
          <view class="middle-right">
            <view class="middle-title">{{ item.title }}</view>
            <view class="division">
              <view class="middle-num">
                <view class="contain">
                  <view class="large">
                    <rich-text
                      :nodes="$mUtil.priceBigSmall(item.min_price)"
                    ></rich-text>
                  </view>
                  <view class="small">¥ {{ item.min_sale_price }}</view>
                </view>
                <view class="three"
                  >{{ item.group_people_num }}人团，已拼 <text style="color: #FF0000;">
				  {{item.result_sale_num}}</text> 件</view
                >
              </view>
              <view class="button">去拼团</view>
            </view>
          </view>
        </view>
      </view>
      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
    </view>

    <!-- 热门推荐 -->
    <view class="hot">
      <view class="hot-top">
        <view class="hot-left">热门推荐</view>
        <view class="hot-body"></view>
        <view class="hot-right">精选好物推荐</view>
      </view>
      <view class="hot-item" v-if="recommendList && recommendList.length > 0">
        <view
          class="item"
          v-for="item in recommendList"
          :key="item.id"
          @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
        >
          <image v-if="item && item.cover" :src="item.cover" mode=""></image>
          <view class="hot-introduce" v-if="item && item.title">{{
            item.title
          }}</view>
          <view class="hot-number">
            <view class="hot-large">
              <rich-text
                :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
              ></rich-text>
            </view>
            <view class="hot-small">￥{{ item.max_market_price }}</view>
          </view>
        </view>
      </view>
      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
    </view>

    <!-- 每周上新 -->
    <view class="new-products">
      <view class="new-top">
        <view class="new-left">每周上新</view>
        <view class="new-line"></view>
        <view class="new-right">新品上市优惠热销</view>
      </view>
      <view class="new-list" v-if="newsList && newsList.length > 0">
        <view
          class="item"
          v-for="item in newsList"
          :key="item.id"
          @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
        >
          <image v-if="item && item.cover" :src="item.cover" mode=""></image>
          <view class="list-num">
            <rich-text
              :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
            ></rich-text>
          </view>
        </view>
      </view>
      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
    </view>

    <!-- 本月热销 -->
    <view class="new-products">
      <view class="new-top">
        <view class="new-left">本月热销</view>
        <view class="new-line"></view>
        <view class="new-right">爆品热卖中</view>
      </view>
      <view  v-if="hotList && hotList.length > 0">
        <swiper 
		class="month-list"
          :indicator-dots="false"
           :autoplay="false"
          :display-multiple-items="itemsDis"
          @change="imgActiveFun"
		  circular="true"
        >
          <swiper-item
            class="item"
            @click="
              goProductDetails('/pages/product/goods/goods?id=' + item.id)
            "
            v-for="item in hotList"
            :key="item.id"
          >
            <image v-if="item && item.cover" :src="item.cover" mode=""></image>
            <view class="list-num">
              <rich-text
                :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
              ></rich-text>
            </view>
            <view class="sold">已售{{ item.result_sale_num }}件</view>
          </swiper-item>
        </swiper>
		<view class="slide-box">
			
		
        <view
          class="dotBox"
          v-if="hotList.length > 0"
		 
        >
		  <!-- 上面给的动态样式 :style="{ marginLeft: ml + 'rpx' }" -->
		  <!-- v-for="(v, i) in hotList.slice(0,hotList.length-2)" -->
          <view
            class="dotBox_item"
            v-for="(v, i) in hotList"
            :key="i"
            :class="{ active_dotBox: activeBannerIndex == i }"
          ></view>
        </view>
		</view>
      </view>

      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
    </view>
    <!-- 本月热销 -->
    <!-- 猜你喜欢 -->
    <view class="guess">
      <view class="guess-top">
        <view class="guess-left">猜你喜欢</view>
        <view class="guess-line"></view>
        <view class="guess-right">智能推荐你感兴趣的优品</view>
      </view>
      <view class="guess-item" v-if="goodsList && goodsList.length > 0">
        <view
          class="item"
          @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
          v-for="item in goodsList"
          :key="item.id"
        >
          <image v-if="item && item.cover" :src="item.cover" mode=""></image>
		  
		  
		  <view style=" padding-bottom: 40rpx;">
		  	
		
          <view class="name" style="flex: 1;">{{ item.title }}</view>
          <view class="number">
            <view class="number-red">
              <rich-text
                :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
              ></rich-text>
            </view>
            <view class="number-grey">￥{{ item.max_market_price }}</view>
          </view>
		    </view>
		  
		  
        </view>
      </view>
      <nodata v-else :config="{ top: 1, content: '暂无商品~' }"></nodata>
      <loadMore v-if="goodsList.length > 0" :status="status"></loadMore>
    </view>
    <!-- 猜你喜欢 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: ["color1", "color2", "color3"],
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      config: {
        back: false, //false是tolbar页面 是则不写
        title: "商品列表",
        color: "#FFFFFF",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#0B844A"],
        
        // rightButton:[{
        // 	key:'btn1',
        // 	position:"left",
        // 	icon:'&#xe6eb;'
        // }],
        rightSlot: true,
        search: {
          value: "",
          placeholder: "请输入搜索关键字",
          disabled: false,
        },
      },
      keyWord: "",
      groupList: [], //团购
      hotList: [], //本月热销
      newsList: [], //每周上新
      recommendList: [], //推荐
      shopBanner: [], //轮播图
      currSeckill: [], //秒杀
      time2: [0, 0, 0, 0], //秒杀倒计时
      goodsList: [], //猜你喜欢
      currTime: null,
      keyList: 0,
      ml: -22,
      itemsDis: 1,
      activeBannerIndex: 0,
      keyList2: 0,
      ml2: -22,
      itemsDis2: 1,
      activeBannerIndex2: 0,
      page: 1,
      status: "more",
      isOver2: false,
	  msgCenter:null,
    shopBanner2:[],
	imgUrl: this.$mConfig.staticUrl
    };
  },
  onLoad(){
	this.page = 1;
    this.getAll();
  },
  onShow() {
       this.getmessageNum()
  },
  onPullDownRefresh() {
    this.page = 1;
	// uni.showModal({
	// 	title:'onPullDownRefresh'
	// })
    this.getAll();
    // uni.stopPullDownRefresh();
  },

  onReachBottom() {
    this.status = "loading";
    this.page++;
    this.guessLike();
  },

  methods: {
	  //跳转消息页面
	  goToMsg(){
		  let token = uni.getStorageSync("apiToken")
		  if(!token){
		  	uni.navigateTo({
		  		url:"../register/login"
		  	})
		  }else{
			  	  uni.navigateTo({
		  	url:"../setup/myMsg"
		  })
		  }
	  },
    searchClick() {
      // console.log("dian");
      uni.navigateTo({
        url: "/pages/research/homepage/search",
      });
    },
    goProductDetails(url) {
      uni.navigateTo({
        url: url,
      });
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.detail.value;
    },
    durationChange(e) {
      this.duration = e.detail.value;
    },
    getAll() {
      this.rest();
      this.getmessageNum();
      this.getBanner();
      this.seckillList();
      this.getgroupList();
      this.recommend();
      this.newWeek();
      this.hotSale();
      this.guessLike();
    },
    /**获得消息数量 */
    getmessageNum() {
		this.$http.get("/private/message/unread-num").then(res=>{
			if(res&&res.code==200){
				this.msgCenter = res.data
			}
		})
	},
    /**轮播图 */
    getBanner() {
      this.$http
        .get(`/ad/ad/getShopAdByAdL/0/pt-banner`, {}, false)
        .then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res && res.code == 200) {
            this.shopBanner = res.list;
          }
        });
           this.$http
        .get(`/ad/ad/getShopAdByAdL/0/pt-banner2`, {}, false)
        .then((res) => {
          uni.stopPullDownRefresh();
          this.loading = false;
          if (res && res.code == 200) {
            this.shopBanner2 = res.list;
          }
        });
    },
    imgActiveFun(e) {
		
      this.activeBannerIndex = e.detail.current ;
    },
    imgActiveFun2(e) {
      this.activeBannerIndex2 = e.detail.current;
    },
    overDown2() {
      this.isOver2 = true;
    },
    /**限时秒杀 */
    seckillList() {
      this.$http
        .get(
          `/marketing/seckillActivityGoods/flash-sale`,
          { limit: 10, page: 1 },
          false
        )
        .then((res) => {
          if (res && res.code == 200) {
            this.currTime = res.data.start_hour;
            this.currSeckill = res.data.list;

            if (this.currSeckill && res.data.list.length <= 4) {
              this.keyList2 = 1;
              this.itemsDis2 = res.data.list.length;
            }
            if (
              this.currSeckill &&
              res.data.list.length > 4 &&
              res.data.list.length <= 8
            ) {
              this.keyList2 = 2;
              this.ml2 = -45;
              this.itemsDis2 = 3;
            }
            if (
              this.currSeckill &&
              res.data.list.length > 8 &&
              res.data.list.length <= 12
            ) {
              this.keyList2 = 3;
              this.ml2 = -68;
              this.itemsDis2 = 3;
            }
            if (
              this.currSeckill &&
              res.data.list.length > 12 &&
              res.data.list.length <= 16
            ) {
              this.keyList2 = 4;
              this.ml2 = -90;
              this.itemsDis2 = 3;
            }
            if (res.data.finish_time) {
              this.time2 = this.$mUtil
                .countDown(Math.floor(res.data.finish_time / 1000))
                .split(":")
                .map((val) => Number(val));
            }
          }
        });
    },
    /**团购 */
    getgroupList() {
      this.$http
        .get(
          `/groupbuy/activitygoods/will-you-spell`,
          { limit: 10, page: 1 },
          false
        )
        .then((res) => {
          if (res && res.code == 200) {
            this.groupList = res.list;
          }
        });
    },
    /**热门推荐 */
    recommend() {
      this.$http
        .get(`/goods/new`, { limit: 6, type: "hot" }, false)
        .then((res) => {
          if (res && res.code == 200) {
            this.recommendList = res.list;
          }
        });
    },
    /**每周上新 */
    newWeek() {
      this.$http.get(`/goods/new`, { limit: 16 }, false).then((res) => {
        if (res && res.code == 200) {
          this.newsList = res.list;
        }
      });
    },
    /**本月热销 */
    hotSale() {
      this.$http
        .get(`/goods/month`, { limit: 12, mix_num: 3 }, false)
        .then((res) => {
          if (res && res.code == 200) {
            this.hotList = res.list;
            if (res.list.length <= 3) {
              this.keyList = 1;
              this.itemsDis = res.list.length;
            }
            if (res.list.length > 3 && res.list.length <= 6) {
              this.keyList = 2;
              this.ml = -45;
              this.itemsDis = 3;
            }
            if (res.list.length > 6 && res.list.length <= 9) {
              this.keyList = 3;
              this.ml = -68;
              this.itemsDis = 3;
            }
            if (res.list.length > 9 && res.list.length <= 12) {
              this.keyList = 4;
              this.ml = -90;
              this.itemsDis = 3;
            }
          }
        });
    },
    /**猜你喜欢 */
    guessLike() {
         this.keyWord=uni.getStorageSync("history")?uni.getStorageSync("history").join(","):''
         // console.log( this.keyWord)
      this.$http
        .get(
          `/goods/smart`,
          {
            page: this.page,
            limit: 6,
            keywords: this.keyWord,
          },
          false
        )
        .then((res) => {
          if (res && res.code == 200) {
            
            this.goodsList =this.page==1?res.page.list: this.goodsList.concat(res.page.list);
            if (res.page.totalPage <= res.page.currPage) {
              this.status = "noMore";
            } else {
              this.status = "more";
            }
          }
        });
    },
    /**轮播图跳转 */
    imgLink(type, id, url, shopid) {
      if (type == "goods") {
        uni.navigateTo({
          url: "/pages/product/goods/goods?id=" + id + "&shopid=" + shopid,
        });
      } 
      else if (type == "service") {
        uni.navigateTo({
          url: "/pages/product/goods/serviceGood?id=" + id
        });
      }
      else if (type == "url") {
        uni.navigateTo({
          url: "/pages/index/webView?linkUrl=" + url,
        });
      }
    },
    goDetail(url, isNeedLogin) {
      if ((isNeedLogin && uni.getStorageSync("apiToken") == "") || null) {
        this.$mUtil.toast("请先登录");
        return false;
      }
      uni.navigateTo({
        url: url,
      });
    },
    /**重置数据*/
    rest() {
      this.goodsList = [];
      this.currSeckill = [];
      this.shopBanner = [];
      this.recommendList = [];
      this.newsList = [];
      this.hotList = [];
      this.groupList = [];
    },
  },
};
</script>

<style scoped lang="scss">
	.swiper{
		/deep/ .uni-swiper-dot{
			width: 40rpx !important;
			height: 8rpx;
			border-radius: 5rpx !important;
			background-color: #ffffff !important;	
			opacity: 0.5;
		}
		/deep/ .uni-swiper-dot-active{
			background-color: #ffffff !important;
			opacity: 1;
		}
	}
	
	
	/deep/.hx-navbar__content__main_search_hxicon{
		span{
			font-size: 30rpx;
		}
	}
	/deep/.uni-input-placeholder{
		background-color: #4A705D;
		color: #193E2C !important;
		font-size: 22rpx;
	}
	/deep/.hx-navbar__content__main_search_input{
			background-color: #4A705E;
	}

.bannersize {
					display: block;
					border-radius: 20rpx;
					overflow: hidden;
					width: 100%;
					height: 340rpx;
				}
.guess {
  margin: 0 30rpx;
  .guess-item {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item {
      margin-bottom: 36rpx;
      border-radius: 18rpx;
      background-color: #ffffff;
      border-radius: 18rpx;
      overflow: hidden;
      image {
        width: 336rpx;
        height: 336rpx;
      }
      .name {
        margin: 6rpx 20rpx;
        width: 296rpx;
        height: 80rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }
      .number {	
        display: flex;
        align-items: flex-end;
        // padding-bottom: 40rpx;
        margin: 0 20rpx;
        .number-red {
          color: #ed3d07;
          font-size: 36rpx;
          font-weight: 500;
          text {
            font-size: 36rpx;
            font-weight: Bold;
          }
        }
        .number-grey {
          color: #999999;
          font-size: 22rpx;
          font-weight: 400;
		  text-decoration:  line-through;
          margin-left: 16rpx;
        }
      }
    }
  }
  .guess-top {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    .guess-left {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: Bold;
      line-height: 30rpx;
    }
    .guess-line {
      width: 1rpx;
      height: 32rpx;
      background-color: #707070;
      margin: 0 16rpx;
    }
    .guess-right {
      font-size: 24rpx;
      color: #666666;
      font-weight: Regular;
      line-height: 24rpx;
    }
  }
}
.new-products {
  margin: 50rpx 30rpx;
  .new-list {
    display: flex;
    overflow: scroll;
    white-space: nowrap;
    .item {
      margin-right: 20rpx;
      margin-top: 28rpx;
      margin-bottom: 28rpx;
      text-align: center;
      image {
        border: 1rpx solid #e6e6e6;
        width: 172rpx;
        height: 172rpx;
      }
      .list-num {
        margin-top: 16rpx;
        font-size: 36rpx;
        line-height: 24rpx;
        color: #ff0000;
        font-weight: Bold;
        text {
          font-size: 32rpx;
        }
      }
    }
  }
  .montn-scroll {
    margin: 0 auto;
    border-radius: 6rpx;
    width: 124rpx;
    height: 14rpx;
    background-color: #dddddd;
    border-radius: 7rpx;
    text-align: center;
    .montn-red {
      width: 50rpx;
      border-radius: 6rpx;
      height: 14rpx;
      background-color: #ff0000;
    }
  }

  .month-list {
    // display: flex;
    // overflow: scroll;
    // white-space: nowrap;
    position: relative;
    padding-bottom: 20rpx;
    height:350rpx;
    /deep/ uni-swiper{
      height: 350rpx;
    }
    .item {
      margin: 28rpx 20rpx 28rpx 0;
      text-align: center;  height: 350rpx;
      image {
        width: 216rpx;
        height: 216rpx;
        border-radius: 16rpx;
      }
      .list-num {
        margin-top: 16rpx;
        font-size: 36rpx;
        line-height: 24rpx;
        color: #ff0000;
        font-weight: bold;
        text {
          font-size: 32rpx;
        }
      }
      .sold {
        font-size: 22rpx;
        font-weight: Medium;
        line-height: 24rpx;
        color: #999999;
        margin-top: 8rpx;
      }
    }
  }
  .new-top {
    display: flex;
    align-items: center;
    .new-left {
      font-size: 36rpx;
      color: #1a1a1a;
      font-weight: Bold;
      line-height: 30rpx;
    }
    .new-line {
      width: 1rpx;
      height: 33rpx;
      background-color: #707070;
      margin: 0 16rpx;
    }
    .new-right {
      font-size: 24rpx;
      color: #666666;
      font-weight: Regular;
      line-height: 24rpx;
    }
  }
}
.slide-box{
	display: flex;
	justify-content: center;
}
.dotBox {
  // position: absolute;
  // bottom: 0rpx;
  // left: 50%;
  // margin: 0 auto;
  height: 14rpx;
  overflow: hidden;
  border-radius: 14rpx;
  background-color: #ccc;
  display: flex;
  justify-content: center;

  .dotBox_item {
    width: 45rpx;
    height: 14rpx;
    border-radius: 2rpx;
    background-color: #ccc;
    transition: all 0.5s;
  }

  .active_dotBox {
    width: 45rpx;
    background: rgba(254, 70, 3, 1);
    transition: all 0.5s;
  }
}
.hot {
  margin: 0 30rpx;
  .hot-item {
    display: flex;
    overflow: scroll;
    white-space: nowrap;
    .hot-number {
      display: flex;
      align-items: flex-end;
      margin-top: 10rpx;
    }
    .hot-large {
      color: #ff0000;
      font-size: 36rpx;
      font-weight: Bold;
      line-height: 24rpx;
      text {
        font-size: 36rpx;
        margin-left: 10rpx;
      }
    }
    .hot-small {
      font-size: 22rpx;
      font-weight: Medium;
      line-height: 24rpx;
      color: #cccccc;
      margin-left: 16rpx;
    }
    .hot-introduce {
      overflow: hidden;
      white-space: normal;
      word-break: break-all;
      margin-top: 24rpx;
      // width: 240rpx;
      font-size: 24rpx;
      height: 74rpx;
      font-weight: Regular;
      line-height: 34rpx;
      color: #333333; overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
    }
    .item {
      padding: 20rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      margin-right: 20rpx;
    }
    display: flex;

    margin-top: 27rpx;

    image {
      width: 252rpx;
      height: 252rpx;
      border-radius: 16rpx;
    }
  }
  .hot-top {
    display: flex;
    align-items: center;
    .hot-left {
      font-size: 36rpx;
      font-weight: Bold;
      color: #1a1a1a;
      line-height: 30rpx;
    }
    .hot-body {
      width: 1rpx;
      height: 32rpx;
      background-color: #707070;
      margin: 0 16rpx 0 14rpx;
    }
    .hot-right {
      font-size: 24rpx;
      font-weight: Regular;
      line-height: 24rpx;
      color: #666666;
    }
  }
}
.middle:last-child {
  border: none;
}
.middle {
  display: flex;
  border-bottom: 1rpx solid #e6e6e6;
  padding-bottom: 40rpx;
  padding-top: 42rpx;

  .middle-left {
    margin-right: 20rpx;
    image {
      width: 226rpx;
      height: 226rpx;
      border-radius: 10rpx;
    }
  }
  .middle-right {
    width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    margin-top: 10rpx;
    .middle-title {
      font-size: 28rpx;
	  margin-top: 10rpx;
      color: #181818;
      font-weight: 400;
      line-height: 36rpx;
    }
    .division {
      display: flex;
      // margin-top: 60rpx;
      width: 100%;
	  padding-bottom: 10rpx;
      justify-content: space-between;
    }
    .middle-num {
      flex: 1;
      .contain {
        display: flex;
        align-items: flex-end;
      }
      .three {
        font-size: 24rpx;
        font-weight: Regular;
        color: #333333;
        line-height: 24rpx;
        margin-top: 8rpx;
      }
      .large {
        color: #ff0000;
        font-size: 36rpx;
        font-weight: Bold;
        line-height: 24rpx;
        text {
          font-size: 36rpx;
        }
      }
      .small {
        margin-left: 16rpx;
        font-size: 22rpx;
        font-weight: 500;
        color: #cccccc;
        line-height: 24rpx;
        text-decoration: line-through;
      }
    }
    .button {
      padding: 10rpx 25rpx;
      color: #d5c49b;
      font-size: 28rpx;
      font-weight: Medium;
      background-color: #0B844A;
      border-radius: 32rpx;
    }
  }
}
.group-work {
  margin: 50rpx 30rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  padding: 30rpx;
  .work-top {
    padding-bottom: 20rpx;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e6e6e6;

    .top-left {
      font-size: 36rpx;
      font-weight: Bold;
      color: #1a1a1a;
      line-height: 30rpx;
    }
    .top-right {
      color: #333333;
      font-size: 24rpx;
      font-weight: Regular;
      .iconfont {
        color: #666666;
      }
    }
  }
}
.seckill {
  margin: 50rpx 30rpx;

  .seckill-item {
    border-radius: 16rpx;
    .scroll {
      margin: 26rpx auto 26rpx auto;

      width: 124rpx;
      height: 14rpx;
      background-color: #ededed;
      border-radius: 8rpx;
      .scroll-red {
        width: 50rpx;
        height: 14rpx;
        background-color: red;
        border-radius: 8rpx;
      }
    }
    background-color: #ffffff;
    padding: 0 28rpx 26rpx 28rpx;
    .option {
      //   display: flex;
      position: relative;
      //   padding: 12rpx 20rpx;
      margin-top: 20rpx;
      /deep/ .uni-swiper-slide-frame {
        width: 26% !important;
      }
      .option-item {
        margin-right: 22rpx;

        image {
          width: 140rpx;
          height: 140rpx;
        }
        .number {
          margin-top: 4rpx;
          text-align: center;
          font-size: 36rpx;
          font-weight: Bold;
          line-height: 24rpx;
          color: #333333;
          text {
            font-size: 28rpx;
            font-weight: Medium;
          }
        }
      }
    }
    .seckill-top {
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e6e6e6;
      .left {
        font-size: 36rpx;
        font-weight: Bold;
        color: #1a1a1a;
        margin-right: 14rpx;
      }
      .line {
        width: 1rpx;
        height: 32rpx;
        background-color: #707070;
      }
      .time {
        margin-left: 16rpx;
        color: #666666;
        font-size: 24rpx;
        font-weight: Regular;
      }
      .reciprocal {
        color: #ffffff;
        padding: 0 14rpx;
        background-color: #ff0000;
        font-size: 24rpx;
        font-weight: Bold;
        border-radius: 16rpx;
        margin-left: 30rpx;
      }
    }
  }
}
.advertisement {
  margin: 50rpx 30rpx;
  image {
    width: 690rpx;
    height: 156rpx;
    border-radius: 28rpx;
  }
}
.list {
  margin: 44rpx 30rpx;
  display: flex;
  justify-content: space-between;
  .item {
    text-align: center;
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
.item-red {
  background: #f76260;
  color: #fff;
}
.item-green {
  background: #09bb07;
  color: #fff;
}
.item-blue {
  background: #007aff;
  color: #fff;
}
.swiper {
  margin: 30rpx;

}
.index {
  position: relative;
  background-color: #eeeeee;
  overflow-x: hidden;
  .top {
    position: absolute;
    top: 0;
    left: -13%;
    width: 126%;
    overflow-x: hidden;
    height: 400rpx;
    border-radius: 0 0 50% 50%;
    background-color: rgba(0, 50, 30, 1);
  }
}
.iconfont {
  position: relative;
}
.num {
  position: absolute;
  top: -20rpx;
  left: -20rpx;
  background-color: #ff0000;
  padding: 2rpx 10rpx;
  border-radius: 14rpx;
  font-size: 20rpx;
  font-weight: 400;
  color: #ffffff;
}
.uni-margin-wrap {
  width: 690rpx;
}
.swiper {
  height: 340rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  border-radius: 20rpx;
}

.swiper-list {
  margin-top: 40rpx;
  margin-bottom: 0;
}

.uni-common-mt {
  margin-top: 60rpx;
  position: relative;
}

.info {
  position: absolute;
  right: 20rpx;
}

.uni-padding-wrap {
  width: 550rpx;
  padding: 0 100rpx;
}
</style>