css 实现展开合并按钮

模板：

<view class="strategyConteng">
	<view  @click="stateNum[index].isFlag = !stateNum[index].isFlag">
		<view>珠江啤酒0度系列满10赠1
<span class="strategyConteng_open":class="stateNum[index].isFlag?'strategyConteng_close':''"></span>
		</view>
			<view v-show="stateNum[index].isFlag">
			<p>产品信息：</p>
		    <p>怡纯350ml，1×24</p>
		    <p>怡纯550ml，1×24</p>
			<p>赠品信息：</p>
			<p>怡纯350ml，1×24</p>
		</view>
	</view>
</view>

css样式：

.strategyConteng {
						margin: 0 36rpx;
						border-top: 1rpx dashed #ccc;
						font-weight: 400;
						font-size: 22rpx;
						color: #4A4D57;	
						
					&_open {
							position: relative;
							width: 22rpx;
							height: 22rpx;
							
							&::before {
								content: '';
								width: 8rpx;
								height: 8rpx;
								border-right: 1rpx solid #4A4D57;
								border-top: 1rpx solid #4A4D57;
								transform: rotate(45deg);
								position: absolute;
								right: -30rpx;
								transition: 0.5s;
								top: 10rpx;
							}
						}
						&_close {
							position: relative;
							
							&::before {
								content: '';
								width: 8rpx;
								height: 8rpx;
								border-right: 1rpx solid #4A4D57;
								border-top: 1rpx solid #4A4D57;
								transform: rotate(135deg);
								transition: 0.5s;
								position: absolute;
								right: -30rpx;
								top: 10rpx;
							}
						}
					}

效果：