diff --git a/src/assets/css/homeScreen.scss b/src/assets/css/homeScreen.scss index b95f8e7..6fad13e 100644 --- a/src/assets/css/homeScreen.scss +++ b/src/assets/css/homeScreen.scss @@ -1,10 +1,10 @@ - -.bigScrenn{ +.bigScrenn { width: 100%; height: 100%; overflow: hidden; position: relative; background: #001022; + // 头部 .headBox { position: absolute; @@ -13,23 +13,27 @@ height: 85px; background: url('~@/assets/images/top-bg.png') no-repeat center center; background-size: 100% 100%; - .top{ + + .top { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 4px; - .top-left{ + + .top-left { display: flex; align-items: center; - .time{ + + .time { font-size: 24px; letter-spacing: 3px; color: #fff; margin: 0 36px 15px 20px; } - .qwbg{ + + .qwbg { width: 112px; height: 40px; text-align: center; @@ -41,68 +45,77 @@ cursor: pointer; } } - .top-center{ + + .top-center { height: 100%; color: #23FFFC; font-size: 48px; line-height: 88px; - font-family: "HANYILINGXINTIJIAN"; + font-family: "YSBTH"; position: absolute; left: 50%; transform: translateX(-50%); } - .top-right{ + + .top-right { display: flex; align-items: center; height: 100%; - .info{ + + .info { display: flex; align-items: center; - .text{ - color: #e6ffff; - font-size: 15px; - margin-left: 14px; - line-height: 23px; - .dept{ - max-width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + + .text { + color: #e6ffff; + font-size: 15px; + margin-left: 14px; + line-height: 23px; + + .dept { + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } } - .meun{ - margin-left: 30px; - margin-right: 4px; + + .meun { + margin-left: 30px; + margin-right: 4px; } - .el-dropdown-tools{ + + .el-dropdown-tools { + display: inline-block; + width: 40px; + height: 40px; + border: 1px solid rgb(20, 135, 180); + border-radius: 50%; + text-align: center; + color: #000; + margin-bottom: 9px; + + .el-dropdown-tools-n { display: inline-block; - width: 40px; - height: 40px; - border: 1px solid rgb(20, 135, 180); + width: 34px; + height: 34px; + border: 1px solid #fff; border-radius: 50%; + background: #9ec6fc; text-align: center; - color: #000; - margin-bottom: 9px; - .el-dropdown-tools-n{ - display: inline-block; - width: 34px; - height: 34px; - border: 1px solid #fff; - border-radius: 50%; - background: #9ec6fc; - text-align: center; - line-height: 32px; - margin-top: 2px; - padding-top: 2px; - box-sizing: border-box; - } + line-height: 32px; + margin-top: 2px; + padding-top: 2px; + box-sizing: border-box; + } } } } } + // 侧边菜单 - .asideBox{ + .asideBox { // display: flex; // flex-direction: column; position: absolute; @@ -115,9 +128,15 @@ } - .asideBoxL{ left: 0; } - .asideBoxR{ right: 0; } - .asideBottom{ + .asideBoxL { + left: 0; + } + + .asideBoxR { + right: 0; + } + + .asideBottom { display: flex; position: absolute; bottom: 0; @@ -126,12 +145,13 @@ height: calc((100vh - 85px)/3); overflow: hidden; margin: 0 4px; - .asideItem{ + + .asideItem { width: 50% !important; } } - .asideItem{ + .asideItem { height: 100%; flex: 1 0 0; margin: 0px 1px; @@ -139,7 +159,8 @@ background: #000; overflow: hidden; } - .mapResource{ + + .mapResource { position: absolute; left: 467px; // bottom: calc((100vh - 85px)/3 + 5px); @@ -147,32 +168,35 @@ } } -@mixin sircle{ +@mixin sircle { position: absolute; width: 35px; height: 509px; top: 210px; } -.leftSiecle{ +.leftSiecle { @include sircle; background: url('~@/assets/images/fold-bg.png') no-repeat center center; transform: rotate(180deg); background-size: 100% 100%; } -.rightSiecle{ + +.rightSiecle { @include sircle; background: url('~@/assets/images/fold-bg.png') no-repeat center center; background-size: 100% 100%; } -.topSiecle{ + +.topSiecle { @include sircle; background: url('~@/assets/images/fold-bg.png') no-repeat center center; background-size: 100% 100%; left: 50%; transform: translateX(-50%) rotate(-90deg); } -.bottomSiecle{ + +.bottomSiecle { position: absolute; right: 472px; background: #000; @@ -180,12 +204,14 @@ width: 26px; height: 23px; text-align: center; - img{ + + img { transform: rotate(90deg); width: 19px; - height:26px; + height: 26px; } - &.hideImg img{ + + &.hideImg img { transform: rotate(-90deg); } } @@ -202,6 +228,7 @@ height: 20px; line-height: 20px; vertical-align: middle; + &.blue { background-color: #0b9ff4; } @@ -230,6 +257,7 @@ background-color: #3ad2d4; } } + button.dp-default { border: 1px solid #3180ea; box-shadow: inset 0 0 18px #2b8ce6; @@ -254,6 +282,7 @@ button.dp-default { } } } + .dialogBox { // width: 360px; // position: absolute; @@ -266,6 +295,7 @@ button.dp-default { background-size: 100% 100%; z-index: 999; border-radius: 4px; + >.title { height: 38px; line-height: 38px; @@ -275,17 +305,20 @@ button.dp-default { margin-bottom: 6px; justify-content: space-between; align-items: center; - background-image: linear-gradient(to right,rgba(1,127,216,1),rgba(4,56,131,.5),rgba(1,130,218,.0)); + background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0)); + .close { font-size: 20px; font-weight: 200; cursor: pointer; margin-right: 10px; } + .mc { margin-left: 10px; } } + .infoBox { border: none; position: relative; @@ -317,8 +350,9 @@ button.dp-default { padding-top: 8px; padding-bottom: 12px; margin-bottom: 10px; + button { margin: 0 2px; } } -} +} \ No newline at end of file diff --git a/src/assets/css/homeScreens.scss b/src/assets/css/homeScreens.scss index 5e87588..3039797 100644 --- a/src/assets/css/homeScreens.scss +++ b/src/assets/css/homeScreens.scss @@ -1,28 +1,33 @@ -@mixin textColor ($color1,$color2){ - background-image: linear-gradient(0deg,$color1 30%, $color2 100%); +@mixin textColor ($color1, $color2) { + background-image: linear-gradient(0deg, $color1 30%, $color2 100%); -webkit-background-clip: text; - -webkit-text-fill-color:transparent ; + -webkit-text-fill-color: transparent; } -@mixin degtextColor ($deg:0deg,$color1,$th1:0%,$color2,$th2:100%){ - background-image: linear-gradient($deg,$color1 $th1, $color2 $th2); - background-image: linear-gradient(to bottom, $color1 0%, $color1 $th1,$color2 $th1, $color2 $th2); + +@mixin degtextColor ($deg:0deg, $color1, $th1:0%, $color2, $th2:100%) { + background-image: linear-gradient($deg, $color1 $th1, $color2 $th2); + background-image: linear-gradient(to bottom, $color1 0%, $color1 $th1, $color2 $th1, $color2 $th2); -webkit-background-clip: text; - -webkit-text-fill-color:transparent ; + -webkit-text-fill-color: transparent; } + .bigScrenn { height: 100vh; width: 100vw; overflow: hidden; background: #001022; - position: relative;color: #fff; + position: relative; + color: #fff; + .headBox { position: absolute; height: 95px; width: 100%; background: #001022; top: 0; - .top{ + + .top { display: flex; justify-content: space-between; width: 100%; @@ -30,98 +35,111 @@ background: url('~@/assets/my/top.png') no-repeat center center; background-size: 100% 100%; padding: 0 4px; - .top-left{ - position: relative; - display: flex; - margin-top: 30px; - .time{ - position: absolute; - left: 60px; - white-space: nowrap; + + .top-left { + position: relative; + display: flex; + margin-top: 30px; + + .time { + position: absolute; + left: 60px; + white-space: nowrap; + font-size: 20px; + font-family: "YSBTH"; + @include textColor(#C3EDFF, #EFFAFF); + } + + .qwbox { + position: absolute; + left: 360px; + width: 168px; + height: 36px; + margin-left: 20px; + line-height: 36px; + text-align: center; + background: url('~@/assets/my/Group_1.png') no-repeat center center; + background-size: 100% 100%; + + span { font-size: 20px; font-family: "YSBTH"; - @include textColor(#C3EDFF,#EFFAFF); - } - .qwbox{ - position: absolute; - left: 360px; - width: 168px; - height: 36px; - margin-left: 20px; - line-height: 36px; - text-align: center; - background: url('~@/assets/my/Group_1.png') no-repeat center center; - background-size: 100% 100%; - span{ - font-size: 20px; - font-family: "YSBTH"; - @include textColor(#C3EDFF,#EFFAFF); - } + @include textColor(#C3EDFF, #EFFAFF); } + } } - .top-center{ + + .top-center { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: "YSBTH"; font-size: 50px; - @include textColor(#C3EDFF,#EFFAFF); + @include textColor(#C3EDFF, #EFFAFF); letter-spacing: 2px; } - .top-right{ + + .top-right { + display: flex; + align-items: center; + margin-right: 80px; + + .info { display: flex; align-items: center; - margin-right: 80px; - .info{ - display: flex; - align-items: center; - .text{ - color: #e6ffff; - font-size: 15px; - margin-left: 14px; - line-height: 23px; - .dept{ - max-width: 200px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } + + .text { + color: #e6ffff; + font-size: 15px; + margin-left: 14px; + line-height: 23px; + + .dept { + max-width: 200px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } - .meun{ - width: 110px; + } + + .meun { + width: 110px; + height: 34px; + text-align: center; + line-height: 34px; + margin-right: 4px; + background: url('~@/assets/images/bg111.png') no-repeat center center; + background-size: 100% 100%; + } + + .el-dropdown-tools { + display: inline-block; + width: 40px; + height: 40px; + border: 1px solid rgb(20, 135, 180); + border-radius: 50%; + text-align: center; + + .el-dropdown-tools-n { + display: inline-block; + width: 34px; height: 34px; + border: 1px solid #fff; + border-radius: 50%; + background: #9ec6fc; text-align: center; - line-height: 34px; - margin-right: 4px; - background: url('~@/assets/images/bg111.png') no-repeat center center; - background-size: 100% 100%; - } - .el-dropdown-tools{ - display: inline-block; - width: 40px; - height: 40px; - border: 1px solid rgb(20, 135, 180); - border-radius: 50%; - text-align: center; - .el-dropdown-tools-n{ - display: inline-block; - width: 34px; - height: 34px; - border: 1px solid #fff; - border-radius: 50%; - background: #9ec6fc; - text-align: center; - line-height: 32px; - margin-top: 2px; - padding-top: 2px; - box-sizing: border-box; - } + line-height: 32px; + margin-top: 2px; + padding-top: 2px; + box-sizing: border-box; } + } } } } + .asideBox { position: absolute; top: 95px; @@ -130,42 +148,48 @@ background: #001022; z-index: 2; padding: 0 10px; - .boder-small{ + + .boder-small { height: calc((100%/3) - 5px); background: url('~@/assets/my/border-s.png') no-repeat center center; background-size: 100% 100%; margin-bottom: 5px; } - .boder-middle{ + + .boder-middle { height: calc((100% / 2) - 5px); background: url('~@/assets/my/border-m.png') no-repeat center center; background-size: 100% 100%; margin-bottom: 5px; } - .boder-big{ + + .boder-big { height: 100%; background: url('~@/assets/my/border-m.png') no-repeat center center; background-size: 100% 100%; } - .boder-top{ + + .boder-top { height: 356px; background: url('~@/assets/my/border-s.png') no-repeat center center; background-size: 100% 100%; } - .boder-bottom{ + + .boder-bottom { margin-top: 5px; height: calc(100% - 360px); background: url('~@/assets/my/border-m.png') no-repeat center center; background-size: 100% 100%; } - .boxContent{ + .boxContent { height: 100%; color: #fff; padding: 0px 0px 10px 0px; box-sizing: border-box; overflow: hidden; - .box-title{ + + .box-title { font-size: 20px; color: #e6ffff; letter-spacing: 2px; @@ -174,22 +198,24 @@ position: relative; top: -5px; } - - .boxInfo{ + + .boxInfo { height: calc(100% - 30px); margin-top: 8px; padding: 10px; box-sizing: border-box; } - .cntBoxInfo{ + + .cntBoxInfo { height: calc(100% - 46px); overflow: hidden; overflow-y: auto; - padding:10px ; + padding: 10px; } } } - .asideBoxfooter{ + + .asideBoxfooter { position: fixed; bottom: 0; left: 50%; @@ -200,10 +226,12 @@ padding: 0 5px 5px; box-sizing: border-box; z-index: 9; - .mapbtnsBox{ + + .mapbtnsBox { height: 40px; position: relative; - .down{ + + .down { position: absolute; width: 20px; height: 38px; @@ -213,28 +241,33 @@ transform: rotate(-90deg); cursor: pointer; } - .updown{ + + .updown { transform: rotate(90deg); } } - .cntBox{ + + .cntBox { display: flex; height: calc(100% - 36px); background: #000; padding: 0 5px 5px; box-sizing: border-box; - .left{ + + .left { width: 33%; margin-right: 1%; background: url('~@/assets/my/border-s.png') no-repeat center center; background-size: 100% 100%; } - .right{ + + .right { width: 66%; background: url('~@/assets/my/bg-h.png') no-repeat center center; background-size: 100% 100%; } - .box-title{ + + .box-title { font-size: 20px; color: #e6ffff; letter-spacing: 2px; @@ -243,29 +276,34 @@ position: relative; top: -2px; } - .boxContent{ + + .boxContent { height: 100%; - .boxInfo{ + + .boxInfo { height: calc(100% - 33px); overflow: hidden; - padding:10px; + padding: 10px; box-sizing: border-box; } } } - + } + .addBox { position: absolute; top: 95px; pointer-events: auto; cursor: pointer; - .imgBox{ + + .imgBox { width: 111px; height: 112px; background: url('~@/assets/images/qwddd.png') no-repeat center center; text-align: center; - span{ + + span { display: inline-block; width: 30px; margin-top: 36px; @@ -273,26 +311,30 @@ } } } + @mixin sircle { position: absolute; width: 73px; height: calc(100vh - 90px); top: 90px; } - .leftSiecle{ + + .leftSiecle { @include sircle; background: url('~@/assets/my/left-arrow.png') no-repeat center center; background-size: 100% 100%; } - .rightSiecle{ + + .rightSiecle { @include sircle; right: 370px; background: url('~@/assets/my/right-arrow.png') no-repeat center center; background-size: 100% 100%; } - + } + .dialogBox { padding: 0 0 10px 0; color: #fff; @@ -301,6 +343,7 @@ background-size: 100% 100%; z-index: 999; border-radius: 4px; + >.title { height: 38px; line-height: 38px; @@ -310,17 +353,20 @@ // margin-bottom: 6px; justify-content: space-between; align-items: center; - background-image: linear-gradient(to right,rgba(1,127,216,1),rgba(4,56,131,.5),rgba(1,130,218,.0)); + background-image: linear-gradient(to right, rgba(1, 127, 216, 1), rgba(4, 56, 131, .5), rgba(1, 130, 218, .0)); + .close { font-size: 20px; font-weight: 200; cursor: pointer; margin-right: 10px; } + .mc { margin-left: 10px; } } + .infoBox { border: none; position: relative; @@ -351,11 +397,13 @@ padding-top: 8px; padding-bottom: 12px; margin-bottom: 10px; + button { margin: 0 2px; } } } + button.dp-default { border: 1px solid #3180ea; box-shadow: inset 0 0 18px #2b8ce6; @@ -393,6 +441,7 @@ button.dp-default { height: 20px; line-height: 20px; vertical-align: middle; + &.blue { background-color: #0b9ff4; } @@ -422,7 +471,7 @@ button.dp-default { } } -.xlStatus{ +.xlStatus { position: absolute; right: -25px; top: 9px; @@ -433,6 +482,15 @@ button.dp-default { line-height: 24px; transform: rotate(45deg) } -.line{ background: #00bc65; } -.lineing{ background: #AB0F0B; } -.unline{ background: #808080; } + +.line { + background: #00bc65; +} + +.lineing { + background: #AB0F0B; +} + +.unline { + background: #808080; +} \ No newline at end of file diff --git a/src/assets/css/layout.scss b/src/assets/css/layout.scss index d4cd9a1..058ed4e 100644 --- a/src/assets/css/layout.scss +++ b/src/assets/css/layout.scss @@ -4,8 +4,8 @@ header { display: flex; justify-content: space-between; align-items: center; - // background: url('~@/assets/images/header.png') no-repeat center center ; - background: linear-gradient(-270deg, #00Adf7, #12c299); + background: url('~@/assets/images/topas.png') no-repeat center center; + // background: linear-gradient(-270deg, #00Adf7, #12c299); background-size: 100% 100%; .right { @@ -19,12 +19,15 @@ header { box-sizing: border-box; margin-right: 25px; border-radius: 30px; - img{ + + img { width: 40px; } + .detail { display: flex; cursor: pointer; + .hd { white-space: nowrap; color: #ffffff; @@ -83,7 +86,7 @@ header { } .dialog::-webkit-scrollbar-track { - background-color: #e9e9e9; + background-color: #e9e9e9; } .dialog::-webkit-scrollbar { @@ -106,6 +109,7 @@ header { background-color: #ffffff; z-index: 998; color: #131313; + .zqjl { box-sizing: border-box; padding: 40px 40px 20px; @@ -146,17 +150,17 @@ header { box-sizing: border-box; background-color: #052f57; - > span { + >span { position: absolute; left: 0px; top: -28px; } - > div { + >div { padding: 8px 16px; color: rgb(45, 74, 238); - > span { + >span { color: #ccc; } } @@ -169,7 +173,8 @@ header { display: flex; justify-content: space-between; line-height: 48px; - .title{ + + .title { color: #131313; } } @@ -183,7 +188,7 @@ header { &::v-deep .el-form-item--default { // width: 23%; padding-bottom: 10px; - margin: 0 1%;//影响到了全局,如果要修改就在文件下修改 + margin: 0 1%; //影响到了全局,如果要修改就在文件下修改 } &::v-deep .el-form-item--default.two { @@ -230,6 +235,7 @@ header { padding-left: 10px; box-sizing: border-box; margin-bottom: 4px; + &::after { content: ""; position: absolute; @@ -251,6 +257,7 @@ header { border: solid #6fb2ff; border-width: 2px 2px 0 0; } + .title { font-size: 18px; color: #000; @@ -264,6 +271,7 @@ header { .tabBox { width: 100%; position: relative; + .el-table--fit { position: absolute; top: 0; @@ -272,6 +280,7 @@ header { height: calc(100% - 100px); overflow: auto; } + .fenye { border: solid #eeeeee; border-width: 0 1px 1px 1px; @@ -281,9 +290,11 @@ header { } } } + .app-main .titleBox::before { border: none; } + .app-main .titleBox::after { border: none; } @@ -299,6 +310,7 @@ header { display: flex; margin-top: 15px; height: calc(100vh - 148px); + .treeBox { flex-shrink: 0; height: 100%; @@ -322,22 +334,27 @@ header { } } -.content-box-sun{ +.content-box-sun { display: flex; - .org-box{ + + .org-box { flex: 1; + .org-content-box { width: 95%; + .org-search-box { display: flex; } - .tree-box{ + + .tree-box { height: 750px; overflow: auto; } } } - .right-box-sun{ + + .right-box-sun { flex: 4; } } @@ -348,6 +365,7 @@ header { justify-content: space-between; position: relative; z-index: 2; + .title { height: 60px; line-height: 60px; @@ -358,4 +376,4 @@ header { .btnBox { margin-top: 14px; } -} +} \ No newline at end of file diff --git a/src/assets/images/aside.png b/src/assets/images/aside.png new file mode 100644 index 0000000..44f61a2 Binary files /dev/null and b/src/assets/images/aside.png differ diff --git a/src/assets/images/topas.png b/src/assets/images/topas.png new file mode 100644 index 0000000..838e73b Binary files /dev/null and b/src/assets/images/topas.png differ diff --git a/src/components/GdMap/index.vue b/src/components/GdMap/index.vue index d74f3a8..65f2874 100644 --- a/src/components/GdMap/index.vue +++ b/src/components/GdMap/index.vue @@ -1,7 +1,13 @@