ceres-uniapp-v2.0/components/canvasShow/basics/classifyHeader/app/index.vue

<template>
  <view class="header">
    <view class="tabs-nav-warp">
      <scroll-view class="tabs-nav" scroll-x="true">
        <view class="ul">
          <view class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" v-if="componentContent.firstClassify">
			{{ componentContent.firstClassify }}
		  </view>
          <view class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" :key="index" @click="tabChange(index+beginIndex,item.id)">
            {{item.categoryName}}
          </view>
        </view>
      </scroll-view>
    </view>
	<div class="hom-pro-list" v-if="productData.length>0">
	    <div class="product-swiper">
	      <div class="product-swiper-box">
	        <div class="product-swiper-warp" v-for="(item,index) in productData.slice(0, 3)" :key="index">
	          <div class=" product-swiper-item" @click="jumpProductDetail(item)">
	            <div class="product-swiper-img">
	              <img class="img pic-img default-img" :src="item.image" onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
	            </div>
	            <div class="product-swiper-info">
	              <label class="product-name">{{item.productName}}</label>
	              <div class="price-warp">
	                <!-- #ifdef MP-WEIXIN -->
	                <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
	                <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
	                <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
	                <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
	                <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
	                <img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png">
					<img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
	                <!-- #endif -->
	                <!-- #ifdef H5 || APP-PLUS -->
	                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
	                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
	                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
	                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
	                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
	                <image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"></image>
					<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image>
	                <!-- #endif -->
	                <div class="price">
	                  ¥ {{item.price}}
	                </div>
	<!--                <div class="original-price">-->
	<!--                  ¥ {{item.originalPrice}}-->
	<!--                </div>-->
	              </div>
	            </div>
	          </div>
	        </div>
	      </div>
	      <div class="pagination new-pagination"></div>
	    </div>
	    <button v-show="componentContent.showMore" class="btn-more" @click="jumpProList(componentContent.productData)">查看全部 <span class="icon iconfont icon-arrow-right"></span></button>
	  </div>
  </view>
</template>

<script>
import {commonMixin} from '../mixin'
export default {
  mixins: [commonMixin],
  data () {
    return {
      
    }
  },
  computed: {

  },
  methods:{
    
  }
}
</script>

<style lang="scss" scoped>
  .header {
    .top-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 30upx;
      width: 100%;
      .logo {
        // width: 280upx;
        height: 70upx;
        margin-top: 0upx;
      }

      .search-btn {
        height: 66upx;
        background: rgba(255, 255, 255, 1);
        border-radius: 33upx;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 30upx;
        .search-icon {
          width: 60upx;
          height: 60upx;
        }
      }
    }
  }
  .tabs-nav-warp{
    margin-top: 20upx;
    padding:0 30upx;
    overflow: hidden;
    .tabs-nav{
      .ul{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
		padding-left: 20upx;
		padding-right: 20upx;
        .li{
          flex: 1 0 auto;
          margin-left: 5upx;
		  margin-right: 5upx;
          font-size: 30upx;
          color: #252744;
          position: relative;
          padding-bottom: 15upx;
		  padding-left: 27upx;
		  padding-right: 27upx;
		  padding-top: 15upx;
          text-align: center;
          &:first-child{
            margin-left: 0;
          }
          &.on{
            // &:after{
            //   content: '';
            //   width: 100%;
            //   height: 4upx;
            //   background: #252744;
            //   position: absolute;
            //   left: 0;
            //   bottom: 0;
            // }
			background: #252744;
			box-shadow: 0upx 7upx 14upx 0upx #C5C8ED;
			border-radius: 40upx;
			color: white;
          }
        }
      }
    }
  }
  .hom-pro-list{
    ::v-deep .swiper-wrapper{
      position: static;
    }
    /**横向滑动**/
    .product-swiper{
      width: 100%;
      height: auto;
      padding: 5upx 34upx 0;
      background-size: 710upx 454upx;
      box-sizing: border-box;
      position: relative;
      
	  &+.btn-more{
        margin-top: 20upx;
      }
      .title{
        padding: 22upx 0upx 0 0;
        label{
          background-image: none;
          color: #A56C4C;
          font-style: italic;
          padding: 0;
        }
      }
      &-box {
        padding-bottom: 20upx;
        display: flex;
      }
      &-warp{
        padding: 0 5upx;
      }
      &-item {
        width: 220upx;
        position: relative;
        background-color: #FFFFFF;
      }
      &-img {
        width: 220upx;
        height: 220upx;
        position: relative;
        &:after{
          content: '';
          display: block;
          width: 54upx;
          height: 54upx;
          background: url("../../../static/images/newProduct/flag-new.png") no-repeat;
          background-size: 100% 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      &-info {
        background-color: #FFFFFF;
        padding: 10upx;
        text-align: center;
        .product-name{
          font-size: 20upx;
          color: #333;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          margin-bottom: 6upx;
          line-height: 28upx;
        }
        .price-warp{
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 28upx;
          .iconImg {
            width: 58rpx;
            height: 36rpx;
            margin-right: 10rpx;
          }
          .price{
            color: #C83732;
            font-size: 20upx;
            margin-right: 10upx;
          }
          .original-price{
            font-size: 16upx;
            color: #ccc;
            text-decoration: line-through;
          }
        }
      }
    }
  }
  
</style>