<template>
    <div class="right">
        <div class="right-box">
            <div class="mc-bg mc-bg-border">
                <div class="mc-nomal-title" style="margin-bottom: 40px;">
                    <el-select v-model="value" placeholder="请选择" style="width: 100%;">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="mc-team">
                    <span onclick="addUser()" style="vertical-align: middle;"
                          class="iconfont icon-el-icon mc-icon-style"></span><span class="mc-text-margin">添加成员</span>
                </div>
                <div class="mc-team">
                    <span onclick="setTeam()" style="vertical-align: middle;"
                          class="iconfont icon-shezhi mc-icon-style"></span><span class="mc-text-margin">团队设置</span>
                </div>
            </div>
            <div class="mc-bg">
                <div class="mc-nomal-title">关联知识库
                    <div class="mc-topage" onclick="toKnowledge()">更多</div>
                </div>
                <div class="mc-button" onclick="addknowledge()"><span
                    class="layui-icon iconfont icon-jiahao"></span><span>新建知识库</span></div>
                <div class="mc-file-box">
                    <div class="mc-file-item" v-for="item in fileData">
                        <div class="mc-file-icon">
                            <span :style="'color:'+item.bg" :class="'iconfont ' + item.icon"></span>
                        </div>
                        <div class="mc-file-main">
                            <div class="mc-file-name">{{item.title}}</div>
                            <div class="mc-file-time">{{item.time}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                fileData: [
                    {icon: 'icon-word', title: '家庭带宽文档', time: '2020-01-07', bg: '#FF654E'},
                    {icon: 'icon-excel', title: '家庭带宽表格', time: '2020-02-07', bg: '#67DB63'},
                    {icon: 'icon-ppt', title: '家庭带宽PPT', time: '2020-03-07', bg: '#FF8943'},
                    {icon: 'icon-word', title: '前端开发规范', time: '2020-04-07', bg: '#FF654E'},
                    {icon: 'icon-excel', title: '统计销售表格', time: '2020-05-07', bg: '#67DB63'}
                ],
                options:[
                    {
                        label:'自己',
                        value:1
                    }
                ],
                value:1,
            }
        },
        methods: {

        },
        mounted() {

        },
        created() {

        }
    }
</script>
<style scoped lang="scss">
    .right {
        float: right;
        width: 25%;
        background: white;
        // margin-top: 15px;
        height: calc(100vh - 150px);
        overflow: hidden;
        border-radius: 5px;
        .right-box{
            width: calc(100% + 20px);
            height: 100%;
            overflow-y: scroll;
        }
    }

    .mc-bg {
        background-color: white;
        padding: 30px 40px 30px 40px;
    }

    .mc-nomal-title {
        font-size: 20px;
        font-weight: 500;
        color: #333;
    }

    .mc-nomal-checked {
        color: #999;
        font-size: 12px;
    }

    .mc-nomal-show-num {
        display: flex;
        justify-content: space-between;
        text-align: center;
        margin-top: 10px;
        width: 40%;
    }

    .mc-nomal-num {
        font-size: 20px;
    }

    .mc-red {
        color: #ff6060
    }

    .mc-right-title {
        margin-top: 10px;
        text-align: right;
        width: 55%;
    }

    .mc-title-box {
        display: flex;
    }

    .mc-function-box {
        margin-top: 10px;
    }

    .mc-function-item {
        margin-top: 10px;
    }

    .mc-func-title {
        font-size: 16px;
        font-weight: 400;
        color: #333;
    }

    .mc-func-box {
        display: flex;
        margin-top: 20px;
    }

    .mc-func-item {
        width: 70px;
        /* text-align: center; */
        margin-left: 5%;
    }

    .mc-func-icon {
        height: 50px;
        width: 50px;
        margin: 0 auto;
        background-color: red;
        border-radius: 20px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        color: white
    }

    .mc-func-add {
        border: 1px dashed #999;
        border-radius: 20px;
        background-color: white;
        color: #3296FA;
    }

    .mc-func-add span {
        font-size: 26px;
    }

    .mc-func-text {
        width: 70px;
        text-align: center;
        margin-top: 10px;
    }

    .mc-team {
        height: 30px;
        line-height: 30px;
        margin-top: 10px;
    }

    .mc-icon-style {
        vertical-align: middle;
        color: #2878FF;
        font-size: 19px;
    }

    .mc-text-margin {
        margin-left: 10px;
    }

    .mc-bg-border {
        border-bottom: 1px solid #F2F2F2;
    }

    .mc-button {
        background-color: #2878FF;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        text-align: center;
        color: white;
        font-size: 16px;
        margin: 15px 0;
        cursor: pointer;
    }

    .mc-button .iconfont {
        font-size: 24px;
        vertical-align: bottom;
    }

    .mc-file-item {
        display: flex;
        padding: 10px 0;
        cursor: pointer;
    }

    .mc-file-icon {
        width: 39px;
        height: 39px;
    }

    .mc-file-icon span {
        font-size: 30px;
    }

    .mc-file-main {
        font-size: 12px;
    }

    .mc-file-name {
        color: #333;
        font-size: 14px;
    }

    .mc-file-time {
        color: #999
    }

    .mc-topage {
        float: right;
        font-size: 14px;
        cursor: pointer;
        margin-top: 5px;
    }

    .mc-total-box {
        overflow: hidden;
        height: 30px;
        line-height: 30px;
        margin: 15px 0;
    }

    .mc-action-box {
        float: right
    }

    .mc-total-title {
        font-size: 18px;
    }

    .mc-flex-box {
        display: flex;
        justify-content: space-between;
    }

    .mc-flex-item {
        width: 30px;
        text-align: center;
    }

    .mc-flex-value {
        font-size: 16px;
        font-weight: 400;
    }

    .mc-flex-title {
        font-size: 12px;
        color: #BCBCBC;

    }
</style>
