上传文件至 'webRoot/css'

webRoot/css/common.css

@@ -0,0 +1,253 @@
+@charset "UTF-8";
+@media all {
+  html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif; }
+
+  ul, ol, li {
+    list-style: none; }
+
+  a, u {
+    text-decoration: none; }
+
+  img {
+    display: block;
+    border: 0; }
+
+  * {
+    box-sizing: border-box; }
+
+  :root {
+    --c_mainBlue: #4cb4e7;
+    --c_highlightBlue: #1cb8f6;
+    --c_mainWhite: #fff;
+    --c_mainGray: #666;
+    --c_bg: midnightblue;
+    --c_bg_chart: rgba(0, 138, 255, 0.1); }
+
+  html, body {
+    height: 100%;
+    color: var(--c_mainWhite);
+    background-color: var(--c_bg);
+    overflow: hidden; }
+
+  h3, h4, h5 {
+    font-weight: normal; }
+
+  button {
+    outline: none; }
+
+  input {
+    height: 1.75rem;
+    vertical-align: middle; }
+
+  button {
+    margin-left: 1rem;
+    padding: .0625rem 1rem;
+    font-size: 1rem;
+    color: #fff;
+    background: deepskyblue; }
+
+  @keyframes linkTo {
+    from, 80%, 90%, to {
+      left: 0; }
+    85%, 95% {
+      left: .5rem; } }
+  #container {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto; }
+    #container nav {
+      text-align: right;
+      padding-right: 2rem; }
+      #container nav a {
+        padding-left: 1rem;
+        color: lightskyblue;
+        font-style: italic; }
+        #container nav a:hover {
+          text-decoration: underline; }
+        #container nav a:before {
+          content: '→ ';
+          position: relative;
+          left: 0;
+          animation: linkTo 5s ease-out;
+          animation-iteration-count: infinite; } }
+@font-face {
+  font-family: digitalNumber;
+  src: url("../assets/font/digitalNumber.TTF"); }
+.myBg {
+  background-size: 100% 100%;
+  background-origin: content-box;
+  background-repeat: no-repeat; }
+
+strong {
+  color: var(--c_mainBlue); }
+
+h3 {
+  margin-bottom: 1rem;
+  padding: .5rem 1rem;
+  font-size: 1.5rem;
+  letter-spacing: .0625rem;
+  color: var(--c_mainWhite);
+  background: linear-gradient(to right, var(--c_mainBlue), transparent);
+  z-index: 1; }
+  h3.en {
+    margin-top: .3rem;
+    color: #999;
+    font-size: .75rem; }
+
+h4 {
+  font-size: 1.25rem;
+  letter-spacing: .125rem; }
+
+h5 {
+  letter-spacing: .125rem; }
+
+#container {
+  height: 100%; }
+
+@media all {
+  i {
+    display: inline-block;
+    background-size: contain;
+    background-repeat: no-repeat; }
+#container > header {
+  position: relative;
+  padding: 1.5rem 2rem 1rem;
+  height: 6.25rem;
+ 
+  }
+  @media screen and (max-width: 760px) {
+    #container > header.showGesture:after {
+      content: "　← 左右滑动这里试试 →　　　点击可关闭";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      line-height: 2.5;
+      font-size: 2.5rem;
+      background: rgba(0, 0, 0, 0.8);
+      border: .25rem solid #fff;
+      border-radius: .5rem;
+      box-shadow: 0 0 1.5rem inset; } }
+  #container > header .logo {
+    position: absolute;
+    animation: 20s logoAnimation infinite ease; }
+    #container > header .logo img {
+      width: 8rem; }
+  #container > header h1 {
+    text-align: center;
+    margin: 0 4.5rem .5rem;
+    font-size: 2.5rem;
+    font-weight: normal;
+    color: var(--c_mainWhite); }
+  #container > header #headerTime {
+    position: absolute;
+    right: 1rem;
+    top: 2.5rem;
+    font-size: 1.125rem;
+    letter-spacing: .0625rem;
+    margin-right: 1rem; }
+    #container > header #headerTime > span {
+      display: block; }
+    #container > header #headerTime .digital-num {
+      font-family: "digitalNumber", serif;
+      font-size: 1.5rem;
+      margin: 0 .125rem; }
+      #container > header #headerTime .digital-num:last-child {
+        margin-left: 1rem;
+        margin-right: 0; }
+      #container > header #headerTime .digital-num .colon {
+        display: inline-block;
+        font-family: sans-serif;
+        width: 0.125rem; }
+  #container > header .weatherBox {
+    position: absolute;
+    right: 11rem;
+    top: 2.5rem; }
+    #container > header .weatherBox #weatherIcon {
+      vertical-align: top;
+      width: 3rem;
+      height: 3rem;
+      filter: brightness(3);
+      background-size: contain;
+      }
+    #container > header .weatherBox ul {
+      font-size: 1.125rem;
+      display: inline-block; }
+      #container > header .weatherBox ul .temperature {
+        margin-bottom: .25rem; }
+#container > main {
+  flex: 1;
+  display: flex;
+  padding: 0 1rem 2rem; }
+
+body > aside {
+  z-index: 1;
+  position: absolute;
+  bottom: 2rem;
+  border: .5rem solid transparent;
+  background: midnightblue;
+  width: 26rem;
+  border-radius: 0 1rem 1rem 0;
+  box-shadow: 0 0 0.5rem 0.5rem deepskyblue;
+  transform: translateX(-27rem);
+  transition: all .3s ease; }
+  body > aside:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1rem;
+    height: 100%;
+    top: 0;
+    right: 0;
+    transform: translateX(2rem); }
+  body > aside:hover {
+    transform: initial; }
+  body > aside .input-group ~ .input-group {
+    border-top: 0.0625rem solid rgba(135, 206, 235, 0.63); }
+  body > aside .input-group {
+    padding: 1rem .5rem; }
+    body > aside .input-group:last-child {
+      text-align: center; }
+    body > aside .input-group h4 {
+      margin-bottom: .5rem; }
+    body > aside .input-group label {
+      margin: 0 .5rem 0 1rem;
+      white-space: nowrap; }
+    body > aside .input-group.colors label {
+      margin-left: 0; }
+    body > aside .input-group.other label {
+      line-height: 2.5rem; }
+    body > aside .input-group input {
+      padding: .125rem .25rem;
+      width: 6rem;
+      font-size: 1.125rem;
+      color: #fff;
+      border: 0.0625rem solid rgba(255, 255, 255, 0.5);
+      background: transparent; }
+      body > aside .input-group input[type=radio] {
+        width: auto;
+        height: 1rem;
+        vertical-align: top; }
+      body > aside .input-group input[type=checkbox] {
+        margin-left: 0;
+        width: auto;
+        vertical-align: middle; }
+      body > aside .input-group input button {
+        margin-top: .5rem;
+        padding: .25rem 1rem;
+        font-size: 1.25rem;
+        color: #fff;
+        background: var(--c_mainBlue);
+        border: none;
+        border-radius: .25rem;
+        cursor: pointer; }
+        body > aside .input-group input button:hover {
+          background: #4EA3D6; }
+        body > aside .input-group input button:active {
+          background: #4e93c6; }
+

webRoot/css/index.css

@@ -0,0 +1,19 @@
+main .l, main .m, main .r {
+  flex: 0 0 33.33%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; }
+main .l > div, main .m > div, main .r > div {
+  display: flex;
+  flex: 0 0 50%;
+  padding: 1rem; }
+main .chart-wrap {
+  border: 0.0625rem solid rgba(76, 180, 231, 0.33);
+  display: flex;
+  flex: 1;
+  flex-direction: column; }
+  main .chart-wrap .chart {
+    flex: 1;
+    height: 0; }
+
+

webRoot/css/map2d.css

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+main > * {
+  display: flex;
+  overflow: hidden; }
+main h3 .more {
+  position: absolute;
+  right: 2rem;
+  font-style: italic;
+  font-size: 1.25rem; }
+main .l {
+  flex: 0 0 66.66%;
+  padding: 1rem; }
+  main .l .chart-wrap {
+    position: relative; }
+    main .l .chart-wrap .radioGroup {
+      position: absolute;
+      right: 2rem;
+      top: 4rem;
+      z-index: 1; }
+      main .l .chart-wrap .radioGroup input {
+        vertical-align: middle; }
+    main .l .chart-wrap .chart-box {
+      flex: 1;
+      position: absolute;
+      width: 100%;
+      bottom: 0; }
+      main .l .chart-wrap .chart-box .chart {
+        height: 53.125rem; }
+main .chart-wrap {
+  border: 0.0625rem solid rgba(76, 180, 231, 0.33);
+  display: flex;
+  flex: 1;
+  flex-direction: column; }
+  main .chart-wrap .chart {
+    flex: 1;
+    height: 0; }
+main .r {
+  flex: 0 0 33.33%;
+  flex-direction: column; }
+  main .r > div {
+    display: flex;
+    flex: 0 0 50%;
+    padding: 1rem; }
+    main .r > div .chart-wrap {
+      position: relative; }
+  main .r .r-t .chart-wrap .chart:before {
+    content: '北↑';
+    position: absolute;
+    left: 9.75rem;
+    top: 1rem; }
+  main .r .r-t .chart-wrap .chart.notebook:before {
+    left: 7.75rem;
+    top: .5rem; }
+  main .r .r-t .chart-wrap .input-group {
+    margin-left: 1rem; }
+  main .r .r-t .chart-wrap .text {
+    position: absolute;
+    width: 38%;
+    right: 1rem;
+    top: 9rem; }
+    main .r .r-t .chart-wrap .text.notebook {
+      width: 13rem;
+      top: 7rem; }
+  main .r .r-b #c04_bestLocation {
+    flex: 0;
+    display: flex; }
+    main .r .r-b #c04_bestLocation .blocks {
+      display: flex;
+      position: relative;
+      flex-wrap: wrap;
+      width: 19rem;
+      top: 2rem;
+      left: 2rem; }
+      main .r .r-b #c04_bestLocation .blocks > div {
+        width: 5rem;
+        height: 5rem;
+        text-align: center;
+        line-height: 4rem;
+        font-size: 2rem;
+        background-color: rgba(255, 255, 255, 0.13);
+        border: 0.125rem solid rgba(255, 255, 255, 0.63);
+        transition: all .5s; }
+        main .r .r-b #c04_bestLocation .blocks > div.active {
+          background: deepskyblue; }
+    main .r .r-b #c04_bestLocation form {
+      margin-top: 2rem;
+      width: 17rem; }
+      main .r .r-b #c04_bestLocation form .input-group {
+        margin-bottom: .5rem; }
+        main .r .r-b #c04_bestLocation form .input-group button {
+          margin-left: 0; }
+        main .r .r-b #c04_bestLocation form .input-group #floorNumber {
+          width: 4rem; }
+