样式优化

zhanghua

2023-06-14 428216f1c3c255b107eb689cb2afac1b7ed3df80

 src/components/detail/index.vue

@@ -3,13 +3,15 @@
    <div class="view-data">
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 问题类型: </label>
          <label class="data-title"> 问题类型：</label>
          <span class="data-detail">{{
            getCategoryLabel(baseCase.category)
          }}</span>
        </div>
        <div class="data-item__right">
          <label class="data-title"> 大类名称: </label>
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 大类名称：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.categoryText
          }}</span>
@@ -17,17 +19,19 @@
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 小类名称: </label>
          <label class="data-title"> 小类名称：</label>
          <span class="data-detail">{{ baseCase.violationsVO.typeText }}</span>
        </div>
        <div class="data-item__right">
          <label class="data-title"> 事件等级: </label>
      </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>
          <label class="data-title"> 案由：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.actionCause
          }}</span>
@@ -35,29 +39,31 @@
      </div>
      <div class="data-item">
        <div class="data-item__left">
          <label class="data-title"> 所属街道: </label>
          <label class="data-title"> 所属街道：</label>
          <span class="data-detail">{{ baseCase.streetText }}</span>
        </div>
        <div class="data-item__right">
          <label class="data-title"> 所属社区: </label>
      </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>
          <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>
          <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>
          <label class="data-title"> 问题描述：</label>
          <span class="data-detail">{{
            baseCase.violationsVO.description
          }}</span>
@@ -66,13 +72,15 @@
      <div class="data-user">
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 反映人: </label>
            <label class="data-title"> 反映人：</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>
            <label class="data-title"> 联系方式：</label>
            <span class="data-detail">{{
              baseCase.violationsVO.informantPhoneCode
            }}</span>
@@ -80,7 +88,7 @@
        </div>
        <div class="data-item">
          <div class="data-item__left">
            <label class="data-title"> 身份证号: </label>
            <label class="data-title"> 身份证号：</label>
            <span class="data-detail">{{
              baseCase.violationsVO.informantIdCard
            }}</span>
@@ -215,10 +223,22 @@
    }

    border: 1px solid #17324c;
    .data-title {
      line-height: 1.8;
      width: 70px;
      text-align: right;
      display: inline-grid;
    }
    .data-detail {
      line-height: 1.8;
      max-width: 240px;
      display: inline-grid;
      color: #333;

      width: calc(100% - 70px) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: normal !important;
    }
  }