</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>