优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

 src/components/detail/index.vue

@@ -1,124 +1,85 @@
<template>
  <div class="view">
    <div class="view-data">
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 问题类型：</label>
          <span class="data-detail">{{
            <el-descriptions class="margin-top" :column="2"  border>
                <el-descriptions-item label="问题类型">{{
            getCategoryLabel(baseCase.category)
          }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 大类名称：</label>
          <span class="data-detail">{{
                }}</el-descriptions-item>

                <el-descriptions-item label="事发地点">{{
                    baseCase.site
                }}</el-descriptions-item>

                <el-descriptions-item label="大类名称"
                    ><span class="data-detail">{{
            baseCase.violationsVO.categoryText
          }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 小类名称：</label>
          <span class="data-detail">{{ baseCase.violationsVO.typeText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 事件等级：</label>
          <span class="data-detail">{{ baseCase.violationsVO.gradeText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 案由：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.actionCause
          }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 所属街道：</label>
          <span class="data-detail">{{ baseCase.streetText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 所属社区：</label>
          <span class="data-detail">{{ baseCase.communityText }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 事发地点：</label>
          <span class="data-detail">{{ baseCase.site }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 商铺名称：</label>
          <span class="data-detail">{{ baseCase.violationsVO.shopName }}</span>
        </div>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 问题描述：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.description
          }}</span>
        </div>
      </div>
      <div class="data-user">
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 反映人：</label>
            <span class="data-detail">{{
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="商铺名称"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.shopName
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="小类名称"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.typeText
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="反映人"
                    ><span class="data-detail">{{
              baseCase.violationsVO.informant
            }}</span>
          </div>
        </div>
        <div class="data-item">
          <div class="data-item__right">
            <label class="data-title"> 联系方式：</label>
            <span class="data-detail">{{
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="事件等级"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.gradeText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="联系方式"
                    ><span class="data-detail">{{
              baseCase.violationsVO.informantPhoneCode
            }}</span>
          </div>
        </div>
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 身份证号：</label>
            <span class="data-detail">{{
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="案由"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.actionCause
                    }}</span></el-descriptions-item
                >

                <el-descriptions-item label="身份证号"
                    ><span class="data-detail">{{
              baseCase.violationsVO.informantIdCard
            }}</span>
          </div>
        </div>
      </div>
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="所属街道"
                    ><span class="data-detail">{{
                        baseCase.streetText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="所属社区"
                    ><span class="data-detail">{{
                        baseCase.communityText
                    }}</span></el-descriptions-item
                >
                <el-descriptions-item label="问题描述"
                    ><span class="data-detail">{{
                        baseCase.violationsVO.description
                    }}</span></el-descriptions-item
                >
            </el-descriptions>
    </div>
    <div class="view-process">
      <div class="process-header">
        <div
          class="process-title-item"
                <el-button
                    :type="activeIndex === item.index ? 'primary' : ''"
          v-for="item in titleList"
          :key="item.title"
          @click="changeComponent(item.index)"
        >
          <div
            :class="[
              'process-title',
              activeIndex === item.index ? 'title-active' : '',
            ]"
                    {{ item.title }}</el-button
          >
            {{ item.title }}
          </div>
          <div
            :class="[
              'under-line',
              activeIndex === item.index ? 'line-active' : '',
            ]"
          ></div>
        </div>
      </div>
      <div class="show-item">
        <div class="show-wrap">
@@ -208,21 +169,22 @@
</script>
<style lang="scss" scoped>
.view {
  display: flex;
    // display: flex;
  padding: 20px;

  .view-data {
    color: #4b9bb7;
    // flex: 4;
    padding: 0 30px 0 20px;
    width: 480px;
        // width: 480px;
    .data-item {
      display: flex;
      justify-content: space-between;
      line-height: 40px;
    }

    border: 1px solid #17324c;
        // border: 2px solid #ccc;
        border-radius: 5px;
    .data-title {
      line-height: 1.8;
      width: 70px;
@@ -244,7 +206,7 @@

  .view-process {
    flex: 6;
    margin-left: 20px;
        margin: 20px 0px 0px 20px;

    .process-header {
      display: flex;