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>