dd_pc/src/views/subassembly/update_notice.vue

<template>
    <div class="integral_statistics_box" v-loading="noticeLoad">
        <el-row>
			<el-col :span="24" style="height:60px;line-height:60px;">
				<el-col :span="6" style="color:#9e9d9d;padding-left:25px;max-width: 280px;">系统公告列表</el-col>
				<el-col :span="18" style="padding-left:30px;">
					<span style="font-size:16px;">{{articleOne.title?articleOne.title:''}}</span>
					<span style="font-size:15px;margin-left:25px;color:#9e9d9d">{{articleOne.publish_time?articleOne.publish_time:''}}</span>
				</el-col>
			</el-col>
		</el-row>

		<el-row class="architecture">
			<el-col :span="6" class="rule_class_box RuleLeft" style="height:700px;max-width: 280px;">
        		<div >
					<el-tree v-show="announcement.length != 0" ref="tree" :data="announcement" :props="defaultProps" node-key="id"
					@node-click="dept_click" :expand-on-click-node="false" :highlight-current="true" class="cate-tree"></el-tree>
					<div v-show="announcement.length == 0" class="" style="margin-top: 100px;">
						<div style="color:#909399; text-align: center; line-height:50px">暂无数据</div>
					</div>
				</div>
			</el-col>
			<el-col :span="17" class="contentRig RuleRight" style="height:700px;overflow-y:auto" v-loading="detailsLoad">
				<div v-if="announcement.length!=0" v-html="aAtripOfDetails" style="padding:15px 0 0 15px;"></div>
				<div v-else style="text-align:center;margin-top:100px;">
      				<img src="@/assets/image/nodata.png" style="width: 266px;height: 182px;margin: 30px auto;">
					<div style="color:#909399;">暂无数据</div>
				</div>
			</el-col>
		</el-row>
    </div>
</template>

<script>
var aS = null;
export default {
	data() {
		return {
			articleOne:{},
			announcement:[],

			noticeLoad:false,

			defaultProps: {
				label: 'title',
			},
			aAtripOfDetails:'',
			detailsLoad:false,
		};
	},
  	components: {},
	watch: {
	},
	created() {
	},
	mounted() {
		this.noticeList()
	},
	methods: {
		noticeList(){
			this.noticeLoad = true
			let params = {
				page:1,
				page_size:2000,
			}
			this.$axios('get','/api/announcement/list',params).then((res)=>{
				if(res.data.code == 1){
					let list = res.data.data.list
					this.announcement = list
					this.$nextTick(() => {
						if(list[0]){
							this.articleOne = list[0]
						}
						this.$refs.tree.setCurrentKey(this.articleOne.id);
						this.noticeDetails()
					});
				}
			}).finally(()=>{
				this.noticeLoad = false
			})
		},
		noticeDetails(){
			this.detailsLoad = true
			this.$axios('get','/api/announcement/info',{announcement_id:this.articleOne.id}).then((res)=>{
				if(res.data.code == 1){
					this.aAtripOfDetails=res.data.data.focus+res.data.data.update_msg
					
				}
			}).finally(()=>{
				this.detailsLoad = false
			})
		},

		dept_click(item) {
			this.detailsLoad = true
			this.articleOne = item
			if(aS!=null){
				clearTimeout(aS)
			}
			aS=setTimeout(()=>{
				this.noticeDetails()
			},500)
		},
	},
};
</script>

<style scoped lang="scss">
.integral_statistics_box {
  min-width:980px;
  background-color: #ffffff;
  padding: 0 20px 0 0;
  min-height: calc(100vh - 160px);
}


//   .cate-tree {
//     margin-top: 16px;
//   }
  .cate-tree ::v-deep .is-focusable .el-tree-node__content:hover{
    background:#F5F7FA !important;
  }

  

  .rule_class_box{
	  border-top: 1px solid #f0f0f0;
  }
 .rule_class_box ::v-deep .el-tree--highlight-current{
     .el-tree-node{
      border-bottom:1px #f0f0f0 solid;
    }
     .el-tree-node__content{
	  background-color: rgb(255, 255, 255);
      height:56px;
      line-height:56px;
    }
    .is-current{
		.el-tree-node__content{
			.el-icon-caret-right{
				// color:#409EFF !important;
			}
			.el-tree-node__label{
				color:#409EFF !important;
			}
		}
		.el-tree-node__children{
			.el-icon-caret-right{
				color:#C0C4CC !important;
			}
			.el-tree-node__label{
				color:#606266 !important;
			}
		}
	}
 }
 .contentRig{
	margin-left: 20px;
    border-top:1px #f0f0f0 solid;
 }

 
.architecture {
  display: flex;
//   text-align: center;
  // margin-top:20px;
  padding-left: 0px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  cursor: default;
  min-height: calc(60vh - 160px);
}
.architecture .RuleLeft {
  overflow-x: hidden;
  display: block;
  text-align: center;
//   padding: 20px 10px;
  border-right: none;
  overflow-y: auto;
  overflow-x: none;
}
/*滚动条的宽度*/

.architecture .RuleLeft::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.architecture .RuleRight::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.architecture .RuleLeft::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/*滚动条的设置*/

.architecture .RuleLeft::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.architecture .RuleRight::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/

.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
  overflow-x: none;
  background-color: rgba(144, 147, 153, 0.3);
}
.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
  background-color: rgba(115, 118, 124, 0.3);
}
</style>