From d50f9a2d262342ab6c39e8d3e5717ff381064572 Mon Sep 17 00:00:00 2001
From: tengsx <tengsx1009@163.com>
Date: Wed, 05 Apr 2023 22:39:35 +0800
Subject: [PATCH] page one
---
src/views/home/index.vue | 659 +++++++++++++++++++++++++++++++----------
public/images/ctrl-left.png | 0
public/images/go-up.png | 0
public/images/go-down.png | 0
src/styles/index.scss | 261 ++++++++++++++++
src/App.vue | 1
src/styles/font/Roboto-Bold.ttf | 0
7 files changed, 758 insertions(+), 163 deletions(-)
diff --git "a/public/images/\346\262\237\351\200\232\351\241\265_\345\267\246\347\256\255\345\244\264_\350\277\224\345\233\236.png" b/public/images/ctrl-left.png
similarity index 100%
rename from "public/images/\346\262\237\351\200\232\351\241\265_\345\267\246\347\256\255\345\244\264_\350\277\224\345\233\236.png"
rename to public/images/ctrl-left.png
Binary files differ
diff --git "a/public/images/Right-down\345\217\263\344\270\213 \0507\051 \346\213\267\350\264\235 2.png" b/public/images/go-down.png
similarity index 100%
rename from "public/images/Right-down\345\217\263\344\270\213 \0507\051 \346\213\267\350\264\235 2.png"
rename to public/images/go-down.png
Binary files differ
diff --git "a/public/images/Right-down\345\217\263\344\270\213 \0507\051 \346\213\267\350\264\235.png" b/public/images/go-up.png
similarity index 100%
rename from "public/images/Right-down\345\217\263\344\270\213 \0507\051 \346\213\267\350\264\235.png"
rename to public/images/go-up.png
Binary files differ
diff --git a/src/App.vue b/src/App.vue
index 3e4ff42..5ba94fa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,6 @@
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- text-align: center;
color: #2c3e50;
overflow: hidden;
}
diff --git a/src/styles/font/Roboto-Bold.ttf b/src/styles/font/Roboto-Bold.ttf
new file mode 100644
index 0000000..91ec212
--- /dev/null
+++ b/src/styles/font/Roboto-Bold.ttf
Binary files differ
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b7dc89..bab44d4 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,4 +2,263 @@
@import "./dc/index.scss";
@import "./icon/index.scss";
@import "./tool/index.scss";
-@import "./element-ui/element-ui.scss";
\ No newline at end of file
+@import "./element-ui/element-ui.scss";
+
+@font-face {
+ font-family: Roboto-Bold;
+ src: url(./font/Roboto-Bold.ttf);
+}
+.pageContainer {
+ color: #fff;
+ width: 100%;
+ .mt-15 {
+ margin-top: 15px;
+ }
+ .flex {
+ display: flex;
+ align-items: center;
+ }
+ .justify-between {
+ justify-content: space-between;
+ }
+ .justify-center {
+ justify-content: center;
+ }
+ .common-text {
+ font-size: 16px;
+ font-family: Alibaba PuHuiTi;
+ font-style: italic;
+ color: #F6F9FE;
+ }
+ .left-container,
+ .right-container {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 0;
+ width: 408px;
+ height: 100%;
+ pointer-events: auto;
+ background: rgba(28, 115, 195, 0.05);
+
+ &>div {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+
+ .title-box {
+ position: relative;
+ height: 38px;
+ line-height: 38px;
+ background: url(/images/title-box.png) no-repeat center / 100% 100%;
+
+ .title {
+ margin-left: 30px;
+ text-align: left;
+ font-size: 18px;
+ font-family: Alibaba PuHuiTi;
+ font-weight: bold;
+ font-style: italic;
+ color: transparent;
+ text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
+ background-image: linear-gradient(180deg, rgba(14, 197, 236, 0.36) 5%, rgba(49, 190, 255, 0.36) 20%, rgba(255, 255, 255, 1) 40%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparen
+ }
+ .title-sub {
+ position: absolute;
+ right: 10px;
+ bottom: 4px;
+ line-height: 1;
+ }
+ }
+
+ .content-box {
+ flex: 1;
+ }
+ }
+ .chart-box {
+ // background: rgba(42,64,120,0.68);
+ }
+ }
+ .common-empty {
+ padding-top: 46px;
+ display: flex;
+ justify-content: center;
+ }
+ .left-container {
+ left: 0;
+
+ .one {
+ height: 258px;
+ position: relative;
+ .content-data {
+ padding-left: 18px;
+ &>.common-text {
+ margin-right: 8px
+ }
+ };
+ .data-item {
+ height: 26px;
+ line-height: 26px;
+ background: #879EC7;
+ border-radius: 6px;
+ padding: 0 15px;
+ margin-right: 12px;
+ }
+ .more-text {
+ position: absolute;
+ color: #3BCAFF;
+ right: 10px;
+ bottom: 36px;
+ cursor: pointer;
+ }
+ }
+
+ .two {
+ height: 454px;
+ }
+
+ .three {
+ flex: 1;
+ }
+ }
+
+ .right-container {
+ right: 0;
+
+ .one {
+ height: 266px;
+ }
+
+ .two {
+ height: 260px;
+ }
+
+ .three {
+ height: 210px;
+ }
+
+ .four {
+ flex: 1;
+ }
+ }
+ .scroll-table {
+ font-family: Alibaba PuHuiTi;
+ font-weight: 400;
+ font-style: italic;
+ color: #AFBED8;
+ .scroll-table-head {
+ height: 38px;
+ font-size: 16px;
+ border-bottom: 2px solid #6187E4;
+ background: rgba(42,64,120,0.68);
+ &>div {
+ flex: 1;
+ text-align: center;
+ }
+ }
+ .scroll-table-body {
+ overflow: hidden;
+ height: 155px;
+ margin-top: 10px;
+ }
+ .scroll-item {
+ margin-top: 5px;
+ height: 38px;
+ border: 1px solid rgba(36, 57, 110, 1);
+ background: rgba(36,57,110,0.34);
+ &>div {
+ text-align: center;
+ flex: 1;
+ color: #D4E8F8;
+ font-size: 14px;
+ }
+ }
+ .type-img {
+ margin-left: 5px;
+ }
+ }
+ .carousel-box {
+ position: relative;
+ .el-carousel__container {
+ height: 142px;
+ }
+ .card-item {
+ height: 142px;
+ width: 122px;
+ border: 1px solid rgba(110, 135, 197, .32);
+ background: rgba(36,57,110,0.34);
+ line-height: 1;
+ padding: 10px 0 0 0;
+ text-align: left;
+ text-indent: 10px;
+ .type-img {
+ margin-left: 5px;
+ position: relative;
+ top: 3px;
+ }
+ &>div:nth-of-type(2) {
+ margin-top: 10px;
+ & .num {
+ font-size: 20px;
+ font-family: Roboto-Bold;
+ font-weight: bold;
+ }
+ }
+ &>div:nth-of-type(3) {
+ margin-top: 8px;
+ color: #F7101A;
+ }
+ &>div:nth-of-type(4) {
+ margin-top: 12px;
+ }
+ &>div:nth-of-type(5) {
+ margin-top: 5px;
+ }
+ }
+ .justify-between {
+ padding: 0 10px;
+ }
+ .btn-item {
+ width: 40px;
+ height: 40px;
+ cursor: pointer;
+ }
+ .btn-left {
+ background-image: url(./../../public/images/ctrl-left.png);
+ }
+ .btn-right {
+ margin-left: 3px ;
+ transform: rotate(180deg);
+ }
+ }
+ .big-num {
+ margin: 10px 0;
+ line-height: 1;
+ .num-num {
+ margin-left: 10px;
+ font-size: 48px;
+ font-family: Roboto-Bold;
+ font-weight: bold;
+ }
+ .num-text{
+ margin-left: 10px;
+ }
+ }
+ .big-section {
+ flex: 1;
+ .big-num {
+ padding-left: 30px;
+ }
+ .section-text {
+ height: 22px;
+ line-height: 22px;
+ text-align: right;
+ }
+ .time {
+ margin-top: 5px;
+ color: #B5C5D4;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2ca737c..badd386 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -10,180 +10,517 @@
-->
<template>
- <div class="container">
- <div class="left-container">
- <div class="one">
- <div class="title-box">
- <div class="title">标题名称</div>
- </div>
- <div class="content-box">
- <pie-echarts></pie-echarts>
- </div>
- </div>
-
- <div class="two">
- <div class="title-box">
- <div class="title">每日8时超汛限</div>
- </div>
- <div class="content-box">
- <bar-echarts></bar-echarts>
- </div>
- </div>
-
- <div class="three">
- <div class="title-box">
- <div class="title">连续10天超汛限</div>
- </div>
- <div class="content-box"></div>
- </div>
+ <div class="pageContainer">
+ <div class="left-container">
+ <div class="one">
+ <div class="title-box">
+ <div class="title">标题名称</div>
+ <div class="title-sub common-text">4-1 14:31</div>
</div>
-
- <div class="right-container">
- <div class="one">
- <div class="title-box">
- <div class="title">水库数量分布</div>
- </div>
- <div class="content-box"></div>
+ <div class="content-box">
+ <div class="content-data flex justify-between mt-15">
+ <div class="flex">
+ <div class="data-item common-text">水库 0</div>
+ <div class="data-item common-text">降雨 0</div>
</div>
-
- <div class="two">
- <div class="title-box">
- <div class="title">水库规模分布</div>
- </div>
- <div class="content-box"></div>
- </div>
-
- <div class="three">
- <div class="title-box">
- <div class="title">泄调洪水库数量</div>
- </div>
- <div class="content-box"></div>
- </div>
-
- <div class="four">
- <div class="title-box">
- <div class="title">降雨等级分布</div>
- </div>
- <div class="content-box"></div>
- </div>
+ <div class="common-text">湖北省</div>
+ </div>
+ <div class="common-empty">
+ <img src="images/缺省页_空白页-通用.png" alt="" />
+ </div>
+ <div class="common-text more-text">更多 ></div>
</div>
+ </div>
+
+ <div class="two">
+ <div class="title-box">
+ <div class="title">每日8时超汛限</div>
+ </div>
+ <div class="content-box chart-box">
+ <div id="stackBarChart" style="width: 100%; height: 213px"></div>
+ <div class="scroll-table">
+ <div class="scroll-table-head flex">
+ <div>名称</div>
+ <div>行政区</div>
+ <div>工程规模</div>
+ <div>水位</div>
+ <div>超汛限M</div>
+ </div>
+ <vue-seamless-scroll :class-option="classOption" :data="listData" class="scroll-table-body">
+ <ul class="item">
+ <li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
+ <div class="">{{ item.name }}</div>
+ <div class="">{{ item.area }}</div>
+ <div class="">{{ item.scale }}</div>
+ <div class="flex justify-center">
+ <span>{{ item.waterLevel }}</span>
+ <img class="type-img" v-if="item.waterLeveltype == '0'" src="images/go-down.png" alt="">
+ <img class="type-img" v-else src="images/go-up.png" alt="">
+ </div>
+ <div class="">{{ item.limit }}</div>
+ </li>
+ </ul>
+ </vue-seamless-scroll>
+ </div>
+ </div>
+ </div>
+
+ <div class="three">
+ <div class="title-box">
+ <div class="title">连续10天超汛限</div>
+ </div>
+ <div class="content-box carousel-box">
+ <div class="carousel-ctrl flex justify-between">
+ <div class="big-num common-text">
+ <span class="num-num">0</span>
+ <span class="num-text">座</span>
+ </div>
+ <div class="ctrl-btn flex">
+ <div class="btn-item btn-left" @click="$refs.carouselCard.prev()"></div>
+ <div class="btn-item btn-left btn-right" @click="$refs.carouselCard.next()"></div>
+ </div>
+ </div>
+ <el-carousel ref="carouselCard" :autoplay="false" :indicator-position="'none'" arrow="never">
+ <el-carousel-item v-for="idx in Math.ceil(listData.length / 3)" :key="idx">
+ <div class="flex justify-between">
+ <div class="card-item" v-for="item in listData.slice((idx - 1) * 3, idx * 3)" :key="item">
+ <div class="common-text">{{ item.name }}</div>
+ <div class="flex common-text">
+ <span><span class="num">{{ item.waterLevel }}</span>m</span>
+ <img class="type-img" v-if="item.waterLeveltype == '0'" src="images/go-down.png" alt="">
+ <img class="type-img" v-else src="images/go-up.png" alt="">
+ </div>
+ <div class="common-text">超汛限{{ item.limit }}</div>
+ <div class="common-text">{{ item.area }}</div>
+ <div class="common-text">{{ item.scale }}</div>
+ </div>
+ </div>
+ </el-carousel-item>
+ </el-carousel>
+ </div>
+ </div>
</div>
+
+ <div class="right-container">
+ <div class="one">
+ <div class="title-box">
+ <div class="title">水库数量分布</div>
+ </div>
+ <div class="content-box">
+ <div id="barChart_01" style="width: 100%; height: 220px"></div>
+ </div>
+ </div>
+
+ <div class="two">
+ <div class="title-box">
+ <div class="title">水库规模分布</div>
+ </div>
+ <div class="content-box">
+ <div id="barChart_02" style="width: 100%; height: 210px"></div>
+ </div>
+ </div>
+
+ <div class="three">
+ <div class="title-box">
+ <div class="title">泄调洪水库数量</div>
+ </div>
+ <div class="content-box flex">
+ <div class="big-section">
+ <div class="big-num common-text">
+ <span class="num-num">0</span>
+ <span class="num-text">座</span>
+ </div>
+ <div class="common-text section-text"></div>
+ <div class="common-text section-text">湖北省</div>
+ <div class="common-text section-text time">2023-4-1</div>
+ </div>
+ <div class="big-section">
+ <div class="big-num common-text">
+ <span class="num-num">0</span>
+ <span class="num-text">m<sup>3</sup>/s</span>
+ </div>
+ <div class="common-text section-text">湖北省</div>
+ <div class="common-text section-text">日泄流总量0亿m3</div>
+ <div class="common-text section-text time">2023-4-1</div>
+ </div>
+ </div>
+ </div>
+
+ <div class="four">
+ <div class="title-box">
+ <div class="title">降雨等级分布</div>
+ </div>
+ <div class="content-box">
+ <div id="pie-chart" style="width: 100%; height: 210px"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import pieEcharts from './components/pieEcharts.vue'
-import barEcharts from './components/barEcharts.vue'
+import vueSeamlessScroll from "vue-seamless-scroll";
export default {
- components: { pieEcharts ,barEcharts},
+ components: { vueSeamlessScroll },
- data () {
- return {
+ data() {
+ return {
+ listData: [
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77',
+ waterLeveltype: '0',
+ limit: '0.27'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77',
+ waterLeveltype: '1',
+ limit: '0.27'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77',
+ waterLeveltype: '0',
+ limit: '0.27'
+ },
+ {
+ name: "汪店水库",
+ area: '杨河镇',
+ scale: "小（1）型",
+ waterLevel: '62.77',
+ waterLeveltype: '1',
+ limit: '0.27'
+ },
+ ],
+ classOption: {
+ step: .2,
+ limitMoveNum: 4
+ }
+ };
+ },
+ created() {},
+
+ mounted() {
+ let stackBarData = {
+ id: 'stackBarChart',
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ xAxisRotate: 30,
+ title: '总数 39座',
+ showLegend: true,
+ yAxisName: '数量',
+ series: [
+ {
+ name: "大型",
+ type: "bar",
+ stack: "one",
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ },
+ {
+ name: "中型",
+ type: "bar",
+ stack: "one",
+ data: ["2", "6", "5", "10", "10", "8", "5", "1"],
+ },
+ {
+ name: "小型",
+ type: "bar",
+ stack: "one",
+ data: ["3", "5", "1", "10", "3", "9", "15", "1"],
+ },
+ ],
+ }
+ this.createStackBarChart(stackBarData);
+ let barData_01 = {
+ id: 'barChart_01',
+ xAxisData: ["武汉市", "黄石市", "十堰市", "宜昌市", "襄阳市", "鄂州市", "荆门市", "孝感市"],
+ xAxisRotate: 30,
+ title: '',
+ showLegend: false,
+ yAxisName: '座',
+ series: [
+ {
+ name: "水库数量",
+ type: "bar",
+ color: '#63B7F9',
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
}
+ ]
+ }
+ this.createStackBarChart(barData_01);
+ let barData_02 = {
+ id: 'barChart_02',
+ xAxisData: ["大（1）型", "大（2）型", "中型", "小（1）型", "小（2）型"],
+ xAxisRotate: 0,
+ title: '',
+ showLegend: false,
+ yAxisName: '座',
+ series: [
+ {
+ name: "水库规模",
+ type: "bar",
+ color: '#81E79C',
+ barWidth: 12,
+ data: ["20", "30", "15", "1", "10", "8", "5", "18"],
+ showBackground: true,
+ backgroundStyle: {
+ color: "rgba(187,230,245,.3)",
+ }
+ }
+ ]
+ }
+ this.createStackBarChart(barData_02);
+ this.createPieChart()
+ },
+
+ methods: {
+ createStackBarChart(chartData) {
+ const myChart = this.$echarts.init(
+ document.getElementById(chartData.id)
+ );
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ show: chartData.title != '',
+ text: chartData.title,
+ top: 10,
+ right: 20,
+ textStyle: {
+ color: "#BDD8F9",
+ fontSize: 16,
+ fontWeight: 400,
+ },
+ },
+ legend: {
+ show: chartData.showLegend,
+ top: 10,
+ itemWidth: 8,
+ itemHeight: 8,
+ itemGap: 20,
+ left: "center",
+ textStyle: {
+ color: "#B5C5D4",
+ fontSize: 14,
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow"
+ },
+ formatter: function (e) {
+ if (e.length > 0) {
+ var t = "".concat(e[0].name + " <br/>");
+ e.forEach((item) => {
+ t += item.marker + item.seriesName + ": " + item.value + " 座 <br/>"
+ })
+ return t
+ }
+ }
+ },
+ xAxis: {
+ data: chartData.xAxisData,
+ name: "",
+ axisLine: {
+ onZero: true,
+ lineStyle: {
+ color: "rgba(186, 198, 208, .4)",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ rotate: chartData.xAxisRotate,
+ interval: 0,
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ },
+ yAxis: {
+ name: chartData.yAxisName,
+ axisLabel: {
+ fontSize: 13,
+ color: "#B5C5D4",
+ },
+ nameTextStyle: {
+ fontSize: 14,
+ color: "#B5C5D4",
+ },
+ splitLine: {
+ lineStyle: {
+ color: ["#344B64"],
+ type: "dashed",
+ width: 2,
+ },
+ },
+ },
+ grid: {
+ left: 20,
+ right: 15,
+ top: 50,
+ bottom: 7,
+ containLabel: true,
+ },
+ series: chartData.series,
+ };
+
+ myChart.setOption(option);
},
-
- created () {
-
+ // 建言献策分析图表
+ createPieChart() {
+ let data = [
+ {
+ name: '特大暴雨',
+ value: 59
+ },
+ {
+ name: '大暴雨',
+ value: 20
+ },
+ {
+ name: '暴雨',
+ value: 281
+ }
+ ,
+ {
+ name: '大雨',
+ value: 59
+ }
+ ,
+ {
+ name: '中雨',
+ value: 29
+ }
+ ,
+ {
+ name: '小雨',
+ value: 281
+ }
+ ,
+ {
+ name: '无雨',
+ value: 281
+ }
+ ]
+ let total = data.reduce((prev, curr) => prev + curr.value, 0)
+ let dom = document.getElementById("pie-chart");
+ let pieChart = this.$echarts.init(dom);
+ let option = {
+ legend: {
+ orient: 'vertical',
+ left: '50%',
+ top: 15,
+ width: '100%',
+ itemGap: 10,
+ itemWidth: 8,
+ itemHeight: 8,
+ formatter: function (name) {
+ let value = 0
+ data.forEach((item) => {
+ if(item.name == name) {
+ value = item.value
+ }
+ })
+ return `${name} ${value}个 ${((value*100)/total).toFixed(2)}%`;
+ },
+ textStyle: {
+ color: '#fff',
+ fontSize: 16,
+ fontFamily: 'Roboto-Bold',
+ }
+ },
+ radar: [
+ {
+ indicator: [
+ { text: 'Indicator1' },
+ { text: 'Indicator2' },
+ { text: 'Indicator3' },
+ { text: 'Indicator4' },
+ { text: 'Indicator5' }
+ ],
+ center: ['25%', '50%'],
+ radius: '80%',
+ startAngle: 90,
+ splitNumber: 1,
+ shape: 'circle',
+ axisName: {
+ show: false,
+ },
+ splitArea: {
+ areaStyle: {
+ color: ['rgba(0, 0, 0, 0.2)'],
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(211, 253, 250, 0)'
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(51, 114, 210, .5)'
+ }
+ }
+ },
+ ],
+ color: [
+ '#DB983F',
+ '#5D4EC5',
+ '#379CF2',
+ '#81E79C',
+ '#AA8A6E',
+ '#71E4D5',
+ '#CDE5FF',
+ ],
+ series: [
+ {
+ name: '降雨等级',
+ type: 'pie',
+ radius: ['50%', '65%'],
+ center: ['25%', '50%'],
+ label: {
+ show: true,
+ position: 'center',
+ color: '#D4E8F8',
+ fontSize: 34,
+ fontFamily: 'Roboto-Bold',
+ formatter: () => {
+ return total;
+ },
+ },
+ labelLine: {
+ show: false
+ },
+ itemStyle: {
+ borderRadius: 0
+ },
+ data
+ }
+ ]
+ };
+ pieChart.setOption(option);
},
+ },
- mounted () {
-
- },
-
- methods: {
-
- },
-
- destroyed () {
-
- },
-
-}
+ destroyed() {},
+};
</script>
-
-<style scoped lang="scss">
-.container {
- color: #fff;
- width: 100%;
-
- .left-container,
- .right-container {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 0;
- width: 408px;
- height: 100%;
- pointer-events: auto;
- background: rgba(28, 115, 195, 0.05);
-
- &>div {
- display: flex;
- flex-direction: column;
-
- .title-box {
- height: 38px;
- line-height: 38px;
- background: url(/images/title-box.png) no-repeat center / 100% 100%;
-
- .title {
- margin-left: 30px;
- text-align: left;
-
- font-size: 18px;
- font-family: Alibaba PuHuiTi;
- font-weight: bold;
- font-style: italic;
- color: #F6F9FE;
- text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
-
- background: linear-gradient(0deg, rgba(14, 197, 236, 0.36) 0%, rgba(49, 190, 255, 0.36) 0%, rgba(239, 252, 254, 0.36) 58.7646484375%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparen
- }
- }
-
- .content-box {
- flex: 1;
- }
- }
- }
-
- .left-container {
- left: 0;
-
- .one {
- height: 258px;
- }
-
- .two {
- height: 454px;
- }
-
- .three {
- flex: 1;
- }
- }
-
- .right-container {
- right: 0;
-
- .one {
- height: 266px;
- }
-
- .two {
- height: 260px;
- }
-
- .three {
- height: 210px;
- }
-
- .four {
- flex: 1;
- }
- }
-}
-</style>
--
Gitblit v1.9.3