use tailwind css

apache · Jun 4, 2021 · 4298e90 · 4298e90
1 parent f5774dd
commit 4298e90
Show file tree

Hide file tree

Showing 9 changed files with 865 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -19,12 +19,14 @@
             }
             #header .logo {
                 height: 35px;
-                margin-top: 7px;
-                margin-left: 20px;;
+                position: relative;
+                top: 7px;
+                left: 20px;
             }
             #header .lang {
-                float: right;
-                margin-right: 20px;
+                position: absolute;
+                top: 0;
+                right: 20px;
                 line-height: 50px;
             }
             #page-main {
@@ -34,6 +36,9 @@
                 right: 0;
                 bottom: 0;
             }
+            #echarts-spa-app {
+                height: 100%;
+            }
         </style>
     </head>
     <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,14 +8,20 @@
         "serve": "vite preview"
     },
     "devDependencies": {
+        "@tailwindcss/postcss7-compat": "^2.1.4",
         "@vitejs/plugin-vue": "^1.2.2",
         "@vue/compiler-sfc": "^3.0.11",
+        "autoprefixer": "^9.8.6",
         "chalk": "^3.0.0",
         "fs-extra": "^8.1.0",
         "globby": "^10.0.1",
         "node-static": "^0.7.11",
         "open": "^7.1.0",
+        "postcss": "^7.0.35",
+        "postcss-import": "^14.0.2",
+        "postcss-nested": "^5.0.5",
         "sass": "^1.32.13",
+        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",
         "typescript": "^4.1.3",
         "vite": "^2.3.3",
         "vue-tsc": "^0.1.4",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-nested': {}
+  },
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
 <el-container>
-    <el-aside>
+    <!-- <el-aside>
         <h3>Side Nav</h3>
-    </el-aside>
+    </el-aside> -->
     <el-main>
         <BTable/>
     </el-main>
@@ -29,4 +29,12 @@ import BTable from './components/BTable.vue';
     top: 0;
     bottom: 0;
 }
+
+.el-container {
+    height: 100%;
+}
+
+.el-main {
+    padding: 5px;
+}
 </style>
diff --git a/src/components/BTable.vue b/src/components/BTable.vue
@@ -1,42 +1,46 @@
 <template>
-  <div class="page-content">
-    <!-- <div class="row" id="table-row">
-      <div class="col-md-6">
-        <div id="table-panel"></div>
-      </div>
-      <div class="col-md-6">
-        <div class="bar-race-config">
-          <form>
-            <div class="form-group">
-              <label class="col-lg-6">标题</label>
-              <input class="form-control" id="input-title" value="汽车产量动态排名"/>
+    <div class="w-full h-full">
+        <div class="grid grid-cols-3 h-full">
+            <div id="el-table" class="col-span-2 h-full" style="border: 1px solid red;"></div>
+            <div id="el-config" class="p-3 align-middle">
+                <div>
+                    <el-button type="button" onclick="run()" size="medium">运行</el-button>
+                    <el-button type="button" size="medium">导出</el-button>
+                </div>
+                <el-form ref="form">
+                    <div class="grid grid-cols-2 form-row">
+                        <label>标题</label>
+                        <el-input id="input-title" value="汽车产量动态排名" size="medium"></el-input>
+                    </div>
+                    <div class="grid grid-cols-2 form-row">
+                        <label>显示排名上限</label>
+                        <el-input id="input-max" type="number" value="10" size="medium"></el-input>
+                    </div>
+                </el-form>
             </div>
-            <div class="form-group">
-              <label class="col-lg-6">显示排名上限</label>
-              <input class="form-control" id="input-max" type="number" value="10"/>
-            </div>
-          </form>
-        </div>
-        <div>
-          <button class="btn btn-default" type="button" onclick="run()">运行</button>
-          <button class="btn btn-default" type="button">导出</button>
         </div>
-        <div id="bar-race-preview"></div>
-      </div>
-    </div -->
-  </div>
+    </div>
 </template>
 
 <script lang="ts">
 import {defineComponent} from 'vue'
 export default defineComponent({
-  name: 'BTable',
-  props: {
-  },
-  setup: () => {
-  }
+    name: 'BTable',
+    props: {
+    },
+    setup: () => {
+    }
 })
 </script>
 
 <style scoped>
+@layer utilities {
+    .form-row {
+        @apply my-3;
+
+        label {
+            @apply py-1;
+        }
+    }
+}
 </style>
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,4 @@
+/*! @import */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.ts b/src/main.ts
@@ -5,6 +5,7 @@ import en from './i18n/en-US';
 
 import ElementPlus from 'element-plus';
 import 'element-plus/lib/theme-chalk/index.css';
+import './index.css';
 import App from './App.vue';
 
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  purge: [
+    '*.html',
+    'src/**/*.{vue,ts}'
+  ],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}