Skip to content

D
digital-construction
Commit b8e95357 authored by 张牧越's avatar 张牧越
Browse files
Options

样式修正

parent cc995d9f
Show whitespace changes
Inline Side-by-side
Showing with 455 additions and 218 deletions
src/assets/common/element.less
View file @ b8e95357
......@@ -186,7 +186,18 @@
}
}
::v-deep .el-step__icon {
width: 16px;
height: 16px;
vertical-align: top;
}
::v-deep .el-divider {
background: #5f7890;
opacity: 0.5;
}
::v-deep .el-step__line {
top: 50% !important;
transform: translateY(-50%) !important;
}
\ No newline at end of file
src/components/Index.vue
View file @ b8e95357
......@@ -347,10 +347,10 @@ a,
padding: 0 30px;
}
.weather {
display: inline-block;
display: flex;
flex-wrap: nowrap;
line-height: 24px;
vertical-align: top;
margin-right: 20px;
margin-top: 8px;
.weather-text {
color: #fff;
......@@ -359,9 +359,9 @@ a,
}
.weather-img {
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 6px;
width: 40px;
height: 40px;
margin-right: 4px;
}
}
.el-dropdown {
......@@ -386,7 +386,7 @@ a,
}
.invisible {
height: 100%;
width: 60px;
width: 40px;
display: inline-block;
vertical-align: top;
}
......
src/components/ShadowContainerRect.vue 0 → 100644
View file @ b8e95357
<template>
<div class="shadow-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
<img class="rb" src="@/assets/rb.png" alt="" />
<img class="lb" src="@/assets/lb.png" alt="" />
<slot />
</div>
</template>
<script>
export default {
name: "ShadowContainer",
};
</script>
<style lang="less" scoped>
.shadow-container {
position: relative;
border-radius: 10px;
padding: 20px;
border: 2px solid;
background: linear-gradient(
0deg,
rgba(4, 79, 129, 0.1) 0%,
rgba(15, 60, 89, 0.35) 28%,
#0b2950 100%
);
border-image: linear-gradient(
0deg,
rgba(255, 255, 255, 0),
rgba(7, 35, 65, 0.8),
rgba(25, 85, 117, 0.8),
rgba(15, 149, 212, 0.8)
)
2 2;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.lt,
.lb,
.rb,
.rt {
position: absolute;
width: 20px;
height: 20px;
}
.lt {
top: -2px;
left: -2px;
}
.lb {
left: -2px;
bottom: -2px;
}
.rb {
right: -2px;
bottom: -2px;
}
.rt {
right: -2px;
top: -2px;
}
.shadow-container::after {
content: "";
display: block;
position: absolute;
top: -2px;
right: -2px;
bottom: 2px;
left: -2px;
border-radius: 6px;
border-top: 2px solid;
border-color: rgba(15, 149, 212, 0.8);
pointer-events: none;
}
</style>
\ No newline at end of file
src/components/construction/Index.vue
View file @ b8e95357
......@@ -169,7 +169,12 @@
v-for="(item, index) in screenDetail.banner_image_arr"
:key="index"
>
<img class="container-img" :src="item.url" alt="" />
<!-- <img class="container-img" :src="item.url" alt="" /> -->
<el-image
style="width: 100%; height: 100%"
:src="item.url"
fit="cover"
></el-image>
</el-carousel-item>
</el-carousel>
</div>
......@@ -213,6 +218,20 @@
<div class="step-description">{{ progress.name }}</div>
</template>
</el-step>
<el-step
v-for="(progress, index) in progressDetail.progress_data"
:key="index"
>
<template #title>
<div class="step-title">
{{ progress.over_date }}
<div class="step-status">{{ progress.status_text }}</div>
</div>
</template>
<template #description>
<div class="step-description">{{ progress.name }}</div>
</template>
</el-step>
</el-steps>
</div>
</div>
......@@ -242,7 +261,35 @@
</ShadowContainer>
<Title text="AI预警"> </Title>
<ShadowContainer class="short-container">
<div style="display: flex">
<div class="chart-container">
<div ref="qualityChart" id="quality-chart"></div>
<div class="title">
<div class="main-title">
{{ AIwarningTotal }}
</div>
<div class="sub-title">AI预警</div>
</div>
</div>
<div class="chart-legends">
<div
v-for="(legend, index) in aiwarningData"
:key="index"
:style="{
color: legend.name == '已处理' ? '#AEE4F8' : '#FF754C',
}"
>
<span
class="rect"
:style="{
background: legend.name == '已处理' ? '#AEE4F8' : '#FF754C',
}"
></span>
{{ legend.name }} {{ legend.value }}
</div>
</div>
</div>
</ShadowContainer>
</div>
</div>
......@@ -258,82 +305,10 @@ export default {
name: "Construction",
data() {
return {
constructionUnits: [
{
unitText: "建设单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "施工单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "监理单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
{
unitText: "设计单位：",
unitName: "绍兴第二医院",
contact: "金吉祥(1556783245)",
},
],
pieChartData: [
{ value: 1048, name: "未整改" },
{ value: 735, name: "整改中" },
{ value: 580, name: "已完成" },
],
constructionUnits: [],
personData: [],
active: 4,
deviceStatus: [
{
img: require("@/assets/status/icon_spjk@2x.png"),
text: "视频监控",
counts: 1,
},
{
img: require("@/assets/status/icon_td@2x.png"),
text: "塔吊",
counts: 2,
},
{
img: require("@/assets/status/icon_sjt@2x.png"),
text: "升降机",
counts: 2,
},
{
img: require("@/assets/status/icon_hjgl@2x.png"),
text: "环境管理",
counts: 2,
},
{
img: require("@/assets/status/icon_ydjc@2x.png"),
text: "用电监测",
counts: 1,
},
{
img: require("@/assets/status/icon_zccl@2x.png"),
text: "在场车辆",
counts: 1,
},
{
img: require("@/assets/status/icon_sb@2x.png"),
text: "水表",
counts: 1,
},
{
img: require("@/assets/status/icon_lbfh@2x.png"),
text: "临边防护",
counts: 1,
},
{
img: require("@/assets/status/icon_xlt@2x.png"),
text: "卸料平台",
counts: 1,
},
],
deviceStatus: [],
screenDetail: {
unitList: {
sgList: [],
......@@ -353,6 +328,7 @@ export default {
current_progress_over_day: 0,
},
aiwarningData: [],
AIwarningTotal: 0,
};
},
methods: {
......@@ -361,71 +337,16 @@ export default {
this.aiwarningData.map((item) => {
total += item.value;
});
this.AIwarningTotal = total;
const chart = this.$echarts.init(this.$refs.qualityChart);
const option = {
title: {
x: "49%", //X坐标
y: "27%",
text: total,
subtext: "AI预警",
textAlign: "center",
textStyle: {
//标题样式
fontSize: 30,
fontWeight: "bolder",
color: "#00fcff",
},
subtextStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
color: "rgba(255,255,255,0.7)",
},
},
tooltip: {
trigger: "item",
},
legend: {
itemHeight: 12,
itemWidth: 12,
icon: "rect",
bottom: "0%",
left: "center",
itemGap: 40,
textStyle: {
color: "inherit",
rich: {
a: {
fontSize: 16,
verticalAlign: "top",
align: "left",
padding: [22, 0, 0, 5],
},
b: {
fontSize: 18,
align: "left",
lineHeight: 25,
padding: [0, 0, 0, 7],
},
},
},
formatter: (name) => {
let data = this.aiwarningData;
let target;
for (let i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [`{a|${name}}`, `{b|${target}}`];
return arr.join("\n");
},
},
series: [
{
type: "pie",
radius: ["58%", "70%"],
center: ["50%", "40%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 20,
......@@ -546,12 +467,11 @@ export default {
padding-bottom: 0;
}
.side-area {
width: 460px;
width: 400px;
height: 100%;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
width: calc(100% - 824px);
height: 100%;
}
.divider {
......@@ -650,7 +570,7 @@ table {
th,
td {
border: 1px solid #097ca7;
padding: 20px;
padding: 14px;
}
.unit-text {
font-size: 14px;
......@@ -668,25 +588,39 @@ table {
}
.unit-contact {
font-size: 12px;
font-weight: 400;
color: #99a9d0;
}
}
.chart-container {
position: relative;
.custom-chart {
width: 200px;
height: 200px;
.title {
position: absolute;
width: 20%;
top: 50%;
left: 50%;
transform: translateX(-50%);
top: 18%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
.main-title {
font-size: 30px;
font-weight: bold;
color: #00fcff;
}
.sub-title {
font-size: 16px;
font-weight: bold;
color: rgba(255, 255, 255, 0.7);
}
}
}
#security-chart,
#quality-chart {
width: 100%;
height: 100%;
margin: 0 auto;
background: url("@/assets/chart.png") no-repeat;
background-size: 50% 50%;
background-position: center center;
}
.steps {
padding-top: 40px;
......@@ -699,7 +633,7 @@ table {
.step-status {
position: absolute;
top: -170%;
top: -130%;
color: #18d7b9;
font-size: 12px;
}
......@@ -710,7 +644,12 @@ table {
}
.progress-contains {
padding: 8px 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.progress {
position: relative;
......@@ -748,8 +687,8 @@ table {
height: 100%;
.container-img {
width: 100%;
height: 100%;
vertical-align: top;
object-fit: cover;
}
.lt,
.lb,
......@@ -830,8 +769,13 @@ table {
}
.check-in {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
.checks {
width: 50%;
text-align: center;
......@@ -859,12 +803,13 @@ table {
#step-scroll {
margin-top: 32px;
width: 100%;
}
.long-container {
height: calc(53% - 50px);
height: calc(66% - 108px);
}
.short-container {
height: calc(33% - 50px);
height: calc(33% - 98px);
}
::v-deep .el-carousel {
height: 100%;
......@@ -872,4 +817,25 @@ table {
.construction-status {
height: 100%;
}
.chart-legends {
display: flex;
flex-wrap: wrap;
align-items: center;
flex-direction: column;
justify-content: center;
width: calc(100% - 200px);
& > div {
padding: 0 20px;
font-size: 14px;
line-height: 36px;
width: 100%;
text-align: left;
}
.rect {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
}
</style>
\ No newline at end of file
src/components/earlywarning/Index.vue
View file @ b8e95357
......@@ -562,7 +562,7 @@ export default {
height: calc(100% - 208px);
.today-warning,
.right-container {
width: calc(50% - 10px);
width: calc(50% - 6px);
}
}
.warp {
......
src/components/elevator/Index.vue
View file @ b8e95357
......@@ -114,7 +114,7 @@
</ShadowContainer>
</div>
<div class="elevator-container">
<ShadowContainer class="long-container">
<ShadowContainerRect class="long-container">
<div id="elevator-detail">
<div class="left-detail">
<template
......@@ -251,7 +251,7 @@
</template>
</div>
</div>
</ShadowContainer>
</ShadowContainerRect>
</div>
</div>
</template>
......@@ -405,7 +405,7 @@ export default {
height: 100%;
}
.side-area {
width: 350px;
width: 400px;
}
#elevator-description {
......@@ -461,7 +461,7 @@ export default {
}
}
.elevator-container {
width: calc(100% - 362px);
width: calc(100% - 412px);
}
.platform {
img {
......@@ -507,10 +507,13 @@ export default {
}
.warning-info-text {
white-space: nowrap;
padding-top: 20px;
padding-top: 10px;
font-size: 16px;
color: #ffffff;
line-height: 18px;
line-height: 24px;
text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
}
.warning-info-num {
font-size: 24px;
......@@ -518,8 +521,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-60px);
margin-bottom: -60px;
transform: translateY(-40px);
margin-bottom: -40px;
img {
width: 80%;
margin: 0 auto;
......@@ -575,11 +578,13 @@ export default {
.left-detail,
.right-detail {
width: 30%;
max-width: 360px;
}
.elevator-tower {
width: 40%;
}
.elevator-tower {
height: 96%;
margin-top: 2%;
text-align: center;
#tower-main {
display: inline-block;
......
src/components/fallprotection/Index.vue
View file @ b8e95357
......@@ -38,6 +38,7 @@
</ShadowContainer>
</div>
<div class="mid-area">
<div class="cover-area"></div>
<div class="buildingwindow" v-if="buildingWindowVisible">
<div class="building-description">
<img src="@/assets/fallprotection/building.png" alt="" />
......@@ -425,11 +426,10 @@ export default {
height: calc(100% - 24px);
}
.side-area {
width: 25%;
width: 400px;
}
.mid-area {
width: calc(50% - 40px);
margin: 0 20px;
width: calc(100% - 824px);
position: relative;
}
.swagger-container {
......@@ -561,11 +561,14 @@ export default {
width: 33%;
}
.warning-info-text {
padding-top: 20px;
white-space: nowrap;
padding-top: 10px;
font-size: 16px;
color: #ffffff;
line-height: 18px;
white-space: nowrap;
line-height: 24px;
text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
}
.warning-info-num {
font-size: 24px;
......@@ -573,8 +576,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-60px);
margin-bottom: -60px;
transform: translateY(-40px);
margin-bottom: -40px;
img {
width: 80%;
margin: 0 auto;
......@@ -672,4 +675,14 @@ export default {
.short-container {
height: calc(50% - 108px);
}
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style>
\ No newline at end of file
src/components/noise/Index.vue
View file @ b8e95357
......@@ -225,8 +225,8 @@ export default {
});
const option = {
title: {
x: "27%", //X坐标
y: "28%",
x: "26%", //X坐标
y: "30%",
text: total,
subtext: "总数",
textAlign: "center",
......@@ -322,11 +322,11 @@ export default {
const chart = this.$echarts.init(this.$refs.noiseChart);
const option = {
title: {
x: "27%", //X坐标
y: "28%",
subtext: "近30日\n噪音情况",
top: "center", //X坐标
left: "27%",
text: "近30日\n噪音情况",
textAlign: "center",
subtextStyle: {
textStyle: {
//副标题样式
fontSize: 16,
fontWeight: "bolder",
......@@ -645,7 +645,7 @@ export default {
}
#aqi-chart {
width: 100%;
height: 250px;
height: calc(40% - 44px);
}
.monitor {
display: flex;
......@@ -859,11 +859,11 @@ export default {
#stats-container {
position: relative;
margin: 0 auto;
margin-bottom: 10px;
max-width: 840px;
border-bottom: 4px solid #114e70;
height: 60%;
img {
width: 100%;
height: 100%;
vertical-align: top;
}
.text {
......@@ -921,7 +921,8 @@ export default {
.filters {
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-top: 10px;
border-top: 4px solid #114e70;
.filter {
font-size: 14px;
color: rgba(198, 222, 249, 1);
......
src/components/projectcheck/Index.vue
View file @ b8e95357
......@@ -630,6 +630,12 @@ export default {
#move-check {
width: 100%;
height: calc(100% - 30px);
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0.05) 0%,
rgba(39, 172, 251, 0) 50%,
rgba(39, 172, 251, 0.05) 100%
);
}
}
.chart-container {
......
src/components/realname/Index.vue
View file @ b8e95357
......@@ -129,9 +129,8 @@
<div class="rt-area" id="reset-area1">
<Title type="long" text="一周考勤"></Title>
<ShadowContainer class="long-container">
<div class="chart-title">近一周考勤</div>
<div id="week-check-chart" ref="weekcheckChart"></div>
<div class="chart-title">近一周工种考勤</div>
<div class="separate-line"></div>
<div id="week-work-chart" ref="weekworkChart"></div>
</ShadowContainer>
<div class="bottom-chart">
......@@ -141,18 +140,28 @@
<div id="in-out-chart" ref="inoutChart"></div>
</ShadowContainer>
</div>
<div>
<Title text="工种分布"></Title>
<ShadowContainer>
<div class="work-types">
<div class="work-types" id="table-scroll">
<div
v-for="(iType, index) in industryTypes"
:key="index"
class="i-type"
>
<div class="type-info">
<div class="i-type-name">
<img src="@/assets/realname/fl-renyuan.png" alt="" />
{{ iType.name }}
</div>
<div class="i-type-count">
<span>{{ iType.total }}</span>
人
</div>
</div>
<div class="slider">
<el-slider
:value="
......@@ -165,10 +174,6 @@
disabled
></el-slider>
</div>
<div class="i-type-count">
<span>{{ iType.total }}</span>
人
</div>
</div>
</div>
</ShadowContainer>
......@@ -321,6 +326,17 @@ export default {
});
const chart = this.$echarts.init(this.$refs.weekcheckChart);
const option = {
title: {
text: "近一周考勤",
left: "center",
textStyle: {
//标题样式
fontSize: 16,
fontWeight: "bolder",
color: "#fff",
textAlign: "center",
},
},
color: "#00FFF0",
grid: {
top: 30,
......@@ -400,20 +416,75 @@ export default {
const chart = this.$echarts.init(this.$refs.weekworkChart);
const option = {
title: {
text: "近一周工种考勤",
left: "center",
textStyle: {
//标题样式
fontSize: 16,
fontWeight: "bolder",
color: "#fff",
},
},
color: [
"#b5a94a",
"#a83e39",
"#64b95d",
"#f2b486",
"#436db2",
"#fdf193",
"#929292",
"#ec8b88",
"#8db7f9",
"#c783f8",
"#9ffba1",
"#ea6f2d",
"#76ecfc",
"#e638b5",
"#f9e44c",
"#3573f6",
"#9d2df6",
"#efd2d2",
"#7dfa5f",
"#e63223",
"#f2bb7f",
"#93defb",
],
grid: {
top: 80,
bottom: 30,
left: 30,
bottom: 20,
left: 120,
right: 30,
},
legend: {
orient: "horizontal",
x: "center",
y: "top",
orient: "vertical",
left: "0",
top: "0",
icon: "rect",
type: "scroll",
itemWidth: 6,
itemHeight: 6,
textStyle: {
fontSize: 12,
color: "rgba(225, 239, 255, 0.7)",
},
pageIcons: {
vertical: [
`path://M210.037 456.406L602.263 104.35A87.354 87.354 0 0 1 660.613 82C708.877 82 748 121.15 748 169.444v704.111a87.476 87.476 0 0 1-22.336 58.39c-32.226 35.95-87.474 38.951-123.4 6.704L210.036 586.593a87.415 87.415 0 0 1-6.7-6.705c-32.227-35.95-29.227-91.235 6.7-123.482z`,
`path://M238.944 129.792l0 764.8c0 17.6 14.4 32 32 32 6.4 0 14.4-1.6 19.232-6.39999999l476.8-369.60000001c20.8-16 24-46.4 8-67.20000001-3.2-3.232-4.8-6.368-8-7.96799999l-476.8-371.264c-14.4-11.2-33.632-7.99999999-44.8 6.4-4.832 4.832-6.432 11.232-6.432 19.232z`,
],
},
pageIconColor: "#3E88FF", //翻页下一页的三角按钮颜色
pageIconInactiveColor: "#333", //翻页（即翻页到头时）
pageIconSize: 14, //翻页按钮大小
pageFormatter: " ", //隐藏翻页的数字
formatter: function (name) {
if (name.length > 4) {
return name.slice(0, 4) + "...";
} else {
return name;
}
},
},
tooltip: {
trigger: "axis",
......@@ -602,8 +673,38 @@ export default {
})
.join("+")
);
this.$nextTick(() => {
const element = document.getElementById("table-scroll");
this.autoScroll(1, 50, 1500, element);
});
});
},
autoScroll(stepLength, speed, delay, element) {
let interval;
//let step = 1
element.scrollTop = 0;
function start() {
interval = setInterval(scrolling, speed);
element.scrollTop += stepLength;
}
function scrolling() {
var sTop = element.scrollTop;
element.scrollTop += stepLength;
if (
sTop === element.scrollTop ||
sTop == 0 ||
element.scrollTop === element.scrollHeight - element.offsetHeight
) {
element.scrollTop = 0;
clearInterval(interval);
setTimeout(start, delay);
}
}
if (element.offsetHeight !== element.scrollHeight) {
// 元素内容没有溢出时，不触发
setTimeout(start, delay);
}
},
},
mounted() {
this.getTime();
......@@ -620,12 +721,12 @@ export default {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 100%;
height: calc(100% - 12px);
.lt-area {
width: 25%;
width: 350px;
}
.mid-area {
width: 25%;
width: 510px;
height: 100%;
}
.lt-area {
......@@ -637,7 +738,7 @@ export default {
background-size: 100% 100%;
padding: 0px 20px;
margin-bottom: 12px;
height: calc(100% / 6 - 14px);
height: calc(100% / 6 - 18px);
&:last-child {
margin-bottom: 0;
}
......@@ -672,7 +773,7 @@ export default {
}
.rt-area {
width: calc(50% - 24px);
width: calc(100% - 884px);
}
}
.bottom-chart {
......@@ -746,37 +847,46 @@ export default {
}
#week-check-chart {
width: 100%;
height: calc(50% - 35px);
height: calc(50% - 10px);
}
#week-work-chart {
width: 100%;
height: calc(50% - 35px);
height: calc(50%);
}
#in-out-chart {
width: 100%;
height: 100%;
}
.i-type {
display: flex;
font-size: 14px;
color: #c6def9;
padding: 4px;
.type-info {
display: flex;
justify-content: space-between;
}
.slider {
width: 70%;
width: calc(100% - 12px);
vertical-align: top;
margin: 0 6px;
}
.i-type-name,
.i-type-count {
width: 15%;
vertical-align: top;
line-height: 42px;
text-align: right;
white-space: nowrap;
span {
font-size: 16px;
font-size: 14px;
}
img {
width: 18px;
vertical-align: top;
}
}
.i-type-name {
padding-right: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
::v-deep .el-slider__bar {
......@@ -816,4 +926,10 @@ export default {
.short-container {
height: calc(32% - 50px);
}
.separate-line {
width: 100%;
height: 4px;
margin: 8px 0;
background: #114e70;
}
</style>
\ No newline at end of file
src/components/safecap/Index.vue
View file @ b8e95357
......@@ -43,6 +43,7 @@
</ShadowContainer>
</div>
<div id="map-area">
<div class="cover-area"></div>
<div class="swagger-container">
<img class="lt" src="@/assets/lt.png" alt="" />
<img class="rt" src="@/assets/rt.png" alt="" />
......@@ -419,6 +420,17 @@ export default {
#map-area {
width: calc(100% - 412px);
height: 100%;
position: relative;
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
}
}
......
src/components/tower/Index.vue
View file @ b8e95357
......@@ -15,6 +15,7 @@
</ShadowContainer>
</div>
<div id="mid-area">
<div class="cover-area"></div>
<div class="towerwindow" v-if="towerWindowVisible">
<div class="tower-description">
<img
......@@ -804,7 +805,7 @@ export default {
.step-status {
position: absolute;
top: -170%;
top: -130%;
color: #18d7b9;
font-size: 12px;
}
......@@ -983,4 +984,14 @@ export default {
.long-container {
height: calc(66% - 98px);
}
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style>
\ No newline at end of file
src/components/unloadingplatform/Index.vue
View file @ b8e95357
......@@ -43,6 +43,7 @@
</ShadowContainer>
</div>
<div class="mid-area">
<div class="cover-area"></div>
<div class="buildingwindow" v-if="platformWindowVisible">
<div class="building-description">
<img src="@/assets/unloadingplatform/platform.png" alt="" />
......@@ -503,11 +504,10 @@ export default {
height: calc(100% - 24px);
}
.side-area {
width: 360px;
width: 400px;
}
.mid-area {
width: calc(100% - 732px);
margin: 0 12px;
width: calc(100% - 824px);
position: relative;
height: 100%;
}
......@@ -639,10 +639,13 @@ export default {
}
.warning-info-text {
white-space: nowrap;
padding-top: 20px;
padding-top: 10px;
font-size: 16px;
color: #ffffff;
line-height: 18px;
line-height: 24px;
text-shadow: 0 0 5px rgba(99, 226, 253, 0.6),
0 0 5px rgba(99, 226, 253, 0.6), 0 0 6px rgba(99, 226, 253, 0.6),
0 0 40px rgba(99, 226, 253, 0.6);
}
.warning-info-num {
font-size: 24px;
......@@ -650,8 +653,8 @@ export default {
}
.warning-info-img {
position: relative;
transform: translateY(-60px);
margin-bottom: -60px;
transform: translateY(-40px);
margin-bottom: -40px;
img {
width: 80%;
margin: 0 auto;
......@@ -822,4 +825,14 @@ export default {
.long-container {
height: calc(100% - 98px);
}
.cover-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 99999;
box-shadow: #1f81ef 0px 0px 8px inset;
pointer-events: none;
}
</style>
\ No newline at end of file
src/main.js
View file @ b8e95357
......@@ -6,6 +6,8 @@ import 'element-ui/lib/theme-chalk/index.css'
import 'lib-flexible'
import Title from "@/components/Title"
import ShadowContainer from "@/components/ShadowContainer"
import ShadowContainerRect from "@/components/ShadowContainerRect"
import * as echarts from "echarts"
import scroll from 'vue-seamless-scroll'
import "@/assets/iconfont/iconfont.css";
......@@ -20,6 +22,8 @@ Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.component('Title', Title)
Vue.component('ShadowContainer', ShadowContainer)
Vue.component('ShadowContainerRect', ShadowContainerRect)
new Vue({
render: h => h(App),
router
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment