konggang-city-miniprogram/pages/appeal/index.vue

<template>
  <view class="content">
    <div class="banner">
      <img :src="bannerSrc" alt="banner" />
    </div>
    <div class="menus flex">
      <div class="menu">
        <p class="logo">
          <img src="/static/appeal/myappeal.png" />
        </p>
        <div class="desc">我的诉求</div>
      </div>
      <div class="menu">
        <p class="logo">
          <img src="/static/appeal/putappeal.png" />
        </p>
        <div class="desc">提出诉求</div>
      </div>
    </div>
    <div class="otherAppealList">
      <div v-for="(otherAppeal,index) in otherAppealList" :key="index"> 
        <appealCard :otherAppeal="otherAppeal"></appealCard>
      </div>
    </div>
  </view>
</template>

<script>
import appealCard from './appealCard.vue'
export default {
  components:{
    appealCard
  },
  data() {
    return {
      bannerSrc: "/static/appeal/banner.png",
      otherAppealList: [
        {
          title: "航投大厦餐厅服务建议",
          name: "市场服务与监督管理局",
          msg: "尊敬的市民您好！空港市场监管分局已与餐厅负责人取得了电话联系，根据您所提出的建议，餐厅将有针对性的进行整改，加强……",
          image: "/static/appeal/avator.png",
        },
        {
          title: "拉土车夜间噪音问题整改诉求",
          name: "市场服务与监督管理局",
          msg: "尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输……",
          image: "/static/appeal/avator.png",
        },
      ],
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.content {
  width: 100%;
  height: 100vh;
  .banner {
    height: 25%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .menus {
    width: 80%;
    height: 15%;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 25rpx;
    transform: translateY(-60%);
    box-shadow: 0rpx 10rpx 5rpx rgb(212, 212, 212);
    .menu {
      .desc {
        font-weight: bolder;
        text-align: center;
      }
      .logo {
        text-align: center;
        img {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  .otherAppealList {
	  transform: translateY(-15%);
    .otherAppeal {
      margin: 5% 9%;
      .title {
        margin-bottom: 5%;
        font-size: 35rpx;
      }
      .details {
        .name {
          font-size: 30rpx;
          color: red;
        }
        .msg {
          font-size: 30rpx;
        }
        .icon {
          width: 60rpx;
          height: 60rpx;
          position: absolute;
          left: 1%;
        }
      }
    }
  }
}
</style>