【博主个人在uni-app里使用的基本标签样式】

博主个人在uni-app里使用的基本标签样式

这些样式我都是放在pages的新建目录common，新建.css文件命名为base.css文件里的，

引用是在app.vue里写上 @import “./pages/common/base.css”; 就可以在每个页面用了

/* 7.31新加背景色 */
.bgc{
	width: 100%;
	height: 100%;
	background-color: #ccc;
}
.bgw{
	width: 100%;
	height: 100%;
	background-color: white;
}

	/* 7.30遮幕 按钮*/
	.zhemu{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 98;
		background-color: rgba(0,0,0,0.4);
	}
	.btn_1{
		background-color: #FE9236;
		margin: 0% 3%;
		border-radius: 25rpx;
		color: white;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 6rpx;
	}
	.btn_2{
		background-color: #FE9236;
		width: 30%;
		border-radius: 25rpx;
		color: white;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 6rpx;
	}
	
	/* 滚动条消失术 */
	::-webkit-scrollbar {
	 display: none;
	 }
	 
	 /* 单页面的滚动条消失术 */
/* 	 /deep/::-webkit-scrollbar {
	  display: none;
	  width: 0;
	  height: 0;
	 } */

	/* 20/7/28新加字间距 */
	.let1{
		letter-spacing: 2rpx;
	}
	.let2{
		letter-spacing: 4rpx;
	}
	.let3{
		letter-spacing: 6rpx;
	}



/* 新加删除线 */
	.ins{
		text-decoration: line-through;
	}
	.ib{
		display: inline-block;
	}
	/* 新加搜索 */
		text{
			font-size: 30rpx;
		}
	.search {
		background-color: #fff;
		height: 60%;
		border-bottom-left-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #ccc;
		overflow: hidden;
	}
	.search input{
		width: 90%;
	}

	.input_pla {
		font-size: 22rpx;
		color: #999;
	}

	.plan1 .img {
		width: 50rpx;
		height: 50rpx;
	}

	.search .img {
		width: 100%;
		height: 100%;
	}
	/*每个页面公共css */
	.wid_hei100{
	    width: 100%;
	    height: 100%;
	}
	.top_eee{
		border-top: 1rpx solid #eee;
	}
	.bor_bot{
		border-bottom: 1rpx solid #eee;
	}
	.bot_eee{
		border-bottom: 1rpx solid #eee;
	}
	.bot_ccc{
		border-bottom: 1rpx solid #ccc;
	}
	.bot_bbb{
		border-bottom: 1rpx solid #bbb;
	}
	.pad_l25{
		padding-left: 25rpx;
		padding-right: 25rpx;
	}
	.pad_l20{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.pad_l15{
		padding-left: 15rpx;
		padding-right: 15rpx;
	}
	.pad_l10{
		padding-left: 10rpx;
		padding-right: 10rpx;
	}
	.pad_t25{
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}
	.pad_t20{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.pad_t15{
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}
	.pad_t10{
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}
	.tex_ali{
	    text-align: center;
	}
	.tex_lef{
		text-align: left;
	}
	.tex_rig{
		text-align: right;
	}
	.flo_r{
	    float: right;
	}
	.flo_l{
	    float: left;
	}
	.w
	/* 浮动 */
	.flo_lef{
	    float: left;
	}
	.flo_rig{
	    float: right;
	}
	/* 宽度 */
	    .wdi_14{
	        width: 100%;
	            max-width: 1400rpx;
	            margin: auto;
	    }
	    .max_w{
	        margin: auto;
	        max-width: 1920rpx;
	        width: 100%;
	    }
	    .wdi_98{
	        width: 980rpx;
	        margin: auto;
	    }
		.hei100{
	height:100%;
	}
	.wth100{
		width: 100%;
	}
	.wth90{
		width: 90%;
	}
	/* 隐藏 */
	.dis_non{
	    display: none;
	}
	.ove_hid{
	    overflow: hidden;
	}
	.opa{
	    opacity: 0;
	}
	
	/* 地层 */
	 .z_0{
	     z-index: -1;
	 }
	 .z_9{
	    z-index: 9;
	}
	.z_99{
	    z-index: 99;
	}
	
	/* 定位 */
	    .abs{
	        position: absolute;
	    }
	    .abs_cen{
	        position: absolute;
	        top: 50%;
	        left: 50%;
	        transform: translate(-50%,-50%);
	    }
	    .abs_bot_cen{
	        position: absolute;
	        bottom: 0%;
	        left: 50%;
	        transform: translate(-50%,0%) !important;
	    }
		
	    .abs_top_cen{
	        position: absolute;
	        top: 0%;
	        left: 50%;
	        transform: translate(-50%,0%);
	    }
		.abs_lef_cen{
		    position: absolute;
		    top: 50%;
		    left: 0%;
		    transform: translate(0%,-50%);
		}
		.abs_rig_cen{
		    position: absolute;
		    top: 50%;
		    right: 0%;
		    transform: translate(0%,-50%);
		}
	    .rel{
	        position: relative;
	    }
	/* 弹性布局 */
	    .fle{
	        display: flex;
	    }
	    .fle_all{
	        display: flex;
	        align-items: center;
	        justify-content: center;
	    }
	    .fle_all2{
	        display: flex;
	        align-items: center;
	        justify-content: space-between;
	    }
		.fle_jus2{
			display: flex;
			align-items: center;
		}
	    .fle_all3{
	        display: flex;
	        align-items: center;
	        justify-content: space-around;
	    }
		.fle_jus3{
			display: flex;
			justify-content: space-around;
		}
	    .fle_col{
			display: flex;
	        flex-direction: column;
	    }
		.fle_row{
			display: flex;
		    flex-direction: row;
		}
	    .fle_wra{
	        /* 换行 */
	        flex-wrap: wrap;
	    }
	    .fle_sta{
	        align-self: flex-start;
	    }
	    .fle_end{
	        align-self: flex-end;
	    }
	    .fle_bas{
	        align-self: baseline;
	    }
	    .fle_ali{
			display: flex;
	        align-items: center;
	    }
		.fle_jus{
			display: flex;
			justify-content: center;
		}
	    .fle1{
	        flex: 1;
	    }
	    .fle1_2{
	        flex: 1.5;
	    }
	    .fle2{
	        flex: 2;
	    }
	    .fle3{
	        flex: 3;
	    }
	    .fle4{
	        flex: 4;
	    }
	    .fle5{
	        flex: 5;
	    }
	    .fle6{
	        flex: 6;
	    }
	    .fle7{
	        flex: 7;
	    }
	    /* 行数 */
	    .one_line{
	        white-space: nowrap;overflow: hidden; ;text-overflow: ellipsis;
			width: 100%;
	    }
	    .two_line{
	        text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
	        overflow: hidden;
	        height: 108rpx;
	        -webkit-line-clamp: 2;
	    }
	/* 圆角边框 */
    .brr5{
        border-radius: 5rpx;
        overflow: hidden;
    }
    .brr10{
        border-radius: 10rpx;
        overflow: hidden;
    }
    .brr15{
        border-radius: 15rpx;
        overflow: hidden;
    }
    .brr20{
        border-radius: 20rpx;
        overflow: hidden;
    }
    .brr25{
        border-radius: 25rpx;
        overflow: hidden;
    }
    .brr50{
        border-radius: 50%;
        overflow: hidden;
    }
	/* 图片 */
	image{
	    width: 100%;
	    height: 100%;
	}
	.cur{
	    cursor: default;
	}
	
	/*字体*/
	.max_h1{
	    font-weight: bold;
	        font-size: 88rpx;
	}
	    .h1 {
	        font-weight: bold;
	        font-size: 64rpx;
	    }
	
	    .h2 {
	        font-weight: bold;
	        font-size: 58rpx;
	    }
	
	    .h3 {
	        font-weight: bold;
	        font-size: 44rpx;
	    }
	    .h4 {
	        font-weight: bold;
	        font-size: 36rpx;
	    }
	.h5 {
	        font-weight: bold;
	        font-size: 28rpx;
	    }
	.h6 {
	        font-weight: bold;
	        font-size: 24rpx;
	    }
	    .bol{
	        font-weight: bold;
	    }
	    .fon_1 {
	        font-size: 64rpx;
	    }
	
	    .fon_2 {
	        font-size: 58rpx;
	    }
	
	    .fon_3 {
	        font-size: 44rpx;
	    }
	    .fon_4 {
	        font-size: 36rpx;
	    }
	.fon_5 {
	        font-size: 28rpx;
	    }
	.fon_6 {
	        font-size: 24rpx;
	    }
		.fon_7 {
		        font-size: 18rpx;
		    }
			.fon_8{
			        font-size: 12rpx;
			    }
	    .fon1_cen {
	        font-size: 64rpx;
	        text-align: center;
	    }
	
	    .fon2_cen {
	        font-size: 58rpx;
	        text-align: center;
	    }
	
	    .fon3_cen {
	        font-size: 44rpx;
	        text-align: center;
	    }
	    .fon4_cen {
	        font-size: 36rpx;
	        text-align: center;
	    }
	.fon5_cen {
	        font-size: 28rpx;
	        text-align: center;
	    }
	.fon6_cen {
	        font-size: 24rpx;
	        text-align: center;
	    }
	
	/*字体颜色*/
	    .col_9{
	        color: #999;
	    }
	    .col_6{
	        color: #666;
	    }
	    .col_3{
	        color: #333;
	    }
	    .col_c{
	        color: #ccc;
	    }
	    .col_d{
	        color: #ddd;
	    }
	    .col_e{
	        color: #eee;
	    }
	    .col_w{
	        color: white;
	    }
	
	    /* 距离 */
	    .mto10{
	        margin-top: 10rpx;
	    }
	    .mto15{
	        margin-top: 15rpx;
	    }
	    .mto20{
	        margin-top: 20rpx;
	    }
	    .mto30{
	        margin-top: 30rpx;
	    }
	    .mto40{
	        margin-top: 40rpx;
	    }
	    .mto50{
	        margin-top: 50rpx;
	    }
		    .mbo10{
		        margin-bottom: 10rpx;
		    }
		    .mbo15{
		        margin-bottom: 15rpx;
		    }
		    .mbo20{
		        margin-bottom: 20rpx;
		    }
		    .mbo30{
		        margin-bottom: 30rpx;
		    }
		    .mbo40{
		        margin-bottom: 40rpx;
		    }
		    .mbo50{
		        margin-bottom: 50rpx;
		    }
	
	    .mri10{
	        margin-right: 10rpx;
	    }
	    .mri20{
	        margin-right: 20rpx;
	    }
	    .mri30{
	        margin-right: 30rpx;
	    }
	    .mri40{
	        margin-right: 40rpx;
	    }
	    .mri50{
	        margin-right: 50rpx;
	    }
	
	
	    .mle10{
	        margin-left: 10rpx;
	    }
	    .mle20{
	        margin-left: 20rpx;
	    }
	    .mle30{
	        margin-left: 30rpx;
	    }
	    .mle40{
	        margin-left: 40rpx;
	    }
	    .mle50{
	        margin-left: 50rpx;
	    }
	
	
	    .mbo10{
	        margin-bottom: 10rpx;
	    }
	    .mbo15{
	        margin-bottom: 15rpx;
	    }
	    .mbo20{
	        margin-bottom: 20rpx;
	    }
	    .mbo30{
	        margin-bottom: 30rpx;
	    }
	    .mbo40{
	        margin-bottom: 40rpx;
	    }
	    .mbo50{
	        margin-bottom: 50rpx;
	    }