.my-canvas { display: flex; position: fixed !important; background: #000000; left: 0; z-index: 100000; width: 100%; } .my-avatar { width: 150rpx; height: 150rpx; border-radius: 100%; } .oper-canvas { display: flex; position: fixed !important; left: 0; z-index: 100001; width: 100%; } .prv-canvas { display: flex; position: fixed !important; background: #000000; left: 0; z-index: 200000; width: 100%; } .oper-wrapper { height: 50px; position: fixed !important; box-sizing: border-box; border: 1px solid #F1F1F1; background: #ffffff; width: 100%; left: 0; bottom: 0; z-index: 100009; flex-direction: row; } .oper { display: flex; flex-direction: column; justify-content: center; padding: 10rpx 20rpx; width: 100%; height: 100%; box-sizing: border-box; align-self: center; } .btn-wrapper { display: flex; flex-direction: row; flex-grow: 1; justify-content: space-between; } .btn-wrapper view { display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; border: 1px solid #f1f1f1; border-radius: 6%; } .hover { background: #f1f1f1; border-radius: 6%; } .clr-wrapper { display: flex; flex-direction: row; flex-grow: 1; } .clr-wrapper view { display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; border: 1px solid #f1f1f1; border-radius: 6%; } .my-slider { flex-grow: 1; }