shuohuang首页tab2静态页完善,页面优化

hanbaoshan

2021-01-21 e32af94f41a414960454d3bf39c1e27674fbede5

 src/assets/css/common.scss

@@ -1,208 +1,569 @@

/*定位*/
.tl{text-align: left;}
.tc{text-align: center;}
.tr{text-align: right;}
.bc{margin-left: auto;margin-right: auto;}
.fl{float: left; display:inline;}
.fr{float: right; display:inline;}
.cb{clear:both;}
.cl{clear: left;}
.cr{clear: right;}
.tl {
  text-align: left;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.bc {
  margin-left: auto;
  margin-right: auto;
}
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.cb {
  clear: both;
}
.cl {
  clear: left;
}
.cr {
  clear: right;
}

/*文字排版*/
.f12 {
  font-size: 12px;
}
.f13 {
  font-size: 13px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.f22 {
  font-size: 23px;
}
.f25 {
  font-size: 25px;
}
.f30 {
  font-size: 30px;
}
.f35 {
  font-size: 35px;
}
.f40 {
  font-size: 40px;
}
.f45 {
  font-size: 45px;
}
.f50 {
  font-size: 50px;
}
.f55 {
  font-size: 55px;
}
.f60 {
  font-size: 60px;
}
.f65 {
  font-size: 65px;
}
.fb {
  font-weight: bold;
}
.fn {
  font-weight: normal;
}
.t2 {
  text-indent: 2em;
}
.lh150 {
  line-height: 150%;
}
.lh180 {
  line-height: 180%;
}
.lh200 {
  line-height: 200%;
}
.unl {
  text-decoration: underline;
}
.no_unl {
  text-decoration: none;
}

 /*文字排版*/
 .f12{font-size: 12px;}
 .f13{font-size: 13px;}
 .f14{font-size: 14px;}
 .f16{font-size: 16px;}
 .f18{font-size: 18px;}
 .f20{font-size: 20px;}
 .f22{font-size: 23px;}
 .f25{font-size: 25px;}
 .f30{font-size: 30px;}
 .f35{font-size: 35px;}
 .f40{font-size: 40px;}
 .f45{font-size: 45px;}
 .f50{font-size: 50px;}
 .f55{font-size: 55px;}
 .f60{font-size: 60px;}
 .f65{font-size: 65px;}
 .fb{font-weight: bold;}
 .fn{font-weight: normal;}
 .t2{text-indent: 2em;}
 .lh150{line-height:150%;}
 .lh180{line-height:180%;}
 .lh200{line-height:200%;}
 .unl{text-decoration: underline;}
 .no_unl{text-decoration: none;}
.clearfix:after {
  display: block;
  content: '';
  clear: both;
}
.clearfix {
  zoom: 1;
}
.vm {
  vertical-align: middle;
}


.clearfix:after{ display:block; content:''; clear:both;}
.clearfix{ zoom:1;}
.vm{vertical-align: middle;}

.pr{position: relative;}
.pa{position: absolute;}
.pa100{position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
.zoom{zoom:1;}
.hidden{visibility: hidden;}
.none{display: none}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.pa100 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.zoom {
  zoom: 1;
}
.hidden {
  visibility: hidden;
}
.none {
  display: none;
}
/*长度高度*/
.w10{width: 10px;}
.w20{width: 20px;}
.w30{width: 30px;}
.w40{width: 40px;}
.w50{width: 50px;}
.w70{width: 70px;}
.w90{width: 90px;}
.w100{width: 100px;}
.w300{width: 300px;}
.w500{width: 500px;}
.w600{width: 600px;}
.w700{width: 700px;}
.w800{width: 800px;}
.w{width: 100%;}
.h50{height: 50px;}
.h100{height: 100px;}
.h200{height: 200px;}
.h{height: 100%;}
.w10 {
  width: 10px;
}
.w20 {
  width: 20px;
}
.w30 {
  width: 30px;
}
.w40 {
  width: 40px;
}
.w50 {
  width: 50px;
}
.w70 {
  width: 70px;
}
.w90 {
  width: 90px;
}
.w100 {
  width: 100px;
}
.w300 {
  width: 300px;
}
.w500 {
  width: 500px;
}
.w600 {
  width: 600px;
}
.w700 {
  width: 700px;
}
.w800 {
  width: 800px;
}
.w {
  width: 100%;
}
.h50 {
  height: 50px;
}
.h100 {
  height: 100px;
}
.h200 {
  height: 200px;
}
.h {
  height: 100%;
}

/*编剧*/
.ma{margin: auto;}
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}
.mb100{margin-bottom: 100px;}
.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml50{margin-left: 50px;}
.ml100{margin-left: 100px;}
.mr5{margin-right: 5px;}
.mr10{margin-right:10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr50{margin-right: 50px;}
.mr100{margin-right: 100px;}
.p5{padding: 5px;}
.p10{padding:10px;}
.p15{padding: 15px;}
.p20{padding: 20px;}
.p30{padding: 30px;}
.p50{padding: 50px;}
.p100{padding: 100px;}
.pt5{padding-top: 5px;}
.pt10{padding-top:10px;}
.pt15{padding-top: 15px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt50{padding-top: 50px;}
.pt100{padding-top: 100px;}
.pb5{padding-bottom: 5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom: 15px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb50{padding-bottom: 50px;}
.pb100{padding-bottom: 100px;}
.pl5{padding-left: 5px;}
.pl10{padding-left:10px;}
.pl15{padding-left: 15px;}
.pl20{padding-left: 20px;}
.pl30{padding-left: 30px;}
.pl50{padding-left: 50px;}
.pl60{padding-left: 60px;}
.pl100{padding-left: 100px;}
.pr5{padding-right: 5px;}
.pr10{padding-right:10px;}
.pr15{padding-right: 15px;}
.pr20{padding-right: 20px;}
.pr30{padding-right: 30px;}
.pr50{padding-right: 50px;}
.pr100{padding-right: 100px;}
.pl-checkbox{padding-left:44px;}
.pd10{padding:10px;}
.pd20{padding:20px;}

.mg10{margin:10px;}
.mg20{margin:20px;}
.mg30{margin:30px;}
.p0m0{padding:0; margin: 0;}
.cursor-pointer{cursor: pointer;}
.dis-inleblock{ display: inline-block; }
.dis-inline{ display: inline; }
.dis-block{ display: block; }
.text-overflow{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
.ma {
  margin: auto;
}
.overflow-y{overflow-y: auto;overflow-x:hidden;}
.overflow-x{overflow-x: auto;overflow-y:hidden;}
.overflow-auto{overflow: auto;}
.overflow-hidden{overflow:hidden;}

.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}

.vertical-top{vertical-align: top;}
.vertical-middle{vertical-align: middle;}
.vertical-bottom{vertical-align: bottom;}
.border-box{box-sizing: border-box;}
.flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
.m10 {
  margin: 10px;
}
.width100{width: 100%;}
.width50{width: 50%;}
.width60{width: 60%;}
.width70{width: 70%;}
.m15 {
  margin: 15px;
}
.m30 {
  margin: 30px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt50 {
  margin-top: 50px;
}
.mt100 {
  margin-top: 100px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb30 {
  margin-bottom: 30px;
}
.mb50 {
  margin-bottom: 50px;
}
.mb100 {
  margin-bottom: 100px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.ml50 {
  margin-left: 50px;
}
.ml100 {
  margin-left: 100px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr50 {
  margin-right: 50px;
}
.mr100 {
  margin-right: 100px;
}
.p5 {
  padding: 5px;
}
.p10 {
  padding: 10px;
}
.p15 {
  padding: 15px;
}
.p20 {
  padding: 20px;
}
.p30 {
  padding: 30px;
}
.p50 {
  padding: 50px;
}
.p100 {
  padding: 100px;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt30 {
  padding-top: 30px;
}
.pt50 {
  padding-top: 50px;
}
.pt100 {
  padding-top: 100px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb20 {
  padding-bottom: 20px;
}
.pb30 {
  padding-bottom: 30px;
}
.pb50 {
  padding-bottom: 50px;
}
.pb100 {
  padding-bottom: 100px;
}
.pl5 {
  padding-left: 5px;
}
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pl30 {
  padding-left: 30px;
}
.pl50 {
  padding-left: 50px;
}
.pl60 {
  padding-left: 60px;
}
.pl100 {
  padding-left: 100px;
}
.pr5 {
  padding-right: 5px;
}
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pr30 {
  padding-right: 30px;
}
.pr50 {
  padding-right: 50px;
}
.pr100 {
  padding-right: 100px;
}
.pl-checkbox {
  padding-left: 44px;
}
.pd10 {
  padding: 10px;
}
.pd20 {
  padding: 20px;
}

.height100{height: 100%}
.height40{height: 40%}
.height50{height: 50%}
.height60{height: 60%}
.height70{height: 70%}
.height80{height: 80%}
.mg10 {
  margin: 10px;
}
.mg20 {
  margin: 20px;
}
.mg30 {
  margin: 30px;
}
.p0m0 {
  padding: 0;
  margin: 0;
}
.cursor-pointer {
  cursor: pointer;
}
.dis-inleblock {
  display: inline-block;
}
.dis-inline {
  display: inline;
}
.dis-block {
  display: block;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-y {
  overflow-y: auto;
  overflow-x: hidden;
}
.overflow-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}

.height50-10{height: calc(50% - 10px);}
.height40-10{height: calc(40% - 10px);}
.height30-10{height: calc(30% - 10px);}
.height100-10{height: calc(100% - 10px);}
.height100-20{height: calc(100% - 20px);}
.height100-25{height: calc(100% - 25px);}
.height100-30{height: calc(100% - 30px);}
.height100-40{height: calc(100% - 40px);}
.height100-45{height: calc(100% - 45px);}
.height100-50{height: calc(100% - 50px);}
.height100-55{height: calc(100% - 55px);}
.height100-60{height: calc(100% - 60px);}
.height100-65{height: calc(100% - 65px);}
.height100-70{height: calc(100% - 70px);}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.vertical-top {
  vertical-align: top;
}
.vertical-middle {
  vertical-align: middle;
}
.vertical-bottom {
  vertical-align: bottom;
}
.border-box {
  box-sizing: border-box;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.width100 {
  width: 100%;
}
.width50 {
  width: 50%;
}
.width60 {
  width: 60%;
}
.width70 {
  width: 70%;
}

.height100 {
  height: 100%;
}
.height40 {
  height: 40%;
}
.height50 {
  height: 50%;
}
.height60 {
  height: 60%;
}
.height70 {
  height: 70%;
}
.height80 {
  height: 80%;
}

.height50-10 {
  height: calc(50% - 10px);
}
.height40-10 {
  height: calc(40% - 10px);
}
.height30-10 {
  height: calc(30% - 10px);
}
.height100-10 {
  height: calc(100% - 10px);
}
.height100-20 {
  height: calc(100% - 20px);
}
.height100-25 {
  height: calc(100% - 25px);
}
.height100-30 {
  height: calc(100% - 30px);
}
.height100-40 {
  height: calc(100% - 40px);
}
.height100-45 {
  height: calc(100% - 45px);
}
.height100-50 {
  height: calc(100% - 50px);
}
.height100-55 {
  height: calc(100% - 55px);
}
.height100-60 {
  height: calc(100% - 60px);
}
.height100-65 {
  height: calc(100% - 65px);
}
.height100-70 {
  height: calc(100% - 70px);
}
.height100-75 {
  height: calc(100% - 75px);
}
.height100-80{height: calc(100% - 80px);}
.height100-85{height: calc(100% - 85px);}
.height100-80 {
  height: calc(100% - 80px);
}
.height100-85 {
  height: calc(100% - 85px);
}
.height100-90 {
  height: calc(100% - 90px);
}
@@ -212,17 +573,19 @@
.height100-100 {
  height: calc(100% - 100px);
}
.height100-120{height: calc(100% - 120px);}
.height100-120 {
  height: calc(100% - 120px);
}
.is-always-shadow {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bg-card-blue{
.bg-card-blue {
  background: #f4fcff;
}

.radius-circle{
.radius-circle {
  border-radius: 50%;
  overflow: hidden;
}
@@ -330,3 +693,29 @@
//   border-color: #3d68e1;
//   background-color: #3d68e1;
// }
.table-area {
  .el-table {
    border: 1px solid #ddd !important;
    thead {
      color: #111 !important;
      th {
        background: #f4f4f4;
      }
    }
    // thead th {
    //   padding: 8px 0;
    //   font-family: PingFangSC-Regular, PingFang SC;
    // }
    .cell {
      padding-left: 30px;
    }

    .operation {
      span {
        font-size: 14px;
        color: #1a99ff;
        padding-right: 10px;
      }
    }
  }
}