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

<template>
  <div class="content">
    <div class="appealMsg">
      <div class="msg_content">
        <div class="title">诉求内容：</div>
        <div class="msg">
          5月13日晚在周公大道周陵中心幼儿团北侧200米（A区5排第二家）酒店订房间，夜间拉土车作业声音很大，建议有关部门可以将拉土车运营时间调整一下。或者为拉土车规划路线，避免在居民区及酒店宾馆临近路段行驶。
        </div>
      </div>
      <div class="info">
        <div class="flex">
          <div class="info_content">
            <span>咨询人：</span><span class="name">{{ info.name }}</span>
          </div>
          <div class="info_content">
            <span>电话：</span><span class="phone">{{ info.phone }}</span>
          </div>
        </div>
        <div class="info_content">
          <span>提交时间：</span><span class="time">{{ info.time }}</span>
        </div>
      </div>
    </div>
    <div class="one"></div>
    <div class="appealState">
      <div class="msg_content">
        <div class="title">处理进度：</div>
        <div class="msg">
            {{ info.state }}
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 0,
      info: {
        name: "樊**",
        phone: "153753****",
        time: "2021-05-14  09:32:20",
        state: "正在处理中……",
      },
    };
  },
  onLoad: function (e) {
    this.id = e.id;
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.title {
  font-weight: bolder;
  padding-bottom: 3%;
  font-size: 30rpx;
}
.name,
.phone,
.time {
  font-weight: 200;
}
.info_content {
  padding-left: 5%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 25rpx;
}
.content {
  padding: 2% 0;
  .one {
    height: 20rpx;
    margin: 3% 4%;
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 50%,
      rgb(206, 203, 203) 50%,
      rgb(207, 207, 207) 100%
    );
    background-size: 30rpx 1rpx;
    background-repeat: repeat-x;
  }
  .appealMsg {
    .msg_content {
      padding: 5%;
      margin: 1%;
      margin-bottom: 6%;
      border: 1px solid rgb(233, 229, 229);
      border-radius: 20rpx;
      .msg {
        text-indent: 2em;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        font-size: 25rpx;
      }
    }
  }
  .appealState {
    .msg_content {
      padding: 5%;
      margin: 1%;
      margin-bottom: 6%;
      border: 1px solid rgb(233, 229, 229);
      border-radius: 20rpx;
      .msg {
        text-indent: 2em;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        font-size: 25rpx;
      }
    }
  }
}
</style>