791 lines
20 KiB
Vue
791 lines
20 KiB
Vue
<template>
|
|
<div class="management">
|
|
<div class="main">
|
|
<div class="title">
|
|
<div class="flex items-center">
|
|
<img src="@/assets/images/ligner.png" alt="" />
|
|
<div class="w100% flex justify-between items-center">
|
|
<div class="subTitle flex items-center">
|
|
<img src="@/assets/images/News.png" alt="" />
|
|
<span>项目新闻</span>
|
|
</div>
|
|
<div class="hint">PROJECT NEWS</div>
|
|
</div>
|
|
<div class="mark"></div>
|
|
</div>
|
|
<div class="ligner"></div>
|
|
</div>
|
|
<div class="events">
|
|
<div class="content events-content event_s">
|
|
<AutoScroller :items="projectNewsData" class="events-list" ref="newsScroller">
|
|
<template #default="{ item, index }">
|
|
<li>
|
|
<span class="text detail" style="display: inline"> {{ item.title }}</span>
|
|
<span class="more" v-if="!item.show" @click="onMore(index, true, item.id)">查看详情</span>
|
|
<span class="more" style="color: #ffb100eb" v-else @click="onMore(index, false)">关闭详情</span>
|
|
</li>
|
|
</template>
|
|
</AutoScroller>
|
|
<div class="detail-content" v-if="newsDetailDialog" v-html="NewsDetailMain"></div>
|
|
<!-- <span v-else style="font-size: 20px; letter-spacing: 10px">暂无数据</span> -->
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<div class="flex items-center">
|
|
<img src="@/assets/images/ligner.png" alt="" />
|
|
<div class="w100% flex justify-between items-center">
|
|
<div class="subTitle flex items-center">
|
|
<img src="@/assets/images/Safety.png" alt="" />
|
|
<span>安全管理</span>
|
|
</div>
|
|
<div class="hint">SAFETY MANAGEMENT</div>
|
|
</div>
|
|
<div class="mark"></div>
|
|
</div>
|
|
<div class="ligner"></div>
|
|
</div>
|
|
<div class="safetyData">
|
|
<div class="head flex justify-around">
|
|
<div class="safetyData-item flex items-center">
|
|
<div>
|
|
<img src="@/assets/images/danggerNum.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<span>站班会情况</span>
|
|
<p>{{ safetyInspectionData.teamMeetingCount }}<span> 件</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="safetyData-item flex items-center">
|
|
<div>
|
|
<img src="@/assets/images/record.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<span>巡检记录</span>
|
|
<p>{{ safetyInspectionData.safetyInspectionCount }}<span> 件</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="safetyData-item flex items-center">
|
|
<div>
|
|
<img src="@/assets/images/situation.png" alt="" />
|
|
</div>
|
|
<div>
|
|
<span>整改情况</span>
|
|
<p>{{ safetyInspectionData.correctSituationCount }}<span> 件</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tables">
|
|
<div class="thead">
|
|
<span class="teamWidth">班组</span>
|
|
<span class="teamWidth">名称</span>
|
|
<span class="teamWidth">时间</span>
|
|
<span class="statusWidth">操作</span>
|
|
</div>
|
|
<AutoScroller :items="safetyInspectionData.teamMeetingList" class="tbody" safety>
|
|
<template #default="{ item }">
|
|
<div class="flex">
|
|
<span class="teamWidth">{{ item.teamName }}</span>
|
|
<span class="teamWidth">{{ item.name }}</span>
|
|
<span class="teamWidth time">{{ item.meetingDate }}</span>
|
|
<span class="statusWidth">查看</span>
|
|
</div>
|
|
</template>
|
|
</AutoScroller>
|
|
</div>
|
|
</div>
|
|
<div class="title">
|
|
<div class="flex items-center">
|
|
<img src="@/assets/images/ligner.png" alt="" />
|
|
<div class="w100% flex justify-between items-center">
|
|
<div class="subTitle flex items-center">
|
|
<img src="@/assets/images/Quality.png" alt="" />
|
|
<span>质量管理</span>
|
|
</div>
|
|
<div class="hint">SAFETY MANAGEMENT</div>
|
|
</div>
|
|
<div class="mark"></div>
|
|
</div>
|
|
<div class="ligner"></div>
|
|
</div>
|
|
<div class="quality">
|
|
<div class="qualitydata flex items-center">
|
|
<div>
|
|
<img src="@/assets/images/qualityLogo.png" alt="" />
|
|
</div>
|
|
<div class="qualityNum">
|
|
<div>巡检记录 <b></b></div>
|
|
<p>{{ qualityData?.count }}<span> 件</span></p>
|
|
</div>
|
|
<div class="qualityNum ml-15">
|
|
<div>整改情况 <b></b></div>
|
|
<p>{{ qualityData?.correctSituation }}<span> %</span></p>
|
|
</div>
|
|
</div>
|
|
<AutoScroller :items="qualityData?.list" class="qualityList">
|
|
<template #default="{ item }">
|
|
<div class="qualityItem flex items-center">
|
|
<div>
|
|
<img src="@/assets/images/timeIcon.png" alt="" />
|
|
<span class="text-white qualityTime">{{ item.createTime }}</span>
|
|
</div>
|
|
<div class="text-#43E2CB record">{{ item.inspectionTypeLabel }}</div>
|
|
<div class="text-#E6F7FF text-truncate">
|
|
<el-tooltip :content="item.inspectionHeadline" placement="top"> {{ item.inspectionHeadline }}</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</AutoScroller>
|
|
</div>
|
|
<div class="title">
|
|
<div class="flex items-center">
|
|
<img src="@/assets/images/ligner.png" alt="" />
|
|
<div class="w100% flex justify-between items-center">
|
|
<div class="subTitle flex items-center">
|
|
<img src="@/assets/images/usercopy.png" alt="" />
|
|
<span>形象进度</span>
|
|
</div>
|
|
<div class="hint">PROGRESS MANAGEMENT</div>
|
|
</div>
|
|
<div class="mark"></div>
|
|
</div>
|
|
<div class="ligner"></div>
|
|
</div>
|
|
<div class="user" id="userMain"></div>
|
|
</div>
|
|
<div class="topleft"></div>
|
|
<div class="bottomright"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import * as echarts from 'echarts';
|
|
|
|
import { projectNewsVO, QualityVO, safetyInspectionVO } from '@/api/gis/type';
|
|
import { useUserStoreHook } from '@/store/modules/user';
|
|
import { getQualityList, getprojectNewsDetailList, getprojectNewsList, getsafetyInspectionList } from '@/api/gis';
|
|
import AutoScroller from './autoScroller.vue';
|
|
const userStore = useUserStoreHook();
|
|
type EChartsOption = echarts.EChartsOption;
|
|
const option = ref<EChartsOption>(null);
|
|
const myMachineryChart = ref(null);
|
|
const projectScroll = ref(null);
|
|
const tableScroll = ref(null);
|
|
const qualityScroll = ref(null);
|
|
const scrollList = reactive({
|
|
projectRef: {
|
|
dom: projectScroll,
|
|
intervalId: null
|
|
},
|
|
tableRef: {
|
|
dom: tableScroll,
|
|
intervalId: null
|
|
},
|
|
qualityRef: {
|
|
dom: qualityScroll,
|
|
intervalId: null
|
|
}
|
|
});
|
|
const newsScroller = ref();
|
|
const newsDetailDialog = ref<boolean>(false);
|
|
// 从 store 中获取项目列表和当前选中的项目
|
|
const currentProject = computed(() => userStore.selectedProject);
|
|
const qualityData = ref<QualityVO>({ list: [], correctSituation: null, count: null });
|
|
const projectNewsData = ref<projectNewsVO[]>([]);
|
|
const NewsDetailMain = ref<string>(null);
|
|
const safetyInspectionData = ref<safetyInspectionVO>({
|
|
teamMeetingCount: null,
|
|
safetyInspectionCount: null,
|
|
correctSituationCount: null,
|
|
teamMeetingList: []
|
|
});
|
|
const classOptions = {
|
|
limitMoveNum: 3,
|
|
hoverStop: true,
|
|
step: 1
|
|
};
|
|
|
|
//获取质量信息
|
|
const getQualityData = async () => {
|
|
const res = await getQualityList({ projectId: currentProject.value?.id });
|
|
if (res.code !== 200) return;
|
|
qualityData.value = res.data;
|
|
};
|
|
|
|
//获取大屏项目新闻列表
|
|
const getProjectNewsData = async () => {
|
|
const res = await getprojectNewsList({ projectId: currentProject.value?.id });
|
|
if (res.code !== 200) return;
|
|
projectNewsData.value = res.data;
|
|
};
|
|
|
|
//查询大屏安全信息
|
|
const getsafetyInspectionData = async () => {
|
|
const res = await getsafetyInspectionList({ projectId: currentProject.value?.id });
|
|
if (res.code !== 200) return;
|
|
safetyInspectionData.value = res.data;
|
|
};
|
|
|
|
const safetyData = ref([]);
|
|
new Array(10).fill(0).forEach((item) => {
|
|
safetyData.value.push({
|
|
id: 1,
|
|
name: '站班会',
|
|
teamName: '测试组',
|
|
meetingDate: '2024-03-18'
|
|
});
|
|
});
|
|
|
|
const onMore = async (index, isShow, id?) => {
|
|
if (isShow) {
|
|
newsScroller.value.pause();
|
|
projectNewsData.value[index].show = true;
|
|
const res = await getprojectNewsDetailList(id);
|
|
NewsDetailMain.value = res.data.content;
|
|
newsDetailDialog.value = true;
|
|
} else {
|
|
newsScroller.value.resume();
|
|
projectNewsData.value[index].show = false;
|
|
newsDetailDialog.value = false;
|
|
}
|
|
};
|
|
//初始化形象进度图表
|
|
const initUserChart = () => {
|
|
let chartDom = document.getElementById('userMain');
|
|
myMachineryChart.value = echarts.init(chartDom);
|
|
// prettier-ignore
|
|
let dataAxis = ['桩点浇筑', '支架安装', '组件安装', '箱变安装'];
|
|
option.value = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
// Use axis to trigger tooltip
|
|
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
|
}
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '0',
|
|
containLabel: true,
|
|
width: '90%',
|
|
height: '100%'
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: 'rgba(108, 128, 151, 0.3)'
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: dataAxis,
|
|
offset: 0,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
inverse: true,
|
|
axisLabel: {
|
|
color: '#E6F7FF',
|
|
fontSize: 12
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
itemStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 1,
|
|
y2: 0,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgba(0, 89, 84, 0)' // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(102, 225, 223, 1)' // 100% 处的颜色
|
|
}
|
|
],
|
|
global: false // 缺省为 false
|
|
}
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [120, 132, 101, 134],
|
|
showBackground: true,
|
|
barWidth: 8,
|
|
backgroundStyle: {
|
|
color: 'rgba(108, 128, 151, .1)'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
option.value && myMachineryChart.value.setOption(option.value);
|
|
};
|
|
|
|
// 防抖函数
|
|
const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
|
|
let timer: ReturnType<typeof setTimeout> | null = null;
|
|
return function (this: T, ...args: any[]) {
|
|
const context = this;
|
|
if (timer) clearTimeout(timer);
|
|
timer = setTimeout(() => {
|
|
func.apply(context, args);
|
|
}, delay);
|
|
};
|
|
};
|
|
|
|
// 窗口大小变化时触发的函数
|
|
const handleResize = () => {
|
|
myMachineryChart.value && myMachineryChart.value.dispose();
|
|
initUserChart();
|
|
};
|
|
|
|
const debouncedHandleResize = debounce(handleResize, 300);
|
|
|
|
onMounted(() => {
|
|
initUserChart();
|
|
getQualityData();
|
|
getProjectNewsData();
|
|
getsafetyInspectionData();
|
|
window.addEventListener('resize', debouncedHandleResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', debouncedHandleResize);
|
|
myMachineryChart.value && myMachineryChart.value.dispose();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../css/gis.scss';
|
|
|
|
#userMain {
|
|
width: 100%;
|
|
padding-right: vw(14);
|
|
margin-top: vh(19);
|
|
height: vh(170);
|
|
}
|
|
|
|
.management {
|
|
width: vw(449);
|
|
height: vh(927);
|
|
background: rgb(1, 26, 33, 0.4);
|
|
backdrop-filter: blur(vw(8));
|
|
position: absolute;
|
|
top: vh(122);
|
|
right: vw(21);
|
|
z-index: 2;
|
|
.main {
|
|
padding-top: vh(17);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: vw(2);
|
|
background: linear-gradient(to bottom left, #43e2cb 0%, transparent 50%);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
opacity: 0.4;
|
|
z-index: -1;
|
|
}
|
|
|
|
.topleft {
|
|
width: vw(7);
|
|
height: vw(7);
|
|
position: absolute;
|
|
top: vh(1);
|
|
right: vw(1);
|
|
background-image: url('@/assets/images/topleft.png');
|
|
transform: rotatez(90deg);
|
|
}
|
|
|
|
.bottomright {
|
|
width: vw(7);
|
|
height: vw(7);
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-image: url('@/assets/images/bottomright.png');
|
|
transform: rotatez(90deg);
|
|
}
|
|
}
|
|
|
|
.title {
|
|
> div > img {
|
|
width: vw(14);
|
|
height: vh(35);
|
|
}
|
|
|
|
.subTitle {
|
|
img {
|
|
width: vw(18.8);
|
|
height: vh(20);
|
|
margin-right: vw(10);
|
|
}
|
|
|
|
span {
|
|
text-shadow: 0 0 vw(8) rgba(2, 3, 7, 0.35);
|
|
font-size: vw(16);
|
|
letter-spacing: 0;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-family: 'DOUYUFont';
|
|
padding-top: vh(5);
|
|
}
|
|
}
|
|
|
|
.hint {
|
|
font-size: vw(14);
|
|
font-weight: 400;
|
|
color: rgba(204, 204, 204, 0.5);
|
|
margin-right: vw(20);
|
|
font-family: 'Roboto';
|
|
}
|
|
|
|
.mark {
|
|
width: vw(2);
|
|
height: vh(14);
|
|
background: rgba(67, 226, 203);
|
|
margin-right: vw(10);
|
|
}
|
|
|
|
.ligner {
|
|
height: vh(1);
|
|
background: linear-gradient(to right, transparent 0%, #43e2cb 90%);
|
|
margin-left: vw(14);
|
|
}
|
|
}
|
|
|
|
.quality {
|
|
margin: vh(13) 0 vh(15);
|
|
font-family: '思源黑体';
|
|
.qualitydata {
|
|
margin: 0 0 vh(12) vw(28);
|
|
|
|
img {
|
|
width: vw(68);
|
|
margin-right: vw(48);
|
|
}
|
|
|
|
.qualityNum {
|
|
width: vw(99);
|
|
height: vh(53);
|
|
text-align: center;
|
|
div {
|
|
/** 文本1 */
|
|
font-size: vw(14);
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 1);
|
|
margin-bottom: vh(5);
|
|
position: relative;
|
|
font-family: '思源黑体';
|
|
b {
|
|
position: absolute;
|
|
top: vh(5);
|
|
left: 0;
|
|
width: 100%;
|
|
height: vh(6);
|
|
background-color: rgba(67, 226, 203, 0.1);
|
|
z-index: -1;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: vw(3);
|
|
height: vh(3);
|
|
background-color: rgba(67, 226, 203, 1);
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: vw(3);
|
|
height: vh(3);
|
|
background-color: rgba(67, 226, 203, 1);
|
|
}
|
|
}
|
|
}
|
|
p {
|
|
width: 100%;
|
|
height: vh(27);
|
|
background-color: rgba(67, 226, 203, 0.1);
|
|
font-size: vw(24);
|
|
color: #fff;
|
|
text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
|
|
line-height: vh(27);
|
|
font-family: 'Roboto';
|
|
span {
|
|
font-size: vw(12);
|
|
font-family: '思源黑体';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.qualityList {
|
|
margin-left: vw(21);
|
|
display: block;
|
|
height: vh(90);
|
|
overflow: hidden;
|
|
margin-right: vw(10);
|
|
font-size: vw(14);
|
|
.qualityItem {
|
|
margin-bottom: vh(13);
|
|
font-family: '思源黑体';
|
|
.qualityTime {
|
|
font-family: 'Roboto';
|
|
}
|
|
img {
|
|
width: vw(12);
|
|
margin-right: vw(8);
|
|
}
|
|
.record {
|
|
margin: 0 vw(54) 0 vw(40);
|
|
}
|
|
.text-truncate {
|
|
width: vw(154);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.safetyData {
|
|
margin: vh(20) 0 vh(15);
|
|
|
|
.head {
|
|
img {
|
|
width: vw(36);
|
|
}
|
|
|
|
.safetyData-item {
|
|
height: vh(53);
|
|
|
|
> div {
|
|
> span {
|
|
font-size: vw(14);
|
|
font-weight: 400;
|
|
color: rgba(204, 204, 204, 1);
|
|
font-family: '思源黑体';
|
|
}
|
|
|
|
> p {
|
|
text-shadow: 0 vw(1.24) vw(6.21) rgba(0, 190, 247, 1);
|
|
font-size: vw(24);
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-family: 'Roboto';
|
|
> span {
|
|
font-size: vw(12);
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-family: '思源黑体';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
.events {
|
|
margin: vh(20) 0 vh(15);
|
|
width: 100%;
|
|
font-family: '思源黑体';
|
|
position: relative;
|
|
height: vh(82);
|
|
.events-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding-right: vw(10);
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
width: 100%;
|
|
padding-left: vw(20);
|
|
background: url('@/assets/images/li.png') no-repeat 0 20%;
|
|
list-style-type: none;
|
|
list-style-position: inside;
|
|
margin-bottom: vh(8);
|
|
position: relative;
|
|
|
|
.detail {
|
|
display: inline;
|
|
}
|
|
|
|
.more {
|
|
color: rgba(67, 226, 203, 1);
|
|
font-size: vw(14);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.text {
|
|
font-size: vw(12);
|
|
font-weight: 400;
|
|
letter-spacing: 0;
|
|
color: rgba(230, 247, 255, 1);
|
|
text-align: justify;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
max-height: 4em;
|
|
height: 4em;
|
|
margin-right: vw(5);
|
|
}
|
|
}
|
|
|
|
// li:last-child {
|
|
// margin-bottom: 0;
|
|
// }
|
|
|
|
li::after {
|
|
content: '';
|
|
border-left: vw(1) dashed rgba(0, 190, 247, 0.3);
|
|
position: absolute;
|
|
top: vh(22);
|
|
left: vw(5);
|
|
width: vw(10);
|
|
height: 85%;
|
|
display: block;
|
|
}
|
|
|
|
// li:last-child::after {
|
|
// content: '';
|
|
// border-left: none;
|
|
// }
|
|
}
|
|
.detail-content {
|
|
position: absolute;
|
|
top: 0;
|
|
left: vw(-275);
|
|
width: vw(250);
|
|
height: vh(328);
|
|
background: rgba(0, 0, 0, 0.5);
|
|
overflow: auto;
|
|
padding: vh(15) vw(15);
|
|
|
|
color: rgba(255, 255, 255, 1);
|
|
backdrop-filter: blur(vw(8));
|
|
border: 1px solid;
|
|
border-image: linear-gradient(to bottom, rgba(67, 226, 203, 1), rgba(67, 226, 203, 0.5)) 1;
|
|
::v-deep(p) {
|
|
margin: vh(10) 0;
|
|
img {
|
|
width: 100%;
|
|
border-radius: vw(8);
|
|
}
|
|
span {
|
|
font-size: vw(12) !important;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: vh(82);
|
|
padding: 0 vw(10) 0 vw(20);
|
|
}
|
|
|
|
.event_s {
|
|
display: grid;
|
|
place-items: center;
|
|
color: #f0f8ff;
|
|
}
|
|
|
|
.tables {
|
|
padding: 0 vw(13) 0 vw(14);
|
|
font-weight: 400;
|
|
font-size: vw(14);
|
|
font-family: '思源黑体';
|
|
.tbody {
|
|
height: vh(94);
|
|
overflow: hidden;
|
|
padding-right: vw(14);
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 13px;
|
|
font-family: '思源黑体';
|
|
.flex {
|
|
padding-left: vw(16);
|
|
height: vh(26);
|
|
line-height: vh(26);
|
|
font-size: vw(13);
|
|
margin: vh(8) 0;
|
|
}
|
|
.time {
|
|
font-family: 'Roboto';
|
|
}
|
|
}
|
|
|
|
.thead {
|
|
padding-right: vw(20);
|
|
margin-top: vh(12);
|
|
display: flex;
|
|
color: #43e2cb;
|
|
height: vh(40);
|
|
padding-left: vw(16);
|
|
line-height: vh(40);
|
|
}
|
|
.statusWidth {
|
|
width: vw(44);
|
|
color: rgba(67, 226, 203, 1);
|
|
cursor: pointer;
|
|
}
|
|
.teamWidth {
|
|
width: vw(114);
|
|
}
|
|
}
|
|
|
|
/* 滚动条整体样式 */
|
|
::-webkit-scrollbar {
|
|
width: vw(6);
|
|
display: none;
|
|
|
|
/* 纵向滚动条宽度 */
|
|
}
|
|
|
|
/* 滚动条轨道 */
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
/* 轨道背景颜色 */
|
|
border-radius: vw(5);
|
|
/* 轨道圆角 */
|
|
}
|
|
|
|
/* 滚动条滑块 */
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, rgba(67, 226, 203, 0.5) 0%, rgba(21, 181, 230, 0.5) 100%);
|
|
border-radius: vw(5);
|
|
/* 滑块圆角 */
|
|
}
|
|
|
|
/* 隐藏滚动条的上下手柄 */
|
|
::-webkit-scrollbar-button {
|
|
display: none;
|
|
}
|
|
</style>
|