Skip to content
Permalink
Browse files
use tailwind css
  • Loading branch information
Ovilia committed Jun 4, 2021
1 parent f5774dd commit 4298e90f34c3fa8a02114cd445185fb4b97fdf66
Showing 9 changed files with 865 additions and 45 deletions.
@@ -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>

Large diffs are not rendered by default.

@@ -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",
@@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-nested': {}
},
}
@@ -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>
@@ -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>
@@ -0,0 +1,4 @@
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
@@ -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';


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

0 comments on commit 4298e90

Please sign in to comment.