update home
This commit is contained in:
DESKTOP-FUDKNA8\znjsz
129
src/views/dashboard/components/CompanyInfo.vue
Normal file
129
src/views/dashboard/components/CompanyInfo.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
filename: CompanyInfo.vue
|
||||
author: liubin
|
||||
date: 2024-04-08 15:27:04
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="company-info" :style="styles">
|
||||
<div class="corner bl"></div>
|
||||
<div class="corner br"></div>
|
||||
<h2>{{ info.companyName }}</h2>
|
||||
<ul>
|
||||
<li v-for="item in info.items" :key="item.label">
|
||||
{{ item.label }} {{ item.value | currency }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CompanyInfo",
|
||||
components: {},
|
||||
props: {
|
||||
info: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({}),
|
||||
},
|
||||
position: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({ x: 0, y: 0 }),
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
currency(value) {
|
||||
return value.toLocaleString();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
return {
|
||||
left: `${this.position.x}%`,
|
||||
top: `${this.position.y}%`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@font-face {
|
||||
font-family: 优设标题黑;
|
||||
src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
|
||||
}
|
||||
|
||||
.company-info {
|
||||
color: #fff;
|
||||
background: #4443;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
// 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: 1.276em;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 0.851em;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
// width: 12px;
|
||||
// height: 12px;
|
||||
width: 0.639vw;
|
||||
height: 0.639vw;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.bl {
|
||||
left: 0;
|
||||
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: 0.1596vw solid #ffa600;
|
||||
border-bottom: 0.1596vw solid #ffa600;
|
||||
}
|
||||
</style>
|
||||
203
src/views/dashboard/components/Container.vue
Normal file
203
src/views/dashboard/components/Container.vue
Normal file
@@ -0,0 +1,203 @@
|
||||
<!--
|
||||
filename: Container.vue
|
||||
author: liubin
|
||||
date: 2024-04-09 10:44:09
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- refresh btn -->
|
||||
<button
|
||||
v-if="0"
|
||||
style="appearance: none; outline: none; border: none; background: none; color:#fff; cursor: pointer; position: absolute; top: 8px; right: 8px"
|
||||
@click="$emit('refresh')"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
style="width: 24px; height: 24px"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- 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',
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</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 {
|
||||
height: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 20px 1px #fff1;
|
||||
|
||||
// &::after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// display: inline-block;
|
||||
// width: 60%;
|
||||
// height: 0.31415vh;
|
||||
// border-radius: 2px;
|
||||
// left: 8%;
|
||||
// bottom: 0;
|
||||
// background: linear-gradient(to right, #024798, transparent);
|
||||
// z-index: 0;
|
||||
// }
|
||||
|
||||
.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: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.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>
|
||||
58
src/views/dashboard/components/ContainerIcon.vue
Normal file
58
src/views/dashboard/components/ContainerIcon.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<!--
|
||||
filename: ContainerIcon.vue
|
||||
author: liubin
|
||||
date: 2024-04-09 16:41:36
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="container-icon" :style="bgStyle"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cube from "@/assets/images/homeindex/fto-icon.png";
|
||||
import chip from "@/assets/images/homeindex/chip-icon.png";
|
||||
import chip2 from "@/assets/images/homeindex/chip-icon-2.png";
|
||||
import bipv from "@/assets/images/homeindex/bipv-icon.png";
|
||||
import std from "@/assets/images/homeindex/std-icon.png";
|
||||
|
||||
export default {
|
||||
name: "ContainerIcon",
|
||||
components: {},
|
||||
props: {
|
||||
icon: {
|
||||
type: String,
|
||||
default: "cube",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
bgStyle() {
|
||||
return {
|
||||
cube:
|
||||
"background: url(" + cube + ") no-repeat center center / 100% 100%",
|
||||
chip:
|
||||
"background: url(" + chip + ") no-repeat center center / 100% 100%",
|
||||
chip2:
|
||||
"background: url(" + chip2 + ") no-repeat center center / 100% 100%",
|
||||
bipv:
|
||||
"background: url(" + bipv + ") no-repeat center center / 100% 100%",
|
||||
std: "background: url(" + std + ") no-repeat center center / 100% 100%",
|
||||
}[this.icon];
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container-icon {
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
width: 1.701vw;
|
||||
height: 1.701vw;
|
||||
background: #ccc2;
|
||||
}
|
||||
</style>
|
||||
102
src/views/dashboard/components/Header.vue
Normal file
102
src/views/dashboard/components/Header.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<!--
|
||||
filename: Header.vue
|
||||
author: liubin
|
||||
date: 2024-04-09 09:04:12
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<header class="dashboard-header">
|
||||
<div class="btn" :style="btnStyle" @click="toggleFullscreen"></div>
|
||||
<h1>发电玻璃智能管控平台地图总览</h1>
|
||||
<span class="side left">晴转多云 14℃</span>
|
||||
<span class="side right">23:12|星期一|2023.12.13</span>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import fullscreenIcon from "@/assets/images/homeindex/fullscreen.png";
|
||||
import fullscreenExitIcon from "@/assets/images/homeindex/exit-fullscreen.png";
|
||||
|
||||
export default {
|
||||
name: "DashboardHeader",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
btnStyle() {
|
||||
return {
|
||||
backgroundImage: `url(${
|
||||
this.isFullscreen ? fullscreenExitIcon : fullscreenIcon
|
||||
})`,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleFullscreen() {
|
||||
screenfull.toggle();
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
// 矫正宽度
|
||||
const el = document.querySelector(".dashboard-factory-all");
|
||||
el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
|
||||
el.style.left = this.isFullscreen ? "0" : "54px";
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 2vw;
|
||||
height: 2vw;
|
||||
top: 50%;
|
||||
right: 1.18vw;
|
||||
background-size: 100% 100%;
|
||||
background-position: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
line-height: 1.277vw;
|
||||
letter-spacing: 2px;
|
||||
color: #69b4ff;
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 22vw;
|
||||
top: 4.9vh;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 15vw;
|
||||
top: 4.9vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user