<style scoped>
.card {
  width: 550px;
}
.tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  color: #fff;
}
.card-img {width: 272px;
height: 162px;
border-radius: 10px 0px 0px 10px;
}
.content {
  padding: 10px;
  width: 258px;
}
.title {
  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 flex">
    <div class="relative">
      <div class="tag">
        <i
          class="iconfont icondingweixiao q-icon notranslate"
          style="font-size: 14px; margin-right: 8px"
        ></i>
        <span>大阪·住宿</span>
      </div>
      <img
        class="card-img"
        src="https://imgfile.oytour.com/Upload/DMC/202110131151571540000000139.jpeg"
      />
    </div>
    <div class="content">
    <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>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  }
};
</script>