常用的css

js控制样式：

//html中： <text class="test_text" :style="{'--base_color':currentColor}">测试</text> //data中: currentColor:'pink' //methods中： this.currentColor='red' //style中：使用变量取值 .test_text{ color: var(--base_color); }

flex布局

@mixin flex($direction: row, $justify: center, $align: flex-start) { display: flex; flex-direction: $direction; justify-content: $justify; align-items: $align; } //使用 @include flex(row, center, center);

css绘制勾选按钮 示例：

.check_box { width: 32rpx; height: 32rpx; border-radius: 50%; margin-right: 20rpx; border: 2rpx solid #FF7537; box-sizing: border-box; position: relative; &_half_check { border-color: #FF7537; &::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 16rpx; height: 4rpx; color: #FF7537; background: #FF7537; } } &_active { background: #FF7537; border: 2rpx solid #FF7537; border-color: #FF7537; padding-bottom: 4rpx; @include flex(row, center, center); &::after { content: ''; width: 16rpx; height: 8rpx; border-left: 2rpx solid #fff; border-bottom: 2rpx solid #fff; transform: rotate(-45deg); margin: auto } } }

底部操作按钮：如

.btn-wrap { background: #FFFFFF; box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(242, 242, 242, 0.5); padding: 20rpx 16rpx calc(env(safe-area-inset-bottom) + 16rpx); display: flex; gap: 16rpx; justify-content: space-between; align-items: center; width: 100%; position: fixed; bottom: 0; .btn { height: 88rpx; line-height: 88rpx; text-align: center; border-radius: 16rpx; font-size: 32rpx; flex: 1; border: 2rpx solid #FF7537; color: #FF7537; background: #FFFFFF; } .confirm_btn{ border: 2rpx solid #FF7537; background: #FF7537; color: #FFFFFF; } }

滚动渐变背景:

//动态style :background="`rgba(255,255,255,${pageScrollTop / 100 * 1.2}) `" //生命周期中 onPageScroll({ scrollTop }) { this.pageScrollTop=scrollTop },