vue基于elementul做一个消息通知的小弹窗页面

效果图

上代码

html部分：注意，消息内容部分我是写的静态的，后面肯定是要后端传数据循环的，不需要写这么多div。留一个循环就行。

<!-- 消息通知 -->
        <el-menu-item index="2" class="navbar_popover">
          <el-badge :value="10" class="item">
            <el-popover placement="bottom" width="330" trigger="click" >
              <i class="el-icon-bell" slot="reference"></i>
              <!-- 头部选项 -->
              <el-menu
                mode="horizontal"
                active-text-color="#40aaf7"
                :default-active="activeIndex"
                @select="handleSelect"
                class="el-menu-demo"
              >
                <el-menu-item index="1">通知(5)</el-menu-item>
                <el-menu-item index="2">消息(4)</el-menu-item>
                <el-menu-item index="3">待办(3)</el-menu-item>
              </el-menu>
              <!-- 消息内容 循环部分 -->
              <div class="box">
                <div class="notification_text">
                  <img
                    src="../../static/img/youjian.png"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>您收到一份周报</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
                <div class="notification_text">
                  <img
                    src="../../static/img/dindin.jpg"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>您推荐的妮妮已经通过面试</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
                <div class="notification_text">
                  <img
                    src="../../static/img/jiahao.png"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>607#机器出现异常</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
                <div class="notification_text">
                  <img
                    src="../../static/img/xinxin.png"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>您有一条系统通知</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
                <div class="notification_text">
                  <img
                    src="../../static/img/youjian.png"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>您收到一份月报</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
                <div class="notification_text">
                  <img
                    src="../../static/img/dindin.jpg"
                    alt="上升"
                    class="left_image"
                  />
                  <div class="text">
                    <p>您有一条消息通知</p>
                    <p style="font-size: 12px; color: #ccc">2021年8月3日</p>
                  </div>
                </div>
              </div>
              <!-- 底部按钮部分 -->
              <div class="bottom_button">
                <!-- 这个地方不能换行不然会因为inlineblock出现4px的空隙把按钮顶下去！！ -->
                <span class="bottom_button_left">清空</span><span class="bottom_button_right">查看更多</span>
              </div>
            </el-popover>
          </el-badge>
        </el-menu-item>

css部分：

<style lang="scss" scoped>
.el-menu-demo .el-menu-item,
.el-submenu__title {
  height: 35px;
  line-height: 35px;
}
.el-menu-demo {
  padding: 0 20px;
}
//图片
.left_image {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -20px;
  border-radius: 50%;
}
//每一条
.notification_text {
  width: 100%;
  height: 80px;
  border-bottom: 1px #ccc solid;
  position: relative;
}
//底部按钮
.bottom_button {
  width: 330px;
  height: 50px;
  border-top: #ccc 1px solid;
  position: absolute;
  bottom: 0;
  left: 0;
}
//左右按钮
.bottom_button_left,
.bottom_button_right {
  display: inline-block;
  width: 164px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
//左按钮
.bottom_button_left {
  border-right: solid 1px #ccc;
}
//左按钮
.bottom_button_left:hover {
  color: #40aaf7;
}
//右按钮
.bottom_button_right:hover {
  color: #40aaf7;
}
//文字部分位置
.text {
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 65px;
}
//内容部分超出隐藏，给滚动条
.box {
  overflow: auto;
  height: 400px;
  margin-bottom: 37px;
}
//滚动条的样式
::-webkit-scrollbar {
  //滚动条宽高
  width: 5px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  //滚动条颜色和圆角
  background-color: #dbd9d9;
  border-radius: 3px;
}
</style>

这个目前只写了页面样式，逻辑还么有写，后续如果写了再更新。