@@ -60,18 +60,22 @@ export default { | |||
background: #4443; | |||
position: absolute; | |||
z-index: 9999; | |||
padding: 14px; | |||
// padding: 14px; | |||
padding: 0.745vw; | |||
backdrop-filter: blur(2px); | |||
border-radius: 4px; | |||
transform: translate(-50%, -100%); | |||
box-shadow: inset 0 0 12px 2px #fff3; | |||
// 在这里设置一个总的字体大小 不失为一个好的选择 | |||
font-size: 1vw; | |||
} | |||
h2 { | |||
margin: 6px 0; | |||
font-family: 优设标题黑; | |||
color: #fff; | |||
font-size: 24px; | |||
// font-size: 24px; | |||
font-size: 1.276em; | |||
} | |||
ul, | |||
@@ -87,24 +91,34 @@ ul { | |||
gap: 6px; | |||
} | |||
li { | |||
font-size: 0.851em; | |||
} | |||
.corner { | |||
position: absolute; | |||
bottom: 0; | |||
width: 12px; | |||
height: 12px; | |||
// width: 12px; | |||
// height: 12px; | |||
width: 0.639vw; | |||
height: 0.639vw; | |||
border-style: solid; | |||
border-color: transparent; | |||
} | |||
.bl { | |||
left: 0; | |||
border-left: 3px solid #ffa600; | |||
border-bottom: 3px solid #ffa600; | |||
border-left: 0.1596vw solid #ffa600; | |||
border-bottom: 0.1596vw solid #ffa600; | |||
// border-left: 3px solid #ffa600; | |||
// border-bottom: 3px solid #ffa600; | |||
} | |||
.br { | |||
right: 0; | |||
border-right: 3px solid #ffa600; | |||
border-bottom: 3px solid #ffa600; | |||
// border-right: 3px solid #ffa600; | |||
// border-bottom: 3px solid #ffa600; | |||
border-right: 0.1596vw solid #ffa600; | |||
border-bottom: 0.1596vw solid #ffa600; | |||
} | |||
</style> |
@@ -0,0 +1,163 @@ | |||
<!-- | |||
filename: Container.vue | |||
author: liubin | |||
date: 2024-04-09 10:44:09 | |||
description: | |||
--> | |||
<template> | |||
<div class="dashboard-container"> | |||
<!-- decoration --> | |||
<div class="corner tl"></div> | |||
<div class="corner tr"></div> | |||
<div v-if="side == 'left'" class="corner bl"></div> | |||
<div v-if="side == 'right'" class="corner br"></div> | |||
<!-- content --> | |||
<div | |||
class="container-head" | |||
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | |||
> | |||
<Icon :icon="icon"></Icon> | |||
<h2 class="container-title">{{ title }}</h2> | |||
</div> | |||
<div | |||
class="container-body" | |||
:class="[ | |||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | |||
]" | |||
></div> | |||
</div> | |||
</template> | |||
<script> | |||
import ContainerIconVue from "./ContainerIcon.vue"; | |||
export default { | |||
name: "DashboardContainer", | |||
components: { | |||
Icon: ContainerIconVue, | |||
}, | |||
props: { | |||
side: { | |||
type: String, | |||
default: "left", | |||
}, | |||
icon: { | |||
type: String, | |||
default: "cube", | |||
}, | |||
title: { | |||
type: String, | |||
default: "Default Title", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.dashboard-container { | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
position: relative; | |||
.container-head { | |||
// height: 40px; | |||
height: 3.8vh; | |||
padding: 8px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
.container-title { | |||
font-size: 1.18vw; | |||
line-height: 1.39vw; | |||
font-weight: normal; | |||
letter-spacing: 2px; | |||
} | |||
} | |||
.container-body { | |||
padding: 8px; | |||
display: flex; | |||
flex: 1; | |||
} | |||
.corner { | |||
z-index: 1; | |||
position: absolute; | |||
// width: 16px; | |||
// height: 16px; | |||
width: 0.95vw; | |||
height: 0.95vw; | |||
} | |||
.corner.tl { | |||
border-top: 2px solid #0175dc; | |||
border-left: 2px solid #0175dc; | |||
top: 0; | |||
left: 0; | |||
} | |||
.corner.tr { | |||
top: 0; | |||
right: 0; | |||
border-top: 2px solid #0175dc; | |||
border-right: 2px solid #0175dc; | |||
} | |||
.corner.bl { | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
bottom: 0; | |||
left: 0; | |||
// border-left: 10px solid #0175dc; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid transparent; | |||
border-left: 0.532vw solid #0175dc; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid transparent; | |||
} | |||
.corner.br { | |||
bottom: 0; | |||
right: 0; | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
// border-left: 10px solid transparent; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid #0175dc; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
} | |||
.gradient-to-right { | |||
background: linear-gradient(to right, #0c3f68cc, transparent); | |||
} | |||
.gradient-to-left { | |||
background: linear-gradient(to left, #0c3f68cc, transparent); | |||
} | |||
.body-gradient-to-right { | |||
background: linear-gradient(to right, #0003, transparent); | |||
} | |||
.body-gradient-to-left { | |||
background: linear-gradient(to left, #0003, transparent); | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,33 @@ | |||
<!-- | |||
filename: ContainerIcon.vue | |||
author: liubin | |||
date: 2024-04-09 16:41:36 | |||
description: | |||
--> | |||
<template> | |||
<div class="container-icon"></div> | |||
</template> | |||
<script> | |||
export default { | |||
name: "ContainerIcon", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.container-icon { | |||
// width: 32px; | |||
// height: 32px; | |||
width: 1.701vw; | |||
height: 1.701vw; | |||
background: #ccc2; | |||
} | |||
</style> |
@@ -0,0 +1,66 @@ | |||
<!-- | |||
filename: Header.vue | |||
author: liubin | |||
date: 2024-04-09 09:04:12 | |||
description: | |||
--> | |||
<template> | |||
<header class="dashboard-header"> | |||
<h1>发电玻璃智能管控平台地图总览</h1> | |||
<span class="side left">晴转多云 14℃</span> | |||
<span class="side right">23:12|星期一|2023.12.13</span> | |||
</header> | |||
</template> | |||
<script> | |||
export default { | |||
name: "DashboardHeader", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.dashboard-header { | |||
height: 8vh; | |||
background: url(../../../assets/images/homeindex/header-bg.png) no-repeat 0 0 / | |||
100% 100%; | |||
position: relative; | |||
display: grid; | |||
place-content: center; | |||
} | |||
h1 { | |||
// font-size: 32px; | |||
font-size: 1.65vw; | |||
// line-height: 45px; | |||
line-height: 1.25; | |||
letter-spacing: 0.32vw; | |||
user-select: none; | |||
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.5); | |||
} | |||
.side { | |||
position: absolute; | |||
font-size: 1.18vw; | |||
line-height: 24px; | |||
letter-spacing: 2px; | |||
color: #69b4ff; | |||
} | |||
.left { | |||
left: 22vw; | |||
top: 4.65vh; | |||
} | |||
.right { | |||
right: 15vw; | |||
top: 4.65vh; | |||
} | |||
</style> |
@@ -2,10 +2,17 @@ | |||
<div class="dashboard-factory-all"> | |||
<div id="map-container"> | |||
<div class="databoard"> | |||
<div class="db-header"></div> | |||
<db-header class="db-header"></db-header> | |||
<div class="db-body"> | |||
<div class="db-left"></div> | |||
<div class="db-right"></div> | |||
<div class="db-left"> | |||
<db-container icon="cube" title="FTO投入"></db-container> | |||
<db-container icon="chip" title="芯片投入"></db-container> | |||
</div> | |||
<div class="db-right"> | |||
<db-container side="right" icon="chip2" title="芯片产出"></db-container> | |||
<db-container side="right" icon="std" title="标准组件产出"></db-container> | |||
<db-container side="right" icon="stack" title="BIPV产出"></db-container> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -20,11 +27,17 @@ | |||
<script> | |||
import store from "@/store"; | |||
import DashboardHeader from "./dashboard/components/Header.vue"; | |||
import CompanyInfo from "./dashboard/components/CompanyInfo.vue"; | |||
import Container from "./dashboard/components/Container.vue"; | |||
export default { | |||
name: "Index", | |||
components: { CompanyInfo }, | |||
components: { | |||
CompanyInfo, | |||
DbHeader: DashboardHeader, | |||
DbContainer: Container, | |||
}, | |||
data() { | |||
return { | |||
visible: false, | |||
@@ -34,6 +47,9 @@ export default { | |||
mounted() { | |||
this.$nextTick(() => { | |||
this.initPins(); | |||
// 调整 echarts 大小 | |||
window.onresize = () => {}; | |||
}); | |||
}, | |||
beforeRouteEnter(to, from, next) { | |||
@@ -104,9 +120,9 @@ export default { | |||
background: #151516; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
left: 54px; | |||
height: 100vh; | |||
width: 100vw; | |||
width: calc(100vw - 54px); | |||
z-index: 1000; | |||
color: #fff; | |||
} | |||
@@ -128,23 +144,20 @@ export default { | |||
flex-direction: column; | |||
} | |||
.db-header { | |||
height: 88px; | |||
background: #f001; | |||
} | |||
.db-body { | |||
flex: 1; | |||
background: #0f01; | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
.db-left, | |||
.db-right { | |||
background: #00f2; | |||
width: 420px; | |||
// width: 420px; | |||
width: 24vw; | |||
padding: 20px; | |||
display: flex; | |||
flex-direction: column; | |||
gap: 20px; | |||
} | |||
} | |||
</style> | |||
@@ -154,8 +167,12 @@ export default { | |||
display: inline-block; | |||
position: absolute; | |||
z-index: 9998; | |||
width: 1.702vw; | |||
height: 1.702vw; | |||
/* | |||
width: 32px; | |||
height: 32px; | |||
height: 32px; | |||
*/ | |||
background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%; | |||
transition: transform 0.1s linear; | |||
cursor: pointer; | |||