<template>
  <view class="hots">
    <image
      @click="tabdetail"
      class="indexhot"
      src="../../../static/images/brank/mei1.jpg"
    ></image>
    <view class="hotborder">
      <view class="hotText1">男装-上装-青年-时尚休闲</view>
      <view class="hotText2">
        <image
          class="iconhot"
          src="../../../static/images/brank/mei1.jpg"
        ></image>
        <text class="wen">我的文字是dsadasdasddsads</text>
        <image
          class="iconLove"
          src="../../../static/images/brank/blackxin.png"
          v-if="ImageBool"
          @click="tabImage"
        ></image>
        <image
          class="iconLove"
          src="../../../static/images/brank/lightxin.png"
          v-else
          @click="tabImage"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 爱心切换的bool
      ImageBool: true,
    };
  },
  methods: {
    // 点击切换心心选项
    tabImage() {
      this.ImageBool = !this.ImageBool;
    },
    // 跳转到详情
    tabdetail() {
      this.$router.push("pages/brands/detail?id=2");
    },
  },
};
</script>

<style lang="scss" scoped>
.hots {
  height: 578rpx;
  width: 330rpx;
  margin-bottom: 20rpx;
  .indexhot {
    display: block;
    height: 434rpx;
    width: 330rpx;
    border-radius: 10rpx 10rpx 0 0;
  }
  .hotborder {
    height: 144rpx;
    border: 2rpx solid #e3e1e0;
    // border-top: 0rpx !important;
    border-radius: 0 0 10rpx 10rpx;
  }
  .hotText1 {
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    margin: 24rpx 28rpx 0 20rpx;
  }
  .hotText2 {
    width: 100%;
    // background-color: red;
    margin-top: 16rpx;
    display: flex;
    align-items: center;
    // margin: 24rpx 0rpx 0 20rpx;
    .iconhot {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
    }
    .wen {
      width: 192rpx;
      font-size: 24rpx;
      margin-left: 10rpx;

      overflow: hidden; /*超出部分隐藏*/
      white-space: nowrap; /*禁止换行*/
      text-overflow: ellipsis;
    }
    .iconLove {
      width: 36rpx;
      height: 32rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
