root/screen-lnsh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页样式

Browse Source
This commit is contained in:
caill
2023-06-06 00:15:25 +08:00
parent 2863011861
commit 37908ddd9a
5 changed files with 571 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/reset.css
View File

@@ -83,8 +83,8 @@ html, body {
height: 100%;
/* min-width: 1440px;
min-height: 789px; */
/* width: 1920px;
width: 3840px;
/* width: 1920px; */
/* width: 3840px;
height: 1080px; */
}

BIN
src/images/workshop/robot_4_gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

263
src/pages/modules/homepage/one.vue
View File

@@ -41,7 +41,7 @@
</div>
</div>
<div class="machine_wrap hlj_wrap">
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine hlj">
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]" :key="i" class="sh_machine hlj">
<img src="../../../images/workshop/hlj.png" alt="">
</div>
</div>
@@ -149,8 +149,14 @@
</div>
</div>
<div class="machine_wrap cyj_wrap_3">
<div class="sh_machine cyj_1">
<!-- <div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_2_gray.png" alt="">
</div> -->
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_4.png" alt="">
@@ -657,6 +663,7 @@ export default {
@import '~@css/mixin'
.n_container
_wh(100%, 100%)
overflow hidden
.n_header
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
@@ -707,6 +714,7 @@ export default {
position relative
z-index 1
_wh(100%, 100%)
top -5%
// _bis('../../../images/workshop/workshop_l.png')
.machine_wrap
position absolute
@@ -841,15 +849,12 @@ export default {
.yyj_wrap_1
width 16%
height 14%
top 5.5%
left 48%
top 5%
left 43%
transform scale(0.9)
.yyj
width 28.22%
height 42%
left 30.5%
img
_wh(100%, 100%)
.wzm
_wh(50.9%, 46.95%)
background-color #d9d9d9
@@ -873,35 +878,25 @@ export default {
transform rotate(270deg)
.kongtuopan_1
width 15%
height 13%
top auto
left auto
bottom 6%
bottom 20%
right 30%
img
_wh(100%, 100%)
.kongtuopan_2
width 15%
height 13%
top auto
left auto
bottom 6%
bottom 20%
right 14%
transform rotate(180deg)
img
_wh(100%, 100%)
.yyj_wrap_2
width 16%
height 14%
top 19%
left 48%
left 43%
transform scale(0.9)
.yyj
width 28.22%
height 42%
left 30.5%
img
_wh(100%, 100%)
.wzm
_wh(50.9%, 46.95%)
background-color #d9d9d9
@@ -925,183 +920,129 @@ export default {
transform rotate(90deg)
.kongtuopan_1
width 15%
height 13%
top 44%
top 52%
left auto
right 15%
right 6%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_2
width 15%
height 13%
top auto
left auto
bottom -10%
right 15%
right 17%
transform rotate(-90deg)
img
_wh(100%, 100%)
.cyj_wrap_1
width 11%
height 14%
top 37%
left 52.5%
height 9%
top 35%
left 48.3%
.cyj_1
width 40%
height 48%
img
_wh(100%, 100%)
width 20%
.cyj_2
width 40%
height 48%
top auto
bottom 0
img
_wh(100%, 100%)
width 20%
top 100%
.weilan
_wh(60%, 70%)
width 70%
left auto
right 0
top 15%
img
_wh(100%, 100%)
top 55%
.robot
width 21%
top 46%
left auto
right 17%
width: 20%;
top: 84%;
left: auto;
right: 17%;
.kongtuopan_1
width 15%
height 13%
top 29%
left auto
right 35%
img
_wh(100%, 100%)
width: 20%;
top: 62%;
left: auto;
right: 35%;
.kongtuopan_2
width 15%
height 13%
top 29%
left auto
right 12%
img
_wh(100%, 100%)
width: 20%;
top: 62%;
left: auto;
right: 5%;
.kongtuopan_3
width 15%
height 13%
top auto
left auto
right 35%
bottom 20%
img
_wh(100%, 100%)
width: 20%;
top: 103%;
left: auto;
right: 35%;
.kongtuopan_4
width 15%
height 13%
top auto
left auto
right 12%
bottom 20%
img
_wh(100%, 100%)
width: 20%;
top: 103%;
left: auto;
right: 5%;
.cyj_wrap_2
width 11%
height 14%
top 52%
left 52.5%
height 9%
top 53%
left 48.5%
.cyj_1
width 40%
height 48%
img
_wh(100%, 100%)
width 20%
.cyj_2
width 40%
height 48%
top auto
bottom 0
img
_wh(100%, 100%)
width 20%
top 100%
.kongtuopan_1
width 15%
height 13%
top 6%
width 20%
top 20%
left 44%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_2
width 15%
height 13%
top 31%
width 20%
top 68%
left 44%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_3
width 15%
height 13%
top auto
bottom 31%
width 20%
top 120%
left 44%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_4
width 15%
height 13%
top auto
bottom 4%
width 20%
top 160%
left 44%
transform rotate(90deg)
img
_wh(100%, 100%)
.cyj_wrap_3
width 11%
height 9%
top 69%
left 52.5%
top 71%
left 48.5%
// .cyj_1
// width: 26%;
// top: 15%;
// left: 8%;
.cyj_1
width 37%
height 95%
img
_wh(100%, 100%)
width 20%
.cyj_2
width 20%
top 100%
.weilan
_wh(60%, 100%)
width 70%
left auto
right 0
img
_wh(100%, 100%)
.robot
width 21%
top 36%
left 46%
.kongtuopan_1
width 15%
height 13%
top 29%
.robot
width: 18%;
top: 67%;
left: 40%;
.kongtuopan_1
width 20%
top 65%
left auto
right 13%
right 11%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_2
width 15%
height 13%
top auto
bottom 9%
left auto
right 13%
width 20%
top: 117%;
left: auto;
right: 11%;
transform rotate(90deg)
img
_wh(100%, 100%)
.cyj_wrap_4
top 80%
top 89%
.yyj_wrap_3
width 16%
height 14%
top 19%
right 8%
right 13%
transform scale(0.9)
.yyj
width 28.22%
@@ -1117,37 +1058,29 @@ export default {
bottom 0
.cyj_wrap_5
left auto
right 12%
right 17%
.cyj_wrap_6
left auto
right 12%
top 52%
right 17%
top 53%
.cyj_wrap_7
left auto
right 12%
top 69%
right 17%
top 76%
.cyj_wrap_8
left auto
right 12%
top 80%
right 17%
top 89%
.kongtuopan_3
width 15%
height 13%
top auto
bottom 31%
left -20%
width 20%
top 120%
left -30%
transform rotate(90deg)
img
_wh(100%, 100%)
.kongtuopan_4
width 15%
height 13%
top auto
bottom 4%
left -20%
width 20%
top 160%
left -30%
transform rotate(90deg)
img
_wh(100%, 100%)
.lz_wrap_4
width 2%
height 63%

12
src/pages/modules/homepage/two.vue
View File

@@ -103,7 +103,7 @@
<img src="../../../images/workshop/mtp.png" alt="">
</div>
<div class="sh_machine robot_1">
<img src="../../../images/workshop/robot_4.png" alt="">
<img src="../../../images/workshop/robot_4_gray.png" alt="">
</div>
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_5.png" alt="">
@@ -118,7 +118,7 @@
<img src="../../../images/workshop/guntssj.png" alt="">
</div>
<div class="sh_machine robot_2">
<img src="../../../images/workshop/robot_4.png" alt="">
<img src="../../../images/workshop/robot_4_gray.png" alt="">
</div>
</div>
<div class="machine_wrap liu_wrap">
@@ -458,6 +458,7 @@ export default {
@import '~@css/mixin'
.n_container
_wh(100%, 100%)
overflow hidden
.n_header
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
@@ -509,6 +510,7 @@ export default {
position relative
z-index 1
_wh(100%, 100%)
top -5%
// _bis('../../../images/workshop/workshop_r.png')
.scroll_wrap
_wh(100%, 100%)
@@ -596,10 +598,10 @@ export default {
img
_wh(100%, auto)
.mtp_wrap_2
top 30%
top 35%
.gtssj_wrap_1
width 2.5%
top 30%
top 35%
left 8%
.gtssj
width 100%
@@ -607,7 +609,7 @@ export default {
_wh(100%, auto)
.cpj_wrap_1
width 4.5%
top 33%
top 38%
left 6.5%
.cpj
width 100%

464
src/pages/modules/takeshape/one.vue
View File

@@ -0,0 +1,464 @@
<template>
<div class="n_container">
<div class="n_header">
<div class="n_header_h1">
<h1>晟华生产数</h1>
</div>
</div>
<div class="n_body_container">
<div class="n_body_container_wraper">
<div class="status_wrap">
<div class="status_item">
<div class="status_tip green"></div>
<div class="status_name">运行中/困料中</div>
</div>
<div class="status_item">
<div class="status_tip yellow"></div>
<div class="status_name">待机/困料完成</div>
</div>
<div class="status_item">
<div class="status_tip gray"></div>
<div class="status_name">关机</div>
</div>
<div class="status_item">
<div class="status_tip red"></div>
<div class="status_name">故障/困料超时</div>
</div>
</div>
<div class="center_content">
<div class="machine_wrap yyj_wrap_1">
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_2.png" alt="">
</div>
<div class="sh_machine jzjcss">
<img src="../../../images/workshop/jzjcss_yellow.png" alt="">
</div>
<div class="sh_machine yyj">
<img src="../../../images/workshop/yyj_gray.png" alt="">
</div>
<div class="sh_machine wzm"></div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine robot">
<img src="../../../images/workshop/robot_1.png" alt="">
</div>
</div>
<div class="machine_wrap yyj_wrap_2">
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_1.png" alt="">
</div>
<div class="sh_machine jzjcss">
<img src="../../../images/workshop/jzjcss_yellow.png" alt="">
</div>
<div class="sh_machine yyj">
<img src="../../../images/workshop/yyj_gray.png" alt="">
</div>
<div class="sh_machine wzm"></div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine robot">
<img src="../../../images/workshop/robot_1.png" alt="">
</div>
</div>
<div class="machine_wrap cyj_wrap_1">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_3.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_3">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_4">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine robot">
<img src="../../../images/workshop/robot_2.png" alt="">
</div>
</div>
<div class="machine_wrap cyj_wrap_2">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_3">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_4">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
</div>
<div class="machine_wrap cyj_wrap_3">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_2_gray.png" alt="">
</div>
<div class="sh_machine weilan">
<img src="../../../images/workshop/weilan_4.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine robot">
<img src="../../../images/workshop/robot_3.png" alt="">
</div>
</div>
<div class="machine_wrap cyj_wrap_2 cyj_wrap_4">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine kongtuopan_1">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_2">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_3">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
<div class="sh_machine kongtuopan_4">
<img src="../../../images/workshop/ktp.png" alt="">
</div>
</div>
<div class="machine_wrap yyj_wrap_3">
<div class="sh_machine yyj">
<img src="../../../images/workshop/yyj_gray.png" alt="">
</div>
<div class="sh_machine wzm"></div>
</div>
<div class="machine_wrap cyj_wrap_1 cyj_wrap_5">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
</div>
<div class="machine_wrap cyj_wrap_1 cyj_wrap_6">
<div class="sh_machine cyj_1">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
<div class="sh_machine cyj_2">
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style lang="stylus" scoped>
@import '~@css/mixin'
.n_container
_wh(100%, 100%)
.n_header
_wh(100%, 8%)
_bis('../../../images/bg_header.jpg')
.n_header_h1
_wh(100%, 100%)
_fj(row, flex-end)
_bis('../../../images/top_left.png',auto,,right)
h1
_font(32px, 1, #fff,,right)
padding-bottom 2%
letter-spacing 6px
font-family "阿里妈妈数黑体" !important
margin-right -3px
.n_body_container
_wh(100%, 92%)
padding 40px 0 20px 20px
_bis('../../../images/bg_content_l.jpg')
.n_body_container_wraper
_wh(100%, 100%)
position relative
z-index 0
.center_content
_wh(100%, 100%)
position relative
z-index 0
.status_wrap
position absolute
top -26px
right 40px
z-index 1
_fj(row)
.status_item
_fj(row)
+.status_item
margin-left 20px
.status_tip
_wh(15px, 15px)
border-radius 50%
margin-right 10px
box-shadow 0px 0px 4px 0px rgba(33,121,195,0.88)
.status_name
_font(16px, 1, #fff)
.green
background-color $green2
.yellow
background-color $yellow
.gray
background-color $gray1
.red
background-color $orange
.machine_wrap
position absolute
z-index 2
.sh_machine
position absolute
top 0
left 0
z-index 3
width 100%
img
position absolute
top 0
left 0
z-index 4
_wh(100%, auto)
.yyj_wrap_1
width 16%
height 14%
top 20%
right -1%
transform rotate(90deg)
.yyj
width 28.22%
height 42%
left 30.5%
img
_wh(100%, 100%)
.wzm
_wh(50.9%, 46.95%)
background-color #d9d9d9
top auto
bottom 0
.jzjcss
width 22%
left 51%
top 11%
.weilan
width 49.1%
height 73%
left auto
right 0
top auto
bottom 0
.robot
width: 26%;
left: 53%;
top: 62%;
.kongtuopan_1
width: 10%;
top: 113%;
left: 60%;
.kongtuopan_2
width 10%
top: 113%;
left: 72%;
.yyj_wrap_2
width 16%
height 14%
top 20%
right 12%
transform rotate(90deg)
.yyj
width 28.22%
height 42%
left 30.5%
img
_wh(100%, 100%)
.wzm
_wh(50.9%, 46.95%)
background-color #d9d9d9
top auto
bottom 0
.jzjcss
width 22%
left 51%
top 11%
.weilan
width: 34%;
height: 73%;
left: 53%;
top 27%
.robot
width 24%
left 72%
top 65%
transform rotate(90deg)
.kongtuopan_1
width 10%
top: 53%;
left: 76%;
transform rotate(90deg)
.kongtuopan_2
width 10%
top: 113%;
left: 69%;
transform rotate(-90deg)
.cyj_wrap_1
width 11%
height 20%
top 25%
right 30%
transform rotate(90deg)
.cyj_1
width 25%
top 0
.cyj_2
width 25%
top 100%
.weilan
width 70%
left auto
right 0
top 55%
.robot
width: 18%;
top: 77%;
left: auto;
right: 19%;
.kongtuopan_1
width 14.5%
top 60%
left auto
right 35%
.kongtuopan_2
width 14.5%
top 60%
left auto
right 12%
.kongtuopan_3
width 14.5%
top 96%
left auto
right 35%
.kongtuopan_4
width 14.5%
top 96%
left auto
right 12%
.cyj_wrap_2
width 11%
height 20%
top 25%
left 40%
transform rotate(90deg)
.cyj_1
width 25%
top 0
.cyj_2
width 25%
top 100%
.kongtuopan_1
width 14.5%
top: 20%;
left: 54%;
transform rotate(90deg)
.kongtuopan_2
width 14.5%
top: 50%;
left: 54%;
transform rotate(90deg)
.kongtuopan_3
width 14.5%
top 120%
left: 54%;
transform rotate(90deg)
.kongtuopan_4
width 14.5%
top 150%
left: 54%;
transform rotate(90deg)
.cyj_wrap_3
width 11%
height 9%
top: 28%;
left: 22%;
transform rotate(90deg)
.cyj_1
width 37%
.weilan
width 60%
left auto
right 0
top 2%
.robot
width 21%
top 36%
left 46%
.kongtuopan_1
width 14.5%
top: 41%;
left: auto;
right: 8%;
transform rotate(90deg)
.kongtuopan_2
width 14.5%
top auto
bottom: -7%;
left: auto;
right: 8%;
transform rotate(90deg)
.cyj_wrap_4
left 8%
.yyj_wrap_3
width 16%
height 14%
top: 62%;
right: 12%;
transform rotate(90deg)
.yyj
width 28.22%
left -7.5%
transform rotate(180deg)
height 42%
img
_wh(100%, 100%)
.wzm
_wh(50.9%, 46.95%)
background-color #d9d9d9
top auto
bottom 0
.cyj_wrap_5
left auto
right 30%
top 53.6%
.cyj_wrap_6
left auto
right 49%
top 53.6%
</style>