From 5bb92f8f17655f99d60030770ff8eabc74651090 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 12 二月 2025 16:21:32 +0800
Subject: [PATCH] 基础样式设定
---
src/components/AppHeader.vue | 2 +-
src/styles/utils.scss | 16 ++++++++++++++++
src/views/Home.vue | 2 +-
src/styles/index.scss | 2 ++
src/App.vue | 11 ++++++++---
src/styles/reset.scss | 8 ++++++++
6 files changed, 36 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 2ae99da..c30f556 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,12 @@
<template>
- <div class="min-h-screen bg-gray-50">
- <AppHeader />
- <router-view></router-view>
+ <div class="h-full bg-gray-50 flex flex-col">
+ <AppHeader class="flex-0" />
+ <div class="flex-auto !overflow-y-auto ">
+ <div class="w-[63%] mx-auto">
+ <router-view></router-view>
+
+ </div>
+ </div>
</div>
</template>
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 7d9c7e9..a6ce4b7 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,6 +1,6 @@
<template>
<header class="bg-white shadow-sm">
- <div class="container mx-auto px-4">
+ <div class="container mx-auto px-40">
<div class="flex items-center justify-between h-16">
<!-- Logo -->
<div class="flex items-center">
diff --git a/src/styles/index.scss b/src/styles/index.scss
index ee92d31..0133258 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,5 @@
@use './tailwind.scss';
@use '@/alloy/styles/index.scss';
@use './element-dark.scss';
+@use './reset.scss';
+@use './utils.scss';
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 0000000..afa5094
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,8 @@
+html,
+body,
+#app {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/styles/utils.scss b/src/styles/utils.scss
new file mode 100644
index 0000000..a379181
--- /dev/null
+++ b/src/styles/utils.scss
@@ -0,0 +1,16 @@
+/* 鏂囨湰婧㈠嚭鏄剧ず鐪佺暐鍙�
+--------------------------------------------------------- */
+.over-ellipsis {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.flex-0 {
+ flex: 0 0 auto;
+}
+
+.flex-auto {
+ flex: 1;
+ overflow: hidden;
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e0b5f5e..3ccd82e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
<template>
- <div>
+ <div class="h-full ">
<!-- 杞挱鍥鹃儴鍒� -->
<div class="banner-carousel">
<el-carousel height="400px" :interval="5000" arrow="always">
--
Gitblit v1.9.3