场景
通过样式穿透修改uni-ui组件样式
这里以vue2写法为主,vue3可以使用更多的选择,比如:deep(),当然也有可能存在组件版本差异,导致方法名不同
实现
1.uni-data-select
::v-deep .uni-data-select {width: 33.3%;height: 100%;
}
::v-deep .uni-select{width: 100%;height: 100%;border-radius: 0;border: 0.73rpx solid rgba(235,235,235,0.5);
}
::v-deep .uni-select__input-box{height: 100%;.uni-select__input-placeholder{font-family: 'PingFang SC';font-weight: 500;font-size: 8.79rpx;color: #FFFFFF;}
}
2.uni-table
<view class="uni-container"><uni-table ref="table" :loading="loading" type="" emptyText="暂无更多数据" @selection-change="selectionChange"><uni-tr><uni-th width="50" align="center">任务名称</uni-th><uni-th width="40" align="center">任务状态</uni-th><uni-th width="40" align="center">任务类型</uni-th><uni-th width="40" align="center">执行机场</uni-th><uni-th width="40" align="center">航线名称</uni-th><uni-th width="40" align="center">创始人</uni-th><uni-th width="70" align="center">创建时间</uni-th><uni-th width="70" align="center">备注</uni-th><uni-th width="50" align="center">操作</uni-th></uni-tr><uni-tr v-for="(item, index) in tableData" :key="index"><uni-td align="center">{{ item.taskname }}</uni-td><uni-td align="center">{{ item.static }}</uni-td><uni-td align="center">{{ item.type }}</uni-td><uni-td align="center">{{ item.airport }}</uni-td><uni-td align="center">{{ item.airname }}</uni-td><uni-td align="center">{{ item.founder }}</uni-td><uni-td align="center">{{ item.createtime }}</uni-td><uni-td align="center">{{ item.notes }}</uni-td><uni-td><view class="uni-group"><button class="uni-button" size="mini" type="warn">执行</button><button class="uni-button" size="mini" type="primary">轨迹</button></view></uni-td></uni-tr></uni-table><view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
</view>
.uni-table{border-radius: 0 !important;background: transparent !important;.uni-table-tr{height: 36.62rpx;}.uni-table-th{background-color: #242B38;font-family: 'PingFang SC';font-weight: 500;font-size: 8.79rpx;color: #FFFFFF;border: none;line-height: 100%;}.uni-table-td{font-family: 'PingFang SC';font-weight: 400;font-size: 8.79rpx;color: #FFFFFF;border-bottom: 0.73rpx solid rgba(235,235,235,0.5);line-height: 100%;}.checkbox{padding: 0;width: 10.25rpx;}
}.uni-group {display: flex;align-items: center;justify-content: center;.uni-button{height: 17.58rpx;width: 26.37rpx;background: none;border: 0;padding: 0;margin: 0;font-family: 'PingFang SC';font-weight: 400;font-size: 10.25rpx;}.uni-button:after{border: 0;}.uni-button[type=warn]{color: #FF4437 !important;}.uni-button[type=primary]{color: #1E77F5 !important;}
}//分页器
.uni-pagination-box{height: 36.62rpx;display: flex;align-items: center;justify-content: center;.uni-pagination__total{font-family: 'PingFang SC';font-weight: 500;font-size: 10.25rpx;color: #FFFFFF;line-height: 15.38rpx;}.uni-pagination__btn{height: 21.97rpx;width: 21.97rpx;background: transparent;border: 0.73rpx solid rgba(235,235,235,0.5);.uni-icons{font-size: 10.25rpx !important;color: #fff !important;}}.uni-pagination__num{height: 21.97rpx;min-width: 21.97rpx;width: 21.97rpx;.uni-pagination__num-tag{line-height: 21.97rpx;height: 21.97rpx;min-width: 21.97rpx;}}
}