<template>
  <view class="hots">
    <image
      @click="tabdetail"
      class="indexhot"
      src="@/static/images/brank/mei1.jpg"
    ></image>
    <view class="hotborder">
      <view class="hotText1">{{ item.styleTag }}</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;
      if (this.ImageBool == false) {
        this.$u.toast(`已收藏款式`);
      } else {
        this.$u.toast(`已取消收藏`);
      }
    },
    methods: {
      // 点击切换心心选项
      tabImage() {
        this.ImageBool = !this.ImageBool;
      },
      // 跳转到详情
      tabdetail(item) {
        // console.log("KKK");
        this.$router.push("/pages/brands/detail?id=" + item.id);
        // this.$router.push("pages/brands/everyDay");
      },
    },
  }
</script>

<style lang="scss" scoped>
.whole {
  display: flex;
  flex-wrap: wrap;
}
.hots {
  height: 578rpx;
  width: 330rpx;
  margin-bottom: 20rpx;
  margin-right: 16rpx;
  // flex: 1;

  .indexhot {
    display: block;
    height: 434rpx;
    width: 330rpx;
    border-radius: 10rpx 10rpx 0 0;
  }

  .hotborder {
    height: 144rpx;
    // width: 193rpx;
    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>
