更新记录

1.0.0(2025-04-24) 下载此版本

初次发布


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

npm下载量:downloads

欢迎使用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;

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问