vue折叠面板（代码直接粘贴吧）

<template>
  <view>
    <view class="item" v-for="(item, index) in boxList" :key="index">
        <view class="main" @click="showCourse(index)">
            <view class="cover">
                <img src="/m/static/img3.2/work_blue.png"/>
            </view>
            <view class="intro">
                <view class="title">人脸识别问题</view>
                <view class="discript">
                    <view class="avatar">
                        <img src="/m/static/img/avatar.png" />
                    </view>
                    <view>
                        <view class="name">王羽羽</view>
                        <view class="num"><img src="/m/static/img3.4/clock.png" class="clock"/>13课时</view>
                    </view>
                </view>
            </view>
            <img src="/m/static/img3.4/tag.png" class="zoom"/>
            <img v-if="item.boxshow" src="/m/static/img3.4/open.png" class="status"/>
            <img v-else src="/m/static/img3.4/close.png" class="status"/>
        </view>
        <transition name="draw">   
            <view v-show="item.boxshow" class="lesson" >
                <view class="lesson_item">
                    <view class="lesson_name">第一课时: 哈哈哈哈</view>
                    <view class="lesson_txt">
                        <img src="/m/static/img3.4/live.png" class="live"/>
                        <view class="lesson_state">查看直播回放</view>
                    </view>
                </view>
                <view class="lesson_item">
                    <view class="lesson_name">第一课时: 哈哈哈哈</view>
                    <view class="lesson_txt">
                        <img src="/m/static/img/medal.png" class="live"/>
                        <view class="lesson_state">查看直播回放</view>
                    </view>
                </view>
                <view class="lesson_item">
                    <view class="lesson_name">第一课时: 哈哈哈哈</view>
                    <view class="lesson_txt">
                        <img src="/m/static/img/medal.png" class="live"/>
                        <view class="lesson_state">查看直播回放</view>
                    </view>
                </view>
            </view>
        </transition>
    </view>
</view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
             boxList: [{boxshow:false}, {boxshow:false}]
        }
    },
    methods:{
        showCourse(i){
            this.boxList.map((item, index) => {
                if(index == i){
                    item.boxshow = !item.boxshow
                }
            })
        }
    }
}
</script>

<style>
.item{
    padding-bottom: 20px;
}
.main{
    height: 80px;
    background: #F18B2B;
    box-shadow:0px 2px 10px 0px rgba(17,17,17,0.2);
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
}
.cover{
    width: 130px;
    height: 80px;
    padding: 1px;
    background: #fff;
    margin-right: 10px;
}
.cover img{
    width: 130px;
    height: 80px;
    margin-right: 10px;
    vertical-align: middle;
}
.intro{
    width: 100%;
    height: 80px;
}
.intro .title{
    height: 32px;
    line-height: 32px;
    font-size: 19px;
    margin-bottom: 5px;
    color: #fff;
}
.discript{
    display: flex;
}
.avatar{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
    margin-right: 5px;
}
.avatar img{
    width: 40px;
    height: 40px;
    border-radius: 40px;
}
.discript .name{
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    margin-top: 5px;
}
.discript .num{
    font-size: 12px;
    color: #fff;
    font-weight: 400;
}
.clock{
    width: 12px;
    height: 12px;
    vertical-align: middle;
    margin: 0 2px 2px 0;
}
.zoom{
    width: 22px;
    height: 29px;
    position: absolute;
    right: 10px;
    top: 0;
}
.status{
    width: 22px;
    height: 22px;
    position: absolute;
    right: 10px;
}


.lesson{
    background:rgba(255,255,255,1);
    box-shadow: 0px 2px 10px 0px rgba(17,17,17,0.2);
    border-radius: 0 0 10px 10px;
}
.lesson_item{
    padding: 0 0 0 15px;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
}
.lesson_item:nth-child(2n){
    background: rgba(241,139,43,0.1);
}
.lesson_name{
    font-size: 14px;
    color: #0E1D33;
}
.lesson_item .live{
    width: 12px;
    height: 12px;
    margin-right: 5px;
}
.lesson_state{
    font-size: 12px;
    color: #F18B2B;
}
.lesson_item .lesson_txt{
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.draw-enter-active, .draw-leave-active {
    transition: all ease;
}
.draw-enter, .draw-leave-to {
    height: 0;
}
</style>