前端小练-仿掘金导航栏

前言

闲的，你信嘛，还得开发一个基本的门户社区网站，来给到Hlang,不然我怕说工作量不够。那么这个的话，其实也很好办，主要是这个门户网站的UI写起来麻烦一点，其他的就直接套用组件，和以前的老代码就行了。为了快速开发，我直接用royi-cloud去做了。反正自己搭建一个也是这样，还要自己重新搭建环境，不如直接加速。像这种类型的网站，没有啥技巧，无法是做做防抖，节流，对接点啥支付等等的玩意。一个礼拜就能开发好，前提是前端好写。不过也确实不难，这种东西。其他的就是套用组件，没啥，后端的话，原来是整合人人开源一套的，但是MP，我实在是不喜欢，越写越觉得MP有点呆。懒得改写，不如直接换架构。这也是为啥直接用ruoyi了。

废话不多说，看看效果：

我甚至为此用New Bing生成了一个Logo。

首先，没错，我的临时毕设方案有两个部分： 1. 基于Python实现的中文编程解释器。因为主打的是教学，锻炼编程思维，因此不考虑任何性能，只考虑开发成本和周期，要是用C++怼，那我觉得我一开始的算法开发平台也不是不能做完。 2. 给这个玩意，做一个技术交流社区，这个社区的名字叫做Hlang,但是它不限于Hlang,其实就是个博客社区套壳。然后里面很多功能会直接套用白洞。但是所有内容会重构，反正现在开发一个这种玩意顶多一个礼拜（包括前端估计两个礼拜顶天了）

项目结构

废话不多说，先来看到我们的项目结构： 在这里导航栏是一个组件。 在App.vue里面直接调用：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Header from './components/Header.vue';
</script>
<template>
  <header>
    <Header></Header>
  </header>
  <div class="main">
    <div class="placeholder"></div> 
    <RouterView />
  </div>
</template>

<style scoped>
  .main{
    width: 100%;
    background-color: rgb(242,243,245);
  }
  .placeholder{
    height: 80px;
    width: 100%;
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 42px;
    background-color: #fff; /* 设置背景颜色 */
    padding: 20px; /* 添加内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    z-index: 999; /* 设置堆叠顺序，确保 header 位于其他内容之上 */
  }
</style>

这里注意的是，为了让head固定，我用fixed布局，然后的话为了避免挡住内容，于是在这里我用了一个div把main里面的东西顶下去。 就是这个：

    <div class="placeholder"></div> 

导航实现

那么接下来就是我们的导航了。 首先是这个导航的基本结构：

<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-header"
      mode="horizontal"
      @select="handleSelect"
    
    >
      <!-- <span style="width: 50px;"></span> -->
      <el-menu-item index="1">
        <span>
           <img
             style="width: 50px;height: 50px"
             src="../../public/favicon.ico"
           >
        </span>
      </el-menu-item>


      <el-menu-item index="2">
        <template #title>社区</template>
      </el-menu-item>

      <el-menu-item index="3">
        <template #title>说说</template>
      </el-menu-item>

      <div class="h-search">
        <el-autocomplete
            style="height: 50px; width: 350px;margin-top: 12px;"
            v-model="state1"
            :fetch-suggestions="querySearch"
            clearable
            placeholder="探索社区"
            @select="handleSelect"
            />
        <el-button style="margin-top: 12px;margin-left: 5px;" :icon="Search" circle />
      </div>

      <div class="h-show">
        <div class="custom-loader"></div>
      </div>

      <el-sub-menu index="4">
        <template #title>
          <el-button type="primary">创作中心</el-button>
        </template>
        <div class="w-center">
          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/write.png">
            <div class="w-c-it-text">
              写文章
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/shuoshuo.png">
            <div class="w-c-it-text">
              写说说
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/chaogao.png">
            <div class="w-c-it-text">
              草稿箱
            </div>
          </div>

        </div>
      </el-sub-menu>

      <div class="message-tip">
        <el-badge :value="100" :max="10" class="item">
          <img class="message-img" src="~@/assets/image/notic.png">
        </el-badge>
      </div>

      <div class="avatar hover-rotate">
        <img class="avatar-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
      </div>

    </el-menu>
  </template>

整体用到是flex布局： 然后的话，导航最外层用到还是element-plus的导航，但是里面的css重新改了一下。 首先是间隔，为了避免改动源代码出现问题，我直接在menu里面多了一个属性：

.el-menu-header{
    gap: 20px;
    padding-left: 100px;
}

然后在这里设置： 也可以实现效果。

创作中心

在这里的话，前面几个按钮都是直接使用的组件，主要是后面这个东西。借鉴了掘金的这个操作： 这部分代码结构是这样的：

   <el-sub-menu index="4">
        <template #title>
          <el-button type="primary">创作中心</el-button>
        </template>
        <div class="w-center">
          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/write.png">
            <div class="w-c-it-text">
              写文章
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/shuoshuo.png">
            <div class="w-c-it-text">
              写说说
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/chaogao.png">
            <div class="w-c-it-text">
              草稿箱
            </div>
          </div>

        </div>
      </el-sub-menu>

直接这样写，就可以实现那种自定义的效果。 那么css代码是这样的：

.w-c-it-img{
  margin-top: 10px;
  width: 40%;
  height: 40px;
}

.w-c-it-text{
  margin-top: 10px;
  width: 100%;
  height: 30px;
  font-size: 14px;
  text-align: center;
}
.w-c-item:hover{
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  -moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}
.w-c-item{
  cursor: pointer;
  margin-top: 20px;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.w-center{
  border-radius: 30px;
  height: 120px;
  display: flex;
  padding-left: 60px;
  gap: 20px;
  width: 350px;
}

移动小球

这玩意其实就是这个： 这玩意会动。其实就是用来占位置的，实在是没有啥功能了。留个空，反正也是微服务架构，后面上个功能也好办。

  <div class="h-show">
        <div class="custom-loader"></div>
      </div>

.custom-loader {
  margin-top: 12px;
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #E4E4ED;
  position: relative;
  overflow: hidden;
}

.custom-loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: #2898dd;
  box-shadow: -10px 0 12px 3px #83daf1;
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: ct4 1s infinite linear;
}

@keyframes ct4 {
  100% {left: calc(100% + 20px)}
}

消息提示

这个消息提示和头像是类似的，就一起说了。其实原来我一直用错了，就是那个消息提示显示的个数，原来做的时候忙个数老是和图标有很大间距。因为原来一直套用的是el-button 这个玩意样式不好改，于是直接在div上面加。

 <div class="message-tip">
        <el-badge :value="100" :max="10" class="item">
          <img class="message-img" src="~@/assets/image/notic.png">
        </el-badge>
</div>

.message-img{
  cursor: pointer;
  width: 25px;
  height: 30px;
}

.message-img:hover{
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
  -moz-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
  box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
}

.message-tip{
  margin-top: 12px;
  width: 30px;
}

完整代码

okey,接下来是完整代码：

<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-header"
      mode="horizontal"
      @select="handleSelect"
    
    >
      <!-- <span style="width: 50px;"></span> -->
      <el-menu-item index="1">
        <span>
           <img
             style="width: 50px;height: 50px"
             src="../../public/favicon.ico"
           >
        </span>
      </el-menu-item>


      <el-menu-item index="2">
        <template #title>社区</template>
      </el-menu-item>

      <el-menu-item index="3">
        <template #title>说说</template>
      </el-menu-item>

      <div class="h-search">
        <el-autocomplete
            style="height: 50px; width: 350px;margin-top: 12px;"
            v-model="state1"
            :fetch-suggestions="querySearch"
            clearable
            placeholder="探索社区"
            @select="handleSelect"
            />
        <el-button style="margin-top: 12px;margin-left: 5px;" :icon="Search" circle />
      </div>

      <div class="h-show">
        <div class="custom-loader"></div>
      </div>

      <el-sub-menu index="4">
        <template #title>
          <el-button type="primary">创作中心</el-button>
        </template>
        <div class="w-center">
          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/write.png">
            <div class="w-c-it-text">
              写文章
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/shuoshuo.png">
            <div class="w-c-it-text">
              写说说
            </div>
          </div>

          <div class="w-c-item">
            <img class="w-c-it-img" src="~@/assets/image/chaogao.png">
            <div class="w-c-it-text">
              草稿箱
            </div>
          </div>

        </div>
      </el-sub-menu>

      <div class="message-tip">
        <el-badge :value="100" :max="10" class="item">
          <img class="message-img" src="~@/assets/image/notic.png">
        </el-badge>
      </div>

      <div class="avatar hover-rotate">
        <img class="avatar-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
      </div>

    </el-menu>
  </template>


<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import {Search} from '@element-plus/icons-vue'


const activeIndex = ref('1')
const state1 = ref('')

interface RestaurantItem {
  value: string
  link: string
}
const restaurants = ref<RestaurantItem[]>([])

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}



const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

onMounted(() => {
  restaurants.value = loadAll()
})
</script>


<style scoped>

.avatar{
  cursor: pointer;
  margin-left: 60px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
}

.hover-rotate {
  transition: transform 0.5s ease-in-out;
}

.hover-rotate:hover {
  transform: rotate(360deg);
}

.avatar-img{
  border-radius: 100px;
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
.message-img{
  cursor: pointer;
  width: 25px;
  height: 30px;
}

.message-img:hover{
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
  -moz-box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
  box-shadow: 0px 0px 24px 6px rgba(5,143,235,1);
}

.message-tip{
  margin-top: 12px;
  width: 30px;
}
.w-c-it-img{
  margin-top: 10px;
  width: 40%;
  height: 40px;
}

.w-c-it-text{
  margin-top: 10px;
  width: 100%;
  height: 30px;
  font-size: 14px;
  text-align: center;
}
.w-c-item:hover{
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  -moz-box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
  box-shadow: 5px 5px 50px 0px rgba(105,170,214,1);
}
.w-c-item{
  cursor: pointer;
  margin-top: 20px;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.w-center{
  border-radius: 30px;
  height: 120px;
  display: flex;
  padding-left: 60px;
  gap: 20px;
  width: 350px;
}
.custom-loader {
  margin-top: 12px;
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #E4E4ED;
  position: relative;
  overflow: hidden;
}

.custom-loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: #2898dd;
  box-shadow: -10px 0 12px 3px #83daf1;
  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
  animation: ct4 1s infinite linear;
}

@keyframes ct4 {
  100% {left: calc(100% + 20px)}
}
.h-search{
    display: flex;
    
}
.el-menu-header{
    gap: 20px;
    padding-left: 100px;
}
</style>
  

后面多写写特效啥的，锻炼锻炼美感，可惜的就是，先前写的前端主页用不了了。可恶，没办法风格不合适。

真的有一说一，CSDN的页面设计实在是有点那啥，先前whitehole的页面设计就是照着csdn来的，写道后面发现不行，改成掘金的一些风格，结果有些地方不伦不类，写到后面有点像知乎页面。这次的话，就直接照着掘金借鉴了（狗头）