Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
lnn19986213
commit
c988a20637
|
|
@ -58,13 +58,14 @@
|
|||
</div>
|
||||
<div class="minTopTitle"></div>
|
||||
<div class="minTopNum">
|
||||
<div
|
||||
<!-- <div
|
||||
class="numItem"
|
||||
v-for="(item, index) in minData.minTop"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div> -->
|
||||
<FlipClock :list="minData.minTop"></FlipClock>
|
||||
</div>
|
||||
<div style="overflow: hidden; margin-top: 20px">
|
||||
<div class="minPie">
|
||||
|
|
@ -155,6 +156,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
|
|||
import edxs from "./echart_analyze/edXS.vue";
|
||||
import eP2 from "./echart_analyze/eP2.vue";
|
||||
import ylXZZC from "./echart_analyze/ylXZZC.vue";
|
||||
import FlipClock from "./echart_analyze/FlipClock.vue";
|
||||
|
||||
import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
|
||||
import ViewDataimg1 from "@/assets/images/sjfx/sjfx1.png";
|
||||
|
|
@ -267,7 +269,8 @@ const data = reactive({
|
|||
zccs2: ["100", "130", "220"], //一码通
|
||||
});
|
||||
const minData = reactive({
|
||||
minTop: ["4", "9", "1", "6", "2", "人"],
|
||||
minTop: 49162,
|
||||
minTop1: ["4", "9", "1", "6", "2", "人"],
|
||||
minPieData1: {
|
||||
wfgz: "1500",
|
||||
xstp: "1610",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,341 @@
|
|||
<template>
|
||||
<div class="flipbox">
|
||||
<div class="clock" id="clock">
|
||||
<div v-for="(digit, index) in digits" :key="index" class="flip down">
|
||||
<div class="digital front number0"></div>
|
||||
<div class="digital back number1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flip1">人</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, onBeforeMount, ref, reactive, defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [],
|
||||
});
|
||||
|
||||
class Flipper {
|
||||
constructor(config) {
|
||||
this.config = Object.assign(
|
||||
{
|
||||
node: null,
|
||||
frontText: "number0",
|
||||
backText: "number1",
|
||||
duration: 200,
|
||||
},
|
||||
config
|
||||
);
|
||||
|
||||
this.nodeClass = {
|
||||
flip: "flip",
|
||||
front: "digital front",
|
||||
back: "digital back",
|
||||
};
|
||||
|
||||
this.frontNode = this.config.node.querySelector(".front");
|
||||
this.backNode = this.config.node.querySelector(".back");
|
||||
this.isFlipping = false;
|
||||
this._init();
|
||||
}
|
||||
|
||||
_init() {
|
||||
this._setFront(this.config.frontText);
|
||||
this._setBack(this.config.backText);
|
||||
}
|
||||
|
||||
_setFront(className) {
|
||||
this.frontNode.setAttribute(
|
||||
"class",
|
||||
this.nodeClass.front + " " + className
|
||||
);
|
||||
}
|
||||
|
||||
_setBack(className) {
|
||||
this.backNode.setAttribute("class", this.nodeClass.back + " " + className);
|
||||
}
|
||||
|
||||
_flip(type, front, back) {
|
||||
if (this.isFlipping) return;
|
||||
|
||||
this.isFlipping = true;
|
||||
this._setFront(front);
|
||||
this._setBack(back);
|
||||
|
||||
let flipClass = this.nodeClass.flip;
|
||||
if (type === "down") flipClass += " down";
|
||||
|
||||
this.config.node.setAttribute("class", flipClass + " go");
|
||||
|
||||
setTimeout(() => {
|
||||
this.config.node.setAttribute("class", flipClass);
|
||||
this.isFlipping = false;
|
||||
this._setFront(back);
|
||||
}, this.config.duration);
|
||||
}
|
||||
|
||||
flipDown(front, back) {
|
||||
this._flip("down", front, back);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCounter(flippers, number) {
|
||||
const strNumber = number.toString().padStart(5, "0");
|
||||
for (let i = 0; i < flippers.length; i++) {
|
||||
const currentDigit = strNumber[i];
|
||||
const flipper = flippers[i];
|
||||
flipper.flipDown(`number${flipper.currentDigit}`, `number${currentDigit}`);
|
||||
flipper.currentDigit = currentDigit;
|
||||
}
|
||||
}
|
||||
|
||||
const digits = ref([0, 0, 0, 0, 0]);
|
||||
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
data.list = props.list;
|
||||
const flips = document.querySelectorAll(".flip");
|
||||
const flipObjs = [];
|
||||
|
||||
for (let i = 0; i < flips.length; i++) {
|
||||
flipObjs.push(
|
||||
new Flipper({
|
||||
node: flips[i],
|
||||
frontText: "number0",
|
||||
backText: "number0",
|
||||
})
|
||||
);
|
||||
flipObjs[i].currentDigit = 0;
|
||||
}
|
||||
|
||||
const randomNumbers = [2345, 6542, data.list];
|
||||
let index = 0;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (index >= randomNumbers.length) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
updateCounter(flipObjs, randomNumbers[index]);
|
||||
index++;
|
||||
}
|
||||
}, 333);
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flip {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 66px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
border: solid 2px rgba(0, 183, 255, 1);
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
font-size: 46px;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
font-family: "Helvetica Neue";
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.flipbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flip1 {
|
||||
display: inline-block;
|
||||
width: 66px;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 46px;
|
||||
text-align: center;
|
||||
font-family: "Helvetica Neue";
|
||||
color: #fff;
|
||||
background: rgba(7, 91, 123, 1);
|
||||
border: solid 2px rgba(0, 183, 255, 1);
|
||||
}
|
||||
|
||||
.flip .digital:before,
|
||||
.flip .digital:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.flip .digital:before {
|
||||
top: 0;
|
||||
bottom: 50%;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: rgba(7, 91, 123, 1);
|
||||
}
|
||||
|
||||
.flip .digital:after {
|
||||
top: 50%;
|
||||
bottom: 0;
|
||||
border-radius: 0 0 2px 2px;
|
||||
line-height: 0;
|
||||
background: rgba(3, 150, 187, 1);
|
||||
}
|
||||
|
||||
.flip.down .front:before {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.flip.down .back:after {
|
||||
z-index: 2;
|
||||
transform-origin: 50% 0%;
|
||||
transform: perspective(160px) rotateX(180deg);
|
||||
}
|
||||
|
||||
.flip.down .front:after,
|
||||
.flip.down .back:before {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flip.down.go .front:before {
|
||||
transform-origin: 50% 100%;
|
||||
animation: frontFlipDown 0.6s ease-in-out both;
|
||||
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip.down.go .back:after {
|
||||
animation: backFlipDown 0.6s ease-in-out both;
|
||||
}
|
||||
|
||||
.flip.up .front:after {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.flip.up .back:before {
|
||||
z-index: 2;
|
||||
transform-origin: 50% 100%;
|
||||
transform: perspective(160px) rotateX(-180deg);
|
||||
}
|
||||
|
||||
.flip.up .front:before,
|
||||
.flip.up .back:after {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.flip.up.go .front:after {
|
||||
transform-origin: 50% 0;
|
||||
animation: frontFlipUp 0.6s ease-in-out both;
|
||||
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip.up.go .back:before {
|
||||
animation: backFlipUp 0.6s ease-in-out both;
|
||||
}
|
||||
|
||||
@keyframes frontFlipDown {
|
||||
0% {
|
||||
transform: perspective(160px) rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(160px) rotateX(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backFlipDown {
|
||||
0% {
|
||||
transform: perspective(160px) rotateX(180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(160px) rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes frontFlipUp {
|
||||
0% {
|
||||
transform: perspective(160px) rotateX(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(160px) rotateX(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes backFlipUp {
|
||||
0% {
|
||||
transform: perspective(160px) rotateX(-180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: perspective(160px) rotateX(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
.flip .number0:before,
|
||||
.flip .number0:after {
|
||||
content: "0";
|
||||
}
|
||||
|
||||
.flip .number1:before,
|
||||
.flip .number1:after {
|
||||
content: "1";
|
||||
}
|
||||
|
||||
.flip .number2:before,
|
||||
.flip .number2:after {
|
||||
content: "2";
|
||||
}
|
||||
|
||||
.flip .number3:before,
|
||||
.flip .number3:after {
|
||||
content: "3";
|
||||
}
|
||||
|
||||
.flip .number4:before,
|
||||
.flip .number4:after {
|
||||
content: "4";
|
||||
}
|
||||
|
||||
.flip .number5:before,
|
||||
.flip .number5:after {
|
||||
content: "5";
|
||||
}
|
||||
|
||||
.flip .number6:before,
|
||||
.flip .number6:after {
|
||||
content: "6";
|
||||
}
|
||||
|
||||
.flip .number7:before,
|
||||
.flip .number7:after {
|
||||
content: "7";
|
||||
}
|
||||
|
||||
.flip .number8:before,
|
||||
.flip .number8:after {
|
||||
content: "8";
|
||||
}
|
||||
|
||||
.flip .number9:before,
|
||||
.flip .number9:after {
|
||||
content: "9";
|
||||
}
|
||||
|
||||
.clock {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 260px"></div>
|
||||
<div ref="chart" style="width: 50%; height: 260px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -172,51 +172,51 @@ const getOption1 = () => {
|
|||
const getOption = () => {
|
||||
data.option = {
|
||||
//你的代码
|
||||
legend: [
|
||||
{
|
||||
orient: "vertical",
|
||||
right: "5%",
|
||||
top: "center",
|
||||
type: "scroll",
|
||||
height: "80%",
|
||||
itemWidth: 20, // 可以设置图例标记的宽度
|
||||
itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
itemGap: 20,
|
||||
// itemStyle: {
|
||||
// borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
// borderWidth: 10, // 图例边框宽度
|
||||
// borderRadius: 20,
|
||||
// legend: [
|
||||
// {
|
||||
// orient: "vertical",
|
||||
// right: "10%",
|
||||
// top: "15%",
|
||||
// type: "scroll",
|
||||
// height: "80%",
|
||||
// itemWidth: 20, // 可以设置图例标记的宽度
|
||||
// itemHeight: 10, // 设置图例标记的高度，这里是椭圆的长轴
|
||||
// itemGap: 20,
|
||||
// // itemStyle: {
|
||||
// // borderColor: "rgba(255,255,255,0.2)", // 图例边框颜色
|
||||
// // borderWidth: 10, // 图例边框宽度
|
||||
// // borderRadius: 20,
|
||||
// // },
|
||||
// pageTextStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 14,
|
||||
// padding: 10,
|
||||
// },
|
||||
pageTextStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
padding: 10,
|
||||
},
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
fontSize: 14,
|
||||
padding: 10,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
},
|
||||
data: data.list,
|
||||
// textStyle: {
|
||||
// color: "#ffffff",
|
||||
// fontSize: 14,
|
||||
// padding: 10,
|
||||
// rich: {
|
||||
// name: {
|
||||
// width: 80,
|
||||
// fontSize: 16,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// data: data.list,
|
||||
|
||||
//格式化图例文本
|
||||
formatter: function (name) {
|
||||
var target;
|
||||
for (var i = 0, l = data.list.length; i < l; i++) {
|
||||
if (data.list[i].name == name) {
|
||||
target = data.list[i].value;
|
||||
}
|
||||
}
|
||||
return `${name}：${target} 人`;
|
||||
},
|
||||
},
|
||||
],
|
||||
// //格式化图例文本
|
||||
// formatter: function (name) {
|
||||
// var target;
|
||||
// for (var i = 0, l = data.list.length; i < l; i++) {
|
||||
// if (data.list[i].name == name) {
|
||||
// target = data.list[i].value;
|
||||
// }
|
||||
// }
|
||||
// return `${name}：${target} 人`;
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
|
||||
|
|
@ -234,7 +234,7 @@ const getOption = () => {
|
|||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["15%", "90%"],
|
||||
center: ["35%", "50%"],
|
||||
center: ["45%", "40%"],
|
||||
label: {
|
||||
position: "inside",
|
||||
formatter(item) {
|
||||
|
|
@ -276,7 +276,7 @@ const getOption = () => {
|
|||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: ["15%", "92%"],
|
||||
center: ["35%", "50%"],
|
||||
center: ["45%", "40%"],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
|
|
|
|||
206
src/view/sy.vue
206
src/view/sy.vue
|
|
@ -230,7 +230,22 @@
|
|||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<div class="bt">
|
||||
<ePie style="margin-bottom: 20px" :list="data.ageGroup"></ePie>
|
||||
<div
|
||||
class="btList"
|
||||
ref="mainRef"
|
||||
@mouseenter="stopAutoScroll"
|
||||
@mouseleave="startAutoScroll"
|
||||
>
|
||||
<div class="btList_item" v-for="(item, index) in btList">
|
||||
<div class="btList_item_color" :style="bt(index)"></div>
|
||||
<div class="btList_item_value">
|
||||
{{ item.name }}：{{ item.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
|
@ -1054,48 +1069,6 @@ const data = reactive({
|
|||
],
|
||||
});
|
||||
|
||||
// const tableData = ref([
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: true,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// {
|
||||
// company: "龙游县文旅集团",
|
||||
// address: "龙游县五一单位",
|
||||
// finish: false,
|
||||
// },
|
||||
// ]);
|
||||
const jysyList = ref([
|
||||
{
|
||||
title: "县镇",
|
||||
|
|
@ -1233,9 +1206,25 @@ const getData = async () => {
|
|||
"nl91100",
|
||||
"nl100",
|
||||
];
|
||||
const ageBt = [
|
||||
"nl110",
|
||||
"nl1120",
|
||||
"nl2130",
|
||||
"nl3140",
|
||||
"nl4150",
|
||||
"nl5160",
|
||||
"nl6170",
|
||||
"nl7180",
|
||||
"nl8190",
|
||||
"nl91100",
|
||||
"nl100",
|
||||
];
|
||||
ageGroupKeys.forEach((key) => {
|
||||
data.ageGroup[key] = res.data.rksj[key];
|
||||
});
|
||||
ageBt.forEach((key, index) => {
|
||||
btList.value[index].value = res.data.rksj[key];
|
||||
});
|
||||
}
|
||||
// 年龄比例
|
||||
const ageRatioKeys = [
|
||||
|
|
@ -1335,9 +1324,6 @@ const qyfyList = reactive([
|
|||
img: qyfw4,
|
||||
},
|
||||
]);
|
||||
onBeforeMount(async () => {
|
||||
getData();
|
||||
});
|
||||
|
||||
// 交通事业弹框
|
||||
const showEc = (val) => {
|
||||
|
|
@ -1428,6 +1414,107 @@ const showTab = (val) => {
|
|||
break;
|
||||
}
|
||||
};
|
||||
//自动滚动(饼图)
|
||||
//扇形图颜色数据
|
||||
const colorList = [
|
||||
{ color2: "rgba(90,255,223,1)" },
|
||||
{ color2: "rgba(115,255,145,1)" },
|
||||
{ color2: "rgba(153,255,179,1)" },
|
||||
{ color2: "rgba(193,255,138,1)" },
|
||||
{ color2: "rgba(255,207,74,1)" },
|
||||
{ color2: "rgba(254,178,128,1)" },
|
||||
{ color2: "rgba(151,176,255,1)" },
|
||||
{ color2: "rgba(164,151,255,1)" },
|
||||
{ color2: "rgba(159,110,254,1)" },
|
||||
{ color2: "rgba(180,143,241,1)" },
|
||||
{ color2: "rgba(76,174,254,1)" },
|
||||
];
|
||||
const bt = computed(() => {
|
||||
return function (index) {
|
||||
let str = `--i:${colorList[index].color2}`;
|
||||
return str;
|
||||
};
|
||||
});
|
||||
const btList = ref([
|
||||
{
|
||||
name: "1-10岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "11-20岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "21-30岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "31-40岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "41-50岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "51-60岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "61-70岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "71-80岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "81-90岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "91-100岁人口总数",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "100岁以上人口总数",
|
||||
value: "",
|
||||
},
|
||||
]);
|
||||
const mainRef = ref(null);
|
||||
let isAutoScrolling = true;
|
||||
|
||||
const stopAutoScroll = () => {
|
||||
isAutoScrolling = false;
|
||||
};
|
||||
|
||||
const startAutoScroll = () => {
|
||||
isAutoScrolling = true;
|
||||
autoScroll();
|
||||
};
|
||||
|
||||
const autoScroll = () => {
|
||||
if (!isAutoScrolling) return;
|
||||
|
||||
const mainEl = mainRef.value;
|
||||
mainEl.scrollTop += 1; // 每次滚动的距离
|
||||
|
||||
if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
|
||||
setTimeout(() => {
|
||||
mainEl.scrollTo({ top: 0, behavior: "smooth" });
|
||||
setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
|
||||
}, 1000); // 暂停1秒后开始快速滚回顶部
|
||||
} else {
|
||||
requestAnimationFrame(autoScroll);
|
||||
}
|
||||
};
|
||||
onBeforeMount(async () => {
|
||||
getData();
|
||||
setTimeout(()=>{
|
||||
startAutoScroll();
|
||||
},1000)
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -2365,7 +2452,36 @@ const showTab = (val) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
//饼图list
|
||||
.bt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.btList {
|
||||
width: 45%;
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
.btList_item {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
|
||||
.btList_item_color {
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background-color: var(--i);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btList_item_value {
|
||||
font-size: 18px;
|
||||
margin-top: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.table {
|
||||
width: 94%;
|
||||
margin-left: 5px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue