<template>
  <div>
    <div class="layui-body-header show">
      <span class="layui-body-header-title">消息通知</span>
      <span class="layui-breadcrumb pull-right" style="visibility: visible;">
        <a @click="tapClick">首页</a>
        <span lay-separator>/</span>
        <a>
          <cite>消息通知</cite>
        </a>
      </span>
    </div>
    <div style="padding: 20px;">
    <blockquote class="layui-elem-quote">
        <fieldset class="layui-elem-field">
            <legend>欢迎</legend>
            <div class="layui-field-box">
                hi，Winsun旗舰版发布了！
            </div>
        </fieldset>
    </blockquote>
    <blockquote class="layui-elem-quote">
        <fieldset class="layui-elem-field">
            <legend>你好</legend>
            <div class="layui-field-box">
                你好，世界！
            </div>
        </fieldset>
    </blockquote>
</div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        
      }
    },
    methods: {
      tapClick () {
        console.log(123);
        this.$router.push({path:'/dashboard/Monitor'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  // & = this
  $bg:#1890ff;
  .layui-body-header {
    .layui-body-header-title {
      border-left: 4px solid $bg;
      padding-left: 6px;
    }
    .pull-right {
      float: right;
    }
  }
  .layui-breadcrumb a {
    color: #999 !important;
  }
  .layui-breadcrumb a cite {
    color: #666;
    font-style: normal;
  }

  .layui-elem-quote {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border-left: 5px solid $bg;
    border-radius: 0 2px 2px 0;
    background-color: #fff;
}
.layui-elem-field {
    margin-bottom: 10px;
    padding: 0;
    border: 1px solid  #e6e6e6;
}
.layui-elem-field legend {
    margin-left: 20px;
    padding: 0 10px;
    font-size: 20px;
    font-weight: 300;
}
.layui-field-box {
    padding: 10px 15px;
}
legend {
    width: 72px;
    height: 26px;
}
</style>


