【项目】UniApp实战多端企业网盘全栈开发 3 引入全局样式【一】

悠悠 2024-03-22 03:08 72阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  3 引入全局样式【一】

![在这里插入图片描述][4b98202e7ac344e59d81e3d1256b189d.png_pic_center]

##### 3 引入全局样式【一】 #####

在项目下新建`common` 目录

![在这里插入图片描述][99788514fb2c43e88c348576d0ddb666.png_pic_center]

首先是uniapp 给的一个多端样式库

![在这里插入图片描述][cf3853a4cb5e44a4a7d16535e57c4736.png_pic_center]

我们可以新建一个这个模板项目，把它的样式文件拿过来就行了

![在这里插入图片描述][85a11b0a797f4564938faa76fd7f0331.png_pic_center]

就是这个

![在这里插入图片描述][90bf55f969a64d1a84ff441f50a18ccf.png_pic_center]

还有个字体文件，在static 目录下

![在这里插入图片描述][e7b16c0b20c94be7922d1e5158f8b04f.png_pic_center]

![在这里插入图片描述][d273394f94e4450fac0a59ff0119c520.png_pic_center]

在`App.vue` 中引入一下

![在这里插入图片描述][4b8b04e846284dd48dc451b091623764.png_pic_center]

我们自己也来一个公共的样式文件

![在这里插入图片描述][2b5782410ca848179496b9225487f241.png_pic_center]

common.css

/* 背景色主色调 */
    .bg-main {
        
    	background-color: #009CFF !important;
    }
    
    .bg-main-hover {
        
    	background-color: #51BBFF !important;
    }
    
    .bg-main-disabled {
        
    	background-color: #51BBFF !important;
    }
    
    /* 文字主色调 */
    .text-main {
        
    	color: #009CFF !important;
    }
    
    .text-main-hover {
        
    	color: #51BBFF !important;
    }
    
    .border-main {
        
    	border-color: #51BBFF !important;
    }

![在这里插入图片描述][cc092b5515af4100bde58f295221d648.png_pic_center]

pages 引用

![在这里插入图片描述][11415f076f554295a89091e30efb024a.png_pic_center]

看看效果，运行到真机

![在这里插入图片描述][bc6aea0b978f46659a54fa037ff05a7f.png_pic_center]

![在这里插入图片描述][0af4d0bc6405427085d6c68a4b0bd7c2.png_pic_center]

没问题。颜色很对味。

[4b98202e7ac344e59d81e3d1256b189d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/bf5724a28ff54c7f96d4e91c04add452.png
[99788514fb2c43e88c348576d0ddb666.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e1606c84c5544d88a65cce7599c58552.png
[cf3853a4cb5e44a4a7d16535e57c4736.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b1d7e93d97834577b1259bfc28eca7dc.png
[85a11b0a797f4564938faa76fd7f0331.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b43372d7653649719003bac6e36d9f0b.png
[90bf55f969a64d1a84ff441f50a18ccf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f0f7b2347005485f81fc47c00438bbe7.png
[e7b16c0b20c94be7922d1e5158f8b04f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c1436f67d48346c2b5723e70977dec6a.png
[d273394f94e4450fac0a59ff0119c520.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/babb0fcbb07c420e9dad9bf1a489d7da.png
[4b8b04e846284dd48dc451b091623764.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4810d1255cec4f4383799fb8eadd136e.png
[2b5782410ca848179496b9225487f241.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c70827706b1a4f0183cf625f2097bf92.png
[cc092b5515af4100bde58f295221d648.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/034ce7cef104433d9b44cb477de403df.png
[11415f076f554295a89091e30efb024a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/11d6f43ed1d94a43868004fc0f60fb83.png
[bc6aea0b978f46659a54fa037ff05a7f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/61f00319a19b4a898fbe848747a8e6ff.png
[0af4d0bc6405427085d6c68a4b0bd7c2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fe1bad76493e4813a28a9ebaacbe4f7e.png