风险源弹框UI优化

XingChuan

2021-05-31 5d3cafca01c6ad878d51533b955b530e12f9d99a

风险源弹框UI优化

 src/components/base-page/RiskSource/PublicTable.vue

@@ -6,13 +6,13 @@
    <span></span>
    <div class="main-table">
      <div class="">
        <ul>
          <li>风险评估过程</li>
          <li>初始评价结果:{{ riskSourceAssess }}</li>
        <ul style="margin-bottom: .02rem">
          <li><h3>风险评估过程</h3></li>
          <li>初始评价结果：{{ riskSourceAssess }}</li>
        </ul>
      </div>
      <div>
        <table border="1">
      <div class="EvaluationTable">
        <table border="1" style="border-color: rgba(118,132,189,0.77)" >
          <tr>
            <th colspan="2">风险控制</th>
            <th>评估指标</th>
@@ -95,10 +95,13 @@
          </tr>
        </table>
      </div>
      <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
        <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                         :label="item.label" :show-overflow-tooltip="true"></el-table-column>
      </el-table>
      <h3>环境风险评估结果</h3>
      <div class="pTable">
        <el-table :data="riskSourceDetail" style="width: 100%" height="200px" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
@@ -199,13 +202,21 @@
/deep/ .el-table tbody tr:hover > td {
  background: none !important
}

.pTable{
  box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
  padding: 0.04rem;
  margin-top: .06rem;
}
.slotChildTable {
  position: relative;
  background: rgba(33, 41, 69, 0.9);

  background: rgba(0, 16, 30, 0.7);
  box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
  color: #00fff6;
  padding: 0.04rem;
  border: 1px solid #396d83;
  .main-table {
    border: 1px #396d83 solid;
    max-height: 2rem;
    overflow: hidden auto;
  }
}


 src/components/base-page/RiskSource/PublicTabs.vue

@@ -6,10 +6,9 @@
    <span></span>
    <div class="tabs-content">
      <ul>
        <li>风险名称:{{ riskSourceBaseInfo.riskname }}</li>
        <li>风险级别:{{ riskSourceBaseInfo.riskLevel }}</li>
        <li>风险描述:{{ riskSourceBaseInfo.depiction }}</li>
        <li class="lastli"></li>
        <li>风险名称：{{ riskSourceBaseInfo.riskname }}</li>
        <li :style="{boxShadow: riskLevel[riskSourceBaseInfo.riskLevel]}">风险级别：{{ riskSourceBaseInfo.riskLevel }}</li>
        <li>风险描述：{{ riskSourceBaseInfo.depiction }}</li>
      </ul>
    </div>
  </div>
@@ -22,7 +21,13 @@
  name: 'PublicTabs',
  data () {
    return {
      riskSourceBaseInfo: []
      riskSourceBaseInfo: [],
      riskLevel: {
        1: '0 0 10px rgba(246,16,43,.7) inset',
        2: '0 0 10px rgba(244,142,88,.7) inset',
        3: '0 0 10px rgba(253,238,13,.7) inset',
        4: '0 0 10px rgba(38,144,2,.7) inset'
      }
    }
  },
  mounted () {
@@ -44,7 +49,7 @@

.slotChildTabs {
  position: relative;
  margin-bottom: 0.1rem;
  margin-bottom: 0.06rem;
  background-color: @background-color;

  .tabs-content {
@@ -56,21 +61,26 @@
    ul {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;

      padding: 0 .03rem;
      li {
        margin-bottom: 0.04rem;
        text-align: center;
        min-width: 30%;
        background-color: #243a55;
        color: #00d0f9;
        box-shadow: 0 0 10px rgba(129,211,248,.35) inset;
        color: #00fff6;
        border-radius: 0.02rem;
        font-size: 0.08rem;
        line-height: 0.09rem;
        padding: 0.03rem .5%;
        padding: 0.05rem .8%;
      }

      li:nth-child(2){
        margin-left: .03rem;
      }
      li:last-child {
        text-align: left;
        line-height: .12rem;
        margin-bottom: 0;
      }
      .lastli {
        visibility: hidden
      }

 src/components/base-page/RiskSource/RiskSourceIndex.vue

@@ -83,7 +83,7 @@

  .public-bounced-content {
    //padding: 0.1rem;
    display: flex;

    //align-items: center;
    //justify-content: space-around;