update basic layout
This commit is contained in:
parent
7057df592a
commit
168f4af5fc
@ -4,7 +4,7 @@
|
||||
<span class="header--logo">
|
||||
<!-- <img src="../../assets/logo.png" alt="logo"> -->
|
||||
</span>
|
||||
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
|
||||
<h1>宜兴三期生产线大数据指挥中心</h1>
|
||||
</div>
|
||||
<span class="header--wing absolute company"></span>
|
||||
<span class="header--wing absolute datetime">
|
||||
@ -68,8 +68,8 @@ export default {
|
||||
header {
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 100%;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
height: 141px;
|
||||
width: 2672px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
@ -79,19 +79,19 @@ header {
|
||||
margin-bottom: adjust(10px);
|
||||
|
||||
.header--logo {
|
||||
width: adjust(102px);
|
||||
height: adjust(56px);
|
||||
width: 64px;
|
||||
height: 94px;
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
margin-left: 36px;
|
||||
font-size: 72px;
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
user-select: none;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
letter-spacing: 12px;
|
||||
font-weight: 400;
|
||||
// color: #6bf2ff;
|
||||
color: $main-color;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
|
||||
32
src/components/yx-dark/containers/rect.vue
Normal file
32
src/components/yx-dark/containers/rect.vue
Normal file
@ -0,0 +1,32 @@
|
||||
<!--
|
||||
filename: rect.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 10:02:48
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="rect-container"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RectContainer",
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.rect-container {
|
||||
background: rgba(45, 230, 196, 0.8);
|
||||
padding: 0;
|
||||
width: 624px;
|
||||
height: 304px;
|
||||
}
|
||||
</style>
|
||||
@ -1,39 +1,141 @@
|
||||
<template>
|
||||
<div class="home-view">
|
||||
<BigHeader />
|
||||
<Main />
|
||||
</div>
|
||||
<!-- transform: 'scale(0.18182, 0.25)', -->
|
||||
<!-- :style="{
|
||||
transform: 'scale(0.72727, 1)',
|
||||
transformOrigin: 'top left',
|
||||
}" -->
|
||||
<div class="home-view" :style="styles">
|
||||
<!-- <div class="bg-layer"></div> -->
|
||||
<LeftSide />
|
||||
<section class="center">
|
||||
<header style="height: 1px"></header>
|
||||
<!-- <BigHeader /> -->
|
||||
<MainPanel style="height: 1px; flex: 1;" />
|
||||
<!-- <Main /> -->
|
||||
</section>
|
||||
<RightSide />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BigHeader from '../components/layout/Header.vue'
|
||||
import Main from '../components/layout/Main.vue'
|
||||
import BigHeader from "../components/layout/Header.vue";
|
||||
import Main from "../components/layout/Main.vue";
|
||||
import LeftSide from "./LeftSide.vue";
|
||||
import RightSide from "./RightSide.vue";
|
||||
import MainPanel from "./MainPanel.vue";
|
||||
|
||||
export default {
|
||||
name: "HomeView",
|
||||
components: { BigHeader, Main },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
name: "HomeView",
|
||||
components: { BigHeader, Main, LeftSide, RightSide, MainPanel },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
value: 20,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
styles() {
|
||||
let v = (this.value / 100).toFixed(2);
|
||||
return {
|
||||
// transform: `scale(${(v * 24) / 33}, ${v})`,
|
||||
transform: `scale(${v}, ${v})`,
|
||||
transformOrigin: "top left",
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const slider = document.createElement("div");
|
||||
slider.id = "slider";
|
||||
slider.classList.add("slider");
|
||||
const ranger = document.createElement("input");
|
||||
ranger.type = "range";
|
||||
ranger.value = this.value;
|
||||
ranger.addEventListener("input", this.handleSlide);
|
||||
slider.appendChild(ranger);
|
||||
document.body.appendChild(slider);
|
||||
|
||||
// this.$watch('value', val => {
|
||||
// ranger.value = val
|
||||
// })
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.shiftKey && e.key === "L") {
|
||||
document.getElementById("slider").classList.toggle("show");
|
||||
}
|
||||
});
|
||||
document.getElementById("slider").addEventListener("mouseleave", () => {
|
||||
setTimeout(() => {
|
||||
document.getElementById("slider").classList.remove("show");
|
||||
}, 200);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleSlide(e) {
|
||||
this.value = e.target.value;
|
||||
window.scroll(0, 0);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../assets/styles/functions';
|
||||
<style lang="scss">
|
||||
@import "../assets/styles/functions";
|
||||
|
||||
.home-view {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
height: adjust($actual_height);
|
||||
width: adjust($actual_width);
|
||||
overflow: hidden;
|
||||
background: url(../assets/bg.png) center/cover no-repeat ;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1080px;
|
||||
width: 8640px;
|
||||
overflow: hidden;
|
||||
// background: #C9CCE5;
|
||||
background: url(../assets/bg.png) center/cover no-repeat;
|
||||
color: white;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #c9cce577;
|
||||
// background: url(../assets/bg.png) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 6592px;
|
||||
// flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slider {
|
||||
height: 5vh;
|
||||
width: 20vw;
|
||||
border-radius: 88px;
|
||||
box-shadow: 0 0 68px 8px rgba($color: #000000, $alpha: 0.3);
|
||||
padding: 32px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
// bottom: 64px;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transition: opacity 0.3s ease-out, bottom 0.3s ease-out;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
transform: translateY(-7px);
|
||||
color: #0b58ff;
|
||||
background: #fcc;
|
||||
}
|
||||
}
|
||||
|
||||
.slider.show {
|
||||
opacity: 1;
|
||||
bottom: 64px;
|
||||
}
|
||||
</style>
|
||||
|
||||
26
src/views/LeftSide.vue
Normal file
26
src/views/LeftSide.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="left-side"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "LeftSide",
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// import
|
||||
|
||||
.left-side {
|
||||
background: #000;
|
||||
height: 1080px;
|
||||
width: 1024px;
|
||||
}
|
||||
</style>
|
||||
124
src/views/MainPanel.vue
Normal file
124
src/views/MainPanel.vue
Normal file
@ -0,0 +1,124 @@
|
||||
<!--
|
||||
filename: MainPanel.vue
|
||||
author: liubin
|
||||
date: 2023-09-08 10:00:10
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="main-panel">
|
||||
<RectContainer class="leftTop" />
|
||||
<RectContainer class="leftMiddle" />
|
||||
<RectContainer class="leftBottom" />
|
||||
|
||||
<RectContainer class="bottom-1" />
|
||||
<RectContainer class="bottom-2" />
|
||||
<RectContainer class="bottom-3" />
|
||||
<RectContainer class="bottom-4" />
|
||||
<RectContainer class="bottom-5" />
|
||||
<RectContainer class="bottom-6" />
|
||||
<RectContainer class="bottom-7" />
|
||||
<RectContainer class="bottom-8" />
|
||||
|
||||
<RectContainer class="rightTop" />
|
||||
<RectContainer class="rightMiddle" />
|
||||
<RectContainer class="rightBottom" />
|
||||
|
||||
<div class="main-area" style="background: lightcoral;" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RectContainer from "@/components/yx-dark/containers/rect.vue";
|
||||
|
||||
export default {
|
||||
name: "MainPanel",
|
||||
components: { RectContainer },
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-panel {
|
||||
background: #cccc;
|
||||
padding: 0 0 24px;
|
||||
position: relative;
|
||||
// top: -28px; // 往上部偏移一点
|
||||
display: grid;
|
||||
gap: 32px;
|
||||
place-content: end center;
|
||||
grid-auto-columns: 624px;
|
||||
grid-auto-rows: 304px;
|
||||
grid-template-areas:
|
||||
"leftTop main main main main main main main main rightTop "
|
||||
"leftMiddle main main main main main main main main rightMiddle "
|
||||
"leftBottom BottomOne BottomTwo BottomThree BottomFour BottomFive BottomSix BottomSeven BottomEight rightBottom ";
|
||||
}
|
||||
|
||||
.main-area {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.leftTop {
|
||||
grid-area: leftTop;
|
||||
// justify-self: end;
|
||||
}
|
||||
|
||||
.leftMiddle {
|
||||
grid-area: leftMiddle;
|
||||
}
|
||||
|
||||
.leftBottom {
|
||||
grid-area: leftBottom;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
grid-area: rightTop;
|
||||
}
|
||||
|
||||
.rightMiddle {
|
||||
grid-area: rightMiddle;
|
||||
}
|
||||
|
||||
.rightBottom {
|
||||
grid-area: rightBottom;
|
||||
}
|
||||
|
||||
.bottom-1 {
|
||||
grid-area: BottomOne;
|
||||
}
|
||||
|
||||
.bottom-2 {
|
||||
grid-area: BottomTwo;
|
||||
}
|
||||
|
||||
.bottom-3 {
|
||||
grid-area: BottomThree;
|
||||
}
|
||||
|
||||
.bottom-4 {
|
||||
grid-area: BottomFour;
|
||||
}
|
||||
|
||||
.bottom-5 {
|
||||
grid-area: BottomFive;
|
||||
}
|
||||
|
||||
.bottom-6 {
|
||||
grid-area: BottomSix;
|
||||
}
|
||||
|
||||
.bottom-7 {
|
||||
grid-area: BottomSeven;
|
||||
}
|
||||
|
||||
.bottom-8 {
|
||||
grid-area: BottomEight;
|
||||
}
|
||||
</style>
|
||||
26
src/views/RightSide.vue
Normal file
26
src/views/RightSide.vue
Normal file
@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="right-side"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RightSide",
|
||||
props: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// import
|
||||
|
||||
.right-side {
|
||||
background: #000;
|
||||
height: 1080px;
|
||||
width: 1024px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user