From ebac43f818fce59b614be4af62aee220b90ef272 Mon Sep 17 00:00:00 2001 From: zjc <1034206993@qq.com> Date: Tue, 14 Jan 2025 19:01:09 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=87=8D=E6=96=B0=E5=AF=B9?= =?UTF-8?q?=E6=8E=A5=E9=A6=96=E9=A1=B5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/home.js | 8 +- src/api/request.js | 11 +- src/components/CoreVideo/index.vue | 9 +- src/components/Correspondence/index.vue | 2 +- src/components/ScrollNumber/index.vue | 4 +- src/hooks/socket.js | 48 +- src/stores/counter.js | 12 - src/stores/home.js | 143 +++ src/views/home/components/age.vue | 19 +- src/views/home/components/box-1.vue | 187 +-- src/views/home/components/box-2.vue | 127 +- src/views/home/components/box-3.vue | 169 +-- src/views/home/components/gauge.vue | 20 +- src/views/home/components/jam-count.vue | 133 +- src/views/home/components/jam-duration.vue | 2 +- src/views/home/components/occupancy.vue | 88 +- src/views/home/components/ticket.vue | 30 +- src/views/home/components/top.vue | 18 +- src/views/home/components/traffic.vue | 102 -- src/views/home/components/vacancy.vue | 343 ++--- src/views/home/components/vehicle-source.vue | 119 ++ src/views/home/index.vue | 5 +- src/views/testing/components/box-2.vue | 1205 +++++++++--------- src/views/testing/components/box-5.vue | 1161 +++++++++-------- src/views/testing/index.vue | 74 +- src/views/workOrder/components/box-2.vue | 3 +- src/views/workOrder/components/box-3.vue | 41 +- src/views/workOrder/components/pie.vue | 300 +++-- 28 files changed, 2250 insertions(+), 2133 deletions(-) delete mode 100644 src/stores/counter.js create mode 100644 src/stores/home.js delete mode 100644 src/views/home/components/traffic.vue create mode 100644 src/views/home/components/vehicle-source.vue diff --git a/src/api/home.js b/src/api/home.js index 3279aaa..d65e8b5 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -11,8 +11,8 @@ export function getWeatherApi() { // 核心景区视频 export function getVideoListApi(data) { return request({ - url: 'http://36.138.38.16:6180/fjtcc-api/api/video/list', - method: 'get', + url: '/api/largeScreen/video/list', + method: 'post', params: data }) } @@ -20,8 +20,8 @@ export function getVideoListApi(data) { // 刷新播放地址 export function postRefreshApi(data) { return request({ - url: 'http://36.138.38.16:6180/fjtcc-api/api/video/refresh', - method: 'POST', + url: '/api/largeScreen/video/refresh', + method: 'post', data }) } diff --git a/src/api/request.js b/src/api/request.js index 4c0b2ca..51fa072 100644 --- a/src/api/request.js +++ b/src/api/request.js @@ -2,6 +2,11 @@ import axios from 'axios' import { useRouter } from 'vue-router' import { ElMessage } from 'element-plus' +// +let devToken = + 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ' +let proToken = + 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.dSLZekRsYf5ZZDCYqFEOgHTi4GeHD0m10gGHXrbgpc-hD52Zt7Vw05cxhQ-lzY29yf2IxH0oYi28DBfHdtf9SA' const router = useRouter() /** @@ -9,11 +14,11 @@ const router = useRouter() */ const instance = axios.create({ // baseURL: 'http://36.138.38.16:6180/fjtcc-api', - baseURL: 'http://36.138.38.16:8001/fjtcc-api', + // baseURL: 'http://36.138.38.16:8001/fjtcc-api', + baseURL: ' http://172.22.15.170/fjtcc-api', timeout: 100000, headers: { - Authorization: - 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImE1OWFmNWYwLTU3OWItNDJkNy1hZDJhLTY0Y2JlODA5ZWI1NiJ9.BTxvu6jUWbN0qONWf5K6VzXopE8T8qXzKuX-mij21VJT4U0LdgnqToyqeNDQ2OyJ6cvpdJBzQ9mEEb-dnwrTpQ', + Authorization: proToken, 'Content-Type': 'application/json;charset=UTF-8' } }) diff --git a/src/components/CoreVideo/index.vue b/src/components/CoreVideo/index.vue index 0008466..ee565d2 100644 --- a/src/components/CoreVideo/index.vue +++ b/src/components/CoreVideo/index.vue @@ -55,16 +55,13 @@ list.value.forEach(async (item, index) => { var video = document.getElementById(`video${index}`) let res1 = await postRefreshApi({ + type: 'hls', businessVideoDisplayPosition: item.businessVideoDisplayPosition, cameraIndexCode: item.cameraIndexCode }) - let hlsUrl = res1.data.hlsUrl.replace( - 'http://172.22.15.170:8050', - 'http://36.138.38.16:6150' - ) - item.hlsUrl = hlsUrl + item.hlsUrl = res1.data.hlsUrl const hls = new Hls() - hls.loadSource(hlsUrl) + hls.loadSource(res1.data.hlsUrl) hls.attachMedia(video) hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play() diff --git a/src/components/Correspondence/index.vue b/src/components/Correspondence/index.vue index bdd0353..ba148b4 100644 --- a/src/components/Correspondence/index.vue +++ b/src/components/Correspondence/index.vue @@ -62,7 +62,7 @@ height: vh(28); font-weight: 400; font-size: vw(12); - color: #0096ff; + color: #fff; display: flex; background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%); & > div { diff --git a/src/components/ScrollNumber/index.vue b/src/components/ScrollNumber/index.vue index ba19a98..61f2c0b 100644 --- a/src/components/ScrollNumber/index.vue +++ b/src/components/ScrollNumber/index.vue @@ -31,9 +31,9 @@ const toOrderNum = (num) => { num = num.toString() orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组 - nextTick(() => { + setTimeout(() => { setNumberTransform() - }) + }, 500) } watch( () => props.count, diff --git a/src/hooks/socket.js b/src/hooks/socket.js index 2cb5fda..23f34d3 100644 --- a/src/hooks/socket.js +++ b/src/hooks/socket.js @@ -1,8 +1,10 @@ import { ref } from 'vue' +import { useHomeStore } from '@/stores/home' + +const homeStore = useHomeStore() export function useWebSocket(url) { let socket = ref(null) // socket对象 - let data = ref(null) // 存储接收到的数据 let isConnected = ref(false) // 是否连接成功 const connectWebSocket = () => { @@ -21,9 +23,47 @@ export function useWebSocket(url) { } socket.value.onmessage = (message) => { // 处理接收到的消息 - console.log('Received message:', JSON.parse(message.data)) if (JSON.parse(message.data)) { - data.value = JSON.parse(message.data) + let data = JSON.parse(message.data) + console.log(data, '接收到的消息') + switch (data.type) { + case 'userPortrait': + homeStore.setUserPortraitData(data.data) + break + case 'admission': + homeStore.setScenicData(data) + break + case 'queuingInScenicSpots': + homeStore.setScenicQueueData(data) + break + case 'queuingScenicSpots': + homeStore.setScenicBearData(data) + break + case 'visitorInfo': + homeStore.setVisitorInfoData(data.data) + break + case 'visitorDataInfo': + homeStore.setVisitorInfoList(data.data) + break + case 'baiduMap': + homeStore.setBaiduMapData(data.data) + break + case 'wordkOrderlist': + homeStore.setWordkOrderList(data.data) + break + case 'trafficInformation': + homeStore.setTrafficInfoData(data) + break + case 'carStopInfo': + homeStore.setCarStopInfoData(data) + break + case 'carShipData': + homeStore.setCarShipData(data.data) + break + case 'hotelData': + homeStore.setHotelData(data.data) + break + } } } socket.value.onclose = () => { @@ -47,5 +87,5 @@ export function useWebSocket(url) { } }) - return { socket, data, isConnected, connectWebSocket, sendMessage } + return { socket, isConnected, connectWebSocket, sendMessage } } diff --git a/src/stores/counter.js b/src/stores/counter.js deleted file mode 100644 index b6757ba..0000000 --- a/src/stores/counter.js +++ /dev/null @@ -1,12 +0,0 @@ -import { ref, computed } from 'vue' -import { defineStore } from 'pinia' - -export const useCounterStore = defineStore('counter', () => { - const count = ref(0) - const doubleCount = computed(() => count.value * 2) - function increment() { - count.value++ - } - - return { count, doubleCount, increment } -}) diff --git a/src/stores/home.js b/src/stores/home.js new file mode 100644 index 0000000..d840788 --- /dev/null +++ b/src/stores/home.js @@ -0,0 +1,143 @@ +import { ref } from 'vue' +import { defineStore } from 'pinia' + +export const useHomeStore = defineStore('home', () => { + // 景区信息数据 + let scenicData = ref({ + scenicSpot: [ + { value: 0, name: '全县景区数量' }, + { value: 0, name: '核心景区数' }, + { value: 0, name: '低感景区总数' } + ], + data: [ + { name: '当日购票量：', value: 0 }, + { name: '未来3天购票量：', value: 0 }, + { name: '3天后购票量：', value: 0 } + ] + }) + // 景区排队数据 + let scenicQueueData = ref({ + dataList: [], + info: [] + }) + // 景区承载量 + let scenicBearData = ref({ + dataList: [], + info: [] + }) + // 用户画像数据 + let userPortraitData = ref({ + genderRate: [], + provinceRate: [], + channel: [], + ageRate: [] + }) + // 景区游客统计 + let visitorInfoData = ref({ + total_count_this_year: 0, + total_count_today: 0, + total_count_today_within_three_hours: 0 + }) + // 景区拥堵情况统计 + let visitorInfoList = ref([]) + // 百度地图数据 + let baiduMapData = ref(null) + // 工单列表 + let wordkOrderList = ref([]) + // 交通信息 + let trafficInfoData = ref({ + data: { + congestion: [], + congestionList: [], + countItem: { + max_congestion_duration: 0, + now_yongdu_sum: 0, + yongdu_luduan_count: 0, + yongdu_sum: 0 + }, + countRate: [], + timeRate: [] + }, + info: { + dqydld: 0, + ldzs: 0, + zdydsc: 0, + zydcs: 0 + } + }) + // 停车信息 + let carStopInfoData = ref({ + countInfo: { ckzs: 0, ysycws: 0, zcws: 0 }, + dataList: [], + dataList1: [], + dataList2: [], + spotInfo: [] + }) + // 车船信息 + let carShipData = ref(null) + // 酒店数据 + let hotelData = ref(null) + + const setVisitorInfoList = (val) => { + visitorInfoList.value = val + } + const setHotelData = (val) => { + hotelData.value = val + } + const setCarShipData = (val) => { + carShipData.value = val + } + const setCarStopInfoData = (val) => { + carStopInfoData.value = val + } + const setTrafficInfoData = (val) => { + trafficInfoData.value = val + } + const setVisitorInfoData = (val) => { + visitorInfoData.value = val + } + const setScenicBearData = (val) => { + scenicBearData.value = val + } + const setScenicQueueData = (val) => { + scenicQueueData.value = val + } + const setWordkOrderList = (val) => { + wordkOrderList.value = val + } + const setBaiduMapData = (val) => { + baiduMapData.value = val + } + const setScenicData = (val) => { + scenicData.value = val + } + const setUserPortraitData = (val) => { + userPortraitData.value = val + } + return { + scenicData, + userPortraitData, + baiduMapData, + wordkOrderList, + scenicQueueData, + scenicBearData, + visitorInfoData, + visitorInfoList, + trafficInfoData, + carStopInfoData, + carShipData, + hotelData, + setScenicData, + setUserPortraitData, + setBaiduMapData, + setWordkOrderList, + setScenicQueueData, + setScenicBearData, + setVisitorInfoData, + setVisitorInfoList, + setTrafficInfoData, + setCarStopInfoData, + setCarShipData, + setHotelData + } +}) diff --git a/src/views/home/components/age.vue b/src/views/home/components/age.vue index dae3c84..572f0c7 100644 --- a/src/views/home/components/age.vue +++ b/src/views/home/components/age.vue @@ -5,18 +5,19 @@ @@ -466,7 +422,7 @@ flex: 1; font-weight: 400; font-size: vw(12); - color: #52b8ff; + color: #fff; } } .content { @@ -492,9 +448,12 @@ line-height: vh(27); text-align: center; background: #074686; - &:nth-child(2n + 1) { + &:nth-child(odd) { background: rgba(0, 150, 255, 0.1); } + &:nth-child(even) { + background: #074686; + } & > div { flex: 1; } diff --git a/src/views/home/components/gauge.vue b/src/views/home/components/gauge.vue index dc46b5b..8de0833 100644 --- a/src/views/home/components/gauge.vue +++ b/src/views/home/components/gauge.vue @@ -1,3 +1,4 @@ + @@ -23,9 +24,14 @@ watch( () => props.value, - () => { - init() - } + (val) => { + if (val) { + nextTick(() => { + init() + }) + } + }, + { immediate: true } ) const init = () => { @@ -97,12 +103,12 @@ }, rich: { value: { - fontSize: fitChartSize(18), + fontSize: fitChartSize(14), fontWeight: 'bolder', color: '#02F9FA' }, unit: { - fontSize: fitChartSize(18), + fontSize: fitChartSize(14), color: '#02F9FA' } } @@ -120,10 +126,6 @@ } setOption(params) } - - onMounted(() => { - init() - }) diff --git a/src/views/home/components/ticket.vue b/src/views/home/components/ticket.vue index b4b14ec..bc9d031 100644 --- a/src/views/home/components/ticket.vue +++ b/src/views/home/components/ticket.vue @@ -1,30 +1,24 @@ + diff --git a/src/views/home/components/traffic.vue b/src/views/home/components/traffic.vue deleted file mode 100644 index b45f68d..0000000 --- a/src/views/home/components/traffic.vue +++ /dev/null @@ -1,102 +0,0 @@ - - - - - diff --git a/src/views/home/components/vacancy.vue b/src/views/home/components/vacancy.vue index 06d1cfe..b50d7dc 100644 --- a/src/views/home/components/vacancy.vue +++ b/src/views/home/components/vacancy.vue @@ -1,189 +1,194 @@ diff --git a/src/views/home/components/vehicle-source.vue b/src/views/home/components/vehicle-source.vue new file mode 100644 index 0000000..40df229 --- /dev/null +++ b/src/views/home/components/vehicle-source.vue @@ -0,0 +1,119 @@ + + + + + + diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 308396e..6dedeb5 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -10,14 +10,13 @@ import box3 from './components/box-3.vue' import { useWebSocket } from '@/hooks/socket' - const { data, isConnected, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party') - - provide('homeData', data) + const { isConnected, sendMessage } = useWebSocket('ws://36.138.38.16:81/ws/third-party') watch( () => isConnected.value, (val) => { if (val) { + console.log('--------------------------------------------') sendMessage( JSON.stringify({ action: 'start', diff --git a/src/views/testing/components/box-2.vue b/src/views/testing/components/box-2.vue index efc1637..49169fc 100644 --- a/src/views/testing/components/box-2.vue +++ b/src/views/testing/components/box-2.vue @@ -1,35 +1,35 @@ \ No newline at end of file + .line-chart { + width: 100%; + height: vh(240); + } + .chart-p { + position: relative; + .check-label { + position: absolute; + right: vw(20); + top: vh(15); + span { + min-width: vw(55); + padding: vw(5); + background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%); + border-radius: vw(50); + // border: 1px solid rgba(0,114,220,0.3); + margin-left: vw(5); + display: inline-block; + font-weight: 400; + font-size: vw(13); + color: #0084ff; + text-align: center; + font-style: normal; + text-transform: none; + } + .active { + background: linear-gradient(270deg, #37d8fc 0%, #0084ff 100%); + border-radius: vw(50); + border: 1px solid rgba(0, 114, 220, 0.3); + color: #fff; + } + } + } + .box-detection { + margin-top: vh(120); + width: vw(820); + height: vh(950); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%); + border-radius: 0px 0px 0px 0px; + .detection-top { + width: 100%; + height: vh(580); + background-color: #fff; + .map-img { + width: 100%; + height: 100%; + } + } + .detection-bom { + justify-content: space-between; + .d-left { + width: vw(405); + .left { + width: 100%; + height: vh(240); + } + } + .d-right { + width: vw(405); + } + .box { + width: 100%; + padding: vw(5); + margin-top: vh(5); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + &:nth-child(1) { + margin-right: vw(10); + } + .title-2 { + width: vw(253); + height: vh(28); + display: flex; + align-items: center; + background-image: url('@/assets/images/title-5.png'); + background-size: 100% 100%; + & > span { + padding-left: vw(22); + font-weight: bold; + font-size: vw(15); + background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + .statistic { + display: flex; + margin-top: vh(12); + width: 100%; + height: vh(88); + background-image: url('@/assets/images/bg-4.png'); + background-size: 100% 100%; + &-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + &-title { + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + } + &-value { + margin-top: vh(10); + font-weight: bold; + font-size: vw(24); + color: #02f9fa; + } + .count { + font-weight: bold; + font-size: vw(28); + color: #ff4400 !important; + } + .prefix, + .suffix { + color: #ff4400; + font-size: vw(12); + } + } + .title-3 { + position: relative; + width: vw(344); + height: vh(12); + margin-top: vh(20); + background-image: url('@/assets/images/title-6.png'); + background-size: 100% 100%; + + & > span { + position: absolute; + bottom: vh(4); + left: vw(20); + font-size: vw(15); + font-weight: bold; + background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + } + .t-title { + margin: vh(10) auto; + width: 100%; + height: vh(32); + font-weight: 800; + font-size: vw(16); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + background-image: url('@/assets/images/title-4.png'); + background-size: 100% 100%; + } + .t-census { + justify-content: center; + align-items: center; + background-image: url('@/assets/images/i-data-bg-1.png'); + background-size: 100% 100%; + padding: vw(10); + .t-icon { + width: vw(45); + height: vh(48); + } + .item { + flex: 1; + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + line-height: vh(16); + text-align: center; + font-style: normal; + text-transform: none; + .color1 { + display: block; + font-weight: bold; + font-size: vw(24); + color: #ffffff; + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + } + .color2 { + display: block; + font-weight: bold; + font-size: vw(24); + color: #f15a25; + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + } + .color3 { + display: block; + font-weight: bold; + font-size: vw(24); + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + color: #a70000; + } + } + } + } + } + .h-flex { + display: flex; + justify-content: space-between; + .left { + flex: 1; + width: vw(260); + } + .right { + margin-left: vw(20); + width: vw(120); + .li { + position: relative; + font-weight: 400; + font-size: vw(14); + color: #ffffff; + line-height: 16px; + text-align: left; + font-style: normal; + text-transform: none; + position: relative; + padding-left: vw(30); + padding: 0 vw(10); + padding-left: vw(15); + background: linear-gradient(90deg, #1b5ec7 0%, rgba(27, 94, 199, 0) 100%); + border-radius: 0px 0px 0px 0px; + height: vh(24); + line-height: vh(24); + margin-bottom: vh(8); + // opacity: 0.4; + .rk-img { + position: absolute; + width: vw(24); + height: vh(24); + line-height: vh(24); + left: vw(-12); + top: 50%; + display: block; + background-image: url('/src/assets/images/rk-4.png'); + background-size: 100% 100%; + transform: translateY(-50%); + text-align: center; + } + } + .li-1 { + background: linear-gradient(90deg, #ffc10b 0%, rgba(255, 209, 44, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-1.png'); + } + } + .li-2 { + background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-2.png'); + } + } + .li-3 { + background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-3.png'); + } + } + } + } + diff --git a/src/views/testing/components/box-5.vue b/src/views/testing/components/box-5.vue index b1bdf77..b954d64 100644 --- a/src/views/testing/components/box-5.vue +++ b/src/views/testing/components/box-5.vue @@ -1,75 +1,74 @@ \ No newline at end of file + .line-chart { + width: 100%; + height: vh(240); + } + .box-detection { + margin-top: vh(120); + width: vw(820); + height: vh(950); + background: linear-gradient(321deg, #0b2f64 0%, #062b57 91%, rgba(5, 40, 79, 0) 100%); + border-radius: 0px 0px 0px 0px; + .detection-top { + width: 100%; + height: vh(580); + background-color: #fff; + .map-img { + width: 100%; + height: 100%; + } + } + .detection-bom { + justify-content: space-between; + .d-left { + width: vw(405); + .left { + width: 100%; + height: vh(240); + } + } + .d-right { + width: vw(405); + } + .box { + width: 100%; + padding: vw(5); + margin-top: vh(5); + background-image: url('@/assets/images/bg-3.png'); + background-size: 100% 100%; + &:nth-child(1) { + margin-right: vw(10); + } + .title-2 { + width: vw(253); + height: vh(28); + display: flex; + align-items: center; + background-image: url('@/assets/images/title-5.png'); + background-size: 100% 100%; + & > span { + padding-left: vw(22); + font-weight: bold; + font-size: vw(15); + background-image: linear-gradient(to bottom, #ffffff 0%, #75c1ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + .statistic { + display: flex; + margin-top: vh(12); + width: 100%; + height: vh(88); + background-image: url('@/assets/images/bg-4.png'); + background-size: 100% 100%; + &-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + &-title { + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + } + &-value { + margin-top: vh(10); + font-weight: bold; + font-size: vw(24); + color: #02f9fa; + } + .count { + font-weight: bold; + font-size: vw(28); + color: #ff4400 !important; + } + .prefix, + .suffix { + color: #ff4400; + font-size: vw(12); + } + } + .title-3 { + position: relative; + width: vw(344); + height: vh(12); + margin-top: vh(20); + background-image: url('@/assets/images/title-6.png'); + background-size: 100% 100%; + + & > span { + position: absolute; + bottom: vh(4); + left: vw(20); + font-size: vw(15); + font-weight: bold; + background-image: linear-gradient(to bottom, #ffffff 0%, #0096ff 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; /* 兼容WebKit内核浏览器 */ + color: transparent; /* 兼容其他浏览器 */ + } + } + } + .t-title { + margin: vh(10) auto; + width: 100%; + height: vh(32); + font-weight: 800; + font-size: vw(16); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + background-image: url('@/assets/images/title-4.png'); + background-size: 100% 100%; + } + .t-census { + justify-content: center; + align-items: center; + background-image: url('@/assets/images/i-data-bg-1.png'); + background-size: 100% 100%; + padding: vw(10); + .t-icon { + width: vw(45); + height: vh(48); + } + .item { + flex: 1; + font-weight: 400; + font-size: vw(14); + color: rgba(255, 255, 255, 0.9); + line-height: vh(16); + text-align: center; + font-style: normal; + text-transform: none; + .color1 { + display: block; + font-weight: bold; + font-size: vw(24); + color: #ffffff; + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + } + .color2 { + display: block; + font-weight: bold; + font-size: vw(24); + color: #f15a25; + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + } + .color3 { + display: block; + font-weight: bold; + font-size: vw(24); + line-height: 28px; + text-align: center; + font-style: normal; + text-transform: none; + color: #a70000; + } + } + } + } + } + .h-flex { + display: flex; + justify-content: space-between; + .left { + flex: 1; + width: vw(260); + } + .right { + margin-left: vw(20); + width: vw(120); + .li { + position: relative; + font-weight: 400; + font-size: vw(14); + color: #ffffff; + line-height: 16px; + text-align: left; + font-style: normal; + text-transform: none; + position: relative; + padding-left: vw(30); + padding: 0 vw(10); + padding-left: vw(15); + background: linear-gradient(90deg, #1b5ec7 0%, rgba(27, 94, 199, 0) 100%); + border-radius: 0px 0px 0px 0px; + height: vh(24); + line-height: vh(24); + margin-bottom: vh(8); + // opacity: 0.4; + .rk-img { + position: absolute; + width: vw(24); + height: vh(24); + line-height: vh(24); + left: vw(-12); + top: 50%; + display: block; + background-image: url('/src/assets/images/rk-4.png'); + background-size: 100% 100%; + transform: translateY(-50%); + text-align: center; + } + } + .li-1 { + background: linear-gradient(90deg, #ffc10b 0%, rgba(255, 209, 44, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-1.png'); + } + } + .li-2 { + background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-2.png'); + } + } + .li-3 { + background: linear-gradient(90deg, #919191 0%, rgba(175, 175, 175, 0) 100%); + .rk-img { + background-image: url('/src/assets/images/rk-3.png'); + } + } + } + } + diff --git a/src/views/testing/index.vue b/src/views/testing/index.vue index b487a1a..d64bcea 100644 --- a/src/views/testing/index.vue +++ b/src/views/testing/index.vue @@ -1,8 +1,8 @@