mt-fe-group/dezhou-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update Header

Browse Source
This commit is contained in:
lb 2023-06-07 13:56:42 +08:00
parent 7c4903f463
commit f694c8ebf4
8 changed files with 61 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/digitbox1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/header-wings.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 KiB

BIN
src/assets/right-wing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

3
src/components/common/SmallBox2.vue
View File

@ -56,10 +56,11 @@ export default {
@import "../../assets/styles/functions";
.small-box-2 {
flex-shrink: 0;
padding: adjust(7px);
user-select: none;
width: adjust(w(744px));
height: adjust(h(320px));
height: adjust(h(366px));
display: flex;
background: url(../../assets/top-middle.png) no-repeat;
background-size: 100% 100%;

37
src/components/isolate-area-1/Area.vue
View File

@ -12,7 +12,7 @@
<div class="data runtime">
<span>运</span>
<span>行</span>
<span v-for="val, index in runtime" :key="index" class="digit">{{ val }}</span>
<span v-for="val, index in runtime" :key="index" :class="{ 'digit': true, 'dot': press == '.' ? true : false }">{{ val }}</span>
<span>天</span>
</div>
</DragabbleContainer>
@ -75,8 +75,9 @@ export default {
.isolate-area-1 {
display: flex;
color: $main-color;
background: lightyellow;
color: $main-color;
min-width: 300px;
align-items: center;
> *:not(:last-child) {
margin: {
@ -85,13 +86,31 @@ export default {
}
> .data {
background: lightgreen;
flex-shrink: 0;
font-family: zcoolqingkehuangyouti-Regular, sans-serif;
display: flex;
align-items: flex-end;
}
// > .data-center + .data-center {
// margin: {
// left: adjust(15px);
// }
// }
> .data > span:not(.dot) {
/** 边框 */
background: url('../../assets/digitbox1.png') no-repeat;
background-size: 100% 100%;
display: inline-block;
width: adjust(w(220px));
height: adjust(h(260px));
color: #0068ffaa;
font-size: h(200px);
line-height: h(600px);
text-align: center;
vertical-align: bottom;
}
> .data > span.digit {
/** 数字字体大小 */
color: #0071ff;
font-size: h(360px);
line-height: h(540px);
}
}
</style>

41
src/components/layout/Header.vue
View File

@ -6,7 +6,9 @@
</span>
<h1>凯盛晶华玻璃有限公司800t/d特种玻璃生产线大数据指挥中心</h1>
</div>
<span class="header--wing absolute company"></span>
<span class="header--wing absolute company">
设计单位: 中建材智能自动化研究院
</span>
<span class="header--wing absolute datetime">
{{ moment(today).format('YYYY.M.D dddd HH:mm:ss') }}
</span>
@ -66,16 +68,16 @@ export default {
@import "../../assets/styles/variables";
header {
background: url(../../assets/header.png) no-repeat, #f003;
background-size: 100% 100%;
background: url(../../assets/header-wings.png) left 12% top 72px / 95% no-repeat, url(../../assets/header.png) center / 100% 100% no-repeat, #f003;
// background-size: 100% 100%;
// background-size: cover;
background-position: bottom;
height: adjust(h(630px));
// background-position: bottom;
height: adjust(h(580px));
width: adjust(w(21120px));
display: grid;
place-items: center;
> div {
>div {
display: flex;
align-items: center;
margin-bottom: adjust(8px);
@ -100,26 +102,31 @@ header {
}
.header--wing {
top: adjust(h(128px));
left: 0;
bottom: adjust(10px);
height: adjust(h(78px));
height: adjust(h(130px));
}
.company {
margin-left: adjust(w(1460px));
width: adjust(w(1320px));
height: adjust(h(48px));
background: url("../../assets/company.png") center/cover no-repeat;
margin-left: adjust(w(3800px));
height: adjust(h(130px));
font-size: adjust(h(100px));
text-align: center;
color: lighten($main-color, 8);
letter-spacing: 2px;
// background: red;
// width: adjust(w(1320px));
// background: url("../../assets/company.png") center/cover no-repeat;
}
.datetime {
color: $main-color;
font-size: adjust(26px);
font-size: adjust(h(100px));
text-align: center;
// display: inline-block;
margin-left: adjust(w(6150px));
width: adjust(w(1320px));
height: adjust(h(48px));
background: url("../../assets/date.png") center/cover no-repeat;
margin-left: adjust(w(15520px));
height: adjust(h(130px));
// width: adjust(w(1764px));
// background: url("../../assets/date.png") center/cover no-repeat;
}
</style>

10
src/components/layout/Main.vue
View File

@ -179,14 +179,14 @@ main {
.area-one {
position: absolute;
top: adjust(170px);
left: adjust(1588px);
top: adjust(150px);
left: adjust(1340px);
}
.video-crash {
height: adjust(h(424px));
width: adjust(w(800px));
background: url(../../assets/tv.png) no-repeat;
// background: url(../../assets/tv.png) no-repeat;
background-size: 100%;
display: inline-block;
position: absolute;
@ -263,7 +263,7 @@ main {
}
.onekb, .onesp{
background: url(../../assets/tem-bottom.png) no-repeat;
// background: url(../../assets/tem-bottom.png) no-repeat;
}
.onekb {
top: adjust(300px);
@ -274,7 +274,7 @@ main {
left: adjust(520px)
}
.twokb, .twosp{
background: url(../../assets/tem-top.png) no-repeat;
// background: url(../../assets/tem-top.png) no-repeat;
}
.twokb {
top: adjust(-20px);

3
src/views/HomeView.vue
View File

@ -29,7 +29,8 @@ export default {
height: adjust($actual_height);
width: adjust($actual_width);
overflow: hidden;
background: url(../assets/bg.png) center/cover no-repeat ;
// background: url(../assets/bg.png) center/cover no-repeat ;
background: #cccc;
color: white;
display: flex;
flex-direction: column;