wxml部分

<view >

<view class="title">

<text>考试科目</text>

</view>

<view v-for="(item,index) in array" :key="index" >

<view class="menu" @click="isOpens(index)">

<view class="text">

<view class="icon">

<image :src="isOpen == index ? url1 : url2 "></image>

</view>

</view>

<view class="right">

<text>必须</text>

</view>

</view>

<view :class="isOpen == index ? 'conts show' : 'conts hide' ">

<view class="cont' " >

<text>高等数学</text>

<text class="ii">成绩折算比例</text>

<text class="d">........................</text>

<view class="r">

<text>30%</text>

</view>

</view>

</view>

</view>

</view>

css部分

<style lang="scss">

.hide{

display: none;

}

.show{

display: block;

}

.content {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

h1{

font-size: 60rpx;

font-weight: bold;

}

h2{

font-size: 40rpx;

font-weight: bold;

}

.top{

padding: 60rpx;

background-color: #EEEFF3;

}

.line{

margin:30rpx 0 30rpx 0;

width: 10%;

border: 4rpx #333333 solid;

}

text{

display: block;

}

.centers{

width: 100%;

}

.title{

padding-left: 30rpx;

display: inline-block;

text{

padding: 10rpx;

font-size: 40rpx;

font-weight: bold;

background: linear-gradient(to top, #9BF3EC 0%,#9BF3EC 50%,white 51%,white 100%);

}

margin-bottom: 20rpx;

}

.menu{

padding-left: 30rpx;

display: flex;

margin-bottom: 20rpx;

.icon{

image{

width: 20rpx;

height: 20rpx;

}

margin-right: 10rpx;

}

.right{

line-height: 50rpx;

position: absolute;

right: 15rpx;

}

}

.text{

background-color: #9BF3EC;

display: flex;

padding-left: 40rpx;

width: 80%;

border-radius: 10rpx;

height: 50rpx;

line-height: 50rpx;

}

.i{

display: inline-block;

background-color: #000;

border-radius: 50%;

color:#FFFFFF;

width: 40rpx;

height: 40rpx;

text-align: center;

font-size: 22rpx;

margin: 5rpx 15rpx 0 15rpx;

line-height: 40rpx;

vertical-align: top;

}

.w{

display: inline-block;

background-color: #000;

border-radius: 10rpx 0 10rpx 0;

color:#FFFFFF;

height: 40rpx;

text-align: center;

font-size: 22rpx;

padding: 0 15rpx 0 15rpx;

margin: 5rpx 15rpx 0 15rpx;

line-height: 40rpx;

vertical-align: top;

}

.ii{

background-color: #000;

border-radius: 10rpx 0 10rpx 0;

color:#FFFFFF;

text-align: center;

font-size: 22rpx;

margin: 5rpx 15rpx 0 15rpx;

height: 40rpx;

padding: 0 15rpx 0 15rpx;

line-height: 40rpx;

}

.conts{

background-color: #F9F9F9;

width: 93%;

margin-left: 50rpx;

margin-top: -20rpx;

}

.bottom{

padding-left: 20rpx;

padding-bottom: 50rpx;

font-size: 25rpx;

color:#8A8A8A;

margin-top: 20rpx;

}

.cont{

display: flex;

padding-left: 20rpx;

height: 68rpx;

font-size: 25rpx;

line-height: 68rpx;

margin-top: 20rpx;

.d{

color:#B2B2B2;

padding-left: 20rpx;

}

.r{

position: absolute;

right: 20rpx;

}

}

}

</style>