村友圈

src/mods/AppVillager/detail.vue

@@ -0,0 +1,162 @@
+<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>