Skip to content

G
gassafety-progress
Commit 9d3ad6ed authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

bigwindow页面的样式调整完毕

parent de0e9e68
Show whitespace changes
Inline Side-by-side
Showing with 1083 additions and 33 deletions
gassafetyprogress-web/src/components/bigWindow/rightBarZ.vue 0 → 100644
View file @ 9d3ad6ed
<template>
<div style="height: 100%">
<!-- 预警信息 -->
<div>
<div class="item1">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
@click="$router.push('/operationMonitor/operationMonitor')"
>预警信息</span
>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div class="" style="padding: 0px 10px">
<div class="yujingleft yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group786.png" alt="" />
</div>
<div class="yujingbottom">
<div>设备预警</div>
<span>0</span>
</div>
</div>
<div class="yujingcenter yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group787.png" alt="" />
</div>
<div class="yujingbottom">
<div>事件情况</div>
<span>0</span>
</div>
</div>
<div class="yujingright yujing">
<div class="yujingtop">
<img src="@/assets/mapinages/group788.png" alt="" />
</div>
<div class="yujingbottom">
<div>隐患数量</div>
<span>0</span>
</div>
</div>
</div>
<div class="left">
<div
class="bottom right-bottom-data-left"
@mouseover="mouseover"
@mouseout="mouseout"
>
<el-table
size="mini"
:data="tableData"
:height="tableHeight"
class="el-bottom"
ref="table"
>
<el-table-column prop="unitName" label="所在单位" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.unitName">
{{ scope.row.unitName }}
</div>
</template>
</el-table-column>
<el-table-column prop="detectorType" label="设备类型" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.detectorType">
{{ scope.row.detectorType }}
</div>
</template>
</el-table-column>
<el-table-column prop="statusName" label="预警信息" width="80">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.statusName">
{{ scope.row.statusName }}
</div>
</template>
</el-table-column>
<el-table-column prop="alarmTime" label="预警时间" width="80">
</el-table-column>
<el-table-column prop="handledStatus" label="状态">
<template slot-scope="scope">
<div class="zzz" :title="scope.row.handledStatus">
{{ scope.row.handledStatus }}
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<!-- 用户安全监控设备 -->
<div>
<div class="item1">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span style="letter-spacing: 3px; color: #cddbe4"
>用户安全监控设备</span
>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div class="inuser">
<div class="outuserleft">
<div class="outuserone">
<p>燃气用户数量</p>
<!-- <span class="outuserspan">{{ diviceNum.userNum }}</span> -->
</div>
<div id="huanleft" style="width: 150px; height: 120px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">用户总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 18px;
"
>{{
diviceNum.juminNum + diviceNum.shangNum + diviceNum.gongNum
}}</span
>
</div>
<div class="usernum">
<div class="usernumin in4">
<span> ● </span>
<span style="color: #cddbe4">居民用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.juminNum }}</span
>
</div>
<div class="usernumin in5">
<span> ● </span>
<span style="color: #cddbe4">商业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.shangNum }}</span
>
</div>
<div class="usernumin in6">
<span> ● </span>
<span style="color: #cddbe4">工业用户 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.gongNum }}</span
>
</div>
</div>
</div>
<div class="outuserright">
<div class="outusertwo">
<p>安全设备数量</p>
<!-- <span class="outuserspan">{{
diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum
}}</span> -->
</div>
<div id="huanright" style="width: 150px; height: 120px"></div>
<div class="inyuan">
<div style="letter-spacing: 2px">设备总数</div>
<span
style="
font-family: 'arialbd';
letter-spacing: 2px;
color: #00ffff;
font-size: 18px;
"
>{{ diviceNum.baoNum + diviceNum.changNum + diviceNum.liNum }}</span
>
</div>
<div class="usernum">
<div class="usernumin in1">
<span> ● </span>
<span style="color: #cddbe4">在线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.changNum }}</span
>
</div>
<div class="usernumin in2">
<span> ● </span>
<span style="color: #cddbe4">离线 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.liNum }}</span
>
</div>
<div class="usernumin in3">
<span> ● </span>
<span style="color: #cddbe4">报警 </span>
<span style="font-family: 'arialbd'; letter-spacing: 2px">
: {{ diviceNum.baoNum }}</span
>
</div>
</div>
</div>
</div>
<!-- 资源统计 -->
<div>
<div class="item1" style="margin-top: 15px">
<span class="dot">
<span class="dot-inner"></span>
</span>
<span
style="letter-spacing: 3px; color: #cddbe4; cursor: pointer"
@click="$router.push('/regulation/station')"
>资源统计</span
>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #2c888899;
float: right;
margin-top: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #24b1b1b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
<div
class="fong-div"
style="
width: 8px;
height: 12px;
background-color: #11e9e9b3;
float: right;
margin-top: 10px;
margin-right: 10px;
transform: skewX(-25deg);
"
></div>
</div>
</div>
<div
class="echarts-one"
style="margin-top: 10px; width: 430px; margin-left: 10px"
>
<div id="myChartone" :style="{ width: '300px', height: '180px' }"></div>
</div>
</div>
</template>
<script>
// 引入基本模板
import * as echarts from "echarts";
import { alarmData, selectDeviceNum } from "@/api/detector/detectorInfo";
// 当不轮播时候的刷新时间
import { alarmtime } from "@/utils/mapClass/config";
export default {
// components: {
// RightPic,
// },
data() {
return {
allNum: {},
diviceNum: {
baoNum: 0,
changNum: 0,
liNum: 0,
userNum: 0,
},
zeroNum: {
fajing: 0,
stationNum: 0,
tiaoya: 0,
videoNum: 0,
},
enterpriseIds: {
enterpriseId: "",
},
timer: null,
// 与bigwindow的报警同步的定时器
alarmTimer: null,
// 滚动功能的容器大还是列表大
changeTimer: false,
repeatFinshed: false,
tableHeight: 135,
tableData: [],
scrollHeight: 0,
};
},
mounted() {
// this.$nextTick(()=>{
// this.getScrollHeight();
// })
this.getAlarm();
selectDeviceNum(this.enterpriseIds).then((response) => {
this.diviceNum = response.data;
this.drawLine3();
});
},
beforeDestroy() {
console.log("清空定时器");
clearInterval(this.alarmTimer);
},
methods: {
getAlarm() {
return alarmData().then((response) => {
this.tableData = response.data.pageData;
// console.log(response.data)
// this.user = response.data;
this.$nextTick(() => {
this.getScrollHeight();
});
});
},
getScrollHeight() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
// 列表
const select = this.$refs.table.$el
?.querySelector(".el-table__body-wrapper")
.querySelector(".el-table__body");
setTimeout(() => {
// 列表容器高度
const { height: heightWrapper } = selectWrap.getBoundingClientRect();
// 列表高度
const { height: heightSelect } = select.getBoundingClientRect();
// 滚动条的高度 = 列表高度-列表容器高度
this.scrollHeight = heightSelect - heightWrapper;
// 如果列表高度大于列表容器高度，就让轮播到底重新调接口，否则就跟bigwindow同步调取接口
if (heightSelect > heightWrapper) {
this.timerAni();
console.log("滚动");
} else {
this.alarmTimerAni();
console.log("不滚动-----------------------------");
}
// 列表大的时候鼠标移入移出就会触发暂停，否则就return
this.changeTimer = heightSelect > heightWrapper;
}, 1);
},
timerAni() {
const selectWrap = this.$refs.table.$el.querySelector(
".el-table__body-wrapper"
);
clearInterval(this.timer);
this.timer = setInterval(async () => {
if (selectWrap.scrollTop == this.scrollHeight) {
clearInterval(this.timer);
await this.getAlarm();
selectWrap.scrollTop = 0;
} else {
selectWrap.scrollTop += 1;
}
}, 100);
},
// 与外界报警同步
alarmTimerAni() {
this.alarmTimer = setTimeout(() => {
this.getAlarm();
}, alarmtime);
},
tableEnter() {
clearInterval(this.timer);
},
// 列表大的时候鼠标移入移出就会触发暂停，否则就啥也不干
mouseover() {
this.changeTimer && this.tableEnter();
},
mouseout() {
this.changeTimer && this.timerAni();
},
choice(val) {
this.getNum(val);
},
getNum(val) {
if (val != null && val != "") {
this.enterpriseIds.enterpriseId = val.toString();
selectDeviceNum(this.enterpriseIds).then((response) => {
console.log(response);
this.allNum = response.data;
this.drawLine();
});
} else {
this.allNum = this.zeroNum;
this.drawLine();
}
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChartone"));
// 绘制图表
myChart1.setOption({
tooltip: {
trigger: "item",
},
grid: {
top: "8%",
left: "8%",
right: "4%",
bottom: "10%",
containLabel: true,
},
xAxis: {
data: ["阀井", "调压箱", "场站", "监控"],
type: "category",
// data: category,
splitLine: { show: false },
axisLine: {
show: false,
lineStyle: {
color: "#bbb6b6",
},
},
axisTick: {
show: false,
},
offset: 10,
nameTextStyle: {
fontSize: 15,
},
},
yAxis: {
type: "value",
axisLine: {
show: false,
lineStyle: {
color: "#688AB6",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#464646",
},
},
},
series: [
{
name: "资源数量统计",
type: "bar",
showSymbol: false,
hoverAnimation: false,
data: [
this.allNum.fajing,
this.allNum.tiaoya,
this.allNum.stationNum,
this.allNum.videoNum,
],
barWidth: 18, //柱图宽度
// barCategoryGap:'60%',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#688AB6",
fontSize: 12,
},
},
barBorderRadius: [5, 5, 0, 0], //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
color: function (params) {
//我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
var colorList = [
["#00ffff", "#00fbfb80", "#112238"],
["#198EF0", "#198ef099", "#112238"],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colorList[index][0] },
{ offset: 0.5, color: colorList[index][1] },
{ offset: 1, color: colorList[index][2] },
]);
},
},
},
},
{
name: "资源数量统计",
tooltip: {
show: true,
},
type: "bar",
barWidth: 10,
},
{
name: "b",
tooltip: {
show: false,
},
},
{
name: "d",
tooltip: {
show: false,
},
},
],
});
},
drawLine3() {
// 基于准备好的dom，初始化echarts实例
let myChart31 = echarts.init(document.getElementById("huanleft"));
let myChart32 = echarts.init(document.getElementById("huanright"));
// 绘制图表
myChart31.setOption({
color: ["#91cc75", "#5470c6", "#fa8167"],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
},
},
name: "民警训练总量",
data: [
{ name: "居民用户", value: this.diviceNum.juminNum },
{ name: "商业用户", value: this.diviceNum.shangNum },
{ name: "工业用户", value: this.diviceNum.gongNum },
],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
},
},
},
],
},
],
});
myChart32.setOption({
color: ["#FF4040", "#F0C41B", "#188DF0"],
grid: {
left: 0,
// right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
// grid: {
// bottom: 150,
// left: 100,
// right: '10%'
// },
series: [
// 主要展示层的
{
radius: ["75%", "65%"],
center: ["50%", "50%"],
type: "pie",
itemStyle: {
borderRadius: 20,
},
label: {
normal: {
show: false,
textStyle: {
fontSize: 13,
},
position: "outside",
},
emphasis: {
show: false,
},
},
labelLine: {
normal: {
show: false,
length: 20,
length2: 35,
},
emphasis: {
show: true,
},
},
name: "民警训练总量",
data: [
{ name: "报警数量", value: this.diviceNum.baoNum },
{ name: "离线数量", value: this.diviceNum.liNum },
{ name: "在线数量", value: this.diviceNum.changNum },
],
},
// 边框的设置
{
name: "外边框",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ["50%", "50%"],
radius: ["80%", "80%"],
label: {
normal: {
show: false,
},
},
data: [
{
value: 9,
name: "",
itemStyle: {
normal: {
borderWidth: 2,
borderColor: "#61bad3",
},
},
},
],
},
],
});
// myChart32.setOption({
// title: {
// text: '设备数量:'+data.deviceNum,
// left: 'center',
// textStyle: {
// color: "#0ff"
// }
// },
// tooltip: {
// trigger: 'item'
// },
// series: [
// {
// name: '设备概况',
// type: 'pie',
// radius: ['50%', '70%'],
// center: ['50%', '60%'],
// avoidLabelOverlap: false,
// label: {
// show: false,
// position: 'center'
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false
// },
// data:data.divice,
// color:["#188df0","#ffff00","#FF4040"]
// }
// ]
// });
},
},
};
</script>
<style lang="scss" scoped>
.titleTex {
height: 30px;
width: 100%;
color: aqua;
text-align: center;
line-height: 30px;
margin-top: 10px;
}
.divall {
height: 100%;
width: 100%;
}
.divfen {
display: flex;
justify-content: center;
align-items: center;
}
.numdiv {
background: #47aed5;
color: white;
width: 27px;
font-size: 30px;
}
.item1 {
width: 93%;
height: 30px;
font-size: 18px;
line-height: 30px;
padding-left: 10px;
font-weight: 700;
font-style: italic;
margin-left: 10px;
background-image: linear-gradient(
to left,
#112238,
rgb(49 151 195 / 70%) 50%,
#112238
);
}
.dot {
display: inline-block;
position: relative;
width: 10px;
height: 10px;
background: rgb(30, 185, 190);
border-radius: 50%;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 2px;
}
.dot-inner {
background: #44d7dc;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-animation: vabDot 1.2s ease-in-out infinite;
animation: vabDot 1.2s ease-in-out infinite;
}
@-webkit-keyframes vabDot {
0% {
opacity: 0.6;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(2.4);
}
}
@keyframes vabDot {
0% {
opacity: 0.6;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(2.4);
}
}
.inuser {
width: 100%;
height: 200px;
}
.outuserleft {
width: 50%;
height: 100%;
float: left;
}
.outuserright {
width: 50%;
height: 100%;
float: right;
}
.outuserone {
width: 100%;
height: 20px;
text-align: center;
color: #cddbe4;
font-size: 10px;
}
.outusertwo {
width: 100%;
height: 20px;
font-size: 10px;
text-align: center;
color: #cddbe4;
}
.outuserspan {
font-family: "arialbd";
font-size: 28px;
color: #00ffff;
letter-spacing: 8px;
}
.usernum {
width: 100%;
text-align: center;
}
.usernumin {
font-size: 12px;
}
.in1 {
color: #188df0;
}
.in2 {
color: #f0c41b;
}
.in3 {
color: #ff4040;
}
.in4 {
color: #91cc75;
}
.in5 {
color: #5470c6;
}
.in6 {
color: #fa8167;
}
.inyuan {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #125c9b;
position: fixed;
margin-bottom: 10px;
margin-top: -100px;
margin-left: 36px;
font-size: 10px;
color: #cddbe4;
text-align: center;
line-height: 25px;
padding: 14px 0px 0px 0px;
background-image: linear-gradient(to left, #112238, #003e8d, #112238);
}
.b_list {
height: 100%;
overflow: hidden;
}
.left {
margin-top: 50px;
width: 440px;
transform-origin: 0 0;
transform: scale(0.65, 1);
margin-left: 10px;
}
.yj {
padding: 0px 10px;
}
.yujing {
width: 33%;
height: 50px;
float: left;
}
.yujingtop {
// width: 70px;
// height: 90px;
float: left;
margin-top: 15px;
margin-left: 10px;
text-align: right;
> img {
width: 20px;
height: 20px;
}
}
.yujingbottom {
float: left;
color: #cddbe4;
font-size: 10px;
margin-left: 10px;
// line-height: 35px;
padding: 10px 0 0 0;
}
.yujingbottom span {
font-family: "arialbd";
font-size: 15px;
background-image: -webkit-linear-gradient(bottom, #f0c41b, #e4dbb7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ 9d3ad6ed
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-08-23 17:04:59
* @LastEditTime: 2022-08-24 11:23:42
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -54,7 +54,12 @@
</div>
<!-- 设备按钮 -->
<div class="typelist-div">
<div
:class="{
'typelist-div': windowInnerWidth > 1100,
'typelist-divZ': windowInnerWidth < 1100,
}"
>
<div
class="list"
v-for="(item, index) in arr"
......@@ -79,20 +84,26 @@
</div>
<!-- 头部 -->
<div class="banner-test">
<div class="banner-test" :style="{height:windowInnerWidth>1100?'85px':'70px'}">
<!-- <dv-decoration-5 style="width:100%;height:100%;" /> -->
<img src="@/assets/mapinages/tb.png" alt="" />
</div>
<!-- 左边 -->
<div class="leftbar" :style="{width:windowInnerWidth>1024?'470px':'300px'}">
<leftBar v-if="windowInnerWidth>1024" ref="mychild2"></leftBar>
<div
class="leftbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<leftBar v-if="windowInnerWidth > 1024" ref="mychild2"></leftBar>
<leftBarZ v-else ref="mychild2"></leftBarZ>
</div>
<!-- 右边 -->
<div class="rightbar">
<rightBar ref="mychild"></rightBar>
<div
class="rightbar"
:style="{ width: windowInnerWidth > 1024 ? '470px' : '300px' }"
>
<rightBar v-if="windowInnerWidth > 1024" ref="mychild"></rightBar>
<rightBarZ v-else ref="mychild"></rightBarZ>
</div>
<!-- 左上角天气 -->
......@@ -183,12 +194,14 @@ import PipeColor from "@/components/bigWindow/PipeColor.vue";
import leftBar from "@/components/bigWindow/leftBar.vue";
import leftBarZ from "@/components/bigWindow/leftBarZ.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import rightBarZ from "@/components/bigWindow/rightBarZ.vue";
export default {
name: "Home",
components: {
leftBar,
leftBarZ,
rightBar,
rightBarZ,
// Center,
UserCenter,
OtherCenter,
......@@ -272,7 +285,7 @@ export default {
// 报警轮询timer
alarmTimer: null,
windowInnerWidth:0,
windowInnerWidth: 0,
};
},
......@@ -598,15 +611,17 @@ export default {
overflow: hidden;
height: calc(100vh - 85px);
position: fixed;
top: 10%;
top: 85px;
left: 0;
background: #112238;
}
.rightbar {
width: 470px;
height: 90%;
height: calc(100vh - 85px);
position: fixed;
top: 10%;
top: 85px;
right: 0;
background: #112238;
}
......@@ -698,8 +713,7 @@ export default {
top: 0;
margin-top: 120px;
right: 470px;
}
.list {
.list {
z-index: 9999;
float: left;
margin-left: 15px;
......@@ -712,14 +726,46 @@ export default {
padding: 5px 7px;
cursor: pointer;
line-height: 26px;
}
.list.active {
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 14px;
}
.list img {
}
.list img {
width: 22px;
}
}
.typelist-divZ {
width: 400px;
// height: 30px;
z-index: 9999;
position: fixed;
top: 85px;
left: 50%;
margin-left: -200px;
.list {
z-index: 9999;
float: left;
margin-left: 15px;
color: #fff;
line-height: auto;
text-align: center;
background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
padding: 5px 7px;
cursor: pointer;
margin-bottom: 5px;
// line-height: 30px;
}
.list.active {
background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b;
font-size: 10px;
}
.list img {
width: 15px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment