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

<template>
<view class="model-21">
  <view class="marketing-wrap marketing-wrap-two" :style="{backgroundColor:editablePageConfig.editable_page_config_content.back_color}">
    <view class="marketing-box">
      <view>
        <view class="title title-3" v-if="editablePageConfig.editable_page_config_content['if_show_title_icon']==1" @click="goPresale()">
          <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="content-desc">{{goods.goods_name}}</view>
            <view class="content-price">¥
              <text class="span">{{parseFloat(goods.goods_promotion_price)}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
 
</template>

<script>
import { env } from '../../../../static/config'
export default {
  name: 'Model21',
  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/presale_style3_title.png'
  		}
  	}
  },
  methods: {
    productClick(goods_id) {
      uni.navigateTo({url: '/pages/home/goodsdetail/Goodsdetail?goods_id='+goods_id })
    },
	goPresale(){
		uni.navigateTo({url:'/pages/home/presell/PresellList'})
	}
  }
}
</script>

<style lang="scss" scoped>
.model-21 .list-wrap {
   display: flex;
	justify-content: space-between;
	margin-top: 15px;
}
.model-21 .list-wrap .item {
   display: inline-block;
	width: 100px;
}
.model-21 .list-wrap .item .img-wrap{
   width: 100px;
   height: 100px;
   border-radius: 5px;
	overflow: hidden;
}
.model-21 .list-wrap .item .img-wrap .img{
   max-width: 100%;
   max-height: 100%;
}
.model-21 .list-wrap .item .content{
   width: 100%;
}
.model-21 .list-wrap .item .content .content-desc {
   width: 100%;
	font-size: 14px;
	line-height: 14px;
	margin-top: 10px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.model-21 .list-wrap .item .content .content-price {
   font-size: 12px;
	color: #FF4544;
	margin-top: 10px;
	height: 16px;
	font-weight: 600;
}
.model-21 .list-wrap .item .content .content-price .span {
   font-size: 16px;
	line-height: 16px;
}
.model-21 .list-wrap .item .content .content-num {
   font-size: 12px;
	line-height: 12px;
	margin-top: 10px;
	color: #909399;
}
.model-21 .marketing-wrap-two {
	padding: 20px 15px;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: 5px;
	position: relative;
   /* height: 255px;
	*/
}
.model-21 .marketing-wrap-two .marketing-box {
	position: unset;
	padding: 0;
}
.model-21 .marketing-wrap-two .marketing-box .title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 5px;
}
.model-21 .marketing-wrap-two .marketing-box .title .title-left {
	width: 109px;
	height: 37px;
	line-height: 37px;
}
.model-21 .marketing-wrap-two .marketing-box .title .title-left .img {
   /* width: auto;
	max-width: 100%;
	max-height: 100%;
	*/
	width: 100%;
	height: 100%;
}
.model-21 .marketing-wrap-two .marketing-box .title-3 {
	justify-content: center;
}
.model-21 .marketing-wrap-two .marketing-box .title-3 .title-left {
	width: 174px;
	height: 37px;
	text-align: center;
}
.model-21 .marketing-wrap-two .marketing-box .title .title-right {
	font-size: 12px;
	color: #909399;
}
.model-21 .marketing-wrap-two .marketing-box .title .title-right .i {
	font-size: 12px;
}
.model-21 .marketing-wrap-two .list-wrap .item {
	width: 95px;
}
.model-21 .marketing-wrap-two .list-wrap .item .content {
	position: relative;
}
.model-21 .marketing-wrap-two .list-wrap .item .img-wrap {
	width: 95px;
	height: 95px;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}
.model-21 .marketing-wrap-two .list-wrap .item .img-wrap .bg {
	position: absolute;
	width: 95px;
	height: 30px;
	bottom: 0;
}
.model-21 .marketing-wrap-two .list-wrap .item .img-wrap .bg .img {
	width: 100%;
}
.model-21 .marketing-wrap-two .list-wrap .item .img-wrap .num {
	width: 95px;
	position: absolute;
	bottom: 5px;
	padding-left: 10px;
	font-size: 12px;
	line-height: 1;
	color: #FFFFFF;
}
.model-21 .marketing-wrap-two .list-wrap .item .original-price {
	font-size: 12px;
	color: #909399;
	line-height: 1;
	margin-top: 10px;
	text-decoration: line-through;
}
.model-21 .marketing-wrap-two .list-wrap .item .content-btn {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	background-color: #FF4544;
}
.model-21 .marketing-wrap-two .list-wrap .item .content-btn .i {
	color: #FFFFFF;
	font-size: 13px;
}
</style>