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 {
// '@': resolve('src'),
// }
// },
"disableCSSModules": true,
// "disableCSSModules": true,
define: {
'process.env': env,
}
......
dva/src/assets/common.less
......@@ -2,385 +2,382 @@
@navHeight: 76px;
@keyframes opcity {
0% {
opacity: 1;
}
0% {
opacity: 1;
}
100% {
opacity: 0.4;
}
100% {
opacity: 0.4;
}
}
#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);
#textShadow(opcity) {
}
.layout-container {
width: 100vw;
height: 100vh;
@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);
: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;
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 {
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('./img/nav.png') no-repeat top;
background-size: 100%;
position: relative;
:global(.time) {
color: white;
position: absolute;
top: 0;
right: 32px;
}
}
:global(.layout-sidebar) {
width: @sideWith;
// border: 1px solid red;
height: calc(~"100% - 76px");
background: url("@/assets/img/sidebar.png") no-repeat left;
background-size: 100%;
position: absolute;
top: @navHeight;
left: 0;
box-sizing: border-box;
.light {
position: absolute;
left: 0;
top: 0;
width: 380px;
}
box-sizing: border-box;
.logo {
width: 30px;
height: 30px;
background: url('./yay.jpg') no-repeat center;
background-size: cover;
margin-right: 10px;
}
:global(ul),
:global(li) {
list-style: none;
}
.time {
color: white;
position: absolute;
top: 0;
right: 32px;
}
:global(ul) {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
box-sizing: content-box;
padding: 93px 0;
}
.layout-sidebar {
width: @sideWith;
// border: 1px solid red;
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;
:global(li) {
height: 45px;
line-height: 45px;
box-sizing: border-box;
&:nth-child(2) {
:global(a) {
padding-left: 37px;
ul,
li {
list-style: none;
:global(.icon) {
background-image: url("@/assets/img/icon/6.png");
}
}
}
&:nth-child(3) {
:global(a) {
padding-left: 49px;
ul {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
box-sizing: content-box;
padding: 93px 0;
:global(.icon) {
background-image: url("@/assets/img/icon/4.png");
}
}
}
li {
height: 45px;
line-height: 45px;
&:nth-child(2) {
a {
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(4) {
:global(a) {
padding-left: 61px;
:global(.icon) {
background-image: url("@/assets/img/icon/5.png");
}
}
}
}
&:nth-child(5) {
:global(a) {
padding-left: 49px;
.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-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;
:global(.icon) {
background-image: url("@/assets/img/icon/2.png");
}
}
}
.common-btn-container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding: 20px;
.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;
}
&:nth-child(6) {
:global(a) {
padding-left: 37px;
:global(.icon) {
background-image: url("@/assets/img/icon/1.png");
}
}
}
}
.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;
}
}
padding-left: 25px;
display: flex;
align-items: center;
.layout-container-home {
background: url('./img/bg-home.jpg') no-repeat center;
:global(.icon) {
width: 35px;
height: 35px;
display: inline-block;
background: url("@/assets/img/icon/3.png") no-repeat center;
background-size: 90%;
}
.layout-content {
display: none;
}
}
// padding: 0 20px ;
.el-breadcrumb {
font-size: 14px;
line-height: 1;
padding-left: 20px;
padding-top: 15px;
&:after,
&:before {
display: table;
content: "";
clear: both;
}
&:global(.active) {
background: url("@/assets/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;
.el-breadcrumb__item {
float: left;
}
:global(.icon) {
background-size: 110%;
}
.el-breadcrumb__item__inner,
.el-breadcrumb__item__inner a {
transition: color .15s linear;
color: #999999;
// 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;
}
.el-breadcrumb__separator {
margin: 0 8px;
color: #999999;
}
: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-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 {
display: none;
:global(.common-btn-container) {
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 {
color: #cccccc !important;
:global(.common-btn.active-btn) {
background: #000;
}
}
}
}
.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;
:global(.warmingCenter-content) {
box-sizing: border-box;
padding: 25% ;
line-height: 40px;
}
}
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 .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
:global(.layout-container-home) {
background: url("@/assets/img/bg-home.jpg") no-repeat center;
.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: .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;
}
}
\ No newline at end of file
:global(.layout-content) {
display: none;
}
}
:global(.el-breadcrumb) {
font-size: 14px;
line-height: 1;
padding-left: 20px;
padding-top: 15px;
&:global(:after),
&:global(before) {
display: table;
content: "";
clear: both;
}
:global(.el-breadcrumb__item) {
float: left;
}
:global(.el-breadcrumb__item__inner),
:global(.el-breadcrumb__item__inner a) {
transition: color 0.15s linear;
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 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