[toc]
# 1.3 引入全局样式
## 1.3.1 `common.css`文件的内容
```
/* 文字 */
.text-main{
color: #8745FF;
}
.text-main-hover{
color: #BA7ACE;
}
.text-main-disabled{
color: #BA7ACE;
}
/* 背景 */
.bg-main{
background-color: #8745FF;
}
.bg-main-hover{
background-color: #BA7ACE;
}
.bg-main-disabled{
background-color: #BA7ACE;
}
/* 边框 */
.border-main{
border-color: #8745FF!important;
}
.btn-main-plain{
border-color: #8745FF!important;
border-width: 1rpx;
border-style: solid;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
color: #8745FF;
padding-top: 15rpx;
padding-bottom: 15rpx;
padding-left: 20rpx;
padding-right: 20rpx;
border-radius: 8rpx;
}
/* 行高 */
.line-h{
line-height: 1.2;
}
/* 分割线 */
.f-divider{
height: 18rpx;
background-color: #F5F5F4;
}
```
## 1.3.2 `free.css`文件的内容
```
/* #ifndef APP-PLUS-NVUE */
/* scroll-view */
.scroll-row {
width: 100%;
white-space: nowrap;
}
.scroll-row-item {
display: inline-block !important;
}
/* #endif */
/* 图标 */
.iconfont {
font-family: iconfont;
}
.view,
.text {
font-size: 28rpx;
line-height: 1.8;
color: #0E151D;
}
/* 宽度 */
/* #ifndef APP-PLUS-NVUE */
.w-100 {
width: 100%;
}
/* #endif */
.row {
margin-right: -20rpx;
margin-left: -20rpx;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-wrap: wrap;
flex-direction: row;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
position: relative;
padding-right: 20rpx;
padding-left: 20rpx;
}
.col-12 {
width: 750rpx;
}
.col-11 {
width: 687.5rpx;
}
.col-10 {
width: 625rpx;
}
.col-9 {
width: 562.5rpx;
}
.col-8 {
width: 500rpx;
}
.col-7 {
width: 437.5rpx;
}
.col-6 {
width: 375rpx;
}
.col-5 {
width: 312.5rpx;
}
.col-4 {
width: 250rpx;
}
.col-3 {
width: 187.5rpx;
}
.col-2 {
width: 125rpx;
}
.col-1 {
width: 62.5rpx;
}
.col-offset-12 {
margin-left: 750rpx;
}
.col-offset-11 {
margin-left: 687.5rpx;
}
.col-offset-10 {
margin-left: 625rpx;
}
.col-offset-9 {
margin-left: 562.5rpx;
}
.col-offset-8 {
margin-left: 500rpx;
}
.col-offset-7 {
margin-left: 437.5rpx;
}
.col-offset-6 {
margin-left: 375rpx;
}
.col-offset-5 {
margin-left: 312.5rpx;
}
.col-offset-4 {
margin-left: 250rpx;
}
.col-offset-3 {
margin-left: 187.5rpx;
}
.col-offset-2 {
margin-left: 125rpx;
}
.col-offset-1 {
margin-left: 62.5rpx;
}
.col-offset-0 {
margin-left: 0;
}
/* flex 布局 */
.flex {
/* #ifndef APP-PLUS-NVUE */
display: flex !important;
/* #endif */
flex-direction: row;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.align-center {
align-items: center;
}
.align-stretch {
align-items: stretch;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
/* #ifndef APP-PLUS-NVUE */
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-center {
align-content: center;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-stretch {
align-content: stretch;
}
/* #endif */
.flex-1 {
flex: 1;
}
.flex-2 {
flex: 2;
}
.flex-3 {
flex: 3;
}
.flex-4 {
flex: 4;
}
.flex-5 {
flex: 5;
}
/* #ifndef APP-PLUS-NVUE */
.flex-shrink {
flex-shrink: 0;
}
/* #endif */
.container {
padding-right: 20rpx;
padding-left: 20rpx;
}
/* -- 内外边距 -- */
.m-0 {
margin: 0;
}
/* #ifndef APP-PLUS-NVUE */
.m-auto {
margin: auto;
}
/* #endif */
.m-1 {
margin: 10rpx;
}
.m-2 {
margin: 20rpx;
}
.m-3 {
margin: 30rpx;
}
.m-4 {
margin: 40rpx;
}
.m-5 {
margin: 50rpx;
}
.mt-0 {
margin-top: 0;
}
/* #ifndef APP-PLUS-NVUE */
.mt-auto {
margin-top: auto;
}
/* #endif */
.mt-1 {
margin-top: 10rpx;
}
.mt-2 {
margin-top: 20rpx;
}
.mt-3 {
margin-top: 30rpx;
}
.mt-4 {
margin-top: 40rpx;
}
.mt-5 {
margin-top: 50rpx;
}
.mb-0 {
margin-bottom: 0;
}
/* #ifndef APP-PLUS-NVUE */
.mb-auto {
margin-bottom: auto;
}
/* #endif */
.mb-1 {
margin-bottom: 10rpx;
}
.mb-2 {
margin-bottom: 20rpx;
}
.mb-3 {
margin-bottom: 30rpx;
}
.mb-4 {
margin-bottom: 40rpx;
}
.mb-5 {
margin-bottom: 50rpx;
}
.ml-0 {
margin-left: 0;
}
/* #ifndef APP-PLUS-NVUE */
.ml-auto {
margin-left: auto;
}
/* #endif */
.ml-1 {
margin-left: 10rpx;
}
.ml-2 {
margin-left: 20rpx;
}
.ml-3 {
margin-left: 30rpx;
}
.ml-4 {
margin-left: 40rpx;
}
.ml-5 {
margin-left: 50rpx;
}
.mr-0 {
margin-right: 0;
}
/* #ifndef APP-PLUS-NVUE */
.mr-auto {
margin-right: auto;
}
/* #endif */
.mr-1 {
margin-right: 10rpx;
}
.mr-2 {
margin-right: 20rpx;
}
.mr-3 {
margin-right: 30rpx;
}
.mr-4 {
margin-right: 40rpx;
}
.mr-5 {
margin-right: 50rpx;
}
.my-0 {
margin-top: 0;
margin-bottom: 0;
}
/* #ifndef APP-PLUS-NVUE */
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
/* #endif */
.my-1 {
margin-top: 10rpx;
margin-bottom: 10rpx;
}
.my-2 {
margin-top: 20rpx;
margin-bottom: 20rpx;
}
.my-3 {
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.my-4 {
margin-top: 40rpx;
margin-bottom: 40rpx;
}
.my-5 {
margin-top: 50rpx;
margin-bottom: 50rpx;
}
.mx-0 {
margin-left: 0;
margin-right: 0;
}
/* #ifndef APP-PLUS-NVUE */
.mx-auto {
margin-left: auto;
margin-right: auto;
}
/* #endif */
.mx-1 {
margin-left: 10rpx;
margin-right: 10rpx;
}
.mx-2 {
margin-left: 20rpx;
margin-right: 20rpx;
}
.mx-3 {
margin-left: 30rpx;
margin-right: 30rpx;
}
.mx-4 {
margin-left: 40rpx;
margin-right: 40rpx;
}
.mx-5 {
margin-left: 50rpx;
margin-right: 50rpx;
}
.p-0 {
padding: 0;
}
.p {
padding: 5rpx;
}
.p-1 {
padding: 10rpx;
}
.p-2 {
padding: 20rpx;
}
.p-3 {
padding: 30rpx;
}
.p-4 {
padding: 40rpx;
}
.p-5 {
padding: 50rpx;
}
.pt-0 {
padding-top: 0;
}
.pt {
padding-top: 5rpx;
}
.pt-1 {
padding-top: 10rpx;
}
.pt-2 {
padding-top: 20rpx;
}
.pt-3 {
padding-top: 30rpx;
}
.pt-4 {
padding-top: 40rpx;
}
.pt-5 {
padding-top: 50rpx;
}
.pb-0 {
padding-bottom: 0;
}
.pb-1 {
padding-bottom: 10rpx;
}
.pb {
padding-bottom: 5rpx;
}
.pb-2 {
padding-bottom: 20rpx;
}
.pb-3 {
padding-bottom: 30rpx;
}
.pb-4 {
padding-bottom: 40rpx;
}
.pb-5 {
padding-bottom: 50rpx;
}
.pl-0 {
padding-left: 0;
}
.pl {
padding-left: 5rpx;
}
.pl-1 {
padding-left: 10rpx;
}
.pl-2 {
padding-left: 20rpx;
}
.pl-3 {
padding-left: 30rpx;
}
.pl-4 {
padding-left: 40rpx;
}
.pl-5 {
padding-left: 50rpx;
}
.pr-0 {
padding-right: 0;
}
.pr {
padding-right: 5rpx;
}
.pr-1 {
padding-right: 10rpx;
}
.pr-2 {
padding-right: 20rpx;
}
.pr-3 {
padding-right: 30rpx;
}
.pr-4 {
padding-right: 40rpx;
}
.pr-5 {
padding-right: 50rpx;
}
.py-0 {
padding-top: 0;
padding-bottom: 0;
}
.py {
padding-top: 5rpx;
padding-bottom: 5rpx;
}
.py-1 {
padding-top: 10rpx;
padding-bottom: 10rpx;
}
.py-2 {
padding-top: 20rpx;
padding-bottom: 20rpx;
}
.py-3 {
padding-top: 30rpx;
padding-bottom: 30rpx;
}
.py-4 {
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.py-5 {
padding-top: 50rpx;
padding-bottom: 50rpx;
}
.px-0 {
padding-left: 0;
padding-right: 0;
}
.px-1 {
padding-left: 10rpx;
padding-right: 10rpx;
}
.px {
padding-left: 5rpx;
padding-right: 5rpx;
}
.px-2 {
padding-left: 20rpx;
padding-right: 20rpx;
}
.px-3 {
padding-left: 30rpx;
padding-right: 30rpx;
}
.px-4 {
padding-left: 40rpx;
padding-right: 40rpx;
}
.px-5 {
padding-left: 50rpx;
padding-right: 50rpx;
}
/* 文字大小 */
.font-smaller {
font-size: 15rpx;
}
.font-small {
font-size: 20rpx;
}
.font-sm {
font-size: 25rpx;
}
.font {
font-size: 30rpx !important;
}
.font-md {
font-size: 35rpx !important;
}
.font-lg {
font-size: 40rpx;
}
.h1 {
font-size: 80rpx;
line-height: 1.8;
}
.h2 {
font-size: 60rpx;
line-height: 1.8;
}
.h3 {
font-size: 45rpx;
line-height: 1.8;
}
.h4 {
font-size: 32rpx;
line-height: 1.8;
}
.h5 {
font-size: 30rpx;
line-height: 1.8;
}
.h6 {
font-size: 28rpx;
line-height: 1.8;
}
/* 文字缩进 */
/* #ifndef APP-PLUS-NVUE */
.text-indent {
text-indent: 2;
}
/* #endif */
/* 文字划线 */
.text-through {
text-decoration: line-through;
}
/* 文字对齐 */
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
/* 文字换行溢出处理 */
.text-ellipsis {
/* #ifndef APP-PLUS-NVUE */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* #endif */
/* #ifdef APP-PLUS-NVUE */
lines: 1;
/* #endif */
}
/* 文字粗细和斜体 */
.font-weight-light {
font-weight: 300;
}
/*细*/
.font-weight-lighter {
font-weight: 100;
}
/*更细*/
.font-weight-normal {
font-weight: 400;
}
/*正常*/
.font-weight-bold {
font-weight: 700;
}
/*粗*/
.font-weight-bolder {
font-weight: bold;
}
/*更粗*/
.font-italic {
font-style: italic;
}
/*斜体*/
/* 文字颜色 */
.text-white {
color: #ffffff;
}
.text-primary {
color: #007bff;
}
.text-hover-primary {
color: #0056b3;
}
.text-secondary {
color: #6c757d;
}
.text-hover-secondary {
color: #494f54;
}
.text-success {
color: #28a745;
}
.text-hover-success {
color: #19692c;
}
.text-info {
color: #17a2b8;
}
.text-hover-info {
color: #0f6674;
}
.text-warning {
color: #ffc107;
}
.text-hover-warning {
color: #ba8b00;
}
.text-danger {
color: #dc3545;
}
.text-hover-danger {
color: #a71d2a;
}
.text-light {
color: #f8f9fa;
}
.text-hover-light {
color: #cbd3da;
}
.text-dark {
color: #343a40;
}
.text-hover-dark {
color: #121416;
}
.text-body {
color: #212529;
}
.text-muted {
color: #6c757d;
}
/* 浅灰色 */
.text-light-muted {
color: #A9A5A0;
}
.text-light-black {
color: rgba(0, 0, 0, 0.5);
}
.text-light-white {
color: rgba(255, 255, 255, 0.5);
}
/* 背景颜色 */
.bg-primary {
background-color: #007bff;
}
.bg-hover-primary:hover {
background-color: #0062cc;
}
.bg-secondary {
background-color: #6c757d;
}
.bg-hover-secondary:hover {
background-color: #545b62;
}
.bg-success {
background-color: #28a745;
}
.bg-hover-success {
background-color: #1e7e34;
}
.bg-info {
background-color: #17a2b8;
}
.bg-hover-info {
background-color: #117a8b;
}
.bg-warning {
background-color: #ffc107;
}
.bg-hover-warning {
background-color: #d39e00;
}
.bg-danger {
background-color: #dc3545;
}
.bg-hover-danger {
background-color: #bd2130;
}
.bg-light {
background-color: #f8f9fa;
}
.bg-hover-light {
background-color: #dae0e5;
}
.bg-dark {
background-color: #343a40;
}
.bg-hover-dark {
background-color: #1d2124;
}
.bg-white {
background-color: #ffffff;
}
.bg-transparent {
background-color: transparent;
}
/* 边框 */
.border {
border-width: 1rpx;
border-style: solid;
border-color: #dee2e6;
}
.border-top {
border-top-width: 1rpx;
border-top-style: solid;
border-top-color: #dee2e6;
}
.border-right {
border-right-width: 1rpx;
border-right-style: solid;
border-right-color: #dee2e6;
}
.border-bottom {
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #dee2e6;
}
.border-left {
border-left-width: 1rpx;
border-left-style: solid;
border-left-color: #dee2e6;
}
.border-0 {
border-width: 0 !important;
}
.border-top-0 {
border-top-width: 0 !important;
}
.border-right-0 {
border-right-width: 0 !important;
}
.border-bottom-0 {
border-bottom-width: 0 !important;
}
.border-left-0 {
border-left-width: 0 !important;
}
.border-primary {
border-color: #007bff;
}
.border-secondary {
border-color: #6c757d;
}
.border-light-secondary {
border-color: #E9E8E5;
}
.border-success {
border-color: #28a745;
}
.border-info {
border-color: #17a2b8;
}
.border-warning {
border-color: #ffc107;
}
.border-danger {
border-color: #dc3545;
}
.border-light {
border-color: #f8f9fa;
}
.border-dark {
border-color: #343a40;
}
.border-white {
border-color: #FFFFFF;
}
/* 圆角 */
.rounded {
border-radius: 8rpx;
}
.rounded-lg {
border-radius: 14rpx;
}
.rounded-top {
border-top-left-radius: 8rpx;
border-top-right-radius: 8rpx;
}
.rounded-top-lg {
border-top-left-radius: 14rpx;
border-top-right-radius: 14rpx;
}
.rounded-right {
border-top-right-radius: 8rpx;
border-bottom-right-radius: 8rpx;
}
.rounded-bottom {
border-bottom-right-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.rounded-bottom-lg {
border-bottom-right-radius: 14rpx;
border-bottom-left-radius: 14rpx;
}
.rounded-left {
border-top-left-radius: 8rpx;
border-bottom-left-radius: 8rpx;
}
.rounded-circle {
border-radius: 100rpx;
}
.rounded-0 {
border-radius: 0;
}
/* 显示 */
/* #ifndef APP-PLUS-NVUE */
.d-none {
display: none;
}
.d-inline-block {
display: inline-block;
}
.d-block {
display: block;
}
/* #endif */
/* 内容溢出 */
.overflow-hidden {
overflow: hidden;
}
/* 定位 */
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
}
.position-fixed {
position: fixed;
}
/* 定位 - 固定顶部 */
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
/* 定位 - 固定底部 */
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
.top-0 {
top: 0;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
.bottom-0 {
bottom: 0;
}
/* 阴影 */
/* #ifndef APP-PLUS-NVUE */
.shadow {
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);
}
.shadow-lg {
box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.175);
}
.shadow-none {
box-shadow: none !important;
}
/* #endif */
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 100;
}
```
## 1.3.3 在App.vue组件引入公共样式
1. 在目录下创建common文件夹,将common.css文件与free.css文件复制到common文件夹内
2. 引入公共样式文件
```
<style>
/* 公共样式 */
@import url("./common/free.css");
</style>
```
3. 引入主题样式文件
```
<style>
/* 公共样式 */
@import url("./common/free.css");
/* 主题样式 */
@import url("./common/common.css");
</style>
```
4. 测试样式是否引入成功
- 代码
```
<template>
<view>
<view class="flex">
<view class="bg-danger flex-1 text-center">1</view>
<view class="bg-main flex-1 text-center">2</view>
</view>
</view>
</template>
```
- 效果
- 第一章 项目介绍和准备
- 1.1 课程介绍
- 1.2 环境搭建和项目创建
- 1.3 引入全局样式
- 1.4 引入图标库
- 1.5 底部导航和凸起按钮配置
- 第二章 首页开发
- 2.1 首页开发(一)
- 2.2 首页开发(二)
- 第三章 直播间(用户端)开发
- 3.1 基础布局开发(一)
- 3.2 基础布局开发(二)
- 3.3 个人信息和观看情况
- 3.4 接收礼物组件(一) - 布局
- 3.5 接收礼物组件(二) - 自动滚动
- 3.6 接收礼物组件(三) - 自动消失
- 3.7 底部操作条
- 3.8 弹幕组件开发(一) - 输入框弹出层
- 3.9 弹幕组件开发(二) - 置于底部功能
- 3.10 弹幕组件开发(三) - 发送弹幕
- 3.11 送礼物弹框组件(一) - 布局
- 3.12 送礼物弹框组件(二) - 功能
- 第四章 充值金币页开发
- 4.1 充值金币页开发(一)
- 4.2 充值金币页开发(二)
- 第五章 直播间(主播端)开发
- 5.1 创建直播页 - 推流组件
- 5.2 创建直播页 - 布局(一)
- 5.3 创建直播页 - 布局(二)
- 5.4 创建直播页 - 镜头反转
- 5.5 创建直播页 - 切换画质
- 5.6 创建直播页 - 美颜和美白
- 5.7 关于退出创建直播页黑边问题
- 5.8 主播直播间(一)
- 5.9 主播直播间(二)
- 第六章 个人中心页面开发
- 6.1 个人中心页
- 第七章 egg.js基础
- 第八章 后台管理系统开发
- 8.1 创建项目和基础配置
- 第九章 交互和部署上线
- 9.1 登录注册交互实现
- 9.2 个人中心交互实现
- 9.3 退出登录以及初始化用户信息
- 9.5 权限验证
- 9.6 首页交互 - 上拉加载与下拉刷新
- 9.7 创建订单和微信支付(一)
- 9.8 创建订单和微信支付(二)
- 9.9 微信支付调试和充值页交互
- 9.10 直播间交互
- 9.11 socket.io安装与通讯(一)
- 9.12 socket.io安装和通讯(二)
- 9.13 加入直播间(一)
- 9.14 加入直播间(二)
- 9.15 加入直播间(三)
- 9.16 离开直播间
- 9.17 直播间实时在线用户列表
- 9.18 直播间实时弹幕功能
- 9.19 直播间送礼物功能
- 9.20 创建直播功能交互(一)
- 9.21 创建直播功能交互(二)
- 9.22 优化前端部分问题(一)
- 9.23 优化前端部分问题(二)
- 第七章 登录注册页面开发