+
@@ -35,20 +33,3 @@ const route = useRoute()
const menuCollapse = computed(() => store.state.permission.menuCollapse)
const accessRoutes = computed(() => store.state.permission.accessRoutes)
-
-
diff --git a/src/layout/components/Sidebar.vue b/src/layout/components/Sidebar.vue
index 54baf3a..8b1bc52 100644
--- a/src/layout/components/Sidebar.vue
+++ b/src/layout/components/Sidebar.vue
@@ -3,13 +3,15 @@
* @Author: hutu
* @Date: 2021-12-07 08:36:02
* @LastEditors: hutu
- * @LastEditTime: 2021-12-28 17:32:33
+ * @LastEditTime: 2022-01-06 17:37:47
-->
diff --git a/src/main.ts b/src/main.ts
index 87b24e4..ecbdf3e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,7 +6,7 @@ import '@/styles/index.scss' //全局样式
import '@/assets/iconfont/iconfont.scss'
const app = createApp(App)
-import { ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus'
+import { ElButton, ElMenu, ElIcon, ElBreadcrumb, ElBreadcrumbItem, ElInput, ElForm, ElFormItem, ElTooltip, ElDropdown, ElDropdownItem, ElDropdownMenu, ElRow, ElCol, ElScrollbar } from 'element-plus'
import 'element-plus/theme-chalk/index.css'
app.use(ElButton)
app.use(ElMenu)
@@ -20,6 +20,10 @@ app.use(ElTooltip)
app.use(ElDropdown)
app.use(ElDropdownMenu)
app.use(ElDropdownItem)
+app.use(ElRow)
+app.use(ElCol)
+app.use(ElScrollbar)
+
import './permission'
app.use(router)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 621787c..bb69e4e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,43 +1,54 @@
-@import "./sidebar.scss";
+@import './sidebar.scss';
+
* {
- padding: 0px;
- margin: 0px;
+ padding: 0px;
+ margin: 0px;
}
-a{
- text-decoration: none;
+a {
+ text-decoration: none;
}
#app {
- font-size: 14px;
-}
-
-// // 自定义滚动条
-// ::-webkit-scrollbar {
-// width: 6px;
-// /*滚动条宽度*/
-// height: 6px;
-// /*滚动条高度*/
-// transform: translateX(-50px);
-// }
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ font-size: 14px;
-// /*定义滚动条轨道 */
-// ::-webkit-scrollbar-track {
-// background-color: transparent;
-// /*滚动条的背景颜色*/
-// }
-
-// /*定义滑块 */
-// ::-webkit-scrollbar-thumb {
-// cursor: pointer;
-// background-color: #d2e0ed;
-// border-radius: 2px;
-// /*滚动条的背景颜色*/
-// }
-
-// ::-webkit-scrollbar-thumb:hover {
-// background-color: #d2e0ed;
-// /*滚动条的背景颜色*/
-// }
-// ::-webkit-scrollbar-thumb:active {
-// background-color: #d2e0ed;
-// /*滚动条的背景颜色*/
-// }
\ No newline at end of file
+ .layout {
+ position: relative;
+ height: 100%;
+ width: 100%;
+ .sidebar-container {
+ position: fixed;
+ height: 100%;
+ top: 0px;
+ z-index: 1001;
+ overflow: hidden;
+ transition: width 0.28s;
+ -moz-transition: width 0.28s;
+ -webkit-transition: width 0.28s;
+ -o-transition: width 0.28s;
+ }
+ .main-container {
+ transition: margin-left 0.28s;
+ -moz-transition: margin-left 0.28s;
+ -webkit-transition: margin-left 0.28s;
+ -o-transition: margin-left 0.28s;
+ }
+ }
+ .openSidebar {
+ .sidebar-container {
+ width: 210px !important;
+ }
+ .main-container {
+ margin-left: 210px;
+ }
+ }
+ .hideSidebar {
+ .sidebar-container {
+ width: 64px !important;
+ }
+ .main-container {
+ margin-left: 64px;
+ }
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..308a3ba
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,7 @@
+/*
+ * @Description:公共方法
+ * @Author: hutu
+ * @Date: 2022-01-10 11:02:04
+ * @LastEditors: hutu
+ * @LastEditTime: 2022-01-10 15:24:44
+ */
diff --git a/src/views/dashboard/Index.vue b/src/views/dashboard/Index.vue
index bf61c42..279e02c 100644
--- a/src/views/dashboard/Index.vue
+++ b/src/views/dashboard/Index.vue
@@ -1,48 +1,39 @@
-
-
+
+
+
+
+
+
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue
new file mode 100644
index 0000000..dd4674c
--- /dev/null
+++ b/src/views/dashboard/components/PieChart.vue
@@ -0,0 +1,61 @@
+
+
+
-
-
+
+
diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue
new file mode 100644
index 0000000..ae6352a
--- /dev/null
+++ b/src/views/dashboard/components/BarChart.vue
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/components/LineChart.vue b/src/views/dashboard/components/LineChart.vue
new file mode 100644
index 0000000..81d0093
--- /dev/null
+++ b/src/views/dashboard/components/LineChart.vue
@@ -0,0 +1,80 @@
+
+
+
-
-
-
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/components/PanelGroup.vue b/src/views/dashboard/components/PanelGroup.vue
new file mode 100644
index 0000000..24a2941
--- /dev/null
+++ b/src/views/dashboard/components/PanelGroup.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
+ {{ item.num }}
+
+
+ {{ item.title }}
+
+ 较昨天
+
+
+
+
+
+
+
diff --git a/src/views/dashboard/components/TestChart.vue b/src/views/dashboard/components/TestChart.vue
new file mode 100644
index 0000000..e2c9d8d
--- /dev/null
+++ b/src/views/dashboard/components/TestChart.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
diff --git a/vite.config.ts b/vite.config.ts
index 887dd35..daa165a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,8 @@ export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
- views: path.resolve(__dirname, 'src/views')
+ views: path.resolve(__dirname, 'src/views'),
+ interface: path.resolve(__dirname, 'src/interface')
}
},
css: {