需求

最近在做小程序，有一個類似折疊面板的ui控件，效果大概是這樣

代碼

因為項目使用的是uniapp，所以打算去找uniapp的擴展組件，果然給我找到了這個叫uni-collapse的組件（鏈接：uni-collapse）

但是因為跟我們預期效果差別還是挺大的，所以就開始了我們的定制
在這個定制過程中，去掉了uni-collapse自帶的偽類所帶來的兩條分割線和背景色，給uni-collapse-item外部套上圓弧邊框，去掉了uni-collapse-item自帶的分割線，定制了標題文字樣式，代碼如下

<view class="rules-box"><uni-collapse class="rules"><view class="rules-item"><uni-collapse-item :show-animation="true" :title-border="none" :border="none" title="優惠券詳情"><view class="rules-content"><view class="sub-title">有效日期：</view><view class="sub-text">默認開啟組件動畫，使用動畫效果折疊內容會有一個從上到下的動畫。</view><view class="sub-title">使用須知：</view><view class="sub-text">默認開啟組件動畫，使用動畫效果折疊內容會有一個從上到下的動畫。</view></view></uni-collapse-item></view></uni-collapse>
</view>

.rules-box {width: 100%;padding: 20rpx 30rpx 230rpx;box-sizing: border-box;border-bottom: none;border-radius: 20rpx;.rules{/deep/ .uni-collapse {background-color: transparent;&::after,&::before{content: '';height: 0rpx;}}.rules-item {width: 100%;padding: 30rpx;box-sizing: border-box;// box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);border-radius: 20rpx;margin-bottom: 20rpx;background: #ffffff;overflow: hidden;/deep/ .uni-collapse-cell {&::after,&::before{content: '';height: 0rpx;}}/deep/ .uni-collapse-cell--open {background: #ffffff;}/deep/ .uni-collapse-cell__title {padding: 0;margin-bottom: 30rpx;}/deep/ .uni-collapse-cell__title-text {color: var(--unnamed, #333);font-family: PingFang SC;font-size: 28rpx;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: 0.14px;text-transform: uppercase;}.rules-content {border-top: 1px solid #ebeef5;.sub-title{color: #333;font-family: PingFang SC;font-size: 28rpx;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: 0.14px;text-transform: uppercase;padding-top: 24rpx;}.sub-text {font-weight: 400;font-size: 24rpx;line-height: 24rpx;color: #a8a9ad;padding-top: 12rpx;}}}}
}

最后效果

大功告成，效果如下