Главная Обзор Помощь
Регистрация Вход
kprxl
/
systemIntegration
Следить 1
В избранное 0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

系统集成页面第一版制作完成

罗浩军 2 лет назад
Сommit
13c6ebb369
53 измененных файлов с 2475 добавлено и 0 удалено
Разделённый вид Показать статистику Diff
  1. 0 0
      .gitignore
  2. 60 0
      index.html
  3. 374 0
      static/css/backgroundLayer.css
  4. 55 0
      static/css/earth.css
  5. 678 0
      static/css/iconFamily.css
  6. 120 0
      static/css/index.css
  7. 539 0
      static/css/navLinkContent.css
  8. 220 0
      static/css/weatherTime.css
  9. 6 0
      static/externals/vue/vue.min.js
  10. BIN
      static/fonts/Digital-7Mono.TTF
  11. BIN
      static/fonts/PangMenZhengDao.ttf
  12. BIN
      static/fonts/YouSheBiaoTiHei-2.ttf
  13. BIN
      static/images/background.png
  14. BIN
      static/images/earth.png
  15. BIN
      static/images/earthOneCircle.png
  16. BIN
      static/images/earthTwoCircle.png
  17. BIN
      static/images/icon-map.png
  18. BIN
      static/images/icon-users.png
  19. BIN
      static/images/navEight.png
  20. BIN
      static/images/navEightHover.png
  21. BIN
      static/images/navEightIcon.png
  22. BIN
      static/images/navEightIconHover.png
  23. BIN
      static/images/navFive.png
  24. BIN
      static/images/navFiveHover.png
  25. BIN
      static/images/navFiveIcon.png
  26. BIN
      static/images/navFiveIconHover.png
  27. BIN
      static/images/navFour.png
  28. BIN
      static/images/navFourHover.png
  29. BIN
      static/images/navFourIcon.png
  30. BIN
      static/images/navFourIconHover.png
  31. BIN
      static/images/navOne.png
  32. BIN
      static/images/navOneHover.png
  33. BIN
      static/images/navOneIcon.png
  34. BIN
      static/images/navOneIconHover.png
  35. BIN
      static/images/navSeven.png
  36. BIN
      static/images/navSevenHover.png
  37. BIN
      static/images/navSevenIcon.png
  38. BIN
      static/images/navSevenIconHover.png
  39. BIN
      static/images/navSix.png
  40. BIN
      static/images/navSixHover.png
  41. BIN
      static/images/navSixIcon.png
  42. BIN
      static/images/navSixIconHover.png
  43. BIN
      static/images/navThree.png
  44. BIN
      static/images/navThreeHover.png
  45. BIN
      static/images/navThreeIcon.png
  46. BIN
      static/images/navThreeIconHover.png
  47. BIN
      static/images/navTwo.png
  48. BIN
      static/images/navTwoHover.png
  49. BIN
      static/images/navTwoIcon.png
  50. BIN
      static/images/navTwoIconHover.png
  51. BIN
      static/images/topTitle.png
  52. 154 0
      static/js/index.js
  53. 269 0
      view.html

+ 0 - 0
.gitignore
Просмотреть файл


+ 60 - 0
index.html
Просмотреть файл 

@@ -0,0 +1,60 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>许昌市建安区中州水务有限公司</title>
 
+
 
+    <!-- <link href="static/css/index.css" rel="stylesheet">
 
+
 
+    <link href="static/css/earth.css" rel="stylesheet">
 
+
 
+    <link href="static/css/navLinkContent.css" rel="stylesheet">
 
+
 
+    <link href="static/css/backgroundLayer.css" rel="stylesheet">
 
+
 
+    <link href="static/css/iconFamily.css" rel="stylesheet">
 
+
 
+    <link href="static/css/weatherTime.css" rel="stylesheet"> -->
 
+
 
+    <style>
 
+        /* html,
 
+        html body {
 
+            height: 100%;
 
+            width: 100%;
 
+        } */
 
+        body {
 
+            margin: 0;
 
+            overflow: hidden;
 
+        }
 
+
 
+        .test1 {
 
+            width: 100%;
 
+            height: 100%;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            overflow: hidden;
 
+            background: radial-gradient(#055fd1, #04345c, #001f34);
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app" class="assembly-html-body">
 
+        <div class="test1">
 
+            <iframe src="view.html" frameborder="0" allowfullscreen="allowfullscreen"
 
+                :style="{flex: '0 0 1920px', height: '1080px', transform: 'scale('+scaleNum+')'}"></iframe>
 
+        </div>
 
+    </div>
 
+
 
+    <script src="./static/externals/vue/vue.min.js"></script>
 
+    <script src="./static/js/index.js"></script>
 
+</body>
 
+
 
+</html>

+ 374 - 0
static/css/backgroundLayer.css
Просмотреть файл 

@@ -0,0 +1,374 @@
 
+.assembly-html-body {
 
+    margin: 0;
 
+    padding: 0;
 
+    border: 0;
 
+    overflow: auto
 
+}
 
+
 
+.assembly-html-body {
 
+    display: block;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    width: 100%;
 
+    height: 100%
 
+}
 
+
 
+.center-assembly {
 
+    overflow: hidden;
 
+    display: flex;
 
+    align-items: center;
 
+}
 
+
 
+.assembly-page {
 
+    display: block;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    overflow: hidden;
 
+    position: relative;
 
+    background-repeat: no-repeat;
 
+    height: 1080px;
 
+    width: 1920px;
 
+}
 
+
 
+.assembly-page>.assembly-page-background,
 
+.assembly-page>.assembly-page-backweb {
 
+    position: absolute;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    top: 0;
 
+    left: 0;
 
+    bottom: 0;
 
+    right: 0
 
+}
 
+
 
+.assembly-page-background {
 
+    background: url("../images/background.png");
 
+}
 
+
 
+.assembly-page>.assembly-page-backweb {
 
+    width: 100%;
 
+    height: 100%;
 
+    z-index: 1
 
+}
 
+
 
+.assembly-page>.assembly-grid-item {
 
+    top: 0px;
 
+    left: 0px;
 
+    width: 1920px;
 
+    height: 1080px;
 
+    position: absolute;
 
+    z-index: 10;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    overflow: visible;
 
+    background-repeat: no-repeat
 
+}
 
+
 
+.assembly-page>.assembly-grid-item>.assembly-grid-item-border {
 
+    z-index: 1999;
 
+    width: 100%;
 
+    height: 100%;
 
+    top: 0;
 
+    left: 0
 
+}
 
+
 
+.assembly-page>.assembly-grid-item>.assembly-grid-item-angle,
 
+.assembly-page>.assembly-grid-item>.assembly-grid-item-border {
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    pointer-events: none;
 
+    position: absolute;
 
+    border: 0 solid transparent;
 
+    display: block
 
+}
 
+
 
+.assembly-page>.assembly-grid-item>.assembly-grid-item-angle {
 
+    z-index: 2000;
 
+    width: 0;
 
+    height: 0
 
+}
 
+
 
+.assembly-page>.assembly-grid-item .assembly-grid-item-title {
 
+    position: absolute;
 
+    padding-left: 0;
 
+    display: inline-block;
 
+    height: 0;
 
+    line-height: 0;
 
+    overflow: hidden;
 
+    white-space: nowrap;
 
+    width: 100%;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box
 
+}
 
+
 
+.assembly-page>.assembly-grid-item .assembly-grid-item-content {
 
+    border-top: 0 solid transparent;
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: relative;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    overflow: visible;
 
+    padding: 0px;
 
+}
 
+
 
+.assembly-page .assembly-wrap {
 
+    display: block;
 
+    position: relative;
 
+    width: 0;
 
+    height: 0;
 
+    overflow: hidden;
 
+    background-size: contain;
 
+    background-repeat: no-repeat
 
+}
 
+
 
+.assembly-page .assembly-wrap,
 
+.component-element {
 
+    border: 0;
 
+    padding: 0;
 
+    margin: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box
 
+}
 
+
 
+.assembly-page .assembly-wrap.top-wrap {
 
+    padding: 0px;
 
+    width: 1920px;
 
+    height: 133px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: -58px;
 
+    background-repeat: no-repeat;
 
+    background-size: cover;
 
+}
 
+
 
+.assembly-page .assembly-wrap.top-background {
 
+    background-image: url(../images/topTitle.png);
 
+    padding: 0px;
 
+    width: 100%;
 
+    height: 100%;
 
+    overflow: hidden;
 
+    position: absolute;
 
+}
 
+
 
+.assembly-page .assembly-wrap.time-wrap {
 
+    padding: 0px;
 
+    width: 25%;
 
+    height: 40px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    left: 37px;
 
+    top: 8px;
 
+    font-weight: 600;
 
+    display: flex;
 
+    flex-flow: row;
 
+    align-items: center;
 
+}
 
+
 
+.assembly-page .assembly-wrap.weather-wrap {
 
+    padding: 0px;
 
+
 
+    height: 40px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 8px;
 
+
 
+    /* width: 23%;
 
+    right: 10px; */
 
+
 
+    width: auto;
 
+    right: -30px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.earth-wrap {
 
+    padding: 55px;
 
+    width: 838px;
 
+    height: 838px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    left: 552px;
 
+    top: 166px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.earth-text-wrap {
 
+    padding: 0px;
 
+    height: 140px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 498px;
 
+    font-family: youshe-font;
 
+
 
+    /* left: 744px;
 
+    width: 432px; */
 
+
 
+    width: 100%;
 
+    text-align: center;
 
+}
 
+
 
+.assembly-page .assembly-wrap.top-title-wrap {
 
+    padding: 0px;
 
+    height: 4%;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    top: 6px;
 
+    font-family: youshe-font;
 
+
 
+    /* width: 25%;
 
+    left: 748px; */
 
+
 
+    width: 100%;
 
+    left: 8px;
 
+    text-align: center;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-one-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    left: 64px;
 
+    top: 205px;
 
+    z-index: 3;
 
+    cursor: pointer;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-two-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    left: 62px;
 
+    top: 390px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-three-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    bottom: 321px;
 
+    left: 62px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-four-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    bottom: 136px;
 
+    left: 62px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-five-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    right: 58px;
 
+    top: 206px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-six-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    right: 58px;
 
+    top: 390px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-seven-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    bottom: 319px;
 
+    right: 59px;
 
+}
 
+
 
+.assembly-page .assembly-wrap.nav-eight-wrap {
 
+    padding: 0px;
 
+    width: 780px;
 
+    height: 185px;
 
+    overflow: hidden;
 
+    position: absolute;
 
+    bottom: 135px;
 
+    right: 58px;
 
+}
 
+
 
+.component-element {
 
+    height: 100%;
 
+    width: 100%
 
+}
 
+
 
+.component-element>.scale-box {
 
+    width: 100%;
 
+    height: 100%;
 
+    float: left;
 
+    -webkit-transform-origin: 0 0;
 
+    transform-origin: 0 0;
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-align: start;
 
+    -ms-flex-align: start;
 
+    align-items: flex-start
 
+}
 
+
 
+.component-element>.scale-box .search-btn {
 
+    margin-left: 10px
 
+}
 
+
 
+.component-element>.scale-box .label {
 
+    line-height: 28px;
 
+    padding-right: 10px;
 
+    text-align: right;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0
 
+}
 
+
 
+.component-element.data-view-echarts {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-orient: horizontal;
 
+    -webkit-box-direction: normal;
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+    -ms-flex-wrap: wrap;
 
+    flex-wrap: wrap;
 
+    -webkit-box-pack: center;
 
+    -ms-flex-pack: center;
 
+    justify-content: center;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center
 
+}
 
+
 
+.component-element.data-view-echarts>.hd-chart-box {
 
+    width: 100%;
 
+    height: 100%
 
+}
 
+
 
+.component-element.data-view-echarts>.hd-chart-box>div.hd-chart {
 
+    background: transparent
 
+}
 
+
 
+.earth-text-basic {
 
+    text-align: center;
 
+}
 
+
 
+.earth-text-style {
 
+    font-size: 48px;
 
+    color: #ffffff;
 
+}

+ 55 - 0
static/css/earth.css
Просмотреть файл 

@@ -0,0 +1,55 @@
 
+/* 中心的地球和旁边的线圈 */
 
+.MydhDivOutbox {
 
+    position: relative;
 
+}
 
+
 
+.MydhDivOutbox #images {
 
+    -webkit-animation: spin 5s linear infinite;
 
+    animation: spin 5s linear infinite;
 
+    position: absolute;
 
+}
 
+
 
+@keyframes spin {
 
+    from {
 
+        transform: rotate(0deg);
 
+    }
 
+
 
+    to {
 
+        transform: rotate(360deg);
 
+        transition: all 5s;
 
+    }
 
+}
 
+
 
+.MydhDivOutbox #images2 {
 
+    -webkit-animation: spin2 3s linear infinite;
 
+    animation: spin2 3s linear infinite;
 
+    position: absolute;
 
+}
 
+
 
+@keyframes spin2 {
 
+    from {
 
+        transform: rotate(0deg);
 
+    }
 
+
 
+    to {
 
+        transform: rotate(-360deg);
 
+        transition: all 3s;
 
+    }
 
+}
 
+
 
+.MydhDivOutbox #images3 {
 
+    -webkit-animation: spin3 3s linear infinite;
 
+    animation: spin3 3s linear infinite;
 
+    position: absolute;
 
+}
 
+
 
+@keyframes spin3 {
 
+    from {
 
+        transform: rotate(0deg);
 
+    }
 
+
 
+    to {
 
+        transform: rotate(360deg);
 
+        transition: all 3s;
 
+    }
 
+}

Разница между файлами не показана из-за своего большого размера
+ 678 - 0
static/css/iconFamily.css


+ 120 - 0
static/css/index.css
Просмотреть файл 

@@ -0,0 +1,120 @@
 
+::-webkit-scrollbar {
 
+    width: 8px;
 
+    height: 8px;
 
+    background-color: #f5f7fa;
 
+}
 
+
 
+::-webkit-scrollbar-corner {
 
+    background-color: #f5f7fa;
 
+}
 
+
 
+::-webkit-scrollbar-thumb {
 
+    border-radius: 10px;
 
+    background-color: #cfcfcf;
 
+}
 
+
 
+::-webkit-scrollbar-track {
 
+    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .2);
 
+    background-color: #f5f7fa;
 
+}
 
+
 
+html,
 
+body,
 
+#app {
 
+    height: 100%;
 
+    width: 100%;
 
+}
 
+
 
+html {
 
+    overflow: hidden;
 
+}
 
+
 
+body {
 
+    margin: 0;
 
+    font: 12px/1.5 Microsoft YaHei, Arial, Hiragino Sans GB, PingFang SC, Helvetica, Verdana, "\5FAE\8F6F\96C5\9ED1", sans-serif
 
+}
 
+
 
+#app {
 
+    background: transparent;
 
+}
 
+
 
+a,
 
+blockquote,
 
+body,
 
+button,
 
+dd,
 
+dl,
 
+dt,
 
+fieldset,
 
+h1,
 
+h2,
 
+h3,
 
+h4,
 
+h5,
 
+h6,
 
+hr,
 
+input,
 
+lengend,
 
+li,
 
+ol,
 
+p,
 
+pre,
 
+table,
 
+td,
 
+textarea,
 
+th,
 
+tr,
 
+ul {
 
+    margin: 0;
 
+    padding: 0;
 
+    border: 0;
 
+    outline: 0;
 
+    outline: none
 
+}
 
+
 
+a {
 
+    text-decoration: none
 
+}
 
+
 
+a:hover {
 
+    text-decoration: none
 
+}
 
+
 
+h1 {
 
+    font-size: 18px
 
+}
 
+
 
+h2 {
 
+    font-size: 16px
 
+}
 
+
 
+h3 {
 
+    font-size: 14px
 
+}
 
+
 
+h4,
 
+h5,
 
+h6 {
 
+    font-size: 100%
 
+}
 
+
 
+li,
 
+ol,
 
+ul {
 
+    list-style: none
 
+}
 
+
 
+img {
 
+    border: none
 
+}
 
+
 
+button,
 
+input,
 
+select,
 
+textarea {
 
+    font-size: 100%
 
+}
 
+
 
+:focus {
 
+    outline: none
 
+}

+ 539 - 0
static/css/navLinkContent.css
Просмотреть файл 

@@ -0,0 +1,539 @@
 
+/* 左边第一个 */
 
+.NavLinkContent1 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navOne.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: default;
 
+    position: relative;
 
+}
 
+
 
+/* .NavLinkContent1:hover {
 
+    background-image: url("../images/navOneHover.png");
 
+}
 
+
 
+.NavLinkContent1:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navSevenIconHover.png");
 
+}
 
+
 
+.NavLinkContent1:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+} */
 
+
 
+.NavLinkContent1 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 250px;
 
+}
 
+
 
+.NavLinkContent1 .ShowContent.custom-content {
 
+    left: 180px;
 
+}
 
+
 
+.NavLinkContent1 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/icon-map.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent1 .ShowContent .LeftPart.custom-img {
 
+    /* width: 100px;
 
+    height: 100px; */
 
+    margin-bottom: 6px;
 
+}
 
+
 
+.NavLinkContent1 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 300px;
 
+    /* height: 36px; */
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #2bb5eb;
 
+    /* line-height: 41px;
 
+    margin-bottom: 16px; */
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent1 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+
 
+/* 左边第二个 */
 
+.NavLinkContent2 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navTwo.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent2:hover {
 
+    background-image: url("../images/navTwoHover.png");
 
+}
 
+
 
+.NavLinkContent2:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navTwoIconHover.png");
 
+}
 
+
 
+.NavLinkContent2:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent2 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 166px;
 
+}
 
+
 
+.NavLinkContent2 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navTwoIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent2 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent2 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 左边第三个 */
 
+.NavLinkContent3 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navThree.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent3:hover {
 
+    background-image: url("../images/navThreeHover.png");
 
+}
 
+
 
+.NavLinkContent3:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navSevenIconHover.png");
 
+}
 
+
 
+.NavLinkContent3:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent3 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 166px;
 
+}
 
+
 
+.NavLinkContent3 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navSevenIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent3 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent3 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #FF9C27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 左边第四个 */
 
+.NavLinkContent4 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navFour.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent4:hover {
 
+    background-image: url("../images/navFourHover.png");
 
+}
 
+
 
+.NavLinkContent4:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navFourIconHover.png");
 
+}
 
+
 
+.NavLinkContent4:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent4:hover .ShowContent .RightPart .RightPart_BottomPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent4 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 250px;
 
+}
 
+
 
+.NavLinkContent4 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navFourIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent4 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent4 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #FF9C27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 右边第一个 */
 
+.NavLinkContent5 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navFive.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: default;
 
+    position: relative;
 
+}
 
+
 
+/* .NavLinkContent5:hover {
 
+    background-image: url("../images/navFiveHover.png");
 
+}
 
+
 
+.NavLinkContent5:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navTwoIconHover.png");
 
+}
 
+
 
+.NavLinkContent5:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+} */
 
+
 
+.NavLinkContent5 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 216px;
 
+}
 
+
 
+.NavLinkContent5 .ShowContent.custom-content {
 
+    /* left: 300px; */
 
+}
 
+
 
+.NavLinkContent5 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/icon-users.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent5 .ShowContent .LeftPart.custom-img {
 
+    /* width: 100px;
 
+    height: 100px; */
 
+}
 
+
 
+.NavLinkContent5 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 210px;
 
+    /* height: 36px; */
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #2bb5eb;
 
+    /* line-height: 41px;
 
+    margin-bottom: 16px; */
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent5 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 右边第二个 */
 
+.NavLinkContent6 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navSix.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent6:hover {
 
+    background-image: url("../images/navSixHover.png");
 
+}
 
+
 
+.NavLinkContent6:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navThreeIconHover.png");
 
+}
 
+
 
+.NavLinkContent6:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent6:hover .ShowContent .RightPart .RightPart_BottomPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent6 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 286px;
 
+}
 
+
 
+.NavLinkContent6 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navThreeIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent6 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent6 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 右边第三个 */
 
+.NavLinkContent7 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navSeven.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent7:hover {
 
+    background-image: url("../images/navSevenHover.png");
 
+}
 
+
 
+.NavLinkContent7:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navSixIconHover.png");
 
+}
 
+
 
+.NavLinkContent7:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent7 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 286px;
 
+}
 
+
 
+.NavLinkContent7 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navSixIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent7 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent7 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}
 
+
 
+/* 右边第四个 */
 
+.NavLinkContent8 {
 
+    width: 780px;
 
+    height: 185px;
 
+    background-image: url("../images/navEight.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    cursor: pointer;
 
+    position: relative;
 
+}
 
+
 
+.NavLinkContent8:hover {
 
+    background-image: url("../images/navEightHover.png");
 
+}
 
+
 
+.NavLinkContent8:hover .ShowContent .LeftPart {
 
+    background-image: url("../images/navEightIconHover.png");
 
+}
 
+
 
+.NavLinkContent8:hover .ShowContent .RightPart .RightPart_TopPart {
 
+    color: #ffa622;
 
+}
 
+
 
+.NavLinkContent8 .ShowContent {
 
+    display: flex;
 
+    flex-flow: row nowrap;
 
+    align-items: center;
 
+    height: 185px;
 
+    position: absolute;
 
+    left: 196px;
 
+}
 
+
 
+.NavLinkContent8 .ShowContent .LeftPart {
 
+    width: 88px;
 
+    height: 88px;
 
+    background-image: url("../images/navEightIcon.png");
 
+    background-repeat: no-repeat;
 
+    background-size: contain;
 
+    margin-right: 28px;
 
+}
 
+
 
+.NavLinkContent8 .ShowContent .RightPart .RightPart_TopPart {
 
+    width: 180px;
 
+    height: 36px;
 
+    font-size: 36px;
 
+    font-family: PangMenZhengDao-3, PangMenZhengDao;
 
+    font-weight: normal;
 
+    color: #ffffff;
 
+    line-height: 41px;
 
+    margin-bottom: 16px;
 
+    text-align: start;
 
+}
 
+
 
+.NavLinkContent8 .ShowContent .RightPart .RightPart_BottomPart {
 
+    width: 214px;
 
+    height: 34px;
 
+    font-size: 12px;
 
+    font-family: PingFangSC-Regular, PingFang SC;
 
+    font-weight: 400;
 
+    color: #ff9c27;
 
+    line-height: 17px;
 
+    text-align: start;
 
+}

+ 220 - 0
static/css/weatherTime.css
Просмотреть файл 

@@ -0,0 +1,220 @@
 
+.component-element.screen-time {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+    -ms-flex-pack: start;
 
+    -ms-flex-align: center;
 
+    overflow: visible
 
+}
 
+
 
+.component-element.screen-time,
 
+.component-element.screen-time>div {
 
+    -webkit-box-orient: horizontal;
 
+    -webkit-box-direction: normal;
 
+    -webkit-box-pack: start;
 
+    justify-content: flex-start;
 
+    -webkit-box-align: center;
 
+    align-items: center
 
+}
 
+
 
+.component-element.screen-time>div {
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+    -webkit-box-flex: 0;
 
+    -ms-flex-positive: 0;
 
+    flex-grow: 0;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box;
 
+    display: -webkit-inline-box;
 
+    display: -ms-inline-flexbox;
 
+    display: inline-flex;
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+    -ms-flex-pack: start;
 
+    -ms-flex-align: center
 
+}
 
+
 
+.component-element.screen-time.default {
 
+    font-size: 30px;
 
+    color: #fff
 
+}
 
+
 
+.component-element.screen-time.default>.digital-time {
 
+    font-family: digital-font;
 
+    border-radius: 8px;
 
+    text-align: center;
 
+    font-size: 46px;
 
+    color: #0ba7ff;
 
+    letter-spacing: 8px;
 
+    padding: 0 10px
 
+}
 
+
 
+.component-element.screen-time.default>.digital-time.time-show {
 
+    color: rgb(255, 255, 255);
 
+    font-size: 28px;
 
+    transform: scale(1);
 
+    margin-top: 0px;
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date>span {
 
+    margin-top: 4px
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date,
 
+.component-element.screen-time.default>.digital-week {
 
+    font-size: 32px;
 
+    margin-left: 30px;
 
+    overflow: hidden
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date.date-show {
 
+    transform: scale(1);
 
+    margin-top: 0px;
 
+    margin-left: 20px;
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date>:not(:first-child),
 
+.component-element.screen-time.default>.digital-week>:not(:first-child) {
 
+    margin-left: 4px
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date>b,
 
+.component-element.screen-time.default>.digital-week>b {
 
+    letter-spacing: 4px;
 
+    font-weight: 400;
 
+    font-size: 26px
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date>span,
 
+.component-element.screen-time.default>.digital-week>span {
 
+    letter-spacing: 6px;
 
+    font-family: digital-font;
 
+    color: #0ba7ff
 
+}
 
+
 
+.component-element.screen-time.default>.digital-date>span.date-basic,
 
+.component-element.screen-time.default>.digital-date>b.date-basic {
 
+    color: rgb(255, 255, 255);
 
+    font-size: 14px;
 
+    line-height: 14px;
 
+
 
+}
 
+
 
+.component-element.screen-weather {
 
+    display: -webkit-box;
 
+    display: -ms-flexbox;
 
+    display: flex;
 
+    -webkit-box-orient: horizontal;
 
+    -webkit-box-direction: normal;
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+    -webkit-box-pack: start;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center;
 
+    overflow: visible
 
+}
 
+
 
+.component-element.screen-weather>* {
 
+    margin: 0 10px;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto;
 
+    -webkit-box-flex: 0;
 
+    -ms-flex-positive: 0;
 
+    flex-grow: 0;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    -webkit-box-sizing: border-box;
 
+    box-sizing: border-box
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item {
 
+    height: 70px;
 
+    overflow: hidden;
 
+    display: -webkit-inline-box;
 
+    display: -ms-inline-flexbox;
 
+    display: inline-flex;
 
+    -ms-flex-wrap: nowrap;
 
+    flex-wrap: nowrap;
 
+    -webkit-box-orient: horizontal;
 
+    -webkit-box-direction: normal;
 
+    -ms-flex-direction: row;
 
+    flex-direction: row;
 
+    -webkit-box-pack: start;
 
+    -ms-flex-pack: start;
 
+    justify-content: flex-start;
 
+    -webkit-box-align: center;
 
+    -ms-flex-align: center;
 
+    align-items: center
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item.weather-scale54 {
 
+    transform: scale(0.54);
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item.weather-margin-left-54 {
 
+    margin-left: -54px;
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-icon {
 
+    display: block;
 
+    float: left;
 
+    width: 66px;
 
+    height: 66px;
 
+    line-height: 66px;
 
+    text-align: center;
 
+    font-size: 60px;
 
+    color: #0ba7ff;
 
+    -webkit-box-flex: 0;
 
+    -ms-flex-positive: 0;
 
+    flex-grow: 0;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    -ms-flex-preferred-size: 66px;
 
+    flex-basis: 66px
 
+}
 
+
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-icon.weather-icon-style {
 
+    color: rgb(255, 255, 255);
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-text {
 
+    display: block;
 
+    float: left;
 
+    height: 60px;
 
+    font-size: 18px;
 
+    color: #fff;
 
+    margin-left: 8px;
 
+    -webkit-box-flex: 0;
 
+    -ms-flex-positive: 0;
 
+    flex-grow: 0;
 
+    -ms-flex-negative: 0;
 
+    flex-shrink: 0;
 
+    -ms-flex-preferred-size: auto;
 
+    flex-basis: auto
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-text.weather-text-style {
 
+    color: rgb(255, 255, 255);
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-text>p {
 
+    overflow: hidden
 
+}
 
+
 
+.component-element.screen-weather.default>.weather-item>.weather-text>p>span:first-child {
 
+    margin-right: 20px
 
+}

Разница между файлами не показана из-за своего большого размера
+ 6 - 0
static/externals/vue/vue.min.js


BIN
static/fonts/Digital-7Mono.TTF
Просмотреть файл


BIN
static/fonts/PangMenZhengDao.ttf
Просмотреть файл


BIN
static/fonts/YouSheBiaoTiHei-2.ttf
Просмотреть файл


BIN
static/images/background.png
Просмотреть файл


BIN
static/images/earth.png
Просмотреть файл


BIN
static/images/earthOneCircle.png
Просмотреть файл


BIN
static/images/earthTwoCircle.png
Просмотреть файл


BIN
static/images/icon-map.png
Просмотреть файл


BIN
static/images/icon-users.png
Просмотреть файл


BIN
static/images/navEight.png
Просмотреть файл


BIN
static/images/navEightHover.png
Просмотреть файл


BIN
static/images/navEightIcon.png
Просмотреть файл


BIN
static/images/navEightIconHover.png
Просмотреть файл


BIN
static/images/navFive.png
Просмотреть файл


BIN
static/images/navFiveHover.png
Просмотреть файл


BIN
static/images/navFiveIcon.png
Просмотреть файл


BIN
static/images/navFiveIconHover.png
Просмотреть файл


BIN
static/images/navFour.png
Просмотреть файл


BIN
static/images/navFourHover.png
Просмотреть файл


BIN
static/images/navFourIcon.png
Просмотреть файл


BIN
static/images/navFourIconHover.png
Просмотреть файл


BIN
static/images/navOne.png
Просмотреть файл


BIN
static/images/navOneHover.png
Просмотреть файл


BIN
static/images/navOneIcon.png
Просмотреть файл


BIN
static/images/navOneIconHover.png
Просмотреть файл


BIN
static/images/navSeven.png
Просмотреть файл


BIN
static/images/navSevenHover.png
Просмотреть файл


BIN
static/images/navSevenIcon.png
Просмотреть файл


BIN
static/images/navSevenIconHover.png
Просмотреть файл


BIN
static/images/navSix.png
Просмотреть файл


BIN
static/images/navSixHover.png
Просмотреть файл


BIN
static/images/navSixIcon.png
Просмотреть файл


BIN
static/images/navSixIconHover.png
Просмотреть файл


BIN
static/images/navThree.png
Просмотреть файл


BIN
static/images/navThreeHover.png
Просмотреть файл


BIN
static/images/navThreeIcon.png
Просмотреть файл


BIN
static/images/navThreeIconHover.png
Просмотреть файл


BIN
static/images/navTwo.png
Просмотреть файл


BIN
static/images/navTwoHover.png
Просмотреть файл


BIN
static/images/navTwoIcon.png
Просмотреть файл


BIN
static/images/navTwoIconHover.png
Просмотреть файл


BIN
static/images/topTitle.png
Просмотреть файл


+ 154 - 0
static/js/index.js
Просмотреть файл 

@@ -0,0 +1,154 @@
 
+var app = new Vue({
 
+    el: "#app",
 
+    data() {
 
+        // let isinline = /^(192.168)/.test(location.hostname);
 
+        return {
 
+            companyName: "许昌市建安区中州水务",
 
+            sysName: "信息管理平台",
 
+            inline: /^(192.168)/.test(location.hostname),
 
+            memuList: [
 
+                {
 
+                    id: 1,
 
+                    className: ["nav-one-wrap"],
 
+                    menuName: "管网GIS相关系统",
 
+                    introName: "",
 
+                },
 
+                {
 
+                    id: 2,
 
+                    className: ["nav-two-wrap"],
 
+                    menuName: "管网GIS",
 
+                    introName: "",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "//192.168.100.12:8200",
 
+                        outline: "//42.227.69.38:8200"
 
+                    }
 
+                },
 
+                {
 
+                    id: 3,
 
+                    className: ["nav-three-wrap"],
 
+                    menuName: "巡检抢修",
 
+                    introName: "",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "//192.168.100.12:8000",
 
+                        outline: "//42.227.69.38:8000"
 
+                    }
 
+                },
 
+                {
 
+                    id: 4,
 
+                    className: ["nav-four-wrap"],
 
+                    menuName: "综合管理",
 
+                    introName: "",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "//192.168.100.12:8000/#/large-screen",
 
+                        outline: "//42.227.69.38:8000/#/large-screen"
 
+                    }
 
+                },
 
+                {
 
+                    id: 5,
 
+                    className: ["nav-five-wrap"],
 
+                    menuName: "营业相关系统",
 
+                    introName: "",
 
+                    
+                },
 
+                {
 
+                    id: 6,
 
+                    className: ["nav-six-wrap"],
 
+                    menuName: "营业管理",
 
+                    introName: "",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20",
 
+                        outline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20"
 
+                    }
 
+                },
 
+                {
 
+                    id: 7,
 
+                    className: ["nav-seven-wrap"],
 
+                    menuName: "抄表平台",
 
+                    introName: "",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20",
 
+                        outline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20"
 
+                    }
 
+                },
 
+                {
 
+                    id: 8,
 
+                    className: ["nav-eight-wrap"],
 
+                    menuName: "报装系统",
 
+                    fn: "openWindow",
 
+                    param: {
 
+                        inline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20",
 
+                        outline: "https://sales.zzwatercloud.com//smallPortal/#/login?tenantCode=%20"
 
+                    }
 
+                },
 
+            ],
 
+            dateObj: {},
 
+            timer: null,
 
+            time: "--",
 
+            scaleNum: 1,
 
+
 
+        };
 
+    },
 
+    methods: {
 
+        initScale() {
 
+            let clientWidth = document.body.clientWidth;
 
+            let num = clientWidth / 1920;
 
+            let scaleNum = num.toFixed(2);
 
+            this.scaleNum = scaleNum;
 
+        },
 
+        initDate() {
 
+            let date = new Date();
 
+            let year = date.getFullYear();
 
+            let month = date.getMonth() + 1;
 
+            let day = date.getDate();
 
+            this.dateObj = { year, month, day };
 
+        },
 
+        initTimer() {
 
+            if (this.timer) {
 
+                clearInterval(this.timer);
 
+                this.timer = null;
 
+            }
 
+            let date = new Date();
 
+            this.time = date.toLocaleTimeString();
 
+
 
+            this.timer = setInterval(() => {
 
+                let date = new Date();
 
+                this.time = date.toLocaleTimeString();
 
+            }, 1000);
 
+        },
 
+        menuClick(item) {
 
+            if (item.fn && this[item.fn]) {
 
+                this[item.fn](item.param);
 
+            }
 
+        },
 
+        openWindow(param, target) {
 
+            let href = param[this.inline ? 'inline' : 'outline'];
 
+            if (!href) return;
 
+            window.open(href, target || "_blank");
 
+        },
 
+        oneInfo() {
 
+            window.open("http://42.227.69.38:8000", "_blank");
 
+        },
 
+        twoInfo() {
 
+            window.open("http://42.227.69.38:8000/#/large-screen", "_blank");
 
+        },
 
+        fiveInfo() {
 
+            window.open("http://42.227.69.38:8200", "_blank");
 
+        },
 
+    },
 
+    created() {
 
+        this.initDate();
 
+        this.initTimer();
 
+        this.initScale();
 
+    },
 
+    destroyed() {
 
+        if (this.timer) {
 
+            clearInterval(this.timer);
 
+            this.timer = null;
 
+        }
 
+    },
 
+});

+ 269 - 0
view.html
Просмотреть файл 

@@ -0,0 +1,269 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="utf-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 
+    <link rel="icon" href="static/favicon.ico">
 
+    <title>许昌市建安区中州水务有限公司</title>
 
+
 
+    <link href="static/css/index.css" rel="stylesheet">
 
+
 
+    <link href="static/css/earth.css" rel="stylesheet">
 
+
 
+    <link href="static/css/navLinkContent.css" rel="stylesheet">
 
+
 
+    <link href="static/css/backgroundLayer.css" rel="stylesheet">
 
+
 
+    <link href="static/css/iconFamily.css" rel="stylesheet">
 
+
 
+    <link href="static/css/weatherTime.css" rel="stylesheet">
 
+
 
+</head>
 
+
 
+<body>
 
+    <noscript>
 
+        <strong>
 
+            We're sorry but webapp doesn't work properly without JavaScript enabled. Please enable it to
 
+            continue.
 
+        </strong>
 
+    </noscript>
 
+    <div id="app" class="assembly-html-body">
 
+        <div class="assembly-page">
 
+            <div class="assembly-page-background">
 
+            </div>
 
+            <div class="assembly-grid-item">
 
+                <div class="assembly-grid-item-content">
 
+                    <div class="assembly-wrap top-wrap">
 
+                        <div class="assembly-wrap top-background">
 
+                        </div>
 
+                    </div>
 
+                    <div class="assembly-wrap time-wrap">
 
+                        <div class="component-element screen-time default component-element">
 
+                            <div class="digital-time time-show">
 
+                                {{time}}
 
+                            </div>
 
+                            <div class="digital-date date-show">
 
+                                <span class="date-basic">
 
+                                    {{ dateObj.year || "--" }}
 
+                                </span>
 
+                                <b class="date-basic">
 
+                                    年
 
+                                </b>
 
+                                <span class="date-basic">
 
+                                    {{ dateObj.month || "--" }}
 
+                                </span>
 
+                                <b class="date-basic">
 
+                                    月
 
+                                </b>
 
+                                <span class="date-basic">
 
+                                    {{ dateObj.day || "--" }}
 
+                                </span>
 
+                                <b class="date-basic">
 
+                                    日
 
+                                </b>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <!-- <div class="assembly-wrap weather-wrap">
 
+                        <div class="component-element screen-weather default component-element">
 
+                            <div class="weather-item weather-scale54">
 
+                                <i class="weather-icon icon-duoyun weather-icon-style"></i>
 
+                                <div class="weather-text weather-text-style">
 
+                                    <p>(3月28日)</p>
 
+                                    <p><span>多云</span><span>10~23℃</span></p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="weather-item weather-scale54 weather-margin-left-54">
 
+                                <i class="weather-icon icon-duoyun weather-icon-style"></i>
 
+                                <div class="weather-text weather-text-style">
 
+                                    <p>(3月29日)</p>
 
+                                    <p><span>多云</span><span>8~23℃</span></p>
 
+                                </div>
 
+                            </div>
 
+                            <div class="weather-item weather-scale54 weather-margin-left-54">
 
+                                <i class="weather-icon icon-qing weather-icon-style"></i>
 
+                                <div class="weather-text weather-text-style">
 
+                                    <p>(3月30日)</p>
 
+                                    <p><span>晴</span><span>9~21℃</span></p>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <div class="assembly-wrap top-title-wrap">
 
+                        <span class="component-element">
 
+                            <p><span style="font-size: 32px; color: #ffffff;">{{companyName}}{{sysName}}</span></p>
 
+                        </span>
 
+                    </div>
 
+                    <div class="assembly-wrap earth-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="MydhDivOutbox">
 
+                                <img alt="logo" src="static/images/earth.png" id="images">
 
+                                <img alt="logo" src="static/images/earthOneCircle.png" id="images2">
 
+                                <img alt="logo" src="static/images/earthTwoCircle.png" id="images3">
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="assembly-wrap earth-text-wrap">
 
+                        <span class="component-element">
 
+                            <p class="earth-text-basic">
 
+                                <span class="earth-text-style">{{companyName}}</span>
 
+                            </p>
 
+                            <p class="earth-text-basic">
 
+                                <span class="earth-text-style">{{sysName}}</span>
 
+                            </p>
 
+                        </span>
 
+                    </div>
 
+
 
+
 
+
 
+                    <div v-for="(item,index) in memuList" :key="item.id" class="assembly-wrap" :class="item.className"
 
+                        v-on:click="menuClick(item)">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div :class="'NavLinkContent' + item.id">
 
+                                <div class="ShowContent custom-content">
 
+                                    <div class="LeftPart custom-img"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart" v-if="item.menuName">{{item.menuName}}</div>
 
+                                        <div class="RightPart_BottomPart" v-if="item.introName">
 
+                                            {{item.introName}}
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                    <!-- <div class="assembly-wrap nav-one-wrap">
 
+                        <div class="component-custom component-element" style="position: relative;">
 
+                            <div class="NavLinkContent2">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">四化介绍</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对整个四化项目以及各区县情况进行介绍，对关键KPI指标进行综合展示。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+
 
+                    <!-- <div class="assembly-wrap nav-two-wrap">
 
+                        <div class="component-custom component-element" style="position: relative;">
 
+                            <div class="NavLinkContent2">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">供水一体化</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对四化工程进行一张图展示，对各区县主要供水厂的生产概况进行图文介绍。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-three-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent3">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">综合展示</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对各区县的生产运行、管网设备、DMA分区、客服热线等关键KPI指标进行综合统计。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-four-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent4">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">智能决策</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对各区县生产、营销、异常事件进行一张图展示，实时展示，实时监控。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-five-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent5">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">智能水厂</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对各区县的主要水厂进行图文介绍，对水源水厂相关的设备进行综合统计、对异常事件进行实时监控。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-six-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent6">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">智能调度</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            利用水力模型实时模拟管网的运行状态，为管网调度提供决策支持。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-seven-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent7">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">智能管网</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对管网GIS进行综合展示，对管网的流量、压力等设备状态进行实时监控。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                    <!-- <div class="assembly-wrap nav-eight-wrap">
 
+                        <div class="component-element component-custom" style="position: relative;">
 
+                            <div class="NavLinkContent8">
 
+                                <div class="ShowContent">
 
+                                    <div class="LeftPart"></div>
 
+                                    <div class="RightPart">
 
+                                        <div class="RightPart_TopPart">智能客服</div>
 
+                                        <div class="RightPart_BottomPart">
 
+                                            对营业厅的分布情况进行图文展示，对客服、热线和工单情况进行实时统计。
 
+                                        </div>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                    </div> -->
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+    </div>
 
+
 
+    <script src="./static/externals/vue/vue.min.js"></script>
 
+    <script src="./static/js/index.js"></script>
 
+</body>
 
+
 
+</html>