<style scoped>
.card {
  width: 272px;
  /* background-color: #fff; */
}
.address {
  position: absolute;
  left: 14px;
  top: 14px;
  color: #fff;
}
.like {
  position: absolute;
  right: 14px;
  top: 14px;
  color: #fff;
}
.card-img {
  width: 272px;
height: 162px;
border-radius: 10px;
}
.title {
  margin-top: 17px;
  font-size: 16px;
  line-height: 20px;
  height: 40px;
}
.tag-item {
height: 24px;
background: #EFF7FE;
border-radius: 4px;
padding: 0 10px;
font-size: 12px;
margin-right: 10px;
color: #36A1FA;
}
</style>
<template>
  <div class="card">
    <div class="relative">
      <div class="address">
        <i
          class="iconfont icondingweixiao q-icon notranslate"
          style="font-size: 14px; margin-right: 8px"
        ></i>
        <span>大阪·住宿</span>
      </div>
      <div class="like">
        <i
          class="iconfont icondingweixiao q-icon notranslate"
          style="font-size: 14px; margin-right: 8px"
        ></i>
      </div>
      <img
        class="card-img"
        src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
      />
    </div>
    <div class="title ellipsis-2">是否私联粉丝沙发萨芬很多事第三方介绍很舒服舒服是否舒服舒服所发生的多多多多多多多多多多多多多多多多多多是否舒服舒服盛世芳华</div>
    <div>
      <i
        class="iconfont icondingweixiao q-icon notranslate"
        style="font-size: 14px; margin-right: 8px"
      ></i>
      4.6
    </div>
    <div>
      <span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
    </div>
    <div class="bold mt">
      CNY
      <span>200000</span>
      <span class="ml-5 normal">起</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>