dvcp_v2_wechat_app/src/mods/AppVillager/detail.vue

<template>
  <div class="Page">
    <div class="top">未通过原因：请勿带情绪进行评论请勿带情绪进行评论请勿带情绪进行评论</div>

    <div class="cardTop">
      <img src="../../static/workOnline/池夏2.jpg" alt="" />

      <div class="rightTop">
        <div class="leftStaus">
          <span class="names">雷洋</span>

          <span class="titless">美丽庭院 | 2020-10-28 12</span>
        </div>

        <!-- :style="{ class: item.auditStatus == 0 ? 'status0' : item.auditStatus == 1 ? 'status1' : 'status2' }"  -->
        <div class="status status0" v-if="tabIndex == 3">审核中</div>
      </div>
    </div>

    <div class="cardConts">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>

    <div class="cardImg">
      <img src="../../static/workOnline/池夏2.jpg" alt="" v-for="(items, i) in 4" :key="i" />
    </div>

    <div class="cardBot">
      <div class="icon">
        <u-icon name="map-fill"></u-icon>
        <span>东湖生态旅游风景区听涛景区</span>
      </div>

      <div class="icon" v-if="tabIndex != 3">
        <div class="img1">
          <img src="../../static/AppVillager/1.png" alt="" class="img11" />
        </div>

        <div class="rightFlex">
          <img src="../../static/AppVillager/2.png" alt="" class="img2" />
          <img src="../../static/AppVillager/3.png" alt="" class="img3" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'detail',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  onLoad() {},
  onShow() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.Page {
  background: #fff;
  .top {
    padding: 24px;
    font-size: 26px;
    color: #ff4466;
    background: #fff5f7;
    border-radius: 16px;
    margin: 32px 0;
  }

  .cardTop {
    display: flex;
    img {
      width: 96px;
      height: 96px;
      border-radius: 50%;
    }
    .rightTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .leftStaus {
        display: flex;
        flex-direction: column;
        margin-left: 16px;
        .names {
          font-size: 32px;
          font-weight: 500;
        }
        .titless {
          font-size: 26px;
          color: #6e727a;
          margin-top: 1px;
        }
      }
      .status {
        font-size: 28px;
      }
      .status0 {
        color: #42d784;
      }
      .status1 {
        color: #ff4466;
      }
      .status2 {
        color: #ff883c;
      }
    }
  }

  .cardConts {
    margin-top: 24px;
    font-size: 32px;
  }

  .cardImg {
    margin-top: 24px;
    img {
      width: 226px;
      height: 226px;
      margin-right: 4px;
    }
    img:nth-child(3n + 0) {
      margin-right: 0;
    }
  }

  .cardBot {
    margin-top: 24px;
    .icon {
      padding: 8px 32px 8px 16px;
      background: #eff1f3;
      border-radius: 28px;
    }
    .icon {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .img1 {
        width: 60%;
        .img11 {
          width: 48px;
          height: 48px;
        }
      }
      .rightFlex {
        display: flex;
        justify-content: space-between;
        .img2,
        .img3 {
          width: 48px;
          height: 48px;
        }
      }
    }
  }
}
</style>