更新记录
1.0.0(2025-04-24)
下载此版本
初次发布
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
√ |
√ |
√ |
npm下载量:
欢迎使用c-common-scss
安装
// npm安装方式,插件市场导入无需执行此命令。插件市场导入地址:
npm install c-common-scss
使用方法
在App.vue
文件引入
<style lang="scss">
// 插件市场引入
@import "uni_modules/c-common-scss";
// npm引入
@import "c-common-scss";
</style>
在页面中使用
<template>
<view class="bg-white">
<view class="w-100 h-100 bg-theme">
123
</view>
<view class="p-20-40">
<view class=" h-200 double-center color-white">
666
</view>
</view>
</view>
</template>
样式基础值
在c-common-scss/index.scss
文件中可修改相对应样式
$themeColor: #09b4f1; // 主题色
$borderColor: #f2f2f2; // border的颜色
$maxVal: 200; // 循环最大数值
$maxShowText: 3; // 文本溢出省略最大能省略几行
$baseMultiple: 2; // 默认倍数,2的正整数倍,例如只能设置p-2,设置p-1不生效
$baseValue: 1rpx; // 默认一个单位
宽度、高度、圆角、字体大小、行高、top、left、right、bottom;
类名 |
具体样式 |
w-2 |
width: 2rpx; |
h-2 |
height: 2rpx; |
rounded-2 |
border-radius: 2rpx; |
font-size-2 |
font-size: 2rpx; |
line-height-2 |
line-height: 2rpx; |
top-2 |
top: 2rpx; |
left-2 |
left: 2rpx; |
right-2 |
right: 2rpx; |
bottom-2 |
bottom: 2rpx; |
display
类名 |
具体样式 |
block |
display: block; |
inline-block |
display: inline-block; |
flex |
display: flex; |
inline-flex |
display: inline-flex; |
none |
display: none; |
padding和margin,以下为padding示例,margin类似,把“p-”换成“m-”
类名 |
具体样式 |
p-2 |
padding: 2rpx; |
p-2-4 |
padding: 2rpx 4rpx; |
p-x-2 |
padding: 0 2rpx; |
p-y-2 |
padding: 2rpx 0; |
p-t-2 |
padding-top: 2rpx; |
p-l-2 |
padding-left: 2rpx; |
p-r-2 |
padding-right: 2rpx; |
p-b-2 |
padding-bottom: 2rpx; |
border
类名 |
具体样式 |
border |
border: 1px solid $borderColor; |
border-theme |
border: 1px solid $themeColor; |
border-top |
border-top: 1px solid $borderColor; |
border-left |
border-left: 1px solid $borderColor; |
border-right |
border-right: 1px solid $borderColor; |
border-bottom |
border-bottom: 1px solid $borderColor; |
flex相关属性
类名 |
具体样式 |
flex-1 |
flex: 1; |
flex-shrink-0 |
flex-shrink: 0; |
上面样式默认不加display: flex; |
下面样式默认加display: flex; |
flex-wrap |
flex-wrap: wrap; |
flex-nowrap |
flex-wrap: nowrap; |
flex-wrap-reverse |
flex-wrap: wrap-reverse; |
flex-row |
flex-direction: row; |
flex-row-reverse |
flex-direction: row-reverse; |
flex-column |
flex-direction: column; |
flex-column-reverse |
flex-direction: column-reverse; |
j-c-start |
justify-content: flex-start; |
j-c-end |
justify-content: flex-end; |
j-c-center |
justify-content: center; |
j-c-between |
justify-content: space-between; |
a-i-start |
align-items: flex-start; |
a-i-end |
align-items: flex-end; |
a-i-center |
align-items: center; |
a-i-between |
align-items: space-between; |
double-center |
align-items: center;justify-content: center; |
文本
类名 |
具体样式 |
nowrap |
white-space: nowrap; |
break-all |
word-break: break-all; |
bold |
font-weight: bold; |
text-left |
text-align: left; |
text-right |
text-align: right; |
text-center |
text-align: center; |
text-overflow-1 |
文本溢出省略,最多3行,配置$maxShowText可更改上限 |
颜色
类名 |
具体样式 |
bg-white |
background-color: #fff; |
bg-theme |
background-color: $themeColor; |
color-white |
color: #fff; |
color-theme |
color: $themeColor; |
color-placeholder |
color: #c0c4cc; |
color-999 |
color: #999; |
color-666 |
color: #666; |
color-333 |
color: #333; |
定位
类名 |
具体样式 |
static |
position: static; |
fixed |
position: fixed; |
absolute |
position: absolute; |
relative |
position: relative; |
sticky |
position: sticky;有做top、z-index处理,不需要可以去掉;还有做h5环境兼容标题栏(导航栏),不需要可以去掉 |
其他
类名 |
具体样式 |
full-width |
width: 100%; |
full-height |
height: 100%; |
box-shadow |
box-shadow: 0 0 10rpx 2rpx rgba(#000, 0.04); |
rounded-999 |
border-radius: 999rpx; |
rounded-circle |
border-radius: 50%; |
hidden |
overflow: hidden; |
scroll |
overflow: scroll; |
scroll-x |
overflow-x: scroll; |
scroll-y |
overflow-y: scroll; |
nomore |
列表加载底部文字样式 |
card |
卡片样式 |
border-box |
box-sizing: border-box; |