<template>
  <view class="app-container">
    <u-navbar title="消息列表" :autoBack="true" :placeholder="true" leftIcon="">
      <view slot="right">
        <text class="nav-right">全部清空</text>
      </view>
    </u-navbar>
    <u-search
      height="75rpx"
      placeholder="搜索关键词"
      v-model="keyword"
      shape="square"
      :showAction="false"
      class="view-global"
      bgColor="#fff"
    ></u-search>
    <view class="msg-list">
      <view class="msg-item view-global">
        <view class="msg-icon" style="background-color: #367bef">
          <u-badge
            bgColor="#FE3434"
            max="99"
            value="9"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg3.png" mode="aspectFill"></image>
        </view>

        <view class="msg-middle">
          <view class="middle-main">执法二队-李小强</view>
          <view class="middle-sub">这是一条普通的消息详情</view>
        </view>
        <view class="msg-date">19:18</view>
      </view>
      <view class="msg-item view-global">
        <view class="msg-icon" style="background-color: #32b78b">
          <u-badge
            bgColor="#FE3434"
            max="99"
            value="99"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg2.png" mode="aspectFill"></image>
        </view>
        <view class="msg-middle">
          <view class="middle-main">消息通知</view>
          <view class="middle-sub">这是一条普通的消息详情</view>
        </view>
        <view class="msg-date">19:18</view>
      </view>
      <view class="msg-item view-global">
        <view class="msg-icon" style="background-color: #f08941">
          <u-badge
            bgColor="#FE3434"
            max="99"
            value="0"
            :absolute="true"
            :offset="[0, 0]"
          ></u-badge>
          <image src="/static/images/msg1.png" mode="aspectFill"></image>
        </view>
        <view class="msg-middle">
          <view class="middle-main">告警消息</view>
          <view class="middle-sub">这是一条普通的消息详情</view>
        </view>
        <view class="msg-date">19:18</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",
    };
  },
  onLoad() {},
};
</script>
<style lang="scss" scoped>
.msg-list {
  .msg-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 20rpx;

    .msg-icon {
      position: relative;
      height: 94rpx;
      width: 94rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        height: 44rpx;
        width: 44rpx;
      }
    }

    .msg-middle {
      flex: 1;
      box-sizing: border-box;
      padding-left: 20rpx;

      .middle-main {
        font-size: 32rpx;
        font-weight: bold;
        color: #2e2f31;
      }

      .middle-sub {
        margin-top: 12rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #616367;
      }
    }

    .msg-date {
      font-size: 24rpx;
      font-weight: 400;
      color: #9da2ab;
    }
  }
}
</style>
