.container { display: flex; flex-direction: column; width: 100%; .cell-view { display: flex; border-bottom: 1px solid #f0f0f0; align-items: center; margin: 5px 10px; text { width: 90px; text-align: left; color: #333; font-size: 22rpx; } .content { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; align-content: center; button { margin: 5px; height: 30px; color: #333; width: 21.3%; border-radius: 5px; } /* 选中时添加这个 样式 */ .active { background: #dae9fd; } /* 三角形 */ .active::before { content: ''; display: inline-block; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-bottom: 15px solid rebeccapurple; border-left: 14px solid transparent; } } button { color: #000; font-size: 22rpx; } } .rate view, .weight view, .discount view { flex-wrap: nowrap; text-align: center; } .zsshape, .weight, .rate, .discount { height: 50px } .buttom_view { display: flex; flex-direction: row; justify-content: center; margin-top: 20px; width: 95%; align-content: center; align-items: center; van-button { width: 90%; color: white; } } .result { display: flex; flex-direction: column; align-items: center; align-content: center; width: 95%1; &__top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; width: 95%; } .value { font-size: 28rpx; color: #333; text-align: left; padding: 5px 0px; width: 95%; } } }