鸡汤来咯开发学习笔记-1

前端 · 2024-06-20

1.建立tarbar

"tabBar": {
    "color": "#333",
    "selectedColor": "#74dbef",
    "list": [
        {
            "text": "首页",
            "pagePath": "pages/index/index",
            "iconPath": "static/images/home.png",
            "selectedIconPath": "static/images/home-h.png"
        },
        {
            "text": "我的",
            "pagePath": "pages/self/self",
            "iconPath": "static/images/self.png",
            "selectedIconPath": "static/images/self-h.png"
        }
    ]
},

2.新建common的文件夹,在文件夹下面建立style文件夹,再在里面建立base-style.scss和common-style.scss

base-style

$brand-theme-color:#74dbef;
$brand-theme-color-aux:#576b95;  //品牌辅助色
$page-bg-color:#F7F7F7;          //页面背景色
$border-color:#e0e0e0;           //边框颜色
$border-color-light:#efefef;     //边框亮色

$text-font-color-1:#000;         //文字主色
$text-font-color-2:#676767;      //副标题颜色
$text-font-color-3:#a7a7a7;      //浅色
$text-font-color-4:#b2b2b2;      //更浅色

commom-style

view,text{

box-sizing: border-box;
}
page{

background: pink;
}

3.在uni.css和app.vue中分别引用上面俩个style文件//相对地址和绝对地址的写法

uni.css里面保存的是一些公有的属性,可以进行调用使用,而app.vue里面是直接对页面的属性的修改,一个是公有的变量,一个相当于页面的配置器

4.在index.vue中直接引用刚才的base-style中的属性,来修饰文本title

<style lang="scss">
.title {
    
    color:$brand-theme-color;
}

鸡汤来咯
Theme Jasmine by Kent Liao