初始化

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.en.md

@@ -0,0 +1,36 @@
+# 大屏模板
+
+#### Description
+大屏适配模板设置
+
+#### Software Architecture
+Software architecture description
+
+#### Installation
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Instructions
+
+1.  xxxx
+2.  xxxx
+3.  xxxx
+
+#### Contribution
+
+1.  Fork the repository
+2.  Create Feat_xxx branch
+3.  Commit your code
+4.  Create Pull Request
+
+
+#### Gitee Feature
+
+1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
+2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
+3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
+4.  The most valuable open source project [GVP](https://gitee.com/gvp)
+5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
+6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

README.md

@@ -0,0 +1,176 @@
+![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240606144729.png)![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240606144550.png)![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240606143219.png)
+## 一、项目描述
+ **
+
+### 仅限参考，如果对你有用。请点个star
+** 
+- 一个基于 Vue、Datav、Echart 框架的 " **数据大屏项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
+- 项目需要全屏展示（按 F11）。
+- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
+- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
+- 项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16。
+- 请拉取 master 分支的代码，其余分支是开发分支。
+
+友情链接：
+
+1.   [DataV 官方文档](http://datav.jiaminghi.com/guide/)
+
+
+## 二、主要文件介绍
+
+| 文件                | 作用/功能                                                              |
+| ------------------- | --------------------------------------------------------------------- |
+| main.js             | 主目录文件，引入 Echart/DataV 等文件                                    |
+| utils               | 工具函数与 mixins 函数等                                                |
+| views/ index.vue    | 项目主结构                                                             |
+| views/其余文件       | 界面各个区域组件（按照位置来命名）                                       |
+| assets              | 静态资源目录，放置 logo 与背景图片                                       |
+| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节                                      |
+| assets / index.scss | Index 界面的 CSS 文件                                                  |
+| components/echart   | 所有 echart 图表（按照位置来命名）                                      |
+| common/...          | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改）     |
+
+## 三、使用介绍
+
+### 启动项目
+
+需要提前安装好 `nodejs` 与 `yarn`,下载项目后在项目主目录下运行 `yarn` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。
+
+### 封装组件渲染图表
+
+所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。
+
+项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。
+
+封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加/删除。
+
+参数名称              | 类型      | 作用/功能                      |
+| -------------------| --------- | ------------------------------|
+| id                 | String    | 唯一 id，渲染图表的节点（非必填，使用了 $el）|
+| className          | String    | class样式名称（非必填）                 |
+| options            | Object    | ECharts 配置（必填）                   |
+| height             | String    | 图表高度（建议填）                    |
+| width              | String    | 图表宽度（建议填）                    |
+
+### 动态渲染图表
+
+动态渲染图表案例为 `components` 目录下各个图表组件，index 文件负责数据获取和处理，chart 文件负责监听和数据渲染。
+
+chart 文件的主要逻辑为：
+
+```html
+<template>
+  <div>
+    <Echart :options="options" id="id" height="height" width="width" ></Echart>
+  </div>
+</template>
+
+<script>
+  // 引入封装组件
+import Echart from '@/common/echart'
+export default {
+  // 定义配置数据
+  data(){ return { options: {}}},
+  // 声明组件
+  components: { Echart},
+  // 接收数据
+  props: {
+    cdata: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  // 进行监听，也可以使用 computed 计算属性实现此功能
+  watch: {
+    cdata: {
+      handler (newData) {
+        this.options ={
+          // 这里编写 ECharts 配置
+        }
+      },
+      // 立即监听
+      immediate: true,
+      // 深度监听
+      deep: true
+    }
+  }
+};
+</script>
+```
+
+### 复用图表组件
+
+复用图表组件案例为中间部分的 `任务通过率与任务达标率` 模块，两个图表类似，区别在于颜色和主要渲染数据。只需要传入对应的唯一 id 和样式，然后在复用的组件 `components/echart/center/centerChartRate` 里进行接收并在对应位置赋值即可。
+
+如：在调用处 `views/center.vue` 里去定义好数据并传入组件
+
+```js
+//组件调用
+<span>今日任务通过率</span>
+<centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
+
+<span>今日任务达标率</span>
+<centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+
+...
+import centerChart from "@/components/echart/center/centerChartRate";
+
+data() {
+  return {
+    rate: [
+      {
+        id: "centerRate1",
+        tips: 60,
+        ...
+      },
+      {
+        id: "centerRate2",
+        tips: 40,
+        colorData: {
+          ...
+        }
+      }
+    ]
+  }
+}
+```
+
+### 更换边框
+
+边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看
+如：
+
+```html
+<dv-border-box-1></dv-border-box-1>
+<dv-border-box-2></dv-border-box-2>
+<dv-border-box-3></dv-border-box-3>
+```
+
+### 更换图表
+
+直接进入 `components/echart` 下的文件修改成你要的 echarts 模样，可以去[echarts 官方社区](https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all)里面查看案例。
+
+### Mixins 解决自适应适配功能
+
+使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 `utils/resizeMixins.js` 中，应用在 `common/echart/index.vue` 的封装渲染组件，主要是对 `this.chart` 进行了功能注入。
+
+### 屏幕适配
+
+1.5 版本项目放弃了 flexible 插件方案，将 rem 改回px，使用更流程通用的 `css3：scale` 缩放方案，通过 `ref` 指向 `views/index`，屏幕改变时缩放内容。项目的基准尺寸是 `1920px*1080px`，所以支持同比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。实现代码在 `src/utils/userDraw` ，如果有其它的适配方案，欢迎交流。
+
+### 请求数据
+
+现在的项目未使用前后端数据请求，建议使用 axios 进行数据请求，在 main.js 位置进行全局配置。
+
+- axios 的 main.js 配置参考范例（因人而异）
+
+```js
+import axios from 'axios';
+
+//把方法放到vue的原型上，这样就可以全局使用了
+Vue.prototype.$http = axios.create({
+  //设置20秒超时时间
+  timeout: 20000,
+  baseURL: 'http://172.0.0.1:80080', //这里写后端地址
+});
+```![输入图片说明](%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240606143148.png)

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,63 @@
+{
+	"name": "big-screen-vue-datav",
+	"version": "1.5.1",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"@jiaminghi/data-view": "^2.7.3",
+		"@types/echarts": "^4.4.3",
+		"axios": "^1.3.4",
+		"core-js": "^3.6.4",
+		"echarts": "^5.6.0",
+		"echarts-gl": "^1.1.0",
+		"element-ui": "^2.15.13",
+		"qrcode": "^1.5.4",
+		"video.js": "^8.0.4",
+		"vue": "^2.6.11",
+		"vue-awesome": "^4.0.2",
+		"vue-count-to": "^1.0.13",
+		"vue-router": "^3.1.5",
+		"vue-video-player": "^4.0.6",
+		"vuex": "^3.1.2"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "^4.2.0",
+		"@vue/cli-plugin-eslint": "^4.2.0",
+		"@vue/cli-service": "^4.2.0",
+		"babel-eslint": "^10.0.3",
+		"eslint": "^6.7.2",
+		"eslint-plugin-vue": "^6.1.2",
+		"sass": "^1.25.0",
+		"sass-loader": "^8.0.2",
+		"vue-template-compiler": "^2.6.11"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {
+			"generator-star-spacing": "off",
+			"no-tabs": "off",
+			"no-unused-vars": "off",
+			"no-console": "off",
+			"no-irregular-whitespace": "off",
+			"no-debugger": "off"
+		}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions"
+	]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="app">
+    <!-- <app-home></app-home> -->
+    <router-view />
+  </div>
+</template>
+
+<script>
+// import Home from '@/views/home/index.vue'
+export default {
+  name: 'App',
+  // components: {
+  //   'app-home': Home
+  // }
+}
+</script>
+
+<style lang="scss" scoped>
+@import url(./assets/iconfont/iconfont.css);
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  background-color: #010721;
+  overflow: hidden;
+}
+</style>

src/assets/iconfont/iconfont.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3925566 */
+  src: url('iconfont.woff2?t=1678362701306') format('woff2'),
+       url('iconfont.woff?t=1678362701306') format('woff'),
+       url('iconfont.ttf?t=1678362701306') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-sousuo:before {
+  content: "\e86e";
+}
+
+.icon-document:before {
+  content: "\e67d";
+}
+
+.icon-xiangxia3:before {
+  content: "\e773";
+}
+
+.icon-shangla:before {
+  content: "\e65d";
+}
+
+.icon-xiala1:before {
+  content: "\e776";
+}
+
+.icon-xiangyou1:before {
+  content: "\e775";
+}
+
+.icon-zuojiantou:before {
+  content: "\e625";
+}
+
+.icon-zuo:before {
+  content: "\e63c";
+}
+
+.icon-jiantou_xiangyou:before {
+  content: "\eb08";
+}
+
+.icon-shang:before {
+  content: "\e62e";
+}
+

src/assets/scss/_variables.scss

@@ -0,0 +1,98 @@
+// 颜色
+$colors: (
+  "primary": #1A5CD7,
+  "info-1": #4394e4,
+  "info": #4b67af,
+  "white": #ffffff,
+  "light": #f9f9f9,
+  "grey-1": #999999,
+  "grey": #666666,
+  "dark-1": #5f5f5f,
+  "dark": #222222,
+  "black-1": #171823,
+  "black": #000000,
+  "icon": #5cd9e8
+);
+
+// 字体大小
+$base-font-size: 0.2rem;
+$font-sizes: (
+  xxs: 0.1,
+  //8px
+    xs: 0.125,
+  //10px
+    sm: 0.2875,
+  //12px
+    md: 0.1625,
+  //13px
+    lg: 0.175,
+  //14px
+    xl: 0.2,
+  //16px
+    xxl: 0.225,
+  //18px
+    xxxl: 0.25 //20px,,,,
+);
+
+// 宽高
+.w-100 {
+  width: 100%;
+}
+.h-100 {
+  height: 100%;
+}
+
+//flex
+.d-flex {
+  display: flex;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+$flex-jc: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+);
+
+$flex-ai: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  stretch: stretch,
+);
+
+.flex-1 {
+  flex: 1;
+}
+
+//.mt-1 => margin top
+//spacing
+$spacing-types: (
+  m: margin,
+  p: padding,
+);
+$spacing-directions: (
+  t: top,
+  r: right,
+  b: bottom,
+  l: left,
+);
+$spacing-base-size: 0.5rem;
+$spacing-sizes: (
+  0: 0,
+  1: 0.5,
+  2: 1,
+  3: 1.5,
+  4: 2,
+  5: 2.5,
+);

src/assets/scss/index.scss

@@ -0,0 +1,170 @@
+#index {
+  // color: #d3d6dd;
+  color: #fff;
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: left top;
+  overflow: hidden;
+
+  // .bg {
+  //   width: 100%;
+  //   height: 100%;
+  //   padding: 16px 16px 0 16px;
+  //   background-image: url("../assets/pageBg.png");
+  //   background-size: cover;
+  //   background-position: center center;
+  // }
+
+  .host-body {
+    padding: 0 50px 30px 48px;
+
+    .dv-dec-10,
+    .dv-dec-10-s {
+      width: 33.3%;
+      height: 5px;
+    }
+
+    .dv-dec-10-s {
+      transform: rotateY(180deg);
+    }
+
+    .dv-dec-8 {
+      width: 200px;
+      height: 50px;
+    }
+
+    .title {
+      position: relative;
+      width: 500px;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 24px;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%);
+      }
+
+      .dv-dec-6 {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        width: 250px;
+        height: 8px;
+        transform: translate(-50%);
+      }
+    }
+
+    // 第二行
+    .aside-width {
+      // width: 40%;
+    }
+
+    .react-r-s,
+    .react-l-s {
+      background-color: #0f1325;
+    }
+
+    // 平行四边形
+    .react-right {
+      padding: 14px 18px 6px;
+
+      &.react-l-s {
+        text-align: right;
+        // width: 500px;
+      }
+
+      font-size: 16px;
+      // width: 300px;
+      // height: 50px;
+      line-height: 16px;
+      text-align: center;
+      // transform: skewX(-45deg);
+      // background-color: #0f1325;
+      cursor: pointer;
+
+      // .react-after {
+      //   position: absolute;
+      //   right: -25px;
+      //   top: 0;
+      //   height: 50px;
+      //   width: 50px;
+      //   background-color: #0f1325;
+      //   transform: skewX(45deg);
+      // }
+
+      .text {
+        display: inline-block;
+        // transform: skewX(45deg);
+        // padding: 0 8px;
+      }
+    }
+
+    .react-left {
+      &.react-l-s {
+        // width: 500px;
+        text-align: left;
+      }
+
+      font-size: 16px;
+      line-height: 16px;
+      // width: 300px;
+      text-align: center;
+      // transform: skewX(45deg);
+      // background-color: #0f1325;
+      cursor: pointer;
+
+      // .react-left {
+      //   position: absolute;
+      //   left: -25px;
+      //   top: 0;
+      //   height: 50px;
+      //   width: 50px;
+      //   background-color: #0f1325;
+      //   transform: skewX(-45deg);
+      // }
+
+      .text {
+        display: inline-block;
+        // padding: 0 8px;
+        // transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 16px;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+      }
+
+      // 底部数据
+      .bottom-box {
+        margin-top: 10px;
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+      }
+
+
+    }
+
+    .item-chart-top {
+      margin-top: 16px;
+    }
+
+    .pos-relative {
+      position: relative;
+    }
+  }
+}

src/assets/scss/matchActivity.scss

@@ -0,0 +1,217 @@
+.body-box {
+  height: 940px;
+  .left-content, .rigth-content {
+    width: 400px;
+    height: 100%;
+  }
+  // 左边样式
+  .left-content {
+    .rank-wrapper {
+      .rank-radio {
+        margin-top: 15px;
+      }
+      .rank-list {
+        margin-top: 15px;
+      }
+    }
+    .data-wrapper {
+      margin-top: 20px;
+      height: 100%;
+      .slider-process-wrapper {
+        height: 40px;
+        display: flex;
+        padding: 30px 0 10px;
+        margin: 10px 0;
+        position: relative;
+        align-items: center;
+        i {
+          display: inline-block;
+          width: 30px;
+          height: 30px;
+        }
+        .lade-icon {
+          background: url('~@/assets/matchActivity/lade.png') no-repeat;
+        }
+        .fale-icon {
+          background: url('~@/assets/matchActivity/fale.png') no-repeat;
+        }
+        .slider-process-content {
+          height: 16px;
+          padding: 2px;
+          flex: 1;
+          display: flex;
+          align-items: center;
+          background: rgba(255,255,255,0.19);
+          border-radius: 10px;
+          .num {
+            position: absolute;
+            top: 0;
+          }
+          .slider-process-left {
+            height: 12px;
+            width: 66.7%;
+            background: #00ffff;
+            border-radius: 10px;
+            text-align: center;
+          }
+          .slider-process-right {
+            height: 12px;
+            width: 33.3%;
+            background: #d241ef;
+            border-radius: 10px;
+            text-align: center;
+          }
+        }
+      }
+      .distribute-center-text {
+        width: 190px;
+        text-align: center;
+        font-size: 12px;
+      }
+      .data-distribute {
+        .line-0 {
+          top: 30px;
+        }
+        .line-1 {
+          top: 100px;
+        }
+        .line-2 {
+          top: 152px;
+        }
+        .line-3 {
+          bottom: 58px;
+        }
+        .line-4 {
+          bottom: 14px;
+        }
+        .distribute-left-content {
+          position: relative;
+          .distribute-img {
+            display: inline-block;
+            height: 100%;
+            width: 263px;
+            background: url('~@/assets/matchActivity/distribute.png') 100% 100% no-repeat;
+          }
+          .distribute-process-item {
+            position: absolute;
+            left: 0;
+          }
+        }
+        .distribute-right-content {
+          font-size: 12px;
+          width: 150px;
+          position: relative;
+          .distribute-data-item {
+            position: absolute;
+          }
+        }
+      }
+    }
+  }
+  // 中间样式
+  .middle {
+    flex: 1;
+    padding: 0 20px;
+    .middle-top {
+      height: 70px;
+      .match-num-item {
+        flex: 1;
+        height: 100%;
+        .match-icon {
+          width: 66px;
+          margin-right: 10px;
+        }
+        .text {
+          height: 70px;
+          min-width: 100px;
+          font-size: 22px;
+          font-family: PingFang SC, PingFang SC-Bold;
+          margin-right: 10px;
+          text-align: center;
+          line-height: normal;
+        }
+        .number-content {
+          width: 100%;
+          height: 100%;
+          flex: 1;
+          .num {
+            display: inline-block;
+            font-size: 40px;
+            font-family: DIN, DIN-Bold;
+          }
+          .unit {
+            margin-left: 5px;
+            font-size: 20px;
+            font-family: PingFang SC, PingFang SC-Bold;
+          }
+        }
+      }
+      .total-num-icon {
+        background: url('~@/assets/matchActivity/matchTotal.png') 100% 100% no-repeat;
+      }
+      .server-num-icon {
+        background: url('~@/assets/matchActivity/matchServer.png') 100% 100% no-repeat;
+      }
+    }
+    .middle-bottom {
+      padding: 0 100px;
+      .sign-title {
+        text-align: center;
+        margin: 10px 0;
+        height: 40px;
+        line-height: 40px;
+        .sign-title-text {
+          display: inline-block;
+          width: 200px;
+          text-shadow: 0px 0px 6px 0px rgba(172,241,255,0.70); 
+          background: linear-gradient(90deg,rgba(8,94,236,0.00) 0%, rgba(8,94,236,0.00) 0%, rgba(8,94,236,0.49) 100%, rgba(8,94,236,0.25) 100%, rgba(8,94,236,0.00) 100%);
+        }
+      }
+      .sign-in-wrapper {
+        background: url('~@/assets/matchActivity/signInBg.png') 100% 100% no-repeat;
+        background-position: bottom left;
+        .sign-in-content {
+          height: 100%;
+          flex: 1;
+          width: 100%;
+          .img-label {
+            flex: 1;
+            margin: 100px 0 0 10px;
+            .label-item {
+              height: 80px;
+              .color-block {
+                display: inline-block;
+                height: 20px;
+                width: 20px;
+              }
+              .label-text {
+                font-size: 18px;
+                margin: 0 10px;
+                flex: 1;
+              }
+              .label-unit {
+                font-size: 28px;
+                width: 60px;
+              }
+            }
+          }
+        }
+      }
+      .active-rank-list {
+        margin-top: 10px;
+      }
+    }
+  }
+  // 右边样式
+  .rigth-content {
+    .rank-radio {
+      margin: 10px 0;
+    }
+    .city-active-wrapper {
+      margin-top: 20px;
+      .rank-list {
+        margin-top: 10px;
+      }
+    }
+  }
+}

src/assets/scss/socialInstructor.scss

@@ -0,0 +1,389 @@
+.body-box {
+  .left-wrapper, .right-wrapper {
+    width: 460px;
+  }
+  .left-wrapper {
+    .instructor-type-wrapper {
+      .instructor-type-top-wrapper {
+        margin-bottom: 10px;
+      }
+      .instructor-type-content {
+        height: 250px;
+      }
+    }
+    .instructor-rank-wrapper {
+      margin-top: 10px;
+      .instructor-rank-radio-wrapper {
+        margin: 10px 0;
+      }
+    }
+    .lesson-time-wrapper {
+      margin-top: 10px;
+      .lesson-time-radio-wrapper {
+        margin: 10px 0;
+      }
+    }
+  }
+  .middle {
+    flex: 1;
+    padding: 0 20px;
+    .structor-date-wrapper {
+      height: 145px;
+      padding: 0 26px;
+      .date-item-content {
+        flex: 1;
+        background: url('~@/assets/boxBorder.png') 100% 100% no-repeat;
+        padding: 20px;
+        &:nth-child(2) {
+          margin: 0 10px;
+        }
+        .date-top-con {
+          .icon-content {
+            display: flex;
+            width: 39px;
+            height: 39px;
+            line-height: 39px;
+            border-radius: 50%;
+            justify-content: center;
+            align-items: center;
+            border: 1px solid rgba(255,255,255,0.24);
+            i {
+              width: 24px;
+              height: 24px;
+              background-size: 100% 100%;
+              &.document {
+                background-image: url('~@/assets/sportFacilities/order_icon.png') ;
+              }
+              &.lesson {
+                background-image: url('~@/assets/sportFacilities/serve_icon.png');
+              }
+              &.guide {
+                background-image: url('~@/assets/sportFacilities/guide.png');
+              }
+            }
+          }
+          .date--top-text {
+            flex: 1;
+            margin-left: 20px;
+            .num {
+              color: #d4d739;
+              font-size: 20px;
+              .unit {
+                margin-left: 5px;
+                color: rgba(255,255,255,0.70);
+                font-size: 12px;
+              }
+            }
+            .title {
+              font-size: 14px;
+            }
+          }
+        }
+        .date-bottom-con {
+          .bottom-item {
+            flex: 1;
+            text-align: center;
+            line-height: 15px;
+            .tip {
+              color: rgba(255,255,255,0.50);
+              font-size: 14px;
+              margin-top: 5px;
+            }
+          }
+        }
+      }
+    }
+    .structor-process-wrapper {
+      .wrapper-desc {
+        margin: 10px 0;
+        text-align: center;
+        line-height: 34px;
+        background-image: url('~@/assets/contentTop/contentTopNoAngle.png');
+        background-size: 100% 100%;
+      }
+      .user-process-content {
+        flex: 1;
+        padding: 0 10px;
+        .user-process-left {
+          width: 285px;
+        }
+        .user-process-center {
+          position: relative;
+          flex: 1;
+          display: flex;
+          align-items: center;
+          .siteNum {
+            position: absolute;
+            text-align: center;
+            width: 100%;
+            top: 100px;
+            word-spacing: -25px;
+            .num {
+              font-size: 96px;
+              line-height: 110px;
+            }
+            .unit {
+              font-size: 40px;
+            }
+            .desc {
+              font-size: 24px;
+            }
+          }
+        }
+        .age-process-cont {
+          height: 240px;
+        }
+        .sex-process-cont {
+          flex: 1;
+          margin-top: 20px;
+          > div {
+            flex: 1;
+            padding: 10px 0;
+          }
+          .sex-box {
+            border: 2px solid;
+            border-radius: 40px;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            padding: 5px;
+            .icon {
+              display: inline-block;
+              width: 63px;
+              height: 63px;
+              border: 2px solid;
+              border-radius: 50%;
+              background-position: center center;
+              background-repeat: no-repeat;
+            }
+            .process-date {
+              margin-left: 15px;
+              display: flex;
+              align-items: center;
+              .sex-text {
+                font-size: 22px;
+                margin-right: 10px;
+                color: #FFFFFF;
+              }
+              .num {
+                font-size: 32px;
+              }
+            }
+          }
+          .fale-box {
+            border-color: rgba(0,255,255,0.40);
+            background: rgba(0,255,255,0.20);
+            .icon {
+              background-color: linear-gradient(180deg,#034364, #02527b 100%);
+              border-color: rgba(0,255,255,0.40);
+              background-image: url('~@/assets/socialInstructor/peopleMale.png');
+            }
+            .num {
+              color: #00ffff;
+            }
+          }
+          .woman-box {
+            background: rgba(255,59,164,0.20);
+            border-color: rgba(255,59,164,0.40);
+            .icon {
+              border-color: rgba(255,59,164,0.40);
+              background-image: url('~@/assets/socialInstructor/peopleWoman.png');
+              background-color: linear-gradient(180deg,#69043a, #980855 100%);
+            }
+            .num {
+              color: #ff3ba4;
+            }
+          }
+        }
+      }
+    }
+    .train-wrapper {
+      flex: 1;
+      margin-top: 10px;
+      .train-top-wrapper {
+        margin-bottom: 10px;
+      }
+      .train-content {
+        flex: 1;
+        padding: 20px 20px 12px;
+        background: linear-gradient(178deg,rgba(8,94,236,0.72) 0%, rgba(8,94,236,0.72) 0%, rgba(8,94,236,0.00) 100%);
+        border: 1px solid rgba(255,255,255,0.40);
+        .train-box {
+          height: 100%;
+          .train-left {
+            width: 200px;
+            height: 100%;
+            margin-right: 10px;
+            .train-item {
+              flex: 1;
+              align-items: center;
+              padding: 10px;
+              background: rgba(255,255,255,0.10);
+              border: 1px solid rgba(255,255,255,0.23);
+              &:first-child {
+                margin-bottom: 20px;
+              }
+              .icon-box {
+                width: 45px;
+                height: 45px;
+                border: 1px solid rgba(255,255,255,0.30);
+                border-radius: 2px;
+                margin-right: 10px;
+                &.icon-online {
+                  background: url('~@/assets/socialInstructor/online.png') center center no-repeat;
+                }
+                &.icon-offline {
+                  background: url('~@/assets/socialInstructor/offline.png') center center no-repeat;
+                }
+              }
+              .train-text {
+                .text {
+                  font-size: 16px;
+                }
+                .num {
+                  font-size: 24px;
+                  color: #00ffff;
+                  margin: 5px 0;
+                }
+                .status {
+                  font-size: 12px;
+                  .icon-shang {
+                    font-size: 12px;
+                    color: rgb(241, 174, 41);
+                  }
+                  .icon-xiangxia3 {
+                    font-size: 12px;
+                    color: rgb(241, 174, 41);
+                  }
+                }
+              }
+            }
+          }
+          .train-right {
+            flex: 1;
+          }
+        }
+      }
+    }
+  }
+  .right-wrapper {
+    .rank-wrapper {
+      .rank-content {
+        margin-top: 10px;
+      }
+    }
+    .perform-wrapper {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      .perform-top-wrapper {
+        display: flex;
+        width: 100%;
+        height: 100px;
+        img {
+          width: 75px;
+          height: 75px;
+          margin-right: 20px;
+        }
+        .perform-text-content {
+          flex: 1;
+          width: 50%;
+          padding: 0 1%;
+          display: flex;
+          flex-direction: column;
+          .perform-title {
+            margin: 0 0 15px 0;
+            padding: 0 0 5px 0;
+            line-height: 36px;
+            font-size: 20px;
+            color: #fff;
+            border-bottom: 1px solid;
+            border-image: linear-gradient(90deg, rgba(68, 137, 253, 0.80), rgba(68, 137, 253, 0.00) 100%) 2 2;
+            position: relative;
+            &::after {
+							content: '';
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 65px;
+							height: 4px;
+							background-color: #4489FD;
+						}
+          }
+          .perform-num {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            font-size: 32px;
+            .perform-unit {
+              font-size: 20px;
+              margin-left: 5px;
+            }
+          }
+        }
+      }
+      .perform-content {
+        margin-top: 10px;
+        .list {
+					width: 100%;
+					.listTitle {
+						width: 100%;
+						height: 50px;
+						padding-right: 10px;
+						display: flex;
+						align-items: center;
+						background: rgba(19, 35, 83, 0.87);
+						border: 1px solid;
+						border-image: linear-gradient(105deg, rgba(0, 99, 255, 0.00) 0%, #9ab6e3 100%, rgba(4, 75, 189, 0.00) 100%) 1 1;
+
+						.titleItem:first-child {
+							width: 150px;
+						}
+
+						.titleItem:last-child {
+							flex: 1;
+							padding-right: 20px;
+						}
+					}
+					.titleItem {
+						text-align: center;
+						line-height: 40px;
+					}
+					.listTable {
+						padding-right: 20px;
+						margin-top: 10px;
+						height: 150px;
+						display: flex;
+						flex-direction: column;
+						overflow-y: scroll;
+						>div {
+							display: flex;
+							align-items: center;
+							.titleItem:first-child {
+								width: 150px;
+							}
+							.titleItem:last-child {
+								flex: 1;
+								display: flex;
+								align-items: center;
+								span{
+									width:80px;
+								}
+							}
+						}
+					}
+					.listTable::-webkit-scrollbar {
+						width: 3px;
+					}
+					.listTable::-webkit-scrollbar-thumb {
+						background-color: #85ACE9;
+					}
+					.listTable::-webkit-scrollbar-track {
+						background-color: #020927;
+					}
+				}
+      }
+    }
+  }
+}

src/assets/scss/sportCode.scss

@@ -0,0 +1,164 @@
+.body-box {
+  height: 940px;
+  .left-wrapper, .right-wrapper {
+    width: 450px;
+  }
+  .left-wrapper {
+    .use-rank-content {
+      margin-bottom: 10px;
+    }
+    .use-status-wrapper {
+      margin-top: 10px;
+      flex: 1;
+      .use-status-con {
+        position: relative;
+        flex: 1;
+        margin-top: 20px;
+        .slider-process-wrapper {
+          height: 40px;
+          display: flex;
+          margin: 15px 0;
+          align-items: center;
+          i {
+            display: inline-block;
+            width: 30px;
+            height: 30px;
+          }
+          .lade-icon {
+            background: url('~@/assets/matchActivity/lade.png') no-repeat;
+          }
+          .fale-icon {
+            background: url('~@/assets/matchActivity/fale.png') no-repeat;
+          }
+          .slider-process-content {
+            height: 16px;
+            padding: 2px;
+            flex: 1;
+            display: flex;
+            align-items: center;
+            background: rgba(255,255,255,0.19);
+            border-radius: 10px;
+            .num {
+              position: absolute;
+              top: 0;
+            }
+            .slider-process-left {
+              height: 12px;
+              width: 66.7%;
+              background: #00ffff;
+              border-radius: 10px;
+              text-align: center;
+            }
+            .slider-process-right {
+              height: 12px;
+              width: 33.3%;
+              background: #d241ef;
+              border-radius: 10px;
+              text-align: center;
+            }
+          }
+        }
+        .distribute-center-text {
+          width: 190px;
+          text-align: center;
+          font-size: 12px;
+        }
+        .data-distribute {
+          .line-0 {
+            top: 30px;
+          }
+          .line-1 {
+            top: 100px;
+          }
+          .line-2 {
+            top: 152px;
+          }
+          .line-3 {
+            bottom: 58px;
+          }
+          .line-4 {
+            bottom: 14px;
+          }
+          .distribute-left-content {
+            position: relative;
+            .distribute-img {
+              display: inline-block;
+              height: 100%;
+              width: 263px;
+              background: url('~@/assets/matchActivity/distribute.png') 100% 100% no-repeat;
+            }
+            .distribute-process-item {
+              position: absolute;
+              left: 0;
+            }
+          }
+          .distribute-right-content {
+            font-size: 12px;
+            width: 150px;
+            position: relative;
+            .distribute-data-item {
+              position: absolute;
+            }
+          }
+        }
+      }
+    }
+  }
+  .middle {
+    flex: 1;
+    padding: 0 100px;
+    .middle-con {
+      position: relative;
+      .sport-title-con {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 20px;
+        .sport-title {
+          font-size: 20px;
+          color: rgba(255,255,255,0.80);
+          &::before {
+            content: '';
+            margin-right: 5px;
+            display: inline-block;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-left: 10px solid #709efb;
+          }
+          &::after {
+            content: '';
+            margin-left: 5px;
+            display: inline-block;
+            border-top: 5px solid transparent;
+            border-bottom: 5px solid transparent;
+            border-right: 10px solid #709efb;
+          }
+        }
+      }
+      .sport-bg {
+        height: calc(100% - 250px);
+        width: 100%;
+        position: absolute;
+        background: url('~@/assets/sport.png') 100% 100% no-repeat;
+        background-position: center center;
+        background-attachment: fixed;
+      }
+    }
+    .sport-code-total-con {
+      height: 1000px;
+    }
+    .one-use-rank-wrapper {
+      margin-top: 10px;
+    }
+  }
+  .right-wrapper {
+    .city-rank-list-content {
+      margin-top: 10px;
+    }
+    .area-use-rank-wrapper {
+      margin-top: 10px;
+      .area-use-rank-con {
+        margin-top: 10px;
+      }
+    }
+  }
+}

src/assets/scss/style.scss

@@ -0,0 +1,185 @@
+@import "./variables";
+
+//  全局样式
+* {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: PingFang SC, PingFang SC-Bold;
+  line-height: 1.2em;
+  background-color: #f1f1f1;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: #343440;
+  text-decoration: none;
+}
+
+.clearfix {
+  &::after {
+    content: "";
+    display: table;
+    height: 0;
+    line-height: 0;
+    visibility: hidden;
+    clear: both;
+  }
+}
+
+//浮动
+.float-r {
+  float: right;
+}
+
+//浮动
+.float-l {
+  float: left;
+}
+
+// 字体加粗
+.fw-b {
+  font-weight: bold;
+}
+
+//文章一行显示，多余省略号显示
+.title-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bg-color-black {
+  background-color: rgba(19, 25, 47, 0.6);
+}
+
+.bg-color-blue {
+  background-color: #1a5cd7;
+}
+
+.colorBlack {
+  color: #272727 !important;
+
+  &:hover {
+    color: #272727 !important;
+  }
+}
+
+.colorGrass {
+  color: #33cea0;
+
+  &:hover {
+    color: #33cea0 !important;
+  }
+}
+
+.colorRed {
+  color: #ff5722;
+
+  &:hover {
+    color: #ff5722 !important;
+  }
+}
+
+.colorText {
+  color: #d3d6dd !important;
+
+  &:hover {
+    color: #d3d6dd !important;
+  }
+}
+
+.colorBlue {
+  color: #257dff !important;
+
+  &:hover {
+    color: #257dff !important;
+  }
+}
+
+//颜色
+@each $colorkey, $color in $colors {
+  .text-#{$colorkey} {
+    color: $color;
+  }
+
+  .bg-#{$colorkey} {
+    background-color: $color;
+  }
+}
+
+//对齐
+@each $var in (left, center, right) {
+  .text-#{$var} {
+    text-align: $var !important;
+  }
+}
+
+//flex
+@each $key, $value in $flex-jc {
+  .jc-#{$key} {
+    justify-content: $value;
+  }
+}
+
+@each $key, $value in $flex-ai {
+  .ai-#{$key} {
+    align-items: $value;
+  }
+}
+
+//字体
+@each $fontkey, $fontvalue in $font-sizes {
+  .fs-#{$fontkey} {
+    font-size: $fontvalue * $base-font-size;
+  }
+}
+
+//.mt-1 => margin top
+//spacing
+
+@each $typekey, $type in $spacing-types {
+  //.m-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}-#{$sizekey} {
+      #{$type}: $size * $spacing-base-size;
+    }
+  }
+
+  //.mx-1
+  @each $sizekey, $size in $spacing-sizes {
+    .#{$typekey}x-#{$sizekey} {
+      #{$type}-left: $size * $spacing-base-size;
+      #{$type}-right: $size * $spacing-base-size;
+    }
+
+    .#{$typekey}y-#{$sizekey} {
+      #{$type}-top: $size * $spacing-base-size;
+      #{$type}-bottom: $size * $spacing-base-size;
+    }
+  }
+
+  //.mt-1
+  @each $directionkey, $direction in $spacing-directions {
+    @each $sizekey, $size in $spacing-sizes {
+      .#{$typekey}#{$directionkey}-#{$sizekey} {
+        #{$type}-#{$direction}: $size * $spacing-base-size;
+      }
+    }
+  }
+
+  .#{$typekey} {
+    #{$type}: 0;
+  }
+}