zuel-itsm-3.0.2/css/index.css

header {
  width: 100%;
  padding: 15px 50px 15px 15px;
  background-color: #005395;
  line-height: 66px;
  color: #fff;
  font-size: 18px;
  position: relative;
  z-index: 1;
}

.logo .line {
  margin: 0 16px;
}

.logo img {
  height: 36px;
}

.logOut {
  line-height: 36px;
  cursor: pointer;
  position: relative;
}

.logOut .down {
  display: inline-block;
  width: 14px;
  height: 9px;
  background: url(../imgs/icon_xiala.png) center no-repeat;
  -ms-behavior: url(backgroundsize.min.htc);
  behavior: url(backgroundsize.min.htc);
  background-size: cover;
}

.logOut .up {
  display: inline-block;
  width: 14px;
  height: 9px;
  background: url(../imgs/icon_shangla.png) center no-repeat;
  -ms-behavior: url(backgroundsize.min.htc);
  behavior: url(backgroundsize.min.htc);
  background-size: cover;
}

.logOut .logOutWrap {
  display: none;
  width: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  height: 34px;
  text-align: center;
  z-index: 9;
  overflow: hidden;
  border-radius: 6px;
  behavior: url(PIE.htc);
  font-size: 14px;
}

.logOut .logOutWrap li {
  height: 34px;
  line-height: 34px;
  background-color: #fff;
  color: #333;
  padding-left: 16px;
}

.logOut .logOutWrap li:hover {
  background-color: #e6eef4;
}

.bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 1300px;
}

article {
  width: 100%;
  position: absolute;
  top: 66px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../imgs/BG_web.png) center no-repeat;
  -ms-behavior: url(backgroundsize.min.htc);
  behavior: url(backgroundsize.min.htc);
  background-size: cover;
  padding: 16px 0;
}

article > .content {
  width: 1020px;
  height: 100%;
  margin: 0 auto;
}

article > .content .left,
article > .content .right {
  width: 300px;
  height: 100%;
  display: inline-block;
  overflow: hidden;
}

article > .content .center {
  width: 400px;
  height: 100%;
  margin: 0 10px;
  position: relative;
}

article > .content .left {
  position: relative;
}

.left .top {
  width: 100%;
  height: 216px;
  position: absolute;
  overflow: hidden;
}

.left .bottom {
  width: 100%;
  height: 100%;
  padding-top: 226px;
}

.left .bottom .con {
  width: 100%;
  height: 100%;
  position: relative;
}

.left .bottom .con .con-wrap {
  width: 100%;
  overflow-y: auto;
  position: absolute;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
}

.opcBg {
  border-radius: 8px;
  background: #fff;
  background: rgba(255, 255, 255, 0.85);
  filter: alpha(opacity=85);
}
.opcBg .opcBg_searchBox {
  width: 100%;
  top: 41px;
  right: 0;
  margin-top: 0;
  display: none;
}
.opcBg .opcBg_title {
  height: 40px;
  padding-left: 0;
}
.opcBg .opcBg_item {
  height: 100%;
  line-height: 40px;
  width: 50%;
  text-align: center;
  border-right: 1px solid #fff;
  cursor: pointer;
}
.opcBg .opcBg_item:last-of-type {
  border-right: none;
}
.opcBg .opcBg_item.active {
  background-color: #005395;
  color: #fff;
}
.opcBg .opcBg_item.active .iconfont {
  color: #fff;
}

.title {
  font-size: 16px;
  line-height: 40px;
  padding-left: 16px;
  border-bottom: 1px solid #f9f9f9;
  position: relative;
  color: #333;
}

.infoItem {
  padding: 8px 16px;
  border-bottom: 1px solid #f3f3f3;
}

.infoItem .time {
  font-size: 12px;
  color: #999;
}

.infoItem .time .fr {
  color: #666;
}

.infoItem .content {
  position: relative;
  height: 21px;
  overflow: hidden;
}

.infoItem .content.second {
  height: 42px;
}

.infoItem .content p {
  width: 85%;
  height: 100%;
}

.infoItem .detail {
  color: #005395;
  position: absolute;
  top: 0;
  right: 0;
}

.infoItem .detail:hover {
  text-decoration: underline;
  cursor: pointer;
}

.searchBox {
  width: 170px;
  height: 22px;
  border: 1px solid #d1d1d1;
  background: #fff;
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -12px;
}

.searchBox input {
  width: 100%;
  height: 100%;
  border: none;
  padding-left: 10px;
  padding-right: 30px;
  vertical-align: top;
}

.searchBox input:focus {
  border: none;
  outline: none;
}

.searchBox .icon {
  display: inline-block;
  width: 30px;
  position: absolute;
  top: -1px;
  right: 0;
  color: #999;
  text-align: center;
  cursor: pointer;
}

.center .centerTitle {
  text-align: center;
  font-size: 18px;
  color: #333;
  font-weight: 800;
  padding-left: 18px;
  padding-right: 18px;
}

.form {
  padding-left: 18px;
  padding-right: 18px;
  overflow-y: auto;
  position: absolute;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 27px;
}

.form .formItem {
  margin-bottom: 5px;
}

.form .formItem input,
.form .formItem textarea {
  color: #999;
}
.form .formItem .label {
  line-height: 34px;
}

.form .formItem .label strong {
  line-height: 34px;
  color: #999;
  font-size: 12px;
}

.form .formItem .inpBox {
  width: 100%;
  height: 34px;
  padding: 5px 16px;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
}

.form .formItem .inpBox input {
  width: 100%;
  height: 100%;
  vertical-align: top;
  border: none;
  font-size: 12px;
}

/* 区域地点 */

.form .formItem .areaplace {
  width: 100%;
  height: 34px;
}

.form .formItem .areaplace .areaBox {
  width: 100%;
  height: 100%;
}

.form .formItem .areaplace .areaBox select {
  width: 173px;
  height: 100%;
  padding-bottom: 5px\9;
}

/* 详细地址&&报修内容 */

.form .formItem .address textarea,
.form .formItem .repair textarea {
  width: 100%;
  resize: none;
  height: 64px;
  padding: 9px 20px;
  font-size: 12px;
}

/* 报修图片 */

.form .formItem .f-images-list .f-images-item {
  float: left;
  width: 50px;
  height: 51px;
  background-color: #fff;
  margin-left: 98px;
  position: relative;
  background: url(./../imgs/image_tiantjiatupian.png) no-repeat 0 0;
  z-index: 9;
}

.form .formItem .f-images-list .f-images-item .form-file {
  width: 100%;
  height: 100%;
}

.form .formItem .f-images-list .f-images-item:first-child {
  margin-left: 0;
}

.form .formItem .f-images-list .f-images-item input {
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
}

.form .formItem .f-images-list .f-images-item .f-thumb-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.form .formItem .f-images-list .f-images-item .f-thumb-wrap .f-thumb {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.form .formItem .f-images-list .f-images-item .f-thumb-close {
  font-size: 22px;
  position: absolute;
  right: -7px;
  top: -13px;
  cursor: pointer;
  color: #991f00;
  z-index: 99999;
}

/* 提交 */

.form .f-submit {
  display: block;
  width: 128px;
  height: 34px;
  background-color: #005395;
  border-radius: 2px;
  text-align: center;
  line-height: 34px;
  margin: 40px auto 0;
  cursor: pointer;
  color: #fff;
  border: 0 none;
}

.form .f-submit.f-submit--disable {
  cursor: not-allowed;
}

.form .f-submit:hover {
  background-color: #00437a;
}

.form .f-submit.f-submit--disable:hover {
  background-color: #005395;
}

/* 最新报修 */

.right {
  position: relative;
}

.right .r-list {
  position: absolute;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

.right .r-list .r-item {
  height: 165px;
  padding: 16px 8px 16px 16px;
  overflow: hidden;
  color: #333;
  margin-top: 1px;
  border-bottom: 1px solid #fff;
}

.right .r-list .r-item .r-item-title {
  font-weight: bold;
  height: 20px;
  line-height: 20px;
}

.right .r-list .r-item .r-item-content {
  line-height: 20px;
  height: 40px;
  margin-top: 4px;
}

.right .r-list .r-item .r-item-info {
  margin-top: 4px;
}

.right .r-list .r-item .r-item-info strong {
  font-size: 12px;
  color: #999;
  line-height: 22px;
}

.right .r-list .r-item .r-item-info a {
  color: #005395;
  margin-right: 8px;
  line-height: 22px;
}

.right .r-list .r-item .r-item-process {
  margin-top: 10px;
  margin-left: 7px;
}

.right .r-list .r-item .r-item-process .r-item-processitem {
  width: 61px;
  height: 40px;
  border-top: 2px solid #ddd;
  position: relative;
}

.right .r-list .r-item .r-item-process .r-item-processitem.active {
  border-top: 2px solid #005395;
}

.right .r-list .r-item .r-item-process .r-item-processitem .outerCircleEnd {
  display: none;
}

.right .r-list .r-item .r-item-process .r-item-processitem.end .outerCircleEnd {
  display: block;
  position: absolute;
  left: 0px;
  top: -12px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  behavior: url(PIE.htc);
  overflow: hidden;
}

.right .r-list .r-item .r-item-process .r-item-processitem.end .innerCircleEnd {
  width: 20px;
  height: 20px;
  position: relative;
  left: 0;
  top: -4px;
  top: -6px\9;
  color: #67a52a;
  font-size: 20px;
  background-color: #fff;
  border-radius: 50%;
  behavior: url(PIE.htc);
}

.right
  .r-list
  .r-item
  .r-item-process
  .r-item-processitem.r-item-processitem__last {
  width: 14px;
}

.right .r-list .r-item .r-item-process .r-item-processitem .outerCircle {
  position: absolute;
  left: 0px;
  top: -9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  behavior: url(PIE.htc);
  border: 1px solid #ddd;
  background-color: #fff;
}

.right .r-list .r-item .r-item-process .r-item-processitem .innerCircle {
  width: 8px;
  height: 8px;
  background-color: #ddd;
  border-radius: 50%;
  behavior: url(PIE.htc);
  position: absolute;
  left: 2px;
  top: 2px;
}

.right .r-list .r-item .r-item-process .r-item-processitem.active .outerCircle {
  border: 1px solid #005395;
  background-color: #fff;
}

.right .r-list .r-item .r-item-process .r-item-processitem.active .innerCircle {
  background-color: #005395;
}

.right .r-list .r-item .r-item-process .r-item-processitem h3 {
  font-size: 12px;
  margin-top: 10px;
  position: relative;
  left: -7px;
  display: inline-block;
}

.right
  .r-list
  .r-item
  .r-item-process
  .r-item-processitem.r-item-processitem__last
  h3 {
  width: 30px;
}

/* pop1 */

#pop1 {
  display: none;
  width: 600px;
  height: 730px;
  max-height: 100%;
  max-height: none\9;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 999;
  overflow: hidden;
}

#pop1 .pop1-title {
  font-size: 16px;
  color: #333;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 2px solid #eee;
  position: relative;
}

#pop1 .pop1-title .pop1-title-icon {
  font-size: 16px;
  color: #666;
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
}

#pop1 .pop1-hd {
  margin-left: 16px;
  margin-right: 16px;
  height: 80%;
  background-color: #f5f5f5;
  border-radius: 2px;
  border: 1px solid #d1d1d1;
  margin-top: 16px;
  overflow-y: auto;
}

#pop1 .pop1-hd .pop1-hd__item {
  padding-top: 16px;
  padding-bottom: 18px;
  margin-left: 16px;
  margin-right: 16px;
  color: #333;
  border-top: 2px solid #ddd;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__table  {
  border-collapse: collapse;
  border: 1px solid #ccc;
  width: 100%;
  margin-top: 8px;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__table td  {
  text-align: center;
  border: 1px solid #ccc;
  word-break: break-all;
  font-size: 12px;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__table td.xh  {
  width: 40px;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__table td.clr  {
  width: 60px;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__table td.date  {
  width: 130px;
}

#pop1 .pop1-hd .pop1-hd__item:first-child {
  border-top: none;
}

#pop1 .pop1-hd .pop1-hd__item .pop1-hd__itemBlock {
  padding-top: 16px;
}

#pop1 .pop1-hd h3 {
  font-size: 16px;
  font-weight: bold;
}

#pop1 .pop1-hd .pop1-hd__itemList {
  width: 100%;
  float: left;
  margin-top: 4px;
}

#pop1 .pop1-hd .pop1-hd__itemList.pop1-hd__itemList--five {
  width: 50%;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList.pop1-hd__itemList--five.pop1-hd__itemList--tag {
  padding-left: 125px;
}

#pop1 .pop1-hd .pop1-hd__itemList .pop1-hd__itemListImgs {
  display: inline-block;
  vertical-align: top;
}

#pop1 .pop1-hd .pop1-hd__itemList .pop1-hd__itemListImgs img {
  width: 50px;
  height: 51px;
  float: left;
  margin-left: 16px;
}

#pop1 .pop1-hd .pop1-hd__itemList .pop1-hd__itemListImgs img:first-child {
  margin-left: 0;
}

#pop1 .pop1-hd .pop1-hd__itemList .pop1-hd__itemListProcess {
  font-size: 12px;
  color: #999;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight {
  width: 460px;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem {
  margin-top: 8px;
  position: relative;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  span {
  display: inline-block;
  height: 16px;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  h4 {
  position: absolute;
  left: -74px;
  top: 8px;
  width: 76px;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  h4.end {
  color: #333;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  .pop1-hd__processCircle {
  position: absolute;
  left: -30px;
  top: 12px;
  width: 8px;
  height: 8px;
  background-color: #79a3c4;
  border-radius: 50%;
  behavior: url(PIE.htc);
  z-index: 9;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  .pop1-hd__processCircle.end {
  background-color: #00437a;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  .pop1-hd__processCircle:before {
  content: "";
  height: 38px;
  width: 0;
  border-left: 2px dashed #ddd;
  position: absolute;
  left: 50%;
  bottom: 8px;
  margin-left: -1px;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem:first-child
  .pop1-hd__processCircle:before {
  display: none;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  .pop1-hd__processCircle:after {
  content: "";
  height: 0;
  width: 12px;
  border-top: 1px dashed #ddd;
  position: absolute;
  left: 8px;
  top: 50%;
}

#pop1
  .pop1-hd
  .pop1-hd__itemList
  .pop1-hd__itemListProcess
  .pop1-hd__processRight
  .pop1-hd__processRightItem
  p {
  word-break: break-all;
  line-height: 18px;
  margin-top: 4px;
}

#pop1 .pop1-tips .pop1-tipsBd {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  text-align: left;
}

/* 评价 start */

#pop1 .pop1-evaluate .pop1-evaluateWrap {
  margin-top: 16px;
}

#pop1 .pop1-evaluate .pop1-evaluateOperate #evaluate .star-text {
  color: #79a3c4;
}

#pop1 .pop1-evaluate .pop1-evaluateOperate .star {
  font-size: 0;
}

#pop1 .pop1-evaluate .pop1-evaluateOperate .star i {
  font-size: 14px;
  color: #eaeaea;
  cursor: pointer;
  margin-right: 8px;
}

#pop1 .pop1-evaluate .pop1-evaluateOperate .star i.active {
  color: #005395;
}

#pop1 .pop1-evaluate .evaluate-textareaWrap {
  margin-top: 8px;
}

#pop1 .pop1-evaluate .evaluate-textarea {
  height: 216px;
  width: 100%;
  resize: none;
  padding: 16px;
}

/* 评价 end */

/* 撤回 start */

#pop1 .pop1-back {
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

#pop1 .pop1-back h3 {
  color: #333;
  font-size: 14px;
  font-weight: normal;
  margin: 3px 0;
}

#pop1 .pop1-back h3 span {
  color: #fd3d55;
}

#pop1 .pop1-back .back-textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #d1d1d1;
  resize: none;
  padding-left: 16px;
  padding-top: 16px;
}

/* 撤回 end */

/* 提示 start */

#pop1 .pop1-tips {
  text-align: center;
}

#pop1 .pop1-tips i {
  font-size: 26px;
  color: #a2d516;
}

#pop1 .pop1-tips p {
  color: #333;
  text-align: center;
}

/* 提示 end */

/* 公告详情 start */

#pop1 .notice .notice-dept {
  margin-top: 16px;
}

#pop1 .notice .notice-content {
  margin-top: 16px;
}

#pop1 .notice .notice-content img {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 100%;
}

/* 公告详情 end */

/* 常见问题详情 start */

#pop1 .solution .solution-createUser {
  margin-top: 16px;
}

#pop1 .solution .solution-content {
  margin-top: 16px;
}

#pop1 .solution .solution-content img {
  margin-top: 16px;
  margin-bottom: 16px;
  width: 100%;
}

/* 常见问题详情 end */

#pop1 .pop1-operate {
  margin-top: 14px;
}

#pop1 .pop1-operate .pop1-oneBtn,
#pop1 .pop1-operate .pop1-twoBtn {
  text-align: center;
  font-size: 0;
}

#pop1 .pop1-operate .pop1-twoBtn {
  display: none;
}

#pop1 .pop1-operate .pop1-oneBtn .pop1-operateBtn {
  width: 120px;
  height: 34px;
  text-align: center;
  line-height: 32px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #005395;
}

#pop1 .pop1-operate .pop1-twoBtn .pop1-operateBtn {
  width: 80px;
  height: 34px;
  text-align: center;
  line-height: 34px;
  border-radius: 2px;
  display: inline-block;
  cursor: pointer;
}

#pop1 .pop1-operate .pop1-operateBtn.oneConfirm {
  background-color: #e6eef4;
  font-size: 14px;
  color: #005395;
}

#pop1 .pop1-operate .pop1-operateBtn.oneConfirm:hover {
  background-color: #79a3c4;
  border-color: #79a3c4;
}

#pop1 .pop1-operate .pop1-operateBtn.twoConfirm {
  background-color: #005395;
  color: #fff;
  font-size: 14px;
}

#pop1 .pop1-operate .pop1-operateBtn.twoConfirm:hover {
  background-color: #00437a;
}

#pop1 .pop1-operate .pop1-operateBtn.twoCancel {
  background-color: #fff;
  color: #666;
  border: 1px solid #ddd;
  font-size: 14px;
  margin-left: 8px;
  line-height: 32px;
}

#pop1 .pop1-operate .pop1-operateBtn.twoCancel:hover {
  border: 1px solid #999;
}

/* 遮罩 */

#mask {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  -pie-background: rgba(0, 0, 0, 0.5);
  behavior: url(PIE.htc);
  z-index: 998;
}

/* 无内容 */

#notice_list {
  position: relative;
  height: 175px;
}

.noContent {
  width: 156px;
  height: 110px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -78px;
  margin-top: -55px;
}

.noContent p {
  text-align: center;
  font-size: 12px;
  color: #666;
}

/* loading */

.loading {
  width: 35px;
  height: 35px;
  background: url(./../imgs/loading.gif) no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: none;
}

/* 图片点击放大预览 */

.pop1-hd__itemBxImgsMask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -pie-background: rgba(0, 0, 0, 0.5);
  behavior: url(PIE.htc);
  z-index: 99999;
}

.pop1-hd__itemBxImgsMask img {
  width: 500px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #000;
}
/* 故障地点 */
.address,
.ks {
  position: relative;
}
#bx_address,
#bx_ks {
  width: 100%;
  height: 34px;
  padding: 5px 16px;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 2px;
}
#bx_address_ul,
#bx_ks_ul {
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  max-height: 136px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #d1d1d1;
  border-top: none;
  z-index: 9999;
  display: none;
}
#bx_address_ul li,
#bx_ks_ul li {
  height: 34px;
  border-bottom: 1px solid #d1d1d1;
  line-height: 32px;
  padding: 0 16px;
  cursor: pointer;
}
/* #bx_address_ul li:hover, */
/* #bx_ks_ul li:hover { */
  /* background-color: #005395; */
  /* color: #fff; */
/* } */
#bx_address_ul li:last-child,
#bx_ks_ul li:last-child {
  border-bottom: none;
}
/* 自动建单 */
#bx_eventClass {
  width: 100%;
  height: 100%;
  border: 0 none;
  padding: 5px 16px;
  color: #999;
}
.bx_eventClass {
  padding: 0 !important;
}