AI智能
改变未来

【博主个人在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;}
赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 【博主个人在uni-app里使用的基本标签样式】