Pro/public/static/track/css/style.css

*{
	padding: 0;
	margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    width:auto\9; /* ie8 */
    -ms-interpolation-mode:bicubic;/*为了照顾ie图片缩放失真*/
}

.arrow_box{animation: glow 800ms ease-out infinite alternate; }
@keyframes glow {
    0% {
        border-color: #ff0000;
        box-shadow: 0 0 5px rgba(255,0,0,.1), inset 0 0 5px rgba(255,0,0,.1), 0 1px 0 #ff0000;
    }
    100% {
        border-color: #9e0000;
        box-shadow: 0 0 20px rgba(255,0,0,1), inset 0 0 10px rgba(255,0,0,1), 0 1px 0 #9e0000;
    }
}
input,img,select,button {vertical-align:middle; border:none; text-decoration:none; outline:none; }
table{border-collapse: collapse;border-spacing:0; }
a:hover,a:active{color:#6DD1C1; text-decoration:none;} 
input[type="submit"] {cursor: pointer;}
button {cursor: pointer;}
input::-moz-focus-inner { border: 0; padding: 0;}
input,img,select,button {vertical-align:middle; border:none; text-decoration: none; outline:none;}
ol,ul {list-style: none;}  
input[type="number"]{
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=checkbox]{
  vertical-align: middle;
  display: inline-block;
  width: 25px;
  height: 25px;
  -webkit-appearance:none;
  background: url(../img/checkbox.png) no-repeat;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}
input[type=checkbox]:checked{
  background-image: url(../img/checkbox-active.png);
}
.transition{transition: all 0.5s; -moz-transition:  all 0.5s; -webkit-transition:  all 0.5s; -o-transition:  all 0.5s; }
.clearfix{zoom:1;}
.clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
.fl{
  float: left !important;
}
.fr{
  float: right !important;
}
.btn:active{opacity: 0.8; }
.btn.on{
  background-color: #09B3A6;
  color: #fff !important;
background-image: linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
background-image: -webkit-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
background-image: -moz-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);
background-image: -o-linear-gradient(0deg,#09B3A6 12%,#0AB19F 52%,#06A395 100%);}
.view{
  width: 100vw;
  height:100vh;
  min-width:1024px;
  min-height:620px;
  background-color:#f2f2f2;
  overflow: hidden;
}
.view .list{
  float: left;
  height: 100%;
  width: 30%;
}
.view .list_card{
  float: left;
  height: 100%;
  width: 40%;
}
.view .b_title_num{
  width: 432px;
  height: 30px;
  margin-top: 10px;
}
.view .title_num{
  width: 62px;
  height: 30px;
  margin-left: 10px;
  float: left;
  font-size: 20;
  text-align: center;
}
.view .default_card{
  width: 432px;
  height: 86px;
  margin-top: 5px;
}
.view .default_card_num{
  width: 62px;
  height: 86px;
  margin-left: 10px;
  float: left;
}
.view .change_card{
  width: 432px;
  height: 148px;
  margin-top: 10px;
}
.view .change_card_num{
  width: 62px;
  height: 148px;
  margin-left: 10px;
  float: left;
}
.view .card_result{
  margin-top: 30px;
  color: #555;
  font-weight: bold;
}
.view .list.control{
  width: 15%;
  background: #20222A;
}
.view .list .border{
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  box-sizing: border-box;
}
.view .list .title{
  display: block;
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: #fff;
  color: #333;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.view .list .tip{
  font-size: 13px;
  color: #0e9588;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.view .list.control .title{
  background: #171717;
  color: #fff;
  font-size: 16px;
}
.control .number-box{
  padding:5px;
}
.control .number-box .item{
  width: 20%;
  float: left;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
}
.control .number-box strong{
  padding-top: 20px;
  padding-bottom: 5px;
  display: block;
  color: #b1b1b1;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.control .number-box .item input{
  width: 88%;
  margin: 0 auto;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  font-size: 16px;
  color: red;
  font-weight: bold;
  overflow: hidden;
}

.control .textarea-box{
  padding: 5px;
  padding-top: 20px;
  
}
.control .textarea-box textarea{
  width: 98%;
  max-width: 98%;
  min-width: 98%;
  display: block;
  margin: 0 auto;
  padding: 5px;
  border-radius: 2px;
  box-sizing: border-box;
  height: calc(100vh - 419px);
  overflow: auto;
  font-size: 14px;
}
.control .buttom-box{
  padding:10px 5px;
}
.control .buttom-box .btn{
  width: 30.7%;
  margin:5px 1.3%;
  float: left;
  height: 38px;
  line-height: 38px;
  padding: 0 18px;
  white-space: nowrap;
  text-align: center;
  font-size: 15px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 600;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.textarea-view{
  margin:5px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
}

.textarea-view .textarea{
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 216px;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 2px;
  border:1px solid #eee;
}

.btn-view{
  margin:5px;
  padding: 5px;
  box-sizing: border-box;
  background: #fff;
}
.btn-view .row{
  margin-bottom: 10px;
}
.btn-view .item{
  width: 45%;
  height: 30px;
  line-height: 30px;
  border: 1px solid #eee;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.btn-view .item label{
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  text-align: center;
  /*background:#6e8794;*/
  color: #555;
  font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn-view .item .text{
  width: 100%;
  padding-left: 34px;
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  display: block;
}
.btn-view .checkbox{
  width: 42.5%;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  color: #555;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.btn-view .checkbox .lab{
  padding-left: 5px;
  display: inline-block;
  height: 30px;
  overflow: hidden;
  vertical-align: middle;
}
.btn-view .btn{
  height: 30px;
  display: inline-block;
  font-size: 14px;
  border-radius: 2px;
  font-weight: 600;
  width: 18%;
  color: #555;
}

.btn-view .result{
  width: 58%;
  display: inline-block;
  vertical-align: middle;
}
.btn-view .result label{
  width: 50px;
}
.btn-view .result .text{
  padding-left: 54px;
  color: red;
  font-size: 20px;
}
.btn-view .box{
  padding-top: 5px;
}
.table-view{
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
    box-sizing: border-box;
    background: #fff;
    height:calc(100vh - 458px);
}
.table-view ul{
  display: block;
  width: 100%;
  height: calc(100% - 62px);
  border: 1px solid #eee;
  box-sizing: border-box;
  overflow-y: auto;
  margin-top: 2px;
}
.table-view ul li{
  font-size: 13px;
  display: block;
  padding: 2px 5px;
  overflow: hidden;
}
.table-view ul li input{
  background: none;
  width: 100%;
}
.table-view ul li.on{
  background: #ededed;
}
.table-view .btn{
  height: 38px;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  border-radius: 2px;
}
.blue_wlith{
  color:#fff;
  background-color:blue;
}
.yellow_red{
  color:red;
  background-color:yellow;
}
.black_wlith{
  color:#fff;
  background-color:#000;
}
.red{
  color: red;
}