epmet-work-pc/src/views/dataBoard/satisfactionEval/dissatisfied/detail.vue

<template>
  <el-dialog
      class="dissatisfied-detail"
      title=""
      :modal="false"
      :visible.sync="dialogVisible"
      width="1118px"
      :before-close="handleClose">
    <div class="content">
      <div class="main-title">
        <Title text="不满意事项详情" noBg/>
      </div>
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="sub-title">事项详情</div>
          <div class="detail">
            <p>
              小区垃圾急需要处理，垃圾桶旁边垃圾堆积严重，现在已经影响居民的日常生活和出行，望有关部门能够重视。
            </p>
            <ul>
              <li><span>事项来源：</span>省满意度调查</li>
              <li><span>事项类型：</span>生态环境</li>
              <li><span>所属月份：</span>2023-09</li>
              <li><span>所属社区：</span>XXX社区</li>
              <li><span>提交人：</span>张**</li>
              <li><span>提交人电话：</span>133</li>
            </ul>
          </div>
        </el-col>
        <el-col :span="10" :offset="4">
          <div class="sub-title">历史不满意事项</div>
          <div class="number-list">
            <div class="number-item">
              <div class="text">12345投诉</div>
              <div class="num">
                <span class="orange">39</span>
                人
              </div>
            </div>
            <div class="number-item">
              <div class="text">省满意度调查</div>
              <div class="num">
                <span class="green">102</span>
                人
              </div>
            </div>
            <div class="number-item">
              <div class="text">社区满意度自评</div>
              <div class="num">
                <span class="light">273</span>
                人
              </div>
            </div>
          </div>
          <div class="sub-title">回访记录</div>
          <div class="log">
            <div class="log-item" v-for="(item,index) in 3">
              <div class="name">杨建国（网格长）</div>
              <div>2023-08-17</div>
              <div>上门回访 <i class="el-icon-arrow-right"></i></div>
            </div>
          </div>

        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import Title from "@/views/dataBoard/satisfactionEval/components/Title"

export default {
  name: "DissatisfiedDetail",
  components: {Title},
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
    },
    open() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.dissatisfied-detail {
  /deep/ .el-dialog {
    background: url("@/assets/images/manyidu/dialog_bg.png") no-repeat left top;
    width: 1118px;
    height: 506px;
    color: #fff;

    .el-dialog__header {
      border-bottom: none !important;
    }

    .el-dialog__headerbtn {
      top: 30px;
      right: 30px;

      .el-dialog__close {
        color: #fff;
      }
    }
  }

  .content {
    padding: 0 64px;
  }

  .main-title {
    margin-bottom: 40px;
  }

  .sub-title {
    background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 22px;
    padding-left: 26px;
    margin-bottom: 20px;
  }

  .detail {
    p {
      font-size: 14px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 32px;
      margin: 0 0 10px;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    li {
      color: #FFFFFF;
      line-height: 28px;
      span {
        color: #9CB4D3
      }
    }
  }

  .number-list {
    padding-left: 26px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .text {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      margin-bottom: 17px;
    }
    .num {
      font-size: 14px;
      font-weight: 400;
      color: #A3B9DA;
      span {
        font-size: 32px;
        font-weight: bold;
        font-style: italic;
      }
    }
  }
  .orange {
    color: #FFB73C;
  }
  .green {
    color: #08EBAE;
  }
  .light {
    color: #7FCEFF;
  }
  .log {
    padding-left: 26px;
    .log-item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      background: url("@/assets/images/manyidu/hf_line.png") bottom center no-repeat;
      padding: 9px 0;
      .name {
        flex: 0 0 33.33333%;
      }
    }
  }

}
</style>