587 lines
13 KiB
Vue
587 lines
13 KiB
Vue
|
<!-- 晴雨台 -->
|
|||
|
|
<template>
|
|||
|
|
<div class="side-bg">
|
|||
|
|
<div>
|
|||
|
|
<TitleC title="晴雨台" :swshow="false"></TitleC>
|
|||
|
|
</div>
|
|||
|
|
<div class="weather_body">
|
|||
|
|
<div>
|
|||
|
|
<div><span>温度：</span><span>15°C</span></div>
|
|||
|
|
<div><span>湿度：</span><span>55%</span></div>
|
|||
|
|
<div><span>气压：</span><span>30P</span></div>
|
|||
|
|
<div><span>降水量：</span><span>50ml</span></div>
|
|||
|
|
<div><span>天气状况：</span><span>多云</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div v-for="(item, index) in 7" :key="index">
|
|||
|
|
<span>2023年12月15日</span>
|
|||
|
|
<span>多云</span>
|
|||
|
|
<span>1°C~11°C</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="title">气温走势</div>
|
|||
|
|
<div class="chart-wrapper">
|
|||
|
|
<div class="container" ref="tenementRef"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="title" style="margin-top: 20px">空气指数</div>
|
|||
|
|
<div class="chart-wrapper airEcharts">
|
|||
|
|
<div class="container" ref="airTenementRef"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="airIndex">
|
|||
|
|
<div class="title">空气指数</div>
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<span>PM2.5</span>
|
|||
|
|
<span>15</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>PM10</span>
|
|||
|
|
<span>93</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>CO</span>
|
|||
|
|
<span>0</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span>SO2</span>
|
|||
|
|
<span>3</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 生活指数 -->
|
|||
|
|
<div class="title">生活指数</div>
|
|||
|
|
<div class="livingIndex_div">
|
|||
|
|
<div v-for="(item, index) in livingIndex" :key="index">
|
|||
|
|
<div>
|
|||
|
|
<span>{{ item.name }}</span>
|
|||
|
|
<span>{{ item.tate }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>{{ item.con }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 气象预警 -->
|
|||
|
|
<div class="title">气象预警</div>
|
|||
|
|
<div class="weatherWarning_div">
|
|||
|
|
<div v-for="(item, index) in weatherWarning" :key="index">
|
|||
|
|
<div>
|
|||
|
|
<div>
|
|||
|
|
<img
|
|||
|
|
src="@/assets/images/data-statistics/left/rainstorm-orange.png"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div>{{ item.name }}</div>
|
|||
|
|
<div>{{ item.time }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div>{{ item.con }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
import { defineComponent, onMounted, ref, watchEffect } from "vue";
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "Weather",
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<script setup lang='ts'>
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
|
|||
|
|
//气温折线图
|
|||
|
|
const tenementRef = ref();
|
|||
|
|
let option = {
|
|||
|
|
color: ["#FF831F"],
|
|||
|
|
tooltip: {
|
|||
|
|
show: false,
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {
|
|||
|
|
// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: "0%",
|
|||
|
|
right: "5%",
|
|||
|
|
bottom: "0%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: "category",
|
|||
|
|
data: [
|
|||
|
|
"1点",
|
|||
|
|
"2点",
|
|||
|
|
"3点",
|
|||
|
|
"4点",
|
|||
|
|
"5点",
|
|||
|
|
"6点",
|
|||
|
|
"7点",
|
|||
|
|
"8点",
|
|||
|
|
"9点",
|
|||
|
|
"10点",
|
|||
|
|
"11点",
|
|||
|
|
"12点",
|
|||
|
|
"13点",
|
|||
|
|
"14点",
|
|||
|
|
"15点",
|
|||
|
|
"16点",
|
|||
|
|
"17点",
|
|||
|
|
"18点",
|
|||
|
|
"19点",
|
|||
|
|
"20点",
|
|||
|
|
"21点",
|
|||
|
|
"22点",
|
|||
|
|
"23点",
|
|||
|
|
"24点",
|
|||
|
|
],
|
|||
|
|
boundaryGap: false,
|
|||
|
|
axisTick: {
|
|||
|
|
show: false, // 不显示坐标轴刻度线
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
// axisLabel: {
|
|||
|
|
// interval: 0,
|
|||
|
|
// color: "#86909C",
|
|||
|
|
// fontSize: 14,
|
|||
|
|
// },
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
splitLine: {
|
|||
|
|
// 网格线
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
//分割线
|
|||
|
|
color: "#99999955",
|
|||
|
|
width: 1,
|
|||
|
|
type: "dashed", //dotted：虚线 solid:实线
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "",
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: "none", // 不显示连接点
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2,
|
|||
|
|
shadowColor: "#165DFF",
|
|||
|
|
shadowBlur: 20,
|
|||
|
|
},
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0.8,
|
|||
|
|
color: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
x2: 0,
|
|||
|
|
y2: 1,
|
|||
|
|
colorStops: [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: "#B36224",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: "#111D37",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
5, 7, 1, 3, 6, 7, 8, 9, 10, 2, 9, 7, 15, 17, 19, 2, 4, -5, -4, -2, 3, 5,
|
|||
|
|
7, 6,
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
const airTenementRef = ref();
|
|||
|
|
//空气情况仪表盘
|
|||
|
|
let airOption = {
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
type: "gauge",
|
|||
|
|
startAngle: 180,
|
|||
|
|
endAngle: 0,
|
|||
|
|
center: ["50%", "75%"],
|
|||
|
|
radius: "90%",
|
|||
|
|
min: 0,
|
|||
|
|
max: 1,
|
|||
|
|
splitNumber: 8,
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 6,
|
|||
|
|
color: [
|
|||
|
|
[0.25, "#FF6E76"],
|
|||
|
|
[0.5, "#FDDD60"],
|
|||
|
|
[0.75, "#58D9F9"],
|
|||
|
|
[1, "#7CFFB2"],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
pointer: {
|
|||
|
|
icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
|
|||
|
|
length: "12%",
|
|||
|
|
width: 20,
|
|||
|
|
offsetCenter: [0, "-60%"],
|
|||
|
|
itemStyle: {
|
|||
|
|
color: "auto",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
length: 12,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "auto",
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
length: 20,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "auto",
|
|||
|
|
width: 5,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff",
|
|||
|
|
fontSize: 20,
|
|||
|
|
distance: -60,
|
|||
|
|
rotate: "tangential",
|
|||
|
|
formatter: function (value: number) {
|
|||
|
|
if (value === 0.875) {
|
|||
|
|
return "差";
|
|||
|
|
} else if (value === 0.625) {
|
|||
|
|
return "合格";
|
|||
|
|
} else if (value === 0.375) {
|
|||
|
|
return "良";
|
|||
|
|
} else if (value === 0.125) {
|
|||
|
|
return "优";
|
|||
|
|
}
|
|||
|
|
return "";
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
offsetCenter: [0, "10%"],
|
|||
|
|
fontSize: 20,
|
|||
|
|
color: "yellow",
|
|||
|
|
},
|
|||
|
|
detail: {
|
|||
|
|
fontSize: 30,
|
|||
|
|
offsetCenter: [0, "-20%"],
|
|||
|
|
valueAnimation: true,
|
|||
|
|
formatter: function (value: number) {
|
|||
|
|
return Math.round(value * 100) + "";
|
|||
|
|
},
|
|||
|
|
color: "inherit",
|
|||
|
|
},
|
|||
|
|
data: [
|
|||
|
|
{
|
|||
|
|
value: 0.7,
|
|||
|
|
name: "良",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
//生活指数
|
|||
|
|
const livingIndex = ref([
|
|||
|
|
{ name: "带伞", tate: "无需", con: "无需带伞" },
|
|||
|
|
{
|
|||
|
|
name: "洗车",
|
|||
|
|
tate: "适宜",
|
|||
|
|
con: "适宜洗车，未来持续两天无雨天气较好，适合擦洗汽车，蓝天白云、风和日丽将伴您的车子连日洁净",
|
|||
|
|
},
|
|||
|
|
{ name: "紫外线", tate: "最弱", con: "可以不采取措施" },
|
|||
|
|
{
|
|||
|
|
name: "旅行",
|
|||
|
|
tate: "适宜",
|
|||
|
|
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "旅行",
|
|||
|
|
tate: "适宜",
|
|||
|
|
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "旅行",
|
|||
|
|
tate: "适宜",
|
|||
|
|
con: "有阵雨，温度适宜，在细雨中游玩别有一番情调，可不要错过机会呦! 但记得出门要携带雨具",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const weatherWarning = ref([
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: "大风黄色预警",
|
|||
|
|
time: "2023-12-1416:00:17",
|
|||
|
|
con: "道孚县气象局2023年12月14日16时00分发布大风黄色预警",
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
const getData = () => {
|
|||
|
|
//天气情况
|
|||
|
|
const tenementChart = echarts.init(tenementRef.value);
|
|||
|
|
tenementChart.setOption(option);
|
|||
|
|
//空气情况仪表盘
|
|||
|
|
const airTenementChart = echarts.init(airTenementRef.value);
|
|||
|
|
airTenementChart.setOption(airOption);
|
|||
|
|
};
|
|||
|
|
onMounted(() => {
|
|||
|
|
getData();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.side-bg {
|
|||
|
|
height: 195%;
|
|||
|
|
}
|
|||
|
|
.weather_body {
|
|||
|
|
padding-top: 5px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
> div {
|
|||
|
|
width: 190px;
|
|||
|
|
color: white;
|
|||
|
|
font-size: 20px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
> span:nth-child(1) {
|
|||
|
|
font-family: YouSheBiaoTiHei;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
padding-left: 10px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
height: 200px;
|
|||
|
|
background-color: #153062;
|
|||
|
|
> div {
|
|||
|
|
color: #86b6f0;
|
|||
|
|
|
|||
|
|
margin-top: 10px;
|
|||
|
|
> span {
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
> span:nth-child(2) {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 80px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
> span:nth-child(3) {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 100px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
> span:nth-child(4) {
|
|||
|
|
color: #e19f35;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2)::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.chart-wrapper {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
flex: 1;
|
|||
|
|
height: 180px;
|
|||
|
|
.container {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 440px;
|
|||
|
|
margin-top: -55px;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.airEcharts {
|
|||
|
|
margin-top: 70px;
|
|||
|
|
}
|
|||
|
|
.airIndex {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
> div {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 30px;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
background-color: #61738b;
|
|||
|
|
}
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
color: rgb(8, 237, 138);
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
color: yellow;
|
|||
|
|
}
|
|||
|
|
> div:nth-child(3) {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
> div:nth-child(4) {
|
|||
|
|
color: chartreuse;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//进度条
|
|||
|
|
.percentage-value {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-size: 28px;
|
|||
|
|
}
|
|||
|
|
.percentage-label {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
.demo-progress .el-progress--line {
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
width: 350px;
|
|||
|
|
}
|
|||
|
|
.demo-progress .el-progress--circle {
|
|||
|
|
margin-right: 15px;
|
|||
|
|
}
|
|||
|
|
.title {
|
|||
|
|
font-size: 30px;
|
|||
|
|
color: white;
|
|||
|
|
font-family: YouSheBiaoTiHei;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.livingIndex_div {
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
height: 300px;
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
background-color: rgb(127, 116, 116);
|
|||
|
|
border-radius: 5px;
|
|||
|
|
> div {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 80px;
|
|||
|
|
background-color: #153062;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
color: white;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
font-size: 18px;
|
|||
|
|
line-height: 50px;
|
|||
|
|
> span:nth-child(1) {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
> span:nth-child(2) {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
font-size: 14px;
|
|||
|
|
overflow: hidden; /* 超出一行文字自动隐藏 */
|
|||
|
|
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
|
|||
|
|
white-space: nowrap; /*强制不换行*/
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.livingIndex_div::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.weatherWarning_div::-webkit-scrollbar {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
.weatherWarning_div {
|
|||
|
|
overflow-y: scroll;
|
|||
|
|
height: 300px;
|
|||
|
|
background-color: rgb(127, 116, 116);
|
|||
|
|
padding: 5px 5px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
> div {
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background-color: #153062;
|
|||
|
|
color: white;
|
|||
|
|
padding: 5px;
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
display: flex;
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
> img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
margin-left: 10px;
|
|||
|
|
> div:nth-child(1) {
|
|||
|
|
font-size: 20px;
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
> div:nth-child(2) {
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|