add src/layout/AlertMessage.vue

Strides-Admin/src/layout/AlertMessage.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="alert-message-view">
+    <div class="alert-message-list" v-if="messageList.length > 0">
+      <div :class="'alert-message-item ' + (isShow ? '' : (index < 5 ? 'show' + index : 'show'))" v-for="(item,index) in messageList" :key="index">
+        <i class="el-icon-warning"></i>
+        <div class="alert-message-text" :title="item">{{item}}</div>
+        <i class="el-icon-arrow-down" style="font-weight: bold;" @click="switchShow" v-if="!isShow"></i>
+        <i class="el-icon-arrow-up" style="font-weight: bold;" @click="switchShow" v-else-if="index==0"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import apiBase from "@/api/apiBase.js";
+export default {
+  name: "AlertMessage",
+  props: {
+    
+  },
+  data() {
+    return {
+      isShow: false,
+      messageList: [
+        //"11111111111","2222222222","33333333333","444444444444444","55555555555",
+      ]
+    };
+  },
+  mounted() {
+    this.getMessageList();
+  },
+  methods: {
+    switchShow() {
+      this.isShow = !this.isShow;
+    },
+    getMessageList() {
+      apiBase.getAlertMessageList().then(res => {
+        if (res.data && res.data.length) {
+          this.messageList = res.data;
+        }
+      }).catch(err => {
+        
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+ .alert-message-view {
+   top: 10px;
+   left: 10%;
+   right: 10%;
+   z-index: 1020;
+   position: fixed;
+ }
+ .alert-message-list {
+   display: flex;
+   align-items: center;
+   flex-direction: column;
+ }
+ .alert-message-item {
+   width: 100%;
+   height: 40px;
+   color: white;
+   display: flex;
+   overflow: hidden;
+   font-size: 16px;
+   max-width: 1200px;
+   margin-bottom: 10px;
+   transition: all .4s;
+   padding: 0 16px;
+   border-radius: 6px;
+   align-items: center;
+   border: 1px solid #ff5656;
+   background-color: #ff0000;
+   box-shadow: 0px 1px 10px rgba(255, 0, 0, .6);
+ }
+ .alert-message-item.show {
+   transform: translate(0, -100vh);
+ }
+ .alert-message-item.show1 {
+   transform: translate(5px, -45px);
+ }
+ .alert-message-item.show2 {
+   transform: translate(10px, -90px);
+ }
+ .alert-message-item.show3 {
+   transform: translate(15px, -135px);
+ }
+ .alert-message-item.show4 {
+   transform: translate(20px, -180px);
+ }
+ .alert-message-text {
+   flex: 1;
+   overflow: hidden;
+   padding: 0 10px;
+   white-space: nowrap;
+   text-overflow: ellipsis;
+ }
+</style>