uniapp ----样式整合(随意自用版)

uniapp ----样式整合(随意自用版)

<style>
	@import url("static/css/icons.css");

	body {
		background-color: #F6F7FB;
		/* font-size: 29rpx; */
	}

	.content {
		/* width: 94%; */
		margin: 0 20rpx;
		clear: both;
	}

	/*每个页面公共css */
	.container {
		width: 100%;
		font-size: 28rpx;
	}

	.placeholderClass {
		color: #A6A6A6;
		font-size: 28rpx;
	}

	.wordWarp {
		word-wrap: break-word;
		word-break: break-all;
	}

	.masks {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #2F2F2F;
		opacity: 0.8;
		z-index: 99;
	}

	.kuangs {
		width: 90%;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		top: 30%;
		z-index: 999;
	}

	.kuangbtn {
		width: 316rpx;
		height: 92rpx;
		line-height: 92rpx;
		border-radius: 60rpx 0px 0px 60rpx;
		background-color: rgba(246, 247, 251, 100);
		color: rgba(47, 47, 47, 100);
		font-size: 14px;
		text-align: center;
		border: 1px solid rgba(47, 47, 47, 100);
	}

	.kuangbtn1 {
		border-radius: 0px 60rpx 60rpx 0px;
		background-color: rgba(47, 47, 47, 100);
		color: #fff;
	}

	.topAbu {
		top: 88rpx;
	}

	/* 关注按钮 */
	.guanzhu {
		width: 125rpx;
		height: 58rpx;
		line-height: 58rpx;
		border-radius: 62rpx;
		background-color: rgba(85, 85, 85, 100);
		color: rgba(255, 255, 255, 100);
		text-align: center;
	}

	/* 小空心按钮 */
	.btnsm {
		width: 104rpx;
		height: 52rpx;
		line-height: 52rpx;
		border-radius: 60rpx;
		border: 1px solid rgba(47, 47, 47, 100);
	}

	/* 边角 */
	.boRadius8 {
		border-radius: 8rpx;
	}

	.boRadius120 {
		border-radius: 120rpx;
	}

	.boRadius60 {
		border-radius: 60rpx;
	}

	.boRadiusP50 {
		border-radius: 50%;
	}

	/*padding  */
	.boxSize {
		box-sizing: border-box;
	}

	.paddingA20 {
		padding: 20rpx;
	}

	.paddingA30 {
		padding: 30rpx;
	}

	.paddingA40 {
		padding: 40rpx;
	}

	.paddT20 {
		padding-top: 20rpx;
	}

	.paddT30 {
		padding-top: 30rpx;
	}

	.paddT40 {
		padding-top: 40rpx;
	}

	.paddT50 {
		padding-top: 50rpx;
	}

	.paddB20 {
		padding-bottom: 20rpx;
	}

	.paddB30 {
		padding-bottom: 30rpx;
	}

	.paddB40 {
		padding-bottom: 40rpx;
	}

	.paddB50 {
		padding-bottom: 50rpx;
	}

	.paddK40 {
		padding: 40rpx;
	}

	.paddK20 {
		padding: 20rpx;
	}

	.paddL10 {
		padding-left: 10rpx;
	}

	.paddL20 {
		padding-left: 20rpx;
	}

	.paddL40 {
		padding-left: 40rpx;
	}

	.paddL60 {
		padding-left: 60rpx;
	}

	.paddL80 {
		padding-left: 80rpx;
	}

	.paddR20 {
		padding-right: 20rpx;
	}

	.paddR40 {
		padding-right: 40rpx;
	}

	.display {
		display: flex;
	}

	.displayWarp {
		flex-wrap: wrap;
		justify-content: left;
	}

	.aliJust {
		align-items: center;
		justify-content: space-between;
	}

	.justCenter {
		justify-content: center;
		align-items: center;
	}

	.arvImg {
		width: 180rpx;
		height: 180rpx;
	}

	.img160 {
		width: 160rpx;
		height: 160rpx;
	}

	.img145 {
		width: 145rpx;
		height: 145rpx;
	}

	.imgz {
		width: 100%;
		height: 100%;
	}

	.AdDcenter {
		align-items: center;
	}

	.swiper {
		height: 100%;
	}

	scroll-view ::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}

	/* 搜索框 */
	.fitnessTitle {
		padding: 20rpx 40rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 100);
		justify-content: center;
	}

	.searchFit {
		width: 125rpx;
		height: 62rpx;
		line-height: 62rpx;
		border-radius: 60rpx;
		background-color: rgba(47, 47, 47, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 30rpx;
		text-align: center;
	}

	.searTitle {
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 83rpx;
		line-height: 83rpx;
		background-color: #F6F7FB;
		border-radius: 62rpx;
		padding-left: 30rpx;
	}

	.leftImg {
		width: 100%;
		height: 250rpx;
		border-radius: 8rpx 8rpx 0px 0px;
	}

	/* 置顶边框 */
	.toppBorder {
		border: 1px solid #CCCCCC;
		padding: 4rpx;
		height: 40rpx;
	}

	/* 小按钮 */
	.kuangz {
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 62rpx;
		background-color: rgba(255, 255, 255, 100);
		color: #2F2F2F;
		border: 2rpx solid rgba(47, 47, 47, 100);
		justify-content: center;
	}

	/* 宽度 */
	.widP100 {
		width: 100%;
	}

	.widP96 {
		width: 96%;
	}

	.widP90 {
		width: 90%;
	}

	.widP85 {
		width: 85%;
	}

	.widP80 {
		width: 80%;
	}

	.widP70 {
		width: 70%;
	}

	.widP75 {
		width: 75%;
	}

	.widP65 {
		width: 65%;
	}

	.widP60 {
		width: 60%;
	}

	.widP55 {
		width: 55%;
	}

	.widP50 {
		width: 50%;
	}

	.widP47 {
		width: 47%;
	}

	.widP45 {
		width: 45%;
	}

	.widP40 {
		width: 40%;
	}

	.widP30 {
		width: 30%;
	}

	.widP25 {
		width: 25%;
	}

	.widP20 {
		width: 20;
	}

	/* 背景颜色 */
	.bgColorfff {
		background-color: #fff;
	}

	.bgColorF6F7FB {
		background-color: #F6F7FB;
	}


	/* margin 间距 */
	.marCenter {
		margin: 0 auto;
	}

	.marT6 {
		margin-top: 6rpx;
	}

	.marT10 {
		margin-top: 10rpx;
	}

	.marT15 {
		margin-top: 15rpx;
	}

	.marT20 {
		margin-top: 20rpx;
	}

	.marT30 {
		margin-top: 30rpx;
	}

	.marT40 {
		margin-top: 40rpx;
	}

	.marT60 {
		margin-top: 60rpx;
	}

	.marT80 {
		margin-top: 80rpx;
	}

	.marT100 {
		margin-top: 100rpx;
	}

	.marT140 {
		margin-top: 140rpx;
	}

	.margin10 {
		margin: 20rpx 0;
	}

	.marL20 {
		margin-left: 20rpx;
	}

	.marL40 {
		margin-left: 40rpx;
	}

	.marB20 {
		margin-bottom: 20rpx;
	}

	.marB40 {
		margin-bottom: 40rpx;
	}

	.marR20 {
		margin-bottom: 20rpx;
	}

	.marR40 {
		margin-bottom: 40rpx;
	}

	.marB60 {
		margin-bottom: 60rpx;
	}

	.marB100 {
		margin-bottom: 100rpx;
	}

	.marB140 {
		margin-bottom: 140rpx;
	}

	.marB200 {
		margin-bottom: 200rpx;
	}

	.floatR {
		float: right;
	}

	/* 图标大小 */
	.iconSize6 {
		width: 12rpx;
		height: 12rpx;
	}

	.iconSize10 {
		width: 20rpx;
		height: 20rpx;
	}

	.iconSize12 {
		width: 25rpx;
		height: 25rpx;
	}

	.iconSize14 {
		width: 29rpx;
		height: 29rpx;
	}

	.iconSize16 {
		width: 33rpx;
		height: 33rpx;
	}

	.iconSize20 {
		width: 40rpx;
		height: 40rpx;
	}

	.iconSize45 {
		width: 45rpx;
		height: 45rpx;
	}

	.iconSize24 {
		width: 50rpx;
		height: 50rpx;
	}

	.iconSize28 {
		width: 56rpx;
		height: 56rpx;
	}

	.iconSize30 {
		width: 62rpx;
		height: 62rpx;
	}

	.iconSize40 {
		width: 83rpx;
		height: 83rpx;
	}

	.iconSize50 {
		width: 104rpx;
		height: 104rpx;
	}

	.iconSize60 {
		width: 125rpx;
		height: 125rpx;
	}

	.iconSize26 {
		font-size: 54rpx;
	}

	/* 字体大小 */
	.fontSize10 {
		font-size: 20rpx;
	}

	.fontSize12 {
		font-size: 24rpx;
	}

	.fontSize14 {
		font-size: 28rpx;
	}

	.fontSize16 {
		font-size: 32rpx;
	}

	.fontSize18 {
		font-size: 36rpx;
	}

	.fontSize20 {
		font-size: 40rpx;
	}

	.fontSize24 {
		font-size: 48rpx;
	}

	.fontSize26 {
		font-size: 52rpx;
	}

	.fontSize28 {
		font-size: 56rpx;
	}

	.fontBold {
		font-weight: bold;
	}

	.FontLeft {
		text-align: left;
	}

	.FontCenter {
		text-align: center;
	}

	.FontRight {
		text-align: right;
	}

	.widHei36 {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
	}

	.widHei50 {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
	}

	.widHei70 {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 4px solid rgba(246, 247, 251, 100);
	}

	.linHeight40 {
		line-height: 40rpx;
	}

	.linHeight60 {
		line-height: 60rpx;
	}

	.linHeight80 {
		line-height: 80rpx;
	}

	.colorColor {
		color: #A6A6A6;
	}

	.colorCor999 {
		color: #999999;
	}

	.colorCor555 {
		color: #555555;
	}

	.colorCor757575 {
		color: #757575;
	}

	.colorCD {
		color: #CDCDCD;
	}

	.colorFF4A4A {
		color: #FF4A4A;
	}

	.fontWei {
		font-weight: bold;
	}

	.slh {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 文字隐藏 省略号*/
	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* checkBox样式 */
	.checkStyle {
		width: 41rpx;
		height: 41rpx;
		margin-right: 20rpx;
	}

	.orCOdeWh {
		width: 480rpx;
		height: 480rpx;
	}

	/* 提交大按钮 */
	.btnBig {
		width: 90%;
		height: 91rpx;
		line-height: 91rpx;
		border-radius: 62rpx;
		background-color: rgba(47, 47, 47, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 33rpx;
		text-align: center;
		font-family: Arial;
		margin: 104rpx auto;
	}

	.btnFix {
		position: fixed;
		bottom: 60rpx;
		left: 40rpx;
		margin: 0;
	}

	.kongBtn {
		background-color: #fff;
		border: 1px solid #101010;
		color: #101010;
	}
</style>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值