From c3aaf28f7316cce12eec007a9f85a96cbcddeec2 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期三, 07 五月 2025 10:34:20 +0800
Subject: [PATCH] 最新版本541200007
---
screen/src/views/LogisticsCenter.vue | 399 +++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 335 insertions(+), 64 deletions(-)
diff --git a/screen/src/views/LogisticsCenter.vue b/screen/src/views/LogisticsCenter.vue
index f7135b5..ff1b012 100644
--- a/screen/src/views/LogisticsCenter.vue
+++ b/screen/src/views/LogisticsCenter.vue
@@ -4,7 +4,7 @@
<img src="@/assets/images/LogisticsCenter/bg@2x.png" class="main_bg" alt="" />
<div class="main_header">
<img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
- <div class="title">瀹夊窘涓儫鎴愬搧闆嗘帶澶у睆</div>
+ <div class="title">瀹夊窘涓儫鏁版櫤鎴愬搧绠℃帶</div>
<div class="time_wrap">
<span class="date">{{ date }}</span>
<span class="week">{{ week }}</span>
@@ -30,11 +30,8 @@
<img src="@/assets/images/ic_question@2x.png" style="margin-left: 6px;" class="icon" alt="">
<div class="hover_wrap">
<div class="triangle"></div>
- <div class="title">鍑哄簱鑳藉姏缁熻璇存槑锛�</div>
- <div>褰撳墠璁㈠崟閲忥細鎴嚦鏄ㄦ棩鏈畬鎴愯鍗�+褰撴棩涓嬭揪鐨勮鍗曟暟閲忥紱</div>
- <div>褰撴棩浠诲姟閲忥細鎴嚦鏄ㄦ棩宸查厤杞芥湭鍑哄簱+褰撴棩宸查厤杞芥湭鍑哄簱鏁伴噺+鏃犻渶閰嶈浇鐨勪换鍔★紱</div>
- <div>浠婃棩鍑哄簱閲忥細褰撴棩鎸夊疄闄呭嚭搴撻噺锛堜互鐢靛瓙閿佷笂閿佷负鍑嗭級</div>
- <div>鍓╀綑浠诲姟閲忥細褰撴棩浠诲姟閲�-浠婃棩鍑哄簱閲�</div>
+ <div class="title">绱鍑哄簱閲忕粺璁¤鏄庯細</div>
+ <div>绱鍑哄簱閲忥細鎵�鏈夌墿娴佸嚭搴撲綔涓氭暟鎹紙鍖呭惈鑱旇惀鍔犲伐锛堝洖杩愩�佽惤鍦伴攢鍞級銆佸墠缃簱绉诲簱(鎴愰兘/涓存矀)绛夋墍鏈夊嚭搴撲綔涓氭暟鎹級</div>
</div>
</div>
</div>
@@ -48,27 +45,40 @@
</div>
<div class="content_wrap">
<div class="num_wrap">
- <div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
- <div class="num" v-for="i in StockOutData.currentNum + ''">
- {{ i }}
- <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
+ <div class="question1">
+ <div class="hover_con">
+ <div class="num_list" v-if="StockOutData.currentNum || StockOutData.currentNum == 0">
+ <div class="num" v-for="i in StockOutData.currentNum + ''">
+ {{ i }}
+ <img class="bg" src="@/assets/images/LogisticsCenter/bg_number@2x.png" alt="">
+ </div>
+ </div>
+ <div class="hover_wrap">
+ <div class="triangle"></div>
+ <div class="title" v-if="StockOutData.currentProvinceNum || StockOutData.currentProvinceNum == 0">
+ 璋冩嫧鍑哄簱閲忥細{{ StockOutData.currentProvinceNum.toFixed(0) }}绠�</div>
+ <div class="title" v-if="StockOutData.currentOtherNum || StockOutData.currentOtherNum == 0">
+ 鍏朵粬鍑哄簱閲忥細{{ StockOutData.currentOtherNum.toFixed(0) }}绠�</div>
+ </div>
</div>
+
</div>
- <div class="content">
+ <div class="content" v-if="false">
<div class="unit_wrap">
<span class="la">鍚屾瘮</span>
- <template v-if="StockOutData.currentNum && StockOutData.lastNum">
- <img v-if="StockOutData.currentNum >= StockOutData.lastNum" src="@/assets/images/ic_up.png"
+ <template v-if="StockOutData.sameOutNum">
+ <img v-if="StockOutData.currentOutNum >= StockOutData.sameOutNum" src="@/assets/images/ic_up.png"
class="icon" alt="">
<img v-else src="@/assets/images/ic_down.webp" class="icon" alt="">
</template>
- <span v-if="StockOutData.lastNum && StockOutData.currentNum">{{ Math.abs((((StockOutData.currentNum
+ <span v-if="StockOutData.sameOutNum">{{ Math.abs((((StockOutData.currentOutNum
-
- StockOutData.lastNum) /
- StockOutData.lastNum)
+ StockOutData.sameOutNum) /
+ StockOutData.sameOutNum)
* 100).toFixed(2)) }}%</span>
<span v-else style="margin-left: 6px;">-</span>
- <span class="la" style="margin-left: 30px;margin-right: 10px;">绱鍑哄簱杞︽</span>
+ <span v-if="StockOutData.totalCarNum" class="la"
+ style="margin-left: 30px;margin-right: 10px;">绱鍑哄簱杞︽</span>
<span>{{ StockOutData.totalCarNum || '' }}</span>
</div>
@@ -125,7 +135,7 @@
<span class="item">{{ item.contractNumber }}</span>
<span class="item status">{{ item.statusDesc }}</span>
<span class="item">{{ item.receiveEnterprise }}</span>
- <span class="item">{{ item.transportDate || '-' }}</span>
+ <span class="item">{{ item.createDate || '-' }}</span>
</div>
</div>
</div>
@@ -149,10 +159,10 @@
<div class="hover_wrap">
<div class="triangle"></div>
<div class="title">鍑哄簱鑳藉姏缁熻璇存槑锛�</div>
- <div>褰撳墠璁㈠崟閲忥細鎴嚦鏄ㄦ棩鏈畬鎴愯鍗�+褰撴棩涓嬭揪鐨勮鍗曟暟閲忥紱</div>
- <div>褰撴棩浠诲姟閲忥細鎴嚦鏄ㄦ棩宸查厤杞芥湭鍑哄簱+褰撴棩宸查厤杞芥湭鍑哄簱鏁伴噺+鏃犻渶閰嶈浇鐨勪换鍔★紱</div>
- <div>浠婃棩鍑哄簱閲忥細褰撴棩鎸夊疄闄呭嚭搴撻噺锛堜互鐢靛瓙閿佷笂閿佷负鍑嗭級</div>
- <div>鍓╀綑浠诲姟閲忥細褰撴棩浠诲姟閲�-浠婃棩鍑哄簱閲�</div>
+ <div>1銆佸綋鍓嶈鍗曢噺锛氭埅鑷崇洰鍓嶆湭閰嶈浇鐨勮鍗曢噺</div>
+ <div>2銆佸綋鍓嶄换鍔￠噺锛氭墍鏈夊凡涓嬭揪杩愯緭涓旀湭鍑哄簱鐨勪换鍔￠噺锛氭埅姝㈢洰鍓嶅凡閰嶈浇鏈嚭搴�+鏃犻渶閰嶈浇鐨勪换鍔�(鍚屽煄浠诲姟閲�)</div>
+ <div>3銆佷粖鏃ュ嚭搴撻噺锛氫粖鏃ュ疄闄呭嚭搴撻噺锛氫互鐢靛瓙閿佷笂閿佷负鍑�</div>
+ <div>4銆佸墿浣欎换鍔￠噺锛氭暟鎹悓褰撳墠浠诲姟閲忥紙寮圭獥鍒嗗埆灞曠ず鍚屽簱鍜岃繍杈撲换鍔￠噺</div>
</div>
</div>
</div>
@@ -172,7 +182,7 @@
<div class="name">褰撳墠璁㈠崟閲�</div>
<div class="num"><span class="blue"
v-if="cneterData.currentOrderNum || cneterData.currentOrderNum == 0">{{
- cneterData.currentOrderNum.toFixed(0) }}</span>绠�</div>
+ cneterData.currentOrderNum }}</span>绠�</div>
</div>
</div>
<div class="item">
@@ -180,7 +190,7 @@
<div class="content">
<div class="name">褰撳墠浠诲姟閲�</div>
<div class="num"><span v-if="cneterData.currentPlanNum || cneterData.currentPlanNum == 0">{{
- cneterData.currentPlanNum.toFixed(0) }}</span>绠�</div>
+ cneterData.currentPlanNum }}</span>绠�</div>
<div class="unit">杞︽锛歿{ cneterData.currentPlanCarNum }}</div>
</div>
</div>
@@ -190,18 +200,25 @@
<div class="name">浠婃棩鍑哄簱閲�</div>
<div class="num"><span v-if="cneterData.crrentOutNum || cneterData.crrentOutNum == 0"
class="finish">{{
- cneterData.crrentOutNum.toFixed(0) }}</span>绠�</div>
+ cneterData.crrentOutNum }}</span>绠�</div>
<div class="unit">杞︽锛歿{ cneterData.crrentOutCarNum }}</div>
</div>
</div>
- <div class="item">
- <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
- <div class="content">
- <div class="name">鍓╀綑浠诲姟閲�</div>
- <div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
- class="today">{{
- cneterData.crrentRestNum.toFixed(0) }}</span>绠�</div>
- <div class="unit">杞︽锛歿{ cneterData.crrentRestCarNum }}</div>
+ <div class="tooltip_wrap">
+ <div class="item">
+ <img src="@/assets/images/LogisticsCenter/ic_jinriweichu@2x.png" alt="">
+ <div class="content">
+ <div class="name">鍓╀綑浠诲姟閲�</div>
+ <div class="num"><span v-if="cneterData.crrentRestNum || cneterData.crrentRestNum == 0"
+ class="today">{{
+ cneterData.crrentRestNum }}</span>绠�</div>
+ <div class="unit">杞︽锛歿{ cneterData.crrentRestCarNum }}</div>
+ </div>
+ </div>
+ <div class="tooltip">
+ <div class="triangle"></div>
+ <div>杩愯緭浠诲姟閲忥細{{ cneterData.needTransportOrderNum }}绠�</div>
+ <div>鍚屽煄鍏卞簱浠诲姟閲忥細{{ cneterData.noNeedTransportOrderNum }}绠�</div>
</div>
</div>
</div>
@@ -218,36 +235,70 @@
</div> -->
<div :style="{ width: cneterData.level3 }"
:class="{ box23: cneterData.crrentOutNum >= cneterData.hoursAbility }" class="box">
- <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
- <div class="icon"></div>
- <span>浠婃棩鍑哄簱</span>
+ <div class="tooltip_wrap">
+ <div v-if="cneterData.crrentOutNum < cneterData.hoursAbility" class="tag">
+ <div class="icon"></div>
+ <span>浠婃棩鍑哄簱</span>
+ </div>
+ <div class="tooltip">
+ <div class="triangle"></div>浠婃棩鍑哄簱閲忥細{{ cneterData.crrentOutNum }}绠�
+ </div>
</div>
</div>
<div :style="{ width: cneterData.level2 }" class="box box1">
- <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
- <div class="icon"></div>
- <span>褰撳墠浠诲姟</span>
+ <div class="tooltip_wrap">
+ <div v-if="cneterData.hoursAbility >= cneterData.currentPlanNum" class="tag tag1">
+ <div class="icon"></div>
+ <span>褰撳墠浠诲姟</span>
+ </div>
+ <div class="tooltip">
+ <div class="triangle"></div>褰撳墠浠诲姟閲忥細{{ cneterData.currentPlanNum }}绠�
+ </div>
</div>
</div>
</div>
<div class="side">
<div v-if="cneterData.crrentOutNum >= cneterData.hoursAbility" :style="{ width: cneterData.level33 }"
class="box box22">
- <div class="tag">
- <div class="icon"></div>
- <span>浠婃棩鍑哄簱</span>
+ <div class="tooltip_wrap">
+ <div class="tag">
+ <div class="icon"></div>
+ <span>浠婃棩鍑哄簱</span>
+ </div>
+ <div class="tooltip">
+ <div class="triangle"></div>浠婃棩鍑哄簱閲忥細{{ cneterData.crrentOutNum }}绠�
+ </div>
</div>
</div>
<div v-if="cneterData.hoursAbility <= cneterData.currentPlanNum"
:style="{ width: cneterData.level22 }" class="box box1 box11">
- <div class="tag tag1">
- <div class="icon"></div>
- <span>褰撳墠浠诲姟</span>
+ <div class="tooltip_wrap">
+ <div class="tag tag1">
+ <div class="icon"></div>
+ <span>褰撳墠浠诲姟</span>
+ </div>
+ <div class="tooltip">
+ <div class="triangle"></div>褰撳墠浠诲姟閲忥細{{ cneterData.currentPlanNum }}绠�
+ </div>
</div>
</div>
<!-- <div class="box"></div> -->
- <div class="scale" style="left: -12px;">8h</div>
- <div class="scale scale1">鏈�澶�</div>
+ <div class="scale" style="left: -12px;">
+ <div class="tooltip_wrap">
+ <span>8h</span>
+ <div class="tooltip">
+ <div class="triangle"></div>8灏忔椂鍑哄簱鑳藉姏锛歿{ cneterData.hoursAbility }}绠�
+ </div>
+ </div>
+ </div>
+ <div class="scale scale1">
+ <div class="tooltip_wrap">
+ <span>鏈�澶�</span>
+ <div class="tooltip">
+ <div class="triangle"></div>鏈�澶у嚭搴撹兘鍔涳細{{ cneterData.maxAbility }}绠�
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -342,7 +393,7 @@
鍏ㄧ渷锛�
<span>{{ data7.currentNum }}</span>
<span class="unit">杈� | </span>
- <span v-if="data7.totalNum">{{ ((data7.currentNum / data7.totalNum) * 100).toFixed(1) }}%</span>
+ <span v-if="data7.totalNum">{{ (data7.useRate * 100).toFixed(1) }}%</span>
</div>
</div>
<div class="echart5_wrap">
@@ -355,10 +406,14 @@
<div class="modal_wrap" v-if="showModal">
<div class="title_head">
<div class="left">
- <img src="@/assets/images/energy_ef/chuku_ic_car@2x.png" alt="">
+ <img src="@/assets/images/LogisticsCenter/ic_hetong.png" alt="">
<span>鍚堝悓鍙凤細{{ modalInfo.contractNumber }}</span>
</div>
<div class="tit_status">{{ modalInfo.orderStatusDesc }}</div>
+ </div>
+ <div v-if="modalInfo.overStock && modalInfo.overStock == 1" class="stock">
+ <img src="@/assets/images/LogisticsCenter/ic_tips@2x.png" alt="">
+ <span>鍥犲簱瀛樹笉瓒筹紝璁㈠崟鏆傛椂鏃犳硶閰嶈浇</span>
</div>
<div class="info">
<div class="item">
@@ -384,7 +439,7 @@
<div class="item">
<div class="dian"></div>
<div class="la">杞﹁締浣嶇疆锛�</div>
- <div class="val">{{ modalInfo.aa || '-' }}</div>
+ <div class="val">{{ modalInfo.position || '-' }}</div>
</div>
<div class="item">
<div class="dian"></div>
@@ -456,6 +511,7 @@
import VScaleScreen from 'v-scale-screen'
import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
+import axios from "axios"
import * as echarts from 'echarts'
import 'swiper/css/swiper.min.css'
import Swiper from 'swiper'
@@ -760,6 +816,39 @@
borderColor: '#fff'
},
},
+ dataZoom: [
+ {
+ type: 'slider', // 婊戝姩鏉＄被鍨�
+ orient: 'vertical',
+ left: 'left',
+ start: 0, // 璧峰浣嶇疆锛堢櫨鍒嗘瘮锛�
+ end: 40, // 缁撴潫浣嶇疆锛堢櫨鍒嗘瘮锛夛紝鎺у埗鍒濆鏄剧ず鑼冨洿
+ width: 1,
+ backgroundColor: '#04141d', // 婊戝姩鏉¤儗鏅壊
+ // dataBackground: 'none',
+ dataBackground: {
+ areaStyle: { opacity: 0 }, // 璁剧疆鑳屾櫙閫忔槑
+ lineStyle: { opacity: 0 } // 璁剧疆鑳屾櫙閫忔槑
+ },
+ borderColor: '#04141e', // 杈规棰滆壊
+ moveOnMouseWheel: true,
+ // showDetail: false, // 闅愯棌閫変腑鑼冨洿鐨勬枃瀛�
+ },
+ {
+ type: 'inside', // 鐢ㄤ簬鐩戝惉婊氳疆浜嬩欢
+ orient: 'vertical',
+ start: 0,
+ end: 40,
+ minSpan: 40,
+ dataBackground: {
+ areaStyle: { opacity: 0 } // 璁剧疆鑳屾櫙閫忔槑
+ },
+ maxSpan: 40,
+ zoomLock: true, // 閿佸畾缂╂斁锛堜粎鍏佽骞崇Щ锛�
+ moveOnMouseWheel: true, // 鍚敤婊氳疆骞崇Щ
+ // zoomOnMouseWheel: false // 绂佺敤婊氳疆缂╂斁
+ }
+ ],
grid: {
left: '3%',
right: '4%',
@@ -954,6 +1043,21 @@
showModal.value = true
kzorderInfo({ contractNumber: item.contractNumber }).then(res => {
modalInfo.value = res.data
+ // const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0'
+ const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3'
+ if (modalInfo.value.gisList && modalInfo.value.gisList.length > 0) {
+ const gisInfo = modalInfo.value.gisList[0]
+ if (gisInfo && gisInfo.gisList && gisInfo.gisList.length > 0) {
+ const adsInfo = gisInfo.gisList[gisInfo.gisList.length - 1]
+ const location = adsInfo.lon1 + ',' + adsInfo.lat1
+ axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`).then(res => {
+ console.log('res', res.data)
+ if (res.data.status == 1) {
+ modalInfo.value.position = res.data.regeocode.formatted_address
+ }
+ })
+ }
+ }
modalLoading.value = false
nextTick(() => {
@@ -1019,7 +1123,7 @@
image: fahuoImg, // 鍥炬爣鍥剧墖URL
imageSize: new AMap.Size(28, 32), // 鍥炬爣瀹為檯澶у皬
}),
- title: '鏍囪鐐�1', // 榧犳爣鎮仠鏃舵樉绀虹殑鏍囬
+ title: obj.deliveryEnterprise, // 榧犳爣鎮仠鏃舵樉绀虹殑鏍囬
})
map.add(marker1)
const marker2 = new AMap.Marker({
@@ -1029,7 +1133,7 @@
image: shouImg, // 鍥炬爣鍥剧墖URL
imageSize: new AMap.Size(28, 32), // 鍥炬爣瀹為檯澶у皬
}),
- title: '鏍囪鐐�1', // 榧犳爣鎮仠鏃舵樉绀虹殑鏍囬
+ title: obj.receiveEnterprise, // 榧犳爣鎮仠鏃舵樉绀虹殑鏍囬
})
map.add(marker2)
// 缁樺埗杞ㄨ抗
@@ -1062,8 +1166,8 @@
isLoadingTask.value = false
let temp = res.data.rows || []
transportTask.value = temp.map(item => {
- if (item.transportDate) {
- item.transportDate = item.transportDate.slice(5, 16)
+ if (item.createDate) {
+ item.createDate = item.createDate.slice(5, 16)
}
return item
})
@@ -1103,6 +1207,15 @@
label: {
show: false,
position: 'center'
+ },
+ emphasis: {
+ // 璁剧疆鎮诞鏃舵牱寮忎负绌�
+ scale: false, // 鍏抽棴鏀惧ぇ鏁堟灉
+ itemStyle: {
+ shadowBlur: 0, // 闃村奖妯＄硦搴︿负 0
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0)',
+ },
},
color: colors,
labelLine: {
@@ -1158,7 +1271,7 @@
// 8灏忔椂 璁″垝 浠婃棩
// obj.hoursAbility = 6000
// obj.maxAbility = 8000
- // obj.currentPlanNum = 5000
+ // obj.currentPlanNum = 22000
// obj.crrentOutNum = 7000
obj.level1 = ((obj.hoursAbility / obj.maxAbility) * 100).toFixed(2) + '%'
@@ -1742,7 +1855,7 @@
},
barBorderRadius: [30, 30, 0, 0],
},
- data: data7.value.detailList.map(i => i.totalNum)
+ data: data7.value.detailList.map(i => (i.totalNum - i.zaituNum))
},
{
name: '褰撴棩鎻愭姤杩愬姏',
@@ -1850,7 +1963,7 @@
initialSlide: 0,
direction: 'vertical', //绔栫洿鏂瑰悜
slidesPerView: 5,
- autoplay: autoplayFlag(transportTask.value, 5, 4000),
+ autoplay: autoplayFlag(transportTask.value, 5, 6000),
observer: true, //淇敼swiper鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
})
}
@@ -1933,6 +2046,7 @@
margin-top: 20px;
padding: 0px 10px 30px 20px;
position: relative;
+ height: 160px;
.content_wrap {
display: flex;
@@ -2193,6 +2307,36 @@
justify-content: space-between;
margin: 30px 0 14px;
+ .tooltip_wrap {
+ position: relative;
+
+ &:hover {
+ .tooltip {
+ display: block;
+ }
+ }
+
+ .tooltip {
+ display: none;
+ background: rgba(0, 30, 63, 0.6);
+ border: 1px solid #003F82;
+ backdrop-filter: blur(3px);
+ padding: 10px;
+ font-size: 15px;
+ color: #fff;
+ line-height: 19px;
+ font-weight: 400;
+ border-radius: 6px;
+ width: 230px;
+ position: absolute;
+ line-height: 24px;
+ left: 100%;
+ top: 50%;
+ transform: translate(20px, -42%);
+ z-index: 999999999999999;
+ }
+ }
+
.item {
display: flex;
@@ -2282,6 +2426,7 @@
.tag {
position: absolute;
+ z-index: 99999;
bottom: -30px;
right: 0;
transform: translate(50%, 0);
@@ -2306,6 +2451,14 @@
transform: rotate(45deg) translate(-50%, 0);
background: #FECE01;
z-index: -1;
+ }
+ }
+
+ .tooltip_wrap {
+ .tooltip {
+ z-index: 9999999999;
+ top: 34px;
+ transform: translate(70px, -42%);
}
}
@@ -2337,16 +2490,52 @@
background: linear-gradient(270deg, #f4b34a 0%, #FFEA70 100%);
}
+ .tooltip_wrap {
+ /* position: relative; */
+
+ &:hover {
+ .tooltip {
+ display: block;
+ }
+ }
+
+ .tooltip {
+ display: none;
+ background: #071b32;
+ border: 1px solid #003F82;
+ /* backdrop-filter: blur(3px); */
+ padding: 10px;
+ font-size: 15px;
+ color: #fff;
+ line-height: 19px;
+ font-weight: 400;
+ border-radius: 6px;
+ width: 200px;
+ position: absolute;
+ z-index: 99999999;
+ left: 100%;
+ top: 50%;
+ transform: translate(30px, -42%);
+ }
+ }
+
.scale {
position: absolute;
top: -24px;
left: 0;
font-size: 16px;
color: #D2E0FF;
+
+ .tooltip_wrap {
+ .tooltip {
+ width: 240px;
+ transform: translate(20px, -50%);
+ }
+ }
}
.scale1 {
- left: 84%;
+ left: 92%;
min-width: 36px;
}
@@ -2458,17 +2647,21 @@
left: 130px;
z-index: 999;
top: -5px;
- width: 407px;
- height: 134px;
+ width: 420px;
+ height: 148px;
background: rgba(0, 30, 63, 0.6);
border: 1px solid #003F82;
backdrop-filter: blur(3px);
padding: 10px;
font-size: 13px;
- color: #e2ebfd;
+ color: #ebf1fb;
line-height: 19px;
font-weight: 400;
border-radius: 6px;
+
+ div {
+ margin-bottom: 3px;
+ }
.triangle {
width: 12px;
@@ -2490,6 +2683,65 @@
}
}
}
+}
+
+.question1 {
+ display: flex;
+ align-items: center;
+
+ .hover_con {
+ position: relative;
+
+ &:hover {
+ .hover_wrap {
+ display: block;
+ }
+ }
+ }
+
+
+ .hover_wrap {
+ display: none;
+
+ position: absolute;
+ left: 108%;
+ z-index: 999;
+ top: -5px;
+ width: 212px;
+ height: 62px;
+ background: rgba(0, 30, 63, 0.6);
+ border: 1px solid #003F82;
+ backdrop-filter: blur(3px);
+ padding: 10px;
+ font-size: 15px;
+ color: #e9f0ff;
+ line-height: 19px;
+ font-weight: 400;
+ border-radius: 6px;
+
+ div {
+ margin-bottom: 3px;
+ }
+
+
+ .title {
+ color: #e2ebfd;
+ }
+ }
+}
+
+.triangle {
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ top: 36%;
+ transform: translate(-50%, -50%);
+ left: -6px;
+ transform: rotate(45deg);
+ border-left: 1px solid #003F82;
+ border-bottom: 1px solid #003F82;
+ background: rgba(0, 30, 63, 0.6);
+ /* backdrop-filter: blur(3px); */
}
.main_header {
@@ -2623,11 +2875,23 @@
}
}
+ .stock {
+ display: flex;
+ align-items: center;
+ color: #dd5d2a;
+ margin-bottom: 8px;
+
+ img {
+ margin-right: 6px;
+ width: 14px;
+ }
+ }
+
.title_head {
display: flex;
align-items: center;
justify-content: space-between;
- margin-bottom: 20px;
+ margin-bottom: 8px;
.left {
display: flex;
@@ -2651,12 +2915,12 @@
flex-wrap: wrap;
background-color: #0d2845;
border-radius: 4px;
- padding: 10px 20px 0;
+ padding: 10px 20px 0px;
margin-bottom: 16px;
.item {
display: flex;
- align-items: center;
+ /* align-items: center; */
font-size: 13px;
width: 55%;
margin-bottom: 8px;
@@ -2671,10 +2935,16 @@
background-color: #fff;
border-radius: 50%;
margin-right: 4px;
+ margin-top: 7px;
}
.la {
color: #01D9FE;
+ width: 70px;
+ }
+
+ .val {
+ flex: 1;
}
}
}
@@ -2838,6 +3108,7 @@
.hover_wrap {
left: 175px;
+ height: 80px;
}
.icon {
--
Gitblit v1.9.3