Skip to content

Z
zh-baseversion-project
Commit 7132ffda authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

top搜索功能样式完成，调接口查询数据，调整企业设备过滤逻辑，更改设备图标。

parent b2b24350
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 881 additions and 355 deletions
zh-baseversion-web/src/api/bigWindow/getDevice.js
View file @ 7132ffda
/*
* @Author: your name
* @Date: 2022-02-23 15:28:07
* @LastEditTime: 2022-03-08 14:52:13
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-18 15:13:55
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
*/
import request from '@/utils/request'
import request from "@/utils/request";
// 查询管道去查询
export function getPipeForSelect(query) {
return request({
url: '/pipe/pipe/getPipeForSelect',
method: 'get',
params: query
})
url: "/pipe/pipe/getPipeForSelect",
method: "get",
params: query,
});
}
// 查询管道
export function getPipe(query) {
return request({
url: '/pipe/pipe/selectPipeData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPipeData",
method: "get",
params: query,
});
}
// 调压箱
export function getTyx(query) {
return request({
url: '/pipe/pipe/selectDeviceData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectDeviceData",
method: "get",
params: query,
});
}
// 调压箱下面的设备接口
export function getTyxDevice(query) {
return request({
url: '/pipe/pipe/selectPressureFlow',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPressureFlow",
method: "get",
params: query,
});
}
// 是阀门
export function getFm(query) {
return request({
url: '/pipe/pipe/selectvalveData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectvalveData",
method: "get",
params: query,
});
}
// 阀门下面的设备接口
export function getFmDevice(query) {
return request({
url: '/pipe/pipe/selectPressureFlow',
method: 'get',
params: query
})
url: "/pipe/pipe/selectPressureFlow",
method: "get",
params: query,
});
}
// 厂站
export function getCz(query) {
return request({
url: '/pipe/pipe/selectTSiteStationInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTSiteStationInfoData",
method: "get",
params: query,
});
}
// 场站下的设备
export function getCzDevice(query) {
return request({
url: '/pipe/pipe/selecttSiteStationInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selecttSiteStationInfoData",
method: "get",
params: query,
});
}
// 设备id ：devId 类型 relationDeviceType 1调压箱/阀门井 2场站
export function getTcqDevice(query) {
return request({
url: '/pipe/pipe/selectSensingDevice',
method: 'get',
url: "/pipe/pipe/selectSensingDevice",
method: "get",
params: {
pageNum: 1,
pageSize: 20,
...query,
},
})
});
}
// 液化气
export function getYhq(query) {
return request({
url: '/system/yehuaqiUser/allList',
method: 'get',
params: query
})
url: "/system/yehuaqiUser/allList",
method: "get",
params: query,
});
}
export function getyhqUser(query) {
return request({
url: '/system/yehuaqiDevice/list',
method: 'get',
params: query
})
url: "/system/yehuaqiDevice/list",
method: "get",
params: query,
});
}
export function deviceUser() {
return request({
url: '/system/deviceUser/allListbyTownship',
method: 'get',
})
url: "/system/deviceUser/allListbyTownship",
method: "get",
});
}
export function deviceUserList(query) {
return request({
url: '/system/deviceUser/list',
method: 'get',
params: query
})
url: "/system/deviceUser/list",
method: "get",
params: query,
});
}
// 监控
export function getVideo(query) {
return request({
url: '/pipe/pipe/selectTvideoManagerData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTvideoManagerData",
method: "get",
params: query,
});
}
// 燃气用户接口
export function getUser(query) {
return request({
url: '/pipe/pipe/selectTdetectorUser',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTdetectorUser",
method: "get",
params: query,
});
}
// 企业接口
export function getEnterprise(query) {
return request({
url: '/regulation/info/enterpriseInfoList',
method: 'get',
params: query
})
url: "/regulation/info/enterpriseInfoList",
method: "get",
params: query,
});
}
// 获取公司名称以及id
export function getCompany(query) {
return request({
url: '/pipe/pipe/selectTenterpriseInfoData',
method: 'get',
params: query
})
url: "/pipe/pipe/selectTenterpriseInfoData",
method: "get",
params: query,
});
}
// 报警
export function userAlarm(query) {
return request({
url: '/supervise/user/getDetectorUserAlarmList',
method: 'get',
params: query
})
url: "/supervise/user/getDetectorUserAlarmList",
method: "get",
params: query,
});
}
// 搜索设备
export function searchDevice(query) {
return request({
url: "/device/device/queryBasicInforByNameForBigWindows",
method: "get",
params: query,
});
}
export function searchDeviceDetail(query) {
return request({
url: "/device/device/queryBasicInforByTypeAndIdForBigWindows",
method: "get",
params: query,
});
}
zh-baseversion-web/src/assets/styles/transition.scss
View file @ 7132ffda
......@@ -40,9 +40,22 @@
}
.breadcrumb-move {
transition: all .5s;
transition: all .1s;
}
.breadcrumb-leave-active {
position: absolute;
}
/* .fadeBottom */
.fadeBottom-enter-active,
.fadeBottom-leave-active {
transition: opacity 0.5s;
}
.fadeBottom-enter,
.fadeBottom-leave-active {
opacity: 0;
}
zh-baseversion-web/src/utils/mapClass/config.js
View file @ 7132ffda
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2022-04-14 15:38:29
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-07-18 17:36:58
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
*/
......@@ -27,12 +27,16 @@ export const alarmtime = 10000;
export const svgUrl = {
// bigwindow页面的设备
2: require("@/assets/firstimage/tiaoyaxiang.svg"),
3: require("@/assets/firstimage/famen.svg"),
4: require("@/assets/firstimage/changzhan.svg"),
5: require("@/assets/firstimage/jiankong.svg"),
6: require("@/assets/firstimage/user.svg"),
61: require("@/assets/firstimage/user1.svg"),
2: require("@/assets/firstimage/device/tyx.png"),
3: require("@/assets/firstimage/device/fmj.png"),
4: require("@/assets/firstimage/device/cz.png"),
5: require("@/assets/firstimage/device/video.png"),
//居民用户
6: require("@/assets/firstimage/device/jmUser.png"),
// 商业用户
61:require("@/assets/firstimage/device/syUser.png"),
7: require("@/assets/image/zrxk.svg"),
8: require("@/assets/image/zcrq.svg"),
......@@ -51,7 +55,8 @@ export const svgUrl = {
16: require("@/assets/image/yj-xj.png"),
//煤气罐罐 运行监测 气瓶回溯
17: require("@/assets/mapinages/meiqiguan.svg"),
18: require("@/assets/firstimage/yehuaqi.svg"),
// 液化气用户
18: require("@/assets/firstimage/device/yhqUser.png"),
// 巡检巡查
98: require("@/assets/image-xjxc/start.svg"),
......
zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
View file @ 7132ffda
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-07-15 10:26:41
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-07-16 17:27:41
* @LastEditTime: 2024-07-16 17:33:46
* @FilePath: /zh-baseversion-web/src/views/bigWindow/components/Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......@@ -17,8 +17,8 @@
/>
</div>
<div class="container">
<transition name="fade" mode="out-in">
<div v-if="activeCom.label" class="children">
<transition name="fadeBottom" mode="out-in">
<div v-if="activeCom.label" class="children" @click.stop="">
<div
v-for="item in activeCom.children"
:key="item.value"
......@@ -331,6 +331,7 @@ export default {
// overflow: hidden;
}
.child {
transition: all 0.5s linear;
width: 275px;
height: 32px;
margin-bottom: 16px;
......
zh-baseversion-web/src/views/bigWindow/components/Top.vue 0 → 100644
View file @ 7132ffda
<template>
<!-- 设备按钮 -->
<div class="typelist-div" @click.stop="">
<div class="t flex" :class="{ show: searchShow }" @click.stop="">
<div class="device-btn-wrapper flex">
<div
class="list"
v-for="(item, index) in arr"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@click.stop="sel1(index, item)"
>
<img
:src="item.imgurl"
style="margin-top: 2px; float: left; margin-right: 3px"
/>
{{ item.name }}
</div>
</div>
<div class="img-wrapper flex">
<img
@click.stop="searchChange"
:class="{ show: searchShow }"
class="active"
src="@/assets/firstimage/top-down.png"
alt=""
/>
</div>
<div class="search flex">
<div class="input-wrapper flex">
<input v-model="searchVal" type="text" />
</div>
<div @click.stop="searchClick" class="btn-wrapper">搜索</div>
</div>
<img src="@/assets/firstimage/index-top-line.png" class="bottom-line" />
</div>
<!-- <div class="b"> -->
<transition name="fadeBottom" mode="out-in">
<div
@click.stop=""
class="device-container gdt"
v-if="searchShow && searchItemShow"
>
<div
class="devie-item zzz"
v-for="item in searchList"
:key="item.id+''+item.type"
@click="deviceItemClick(item)"
>
<!-- {{ item.NAME }} -->
<div class="a">{{ devviceData[item.type] }}</div>
<div class="b">{{ item.NAME }}</div>
</div>
</div>
</transition>
<!-- </div> -->
</div>
</template>
<script>
import { searchDevice, searchDeviceDetail } from "@/api/bigWindow/getDevice.js";
export default {
name: "",
data() {
return {
selarr1: [],
searchShow: false,
searchItemShow: false,
searchVal: "",
searchList: [],
devviceData: {
1: "阀井 :",
2: "调压箱 :",
3: "场站 :",
4: "居民用户 :",
5: "商业用户 :",
6: "工业用户 :",
7: "监控 :",
8: "餐饮单位液化气用户 :",
9: "管道 :",
},
arr: [
{
val: 2,
ischeck: false,
imgurl: require("@/assets/firstimage/tiaoyaxiang.png"),
name: "调压箱",
},
{
val: 3,
ischeck: false,
imgurl: require("@/assets/firstimage/famen.png"),
name: "阀门井",
},
{
val: 4,
ischeck: false,
imgurl: require("@/assets/firstimage/changzhan.png"),
name: "场 站",
},
{
val: 6,
ischeck: false,
imgurl: require("@/assets/firstimage/user.png"),
name: "居民用户",
},
{
val: 61,
ischeck: false,
imgurl: require("@/assets/firstimage/syUser.png"),
name: "商业用户",
},
{
val: 5,
ischeck: false,
imgurl: require("@/assets/firstimage/jiankong.png"),
name: "监 控",
},
{
val: 18,
ischeck: false,
imgurl: require("@/assets/firstimage/yhq.png"),
name: "餐饮单位液化气用户",
},
],
};
},
methods: {
searchChange() {
this.searchShow = !this.searchShow;
// 如果关闭了搜索框，那么搜索联动数据框也要关闭
if (!this.searchShow) {
this.searchItemShow = false;
}
},
searchClick() {
this.searchItemShow = true;
searchDevice({ name: this.searchVal }).then((res) => {
if (res.code == 200) {
this.searchList = Object.values(res.data).flat();
console.log(this.searchList);
}
});
},
deviceItemClick(item) {
searchDeviceDetail({ type: item.type, id: item.id }).then((res) => {
if (res.code == 200) {
if (res.data.length == 0) return;
this.$emit("deviceSearchClick",item, res.data[0]);
}
console.log(res);
});
},
clearSearchContainer() {
this.searchItemShow = false;
},
sel1(index, item) {
const ind = this.selarr1.indexOf(item.val);
if (ind >= 0) {
this.selarr1.splice(ind, 1);
} else {
this.selarr1.push(item.val);
}
this.$emit("sel1", this.selarr1);
// this.map.allfilter(this.selarr, this.selarr1);
},
},
};
</script>
<style lang="scss" scoped>
.typelist-div {
transition: all 0.2s linear;
width: 800px;
// height: 96px;
// height: 56px;
z-index: 9999;
position: fixed;
top: 90px;
margin-left: calc((100% - 755px) / 2);
background: rgba(2, 41, 81, 0.25);
border: 1px solid #275275;
box-sizing: border-box;
padding-top: 10px;
transform: scale(1);
.t {
transition: all 0.2s linear;
height: 40px;
// background: blue;
position: relative;
overflow: hidden;
&.show {
height: 85px;
}
.list {
z-index: 9999;
float: left;
margin-left: 15px;
height: 28px;
// margin-bottom:10px;
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: 12px;
padding: 1px 10px;
cursor: pointer;
line-height: 26px;
background: rgba(31, 106, 215, 0.32);
box-sizing: border-box;
border: 1px solid #2d64b4;
border-radius: 2px;
}
.list.active {
/* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
// font-size: 12px;
// color: #00ffff;
// border: 1px solid #0f6ca1;
// box-shadow: inset 0px 0px 10px 1px #0f6ca1;
// background-size: 100% 100%;
// background-repeat: no-repeat;
background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
border-radius: 2px;
box-sizing: border-box;
border: 1px solid #ffa065;
}
.list img {
width: 20px;
height: 20px;
}
.device-btn-wrapper {
width: 755px;
margin-right: 5px;
flex-wrap: wrap;
}
.search {
width: 755px;
position: absolute;
top: 40px;
.input-wrapper {
background: #082337;
box-sizing: border-box;
border: 1px solid #1a498e;
margin-left: 15px;
margin-right: 12px;
box-sizing: border-box;
// width: 600px;
flex: 1;
height: 28px;
align-items: center;
input {
border: none;
background: none;
color: #fff;
width: 100%;
padding-left: 8px;
&:focus {
outline: none;
}
}
}
.btn-wrapper {
width: 50px;
height: 28px;
color: #fff;
text-align: center;
line-height: 28px;
background: linear-gradient(180deg, #19d6fe 0%, #1684e5 100%);
box-sizing: border-box;
border: 1px solid #72c1ff;
cursor: pointer;
&:hover {
opacity: 0.7;
}
}
}
.img-wrapper {
width: 28px;
height: 28px;
background: rgba(3, 39, 70, 0.8);
border: 1px solid #125c98;
margin-right: 10px;
align-items: center;
justify-content: center;
img {
width: 20px;
height: 12px;
transform: rotateZ(0deg);
transition: all 0.2s linear;
cursor: pointer;
&.show {
transform: rotateZ(180deg);
}
}
}
.bottom-line {
position: absolute;
right: 0;
bottom: 0;
width: 280px;
height: 1px;
// background: red;
}
}
.device-container {
width: 755px;
max-height: 400px;
position: absolute;
background: rgba(2, 41, 81, 0.7);
border: 1px solid #275275;
box-sizing: border-box;
top: 100px;
padding: 10px;
padding-bottom: 0;
overflow-y: auto;
.devie-item {
color: #fff;
margin-bottom: 10px;
height: 28px;
line-height: 28px;
cursor: pointer;
box-sizing: border-box;
padding: 0 2px;
display: flex;
.a {
width: 150px;
}
&:hover {
background: linear-gradient(180deg, #ffb464 0%, #e96310 100%);
}
}
}
}
</style>
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ 7132ffda
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-15 14:29:45
* @LastEditTime: 2024-07-18 17:27:20
* @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
......@@ -35,45 +35,8 @@
@closeMediumPressureLine="clearBigWindowsSelectPipe"
/> -->
<!-- 底部按钮 -->
<!-- <div class="home-div">
<img src="../../assets/firstimage/bottombk.svg" alt="" style="backdrop-filter: blur(4px);" />
<div class="listingsSty fangy">
<div
@click="allCompany"
:class="selarr.length == 2 ? 'active' : ''"
class="firsty"
>
全部
</div>
<div
class="firsty"
:class="selarr.indexOf(item.val) >= 0 ? 'active' : ''"
v-for="(item, index) in typeList"
:key="item.val"
@click="sel(index, item)"
>
{{ item.name }}
</div>
</div>
</div> -->
<Top @sel1="sel1" @deviceSearchClick="deviceSearchClick" ref="Top" />
<Bottom v-if="enterpriseId == -2" @listChange="listChange" ref="Bottom" />
<!-- 设备按钮 -->
<div class="typelist-div">
<div
class="list"
v-for="(item, index) in arr"
:key="index"
:class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''"
@click="sel1(index, item)"
>
<img
:src="item.imgurl"
style="margin-top: 2px; float: left; margin-right: 3px"
/>
{{ item.name }}
</div>
</div>
<!-- 弹框 -->
<div
......@@ -200,6 +163,7 @@ import { getUserProfile } from "@/api/system/user";
import leftBar from "@/components/bigWindow/leftBar.vue";
import rightBar from "@/components/bigWindow/rightBar.vue";
import Bottom from "./components/Bottom.vue";
import Top from "./components/Top.vue";
import { mapState } from "vuex";
import MediumPressureLineVue from "../../components/bigWindow/MediumPressureLine.vue";
import PipeSelect from "../../components/bigWindow/PipeSelect.vue";
......@@ -213,6 +177,7 @@ export default {
OtherCenter,
PipeColor,
PipeSelect,
Top,
Bottom,
},
data() {
......@@ -431,12 +396,15 @@ export default {
...mapActions({
GetCompany: "bigWindowCompany/GetCompany",
}),
// 搜索设备上图功能
deviceSearchClick(device,deviceDetail){
console.log(device,deviceDetail)
},
leftRightBarChange() {
const scale = window.innerHeight / 1080;
let right = 0;
if (scale >= 1) {
right = (585 / 2) * (scale - 1) - 20;
right = (585 / 2) * (scale - 1) - 20;
} else {
right = (585 / 2) * (scale - 1) - 20;
}
......@@ -453,6 +421,7 @@ export default {
},
windowClick() {
this.$refs.Bottom.selectUpClear();
this.$refs.Top.clearSearchContainer();
},
// 点击了 大屏端 管道搜索的清除键
clearBigWindowsSelectPipe() {
......@@ -549,36 +518,44 @@ export default {
labelsLayerMarksDeviceUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户用户",mapData)
this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show);
});
},
labelsLayerMarksVideoGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log('Video',mapData)
this.map.labelsLayerMarksVideoGoMap(mapData, component, show);
});
},
labelsLayerMarksCzGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("场站场站场站场站场站场站场站场站场站场站场站场站",mapData)
this.map.labelsLayerMarksCzGoMap(mapData, component, show);
});
},
labelsLayerMarksFmjGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("阀门井",mapData)
this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
});
},
labelsLayerMarksTysGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("调压箱",mapData)
this.map.labelsLayerMarksTysGoMap(mapData, component, show);
});
},
labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) {
return httpFunc().then((res) => {
const mapData = res.data;
console.log("用户",mapData)
this.map.labelsLayerMarksDetectorUserList(mapData, component, show);
});
},
......@@ -636,22 +613,22 @@ export default {
this.$refs.mychild.choice(this.selarr);
},
// 睇下列表更改
allCompany() {
if (this.selarr.length == 2) {
this.selarr = [];
} else {
this.selarr = this.company
.filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
.map((item) => item.conpanyId);
}
// allCompany() {
// if (this.selarr.length == 2) {
// this.selarr = [];
// } else {
// this.selarr = this.company
// .filter((item) => item.conpanyId != 6 && item.conpanyId != 12)
// .map((item) => item.conpanyId);
// }
// this.map.companyFilter(this.selarr);
this.map.allfilter(this.selarr, this.selarr1);
this.map.infowindowClose();
this.show = false;
this.$refs.mychild2.choice(this.selarr);
this.$refs.mychild.choice(this.selarr);
},
// // this.map.companyFilter(this.selarr);
// this.map.allfilter(this.selarr, this.selarr1);
// this.map.infowindowClose();
// this.show = false;
// this.$refs.mychild2.choice(this.selarr);
// this.$refs.mychild.choice(this.selarr);
// },
sel(index, item) {
this.map.infowindowClose();
this.show = false;
......@@ -676,13 +653,15 @@ export default {
this.$refs.mychild.choice(this.selarr);
},
sel1(index, item) {
const ind = this.selarr1.indexOf(item.val);
if (ind >= 0) {
this.selarr1.splice(ind, 1);
} else {
this.selarr1.push(item.val);
}
sel1(selarr1) {
// const ind = this.selarr1.indexOf(item.val);
// if (ind >= 0) {
// this.selarr1.splice(ind, 1);
// } else {
// this.selarr1.push(item.val);
// }
this.selarr1 = [...selarr1];
console.log(this.selarr, this.selarr1)
this.map.allfilter(this.selarr, this.selarr1);
},
//用户的设备center
......@@ -753,7 +732,7 @@ export default {
},
// 销毁定时器
beforeDestroy() {
window.removeEventListener("resize",this.leftRightBarChange);
window.removeEventListener("resize", this.leftRightBarChange);
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
......@@ -902,44 +881,4 @@ export default {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.typelist-div {
width: 755px;
height: 50px;
z-index: 9999;
position: fixed;
top: 0;
margin-top: 90px;
margin-left: calc((100% - 755px) / 2);
}
.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: 12px;
padding: 1px 10px;
cursor: pointer;
line-height: 26px;
border: 1px solid rgb(57, 68, 124);
background: #12268e33;
border-radius: 3px;
}
.list.active {
/* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%);
box-shadow: inset 0px 1px 2px 1px #125c9b; */
font-size: 12px;
color: #00ffff;
border: 1px solid #0f6ca1;
box-shadow: inset 0px 0px 10px 1px #0f6ca1;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.list img {
width: 20px;
}
</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