<template>
  <div class="InteractInfo">
    <!-- 图片盒子 -->
    <div class="title">
      <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
        <van-swipe-item
          @click="lookImg(require(`@/assets/img/interact/1/row${i}.png`))"
          v-for="i in 4"
          :key="i"
        >
          <img
            class="bacImg"
            v-lazy="require(`@/assets/img/interact/1/row${i}.png`)"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 畅游芜湖 -->
    <div class="titLoc">
      <div class="ll">
        <img src="../../../assets/img/interact/user.png" alt="" />
      </div>
      <div class="rr">
        <h3>畅游芜湖</h3>
        <p><van-icon name="location" />安徽省芜湖市镜湖区北京西路44号</p>
      </div>
    </div>
    <!-- 文字内容 -->
    <div class="txt">
      <h3>芜湖虾仔面</h3>
      <p>
        芜湖人最爱吃虾籽面，以前在困难时期，能吃上一碗虾籽面绝对是真正的奢侈享受，常有人在生病或生日时慨叹一句：“要是有碗虾籽面吃就好了。”而虾籽面成了人人能吃得起的平价小吃，但质量和细节一如既往的讲究，因此成为江城老百姓心中的代表美食，并且还入选了安徽省非物质文化遗产。
      </p>
      <p>
        虾仔面是采用长江中青虾的籽，配以多种佐料，制成膏汤，再加手工揉制的小刀面，煮制而成。面有韧性，味极鲜美，营养价值高。
      </p>
      <div class="lastInfo">
        <div>#美食</div>
        <p>2022.11.03 16:13</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
export default {
  name: "InteractInfo",
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    lookImg(url) {
      ImagePreview({
        images: [url],
        showIndex: false,
      });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.InteractInfo {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 20px 15px;
  .title {
    width: 100%;
    height: 200px;
    position: relative;
    .my-swipe {
      width: 100%;
      height: 100%;
    }

    .my-swipe .van-swipe-item {
      border-radius: 8px;
    }

    .bacImg {
      border-radius: 8px;
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }

    /deep/.van-swipe__indicators {
      bottom: 5px;
    }

    /deep/.van-swipe__indicator {
      opacity: 0.6;
    }

    /deep/.van-swipe__indicator--active {
      opacity: 1;
    }
  }
  .titLoc {
    display: flex;
    margin: 20px 0;
    .ll {
      margin-right: 10px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    .rr {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3 {
        font-size: 16px;
      }
      p {
        font-size: 14px;
        color: #868686;
      }
    }
  }
  .txt {
    h3 {
      font-size: 16px;
      margin-bottom: 12px;
    }
    p {
      font-size: 14px;
      margin-bottom: 12px;
      line-height: 24px;
      color: #5c5c5c;
    }
    .lastInfo {
      margin-top: 22px;
      color: #868686;
      display: flex;
      align-items: center;
      & > div {
        margin-right: 8px;
        font-size: 14px;
        border-radius: 15px;
        border: 1px solid #868686;
        min-width: 60px;
        padding: 0 10px;
        height: 30px;
        line-height: 28px;
      }
      & > p {
        font-size: 12px;
        margin: 0;
      }
    }
  }
}
</style>