例如 类名 .translate-x-1/2， css 样式定义为 .translate-x-1\/2 { top: 50%; }[图片]

<view class="section-container"> <scroll-view scroll-x enable-flex="true" class="scroll-box"> <block wx:for="{{aniDetails.crt}}" > <view class="crt-list"> <view class="crt-icon-box"> <image class="crt-icon" src="{{item.images.grid}}"></image> <text class="crt-role">{{item.role_name}}</text> </view> <view class="crt-name-box"> <text class="crt-name text-el">{{item.name_cn?item.name_cn:item.name}}</text> <view class="crt-cvname-list text-el"> <block wx:for="{{item.actors}}"> <text class="crt-cvname">CV:{{item.name}}\n</text> </block> </view> </view> </view> </block> </scroll-view> </view> .section-container { margin: 30rpx 40rpx; } .scroll-box { white-space: nowrap; display: flex; } .crt-list { display: inline-block; margin-right: 15rpx; } .crt-icon-box { position: relative; width: 150rpx; height: 150rpx; } .crt-icon { width: 100%; height: 100%; } .crt-role { position: absolute; top: 0; left: 0; background: #3bc0c3; color: #fff; width: 50rpx; height: 30rpx; border-radius: 30rpx; line-height: 30rpx; text-align: center; font-size: 22rpx; } .crt-name-box { margin-top: 10rpx; width: 150rpx; } .crt-name { display: block; font-size: 26rpx; color: #666; text-align: center; margin-bottom: 5rpx; } .crt-cvname-list { font-size: 22rpx; color: #999; } [图片]在开发工具端打开会这样，在手机预览正常显示