15.主界面布局

最新推荐文章于 2024-10-15 10:20:47 发布

不蒸馒头曾口气

最新推荐文章于 2024-10-15 10:20:47 发布

阅读量406

点赞数 4

分类专栏：二手交易平台文章标签：学习笔记 vue vscode

本文链接：https://blog.csdn.net/qq_62652856/article/details/139595989

版权

二手交易平台专栏收录该内容

21 篇文章 0 订阅

订阅专栏

主界面布局

官网：
https://element-plus.gitee.io/zh-CN/component/container.html
提供用于布局的容器组件，方便快速搭建页面的基本结构

采用此方式布局：
在这里插入图片描述

安装sass

npm install --save-dev sass

找到index.html添加如下style样式

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
    </head>
    <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    </body>
</html>
<style>
    html,
    body,
    #app{
    padding: 0px;
    margin: 0px;
    height: 100%;
    box-sizing: border-box;
    }
</style>

src下新建layout目录，并新建index.vue主页面组件

代码

<template>
    <div class="common-layout">
        <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
            <el-header>Header</el-header>
            <el-main>Main</el-main>
        </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

修改router中index.ts的代码
import Layout from '@/layout/Index.vue'

效果图

在这里插入图片描述

修改

<template>
        <el-container class="mycontainer">
        <el-aside width="230px" class="asside">Aside</el-aside>
        <el-container>
            <el-header class="header">Header</el-header>
            <el-main class="mymain">Main</el-main>
        </el-container>
        </el-container>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.mycontainer{
    height: 100%;
    .asside{
        background-color: #ffb9b9;
    }
    .header{
        background-color: rgb(164, 194, 255);
    }
    .mymain{
        background-color: rgb(242, 187, 136);
    }
}
</style>