欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 名人名企 > uni-ui修改样式(持续更新)

uni-ui修改样式(持续更新)

2025/4/15 12:55:14 来源:https://blog.csdn.net/daimaxiaodao/article/details/147138825  浏览:    关键词:uni-ui修改样式(持续更新)

场景

通过样式穿透修改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;}}
}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词