多多OJ评测系统 前端页面通用布局开发与优化 调整布局

目录

我们重新布局样式

个人习惯写一个最外层的样式

Header Content Footer

布局出来了

加上标签和容器

绑定样式

我们设置一些样式

页面展示效果

我们加入导航栏

搜索组件

我们这边把导航菜单抽象成一个公共的组件

引入好

页面中成功进行了展示

我们可以把这边替换成我们的logo

首先我们把图片文件引入

我们就能引入图片

我们接下来指定样式

用原生css设置一下样式

最终效果 

---

接下来我们要做我们项目的模版

我们重新布局样式

BasicLayout.vue

我们在app.vue里面引入这个样式

个人习惯写一个最外层的样式

div

我们是在组件库里找一下布局

 <a-layout style="height: 400px;">
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

写在里面

有三部分

Header Content Footer

我们去网页中看

布局出来了

首先我们设置一下布局

加上标签和容器

<template>
  <div id="basicLayout">
    <a-layout style="height: 400px">
      <a-layout-header class="header">Header</a-layout-header>

      <a-layout-content class="content">
        <router-view />
      </a-layout-content>

      <a-layout-footer class="footer">Footer</a-layout-footer>
    </a-layout>
  </div>
</template>

绑定样式

<style scoped>
#basicLayout {
}

#basicLayout .header {
}

#basicLayout .content {
}
</style>

我们设置一些样式

页面展示效果

我们加入导航栏

菜单

搜索组件

 <a-menu mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
        <div
          :style="{
            width: '80px',
            height: '30px',
            borderRadius: '2px',
            background: 'var(--color-fill-3)',
            cursor: 'text',
          }"
        />
      </a-menu-item>
      <a-menu-item key="1">Home</a-menu-item>
      <a-menu-item key="2">Solution</a-menu-item>
      <a-menu-item key="3">Cloud Service</a-menu-item>
      <a-menu-item key="4">Cooperation</a-menu-item>
    </a-menu>

我们这边把导航菜单抽象成一个公共的组件

引入好

<template>
  <div id="globalHeader">
    <a-menu mode="horizontal" :default-selected-keys="['1']">
      <a-menu-item
        key="0"
        :style="{ padding: 0, marginRight: '38px' }"
        disabled
      >
        <div
          :style="{
            width: '80px',
            height: '30px',
            borderRadius: '2px',
            background: 'var(--color-fill-3)',
            cursor: 'text',
          }"
        />
      </a-menu-item>
      <a-menu-item key="1">Home</a-menu-item>
      <a-menu-item key="2">Solution</a-menu-item>
      <a-menu-item key="3">Cloud Service</a-menu-item>
      <a-menu-item key="4">Cooperation</a-menu-item>
    </a-menu>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

页面中成功进行了展示

我们可以把这边替换成我们的logo

首先我们把图片文件引入

我们就能引入图片

我们接下来指定样式

        <div class="title-bar">
          <img class="logo" src="../assets/oj.png" />
          <div>多多oj</div>
        </div>

<style scoped>
.logo {
  height: 80px;
}
</style>

我们现在的样式是这样子的

这边改回方便一些

在浏览器控制台去书写

用原生css设置一下样式

.title {
  font-size: 30px;
  color: #ff91df;
  margin-left: 16px;
  margin-top: 10px;
  font-family: 幼圆;
}

最终效果 

个人号推广

博客主页

朱道阳-CSDN博客

Web后端开发

https://blog.csdn.net/qq_30500575/category_12624592.html?spm=1001.2014.3001.5482

Web前端开发

https://blog.csdn.net/qq_30500575/category_12642989.html?spm=1001.2014.3001.5482

数据库开发

https://blog.csdn.net/qq_30500575/category_12651993.html?spm=1001.2014.3001.5482

项目实战

https://blog.csdn.net/qq_30500575/category_12699801.html?spm=1001.2014.3001.5482

算法与数据结构

https://blog.csdn.net/qq_30500575/category_12630954.html?spm=1001.2014.3001.5482

计算机基础

https://blog.csdn.net/qq_30500575/category_12701605.html?spm=1001.2014.3001.5482

回忆录

https://blog.csdn.net/qq_30500575/category_12620276.html?spm=1001.2014.3001.5482