Skip to content

html / MeteorologicalBureau

Go to a project
Commit cbe52bba by hanjixin
Options

修改 css modoule

parent 079d3a90
Showing with 346 additions and 343 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
...@@ -2,385 +2,382 @@ ...@@ -2,385 +2,382 @@
@navHeight: 76px; @navHeight: 76px;
@keyframes opcity { @keyframes opcity {
0% { 0% {
opacity: 1; opacity: 1;
} }
100% { 100% {
opacity: 0.4; opacity: 0.4;
} }
} }
#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);
.layout-container { @shadow: 0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
width: 100vw; -0.1rem 0rem 0.5rem rgba(255, 255, 255, 0.3),
height: 100vh; 0rem 0.1rem 0.5rem rgba(255, 255, 255, 0.3),
0rem -0.1rem 0.5rem rgba(255, 255, 255, 0.3);
:global(.layout-container) {
width: 100vw;
height: 100vh;
position: relative;
background: url("@/assets/img/bg.jpg") no-repeat center;
background-size: cover;
:global(.layout-nav) {
height: @navHeight;
line-height: @navHeight;
// border: 1px solid red;
box-sizing: border-box;
background: #000;
color: white;
display: flex;
align-items: center;
padding-left: 30px;
background: url("@/assets/img/nav.png") no-repeat top;
background-size: 100%;
position: relative; position: relative;
background: url('./img/bg.jpg') no-repeat center;
background-size: cover;
:global(.light) {
position: absolute;
left: 0;
top: 0;
width: 380px;
}
:global(.logo) {
width: 30px;
height: 30px;
background: url("@/assets/yay.jpg") no-repeat center;
background-size: cover;
margin-right: 10px;
}
.layout-nav { :global(.time) {
height: @navHeight; color: white;
line-height: @navHeight; position: absolute;
// border: 1px solid red; top: 0;
box-sizing: border-box; right: 32px;
background: #000; }
color: white; }
display: flex;
align-items: center; :global(.layout-sidebar) {
padding-left: 30px; width: @sideWith;
background: url('./img/nav.png') no-repeat top; // border: 1px solid red;
background-size: 100%; height: calc(~"100% - 76px");
position: relative; background: url("@/assets/img/sidebar.png") no-repeat left;
background-size: 100%;
position: absolute;
top: @navHeight;
left: 0;
box-sizing: border-box;
.light { box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 380px;
}
.logo { :global(ul),
width: 30px; :global(li) {
height: 30px; list-style: none;
background: url('./yay.jpg') no-repeat center; }
background-size: cover;
margin-right: 10px;
}
.time { :global(ul) {
color: white; display: flex;
position: absolute; flex-direction: column;
top: 0; justify-content: space-around;
right: 32px; align-items: stretch;
} box-sizing: content-box;
padding: 93px 0;
} }
.layout-sidebar { :global(li) {
width: @sideWith; height: 45px;
// border: 1px solid red; line-height: 45px;
height: calc(~"100% - 76px");
background: url('./img/sidebar.png') no-repeat left;
background-size: 100%;
position: absolute;
top: @navHeight;
left: 0;
box-sizing: border-box;
box-sizing: border-box; &:nth-child(2) {
:global(a) {
padding-left: 37px;
ul, :global(.icon) {
li { background-image: url("@/assets/img/icon/6.png");
list-style: none; }
} }
}
&:nth-child(3) {
:global(a) {
padding-left: 49px;
ul { :global(.icon) {
display: flex; background-image: url("@/assets/img/icon/4.png");
flex-direction: column; }
justify-content: space-around;
align-items: stretch;
box-sizing: content-box;
padding: 93px 0;
} }
}
li { &:nth-child(4) {
height: 45px; :global(a) {
line-height: 45px; padding-left: 61px;
&:nth-child(2) { :global(.icon) {
a { background-image: url("@/assets/img/icon/5.png");
padding-left: 37px; }
.icon {
background-image: url(../assets/img/icon/6.png);
}
}
}
&:nth-child(3) {
a {
padding-left: 49px;
.icon {
background-image: url(../assets/img/icon/4.png);
}
}
}
&:nth-child(4) {
a {
padding-left: 61px;
.icon {
background-image: url(../assets/img/icon/5.png);
}
}
}
&:nth-child(5) {
a {
padding-left: 49px;
.icon {
background-image: url(../assets/img/icon/2.png);
}
}
}
&:nth-child(6) {
a {
padding-left: 37px;
.icon {
background-image: url(../assets/img/icon/1.png);
}
}
}
&:nth-child(7) {
a {
.icon {
background-image: url(../assets/img/icon/7.png);
}
}
}
a {
display: block;
height: 100%;
text-decoration: none;
color: #ced0d2;
font-size: 15px;
text-align: left;
box-sizing: border-box;
padding-left: 25px;
display: flex;
align-items: center;
.icon {
width: 35px;
height: 35px;
display: inline-block;
background: url('./img/icon/3.png') no-repeat center;
background-size: 90%;
}
// padding: 0 20px ;
&.active {
background: url('./img/select.png') no-repeat left top;
background-size: contain;
background-position: -0px 0;
// border-radius: 20px;
color: white;
font-weight: bolder;
font-size: 18px;
text-shadow: @shadow;
.icon {
background-size: 110%;
}
// border-color: #409eff;
}
}
border-radius: 20px;
// background-color: #409eff;
// border-color: #409eff;
text-align: center;
white-space: nowrap;
cursor: pointer;
color: #ced0d2;
margin:10px 0 15px;
} }
}
} &:nth-child(5) {
:global(a) {
padding-left: 49px;
.layout-content { :global(.icon) {
margin-left: @sideWith - 90px; background-image: url("@/assets/img/icon/2.png");
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-size: cover;
box-sizing: border-box;
padding-top: 27px;
.common-btn-back {
width: 94px;
height: 74px;
background: url('../assets/img/back.png') no-repeat left top;
background-size: cover;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 10;
} }
}
.common-btn-container { &:nth-child(6) {
display: flex; :global(a) {
flex-wrap: wrap; padding-left: 37px;
box-sizing: border-box;
padding: 20px; :global(.icon) {
background-image: url("@/assets/img/icon/1.png");
.common-btn { }
// border: 1px solid rebeccapurple;
background: url('../assets/img/btn-bg.png') no-repeat center;
background-size: contain;
font-size: 16px;
font-weight: 500;
color: white;
width: 206px;
text-align: center;
position: relative;
height: 42px;
padding: 5px;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
// line-height: 50px;
margin-bottom: 40px;
margin-right: 50px;
box-sizing: border-box;
&:hover {
text-shadow: @shadow;
}
&:hover:after {
content: "";
background: url('../assets/img/btn-light.png') no-repeat center;
background-size: cover;
// background-position: 0 0;
position: absolute;
top: 46%;
left: 0;
width: 206px;
height: 42px;
animation: opcity 2s ease-in-out infinite alternate;
}
}
.common-btn.active-btn {
background: #000;
}
} }
} }
.warmingCenter-content { &:nth-child(7) {
:global(a) {
:global(.icon) {
background-image: url("@/assets/img/icon/7.png");
}
}
}
:global(a) {
display: block;
height: 100%;
text-decoration: none;
color: #ced0d2;
font-size: 15px;
text-align: left;
box-sizing: border-box; box-sizing: border-box;
} padding-left: 25px;
} display: flex;
align-items: center;
.layout-container-home { :global(.icon) {
background: url('./img/bg-home.jpg') no-repeat center; width: 35px;
height: 35px;
display: inline-block;
background: url("@/assets/img/icon/3.png") no-repeat center;
background-size: 90%;
}
.layout-content { // padding: 0 20px ;
display: none;
}
}
.el-breadcrumb { &:global(.active) {
font-size: 14px; background: url("@/assets/img/select.png") no-repeat left top;
line-height: 1; background-size: contain;
padding-left: 20px; background-position: -0px 0;
padding-top: 15px; // border-radius: 20px;
color: white;
&:after, font-weight: bolder;
&:before { font-size: 18px;
display: table; text-shadow: @shadow;
content: "";
clear: both;
}
.el-breadcrumb__item { :global(.icon) {
float: left; background-size: 110%;
} }
.el-breadcrumb__item__inner, // border-color: #409eff;
.el-breadcrumb__item__inner a { }
transition: color .15s linear; }
color: #999999;
border-radius: 20px;
// background-color: #409eff;
// border-color: #409eff;
text-align: center;
white-space: nowrap;
cursor: pointer;
color: #ced0d2;
margin: 10px 0 15px;
} }
}
.el-breadcrumb__separator {
margin: 0 8px; :global(.layout-content) {
color: #999999; 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-size: cover;
box-sizing: border-box;
padding-top: 27px;
:global(.common-btn-back) {
width: 94px;
height: 74px;
background: url("../assets/img/back.png") no-repeat left top;
background-size: cover;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 10;
} }
.el-breadcrumb__item:last-child .el-breadcrumb__separator { :global(.common-btn-container) {
display: none; display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 20px;
:global(.common-btn) {
// border: 1px solid rebeccapurple;
background: url("../assets/img/btn-bg.png") no-repeat center;
background-size: contain;
font-size: 16px;
font-weight: 500;
color: white;
width: 206px;
text-align: center;
position: relative;
height: 42px;
padding: 5px;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
// line-height: 50px;
margin-bottom: 40px;
margin-right: 50px;
box-sizing: border-box;
&:global(:hover) {
text-shadow: @shadow;
}
} &:global(:hover:after) {
content: "";
background: url("../assets/img/btn-light.png") no-repeat center;
background-size: cover;
// background-position: 0 0;
position: absolute;
top: 46%;
left: 0;
width: 206px;
height: 42px;
animation: opcity 2s ease-in-out infinite alternate;
}
}
.el-breadcrumb__item:last-child .el-breadcrumb__item__inner { :global(.common-btn.active-btn) {
color: #cccccc !important; background: #000;
}
} }
} }
.modal-container { :global(.warmingCenter-content) {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.6);
text-align: left;
box-sizing: border-box; box-sizing: border-box;
padding: 25% ; }
line-height: 40px; }
input { :global(.layout-container-home) {
-webkit-appearance: none; background: url("@/assets/img/bg-home.jpg") no-repeat center;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.modal-btn { :global(.layout-content) {
display: none;
display: inline-block; }
line-height: 1; }
white-space: nowrap;
cursor: pointer; :global(.el-breadcrumb) {
background: #fff; font-size: 14px;
border: 1px solid #dcdfe6; line-height: 1;
color: #606266; padding-left: 20px;
-webkit-appearance: none; padding-top: 15px;
text-align: center;
box-sizing: border-box; &:global(:after),
outline: none; &:global(before) {
margin: 0; display: table;
transition: .1s; content: "";
font-weight: 500; clear: both;
-moz-user-select: none; }
-webkit-user-select: none;
-ms-user-select: none; :global(.el-breadcrumb__item) {
padding: 12px 20px; float: left;
font-size: 14px; }
border-radius: 4px;
margin-top: 20px; :global(.el-breadcrumb__item__inner),
} :global(.el-breadcrumb__item__inner a) {
} transition: color 0.15s linear;
\ No newline at end of file color: #999999;
}
:global(.el-breadcrumb__separator) {
margin: 0 8px;
color: #999999;
}
:global(.el-breadcrumb__item:last-child .el-breadcrumb__separator) {
display: none;
}
:global(.el-breadcrumb__item:last-child .el-breadcrumb__item__inner) {
color: #cccccc !important;
}
}
:global(.modal-container) {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.6);
text-align: left;
box-sizing: border-box;
padding: 25%;
line-height: 40px;
:global(input) {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
:global(.modal-btn) {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: 0.1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
margin-top: 20px;
}
}
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