<template>
    <!-- nav---规章制度 -->
    <div class="system">
        <div class="left-nav">
            <ul class="article-list">
                <li v-for="(item,index) in articleList" :key="index">
                    <a @click="toggleList(index, item)" :class="{'active':index == checkindex }">{{item.postTitle}}</a>
                </li>
            </ul>
        </div>
        <div class="article-info">
          <div style="overflow: hidden">
            <h1 class="ac-title" v-text="articleTitle"></h1>
          </div>
          <div>
            <div class="info-content" v-html="content"></div>
          </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "system",
    data() {
        return {
            checkindex: 0,// 初始化第一个栏块高亮
            articleList: [],
            articleTitle: "",
            content: ""
        }
    },
    mounted(){
        this.getarticleList()
    },
    methods:{
        // list切换
        toggleList(index, item) {
            this.checkindex = index;
            this.articleTitle = item.postTitle;
            this.content = item.postContent;
            // console.log(this.articleTitle)
        },
        getarticleList(){
            let that = this;
            /*let obj = {
                gId:this.$port.gId,
                cId:this.$port.cId
            }*/
            let obj = {
              gId:this.$route.query.gId,
              cId:this.$route.query.cId
            }
            // console.log('obj===================================',obj)
            that.$axios.AxiosMethods("get","3rd/bigScreenData/getRulesRegulationsList",obj,function (res) {
                that.articleList = res.data;
                that.articleTitle = that.articleList[0].postTitle;
                that.content = that.articleList[0].postContent;
            });
        }
    }
}
</script>
<style lang="less" scoped>
    .system {
        font-size: 0.1rem;
        box-sizing: border-box;
        height: 85%;
        overflow-y: auto;
        background: #02293D;
        /*margin: 0 16px;
        padding: 20px 10px;*/
        position: relative;
        .left-nav {
          width: 20%;
          background: #022230;
          padding: 20px 15px;
          height: 100%;
          overflow-y: auto;
          float: left;
          box-sizing: border-box;
            .article-list {
                list-style: none;
                line-height: 40px;
                a {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    text-decoration: none;
                    color: #fff;
                    padding: 0 5px;
                    word-break: keep-all;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis
                }
                .active {
                    background-color: #225c79;
                }
            }
        }
        /*滚动条样式 开始*/
        .article-info::-webkit-scrollbar-track,.left-nav::-webkit-scrollbar-track { /* 定义滚动条轨道  内阴影+圆角*/
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          border-radius: 5px;
          background-color: #f5f5f5;
        }

        .article-info::-webkit-scrollbar, .left-nav::-webkit-scrollbar { /*滚动条整体样式*/
          width: 10px;
          background-color: #f5f5f5;
          border-radius: 5px;
        }

        .article-info::-webkit-scrollbar-thumb, .left-nav::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
          border-radius: 5px;
          -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
          background-color: #555;
        }
        /*滚动条样式 结束*/
        .article-info {
          background: #022230;
          padding: 20px;
          color: #ffffff;
          height: 100%;
          float: right;
          width: 80%;
          box-sizing: border-box;
          overflow-y: auto;
            .ac-title{
              /*padding: 10px;*/
            }
            .info-content{
                font-size: 15px;
                margin-top: 10px;
              width: 100%;
              word-wrap: break-word;
            }
        }

    }
</style>
