jiangs/transitPlatForm-Vue3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏更改

Browse Source
This commit is contained in:
wuyy 2026-08-28 18:01:15 +08:00
parent 42378f91d0
commit 1c6983f3bb
3 changed files with 268 additions and 288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

135
src/views/regional/statistics/overview/css/index.css
View File

@ -8,13 +8,15 @@
background: url(../images/bg2.jpg) no-repeat;
background-size: 100% 100%;
padding-top: 0rem;
padding: 0rem 3.125rem;
padding: 0rem 1.25rem 0 1.875rem;
overflow: hidden;
}
.container {
display: flex;
height: calc(100vh - 3.75rem);
}
/*.conIn{
display:flex;
display: -webkit-flex;}*/
.title {
width: 100%;
font-size: 1.875rem;
@ -22,6 +24,7 @@
color: #0efdff;
text-align: center;
font-weight: bold;
height: 2.1875rem;
}
.border_bg_leftTop {
@ -70,20 +73,21 @@
.leftMain {
width: 75%;
float: left;
padding-right: 1.5625rem;
padding-right: .625rem;
padding-top: 0;
display: flex;
flex-direction: column;
}
.rightMain {
width: 25%;
float: left;
padding-top: 2.5rem;
}
.leftMain_top {
width: 100%;
padding-bottom: 1.5625rem;
margin-bottom: .625rem;
}
.leftMain_top ul {
@ -133,7 +137,7 @@
color: #fff;
position: relative;
z-index: 10;
}
}
.leftMain_top ul li .liIn .zi .span1 {
margin-right: 1.5625rem;
@ -142,14 +146,17 @@
.leftMain_middle {
width: 100%;
padding-bottom: 1.5625rem;
flex: 1;
display: flex;
display: -webkit-flex;
}
.leftMain_middle .leftMain_middle_left {
width: 60%;
padding-right: 1.5625rem;
width: 70%;
padding-right: .625rem;
height: 100%;
display: flex;
flex-direction: column;
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn {
@ -158,10 +165,12 @@
min-height: 3.75rem;
position: relative;
padding: .625rem;
flex: 1;
}
.leftMain_middle_leftIn_zhe {
margin-top: 2vh;
flex: 1;
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn h3 {
@ -172,18 +181,21 @@
}
.leftMain_middle .leftMain_middle_left .leftMain_middle_leftIn .biaoge {
min-height: 12.5rem;
min-height: 0;
height: calc(100% - 2.1875rem);
}
.leftMain_middle .leftMain_middle_right {
width: 40%;
width: 30%;
height: 100%;
position: relative;
border: 0.125rem solid rgba(14, 253, 255, 0.5);
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
border: 0.125rem solid rgba(14, 253, 255, 0.5);
width: 100%;
min-height: 3.75rem;
position: relative;
padding: .625rem;
}
@ -201,28 +213,27 @@
/*左边中间部分排行榜*/
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai {
width: 100%;
height: 58vh;
overflow-y: auto;
}
/* .leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul{
height: 68vh;
} */
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
display: flex;
display: -webkit-flex;
align-items: center;
color: #fff;
font-size: 0.9375rem;
font-size: 1.125rem;
font-weight: 700;
height: 2.5rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left {
width: 30%;
position: relative;
padding-left: 1.25rem;
padding-left: .625rem;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .bot {
@ -258,16 +269,15 @@
background: #05d1fc;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left zi {}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
width: 50%;
height: 1.25rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 125rem;
overflow: hidden;
position: relative;
overflow: hidden;
position: relative;
}
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
@ -404,37 +414,34 @@
/*右边部分*/
.rightMain .rightMain_top {
border: 0.125rem solid rgba(14, 253, 255, 0.5);
width: 100%;
padding-bottom: 1.5625rem;
position: relative;
height: 100%;
}
.rightMain .rightMain_topIn {
border: 0.125rem solid rgba(14, 253, 255, 0.5);
width: 100%;
min-height: 3.75rem;
position: relative;
padding: .625rem;
}
.proportion {
height: 78vh;
overflow-y: auto;
}
.proportion {}
.proportion ul li .liIn {
display: flex;
display: -webkit-flex;
align-items: center;
color: #fff;
font-size: 0.9375rem;
height: 2.8125rem;
}
font-size: 1.125rem;
font-weight: 700;
margin-bottom: .625rem;
}
.proportion ul li .liIn .liIn_left {
width: 43%;
width: 50%;
position: relative;
padding-left: 1.25rem;
padding-left: .625rem;
}
.proportion ul li .liIn .liIn_left .bot {
@ -451,12 +458,12 @@
}
.proportion ul li .liIn .liIn_line {
width: 40%;
width: 32%;
height: 1.25rem;
background: rgba(255, 255, 255, 0.5);
border-radius: 125rem;
overflow: hidden;
position: relative;
overflow: hidden;
position: relative;
}
.proportion ul li .liIn .liIn_line .line_lineIn {
@ -470,10 +477,10 @@
.line_lineIn .per {
position: absolute;
top: 0;
left: 50%;
left: 30%;
}
@-webkit-keyframes widthMove1 {
0% {
width: 0%;
@ -484,7 +491,7 @@
}
}
.proportion ul li .liIn .num {
width: 18%;
@ -587,10 +594,10 @@
}
.title_nums {
font-size: 1.25rem;
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: .3125rem 0 .625rem ;
margin: .3125rem 0 .625rem;
}
.nums_box {
@ -604,34 +611,36 @@
/* 适配你深蓝色科技风的滚动条 */
/* 整体滚动条容器 */
::-webkit-scrollbar {
width: 10px; /* 控制滚动条宽度，和你图中一致 */
width: 10px;
/* 控制滚动条宽度，和你图中一致 */
height: 10px;
}
/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
background: rgba(0, 150, 255, 0.1); /* 半透明蓝底，和界面融合 */
background: rgba(0, 150, 255, 0.1);
/* 半透明蓝底，和界面融合 */
border-radius: 4px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: linear-gradient(
to bottom,
#00d4ff, /* 顶部亮青色，和你的条形颜色呼应 */
#0099cc /* 底部深蓝色，和背景协调 */
);
background: linear-gradient(to bottom,
#00d4ff,
/* 顶部亮青色，和你的条形颜色呼应 */
#0099cc
/* 底部深蓝色，和背景协调 */
);
border-radius: 4px;
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5); /* 发光效果，增强科技感 */
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
/* 发光效果，增强科技感 */
}
/* 滑块 hover 效果 */
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(
to bottom,
#00f0ff,
#00aadd
);
background: linear-gradient(to bottom,
#00f0ff,
#00aadd);
box-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
}

421
src/views/regional/statistics/overview/index.vue
View File

@ -1,132 +1,130 @@
<template>
<div class="bg">
<div class="title">区域检验数据中心</div>
<div class="leftMain">
<div class="leftMain_top">
<div class="leftMain_topIn">
<div class="title_nums">当月累计数据</div>
<ul>
<li v-for="item in sourceMonth">
<div class="liIn">
<div class="nums_box">
<h3>{{ item.name }}</h3>
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
<div class="title_nums">当年累计数据</div>
<ul>
<li v-for="item in sourceYear">
<div class="liIn">
<div class="nums_box">
<h3>{{ item.name }}</h3>
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>委托机构当月送检标本数量</h3>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="biaoge" style="width:100%; height:25vh" ref="chartmain" id="chartmain"></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
<div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
<h3>近一个月送检标本数量趋势图</h3>
<div class="biaoge" style="width:100%; height:25vh" ref="chartmain_zhe" id="chartmain_zhe"></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>当月标本全流程监控情况</h3>
<div class="biaoge biaoge_pai">
<div class="biaoge_paiIn">
<ul>
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
:limitMoveNum="14"> -->
<li v-for="(item, i) in dayCounts">
<div class="liIn">
<div class="liIn_left"><span class="zi">{{ item.dict_name }}</span></div>
<div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.percent}` }">
<div class="per">{{ item.percent }}</div>
</div>
</div>
<p class="num">{{ item.sl }}</p>
</div>
</li>
<!-- </Vue3SeamlessScroll> -->
</ul>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
<div class="back-btn" @click="goBack">
<img src="@/assets/images/back.png" alt="">
</div>
<div class="rightMain">
<div class="rightMain_top">
<div class="rightMain_topIn">
<h3>委托机构当月送检标本占比</h3>
<div class="proportion">
<div class="title">区域检验数据中心</div>
<div class="container">
<div class="leftMain">
<div class="leftMain_top">
<div class="leftMain_topIn">
<div class="title_nums">当月累计数据</div>
<ul>
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
:limitMoveNum="14"> -->
<li v-for="(item, i) in listData">
<li v-for="item in sourceMonth">
<div class="liIn">
<div class="liIn_left"><span class="zi" :title="item.groupname">{{ item.groupname }}</span></div>
<div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
<div class="per">{{ item.percentage }}</div>
</div>
<div class="nums_box">
<h3>{{ item.name }}</h3>
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
</div>
<p class="num">{{ item.groupsum }}</p>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
</ul>
<div class="title_nums">当年累计数据</div>
<ul>
<li v-for="item in sourceYear">
<div class="liIn">
<div class="nums_box">
<h3>{{ item.name }}</h3>
<p class="shu"><span class="shu1">{{ item.num }}</span><i>{{ item.unit }}</i></p>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</li>
<!-- </Vue3SeamlessScroll> -->
</ul>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
<div class="leftMain_middle">
<div class="leftMain_middle_left">
<div class="leftMain_middle_leftIn">
<h3>委托机构当月送检标本数量</h3>
<div class="biaoge" style="width:100%; " ref="chartmain" id="chartmain"></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
<div class="leftMain_middle_leftIn leftMain_middle_leftIn_zhe">
<h3>近一年送检标本数量趋势图</h3>
<div class="biaoge" style="width:100%; " ref="chartmain_zhe" id="chartmain_zhe"></div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
<div class="leftMain_middle_right">
<div class="leftMain_middle_rightIn">
<h3>当月标本全流程监控情况</h3>
<div class="biaoge biaoge_pai">
<div class="biaoge_paiIn">
<ul>
<!-- <Vue3SeamlessScroll :list="listData" :step="0.5 as any" :hover="true as any" :key="listData.length"
:limitMoveNum="14"> -->
<li v-for="(item, i) in dayCounts">
<div class="liIn">
<div class="liIn_left"><span class="zi">{{ item.dict_name }}</span></div>
<div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.percent}` }">
<div class="per">{{ item.percent }}</div>
</div>
</div>
<p class="num">{{ item.sl }}</p>
</div>
</li>
<!-- </Vue3SeamlessScroll> -->
</ul>
</div>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
</div>
<div class="rightMain">
<div class="rightMain_top">
<div class="rightMain_topIn">
<h3>委托机构当月送检标本占比</h3>
<div class="proportion">
<ul>
<li v-for="(item, i) in listData">
<div class="liIn">
<div class="liIn_left"><span class="zi" :title="item.groupname">{{ item.groupname }}</span></div>
<div class="liIn_line">
<div class="line_lineIn" :style="{ width: ` ${item.percentage}` }">
<div class="per">{{ item.percentage }}</div>
</div>
</div>
<p class="num">{{ item.groupsum }}</p>
</div>
</li>
</ul>
</div>
<span class="border_bg_leftTop"></span>
<span class="border_bg_rightTop"></span>
<span class="border_bg_leftBottom"></span>
<span class="border_bg_rightBottom"></span>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { getallcount } from '@/api/regional'
import { comDict } from "@/utils/dict";
const sourceMonth = ref([
{ name: '区域机构', num: 0, unit: '家', pre: 'jgs' },
{ name: '检验人数', num: 0, unit: '人', pre: 'rs' },
@ -150,83 +148,45 @@ const chartmain = ref()
let echarts1Instance: echarts.ECharts | null = null
let echarts3Instance: echarts.ECharts | null = null
const getEcharts1 = (data: any) => {
echarts1Instance = echarts.init(chartmain.value);
const getEcharts1 = (data) => {
const dom = chartmain.value;
if (!echarts1Instance) {
echarts1Instance = echarts.init(dom);
}
var dataAxis = data.map((item: any) => item.daynum + '日')
var data = data.map((item: any) => item.sl)
const option = {
title: {
text: '',
subtext: ''
},
grid: {
x: 40,
y: 40,
x2: 20,
y2: 50,
},
title: { text: '' },
grid: { x: 30, y: 30, x2: 10, y2: 20 },
tooltip: {
trigger: 'axis'
trigger: 'axis',
show: false,
backgroundColor: 'rgba(0,18,36,0.9)',
textStyle: { color: '#fff', fontSize: 14 },
padding: [12, 16],
borderWidth: 1,
borderColor: '#0efdff'
},
label: {
show: true,
color: '#fff',
position: 'top',
fontSize: 14,
fontWeight: 700,
},
xAxis: {
data: dataAxis,
axisLabel: {
/*inside: true,*/
interval: 0,
color: '#fff',
fontSize: 12
},
axisTick: {
show: false,
},
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
lineStyle: {
color: '#fff',
},
axisLabel: { interval: 0, color: '#fff', fontSize: 12 },
axisTick: { show: false },
axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: '#fff' } },
z: 10
},
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
textStyle: {
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
fontSize: 12, // 文字大小
fontWeight: 'normal' // 文字粗细
},
height: 20,
left: '9%', //滚动条靠左侧的百分比
bottom: 0,
start: 0,//滚动条的起始位置
end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
yAxis: {
type: 'value',
name: '单位：个',
axisLine: {
show: true,
symbol: ['none', 'arrow'],
symbolOffset: 12,
lineStyle: {
color: '#fff',
}
},
minInterval: 1,
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12
}
type: 'value', name: '单位：个', minInterval: 1,
axisLine: { show: true, symbol: ['none', 'arrow'], symbolOffset: 12, lineStyle: { color: '#fff' } },
axisTick: { show: false },
axisLabel: { color: '#fff', fontSize: 12 }
},
@ -263,16 +223,21 @@ const getEcharts1 = (data: any) => {
}
const chartmain_zhe = ref()
const getEcharts3 = () => {
echarts3Instance = echarts.init(chartmain_zhe.value);
const xData = listData.value[0].dayline.map((item: any) => item.daynum + '日')
const tooltips = listData.value.map((item: any) => item.groupname)
const getEcharts3 = (data) => {
const dom = chartmain_zhe.value;
if (!echarts3Instance) {
echarts3Instance = echarts.init(dom);
}
const xData = data[0].dayline.map((item: any) => item.month + '月')
const tooltips = data.map((item: any) => item.groupname)
const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
'#1e90ff', '#ff6347', '#7b68ee', '#d0648a', '#ffd700', '#6b8e23', '#4ea397', '#3cb371', '#b8860b']
const arr = listData.value.map((item: any, i: number) => {
const arr = data.map((item: any, i: number) => {
return {
name: item.groupname,
type: 'line',
symbol: 'circle',
data: item.dayline.map((v: any) => v.sl),
itemStyle: {
color: colors[i],
@ -294,7 +259,8 @@ const getEcharts3 = () => {
type: 'scroll', // 开启滚动
textStyle: {
color: '#fff', // 文字颜色（保持与你的主题一致）
fontSize: 12
fontSize: 12,
lineHeight: 15,
},
// 滚动箭头样式（兼容写法）
pageIcon: 'circle', // 箭头形状（可选：'arrow'/'circle'等）
@ -306,12 +272,7 @@ const getEcharts3 = () => {
},
data: tooltips
},
grid: {
x: 40,
y: 40,
x2: 20,
y2: 50,
},
grid: { x: 30, y: 50, x2: 20, y2: 20 },
toolbox: {
feature: {
//saveAsImage: {}
@ -341,21 +302,7 @@ const getEcharts3 = () => {
data: xData
},
dataZoom: [{
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
textStyle: {
color: '#0efdff', // 文字颜色（如白色，根据主题调整）
fontSize: 12, // 文字大小
fontWeight: 'normal' // 文字粗细
},
height: 20,
left: '9%', //滚动条靠左侧的百分比
bottom: 0,
start: 0,//滚动条的起始位置
end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
}],
yAxis: {
type: 'value',
name: '单位：个',
@ -405,41 +352,51 @@ const getDataInfo = () => {
// 委托机构当月送检标本占比
listData.value = res.data.regStatHospMonth
// 当日送检样本情况
dayCounts.value.forEach(element => {
res.data.regStatStatus.forEach((item: any) => {
if (element.dict_name == item.dict_name) {
element.sl = item.sl
element.percent = item.percent
}
})
});
getEcharts1(res.data.regStatMonth)
getEcharts3()
// 匹配流程数量&百分比
const baseNum = res.data.regStatStatusTotal['检验申请'] || 0
dayCounts.value = Object.entries(res.data.regStatStatusTotal).map(([dict_name, sl]) => {
if (dict_name === '检验申请') {
return { dict_name, sl, percent: '100%' }
}
let p = 0
if (baseNum > 0) {
p = (sl as number) / baseNum * 100
}
return {
dict_name,
sl,
percent: p.toFixed(2) + '%'
}
})
getEcharts1(res.data.regStatMonth || [])
getEcharts3(res.data.regStatHospYear || [])
})
}
// 返回页面方法
const goBack = () => {
window.history.back()
}
let dataRefreshTimer: any = null;
onMounted(() => {
comDict('ZT').then((res) => {
dayCounts.value = res.ZT.value.map((item: any) => {
return {
dict_name: item.label,
sl: 0,
percent: '0%'
}
})
getDataInfo()
})
getDataInfo()
dataRefreshTimer = setInterval(getDataInfo, 60000);
window.addEventListener('resize', handleResize);
})
onUnmounted(() => {
if (dataRefreshTimer) {
clearInterval(dataRefreshTimer);
dataRefreshTimer = null;
}
window.removeEventListener('resize', handleResize);
// 销毁ECharts实例
if (echarts1Instance) echarts1Instance.dispose();
if (echarts3Instance) echarts3Instance.dispose();
echarts1Instance = null;
echarts3Instance = null;
})
</script>
@ -447,4 +404,18 @@ onUnmounted(() => {
@import './css/icon.css';
@import './css/index.css';
@import './css/public.css';
</style>
<style lang="scss" scoped>
.back-btn {
position: fixed;
top: 1.04vw;
right: 1.04vw;
cursor: pointer;
z-index: 99;
img {
width: 3.125rem;
height: 3.125rem;
}
}
</style>