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 {
// '@': resolve('src'),
// }
// },
"disableCSSModules": true,
// "disableCSSModules": true,
define: {
'process.env': env,
}
......
dva/src/assets/common.less
......@@ -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;
height: 100vh;
position: relative;
background: url('./img/bg.jpg') no-repeat center;
background: url("@/assets/img/bg.jpg") no-repeat center;
background-size: cover;
.layout-nav {
:global(.layout-nav) {
height: @navHeight;
line-height: @navHeight;
// border: 1px solid red;
......@@ -34,26 +36,26 @@
display: flex;
align-items: center;
padding-left: 30px;
background: url('./img/nav.png') no-repeat top;
background: url("@/assets/img/nav.png") no-repeat top;
background-size: 100%;
position: relative;
.light {
:global(.light) {
position: absolute;
left: 0;
top: 0;
width: 380px;
}
.logo {
:global(.logo) {
width: 30px;
height: 30px;
background: url('./yay.jpg') no-repeat center;
background: url("@/assets/yay.jpg") no-repeat center;
background-size: cover;
margin-right: 10px;
}
.time {
:global(.time) {
color: white;
position: absolute;
top: 0;
......@@ -61,11 +63,11 @@
}
}
.layout-sidebar {
:global(.layout-sidebar) {
width: @sideWith;
// border: 1px solid red;
height: calc(~"100% - 76px");
background: url('./img/sidebar.png') no-repeat left;
background: url("@/assets/img/sidebar.png") no-repeat left;
background-size: 100%;
position: absolute;
top: @navHeight;
......@@ -74,12 +76,12 @@
box-sizing: border-box;
ul,
li {
:global(ul),
:global(li) {
list-style: none;
}
ul {
:global(ul) {
display: flex;
flex-direction: column;
justify-content: space-around;
......@@ -88,70 +90,69 @@
padding: 93px 0;
}
li {
:global(li) {
height: 45px;
line-height: 45px;
&:nth-child(2) {
a {
:global(a) {
padding-left: 37px;
.icon {
background-image: url(../assets/img/icon/6.png);
:global(.icon) {
background-image: url("@/assets/img/icon/6.png");
}
}
}
&:nth-child(3) {
a {
:global(a) {
padding-left: 49px;
.icon {
background-image: url(../assets/img/icon/4.png);
:global(.icon) {
background-image: url("@/assets/img/icon/4.png");
}
}
}
&:nth-child(4) {
a {
:global(a) {
padding-left: 61px;
.icon {
background-image: url(../assets/img/icon/5.png);
:global(.icon) {
background-image: url("@/assets/img/icon/5.png");
}
}
}
&:nth-child(5) {
a {
:global(a) {
padding-left: 49px;
.icon {
background-image: url(../assets/img/icon/2.png);
:global(.icon) {
background-image: url("@/assets/img/icon/2.png");
}
}
}
&:nth-child(6) {
a {
:global(a) {
padding-left: 37px;
.icon {
background-image: url(../assets/img/icon/1.png);
:global(.icon) {
background-image: url("@/assets/img/icon/1.png");
}
}
}
&:nth-child(7) {
a {
.icon {
background-image: url(../assets/img/icon/7.png);
:global(a) {
:global(.icon) {
background-image: url("@/assets/img/icon/7.png");
}
}
}
a {
:global(a) {
display: block;
height: 100%;
text-decoration: none;
......@@ -163,18 +164,18 @@
display: flex;
align-items: center;
.icon {
:global(.icon) {
width: 35px;
height: 35px;
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%;
}
// padding: 0 20px ;
&.active {
background: url('./img/select.png') no-repeat left top;
&:global(.active) {
background: url("@/assets/img/select.png") no-repeat left top;
background-size: contain;
background-position: -0px 0;
// border-radius: 20px;
......@@ -183,7 +184,7 @@
font-size: 18px;
text-shadow: @shadow;
.icon {
:global(.icon) {
background-size: 110%;
}
......@@ -198,26 +199,25 @@
white-space: nowrap;
cursor: pointer;
color: #ced0d2;
margin:10px 0 15px;
margin: 10px 0 15px;
}
}
.layout-content {
:global(.layout-content) {
margin-left: @sideWith - 90px;
height: calc(~"100% - 76px");
padding-left: 90px;
// width: calc(100vw - @sideWith);
// 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;
box-sizing: border-box;
padding-top: 27px;
.common-btn-back {
:global(.common-btn-back) {
width: 94px;
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;
position: fixed;
bottom: 50px;
......@@ -225,15 +225,15 @@
z-index: 10;
}
.common-btn-container {
:global(.common-btn-container) {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 20px;
.common-btn {
:global(.common-btn) {
// 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;
font-size: 16px;
font-weight: 500;
......@@ -252,13 +252,13 @@
margin-right: 50px;
box-sizing: border-box;
&:hover {
&:global(:hover) {
text-shadow: @shadow;
}
&:hover:after {
&:global(:hover:after) {
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-position: 0 0;
position: absolute;
......@@ -267,68 +267,66 @@
width: 206px;
height: 42px;
animation: opcity 2s ease-in-out infinite alternate;
}
}
.common-btn.active-btn {
:global(.common-btn.active-btn) {
background: #000;
}
}
}
.warmingCenter-content {
:global(.warmingCenter-content) {
box-sizing: border-box;
}
}
.layout-container-home {
background: url('./img/bg-home.jpg') no-repeat center;
:global(.layout-container-home) {
background: url("@/assets/img/bg-home.jpg") no-repeat center;
.layout-content {
:global(.layout-content) {
display: none;
}
}
.el-breadcrumb {
:global(.el-breadcrumb) {
font-size: 14px;
line-height: 1;
padding-left: 20px;
padding-top: 15px;
&:after,
&:before {
&:global(:after),
&:global(before) {
display: table;
content: "";
clear: both;
}
.el-breadcrumb__item {
:global(.el-breadcrumb__item) {
float: left;
}
.el-breadcrumb__item__inner,
.el-breadcrumb__item__inner a {
transition: color .15s linear;
:global(.el-breadcrumb__item__inner),
:global(.el-breadcrumb__item__inner a) {
transition: color 0.15s linear;
color: #999999;
}
.el-breadcrumb__separator {
:global(.el-breadcrumb__separator) {
margin: 0 8px;
color: #999999;
}
.el-breadcrumb__item:last-child .el-breadcrumb__separator {
:global(.el-breadcrumb__item:last-child .el-breadcrumb__separator) {
display: none;
}
.el-breadcrumb__item:last-child .el-breadcrumb__item__inner {
:global(.el-breadcrumb__item:last-child .el-breadcrumb__item__inner) {
color: #cccccc !important;
}
}
.modal-container {
:global(.modal-container) {
position: fixed;
left: 0;
top: 0;
......@@ -338,10 +336,10 @@
background: rgba(0, 0, 0, 0.6);
text-align: left;
box-sizing: border-box;
padding: 25% ;
padding: 25%;
line-height: 40px;
input {
:global(input) {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
......@@ -355,12 +353,11 @@
line-height: 40px;
outline: none;
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%;
}
.modal-btn {
:global(.modal-btn) {
display: inline-block;
line-height: 1;
white-space: nowrap;
......@@ -373,7 +370,7 @@
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
......
dva/src/components/SideBar.js
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) => {
return (
<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