hlm_pl_mall_h5/pages/home/special/editable_page_model/Model22.vue

<template>
<view class="model-22">
  <view class="seckill-list-preview marketing-box marketing-box-two marketing-box-3" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
    <view>
      <view class="title-wrap title-wrap-3" v-if="editablePageConfig.editable_page_config_content['if_show_title_icon']==1" @click="goPromotion()">
        <view class="title-left">
          <view class="img">
            <image mode="aspectFit" class="img" :src="title_icon">
          </view>
        </view>
      </view>
    </view>
    <view class="list-wrap">
        <view class="item" v-for="(goods,index) in editablePageConfig.editable_page_config_content.goods_list" :key="index" @click="productClick(goods.goods_id)">
          <view class="img-wrap">
            <image mode="aspectFit" class="img" :src="goods.goods_image">
          </view>
          <view class="content">
            <view class="top">
              <view class="content-desc">{{goods.goods_name}}</view>
              <view class="mprogress">
                <view class="img">
                  <view class="img-con" :style="'width:'+goods.order_ratio+'%'">
                  </view>
                </view>
                <view class="num">已抢{{goods.order_ratio}}%</view>
              </view>
            </view>
            <view class="bot">
              <view class="content-price">
                <view>¥
                  <text class="span">{{parseFloat(goods.goods_promotion_price)}}</text>
                </view>
                <view class="content-num">￥{{parseFloat(goods.goods_price)}}</view>
              </view>
              <view class="layui-btn">立即抢购</view>
            </view>
          </view>
        </view> 
    </view>
    <view class="more" @click="goPromotion()">
      <text class="span">更多秒杀</text>
      <text class="i iconfont iconyoujiantou">
      </text>
    </view>
  </view>
</view>

</template>

<script>
	import {
	  env
	} from '../../../../static/config'
export default {
  name: 'Model22',
  data () {
    return {
    }
  },
  components: {
  },
  props: ['editablePageConfig','editablePage'],
  computed: {
  	title_icon(){
  		if(this.editablePageConfig.editable_page_config_content['title_icon']){
  			return this.editablePageConfig.editable_page_config_content['title_icon']
  		}else{
  			return env.SITE_URL+'/static/home/images/editable_page/seckill_style3_title.png'
  		}
  	}
  },
  created() {
  },
  methods: {
    productClick(goods_id) {
      uni.navigateTo({url: '/pages/home/goodsdetail/Goodsdetail?goods_id='+goods_id })
    },
	goPromotion(){
		uni.navigateTo({url:'/pages/home/goodslist/Goodslist?xianshi=1'})
	}
  }
}
</script>

<style lang="scss" scoped>
.model-22 .marketing-box-two {
	padding: 20px 15px 5px;
	background-color: #FFFFFF;
	border-radius: 5px;
}
.model-22 .marketing-box-two .title-wrap {
	padding-bottom: 5px;
	display: flex;
	align-items: center;
}
.model-22 .marketing-box-two .title-wrap-2 {
	justify-content: space-between;
}
/* .marketing-box-two .title-wrap-2 .title-left .img {
	display: inline-block;
	width: 103px;
	height: 16px;
	line-height: 16px;
}
*/
.model-22 .marketing-box-two .title-wrap .title-left .img {
	width: 103px;
	height: 16px;
}
.model-22 .marketing-box-two .title-wrap .title-left .time {
	height: 16px;
	line-height: 16px;
	margin-top: 10px;
	font-size: 12px;
}
.model-22 .marketing-box-two .title-wrap .title-left .time {
	color: rgba(255, 69, 68, .5);
}
.model-22 .marketing-box-two .title-wrap .title-left .time .font {
	margin-right: 6px;
}

.model-22 .marketing-box-two .title-wrap .title-right {
	font-size: 12px;
	color: #909399;
}
.model-22 .marketing-box-two .title-wrap .title-right .i {
	font-size: 12px;
}
.model-22 .marketing-box-two .list-wrap {
	flex-wrap: wrap;
}
.model-22 .marketing-box-two .list-wrap .item {
	width: 100%;
	display: flex;
	height: 125px;
	box-sizing: border-box;
}
.model-22 .marketing-box-two .list-wrap .img-wrap {
	width: 95px;
	height: 95px;
	border-radius: 5px;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 9px;
	margin-top: 15px;
	position: relative;
}
.model-22 .marketing-box-two .list-wrap .img-wrap>.img {
	width: 100%;
	height: 100%;
}
.model-22 .marketing-box-two .list-wrap .img-wrap .hot {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
}
.model-22 .marketing-box-two .list-wrap .img-wrap .hot .div {
	width: 100%;
	height: 100%;
	position: relative;
}
.model-22 .marketing-box-two .list-wrap .img-wrap .hot .div .img {
	width: 100%;
	height: 100%;
}
.model-22 .marketing-box-two .list-wrap .img-wrap .hot .div .span {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
	color: #FFFFFF;
	position: absolute;
	top: 0;
	left: 0;
}
.model-22 .marketing-box-two .list-wrap .item .content {
	padding: 15px 0;
	border-bottom: 1px solid #EEEEEE;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	flex:1;
}
.model-22 .marketing-box-two .list-wrap .item:last-child .content {
	border-bottom: 0px;
}
.model-22 .marketing-box-two .list-wrap .item .content .content-desc {
	height: 32px;
	margin-top: 0;
	font-size: 14px;
	line-height: 14px;
	text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.model-22 .marketing-box-two .list-wrap .mprogress {
	display: flex;
	align-items: center;
}
.model-22 .marketing-box-two .list-wrap .mprogress .img {
	width: 120px;
	height: 10px;
	border-radius: 10px;
	background-color: #FCECD7;
	margin-right: 10px;
}
.model-22 .marketing-box-two .list-wrap .mprogress .img .img-con {
	width: 77px;
	height: 10px;
	border-radius: 10px;
	background-color: #FDBE6C;
}
.model-22 .marketing-box-two .list-wrap .mprogress .num {
	font-size: 12px;
	color: #909399;
}
.model-22 .marketing-box-two .list-wrap .bot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.model-22 .marketing-box-two .list-wrap .bot .content-price {
	font-size: 12px;
	color: #FF4544;
	margin-top: 10px;
	height: 16px;
	font-weight: 600;
	display: flex;
    align-items: flex-end;
}
.model-22 .marketing-box-two .list-wrap .bot .content-price .span {
	font-size: 16px;
	margin-right: 5px;
}
.model-22 .marketing-box-two .list-wrap .bot .content-price .content-num {
	font-weight: 500;
	margin-top: 0;
	font-size: 12px;
    line-height: 12px;
    color: #909399;
    text-decoration: line-through;
}
.model-22 .marketing-box-two .list-wrap .bot .layui-btn {
	background-color: rgb(255, 69, 68);
	color:#fff;
	font-size: 14px;
	width: 80px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	border-radius: 25px;
}
.model-22 .marketing-box-3 {
	padding-bottom: 0;
}
.model-22 .marketing-box-two .title-wrap-3 {
	justify-content: center;
}
.model-22 .marketing-box-two .title-wrap-3 .title-left .img image {
	width: 174px;
	height: 17px;
}
.model-22 .marketing-box-two .title-wrap-3 .title-left .time {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.model-22 .marketing-box-two .more {
	text-align: center;
	height: 50px;
	line-height: 50px;
	border-top: 1px solid #EEEEEE;
}
.model-22 .marketing-box-two .more .span, .marketing-box-two .more .i {
	font-size: 12px;
	color: #909399;
}
</style>