Skip to content

html / MeteorologicalBureau

Go to a project
Commit a94ead50 by hanjixin
Options

Merge branch 'master' of gitlab.maxrocky.com:hanjixin/MeteorologicalBureau

parents 1fbf4849 cbe52bba
Showing with 85 additions and 81 deletions
dva/.webpackrc.js
...@@ -13,7 +13,7 @@ export default { ...@@ -13,7 +13,7 @@ export default {
// '@': resolve('src'), // '@': resolve('src'),
// } // }
// }, // },
"disableCSSModules": true, // "disableCSSModules": true,
define: { define: {
'process.env': env, 'process.env': env,
} }
......
dva/src/assets/common.less
...@@ -11,20 +11,22 @@ ...@@ -11,20 +11,22 @@
} }
} }
#textShadow(opcity) {} #textShadow(opcity) {
}
@shadow: .1rem 0rem .5rem rgba(255, 255, 255, 0.3), -.1rem 0rem .5rem rgba(255, 255, 255, 0.3), 0rem .1rem .5rem rgba(255, 255, 255, 0.3), 0rem -.1rem .5rem rgba(255, 255, 255, 0.3); @shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
-0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
.layout-container { :global(.layout-container) {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: relative; position: relative;
background: url('./img/bg.jpg') no-repeat center; background: url("@/assets/img/bg.jpg") no-repeat center;
background-size: cover; background-size: cover;
:global(.layout-nav) {
.layout-nav {
height: @navHeight; height: @navHeight;
line-height: @navHeight; line-height: @navHeight;
// border: 1px solid red; // border: 1px solid red;
...@@ -34,26 +36,26 @@ ...@@ -34,26 +36,26 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 30px; padding-left: 30px;
background: url('./img/nav.png') no-repeat top; background: url("@/assets/img/nav.png") no-repeat top;
background-size: 100%; background-size: 100%;
position: relative; position: relative;
.light { :global(.light) {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 380px; width: 380px;
} }
.logo { :global(.logo) {
width: 30px; width: 30px;
height: 30px; height: 30px;
background: url('./yay.jpg') no-repeat center; background: url("@/assets/yay.jpg") no-repeat center;
background-size: cover; background-size: cover;
margin-right: 10px; margin-right: 10px;
} }
.time { :global(.time) {
color: white; color: white;
position: absolute; position: absolute;
top: 0; top: 0;
...@@ -61,11 +63,11 @@ ...@@ -61,11 +63,11 @@
} }
} }
.layout-sidebar { :global(.layout-sidebar) {
width: @sideWith; width: @sideWith;
// border: 1px solid red; // border: 1px solid red;
height: calc(~"100% - 76px"); height: calc(~"100% - 76px");
background: url('./img/sidebar.png') no-repeat left; background: url("@/assets/img/sidebar.png") no-repeat left;
background-size: 100%; background-size: 100%;
position: absolute; position: absolute;
top: @navHeight; top: @navHeight;
...@@ -74,12 +76,12 @@ ...@@ -74,12 +76,12 @@
box-sizing: border-box; box-sizing: border-box;
ul, :global(ul),
li { :global(li) {
list-style: none; list-style: none;
} }
ul { :global(ul) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
...@@ -88,70 +90,69 @@ ...@@ -88,70 +90,69 @@
padding: 93px 0; padding: 93px 0;
} }
li { :global(li) {
height: 45px; height: 45px;
line-height: 45px; line-height: 45px;
&:nth-child(2) { &:nth-child(2) {
a { :global(a) {
padding-left: 37px; padding-left: 37px;
.icon { :global(.icon) {
background-image: url(../assets/img/icon/6.png); background-image: url("@/assets/img/icon/6.png");
} }
} }
} }
&:nth-child(3) { &:nth-child(3) {
a { :global(a) {
padding-left: 49px; padding-left: 49px;
.icon { :global(.icon) {
background-image: url(../assets/img/icon/4.png); background-image: url("@/assets/img/icon/4.png");
} }
} }
} }
&:nth-child(4) { &:nth-child(4) {
a { :global(a) {
padding-left: 61px; padding-left: 61px;
.icon { :global(.icon) {
background-image: url(../assets/img/icon/5.png); background-image: url("@/assets/img/icon/5.png");
} }
} }
} }
&:nth-child(5) { &:nth-child(5) {
a { :global(a) {
padding-left: 49px; padding-left: 49px;
.icon { :global(.icon) {
background-image: url(../assets/img/icon/2.png); background-image: url("@/assets/img/icon/2.png");
} }
} }
} }
&:nth-child(6) { &:nth-child(6) {
a { :global(a) {
padding-left: 37px; padding-left: 37px;
.icon { :global(.icon) {
background-image: url(../assets/img/icon/1.png); background-image: url("@/assets/img/icon/1.png");
} }
} }
} }
&:nth-child(7) { &:nth-child(7) {
a { :global(a) {
.icon { :global(.icon) {
background-image: url(../assets/img/icon/7.png); background-image: url("@/assets/img/icon/7.png");
} }
} }
} }
a { :global(a) {
display: block; display: block;
height: 100%; height: 100%;
text-decoration: none; text-decoration: none;
...@@ -163,18 +164,18 @@ ...@@ -163,18 +164,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
.icon { :global(.icon) {
width: 35px; width: 35px;
height: 35px; height: 35px;
display: inline-block; display: inline-block;
background: url('./img/icon/3.png') no-repeat center; background: url("@/assets/img/icon/3.png") no-repeat center;
background-size: 90%; background-size: 90%;
} }
// padding: 0 20px ; // padding: 0 20px ;
&.active { &:global(.active) {
background: url('./img/select.png') no-repeat left top; background: url("@/assets/img/select.png") no-repeat left top;
background-size: contain; background-size: contain;
background-position: -0px 0; background-position: -0px 0;
// border-radius: 20px; // border-radius: 20px;
...@@ -183,7 +184,7 @@ ...@@ -183,7 +184,7 @@
font-size: 18px; font-size: 18px;
text-shadow: @shadow; text-shadow: @shadow;
.icon { :global(.icon) {
background-size: 110%; background-size: 110%;
} }
...@@ -198,26 +199,25 @@ ...@@ -198,26 +199,25 @@
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
color: #ced0d2; color: #ced0d2;
margin:10px 0 15px; margin: 10px 0 15px;
} }
} }
.layout-content { :global(.layout-content) {
margin-left: @sideWith - 90px; margin-left: @sideWith - 90px;
height: calc(~"100% - 76px"); height: calc(~"100% - 76px");
padding-left: 90px; padding-left: 90px;
// width: calc(100vw - @sideWith); // width: calc(100vw - @sideWith);
// border: 1px solid violet; // border: 1px solid violet;
background: url('../assets//img/content.png') no-repeat left top; background: url("../assets//img/content.png") no-repeat left top;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
padding-top: 27px; padding-top: 27px;
.common-btn-back { :global(.common-btn-back) {
width: 94px; width: 94px;
height: 74px; height: 74px;
background: url('../assets/img/back.png') no-repeat left top; background: url("../assets/img/back.png") no-repeat left top;
background-size: cover; background-size: cover;
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
...@@ -225,15 +225,15 @@ ...@@ -225,15 +225,15 @@
z-index: 10; z-index: 10;
} }
.common-btn-container { :global(.common-btn-container) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
.common-btn { :global(.common-btn) {
// border: 1px solid rebeccapurple; // border: 1px solid rebeccapurple;
background: url('../assets/img/btn-bg.png') no-repeat center; background: url("../assets/img/btn-bg.png") no-repeat center;
background-size: contain; background-size: contain;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -252,13 +252,13 @@ ...@@ -252,13 +252,13 @@
margin-right: 50px; margin-right: 50px;
box-sizing: border-box; box-sizing: border-box;
&:hover { &:global(:hover) {
text-shadow: @shadow; text-shadow: @shadow;
} }
&:hover:after { &:global(:hover:after) {
content: ""; content: "";
background: url('../assets/img/btn-light.png') no-repeat center; background: url("../assets/img/btn-light.png") no-repeat center;
background-size: cover; background-size: cover;
// background-position: 0 0; // background-position: 0 0;
position: absolute; position: absolute;
...@@ -267,68 +267,66 @@ ...@@ -267,68 +267,66 @@
width: 206px; width: 206px;
height: 42px; height: 42px;
animation: opcity 2s ease-in-out infinite alternate; animation: opcity 2s ease-in-out infinite alternate;
} }
} }
.common-btn.active-btn { :global(.common-btn.active-btn) {
background: #000; background: #000;
} }
} }
} }
.warmingCenter-content { :global(.warmingCenter-content) {
box-sizing: border-box; box-sizing: border-box;
} }
} }
.layout-container-home { :global(.layout-container-home) {
background: url('./img/bg-home.jpg') no-repeat center; background: url("@/assets/img/bg-home.jpg") no-repeat center;
.layout-content { :global(.layout-content) {
display: none; display: none;
} }
} }
.el-breadcrumb { :global(.el-breadcrumb) {
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
padding-left: 20px; padding-left: 20px;
padding-top: 15px; padding-top: 15px;
&:after, &:global(:after),
&:before { &:global(before) {
display: table; display: table;
content: ""; content: "";
clear: both; clear: both;
} }
.el-breadcrumb__item { :global(.el-breadcrumb__item) {
float: left; float: left;
} }
.el-breadcrumb__item__inner, :global(.el-breadcrumb__item__inner),
.el-breadcrumb__item__inner a { :global(.el-breadcrumb__item__inner a) {
transition: color .15s linear; transition: color 0.15s linear;
color: #999999; color: #999999;
} }
.el-breadcrumb__separator { :global(.el-breadcrumb__separator) {
margin: 0 8px; margin: 0 8px;
color: #999999; color: #999999;
} }
.el-breadcrumb__item:last-child .el-breadcrumb__separator { :global(.el-breadcrumb__item:last-child .el-breadcrumb__separator) {
display: none; display: none;
} }
.el-breadcrumb__item:last-child .el-breadcrumb__item__inner { :global(.el-breadcrumb__item:last-child .el-breadcrumb__item__inner) {
color: #cccccc !important; color: #cccccc !important;
} }
} }
.modal-container { :global(.modal-container) {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
...@@ -338,10 +336,10 @@ ...@@ -338,10 +336,10 @@
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
text-align: left; text-align: left;
box-sizing: border-box; box-sizing: border-box;
padding: 25% ; padding: 25%;
line-height: 40px; line-height: 40px;
input { :global(input) {
-webkit-appearance: none; -webkit-appearance: none;
background-color: #fff; background-color: #fff;
background-image: none; background-image: none;
...@@ -355,12 +353,11 @@ ...@@ -355,12 +353,11 @@
line-height: 40px; line-height: 40px;
outline: none; outline: none;
padding: 0 15px; padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%; width: 100%;
} }
.modal-btn { :global(.modal-btn) {
display: inline-block; display: inline-block;
line-height: 1; line-height: 1;
white-space: nowrap; white-space: nowrap;
...@@ -373,7 +370,7 @@ ...@@ -373,7 +370,7 @@
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
margin: 0; margin: 0;
transition: .1s; transition: 0.1s;
font-weight: 500; font-weight: 500;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
......
dva/src/components/SideBar.js
import React from 'react'; import React from 'react';
import styles from './SideBar.less';
import { NavLink } from 'dva/router';
import { NavLink } from 'dva/router' console.log(styles);
const SideBar = (props) => { const SideBar = (props) => {
return ( return (
<div className="layout-sidebar"> <div className="layout-sidebar">
......
dva/src/components/SideBar.less 0 → 100644
.head {
background: none;
border: 1px solid red;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment