935 lines
20 KiB
Vue
935 lines
20 KiB
Vue
<template>
|
||
<div class="leftcent" ref="leftcent">
|
||
<div class="tile" ref="tile">
|
||
<div class="tilein" ref="tilein"></div>
|
||
</div>
|
||
<div class="tiilecent">在建项目指标</div>
|
||
<div></div>
|
||
<div class="title">
|
||
<div class="titlecent">
|
||
<span>在建项目数：</span>
|
||
<div class="col">{{ projectInfo.num }}</div>
|
||
个
|
||
</div>
|
||
<div class="titlecent">
|
||
<span>总投资：</span>
|
||
<div class="col">{{ projectInfo.cost?.toFixed(2) }}</div>
|
||
亿
|
||
</div>
|
||
</div>
|
||
<div class="topsix">
|
||
<!-- <div class="topsixin">
|
||
<div class="bg1"></div>
|
||
<div class="titles">
|
||
<div>-</div>
|
||
<div>省市级项目</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="topsixin" @click="toProjectList('')">
|
||
<div class="bg2"></div>
|
||
<div class="titles">
|
||
<div>{{ projectInfo.importance }}</div>
|
||
<div>区重点项目</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="topsixin">
|
||
<div class="bg3"></div>
|
||
<div class="titles">
|
||
<div>-</div>
|
||
<div>里程（km）</div>
|
||
</div>
|
||
</div> -->
|
||
<div class="topsixin" @click="toProjectList(2)">
|
||
<div class="bg4"></div>
|
||
<div class="titles">
|
||
<div>{{ projectInfo.bridge }}</div>
|
||
<div>桥梁工程</div>
|
||
</div>
|
||
</div>
|
||
<div class="topsixin" @click="toProjectList(3)">
|
||
<div class="bg5"></div>
|
||
<div class="titles">
|
||
<div>{{ projectInfo.tunnel }}</div>
|
||
<div>隧道工程</div>
|
||
</div>
|
||
</div>
|
||
<div class="topsixin" @click="toProjectList(4)">
|
||
<div class="bg6"></div>
|
||
<div class="titles">
|
||
<div>{{ projectInfo.station }}</div>
|
||
<div>公路工程</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mainleto" ref="mainleto" style="height: 260px"></div>
|
||
<div class="mainlett" ref="mainlett" style="height: 260px"></div>
|
||
<div class="echatop">
|
||
<div class="tub"></div>
|
||
<div>
|
||
新建项目：<span>{{ projectInfo.newBuild }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
改建项目：<span>{{ projectInfo.reBuild }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
扩建项目：<span>{{ projectInfo.extension }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
合计项目：<span>{{ Number(projectInfo.newBuild + projectInfo.reBuild + projectInfo.extension) }}</span
|
||
>个
|
||
</div>
|
||
</div>
|
||
<div class="echabut">
|
||
<div class="tub"></div>
|
||
<div>
|
||
完工项目：<span>{{ projectInfo.finished }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
在建项目：<span>{{ projectInfo.building }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
停工项目：<span>{{ projectInfo.shutdown }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
未开工项目：<span>{{ projectInfo.unStart }}</span
|
||
>个
|
||
</div>
|
||
<div>
|
||
合计项目：<span>{{
|
||
Number(projectInfo.finished + projectInfo.building + projectInfo.shutdown + projectInfo.unStart)
|
||
}}</span
|
||
>个
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import * as echarts from "echarts";
|
||
import { getProjectInfo } from "@/api/modules/largeScreenTwo";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
const router = useRouter();
|
||
//项目信息 --- start
|
||
const projectInfo = ref({
|
||
importance: 0,
|
||
bridge: 0,
|
||
tunnel: 0,
|
||
station: 0,
|
||
newBuild: 0,
|
||
reBuild: 0,
|
||
extension: 0,
|
||
total: 0,
|
||
finished: 0,
|
||
shutdown: 0,
|
||
total1: 0
|
||
});
|
||
//项目信息 --- end
|
||
// 获取项目信息
|
||
const getProject = async () => {
|
||
const res = await getProjectInfo();
|
||
projectInfo.value = res.result;
|
||
};
|
||
const mainleto = ref();
|
||
const mainlett = ref();
|
||
|
||
const leftcent = ref();
|
||
const tile = ref();
|
||
const tilein = ref();
|
||
|
||
onMounted(async () => {
|
||
await getProject();
|
||
myChamainleto();
|
||
myChamainlett();
|
||
});
|
||
// 根据类型跳转项目管理列表
|
||
const toProjectList = type => {
|
||
if (type) {
|
||
router.push("/goverment/huizhou/projectList/index?projectType=" + type);
|
||
} else {
|
||
router.push("/goverment/huizhou/projectList/index");
|
||
}
|
||
};
|
||
const myChamainleto = () => {
|
||
let myChart = echarts.init(mainleto.value);
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - 14, shape.y - 9];
|
||
const c2 = [xAxisPoint[0] - 14, xAxisPoint[1] - 8];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
||
}
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + 14, xAxisPoint[1] - 8];
|
||
const c4 = [shape.x + 14, shape.y - 8];
|
||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
}
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + 14, shape.y - 9];
|
||
const c3 = [shape.x, shape.y - 18];
|
||
const c4 = [shape.x - 14, shape.y - 9];
|
||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
}
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
|
||
const NUM = projectInfo.value.total || 100;
|
||
const SUMALL = Number(projectInfo.value.newBuild + projectInfo.value.reBuild + projectInfo.value.extension);
|
||
const MAX = [NUM, NUM, NUM, NUM];
|
||
const VALUE = [projectInfo.value.newBuild, projectInfo.value.reBuild, projectInfo.value.extension, SUMALL];
|
||
let category = ["新建", "改建", "扩建", "合计"];
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow"
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
const item = params[1];
|
||
return item.name + " : " + item.value;
|
||
}
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: 30,
|
||
top: 30
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
position: "bottom",
|
||
data: category,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#e0e7ff"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
length: 6
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
rotate: 0
|
||
}
|
||
}
|
||
],
|
||
yAxis: {
|
||
type: "value",
|
||
name: "",
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
boundaryGap: ["0%", "0%"]
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
renderItem: function (params, api) {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(14, 54, 126,0.4)"
|
||
}
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(17, 61, 135,0.5)"
|
||
}
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(20, 68, 134,0.6)"
|
||
}
|
||
}
|
||
]
|
||
};
|
||
},
|
||
data: MAX
|
||
},
|
||
{
|
||
type: "custom",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
var color =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#3385bc"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#3c6bb9"
|
||
}
|
||
]);
|
||
var color1 =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#44befc"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#4d98ff"
|
||
}
|
||
]);
|
||
var color2 =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#38c6fe"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#42bcf9"
|
||
}
|
||
]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color
|
||
}
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(1),
|
||
yValue: api.value(0),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color1
|
||
}
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color2
|
||
}
|
||
}
|
||
]
|
||
};
|
||
},
|
||
data: VALUE
|
||
},
|
||
{
|
||
type: "bar",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "#",
|
||
offset: [2, -15]
|
||
},
|
||
itemStyle: {
|
||
color: "transparent"
|
||
},
|
||
tooltip: {},
|
||
data: MAX
|
||
}
|
||
]
|
||
});
|
||
myChart.on("click", val => {
|
||
console.log(val, 666777);
|
||
if (val.name == "新建") {
|
||
router.push("/goverment/huizhou/projectList/index?projectNature=1");
|
||
} else if (val.name == "改建") {
|
||
router.push("/goverment/huizhou/projectList/index?projectNature=2");
|
||
} else if (val.name == "扩建") {
|
||
router.push("/goverment/huizhou/projectList/index?projectNature=3");
|
||
} else if (val.name == "合计") {
|
||
router.push("/goverment/huizhou/projectList/index");
|
||
}
|
||
});
|
||
};
|
||
const myChamainlett = () => {
|
||
let myChart = echarts.init(mainlett.value);
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - 14, shape.y - 9];
|
||
const c2 = [xAxisPoint[0] - 14, xAxisPoint[1] - 8];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
||
}
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + 14, xAxisPoint[1] - 8];
|
||
const c4 = [shape.x + 14, shape.y - 8];
|
||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
}
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + 14, shape.y - 9];
|
||
const c3 = [shape.x, shape.y - 18];
|
||
const c4 = [shape.x - 14, shape.y - 9];
|
||
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
|
||
}
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
const NUM = projectInfo.value.total1 || 100;
|
||
const SUMALL = Number(
|
||
projectInfo.value.finished + projectInfo.value.newBuild + projectInfo.value.shutdown + projectInfo.value.unStart
|
||
);
|
||
const MAX = [NUM, NUM, NUM, NUM, NUM];
|
||
const VALUE = [
|
||
projectInfo.value.finished,
|
||
projectInfo.value.newBuild,
|
||
projectInfo.value.shutdown,
|
||
projectInfo.value.unStart,
|
||
SUMALL
|
||
];
|
||
let category = ["完工", "在建", "停工", "未开工", "合计"];
|
||
myChart.setOption({
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow"
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
const item = params[1];
|
||
return item.name + " : " + item.value;
|
||
}
|
||
},
|
||
grid: {
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: 30,
|
||
top: 30
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
position: "bottom",
|
||
data: category,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#e0e7ff"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
length: 6
|
||
},
|
||
axisLabel: {
|
||
// show:false,
|
||
interval: 0,
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
rotate: 0
|
||
}
|
||
}
|
||
],
|
||
yAxis: {
|
||
type: "value",
|
||
name: "",
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
boundaryGap: ["0%", "0%"]
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
renderItem: function (params, api) {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(14, 54, 126,0.4)"
|
||
}
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(17, 61, 135,0.5)"
|
||
}
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: "rgba(20, 68, 134,0.6)"
|
||
}
|
||
}
|
||
]
|
||
};
|
||
},
|
||
data: MAX
|
||
},
|
||
{
|
||
type: "custom",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
var color =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#61e400"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#389500"
|
||
}
|
||
]);
|
||
var color1 =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#95fb4c"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#95fb4c"
|
||
}
|
||
]);
|
||
var color2 =
|
||
api.value(1) > 2000
|
||
? "red"
|
||
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "#53c400"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#2e7a00"
|
||
}
|
||
]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color2
|
||
}
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(1),
|
||
yValue: api.value(0),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color
|
||
}
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0])
|
||
},
|
||
style: {
|
||
fill: color1
|
||
}
|
||
}
|
||
]
|
||
};
|
||
},
|
||
data: VALUE
|
||
},
|
||
{
|
||
type: "bar",
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
fontSize: 12,
|
||
color: "#",
|
||
offset: [2, -15]
|
||
},
|
||
itemStyle: {
|
||
color: "transparent"
|
||
},
|
||
tooltip: {},
|
||
data: MAX
|
||
}
|
||
]
|
||
});
|
||
myChart.on("click", val => {
|
||
console.log(val, 666777);
|
||
if (val.name == "完工") {
|
||
router.push("/goverment/huizhou/projectList/index?projectStatus=4");
|
||
} else if (val.name == "在建") {
|
||
router.push("/goverment/huizhou/projectList/index?projectStatus=2");
|
||
} else if (val.name == "停工") {
|
||
router.push("/goverment/huizhou/projectList/index?projectStatus=3");
|
||
} else if (val.name == "未开工") {
|
||
router.push("/goverment/huizhou/projectList/index?projectStatus=1");
|
||
} else if (val.name == "合计") {
|
||
router.push("/goverment/huizhou/projectList/index");
|
||
}
|
||
});
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.leftcent {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 950px;
|
||
margin-left: 5px;
|
||
background-color: #060f2c;
|
||
border: 1px solid #084b60;
|
||
.tile {
|
||
position: absolute;
|
||
top: 5px;
|
||
width: 99%;
|
||
height: 43px;
|
||
background: url("@/assets/images/xmgl/title_01.png") top left no-repeat,
|
||
url("@/assets/images/xmgl/title_05.png") top right no-repeat;
|
||
.tilein {
|
||
width: 83.2%;
|
||
height: 43px;
|
||
margin-left: 6.3%;
|
||
background: url("@/assets/images/xmgl/title_03.png") center repeat-x;
|
||
}
|
||
}
|
||
.tiilecent {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 30px;
|
||
font-size: 24px;
|
||
color: #a6b8d2;
|
||
letter-spacing: 5px;
|
||
}
|
||
.title {
|
||
position: absolute;
|
||
top: 70px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
width: 100%;
|
||
.titlecent {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 40%;
|
||
font-size: 20px;
|
||
color: #e2e3e5;
|
||
span {
|
||
white-space: nowrap;
|
||
}
|
||
.col {
|
||
font-size: 20px;
|
||
color: #32d8f2;
|
||
}
|
||
}
|
||
}
|
||
.topsix {
|
||
position: absolute;
|
||
top: 130px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
.topsixin {
|
||
// border: 1px solid red;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
width: 50%;
|
||
height: 75px;
|
||
margin-bottom: 15%;
|
||
// padding: 0px 15px;
|
||
.titles {
|
||
display: flex;
|
||
|
||
// border: 1px solid red;
|
||
flex-wrap: wrap;
|
||
width: 70px;
|
||
div {
|
||
width: 100%;
|
||
height: 100%;
|
||
font-size: 24px;
|
||
color: #00ccff;
|
||
}
|
||
div:nth-child(2) {
|
||
font-size: 18px;
|
||
color: #d1e2e3;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.bg1 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q5.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg2 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q4.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg3 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg4 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q3.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg5 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q6.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.bg6 {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: url("@/assets/images/main/q1.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.mainleto {
|
||
position: absolute;
|
||
top: 390px;
|
||
width: 65%;
|
||
}
|
||
.mainlett {
|
||
position: absolute;
|
||
top: 680px;
|
||
width: 65%;
|
||
}
|
||
.echatop {
|
||
position: absolute;
|
||
top: 440px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: #d1e2e3;
|
||
span {
|
||
color: #00bbeb;
|
||
font-size: 20px;
|
||
}
|
||
div {
|
||
margin-top: 15px;
|
||
}
|
||
.tub {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: -10px;
|
||
width: 9px;
|
||
height: 10px;
|
||
background: url("@/assets/images/main/sjx.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.echabut {
|
||
position: absolute;
|
||
top: 705px;
|
||
right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: #d1e2e3;
|
||
span {
|
||
color: #00bbeb;
|
||
font-size: 20px;
|
||
}
|
||
div {
|
||
margin-top: 15px;
|
||
}
|
||
.tub {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: -10px;
|
||
width: 9px;
|
||
height: 10px;
|
||
background: url("@/assets/images/main/sjx.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|