dvcp_v2_wxcp_app/src/apps/AppWalkask/components/detail.vue

<template>
  <div class="detail">
    <u-navbar title="走访详情" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :border-bottom="false" :background="backgroundNavbar"> </u-navbar>

    <div class="header-top">
      <div class="hint">花园小区1栋101脱贫攻坚走访——沙堡村李维民</div>

      <div class="walk-item">
        <span>走访对象：</span>
        <span>李维民</span>
      </div>

      <div class="walk-item">
        <span>现实状态：</span>
        <span>李维民</span>
      </div>

      <div class="walk-item">
        <span>走访人员：</span>
        <span>李维民</span>
      </div>

      <div class="walk-item">
        <span>走访时间：</span>
        <span>2021-12-28 14:00</span>
      </div>
    </div>

    <div class="header-middle">
      <div class="hint-con">本次议事会通过“7步议事法”即收集意见、确认议题、制定方案、发布公告、组织协商、结果运用、反馈公示的模拟方式，进行协商讨论，并教授议事会成员自如运用议事措施开展后续落地计划的学习性和功能性会议。 组织协商、结果运用、反馈公示的模拟方式，进行协商讨论，并教授议事会成员自如运用议事措施开展后续落地计划的线上学习性和功能性会议。作为基层民主自治的新亮点，已经全面铺开的互联网+“议事大厅”使得三联村成功走出了一条集思广益、民主决策和村民自治的新路子。</div>

      <div class="imgs">
        <img src="../components/images/天使彦5.jpg" alt="" />
        <img src="../components/images/天使彦5.jpg" alt="" />
        <img src="../components/images/天使彦5.jpg" alt="" />
        <img src="../components/images/天使彦5.jpg" alt="" />
      </div>
    </div>

    <AiBack></AiBack>
  </div>
</template>

<script>
import AiBack from '../../../components/AiBack.vue'

export default {
  name: 'detail',
  components: { AiBack },
  props: {},
  data() {
    return {
      backgroundNavbar: {
        backgroundColor: '#3975C6',
      },
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  .header-top {
    background: #3975c6;
    padding: 24px 32px 32px;
    .hint {
      font-size: 40px;
      font-weight: 500;
      color: #ffffff;
    }
    .walk-item {
      font-size: 28px;
      color: #d7e3f3;
      margin-top: 16px;
    }
  }

  .header-middle {
    background: #fff;
    padding: 32px 32px 32px 32px;
    .hint-con {
      font-size: 32px;
      color: #666666;
    }
    .imgs {
      margin: 32px 0 48px 0;
      img {
        width: 218px;
        height: 218px;
        margin-right: 16px;
      }
      img:nth-child(3n + 0) {
        margin-right: 0;
      }
    }
  }
}
</style>