基础样式设定

wujingjing

2025-02-12 5bb92f8f17655f99d60030770ff8eabc74651090

基础样式设定

 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>


 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">

 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';

 src/styles/reset.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
html,
body,
#app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

 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;
}

 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">