screen.vue 1.49 KB
<template>
  <div class="">
    <ul class="dici-wrap">
      <li>
        <p class="parkName">赤峰诱导屏名称</p>
        <ul class="diciList">
          <li>
            编号 :B8888B8888
          </li>
          <li>
            异常类型 :设备故障
          </li>
          <li>
            故障时间 :2019-01-91 15:31:00
          </li>
        </ul>

      </li>
      <li>
        <p class="parkName">赤峰诱导屏名称</p>
        <ul class="diciList">
          <li>
            编号 :B8888B8888
          </li>
          <li>
            异常类型 :设备故障
          </li>
          <li>
            故障时间 :2019-01-91 15:31:00
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'screen',
  created() {
    document.title = '诱导屏故障'
  }
}
</script>

<style scoped lang="scss">
  .dici-wrap > li {
    background-color: $whiteBg;
    margin-bottom: 12px;
    padding: 15px 15px 0 15px;
  }

  .parkName {
    font-size: 1.8rem;
    font-weight: 700;
    padding-left: 2.5rem;
    background: url("../assets/images/screenName.png") no-repeat 0 center;
    background-size: 1.8rem 1.8rem;
  }

  .diciList {
    border-radius: 4px;
    margin-top: 12px;
    > li {
      height: 3.8rem;
      line-height: 3.8rem;
      position: relative;
      &:after {
        @include border-1px(#D9D9D9, bottom);
        opacity: .5;
      }
      &:last-child:after {
        height: 0;
      }
    }
  }
</style>