uview颜色搭配

╰半夏微凉° 2021-07-25 20:02 1552阅读 0赞

一、字体颜色

> uview 分别提炼了4种用于文字颜色，分别是：主要文字、常规文字、次要文字、占位文字颜色。 主要文字颜色一般用于内容的标题等，如新闻列表的标题  
> 常规文字颜色一般用于内容的主体，如新闻列表的概要 次要文字颜色一般用于内容的提示部分，如新闻列表底部的时间，评论数量的提示文字  
> 占位文字颜色属于更浅的灰色，看场景选择使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center]

/* 变量的定义，该部分uView已全局引入，无需您编写 */
    $u-main-color: #303133;
    $u-content-color: #606266;
    $u-tips-color: #909399;
    $u-light-color: #c0c4cc;
    
    /* 在您编写css的地方使用这些变量 */
    .title { 
    	color: $u-main-color;
    }

二、背景色  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 1]

/* 变量的定义，该部分uView已全局引入，无需您编写 */
    $u-type-primary: #2979ff;
    $u-type-primary-light: #ecf5ff;
    $u-type-primary-disabled: #a0cfff;
    $u-type-primary-dark: #2b85e4;

2、success

color: $u-type-success;
    color: $u-type-success-light;
    color: $u-type-success-disabled;
    color: $u-type-success-dark;

3、error

color: $u-type-error;
    color: $u-type-error-light;
    color: $u-type-error-disabled;
    color: $u-type-error-dark;

4、warning

color: $u-type-warning;
    color: $u-type-warning-light;
    color: $u-type-warning-disabled;
    color: $u-type-warning-dark;

5、info

color: $u-type-info;
    color: $u-type-info-light;
    color: $u-type-info-disabled;
    color: $u-type-info-dark;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201127154625909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201127154704730.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz,size_16,color_FFFFFF,t_70#pic_center