<template>
    <div>
        <!-- 头部 -->
        <page-header></page-header>
        <div class="background">
        </div>
        <div class="container">
            <div>
                 <ul class="com">
                    <li class="active">人才招聘</li>
                </ul>
            </div>
            <div class="content">
                <p class="ip">厦门</p>
                <div class="data"></div>
                <div class="pos" v-for="(item,index) in items">
                    <div class="top" @click="show(index)">
                        <div class="name">{{item.name}}</div>
                        <div class="dic">{{item.dic}}</div>
                        <div class="date">
                            <span>{{item.date}}</span>
                            <span class="fa fa-angle-down"></span>
                        </div>
                    </div>
                    <div class="bom">
                        
                    </div>
                </div>
            </div>


        </div>
         <page-footer></page-footer> 
    </div>
</template>
<script>
    // 公用
    import share from "./share.js";
    export default {
        name: "talents",
        // 混入
        mixins: [share],
        data() {
            return {
                msg: "talents",
                navActive:'',
                items:[
                    // {name:'会计总监',dic:'会计',date:'2017-05-03',},
                    // {name:'移动产品经理',dic:'技术',date:'2017-05-03',},
                    // {name:'视觉设计师',dic:'设计',date:'2017-05-03',},
                    // {name:'网页设计师',dic:'设计',date:'2017-05-03',},
                    // {name:'会计总监',dic:'会计',date:'2017-05-03',},
                    // {name:'移动产品经理',dic:'技术',date:'2017-05-03',},
                    // {name:'视觉设计师',dic:'设计',date:'2017-05-03',},
                    // {name:'网页设计师',dic:'设计',date:'2017-05-03',}                
                ],
                data:[]

                
            };
        },
        methods: {
            show(index){
                    $('.bom').eq(index).toggleClass('show');
                    $('.top').eq(index).toggleClass('addColor');
            },
            getLiveList() {
                this.$http.post('/api/postlist?category_id=2')
                    .then((res) => {
                        
                        res.body.data.forEach(e => {
                            this.data=e
                            // console.log(e.post_content)
                            // $('.data').html(e.post_content)
                            console.log(this.data)
                        });
                        // this.data=res.body.data[0].
                        
                        console.log(res.body.data)
                        // console.log(this.data)
                        // var _htmlData=$(this.data);
                        // console.log(this._htmlData)
                    })
                    .catch((err) => {
                        console.log(err)
                    })
                
            },
            lalala(){
               
            }
           
        },
        created () {
            this.getLiveList()
            this.lalala()
        }
    };

</script>
<style scoped>
    .data{
        height: 500px;
        border: 1px solid red;
    }
    * {
        box-sizing: border-box;
    }
    /*背景图  */
    .background {
        min-width: 1200px;
        height: 300px;
        background-size: 100%;
        background-image: url('../assets/images/tal01.jpg');
    }
    .container {
        width: 1200px;
         margin: 0 auto;
         padding: 0; 
         /* background-color: #000; */
         margin-bottom: 200px;
    }  
    .ip{
        display: inline-block;
        font-size: 12px;
         widows: 70px;
         padding-left: 20px; 
         padding-right: 20px;
         margin-top: 100px; 
         margin-bottom: 70px;
         border-left: 1px solid #101010;
         border-right: 1px solid #101010;
        color: #101010;
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        text-align: center;
    } 
    .com {
        width: 240px; 
        height: 60px;
        margin: 0 auto; 
        margin-top: -30px;
        background-color: #fff;
        box-shadow: 0px 4px 5px #ddd;
    }
    .com li {
        width: 100%;
        text-align: center;
        line-height: 60px;
        font-size: 22px;
        background-color: #B5A14E;
        color: #FFF;
    }
    .pos{
        color: #aaa;       
        font-size: 12px;
    }
    .top{
        display: flex;
         border-bottom: 1px solid #aaa; 
        height: 3.6vw;
        line-height: 3.6vw;
    }
    .name{
        width: 55%;
        text-align: left;
        padding-left: 1.5vw;
    }
    .dic{
        width: 15%;
    }
    .date{
        width: 30%;
        text-align: right;
    }
    .fa{
        margin-left: 2.9vw;
        padding-right: 1.5vw;
    }

    .bom{
        text-align: left;
        margin-top: 2vw;
         display: none; 
    }
    .show{
        display: block;
    }
    .addColor{
        background-color: #F2F2F2;
        border: none;
    }
    .bom div{
        padding-left: 1.5vw;
    }
    .bom div h1,p{
        margin-top: 1.3vw;
    }
    .bom div span{
        display: block;
        width: 12vw;
        height: 2.5vw;
        text-align: center;
        line-height: 2.5vw;
        color: #fff;
        background-color: #B5A14E;
        margin-top: 2.3vw;
    }
    
</style>