product_wx/pages/subPackages/minePages/feedback_detail.vue

<template>
    <div class="feedbackDetail">
      <div class="myRecord">
        <div class="detailTitle">我的反馈</div>
        <div class="infoBox">
          <span class="info">园区道路问题一直没有解决，遇到下雨天就容易造成积水的情形，请园区尽快处理。</span>
          <span class="infoImgBox">
            <img src="./image/msgIcon.png" class="infoImg" v-for="item in 5">
          </span>
        </div>
      </div>
      <div class="myRecord">
        <div class="detailTitle">回复内容</div>
        <div class="infoBox">
          <span class="info">您反映的问题，我们已经受理，并且将想关问题进行了工作安排，预计3个工作日会有具体的工作人员联系您。</span>
        </div>
        <div class="handleBox">
          <div class="handleItem">
            <span class="handleTitle">受理企业</span>：
            <span class="handleInfo">受理人所在集团名称</span>
          </div>
          <div class="handleItem">
            <span class="handleTitle">受理人</span>：
            <span class="handleInfo">王斌-13921168766</span>
            <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
          </div>
          <div class="handleItem">
            <span class="handleTitle">受理时间</span>：
            <span class="handleInfo">2024-1-13 15:23</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "feedbackDetail"
}
</script>

<style lang="scss">
    .feedbackDetail{
      .myRecord{
        margin: 24rpx 0 34rpx 0;
        padding: 32rpx 32rpx;
        box-sizing: border-box;
        background: white;
        .detailTitle{
          color: #18172A;
          font-size: 32rpx;
          font-weight: 600;
        }
        .infoBox{
          width: 686rpx;
          padding: 24rpx;
          background: #F5F7FA;
          border-radius: 8rpx;
          box-sizing: border-box;
          margin-top: 16rpx;
          display: flex;
          flex-direction: column;
          .info{
            color: #666666;
            font-size: 28rpx;
            line-height: 44rpx;
          }
          .infoImgBox{
            display: flex;
            flex-wrap: wrap;
          }
          .infoImg{
            width: 180rpx;
            height: 180rpx;
            margin: 16rpx;
          }
        }
        .handleBox{
          margin-top: 32rpx;
          display: flex;
          flex-direction: column;
          padding: 24rpx 0;
          border-top: 1px solid #E8EDF5;;
          .handleItem{
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;
            .handleTitle{
              display: inline-block;
              width: 140rpx;
              color: #18172A;
              font-size: 28rpx;
              text-align: justify;
              text-align-last: justify;
            }
            .handleInfo{
              color: #666666;
              font-size: 28rpx;
            }
            .phoneIcon{
              width: 48rpx;
              height: 48rpx;
              margin-left: 48rpx;
            }
          }
        }
      }
    }
</style>