Home Explore Help
Sign In
kingdee_large_screen
/
pc_kingdee_large_screen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

焦煤第五个图

zhbyyy 1 year ago
parent
c55ae37ac0
commit
c8eb3d3bcb
17 changed files with 981 additions and 2 deletions
Unified View Show Diff Stats
  1. 1 1
      cokingCoal/cokingCoalC.html
  2. 1 1
      cokingCoal/cokingCoalD.html
  3. 134 0
      cokingCoal/cokingCoalE.html
  4. 0 0
      cokingCoal/images/blue.png
  5. BIN
      cokingCoal/images/count.png
  6. BIN
      cokingCoal/images/flying.png
  7. 0 0
      cokingCoal/images/green.png
  8. BIN
      cokingCoal/images/lb-back.png
  9. BIN
      cokingCoal/images/lt-back.png
  10. BIN
      cokingCoal/images/rb-back.png
  11. BIN
      cokingCoal/images/rectangle.png
  12. BIN
      cokingCoal/images/rt-back.png
  13. BIN
      cokingCoal/images/rt1.png
  14. BIN
      cokingCoal/images/rt2.png
  15. 203 0
      cokingCoal/js/cokingCoalE.js
  16. 0 0
      cokingCoal/libs/datav.min.js
  17. 642 0
      cokingCoal/styles/cokingCoalE.css

+ 1 - 1
cokingCoal/cokingCoalC.html
View File 

@@ -10,7 +10,7 @@
 
   <link rel="stylesheet" href="./styles/cokingCoalC.css" />
 
   <link rel="stylesheet" href="./styles/cokingCoalC.css" />
 
   <!-- 引入js -->
 
   <!-- 引入js -->
 
   <script src="./libs/vue@2.7.10.js"></script>
 
   <script src="./libs/vue@2.7.10.js"></script>
 
-  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
   <script src="./libs/echarts.min.js"></script>
 
   <script src="./libs/echarts.min.js"></script>
 
   <script src="./libs/element-ui@2.15.9.js"></script>
 
   <script src="./libs/element-ui@2.15.9.js"></script>
 
   <script src="./libs/axios.min.js"></script>
 
   <script src="./libs/axios.min.js"></script>

+ 1 - 1
cokingCoal/cokingCoalD.html
View File 

@@ -10,7 +10,7 @@
 
   <link rel="stylesheet" href="./styles/cokingCoalD.css" />
 
   <link rel="stylesheet" href="./styles/cokingCoalD.css" />
 
   <!-- 引入js -->
 
   <!-- 引入js -->
 
   <script src="./libs/vue@2.7.10.js"></script>
 
   <script src="./libs/vue@2.7.10.js"></script>
 
-  <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.min.vue.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
   <script src="./libs/echarts.min.js"></script>
 
   <script src="./libs/echarts.min.js"></script>
 
   <script src="./libs/element-ui@2.15.9.js"></script>
 
   <script src="./libs/element-ui@2.15.9.js"></script>
 
   <script src="./libs/axios.min.js"></script>
 
   <script src="./libs/axios.min.js"></script>

+ 134 - 0
cokingCoal/cokingCoalE.html
View File 

@@ -0,0 +1,134 @@
 
+<!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" />
 
+  <!-- 引入样式 -->
 
+  <link rel="stylesheet" href="./styles/element-ui@2.15.9.css" />
 
+  <link rel="stylesheet" href="./styles/cokingCoalE.css" />
 
+  <!-- 引入js -->
 
+  <script src="./libs/vue@2.7.10.js"></script>
 
+  <script src="./libs/datav.min.js"></script>
 
+  <script src="./libs/echarts.min.js"></script>
 
+  <script src="./libs/element-ui@2.15.9.js"></script>
 
+  <script src="./libs/axios.min.js"></script>
 
+  <script src="./js/request.js"></script>
 
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <dv-full-screen-container>
 
+      <header class="my-header"><span>焦煤集团驾驶舱数字看板</span></header>
 
+      <div class="main">
 
+        <div class="top flex">
 
+          <dv-border-box-8 class="top-left">
 
+            <div class="center-title mx-auto flex flex-col justify-center">
 
+              <div class="flex items-center items-center">
 
+                <img src="./images/arrow.png" alt="" class="arrow">
 
+                <span>技能大师工作室</span>
 
+              </div>
 
+              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+            </div>
 
+            <div class="flex item-tl mx-auto items-center justify-around">
 
+              <div class="item-tl-item">
 
+                <div>国家级</div>
 
+                <div>
 
+                  <img src="./images/blue.png" alt="">
 
+                  <span style="color: #69C0FF;">1690</span>个
 
+                  <img src="./images/green.png" style="margin-left: 20px;" alt="">
 
+                  <span style="color: #43EDE3;">2046</span>个
 
+                </div>
 
+              </div>
 
+              <div class="item-tl-item">
 
+                <div>行业级</div>
 
+                <div>
 
+                  <img src="./images/blue.png" alt="">
 
+                  <span style="color: #69C0FF;">2013</span>个
 
+                  <img src="./images/green.png" style="margin-left: 20px;" alt="">
 
+                  <span style="color: #43EDE3;">3400</span>个
 
+                </div>
 
+              </div>
 
+              <div class="item-tl-item">
 
+                <div>省级</div>
 
+                <div>
 
+                  <img src="./images/blue.png" alt="">
 
+                  <span style="color: #69C0FF;">1380</span>个
 
+                  <img src="./images/green.png" style="margin-left: 20px;" alt="">
 
+                  <span style="color: #43EDE3;">2460</span>个
 
+                </div>
 
+              </div>
 
+              <div class="item-tl-item">
 
+                <div>集团级</div>
 
+                <div>
 
+                  <img src="./images/blue.png" alt="">
 
+                  <span style="color: #69C0FF;">1012</span>个
 
+                  <img src="./images/green.png" style="margin-left: 20px;" alt="">
 
+                  <span style="color: #43EDE3;">3421</span>个
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 class="top-right">
 
+            <div class="center-title mx-auto flex flex-col justify-center">
 
+              <div class="flex items-center items-center">
 
+                <img src="./images/arrow.png" alt="" class="arrow">
 
+                <span>培训计划</span>
 
+              </div>
 
+              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+            </div>
 
+            <div class="flex item-tr mx-auto items-center justify-around" style="height: 80%;width: 100%;">
 
+              <div class="item-tr-item">
 
+                <div class="flex items-center " style="margin-bottom: 30px;">
 
+                  <img src="./images/rt1.png" alt="">
 
+                  <div>计划参训人数<span class="text-style" style="color: #69C0FF;">169</span>人</div>
 
+                </div>
 
+                <div class="flex items-center ">
 
+                  <img src="./images/rt2.png" alt="">
 
+                  <div>实际参训人数<span class="text-style" style="color: #43EDE3;">128</span>人</div>
 
+                </div>
 
+              </div>
 
+              <dv-water-level-pond :config="config" style="width:150px;height:200px" />
 
+            </div>
 
+          </dv-border-box-8>
 
+
 
+        </div>
 
+        <div class="bottom flex">
 
+          <dv-border-box-8 class="bottom-left">
 
+            <div class="center-title mx-auto flex flex-col justify-center">
 
+              <div class="flex items-center items-center">
 
+                <img src="./images/arrow.png" alt="" class="arrow">
 
+                <span>课程体系</span>
 
+              </div>
 
+              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+            </div>
 
+            <div class="aiQuality dis-flex flex-dir-column ">
 
+              <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
 
+            </div>
 
+          </dv-border-box-8>
 
+          <dv-border-box-8 class="bottom-right">
 
+            <div class="center-title mx-auto flex flex-col justify-center">
 
+              <div class="flex items-center items-center">
 
+                <img src="./images/arrow.png" alt="" class="arrow">
 
+                <span>讲师团队</span>
 
+              </div>
 
+              <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
 
+            </div>
 
+            <div class="rb-item">
 
+              <div ref="echartR1" style="height:100%;width: 100%;"></div>
 
+            </div>
 
+          </dv-border-box-8>
 
+        </div>
 
+      </div>
 
+      <div class="footer justify-center">
 
+        <a class="item" v-for="(item,index) in companyList" :key="index">{{item.name}}</a>
 
+      </div>
 
+    </dv-full-screen-container>
 
+
 
+  </div>
 
+  <script src="./js/cokingCoalE.js"></script>
 
+</body>
 
+
 
+</html>

+ 0 - 0
cokingCoal/images/蓝色.png → cokingCoal/images/blue.png
View File


BIN
cokingCoal/images/count.png
View File


BIN
cokingCoal/images/flying.png
View File


+ 0 - 0
cokingCoal/images/绿色.png → cokingCoal/images/green.png
View File


BIN
cokingCoal/images/lb-back.png
View File


BIN
cokingCoal/images/lt-back.png
View File


BIN
cokingCoal/images/rb-back.png
View File


BIN
cokingCoal/images/rectangle.png
View File


BIN
cokingCoal/images/rt-back.png
View File


BIN
cokingCoal/images/rt1.png
View File


BIN
cokingCoal/images/rt2.png
View File


+ 203 - 0
cokingCoal/js/cokingCoalE.js
View File 

@@ -0,0 +1,203 @@
 
+let app = new Vue({
 
+  el: '#app',
 
+  data () {
 
+    return {
 
+      config: {
 
+        data: [18],
 
+        shape: 'round',
 
+        colors: ['#69C0FF', '#43EDE3']
 
+      },
 
+      companyList: [
 
+        { name: '核心人力-1' },
 
+        { name: '核心人力-2' },
 
+        { name: '内部人才市场' },
 
+        { name: '薪酬福利' },
 
+        { name: '培训' }
 
+      ]
 
+    }
 
+  },
 
+  mounted () {
 
+    setTimeout(() => {
 
+      this.aiQualityECharts2();
 
+      this.initChartR1()
 
+    })
 
+  },
 
+  methods: {
 
+    initChartR1 () {
 
+      let myChart = echarts.init(this.$refs['echartR1'])
 
+      let option = {
 
+        tooltip: {
 
+          trigger: 'item',
 
+        },
 
+        legend: {
 
+          top: 'center',
 
+          orient: 'vertical',
 
+          right: '2%',
 
+          textStyle: {
 
+            color: '#9DB9EB',
 
+          },
 
+        },
 
+        graphic: {
 
+          type: "text",
 
+          left: "center",
 
+          top: "45%",
 
+          style: {
 
+            text: "总人数2530",
 
+            textAlign: "center",
 
+            fill: "#fff",
 
+            fontSize: 20,
 
+            fontWeight: 700
 
+          }
 
+        },
 
+        series: [
 
+          {
 
+            name: '',
 
+            type: 'pie',
 
+            radius: ['55%', '80%'],
 
+            labelLine: {
 
+              normal: {
 
+                lineStyle: {
 
+                  width: 1,
 
+                },
 
+              },
 
+            },
 
+            data: [
 
+              { value: 1048, name: '教授' },
 
+              { value: 735, name: '副教授' },
 
+              { value: 580, name: '助教' },
 
+              { value: 484, name: '讲师' },
 
+            ],
 
+            itemStyle: {
 
+              normal: {
 
+                color: function (colors) {
 
+                  var colorList = [
 
+                    '#00DCFF',
 
+                    '#116CFD',
 
+                    '#8BA2FF',
 
+                    '#FFC200'
 
+                  ];
 
+                  return colorList[colors.dataIndex];
 
+                }
 
+              },
 
+            }
 
+          },
 
+        ],
 
+      }
 
+      myChart.setOption(option)
 
+    },
 
+    aiQualityECharts2 () {
 
+      let chart = echarts.init(document.getElementById("aiQuality2"));
 
+      let option = {
 
+        grid: {
 
+          top: 30,
 
+          right: 40,
 
+          left: 75,
 
+          bottom: 50,
 
+        },
 
+        tooltip: {
 
+          show: true,
 
+          trigger: "axis",
 
+          axisPointer: {
 
+            // 坐标轴指示器，坐标轴触发有效
 
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
 
+          },
 
+        },
 
+        xAxis: {
 
+          data: ["集团本部", "山焦财务", "山焦担保", "山焦股份", "山焦国华", "山焦机电", "山焦人力", "山焦民爆", "山焦事业", "山焦投资"],
 
+          axisTick: {
 
+            show: false,
 
+          },
 
+          // x轴的字体颜色
 
+          axisLabel: {
 
+            interval: 0,
 
+            rotate: 40,
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        yAxis: {
 
+          axisTick: {
 
+            lineStyle: {
 
+              color: "#18416F",
 
+            },
 
+          },
 
+          // y轴的字体颜色
 
+          axisLabel: {
 
+            textStyle: {
 
+              color: "white",
 
+            },
 
+          },
 
+          splitLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#204561",
 
+              width: 1,
 
+              type: "dotted",
 
+            },
 
+          },
 
+          //y轴线的颜色以及宽度
 
+          axisLine: {
 
+            show: true,
 
+            lineStyle: {
 
+              color: "#1E5389",
 
+              width: 1,
 
+              type: "solid",
 
+            },
 
+          },
 
+        },
 
+        series: [
 
+          {
 
+            name: "",
 
+            type: "bar",
 
+            data: [1200, 680, 562, 268, 717, 843, 987, 126, 723, 569],
 
+            showBackground: true,
 
+            backgroundStyle: {
 
+              color: "#18416F",
 
+            },
 
+            barWidth: "10%",
 
+            itemStyle: {
 
+              barBorderRadius: [10, 10, 0, 0],
 
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
 
+                {
 
+                  offset: 0,
 
+                  color: "#02355C",
 
+                }, //柱图渐变色
 
+                {
 
+                  offset: 1,
 
+                  color: "#40A9FF",
 
+                },
 
+              ]),
 
+            },
 
+          }
 
+        ],
 
+        legend: {
 
+          data: ["入池人数", "出池人数"],
 
+          textStyle: {
 
+            // 图列内容样式
 
+            color: "#fff", // 字体颜色
 
+            // fontSize: "10",
 
+          },
 
+          right: 30,
 
+          icon: "roundRect",
 
+          // 小图标的宽高
 
+          itemHeight: 5,
 
+        },
 
+      };
 
+      chart.setOption(option);
 
+      tools.loopShowTooltip(chart, option, {
 
+        nterval: 2000,
 
+        loopSeries: true,
 
+      });
 
+    },
 
+  },
 
+})

File diff suppressed because it is too large
+ 0 - 0
cokingCoal/libs/datav.min.js


+ 642 - 0
cokingCoal/styles/cokingCoalE.css
View File 

@@ -0,0 +1,642 @@
 
+*,
 
+*:before,
 
+*:after {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+}
 
+html,
 
+body {
 
+  height: 100%;
 
+  font-size: 14px;
 
+  background-color: #ecffff;
 
+  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
 
+    'Hiragino Sans GB', Arial, sans-serif;
 
+}
 
+
 
+.flex {
 
+  display: flex;
 
+}
 
+.flex1 {
 
+  flex: 1;
 
+}
 
+.flex2 {
 
+  flex: 2;
 
+}
 
+.flex-around {
 
+  display: flex;
 
+  justify-content: space-around;
 
+}
 
+.flex-between {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex-end {
 
+  display: flex;
 
+  justify-content: flex-end;
 
+}
 
+.flex-align-center {
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.font12 {
 
+  font-size: 12px;
 
+}
 
+.main-color {
 
+  color: #0bf1ff;
 
+}
 
+.danger-color {
 
+  color: #f15450 !important;
 
+}
 
+.error-color {
 
+  color: #ffc704 !important;
 
+}
 
+.btm10 {
 
+  margin-bottom: 10px;
 
+}
 
+.btm20 {
 
+  margin-bottom: 20px;
 
+}
 
+a {
 
+  text-decoration: none;
 
+  cursor: pointer;
 
+}
 
+
 
+[v-cloak] {
 
+  display: none;
 
+}
 
+#app {
 
+  background: url('../images/top-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  padding-top: 10px;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  color: #fff;
 
+}
 
+.my-header {
 
+  height: 70px;
 
+  line-height: 70px;
 
+  background: url('../images/title-back.png') center center no-repeat;
 
+  background-size: 100% 100%;
 
+  color: #0bf1ff;
 
+  text-align: center;
 
+  font-size: 25px;
 
+  font-weight: 600;
 
+}
 
+.my-header span {
 
+  background-image: -webkit-linear-gradient(top, #fff, #99eeff);
 
+  -webkit-background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+}
 
+.main {
 
+  padding: 15px;
 
+  height: calc(100% - 70px);
 
+  background-size: 80%;
 
+  padding-bottom: 65px;
 
+  gap: 20px;
 
+}
 
+.footer {
 
+  position: fixed;
 
+  bottom: 0;
 
+  padding: 10px;
 
+  display: flex;
 
+  background-color: rgba(0, 0, 0, 0.5);
 
+  width: 100%;
 
+  background: url('../images/foot-back.png') no-repeat center bottom;
 
+  background-size: 100% 100%;
 
+}
 
+.footer a {
 
+  height: 40px;
 
+  line-height: 40px;
 
+  text-align: center;
 
+  color: #fff;
 
+  background: url('../images/footer-item.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  width: 200px;
 
+}
 
+.footer a:hover {
 
+  background: url('../images/footer-item-checked.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.top {
 
+  width: 100%;
 
+  height: 40%;
 
+  margin-bottom: 15px;
 
+}
 
+.bottom {
 
+  width: 100%;
 
+  height: 58%;
 
+}
 
+.top-left {
 
+  width: 69% !important;
 
+  height: 100%;
 
+  background: url('../images/lt-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  margin-right: 15px;
 
+}
 
+.top-right {
 
+  width: 30% !important;
 
+  height: 100%;
 
+  background: url('../images/rt-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.bottom-left {
 
+  width: 69% !important;
 
+  height: 100%;
 
+  background: url('../images/lb-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  margin-right: 15px;
 
+}
 
+.bottom-right {
 
+  width: 30% !important;
 
+  height: 100%;
 
+  background: url('../images/rb-back.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.center-title {
 
+  height: 15%;
 
+  width: 90%;
 
+}
 
+.arrow {
 
+  width: 17px;
 
+  height: 34px;
 
+  margin-right: 5px;
 
+}
 
+.item-tl,
 
+item-tr {
 
+  width: 95%;
 
+  height: 70%;
 
+  padding: 0 2%;
 
+  margin-top: 22px !important;
 
+}
 
+.item-tl-item {
 
+  width: 24.5%;
 
+  height: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  background: url('../images/rectangle.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.item-tl-item > div:first-child {
 
+  background: url('../images/flying.png') no-repeat;
 
+  background-size: 100% 100%;
 
+  height: 140px;
 
+  line-height: 140px;
 
+  text-align: center;
 
+  font-weight: bold;
 
+  font-size: 16px;
 
+  width: 140px;
 
+  margin-bottom: 30px;
 
+}
 
+.item-tl-item > div:last-child {
 
+  width: 100%;
 
+  height: 50px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  background: url('../images/count.png') no-repeat;
 
+  background-size: 100% 100%;
 
+}
 
+.item-tl-item img {
 
+  width: 30px;
 
+  height: 30px;
 
+}
 
+.item-tl-item span {
 
+  font-size: 20px;
 
+  margin-right: 10px;
 
+  font-style: italic;
 
+  font-weight: bold;
 
+}
 
+.item-tr-item img {
 
+  margin-right: 10px;
 
+}
 
+.text-style {
 
+  margin: 0 10px;
 
+  font-size: 18px;
 
+  font-weight: bold;
 
+}
 
+.aiQuality {
 
+  width: 90%;
 
+  height: 70%;
 
+  padding-top: 0.2%;
 
+  margin: 0 auto;
 
+  margin-top: 25px;
 
+}
 
+.rb-item {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  height: 80%;
 
+  width: 100%;
 
+  padding: 20px 0;
 
+}
 
+/* zhb */
 
+/* 宽高纵横比 */
 
+.aspect-auto {
 
+  aspect-ratio: auto;
 
+}
 
+.aspect-square {
 
+  aspect-ratio: 1 / 1;
 
+}
 
+.aspect-video {
 
+  aspect-ratio: 16 / 9;
 
+}
 
+/* aspect-[4/3] */
 
+
 
+/* 居中 */
 
+.mx-auto {
 
+  margin: 0 auto;
 
+}
 
+
 
+/* 设置容器内的列数/每列距离 */
 
+.columns-1 {
 
+  columns: 1;
 
+}
 
+/* columns-[20px] */
 
+
 
+/* 盒子模型 */
 
+.box-border {
 
+  box-sizing: border-box;
 
+}
 
+.box-content {
 
+  box-sizing: content-box;
 
+}
 
+/* 消失 */
 
+.hidden {
 
+  display: none;
 
+}
 
+
 
+/* 块级元素 */
 
+.block {
 
+  display: block;
 
+}
 
+/* 行内块 */
 
+.inline-block {
 
+  display: inline-block;
 
+}
 
+/* 行内元素 */
 
+.inline {
 
+  display: inline;
 
+}
 
+
 
+/* 弹性布局 */
 
+.flex {
 
+  display: flex;
 
+}
 
+/* 主轴起点在左边 */
 
+.flex-row {
 
+  flex-direction: row;
 
+}
 
+/* 主轴起点在右边 */
 
+.flex-row-reverse {
 
+  flex-direction: row-reverse;
 
+}
 
+/* 主轴竖向排列，在上面 */
 
+.flex-col {
 
+  flex-direction: column;
 
+}
 
+/* 主轴竖向排列，在下面 */
 
+.flex-col-reverse {
 
+  flex-direction: column-reverse;
 
+}
 
+/* 自动换行 */
 
+.flex-wrap {
 
+  flex-wrap: wrap;
 
+}
 
+/* 自动换行下起点 */
 
+.flex-wrap-reverse {
 
+  flex-wrap: wrap-reverse;
 
+}
 
+/* 不换行 */
 
+.flex-nowrap {
 
+  flex-wrap: nowrap;
 
+}
 
+/* 弹性成长 */
 
+.grow {
 
+  flex-grow: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.grow-0 {
 
+  flex-grow: 0;
 
+}
 
+/* 主轴从左开始 */
 
+.justify-start {
 
+  justify-content: flex-start;
 
+}
 
+/* 主轴从右开始 */
 
+.justify-end {
 
+  justify-content: flex-end;
 
+}
 
+/* 主轴剧中 */
 
+.justify-center {
 
+  justify-content: center;
 
+}
 
+/* 主轴两端无间隔 */
 
+.justify-between {
 
+  justify-content: space-between;
 
+}
 
+/* 主轴两端有间隔 */
 
+.justify-around {
 
+  justify-content: space-around;
 
+}
 
+/* 所有间隔相等 */
 
+.justify-evenly {
 
+  justify-content: space-evenly;
 
+}
 
+/* 纵向起点最上方 */
 
+.items-start {
 
+  align-items: flex-start;
 
+}
 
+/* 纵向起点最下方 */
 
+.items-end {
 
+  align-items: flex-end;
 
+}
 
+.items-center {
 
+  align-items: center;
 
+}
 
+/* 网格布局 */
 
+.grid {
 
+  display: grid;
 
+}
 
+/* 有几列 */
 
+.grid-cols-4 {
 
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 
+}
 
+/* 有几行 */
 
+.grid-rows-3 {
 
+  grid-template-rows: repeat(3, minmax(0, 1fr));
 
+}
 
+
 
+/* 间距 */
 
+.gap-7 {
 
+  gap: 1.75rem;
 
+}
 
+/* 允许弹性成长 */
 
+.shrink {
 
+  flex-shrink: 1;
 
+}
 
+/* 不允许弹性成长 */
 
+.shrink-0 {
 
+  flex-shrink: 0;
 
+}
 
+/* 不允许成长也不允许收缩 */
 
+.flex-none {
 
+  flex: none;
 
+}
 
+/* 浮动布局 */
 
+.float-right {
 
+  float: right;
 
+}
 
+.float-left {
 
+  float: left;
 
+}
 
+.clear-both {
 
+  clear: both;
 
+}
 
+
 
+/* 溢出 */
 
+.overflow-auto {
 
+  overflow: auto;
 
+}
 
+.overflow-hidden {
 
+  overflow: hidden;
 
+}
 
+.overflow-scroll {
 
+  overflow: scroll;
 
+}
 
+.overflow-x-auto {
 
+  overflow-x: auto;
 
+}
 
+.overflow-y-auto {
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 定位 */
 
+.fixed {
 
+  position: fixed;
 
+}
 
+.absolute {
 
+  position: absolute;
 
+}
 
+.relative {
 
+  position: relative;
 
+}
 
+.top-0 {
 
+  top: 0px;
 
+}
 
+.right-0 {
 
+  right: 0px;
 
+}
 
+.bottom-0 {
 
+  bottom: 0px;
 
+}
 
+.left-0 {
 
+  left: 0px;
 
+}
 
+/* top-[3px] */
 
+/* z-[100] */
 
+
 
+/* 显示隐藏未脱离文档流 */
 
+.visible {
 
+  visibility: visible;
 
+}
 
+.invisible {
 
+  visibility: hidden;
 
+}
 
+
 
+/* 内边距 */
 
+.p-0 {
 
+  padding: 0px;
 
+}
 
+.px-0 {
 
+  padding-left: 0px;
 
+  padding-right: 0px;
 
+}
 
+.py-0 {
 
+  padding-top: 0px;
 
+  padding-bottom: 0px;
 
+}
 
+.pt-0 {
 
+  padding-top: 0px;
 
+}
 
+.pr-0 {
 
+  padding-right: 0px;
 
+}
 
+.pb-0 {
 
+  padding-bottom: 0px;
 
+}
 
+.pl-0 {
 
+  padding-left: 0px;
 
+}
 
+/* p-[5px] */
 
+
 
+/* 外边距 */
 
+.m-0 {
 
+  margin: 0px;
 
+}
 
+.mx-0 {
 
+  margin-left: 0px;
 
+  margin-right: 0px;
 
+}
 
+.my-0 {
 
+  margin-top: 0px;
 
+  margin-bottom: 0px;
 
+}
 
+.mt-0 {
 
+  margin-top: 0px;
 
+}
 
+.mr-0 {
 
+  margin-right: 0px;
 
+}
 
+.mb-0 {
 
+  margin-bottom: 0px;
 
+}
 
+.ml-0 {
 
+  margin-left: 0px;
 
+}
 
+/* m-[5px] */
 
+
 
+/* 宽度 */
 
+.w-full {
 
+  width: 100%;
 
+}
 
+.w-screen {
 
+  width: 100vw;
 
+}
 
+/* w-[32rem] */
 
+/* min-w-[50%] */
 
+/* max-w-[50%] */
 
+
 
+/* 高度 */
 
+.h-full {
 
+  height: 100%;
 
+}
 
+.h-screen {
 
+  height: 100vh;
 
+}
 
+/* h-[32rem] */
 
+/* min-h-[50%] */
 
+/* max-h-[32rem] */
 
+
 
+/* 字体 */
 
+.text-xs {
 
+  font-size: 0.75rem; /* 12px */
 
+  line-height: 1rem; /* 16px */
 
+}
 
+.text-sm {
 
+  font-size: 0.875rem; /* 14px */
 
+  line-height: 1.25rem; /* 20px */
 
+}
 
+.text-base {
 
+  font-size: 1rem; /* 16px */
 
+  line-height: 1.5rem; /* 24px */
 
+}
 
+.text-lg {
 
+  font-size: 1.125rem; /* 18px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-xl {
 
+  font-size: 1.25rem; /* 20px */
 
+  line-height: 1.75rem; /* 28px */
 
+}
 
+.text-2xl {
 
+  font-size: 1.5rem; /* 24px */
 
+  line-height: 2rem; /* 32px */
 
+}
 
+.text-3xl {
 
+  font-size: 1.875rem; /* 30px */
 
+  line-height: 2.25rem; /* 36px */
 
+}
 
+.text-4xl {
 
+  font-size: 2.25rem; /* 36px */
 
+  line-height: 2.5rem; /* 40px */
 
+}
 
+.text-5xl {
 
+  font-size: 3rem; /* 48px */
 
+  line-height: 1;
 
+}
 
+.text-6xl {
 
+  font-size: 3.75rem; /* 60px */
 
+  line-height: 1;
 
+}
 
+.text-7xl {
 
+  font-size: 4.5rem; /* 72px */
 
+  line-height: 1;
 
+}
 
+.text-8xl {
 
+  font-size: 6rem; /* 96px */
 
+  line-height: 1;
 
+}
 
+.text-9xl {
 
+  font-size: 8rem; /* 128px */
 
+  line-height: 1;
 
+}
 
+/* text-[14px] */
 
+/* 字体粗细font-weight */
 
+/* font-[1100] */
 
+/* https://tailwindcss.com/docs/font-weight */
 
+/* 字体间距letter-spacing */
 
+/* tracking-[.25em] */
 
+/* 行高line-height */
 
+/* leading-[3rem] */
 
+/* 无列表样式 */
 
+.list-none {
 
+  list-style-type: none;
 
+}
 
+/* 小圆点 */
 
+.list-disc {
 
+  list-style-type: disc;
 
+}
 
+/* 数字列表 */
 
+.list-decimal {
 
+  list-style-type: decimal;
 
+}
 
+.text-left {
 
+  text-align: left;
 
+}
 
+.text-center {
 
+  text-align: center;
 
+}
 
+.text-right {
 
+  text-align: right;
 
+}
 
+/* 所有文本头尾对齐 */
 
+.text-justify {
 
+  text-align: justify;
 
+}
 
+/* 文本颜色 */
 
+/* text-[#50d71e] */
 
+/* https://tailwindcss.com/docs/text-color */
 
+/* 下划线 */
 
+.underline {
 
+  text-decoration-line: underline;
 
+}
 
+/* 上划线 */
 
+.overline {
 
+  text-decoration-line: overline;
 
+}
 
+/* 中划线 */
 
+.line-through {
 
+  text-decoration-line: line-through;
 
+}
 
+/* 无划线 */
 
+.no-underline {
 
+  text-decoration-line: none;
 
+}
 
+/* 全小写 */
 
+.lowercase {
 
+  text-transform: lowercase;
 
+}
 
+/* 全大写 */
 
+.uppercase {
 
+  text-transform: uppercase;
 
+}
 
+/* 首字母大写 */
 
+.capitalize {
 
+  text-transform: capitalize;
 
+}

Some files were not shown because too many files changed in this diff