From 33d6185c6c4e72f9aa4cae657baa6d27a89cb84b Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期五, 29 八月 2025 09:25:40 +0800
Subject: [PATCH] 实时监控-没有触发预警的数据不再显示任务名称和等级（卡片和详情弹框）
---
src/components/subComponents/ModelCard.vue | 540 +++++++++++++++++++++++++++++------------------------------
1 files changed, 263 insertions(+), 277 deletions(-)
diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 412e1ea..fed9300 100644
--- a/src/components/subComponents/ModelCard.vue
+++ b/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>
<!-- 鏅�歽olo绫� -->
- <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
- >
- <span
- v-if="item.alarmLevel !== '鎾ら槻'"
- class="fontStyleForModel"
- >{{ item.alarmLevel }}</span
- >
- <span v-if="item.isLink" class="fontStyleForModel"
- >鑱斿姩浠诲姟</span
- >
- <span v-if="index < data.alarmRules.length - 1">/ </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
- >
- <span
- v-if="item.alarmLevel !== '鎾ら槻'"
- class="fontStyleForModel"
- >{{ item.alarmLevel }}</span
- >
- <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>
+ <span v-if="item.alarmLevel !== '鎾ら槻'" class="fontStyleForModel">{{ item.alarmLevel }}</span>
+ <span v-if="item.isLink" class="fontStyleForModel">鑱斿姩浠诲姟</span>
<span v-if="index < data.alarmRules.length - 1">/ </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%;
}
--
Gitblit v1.8.0