[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 優化前端部分問題(二)
- 第七章 登錄注冊頁面開發