系统公告：滚动条（弹幕滚动）

html部分

//公告滚动内容
<div class="div2">
 <div
    ref="div3Ref"
    class="div3"
  >
  //公告前面图标
    <img src="image/logo/xinxitonggao.png"><el-button
      type="text"
      style="color: #303133;"
      @click="titledetails(systemMsg[0].uuid)"
    >
    //滚动内容
      <span
        ref="textWidth"
      >{{ stringContent }}</span>
    </el-button>
  </div>
</div>
//点击公告后弹窗
<el-dialog
  title="公告"
  :visible.sync="centerDialogVisible"
  width="40%"
  center
>
//标题
  <div style=" width: 100%;">
    <div style="width:80%;margin-left:10%;margin-right:10%">
      <h4 class="title-text">{{ dataForm.title }}</h4>
    </div>
    //内容
    <div>
      <span
      class="title-content"
      v-html="dataForm.content"
    />
    </div>
  </div>
  //按钮
  <span
    slot="footer"
    class="dialog-footer"
  >
    <el-button
      type="primary"
      @click="centerDialogVisible = false"
    >关闭</el-button>
  </span>
</el-dialog>

data部分

data() {
  return {
     dataForm: {
       title: '',
       content: '',
       messagecontent: '',
     },
     stringContent: '',
     centerDialogVisible: false,
     systemMsg: [],
   };
 },

js部分

mounted() {
  this.NoticeMessage();
 },
 methods: {
    // 查询公告内容
    async NoticeMessage() {
      const ownerId = getLocalStorageItem('userInfo').empid;
      const res = await NoticeMsg(ownerId);
      if (res.code === 0) {
        this.systemMsg = res.data;
        if (res.data[0].uuid) {
        //滚动的内容，去除html标签
          this.stringContent = `《${res.data[0].title}》  ${res.data[0].content.replace(/<[\w]+>/g, '').replace(/<[/]\w+>/g, '  ')}`;
        } else {
          this.stringContent = res.data[0].title;
        }
        //根据内容长度，来决定滚动速度（内容会存在展示不完全）
        this.$nextTick(() => {
          this.$refs.div3Ref.style.width = `${Object.keys(this.stringContent).length * 13}px`;
          if (+this.$refs.div3Ref.style.width.split('px')[0] > 1000) {
            this.$refs.div3Ref.style.animationDuration = `${Object.keys(this.stringContent).length * 13 / 100}s`;
          } else {
            this.$refs.div3Ref.style.animationDuration = `${Object.keys(this.stringContent).length * 13 / 5}s`;
          }
        });
      }
    },
    //点击后公告弹窗
    async titledetails(uuid) {
      console.log(uuid);
      if (uuid) {
        const detail = await NoticeDetail(uuid);
        if (detail.code === 0) {
          this.dataForm.content = detail.data.content;
          this.dataForm.title = detail.data.title;
        }
        this.centerDialogVisible = true;
      } else {
        this.centerDialogVisible = false;
      }
    },
  },

css部分

<style lang="scss" scoped>
.main {
  height: 100%;
  position: relative;
  // border: solid 1px rgb(234, 234, 234);
  border-bottom: none;
  border-radius: 3px 3px 3px 3px;
  .content {
    display: flex;
    margin-top: 1px;
    background-color: #fff;
    border: dashed 1px #b4b4b4;
    border-radius: 3px;
    // height: calc(100% - 30px);
    // height: calc(100%);
    /*overflow: auto;*/
    flex-direction: column;
    padding: 1px;
  }
}
.title-text {
  text-align: center;
  display: inline-block;
  color: #000;
  /* color: #0B2278; */
  font-size: 16px !important;
  font-weight: bold;
  line-height: 22px;
}
.title-content {
  vertical-align: middle;
  border-style: none;
  width: 50%;
  color: #000;
  /* color: #0B2278; */
  font-size: 40px !important;
  line-height: 30px;
}
</style>
<style >
img {
  vertical-align: middle;
  border-style: none;
  /* margin-top: 0px; */
  margin-bottom: 2px;
}
</style>
<style>
  /* .div1{
    width: 100%;
    height: 40px;
    background-color: #f00; */
  /* } */
  .div2{
      /* width: 80%; */
      /* border: 1px solid  #f00; */
      /* margin-top: 6px;
      margin-bottom: 6px; */
      margin-left: 10%;
      margin-right: 10%;
      overflow: hidden;
  }
  .div3{
    white-space:nowrap;
    transform: translateX(0%);
    animation: myfirst  infinite linear;
  }
      /*animation: myfirst 5s linear 1s infinite alternate;
  动画名称、动画时间5s、动画速度:匀速、延迟开始时间：1s、动画播放次数：无限次、动画完成后下一周期：轮流反向播放。*/
      /* 从右至左   反之  从左至右 */
  @keyframes myfirst {
    0%{
        transform: translateX(1280px);
    }
    100%{
        transform: translateX(-100%);
    }
  }
  .div3:hover{
    cursor:pointer;
    animation-play-state: paused;
  }
  svg:not(:root) {
    overflow: hidden;
    align-items: center;
  }
</style>