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

<template>
<view class="model-20">
  <view class="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="goPintuan()">
        <view class="title-left">
          <image mode="aspectFit" class="img" :src="title_icon">
          <!---->
        </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="label">
                <view class="div label-person">
                  <text class="i iconfont">&#xe6f0;</text>
                  <text class="span">{{goods.member_count}}人团</text>
                </view>
                <view class="label-num">
                  <text>已拼{{goods.order_count}}件</text>
                </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="goPintuan()">
      <text class="span">更多拼团</text>
      <text class="i iconfont iconyoujiantou">
      </text>
    </view>
  </view>
</view>

</template>

<script>
	import {
	  env
	} from '../../../../static/config'
export default {
  name: 'Model20',
  data () {
    return {
    }
  },
  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/pintuan_style3_title.png'
  		}
  	}
  },
  methods: {
    productClick(goods_id) {
      uni.navigateTo({url: '/pages/home/goodsdetail/Goodsdetail?goods_id='+goods_id })
    },
	goPintuan(){
		uni.navigateTo({url:'/pages/home/pintuan/PintuanList'})
	}
  }
}
</script>

<style lang="scss" scoped>
	
.model-20 .marketing-box-two {
	padding: 20px 15px 5px;
	background-color: rgb(255, 255, 255);
	border-radius: 5px;
}
.model-20 .marketing-box-two .title-wrap {
	padding-bottom: 5px;
	display: flex;
	align-items: center;
}
.model-20 .marketing-box-two .title-wrap-2 {
	justify-content: space-between;
}
.model-20 .marketing-box-two .title-wrap-2 .title-left {
	width: 120px;
	height: 35px;
	line-height: 35px;
}
.model-20 .marketing-box-two .title-wrap .title-left .img {
	width: 100%;
	height: 100%;
}
.model-20 .marketing-box-two .title-wrap .title-right {
	font-size: 12px;
	color: rgb(144, 147, 153);
}
.model-20 .marketing-box-two .title-wrap .title-right .i {
	font-size: 12px;
}
.model-20 .marketing-box-two .list-wrap {
	flex-wrap: wrap;
	margin-top: 0px;
}
.model-20 .marketing-box-two .list-wrap .item {
	width: 100%;
	display: flex;
	height: 125px;
	box-sizing: border-box;
}
.model-20 .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-20 .marketing-box-two .list-wrap .img-wrap > .img {
	width: 100%;
	height: 100%;
}
.model-20 .marketing-box-two .list-wrap .img-wrap .hot {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 30px;
	height: 30px;
}
.model-20 .marketing-box-two .list-wrap .img-wrap .hot .div {
	width: 100%;
	height: 100%;
	position: relative;
}
.model-20 .marketing-box-two .list-wrap .img-wrap .hot .div .img {
	width: 100%;
	height: 100%;
}
.model-20 .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: rgb(255, 255, 255);
	position: absolute;
	top: 0px;
	left: 0px;
}
.model-20 .marketing-box-two .list-wrap .item .content {
	flex:1;
   padding: 15px 0px;
	border-bottom: 1px solid rgb(238, 238, 238);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.model-20 .marketing-box-two .list-wrap .item:last-child .content {
	border-bottom: 0px;
}
.model-20 .marketing-box-two .list-wrap .item .content .content-desc {
	height: 32px;
	margin-top: 0px;
	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-20 .marketing-box-two .list-wrap .label {
	display: flex;
	align-items: center;
}
.model-20 .marketing-box-two .list-wrap .label .div {
	height: 15px;
	line-height: 15px;
	border: 1px solid rgb(255, 69, 68);
	border-radius: 2px;
	margin-right: 5px;
}
.model-20 .marketing-box-two .list-wrap .label .label-person .i {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-color: rgb(255, 69, 68);
	font-size: 9px;
	color: rgb(255, 255, 255);
	text-align: center;
}
.model-20 .marketing-box-two .list-wrap .label .div .span {
	font-size: 10px;
	padding: 0px 5px;
	color: rgb(255, 69, 68);
}
.model-20 .marketing-box-two .list-wrap .progress .img .img-con {
	width: 77px;
	height: 10px;
	border-radius: 10px;
	background-color: rgb(253, 190, 108);
}
.model-20 .marketing-box-two .list-wrap .progress .num {
	font-size: 12px;
	color: rgb(144, 147, 153);
	margin-top: 9px;
}
.model-20 .marketing-box-two .list-wrap .bot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.model-20 .marketing-box-two .list-wrap .bot .content-price {
	display: flex;
	align-items: flex-end;
	font-size: 12px;
	color: #FF4544;
	font-weight: 600;
}
.model-20 .marketing-box-two .list-wrap .bot .content-price .span {
	font-size: 16px;
	margin-right: 5px;
}
.model-20 .marketing-box-two .list-wrap .bot .content-price .content-num {
	font-weight: 500;
	margin-top: 0px;
	font-size: 12px;
	line-height: 12px;
	color: rgb(144, 147, 153);
	text-decoration: line-through;
}
.model-20 .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-20 .marketing-box-3 {
	padding-bottom: 0px;
}
.model-20 .marketing-box-two .title-wrap-3 {
	justify-content: center;
}
.model-20 .marketing-box-two .title-wrap-3 .title-left {
	width: 174px;
	height: 37px;
	text-align: center;
	line-height: 37px;
}
.model-20 .marketing-box-two .more {
	text-align: center;
	height: 50px;
	line-height: 50px;
	border-top: 1px solid rgb(238, 238, 238);
}
.model-20 .marketing-box-two .more .span, .marketing-box-two .more .i {
	font-size: 12px;
	color: rgb(144, 147, 153);
}
</style>