style:通知公告

+<template>
+  <div class="my-outbox">
+    <div class="my-inbox" ref='box'>
+      <div class="my-list" :style="note" v-for="(item,index) in sendVal" :key='index' ref='list'>
+        <span class="my-uname">{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+export default {
+  name: 'my-marquee-left',
+  props: {
+    sendVal: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      note: {
+        backgroundSize: "20px 20px",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "1%  50%"
+      },
+      // 定时器标识
+      nowTime: null,
+      // 每一个内容的宽度
+      disArr: []
+    }
+  },
+  mounted () {
+    // var that = this
+    var item = this.$refs.list
+    var len = this.sendVal.length
+    var arr = []
+    // 因为设置的margin值一样，所以取第一个就行。
+    var margin = this.getMargin(item[0])
+    for (var i = 0; i < len; i++) {
+      arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
+    }
+    this.disArr = arr
+    this.moveLeft()
+  },
+  beforeDestroy () {
+    // 页面关闭清除定时器
+    clearInterval(this.nowTime)
+    // 清除定时器标识
+    this.nowTime = null
+  },
+  methods: {
+    // 获取margin属性
+    getMargin (obj) {
+      var marg = window.getComputedStyle(obj, null)['margin-right']
+      marg = marg.replace('px', '')
+      return Number(marg) // 强制转化成数字
+    },
+    // 移动的方法
+    moveLeft () {
+      var that = this
+      var outbox = this.$refs.box
+      // 初始位置
+      var startDis = 0
+      //   console.log('that.disArr: ', that.disArr)
+      this.nowTime = setInterval(function () {
+        startDis -= 0.5
+        // console.log('初始化移动：', startDis)
+        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
+          // 每次移动完一个元素的距离，就把这个元素的宽度
+          that.disArr.push(that.disArr.shift())
+          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
+          // console.log('that.sendVal: ', that.sendVal)
+          // console.log('that.sendVal: ', that.sendVal.shift())
+          that.sendVal.push(that.sendVal.shift())
+          startDis = 0
+          // console.log('移动')
+        } else {
+          // console.log('不来不来就不来...')
+        }
+        // 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效
+        // outbox.style = 'transform: translateX3d(' + startDis + 'px)' 
+        // 后面换了es6的模板字符串就可以了
+        outbox.style = `transform: translateX(${startDis}px)`
+        // outbox.style = 'transform: translateX(\' + startDis + \' px)'
+        // outbox.style.marginLeft = 'startDis'
+        // console.log('这里:', startDis)
+      }, 1000 / 60)
+    }
+  }
+}
+</script>
+  
+<style lang="scss" scoped>
+.my-outbox {
+  color: #fff;
+  overflow: hidden;
+  line-height: 28px;
+  // background: $light-blue;
+  width: 500px;
+
+  .my-inbox {
+    white-space: nowrap;
+
+    .my-list {
+      margin-right: 15px;
+      display: inline-block;
+      font-size: 14px;
+      text-indent: 30px;
+
+      .my-uname {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

 <template>
 <template>
-  <div class="navbar" v-theme.background="mTheme">
-    <div class="logo">
-      <img v-if="logo" :src="logo" class="header-logo">
-    </div>
-    <div class="backdrop">
-      <theme style="float: right;height: 26px;width: 26px;margin-top: 26px;" @change="themeChange" />
-    </div>
-    <div class="right-menu">
-      <el-dropdown class="avatar-container right-menu-item hover-effect" @command="handleCommand">
-        <div class="avatar-wrapper">
-          <span style="padding-right:10px">{{ name }}</span>
-          <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
-        </div>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="a">个人中心</el-dropdown-item>
-          <el-dropdown-item command="f">退出登录</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
+  <div class="navbar-con">
+    <div class="navbar" v-theme.background="mTheme">
+      <div class="logo">
+        <img v-if="logo" :src="logo" class="header-logo">
+      </div>
+      <div class="backdrop">
+        <theme style="float: right;height: 26px;width: 26px;margin-top: 26px;" @change="themeChange" />
+      </div>
+      <div class="right-menu">
+        <el-dropdown class="avatar-container right-menu-item hover-effect" @command="handleCommand">
+          <div class="avatar-wrapper">
+            <span style="padding-right:10px">{{ name }}</span>
+            <img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />
+          </div>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">个人中心</el-dropdown-item>
+            <el-dropdown-item command="f">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
     </div>
     </div>
+    <NoticeBar class="NoticeBar" :sendVal="sendVal" />
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
+import NoticeBar from '@/components/NoticeBar/index'
 import { mapGetters } from 'vuex'
 import { mapGetters } from 'vuex'
 export default {
 export default {
+  components: {
+    NoticeBar
+  },
   computed: {
   computed: {
     ...mapGetters(['sidebar', 'avatar', 'name'])
     ...mapGetters(['sidebar', 'avatar', 'name'])
   },
   },
   data () {
   data () {
     return {
     return {
-      logo: require('../../image/logo.png')
+      logo: require('../../image/logo.png'),
+      sendVal: [
+        '222222222222222222222222222222222',
+        '222222233333333333333333333333'
+      ]
     }
     }
   },
   },
   methods: {
   methods: {
@@ -53,6 +64,16 @@ export default {
 }
 }
 </script>
 </script>
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.navbar-con {
+  position: relative;
+}
+
+.NoticeBar {
+  position: absolute;
+  left: 330px;
+  bottom: 0;
+}
+
 .el-dropdown-menu {
 .el-dropdown-menu {
   padding: 0 !important;
   padding: 0 !important;
   border: 1px solid #EBEEF5;
   border: 1px solid #EBEEF5;

@@ -72,6 +72,7 @@ class data extends filter {
       },
       },
       {
       {
         label: "操作",
         label: "操作",
+        width: 80,
         render: (h, scope) => {
         render: (h, scope) => {
           return <el-button type="text" icon='el-icon-view' onClick={() => { vm.handleViewClick(scope) }}>查看</el-button>
           return <el-button type="text" icon='el-icon-view' onClick={() => { vm.handleViewClick(scope) }}>查看</el-button>
         }
         }

@@ -85,6 +85,9 @@
   padding-left: 5px !important;
   padding-left: 5px !important;
 }
 }
 
 
+/deep/.el-menu {
+  border-right: none;
+}
 
 
 
 
 /deep/.el-menu-item.is-active {
 /deep/.el-menu-item.is-active {