商品列表模板 ¶

<template>
  <view class="goods1-wrap">
    <view class="goods1-coupon-page">
      <view class="image"><image class="img" src="/static/template/goods_list/face.jpg"></image></view>
      <view class="content">
        <view class="title">澳天力针叶樱桃胶原蛋白粉水解粉肽精华粉含维C维E男女美容养颜粉</view>
        <view class="num s-row">
          <text class="tmprice">天猫价 ¥55.00</text>
          <text class="volume">已售88件</text>
        </view>
        <view class="money s-row">
          <text class="coupon-price">
            券后价
            <text>¥25.00</text>
          </text>
          <text class="quan">
            <i></i>
            30元券
            <i></i>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style>
.goods1-wrap {
  display: inline-block;
  padding: 10px 0;
}

.goods1-coupon-page {
  padding: 10px;
}

.goods1-coupon-page .image {
  float: left;
  width: 40%;
}

.goods1-coupon-page .image image {
  width: 120px;
  height: 120px;
  border-radius: 3px;
}

.goods1-coupon-page .content {
  float: right;
  width: 60%;
}

.goods1-coupon-page .content .title {
  color: #333;
  font-weight: 400;
  font-size: 16px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 42px;
  margin-bottom: 20px;
  overflow: hidden;
}

.goods1-coupon-page .content .num {
  color: #aaa;
  line-height: 40rpx;
  font-size: 26rpx;
  padding-top: 26rpx;
}

.goods1-coupon-page .content .num .tmprice {
  padding-right: 20rpx;
  margin-right: 20rpx;
  position: relative;
  z-index: 1;
  zoom: 1;
  display: inline-block;
}

.goods1-coupon-page .content .num .volume {
  float: right;
}

.goods1-coupon-page .content .money {
  height: 48rpx;
  font-size: 36rpx;
  margin-top: 10rpx;
}

.goods1-coupon-page .content .money .quan {
  padding: 0;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 0;
  overflow: hidden;
  float: right;
}

.goods1-coupon-page .content .money .quan {
  background: -moz-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -webkit-gradient(linear, left top, left right, color-stop(0, #ff5e5e), color-stop(100%, #ff927c));
  background: -webkit-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -o-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: -ms-linear-gradient(left, #ff5e5e 0, #ff927c 100%);
  background: linear-gradient(to left, #ff5e5e 0, #ff927c 100%);
  position: relative;
  z-index: 1;
  zoom: 1;
  font-style: normal;
  display: block;
  border-radius: 6rpx;
  -moz-border-radius: 6rpx;
  -webkit-border-radius: 6rpx;
  -o-border-radius: 6rpx;
  -ms-border-radius: 6rpx;
  font-size: 0.785rem;
  min-width: 3rem;
  text-align: center;
  padding: 2rpx 20rpx;
  color: #fff;
}

.goods1-coupon-page .content .money .quan:before {
  position: absolute;
  z-index: 1;
  zoom: 1;
  top: 50%;
  margin-top: -6rpx;
  background: #fff;
  display: block;
  width: 10rpx;
  height: 10rpx;
  content: '';
  border-radius: 20rpx;
  border: 2rpx solid #fff;
  left: auto;
  right: -8rpx;
}

.goods1-coupon-page .content .money .quan:after {
  position: absolute;
  z-index: 1;
  zoom: 1;
  top: 50%;
  margin-top: -3px;
  background: #fff;
  display: block;
  width: 10rpx;
  height: 10rpx;
  content: '';
  border-radius: 20rpx;
  border: 2rpx solid #fff;
  left: -8rpx;
}

.goods1-coupon-page .content .money .coupon-price {
  color: #fc4d52;
  font-size: 24rpx;
}

.goods1-coupon-page .content .money .coupon-price text {
  font-size: 32rpx;
  padding-left: 10rpx;
}
</style>

<template>
  <cv-block col="3" v-for="item in 3" :key="item">
    <view class="goods2-wrap">
      <view class="goods2-box-image-area">
        <view class="goods2-box-image-box">
          <image class="goods2-box-image" src="/static/template/goods_list/face.jpg"></image>
        </view>
      </view>
      <view class="goods2-box-label-area">
        <text class="goods2-box-price">￥9.99</text>
        <text class="goods2-box-label">拼团</text>
      </view>
    </view>
  </cv-block>
</template>
<script>
export default {
  props: {
    img: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    price: {
      type: String,
      default: '0.00'
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.goods2-wrap {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
.goods2-box-image-area {
  width: 100%;
  height: 0;
  padding-bottom: 80%;
  position: relative;
}
.goods2-box-image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.goods2-box-image {
  width: 100%;
  height: 100%;
}
.goods2-box-label-area {
  height: 22px;
  display: flex;
}
.goods2-box-price {
  width: calc(100% - 40px);
  background-color: #fc4d52;
  color: #fff;
  line-height: 22px;
  font-size: 13px;
  padding-left: 3px;
  box-sizing: border-box;
}
.goods2-box-label {
  background-color: #ffe7c9;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
  height: 22px;
  width: 40px;
}
</style>

<template>
  <view>
    <view class="goods4-area">
      <view class="goods4-image-area">
        <view class="goods4-image-box">
          <image class="goods4-image" src="/static/template/goods_list/face.jpg" mode="" />
        </view>
      </view>
      <view class="goods4-right-area">
        <view class="goods4-title-area">
          <view class="goods4-title-icon-area">
            <image class="goods4-title-icon" src="/static/template/goods_list/face.jpg" mode="" />
          </view>
          <text class="goods4-title-text">草莓味-零食大礼包网红爆款休闲充饥夜宵小吃饼干组合啷里格啷格啷</text>
        </view>
        <view class="goods4-business-area">
          <cv-icons class="goods4-business-icon" type="shop" size="12" color="#999999" />
          <text>草莓味旗舰店</text>
        </view>
        <view class="goods4-label-area">
          <view class="goods4-label-z-area">
            <view class="goods4-label-z-left">
              <text>赚</text>
            </view>
            <view class="goods4-label-z-right">
              <text>2.11元</text>
            </view>
          </view>
          <view class="goods4-label-q-area">
            <view class="goods4-label-q-left">
              <text>券</text>
            </view>
            <view class="goods4-label-q-right">
              <text>99.99元</text>
            </view>
          </view>
        </view>
        <view class="goods4-sales-area"><text>月销693万</text></view>
        <view class="goods4-price-area">
          <view class="goods4-price-q-area">
            <text class="goods4-price-q-l">券后</text>
            <text class="goods4-price-q-r">38</text>
          </view>
          <view class="goods4-price-y-area">
            <text>99</text>
          </view>
          <view class="goods4-sales2-area">1273人付款</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.goods4-area {
  width: 100%;
  border-radius: 5px;
  display: flex;
  padding: 5px;
}
/* 主图 */
.goods4-image-area {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  overflow: hidden;
}
.goods4-image-box {
  width: 100%;
  height: 100%;
}
.goods4-image {
  width: 100%;
  height: 100%;
}
/* 右侧区域 */
.goods4-right-area {
  width: calc(100% - 130px);
  padding-left: 10px;
  position: relative;
  /* min-height: 120px; */
}
/* 标题和标题图标 */
.goods4-title-area {
  line-height: 1.5em;
  font-size: 13px;
  margin-top: 5px;
  position: relative;
}

.goods4-title-icon-area {
  height: 18px;
  width: 18px;
  position: absolute;
}
.goods4-title-icon {
  height: 18px;
  width: 18px;
  border-radius: 3px;
}
.goods4-title-text {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-indent: 20px;
}
/* 任意字符 */
.goods4-business-area {
  margin-top: 5px;
  font-size: 10px;
  color: #999;
  max-height: 26px;
}
.goods4-business-icon {
  margin-right: 3px;
}
/* 标签 */
.goods4-label-area {
  height: 16px;
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.goods4-label-z-area,
.goods4-label-q-area {
  height: 16px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  line-height: 16px;
  margin-right: 5px;
}
.goods4-label-z-area {
  background-color: #fbe23f;
}
.goods4-label-z-left {
  color: #fbe23f;
  padding: 0 18px 0 8px;
  background: linear-gradient(-60deg, transparent 11px, #32332d 0);
}
.goods4-label-z-right {
  color: #32332d;
  padding-right: 5px;
}
.goods4-label-q-area {
  background-color: #fe4c48;
  color: #fff;
}
.goods4-label-q-left,
.goods4-label-q-right {
  padding: 0 5px;
}
.goods4-label-q-left {
  border-right-style: dashed;
}
/* 销量 */
.goods4-sales-area {
  font-size: 11px;
  color: #666666;
  margin-top: 5px;
}
/* 价格销量同行 */
.goods4-price-area {
  height: 24px;
  position: absolute;
  bottom: 4px;
}
.goods4-price-q-area {
  color: #fe4c48;
  margin-right: 5px;
  float: left;
  line-height: 24px;
}
.goods4-price-q-l {
  font-size: 12px;
}
.goods4-price-q-r {
  font-size: 16px;
  font-weight: bold;
}
.goods4-price-q-r::before {
  content: '￥';
  width: 12px;
  display: inline-block;
}
.goods4-price-y-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  text-decoration: line-through;
  float: left;
  padding-top: 3px;
}
.goods4-price-y-area::before {
  content: '￥';
  width: 11px;
  display: inline-block;
  text-decoration: line-through;
}
.goods4-sales2-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  align-self: flex-end;
  float: right;
  padding-top: 3px;
}
</style>

<template>
  <cv-block col="2" v-for="item in 2" :key="item">
    <view class="goods4-area">
      <view class="goods4-image-area">
        <view class="goods4-image-box">
          <image class="goods4-image" src="/static/template/goods_list/face.jpg" mode="" />
        </view>
      </view>
      <view class="goods4-title-area">
        <view class="goods4-title-icon-area">
          <image class="goods4-title-icon" src="/static/template/goods_list/face.jpg" mode="" />
        </view>
        <text class="goods4-title-text">草莓味-零食大礼包网红爆款休闲充饥夜宵小吃饼干组合啷里格啷格啷</text>
      </view>
      <view class="goods4-business-area">
        <cv-icons class="goods4-business-icon" type="shop" size="12" color="#999999" />
        <text>草莓味旗舰店</text>
      </view>
      <view class="goods4-label-area">
        <view class="goods4-label-z-area">
          <view class="goods4-label-z-left">
            <text>赚</text>
          </view>
          <view class="goods4-label-z-right">
            <text>2.11元</text>
          </view>
        </view>
        <view class="goods4-label-q-area">
          <view class="goods4-label-q-left">
            <text>券</text>
          </view>
          <view class="goods4-label-q-right">
            <text>99.99元</text>
          </view>
        </view>
      </view>
      <view class="goods4-sales-area"><text>月销693万</text></view>
      <view class="goods4-price-area">
        <view class="goods4-price-q-area">
          <text class="goods4-price-q-l">券后</text>
          <text class="goods4-price-q-r">38</text>
        </view>
        <view class="goods4-price-y-area">
          <text>99</text>
        </view>
        <view class="goods4-sales2-area">1273人付款</view>
      </view>
    </view>
  </cv-block>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
.goods4-area {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}
/* 主图 */
.goods4-image-area {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.goods4-image-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.goods4-image {
  width: 100%;
  height: 100%;
}
/* 标题和标题图标 */
.goods4-title-area {
  line-height: 1.5em;
  font-size: 13px;
  margin-top: 5px;
  position: relative;
}

.goods4-title-icon-area {
  height: 18px;
  width: 18px;
  position: absolute;
}
.goods4-title-icon {
  height: 18px;
  width: 18px;
  border-radius: 3px;
}
.goods4-title-text {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-indent: 20px;
}
/* 商户 */
.goods4-business-area {
  margin-top: 5px;
  font-size: 10px;
  color: #999;
}
.goods4-business-icon {
  margin-right: 3px;
}
/* 标签 */
.goods4-label-area {
  height: 16px;
  display: flex;
  font-size: 12px;
  margin-top: 5px;
}
.goods4-label-z-area,
.goods4-label-q-area {
  height: 16px;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
  line-height: 16px;
  margin-right: 5px;
}
.goods4-label-z-area {
  background-color: #fbe23f;
}
.goods4-label-z-left {
  color: #fbe23f;
  padding: 0 18px 0 8px;
  background: linear-gradient(-60deg, transparent 11px, #32332d 0);
}
.goods4-label-z-right {
  color: #32332d;
  padding-right: 5px;
}
.goods4-label-q-area {
  background-color: #fe4c48;
  color: #fff;
}
.goods4-label-q-left,
.goods4-label-q-right {
  padding: 0 5px;
}
.goods4-label-q-left {
  border-right-style: dashed;
}
/* 销量 */
.goods4-sales-area {
  font-size: 11px;
  color: #666666;
  margin-top: 5px;
}
/* 价格销量同行 */
.goods4-price-area {
  height: 24px;
}
.goods4-price-q-area {
  color: #fe4c48;
  margin-right: 5px;
  float: left;
  line-height: 24px;
}
.goods4-price-q-l {
  font-size: 12px;
}
.goods4-price-q-r {
  font-size: 16px;
  font-weight: bold;
}
.goods4-price-q-r::before {
  content: '￥';
  width: 12px;
  display: inline-block;
}
.goods4-price-y-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  text-decoration: line-through;
  float: left;
  padding-top: 3px;
}
.goods4-price-y-area::before {
  content: '￥';
  width: 11px;
  display: inline-block;
  text-decoration: line-through;
}
.goods4-sales2-area {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  align-self: flex-end;
  float: right;
  padding-top: 3px;
}
</style>