添加/修改公共样式

This commit is contained in:
jqtmviyu@gmail.com 2021-01-13 16:08:44 +08:00
parent 8788782eb2
commit b54da980fd
3 changed files with 598 additions and 6 deletions

564
src/styles/common.scss Normal file
View File

@ -0,0 +1,564 @@
.infoPosin {
position: relative;
}
.infoR {
position: absolute;
right: 0;
top: -50px
}
.boxMain {
padding: 0 30px;
position: relative;
}
.boxMar {
margin: 10px 0 0;
}
.mainInfo {
margin-bottom: 15px;
}
.rInfo {
position: relative;
}
.rInfo {
.fr {
position: absolute;
right: 5px;
top: -45px;
z-index: 9;
}
}
// 头部信息
.titInfo {
border-bottom: 1px solid #e1e1e1;
padding: 10px 0;
}
.borBom {
border-bottom: 1px solid #e1e1e1;
}
.mainInfo {
.titInfo {
font-weight: 700;
margin-bottom: 15px;
}
}
// 标题
.centInfo {
text-align: center;
font-size: 18px;
font-weight: 700;
color: #666;
}
.infoR {
text-align: right
}
// 表单
.formInfo {
// .el-input__inner{width: 80%;}
// .el-input{width: 70%;}
.textR {
vertical-align: top;
width: 100%;
padding-right: 10px;
}
}
.seleInfo {
.el-select--medium {
width: 100px;
}
}
.el-form-item {
margin-bottom: 20px;
}
.posInfo {
padding: 0 0 0 20px;
span {
padding-right: 8px;
em {
&.active {
color: #8a97f8
}
&.disabled {
color: #999;
}
}
}
}
.inputW2 {
width: 200px;
}
.inputW {
width: 300px;
}
.inputW5 {
width: 500px;
}
.seleW {
.el-input__inner {
border: 0 none;
padding: 0;
width: 60px;
}
}
.formInfo .seleW .el-input {
width: 100%
}
.upload-file {
display: inline-block;
}
/* 谷歌 */
.formInfo input::-webkit-outer-spin-button,
.formInfo input::-webkit-inner-spin-button,
.phoneInfo input::-webkit-outer-spin-button,
.phoneInfo input::-webkit-inner-spin-button,
.el-form-item input::-webkit-outer-spin-button,
.el-form-item input::-webkit-inner-spin-button {
-webkit-appearance: none;
line-height: 30px;
}
/* 火狐 */
.phoneInfo input[type="number"],
.formInfo input [type="number"],
.el-form-item input [type="number"] {
-moz-appearance: textfield;
line-height: 30px;
}
// 搜索
.showMore {
text-align: center;
padding: 10px 0 0;
}
.formInfo {
.el-input--medium {
.el-input__inner {
// width: 220px;
}
}
.inputW {
.el-input__inner {
width: 300px;
}
}
}
.tagInfo .el-tag .el-icon-close {
color: #fff;
}
.tags-container {
span {
margin-right: 5px;
}
padding: 10px 0 0;
.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
}
}
.serachInput {
display: inline-block;
margin: 0 10px;
.el-input--medium {
width: 150px;
.el-input__inner {
height: 28px;
line-height: 28px;
}
}
}
.searchInfo {
text-align: right;
padding: 0 0 15px;
.inputW {
width: 150px;
}
}
// 弹窗信息
.el-dialog__header {
background: #66b1ff;
.el-icon-close:before {
color: #fff;
}
.el-dialog__title {
color: #fff;
}
}
// 图标
.fa-eye {
color: #ccc;
cursor: pointer;
}
.iconInfo span {
cursor: pointer;
// padding-left: 20px;
}
// 字体颜色
.colRed {
color: red;
}
.col999 {
color: #999;
}
.colGreen {
color: #42b983
}
// 对齐
.textR {
text-align: right;
width: 150px;
display: inline-block;
}
.userInfo {
.textR {
width: 150px;
}
}
// 员工
.userInfo {
padding: 30px;
}
.userHead {
width: 80px;
height: 80px;
border-radius: 40px;
border: 1px solid #ccc;
background: #e1e1e1;
overflow: hidden;
margin: 0 0 0 50px;
text-align: right;
}
.headInfo {
p {
padding: 5px 0;
}
}
.leaveInfo {
.userHead {
text-align: right;
float: right;
margin-right: 30px;
}
border-bottom: 1px solid #dcdfe6;
padding: 20px 50px;
margin-bottom: 20px;
// border-bottom: 1px solid #dcdfe6;
span {
color: #999;
}
em {
padding: 0 15px 0 5px;
}
}
.headInfo {
.headText {
margin-left: 130px;
.textR {
width: 80px;
}
.el-row {
overflow: hidden;
line-height: 36px;
margin-bottom: 10px;
}
}
}
// table报表
.tableList {
border: 1px solid #ccc;
border-collapse: collapse;
td {
border: 1px solid #ccc;
height: 35px;
padding: 0 8px;
}
th {
border: 1px solid #ccc;
height: 35px;
width: 250px;
text-align: left;
font-weight: normal;
padding: 0 8px;
background: #f9f9f9;
}
.title {
background: #e1e1e1;
}
}
// .el-breadcrumb__separator,.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{color: #fff;}
// 报表上传
.uploadBox {
width: 60%;
border-radius: 5px;
border: 1px dashed #d9d9d9;
margin: 100px auto 0;
.upload-demo {
display: inline-block;
width: 49%;
float: left;
text-align: center;
.el-upload {
display: block;
}
.el-upload-dragger {
width: auto;
border: 0 none;
border-left: 1px dashed #d9d9d9
}
}
// .upload-text {
// position: absolute;
// top: 50%;
// }
}
.warningTip {
// background: url(./../assets/401_images/401.gif) no-repeat 50% 0;
text-align: center;
padding: 100px 0;
}
// 分页
.pagination {
margin-top: 10px;
text-align: right;
}
// 底部
.dialog-footer {
text-align: center;
}
.quitApproval {
display: flex;
padding: 15px;
.contLeft {
flex: 4;
background: #fff;
margin-right: 10px;
padding: 20px;
.topTit {
display: flex;
border-bottom: solid 1px #ccc;
img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.more {
display: inline-block;
position: relative;
text-align: center;
width: 16px;
line-height: 14px;
font-size: 12px;
top: -1px;
left: 5px;
border: solid 1px #666;
color: #666;
border-radius: 50px;
}
.info {
margin-left: 10px;
line-height: 25px;
.name {
span {
background: $green1;
color: #fff;
padding: 4px 10px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
}
.stName{
span {
background: $red;
color: #fff;
padding: 4px 10px;
border-radius: 3px;
margin-left: 10px;
font-size: 12px;
}
}
.time {
ul {
position: relative;
display: inline-block;
li {
position: absolute;
border-radius: 3px;
box-shadow: 1px 2px 2px #ccc;
top: 34px;
left: -43px;
width: 500px;
padding: 5px 10px;
line-height: 20px;
display: none;
background: #fff;
border: solid 1px #ccc;
}
li::before {
position: absolute;
content: "";
left: 50px;
top: -15px;
background: #fff;
color: #ccc;
}
}
ul:hover li {
display: block;
}
}
}
}
.content {
padding: 10px 0;
min-height: 500px;
p {
margin: 25px 0;
span {
display: inline-block;
width: 220px;
text-align: right;
padding-right: 5px;
margin-right: 15px;
color: #999;
border-right: solid 1px #ccc;
vertical-align: top;
}
}
}
}
.contRit {
flex: 1;
background: #fff;
padding: 0 20px;
.topTit {
margin-bottom: 10px;
border-bottom: solid 1px #ccc;
line-height: 40px;
}
.Items {
padding: 20px 0;
li {
display: flex;
min-height: 70px;
.name {
position: relative;
text-align: center;
line-height: 24px;
padding: 0 0 10px 0;
flex: 3;
border-right: solid 1px #ccc;
}
.name:after {
content: " ";
border-radius: 50%;
position: absolute;
width: 10px;
height: 10px;
border: solid 2px $green1;
right: -5px;
top: 0px;
background: #fff;
}
.stName {
position: relative;
text-align: center;
line-height: 24px;
padding: 0 0 10px 0;
flex: 3;
border-right: solid 1px #ccc;
}
.stName:after {
content: " ";
border-radius: 50%;
position: absolute;
width: 20px;
height: 20px;
border: solid 2px $red;
right: -5px;
top: 0px;
background: #fff;
}
.act {
flex: 2;
text-align: center;
}
}
}
}
}
.hr-block {
margin: 10px 0;
}

View File

@ -3,6 +3,7 @@
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './common.scss'; //引入common.scss样式表
body {
height: 100%;

View File

@ -1,10 +1,25 @@
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
// base color
$blue: #409EFF;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$orange:#fa7c4d;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$green1: #44b549;
// sidebar
$menuText:#ffffff;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg: transparent;
$menuHover:#ffffff;
$menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
@ -23,3 +38,15 @@ $sideBarWidth: 210px;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
}
$cl-0: #cfeffe;
$cl-1: #a8f8bb;
$cl-2: #fedbd7;
$cl-3: #ffe8c9;
$cl-4: #fdfcd5;
$cl-10: #25a49e;
// //sidebar
// $menuBg:#001529;
// $subMenuBg:#001529;
// $menuHover:#001529;