mrr.sj.front/components/hot-card/hot-card.vue

<template>
  <view class="hot-card" :style="{backgroundImage:`url(${bg})`}">
    <view class="hot-card-footer">
      <view class="hot-card-footer__left">
        <image
		mode="widthFix"
          class="hot-card-footer__left__icon"
              :src="titleImg"
            ></image>
        <!-- <view class="hot-card-footer__left__text1">特价团</view> -->
        <view class="hot-card-footer__left__text2">活动火热进行中</view>
      </view>
      <view class="hot-card-footer__right" @click="$emit('toMore')">
        更多
        <image
          class="hot-card-footer__right__icon"
          src="@/static/images/shop/pintuan/right_gray.png"
        />
      </view>
    </view>
    <view class="hot-card-body">
      <view
        v-for="(item, index) in info"
        :key="index"
        class="hot-card-body-item"
        @click="$emit('goDetail', item.server_id)"
      >
        <view class="hot-card-body-item-box">
          <image
            :mode="`aspectFill`"
            :src="item.photo[0]"
            class="hot-card-body-item-box-img"
          ></image>
          <view class="hot-card-body-item-box-text" :style="{backgroundImage:`url(${lsBg})`}" :class="{'long-font-szie':getValueLength(formatPriceNumber(item.server_price - item.price)) >=7}">
           <image
              :mode="`aspectFill`"
              src="@/static/images/shop/pintuan/jiantou.png"
              class="hot-card-body-item-box-text-img"
            ></image>
            <text> 立省<text class="num_medium_text">{{ formatPriceNumber(item.server_price - item.price) }}</text>元</text>
          </view>
        </view>
        <view class="hot-card-body-item-price num_medium_text"
          >￥ <text style="font-size: 36rpx">{{ item.price }}</text></view
        >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "hotCard",
  props: {
    info: {
      type: Array,
      default: () => [],
    },
	bg:{
		type: String,
		default:"/static/images/shop/pintuan/bj3.png",
	},
	titleImg:{
		type: String,
		default:"/static/images/shop/pintuan/tjt.png",
	},
	lsBg:{
		type: String,
		default:"static/images/shop/pintuan/bottomBj.png",
	}
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.hot-card {
  width: 702rpx;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  margin: 0 24rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    &__left {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 15rpx;
      &__icon {
        width: 108rpx;
        height: 44rpx;
      }
      &__text1 {
        font-family: "shuHeiTi", sans-serif;
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      &__text2 {
        padding: 0 12rpx;
        background: linear-gradient(339deg, #fff4f8 0%, #fef2f6 100%);
        border-radius: 27rpx;
        border: 1rpx solid #fba9bb;
        font-weight: 500;
        font-size: 24rpx;
        color: #FF4767;
        text-align: left;
        font-style: normal;
      }
    }

    &__right {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 33rpx;
      text-align: left;
      font-style: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      &__icon {
        width: 10rpx;
        height: 18rpx;
        margin-left: 10rpx;
      }
    }
  }
  .hot-card-body {
    display: flex;
    flex-wrap: nowrap;
    gap: 24rpx;
    .hot-card-body-item {
      width: 198rpx;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      .hot-card-body-item-box {
        height: 244rpx;
        width: 198rpx;
        border-radius: 24rpx;
        overflow: hidden;
        position: relative;
        .hot-card-body-item-box-img {
          border-radius: 24rpx;
         height: 244rpx;
         width: 198rpx;
        }
        .hot-card-body-item-box-text {
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 37rpx;
          text-align: left;
          font-style: normal;
          font-style: normal;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-position: top;
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 5rpx 0;
          .hot-card-body-item-box-text-img {
            width: 18rpx;
            height: 25rpx;
            margin-right: 4rpx;
          }
        }
		.long-font-szie{
			font-size: 20rpx;
		}
      }
      .hot-card-body-item-price {
        margin-top: 10rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FF4767;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>