实时监控-没有触发预警的数据不再显示任务名称和等级（卡片和详情弹框）

sd

5 天以前 33d6185c6c4e72f9aa4cae657baa6d27a89cb84b

 src/components/subComponents/ModelCard.vue

@@ -1,99 +1,90 @@
<template>
  <div class="model-card-box" :style="`height:${height};width:${width};`">
    <el-tabs
      style="height: 100%;"
      @before-leave="changeTabs"
      v-model="activeName"
    >
    <!-- <div class="model-card-box" :style="`height:${height};width:${width};`">-->
    <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="activeName">
      <el-tab-pane label="大图" name="pic">
        <div
          class="model-card-box-left"
          :style="
            data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
              ? 'width: 65%;padding: 5px;box-sizing: border-box'
              : 'width: 100%;padding: 5px;box-sizing: border-box'
          "
        >
        <div class="model-card-box-left" :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
          ? 'width: 65%;padding: 5px;box-sizing: border-box'
          : 'width: 100%;padding: 5px;box-sizing: border-box'
          ">
          <div class="img-box">
            <p class="img-box-title">
              <b>全景图</b>
            </p>
            <!-- 人脸类型 -->
            <img-down
              v-if="
                data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
              "
              :url="data.picMaxUrl[0]"
            ></img-down>
            <img-down v-if="
              data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
            " :url="data.picMaxUrl[0]"></img-down>

            <!-- 普通yolo类 -->
            <img-down
              v-else-if="
                (data.targetInfo == null ||
                  data.targetInfo[0].picSmUrl == '') &&
                  data.picMaxUrl.length == 1
              "
              :url="data.picMaxUrl[0]"
            ></img-down>
            <img-down v-else-if="
              (data.targetInfo == null ||
                data.targetInfo[0].picSmUrl == '') &&
              data.picMaxUrl.length == 1
            " :url="data.picMaxUrl[0]"></img-down>

            <!-- 持续时间yolo类 -->
            <el-carousel
              v-else-if="
                (data.targetInfo == null ||
                  data.targetInfo[0].picSmUrl == '') &&
                  data.picMaxUrl.length > 1
              "
              trigger="click"
              height="100%"
              :autoplay="false"
            >
              <el-carousel-item
                v-for="(item, index) in data.picMaxUrl"
                :key="index"
              >
            <el-carousel v-else-if="
              (data.targetInfo == null ||
                data.targetInfo[0].picSmUrl == '') &&
              data.picMaxUrl.length > 1
            " trigger="click" height="100%" :autoplay="false">
              <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index">
                <img-down :url="item"></img-down>
              </el-carousel-item>
            </el-carousel>

            <!-- yolo类大图 -->
            <div
              class="describe"
              v-if="
                data.targetInfo == null || data.targetInfo[0].picSmUrl == ''
              "
            >
            <div class="describe" v-if="
              data.targetInfo == null || data.targetInfo[0].picSmUrl == ''
            ">
              <p>
                <span class="fontStyleForModel" style="font-weight:normal">{{
                  data.picDate | formatTime
                  data.detect_time | formatTime
                }}</span>
                <span class="fontStyleForModel" style="margin-left:230px;font-weight:normal">{{ data.analyServerName
                }}</span>
              </p>
              <p>
                <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
                <span
                  class="fontStyleForModel analyServer"
                  style="margin-left:20px;"
                  >{{ data.analyServerName }}</span
                >
                <span class="fontStyleForModel">摄像机</span>
                <span style="margin-left:35px;">{{ data.cameraName || "摄像机名称" }}</span>
              </p>
              <p></p>
              <p style="width:100%">
                <span
                  v-for="(item, index) in data.alarmRules"
                  :key="index + 'rule'"
                >
                  <span class="fontStyleForModel">{{ data.taskName }}</span
                  >&nbsp;&nbsp;
                  <span
                    v-if="item.alarmLevel !== '撤防'"
                    class="fontStyleForModel"
                    >{{ item.alarmLevel }}</span
                  >&nbsp;
                  <span v-if="item.isLink" class="fontStyleForModel"
                    >联动任务</span
                  >
                  <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
                </span>
              <p>
                <span v-if="data.is_warning === 1" class="fontStyleForModel">AI任务</span>
                <span v-if="data.is_warning === 1" style="margin-left:20px;color: red;">{{ data.task_name }}</span>
                <span v-if="data.is_warning === 1" style="margin-left:20px;color: red;">{{ data.event_level_name }}</span>
              </p>
              <p v-if="data.is_warning === 1">
                <span class="fontStyleForModel">隐患描述</span>
                <el-tooltip placement="top" :content="data.risk_description" effect="light" popper-class="my-tooltip">
                  <span class="ellipsis">{{ data.risk_description }}</span>
                </el-tooltip>
              </p>
              <p v-if="data.is_warning === 1">
                <span class="fontStyleForModel">处理建议</span>
                <el-tooltip placement="top" :content="data.suggestion" effect="light" popper-class="my-tooltip">
                  <span class="ellipsis">{{ data.suggestion }}</span>
                </el-tooltip>
              </p>
              <p v-if="data.is_warning === 1">
                <span class="fontStyleForModel">相关文档</span>
                <span style="margin-left: 15px;"></span>
              <span v-for="(doc, index) in data.knowledge_documents || []" :key="index" >
                <span class="doc-link" @click="getPreviewUrl2(doc.id)">《{{ doc.title }}》</span>
                <span v-if="index < data.knowledge_documents.length - 1">, </span>
              </span>
              </p>
              <p v-if="data.is_warning === 1" class="img-content-desc">
                <span class="fontStyleForModel">图片内容</span>
                <span class="content-box">{{ data.zh_desc_class }}</span>
              </p>
              <p v-if="data.is_warning === 0" class="img-content-desc">
                <span class="fontStyleForModel">图片内容</span>
                <span class="content-box2">{{ data.zh_desc_class }}</span>
              </p>



            </div>

            <!-- 人脸类大图  -->
@@ -101,175 +92,104 @@
              <p>
                <span class="fontStyleForModel">{{
                  data.picDate | formatTime
                }}</span>
                  }}</span>
              </p>
              <p class="align-right">
                <span
                  class="fontStyleForModel text-overflow"
                  :title="data.cameraAddr"
                  >{{ data.cameraAddr }}</span
                >
                <span
                  class="fontStyleForModel text-overflow"
                  :title="data.cameraAddr"
                  style="margin-left:20px;"
                  >{{ data.analyServerName }}</span
                >
                <span class="fontStyleForModel text-overflow" :title="data.cameraAddr">{{ data.cameraAddr }}</span>
                <span class="fontStyleForModel text-overflow" :title="data.cameraAddr" style="margin-left:20px;">{{
                  data.analyServerName }}</span>
              </p>
              <p style="width:100%">
                <span
                  v-for="(item, index) in data.alarmRules"
                  :key="index + 'rule'"
                >
                  <span class="fontStyleForModel">{{ data.taskName }}</span
                  >&nbsp;&nbsp;
                  <span
                    v-if="item.alarmLevel !== '撤防'"
                    class="fontStyleForModel"
                    >{{ item.alarmLevel }}</span
                  >&nbsp;
                  <span v-if="item.isLink" class="fontStyleForModel"
                    >联动任务</span
                  >
                <span v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
                  <span class="fontStyleForModel">{{ data.taskName }}</span>&nbsp;&nbsp;
                  <span v-if="item.alarmLevel !== '撤防'" class="fontStyleForModel">{{ item.alarmLevel }}</span>&nbsp;
                  <span v-if="item.isLink" class="fontStyleForModel">联动任务</span>
                  <span v-if="index < data.alarmRules.length - 1">/&nbsp;</span>
                </span>
              </p>
              <p style="width:100%">
                <span
                  style="white-space: nowrap;font-weight: 600;font-size: 13px;"
                  >{{ data.showLabels }}</span
                >
                <span style="white-space: nowrap;font-weight: 600;font-size: 13px;">{{ data.showLabels }}</span>
              </p>
            </div>
          </div>
        </div>

        <!-- 弹框右侧 -->
        <div
          v-if="
            data.targetInfo &&
              data.targetInfo !== null &&
              data.targetInfo[0].picSmUrl !== ''
          "
          class="model-card-box-right"
          :style="
            data.targetInfo &&
            data.targetInfo !== null &&
            data.targetInfo[0].picSmUrl !== ''
              ? 'width: 35%;box-sizing: border-box;'
              : ''
          "
        >
        <div v-if="
          data.targetInfo &&
          data.targetInfo !== null &&
          data.targetInfo[0].picSmUrl !== ''
        " class="model-card-box-right" :style="data.targetInfo &&
          data.targetInfo !== null &&
          data.targetInfo[0].picSmUrl !== ''
          ? 'width: 35%;box-sizing: border-box;'
          : ''
          ">
          <p class="img-box-title">
            <b>抓拍图</b>
          </p>
          <!-- 左右两张的人脸对比模式 -->
          <div
            class="img-box"
            v-if="data.baseInfo && data.baseInfo.length >= 1"
            ref="picSmBox"
          >
          <div class="img-box" v-if="data.baseInfo && data.baseInfo.length >= 1" ref="picSmBox">
            <div class="card-img-box-compear-left">
              <!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" ref="picSm" /> -->
              <img-down
                :url="data.targetInfo[0].picSmUrl"
                :isPreview="false"
              ></img-down>
              <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
            </div>
            <el-carousel
              @change="changeInitialIndex"
              :initial-index="initialIndex"
              :autoplay="false"
              indicator-position="none"
              :arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
              v-if="data.baseInfo[0].targetPicUrl != ''"
              class="card-img-box-compear-right"
            >
              <el-carousel-item
                v-for="(item, index) in data.baseInfo"
                :key="index"
              >
            <el-carousel @change="changeInitialIndex" :initial-index="initialIndex" :autoplay="false"
              indicator-position="none" :arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
              v-if="data.baseInfo[0].targetPicUrl != ''" class="card-img-box-compear-right">
              <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
                <!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
                <img-down
                  :url="item.targetPicUrl"
                  :isPreview="false"
                ></img-down>
                <img-down :url="item.targetPicUrl" :isPreview="false"></img-down>
              </el-carousel-item>
            </el-carousel>
            <div
              class="img-compareScore"
              v-if="data.baseInfo[0].targetPicUrl != ''"
              :style="
                data.baseInfo[initialIndex].bwType === '1'
                  ? `background: red;`
                  : `background: green;`
              "
            >
            <div class="img-compareScore" v-if="data.baseInfo[0].targetPicUrl != ''" :style="data.baseInfo[initialIndex].bwType === '1'
              ? `background: red;`
              : `background: green;`
              ">
              <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
            </div>
          </div>
          <!-- 没有比对的人脸识别模式 -->
          <div
            class="img-box"
            v-if="!data.baseInfo && data.targetInfo[0].picSmUrl !== ''"
          >
            <div
              class="card-img-box-compear-left"
              style="width:60%;margin-top:5px"
            >
          <div class="img-box" v-if="!data.baseInfo && data.targetInfo[0].picSmUrl !== ''">
            <div class="card-img-box-compear-left" style="width:60%;margin-top:5px">
              <!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
              <img-down
                :url="data.targetInfo[0].picSmUrl"
                :isPreview="false"
              ></img-down>
              <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
            </div>
          </div>
          <div
            class="baseInfo"
            v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
          >
          <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].tableName"
                  >{{ data.baseInfo[initialIndex].tableName }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{
                  data.baseInfo[initialIndex].tableName }}</span>
              </p>
              <p>
                <span class="labelInfo">姓名</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].targetName"
                  >{{ data.baseInfo[initialIndex].targetName }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{
                  data.baseInfo[initialIndex].targetName }}</span>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | sex
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | idCard
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | phoneNum
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                  >{{ data.baseInfo[initialIndex].monitorLevel }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{
                  data.baseInfo[initialIndex].monitorLevel }}</span>
              </p>
            </div>
          </div>
@@ -277,14 +197,10 @@
      </el-tab-pane>

      <el-tab-pane label="视频" name="video" class="video-tabs">
        <div
          class="model-card-box-left"
          :style="
            data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
              ? 'width: 65%;padding: 5px;box-sizing: border-box'
              : 'width: 70%;padding: 5px;box-sizing: border-box;margin-left:15%'
          "
        >
        <div class="model-card-box-left" :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
          ? 'width: 65%;padding: 5px;box-sizing: border-box'
          : 'width: 70%;padding: 5px;box-sizing: border-box;margin-left:15%'
          ">
          <div class="img-box">
            <!-- <video
              :src="'/httpImage/' + data.videoUrl"
@@ -293,127 +209,77 @@
            >
              您的浏览器不支持 video 标签。
            </video> -->
            <wasm-player
              :videoUrl="data.videoUrl"
              :isStream="false"
            ></wasm-player>
            <wasm-player :videoUrl="data.videoUrl" :isStream="false"></wasm-player>
          </div>
        </div>
        <div
          v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
          class="model-card-box-right"
          :style="
            data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
              ? 'width: 35%;box-sizing: border-box;'
              : ''
          "
        >
        <div v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" class="model-card-box-right" :style="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''
          ? 'width: 35%;box-sizing: border-box;'
          : ''
          ">
          <p class="img-box-title">
            <b>抓拍图</b>
          </p>
          <!-- 左右两张的人脸对比模式 -->
          <div
            class="img-box"
            v-if="data.baseInfo && data.baseInfo.length >= 1"
            ref="picSmBox"
          >
          <div class="img-box" v-if="data.baseInfo && data.baseInfo.length >= 1" ref="picSmBox">
            <div class="card-img-box-compear-left">
              <img-down
                :url="data.targetInfo[0].picSmUrl"
                :isPreview="false"
              ></img-down>
              <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
            </div>
            <el-carousel
              @change="changeInitialIndex"
              :initial-index="initialIndex"
              :autoplay="false"
              indicator-position="none"
              v-if="data.baseInfo[0].targetPicUrl != ''"
              class="card-img-box-compear-right"
              :arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
            >
              <el-carousel-item
                v-for="(item, index) in data.baseInfo"
                :key="index"
              >
            <el-carousel @change="changeInitialIndex" :initial-index="initialIndex" :autoplay="false"
              indicator-position="none" v-if="data.baseInfo[0].targetPicUrl != ''" class="card-img-box-compear-right"
              :arrow="data.baseInfo.length > 1 ? 'always' : 'never'">
              <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
                <!-- <img :src="'/httpImage/'+item.targetPicUrl" /> -->
                <img-down
                  :url="item.targetPicUrl"
                  :isPreview="false"
                ></img-down>
                <img-down :url="item.targetPicUrl" :isPreview="false"></img-down>
              </el-carousel-item>
            </el-carousel>
            <div
              class="img-compareScore"
              v-if="data.baseInfo[0].targetPicUrl != ''"
              :style="
                data.baseInfo[initialIndex].bwType === '1'
                  ? `background: red;`
                  : `background: green;`
              "
            >
            <div class="img-compareScore" v-if="data.baseInfo[0].targetPicUrl != ''" :style="data.baseInfo[initialIndex].bwType === '1'
              ? `background: red;`
              : `background: green;`
              ">
              <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
            </div>
          </div>
          <!-- 没有比对的人脸识别模式 -->
          <div class="img-box" v-if="!data.baseInfo && data.picMaxUrl">
            <div
              class="card-img-box-compear-left"
              style="width:60%;margin-top:5px"
            >
            <div class="card-img-box-compear-left" style="width:60%;margin-top:5px">
              <!-- <img :src="'/httpImage/'+data.targetInfo[0].picSmUrl" /> -->
              <img-down
                :url="data.targetInfo[0].picSmUrl"
                :isPreview="false"
              ></img-down>
              <img-down :url="data.targetInfo[0].picSmUrl" :isPreview="false"></img-down>
            </div>
          </div>
          <div
            class="baseInfo"
            v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''"
          >
          <div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
            <div class="baseInfo_list">
              <p>
                <span class="labelInfo">底库</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].tableName"
                  >{{ data.baseInfo[initialIndex].tableName }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].tableName">{{
                  data.baseInfo[initialIndex].tableName }}</span>
              </p>
              <p>
                <span class="labelInfo">姓名</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].targetName"
                  >{{ data.baseInfo[initialIndex].targetName }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].targetName">{{
                  data.baseInfo[initialIndex].targetName }}</span>
              </p>
              <p>
                <span class="labelInfo">性别</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | sex
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">身份证号</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | idCard
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">手机号</span>
                <span class="val">{{
                  data.baseInfo[initialIndex].labels | phoneNum
                }}</span>
                  }}</span>
              </p>
              <p>
                <span class="labelInfo">人员等级</span>
                <span
                  class="val"
                  :title="data.baseInfo[initialIndex].monitorLevel"
                  >{{ data.baseInfo[initialIndex].monitorLevel }}</span
                >
                <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{
                  data.baseInfo[initialIndex].monitorLevel }}</span>
              </p>
            </div>
          </div>
@@ -423,7 +289,7 @@
  </div>
</template>
<script>
Date.prototype.Format = function(fmt) {
Date.prototype.Format = function (fmt) {
  var o = {
    'M+': this.getMonth() + 1, //月份
    'd+': this.getDate(), //日
@@ -466,7 +332,7 @@
    data: {
      type: Object,
      require: false,
      default: function() {
      default: function () {
        return {}
      },
    },
@@ -516,6 +382,10 @@
    }
  },
  methods: {
    getPreviewUrl2(id) {
      window.location.href="/api-v1/v1/knowledge/download?id="+id
      // window.location.href="http://192.168.1.176:8088/v1/knowledge/download?id="+id
    },
    changeTabs(activeName, oldActiveName) {
      console.log(activeName, oldActiveName)
    },
@@ -534,7 +404,78 @@
  },
}
</script>
<style>
/* 全局生效，可覆盖 tooltip */
.my-tooltip {
  max-width: 540px !important;
  color: #606266 !important;
}
</style>
<style lang="scss">
.doc-link {
      padding-left: 10px;
      text-decoration: none;
      color: #1b50e4;
      // display: inline-block;
      // padding: 5px 8px;
      // border-radius: 4px;
      // transition: all 0.3s;
      // color: #165DFF;

      &:hover {
        cursor: pointer;
      }
    }
.ellipsis {
  margin-left: 20px;
  display: inline-block;
  /* 或 block */
  max-width: 85%;
  /* 根据实际容器宽度调整 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 关键：禁止换行 */
}

.img-content-desc {
  display: flex;
  /* 确保两个span在同一行 */
  align-items: flex-start;
  /* 顶部对齐 */

  .content-box {
    display: inline-block;
    margin-left: 20px;
    height: 50px;
    overflow-y: auto;
    /* 添加纵向滚动条 */
    flex: 1;
    /* 占据剩余空间 */
    white-space: normal;
    /* 允许内容换行 */
    // border: 1px solid #eee;
    border-radius: 3px;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .content-box2 {
    display: inline-block;
    margin-left: 20px;
    height: 120px;
    overflow-y: auto;
    /* 添加纵向滚动条 */
    flex: 1;
    /* 占据剩余空间 */
    white-space: normal;
    /* 允许内容换行 */
    // border: 1px solid #eee;
    border-radius: 3px;
    padding: 0 4px;
    box-sizing: border-box;
  }
}

.fontStyleForModel {
  font-family: PingFangSC-Medium;
  font-size: 14px;
@@ -542,33 +483,42 @@
  font-weight: 600;
  letter-spacing: 0.28px;
}

.model-card-box {
  box-sizing: border-box;
  padding: 5px;

  .el-tabs {
    .el-tabs__item {
      font-size: 16px !important;
    }
  }

  .el-tabs__content {
    height: calc(100% - 55px);

    .el-tab-pane {
      height: 100%;
    }

    .model-card-box-left,
    .model-card-box-right {
      height: 100%;
      float: left;

      .baseInfo {
        margin-top: 5px;
        text-align: left;

        .baseInfo_list {
          p {
            display: flex;

            .labelInfo {
              width: 80px;
              color: #999;
            }

            .val {
              font-size: 12px;
              color: #101010;
@@ -577,6 +527,7 @@
            }
          }
        }

        .baseInfo_left {
          float: left;
          width: 30%;
@@ -586,6 +537,7 @@
          color: #999999;
          letter-spacing: 0.28px;
        }

        .baseInfo_right {
          float: left;
          width: 70%;
@@ -595,6 +547,7 @@
          color: #101010;
          letter-spacing: 0.28px;
          line-height: 20px;

          .valueInfo {
            overflow: hidden;
            text-overflow: ellipsis;
@@ -602,61 +555,76 @@
            max-width: 130px;
          }
        }

        p {
          line-height: 20px;
        }
      }
    }

    .model-card-box-left {
      width: 60%;

      .img-box {
        .el-carousel__arrow {
          bottom: inherit !important;
          top: 50% !important;
        }

        .el-carousel__arrow--right {
          right: 10px !important;
        }

        .el-carousel__arrow--left {
          left: 10px !important;
        }

        .img-box-title {
          text-align: left;
        }
        height: calc(100% - 100px);

        height: calc(100% - 220px);

        .el-carousel {
          width: 100%;
          height: 100%;
          float: left;
        }

        img {
          float: left;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }

        .describe {
          width: 100%;
          width: 85%;
          height: 50px;
          float: left;
          margin-left: 15%;
          margin-top: 5px;

          p {
            b {
              //color: #e43933;
            }

            text-align: left;
            margin: 4px 0;
          }
        }

        .describeBigImage {
          width: 100%;
          height: 50px;
          float: left;
          margin-top: 5px;

          p {
            &.align-right {
              text-align: right;

              .text-overflow {
                display: inline-block;
                vertical-align: top;
@@ -666,9 +634,11 @@
                white-space: nowrap;
              }
            }

            b {
              //color: #e43933;
            }

            width: 50%;
            text-align: left;
            float: left;
@@ -676,29 +646,35 @@
          }
        }
      }

      .merge {
        margin-top: 30px;
        float: left;
      }
    }

    .model-card-box-right {
      padding-left: 5px;
      box-sizing: border-box;
      width: 40%;
      overflow: auto;
      height: 100%;

      .img-box-title {
        text-align: left;
        margin: 5px;
      }

      .img-box {
        height: 32%;
        height: 50%;
        width: 100%;
        position: relative;

        .card-img-box-compear-left {
          float: left;
          width: 50%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
@@ -709,26 +685,33 @@
            border-radius: 5px;
          }
        }

        .card-img-box-compear-right {
          float: right;
          width: 50%;
          height: 100%;

          .el-carousel__container {
            height: 100% !important;

            .el-carousel__arrow {
              top: 50% !important;
            }

            .el-carousel__arrow {
              height: 20px;
              width: 20px;
            }

            .el-carousel__arrow--right {
              right: 10px !important;
            }

            .el-carousel__arrow--left {
              left: 10px !important;
            }
          }

          img {
            width: 100%;
            height: 100%;
@@ -740,6 +723,7 @@
            border-radius: 5px;
          }
        }

        .img-compareScore {
          bottom: 0px;
          width: 60px;
@@ -754,6 +738,7 @@
          font-weight: 700;
          z-index: 2;
        }

        .imgs {
          width: 50%;
          height: 50%;
@@ -765,6 +750,7 @@
          padding-right: 5px;
          box-sizing: border-box;
          background-color: #ebeef5;

          img {
            width: 100%;
          }