Merge branch 'main' of git.zdool.com:xs/ggfwjsc
This commit is contained in:
duanxiaohai
commit
1520e272b6
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -1,150 +0,0 @@
|
|||
<template>
|
||||
<div ref="chart" style="width:100%;height:300px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const chart =ref(); // 创建DOM引用
|
||||
|
||||
var plantCap = [{
|
||||
name: '中国工程院 \n\n 院士'
|
||||
}, {
|
||||
name: '计算机应用 \n\n 专家'
|
||||
}, {
|
||||
name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授'
|
||||
}, {
|
||||
name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
|
||||
}, {
|
||||
name: '浙江大学信息 \n\n 学部主任'
|
||||
}, {
|
||||
name: '博士生导师'
|
||||
}];
|
||||
|
||||
var datalist = [{
|
||||
offset: [10, 73],
|
||||
symbolSize: 90,
|
||||
opacity: .95,
|
||||
color: '#C58F5A'
|
||||
}, {
|
||||
offset: [40, 63],
|
||||
symbolSize: 90,
|
||||
opacity: .88,
|
||||
color: '#076097'
|
||||
}, {
|
||||
offset: [80, 73],
|
||||
symbolSize: 130,
|
||||
opacity: .84,
|
||||
color: '#BF74CF'
|
||||
}, {
|
||||
offset: [20, 23],
|
||||
symbolSize: 140,
|
||||
opacity: .84,
|
||||
color: '#2D90ED'
|
||||
}, {
|
||||
offset: [60, 23],
|
||||
symbolSize: 95,
|
||||
opacity: .84,
|
||||
color: '#079773'
|
||||
}, {
|
||||
offset: [90, 33],
|
||||
symbolSize: 80,
|
||||
opacity: .84,
|
||||
color: '#C89D4A'
|
||||
}];
|
||||
var datas = [];
|
||||
for (var i = 0; i < plantCap.length; i++) {
|
||||
var item = plantCap[i];
|
||||
var itemToStyle = datalist[i];
|
||||
datas.push({
|
||||
name: item.name,
|
||||
value: itemToStyle.offset,
|
||||
symbolSize: itemToStyle.symbolSize,
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: itemToStyle.color,
|
||||
opacity: itemToStyle.opacity
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
let option = {
|
||||
grid: {
|
||||
show: false,
|
||||
top: 10,
|
||||
bottom: 10
|
||||
},
|
||||
xAxis: [{
|
||||
gridIndex: 0,
|
||||
type: 'value',
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
nameLocation: 'middle',
|
||||
nameGap: 5
|
||||
}],
|
||||
yAxis: [{
|
||||
gridIndex: 0,
|
||||
min: 0,
|
||||
show: false,
|
||||
max: 100,
|
||||
nameLocation: 'middle',
|
||||
nameGap: 30
|
||||
}],
|
||||
series: [{
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
symbolSize: 120,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
color: '#fff',
|
||||
textStyle: {
|
||||
fontSize: '20'
|
||||
}
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00acea'
|
||||
}
|
||||
},
|
||||
data: datas
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
// 使用生命钩子
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中： 需要引入
|
||||
var myChart = echarts.init(chart.value)
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
window.addEventListener('resize',()=>{
|
||||
myChart.resize()
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,281 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height: 300px"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const data = [150, 230, 224, 218, 135, 147];
|
||||
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
|
||||
const data2 = [
|
||||
"10000人",
|
||||
"14000人",
|
||||
"23000人",
|
||||
"10000人",
|
||||
"13200人",
|
||||
"10000人",
|
||||
];
|
||||
|
||||
// const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
const option = {
|
||||
// color,
|
||||
// calculable: true,
|
||||
grid: {
|
||||
top: "6%",
|
||||
left: "9%",
|
||||
right: "10%",
|
||||
bottom: "0%",
|
||||
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
|
||||
},
|
||||
tooltip: {
|
||||
show: true, //---是否显示提示框,默认为true
|
||||
trigger: "axis",
|
||||
formatter: "{b0}:{c0}",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "value",
|
||||
scale: false,
|
||||
axisLabel: {
|
||||
//坐标轴分割线
|
||||
show: false,
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//y轴线的颜色以及宽度
|
||||
show: false // 取消x轴线
|
||||
},
|
||||
splitLine: {
|
||||
show: false,//---grid 区域中的分隔线
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
// data: ["2019", "2019", "2019", "2019", "2019", "2019", "2019"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
scale: true,
|
||||
// name: "时长/小时",
|
||||
// max: data.length,
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#ffffff",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
axisLabel: {
|
||||
//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
//分割线配置
|
||||
show: false,
|
||||
// lineStyle: {
|
||||
// color: "#ffffff",
|
||||
// width: 1,
|
||||
// type: "solid",
|
||||
// },
|
||||
},
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: true,
|
||||
position: "right",
|
||||
axisLine: {
|
||||
//---坐标轴 轴线
|
||||
show: false // 取消轴线
|
||||
},
|
||||
axisLabel: {
|
||||
//---坐标轴 标签
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false, // 设置轴刻度不显示
|
||||
},
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: data,
|
||||
barWidth: 5, //柱宽
|
||||
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// // borderWidth: 1,
|
||||
// // borderColor: "rgba(0, 183, 255, 1)",
|
||||
// // borderRadius: [0, 0, 50, 0], //圆角边框
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// { offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
// { offset: 1, color: "rgba(0, 183, 255, 1)" },
|
||||
// ]),
|
||||
// // color: [{new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
// // { offset: 1, color: "rgba(0, 230, 255, 1)" },
|
||||
// // ])},
|
||||
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
// // { offset: 1, color: "rgba(0, 255, 208,1)" },
|
||||
// // ])},
|
||||
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
|
||||
// // { offset: 1, color: "rgba(255, 234, 90, 1)" },
|
||||
// // ])},
|
||||
// // ],
|
||||
// },
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
let colorList = [
|
||||
["rgba(0, 230, 255, 1)", "rgba(0, 230, 255, 0.2)"],
|
||||
["rgba(0, 255, 208,1)", "rgba(0, 255, 208, 0.20)"],
|
||||
["rgba(255, 234, 90, 1)", "rgba(255, 234, 90, 0.20)"],
|
||||
];
|
||||
if (params.dataIndex == 0) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, //y->y2
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.dataIndex % 3 == 0) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, //y->y2
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(23, 237, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(23, 237, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.dataIndex % 2 == 0) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, //y->y2
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(255, 243, 119, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(255, 242, 142, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1, //y->y2
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(142, 187, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(142, 187, 255, 0.20)",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 1000,
|
||||
color: "rgba(0,0,0,0)",
|
||||
backgroundColor: "rgba(0, 230, 255, 1)",
|
||||
shadowColor: "#00E6FF",
|
||||
position: ["99%", -1],
|
||||
shadowBlur: 6,
|
||||
},
|
||||
},
|
||||
{
|
||||
yAxisIndex: 1,
|
||||
showBackground: true,
|
||||
barWidth: 30, //外阴影背景宽
|
||||
itemStyle: {
|
||||
color: "rgba(0, 230, 255, 0)", //外阴影背景
|
||||
},
|
||||
// data: data.map(() => data),
|
||||
data: data,
|
||||
type: "bar",
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(64, 247, 176, 0.25)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(17, 34, 64, 0.25)",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(option);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div ref="chart" style="width: 100%; height:370px;"></div>
|
||||
<div ref="chart" style="width: 100%; height:350px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ const data = [120, 200, 50, 80, 70];
|
|||
const data2 = [12, 20, 5, 8, 7];
|
||||
const data3 = [20, 100, 40, 80, 70];
|
||||
const lineData = [150, 230, 24, 218, 135];
|
||||
const lineData2 = [100, 200, 40, 180, 15];
|
||||
const lineData2 = [100, 200, 40, 180, 300];
|
||||
const max = data
|
||||
.concat(lineData)
|
||||
.concat(lineData,lineData2)
|
||||
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
|
||||
// 背景颜色
|
||||
const color = [
|
||||
|
|
|
|||
|
|
@ -3,21 +3,17 @@
|
|||
<div class="displayFlex left_bg">
|
||||
<div class="flex1">
|
||||
<div class="yd_title left_1"></div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: calc(100% - 46px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<ePie1></ePie1>
|
||||
<ePie2></ePie2>
|
||||
<ePie3></ePie3>
|
||||
<ePie4></ePie4>
|
||||
<eP1></eP1>
|
||||
<div class="t_1"></div>
|
||||
<div class="t_2">
|
||||
<div class="t_3" v-for="(item,index) in fl" :key="index">
|
||||
<div class="top">{{item.value}}%</div>
|
||||
<div :class='item.cls'></div>
|
||||
<div class="right">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div class="flex1" style="margin-top: 30px">
|
||||
<div class="yd_title left_2"></div>
|
||||
<div class="selectLint">
|
||||
<div class="selectBox">
|
||||
|
|
@ -102,16 +98,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex1">
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<div style="width: 100%; display: flex; flex-wrap: wrap">
|
||||
<edie></edie>
|
||||
<div class="rating">
|
||||
<edXX :list="selectData.list1" :active="selectData.active "></edXX>
|
||||
<edXX :list="selectData.list1" :active="selectData.active"></edXX>
|
||||
<div class="ratingBtn">
|
||||
<div
|
||||
class="onImg"
|
||||
|
|
@ -238,7 +228,29 @@ import ePie2 from "./echarts_education/pie2.vue";
|
|||
import ePie3 from "./echarts_education/pie3.vue";
|
||||
import ePie4 from "./echarts_education/pie4.vue";
|
||||
import ePieRose from "./echarts_education/pieRose.vue";
|
||||
|
||||
import eP1 from "./echarts_education/eP1.vue";
|
||||
const fl = ref([
|
||||
{
|
||||
name: "留守儿童",
|
||||
value: 16.1,
|
||||
cls: "left1",
|
||||
},
|
||||
{
|
||||
name: "独生子女",
|
||||
value: 32.1,
|
||||
cls: "left2",
|
||||
},
|
||||
{
|
||||
name: "单亲家庭",
|
||||
value: 65.1,
|
||||
cls: "left3",
|
||||
},
|
||||
{
|
||||
name: "享受低保",
|
||||
value: 0.1,
|
||||
cls: "left4",
|
||||
},
|
||||
]);
|
||||
const selectData = reactive({
|
||||
value1: "111",
|
||||
value2: "tes1",
|
||||
|
|
@ -1176,6 +1188,92 @@ onBeforeMount(() => {
|
|||
background: rgba(0, 162, 231, 1);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
|
||||
}
|
||||
.t_1 {
|
||||
margin: 10px auto;
|
||||
width: 100%;
|
||||
height: 52px;
|
||||
background-image: url(@/assets/images/education/title.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.t_2 {
|
||||
margin-top: 35px;
|
||||
padding: 0 10px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.t_3 {
|
||||
width: 135px;
|
||||
height: 90px;
|
||||
background-image: url(@/assets/images/education/fk.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.top {
|
||||
position: absolute;
|
||||
left: 38px;
|
||||
top: -25px;
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
line-height: 30px;
|
||||
}
|
||||
.left1 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 35px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(@/assets/images/education/lset.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 35px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(@/assets/images/education/dszn.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left3 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 35px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(@/assets/images/education/dqjt.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.left4 {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 35px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-image: url(@/assets/images/education/xsdb.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.right {
|
||||
position: absolute;
|
||||
left: 65px;
|
||||
top: 35px;
|
||||
width: 38px;
|
||||
height: 40px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.selectBox {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
v-if="leftchoose.first == '1'"
|
||||
src="@/assets/images/hygiene/yb_1.png"
|
||||
class="c"
|
||||
style="width:160px;"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
v-if="leftchoose.first == '2'"
|
||||
src="@/assets/images/hygiene/yb_2.png"
|
||||
class="c"
|
||||
style="width:160px;"
|
||||
style="width: 160px"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
src="@/assets/images/hygiene/yb_1_1.png"
|
||||
class="c"
|
||||
class="c"
|
||||
@click="change('first', '2')"
|
||||
/>
|
||||
</span>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<div class="minTopPart2">
|
||||
<div class="left">
|
||||
<div class="leftImg"><eP4></eP4></div>
|
||||
|
||||
|
||||
<div class="left_me">
|
||||
<div>建档率</div>
|
||||
<div>92.96%</div>
|
||||
|
|
@ -77,19 +77,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<div class="flex1" style="flex:0.9">
|
||||
<div class="flex1" style="flex: 0.9">
|
||||
<div class="yd_title mechanism"></div>
|
||||
<eP6></eP6>
|
||||
</div>
|
||||
<div class="flex1" style="flex:1.1;">
|
||||
<div class="flex1" style="flex: 1.1">
|
||||
<div class="yd_title service"></div>
|
||||
<eP7></eP7>
|
||||
</div>
|
||||
<div class="flex1" >
|
||||
<div class="flex1">
|
||||
<div class="yd_title last"></div>
|
||||
<div class="table">
|
||||
<div class="item" v-for="i in 15">3月2日健康日，在龙中公园进行健康活动宣</div>
|
||||
|
||||
<div class="item" v-for="i in 15">
|
||||
3月2日健康日，在龙中公园进行健康活动宣
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,8 +164,10 @@ const change = (name, index) => {
|
|||
right: 5px;
|
||||
top: 1px;
|
||||
}
|
||||
.c{
|
||||
width: 130px; height: 42px; cursor: pointer
|
||||
.c {
|
||||
width: 130px;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -591,8 +594,8 @@ const change = (name, index) => {
|
|||
right: 50px;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
letter-spacing: 5px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.mtpText2 {
|
||||
width: 140px;
|
||||
|
|
@ -613,15 +616,15 @@ const change = (name, index) => {
|
|||
background-image: url(@/assets/images/hygiene/xia.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 60px auto;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin-top: 80px;
|
||||
margin-top: 90px;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 60px;
|
||||
margin-left: 40px;
|
||||
margin-top: -10px;
|
||||
.leftImg {
|
||||
width: 105px;
|
||||
|
|
@ -631,14 +634,19 @@ const change = (name, index) => {
|
|||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ccc;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
margin-left: 40px;
|
||||
margin-left: 50px;
|
||||
.rightImg {
|
||||
width: 81px;
|
||||
height: 81px;
|
||||
|
|
@ -650,7 +658,12 @@ const change = (name, index) => {
|
|||
margin-left: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ccc;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -659,9 +672,9 @@ const change = (name, index) => {
|
|||
margin-top: 10px;
|
||||
width: 95%;
|
||||
height: 240px;
|
||||
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
.item {
|
||||
width: 98%;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -672,24 +685,23 @@ const change = (name, index) => {
|
|||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
/* 滚动条整体部分 */
|
||||
.table::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
// height: 10px;
|
||||
width: 5px;
|
||||
// height: 10px;
|
||||
}
|
||||
/* 滚动槽 */
|
||||
.table::-webkit-scrollbar-track {
|
||||
border-radius: 1px;
|
||||
background: rgba(41, 157, 255, 0.56);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
|
||||
border-radius: 1px;
|
||||
background: rgba(41, 157, 255, 0.56);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
|
||||
}
|
||||
/* 滚动条滑块样式 */
|
||||
.table::-webkit-scrollbar-thumb {
|
||||
background-clip: content-box;
|
||||
border-radius: 6px;
|
||||
background: rgba(41, 157, 255, 1);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
|
||||
background-clip: content-box;
|
||||
border-radius: 6px;
|
||||
background: rgba(41, 157, 255, 1);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue