Vue 菜单导航栏，轮播图

news/2025/2/12 17:58:34/

导航菜单栏结构和样式代码实现

一级导航栏
在这里插入图片描述

views/HomeView.vue

<template><div><Shortcut></Shortcut><Header></Header><div class="inner"><Navigation></Navigation></div><div>我是主页</div></div>
</template><script setup>
import Shortcut from "@/components/common/Shortcut.vue"
import Header from "@/components/home/Header"
import Navigation from "@/components/home/Navigation"</script><style lang="less" scoped>.inner{background-color: #f4f4f4;}
</style>

src/components/home/navigation.vue

<template><div class="nav "><div class="main clearfix"><div class="menu fl"><LeftMenu></LeftMenu></div><div class="banner fl">我是banner</div></div></div>
</template><style lang="less" scoped>
.nav {.main {padding-top: 15px;width: var(--content-width);margin: 0 auto;}
}
</style><script setup>
import LeftMenu from "./LeftMenu.vue";
</script>

src/components/home/leftmenu.vue

<template><div class="left-menu"><ul><li><span><a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span><a href="">数码</a></span></li></ul><div class="second-item">我是二级菜单</div></div>
</template><style scoped lang="less">
@red: #e2231a;
.left-menu {// text-align: left;// float: left;background-color: #fff;width: 190px;height: 470px;ul {padding-top: 15px;li {padding-top: 5px;padding-bottom: 5px;padding-left: 15px;&:hover {cursor: pointer;background-color: #d9d9d9;}a {font-size: 14px;color: #333;&:hover {cursor: pointer;color: @red;}}}}
}
</style>

在这里插入图片描述

导航菜单栏接口数据渲染

数据库存储格式
在这里插入图片描述
在这里插入图片描述

let leftMenuData=ref([])
onMounted(()=>{getMainMenu().then(res=>{console.log(res.data)init_menu_data(res.data)})
})

在这里插入图片描述
根据main_menu_id判断菜单名在哪一行

const init_menu_data=(menuData=>{for(let i in menuData){let jsonData = JSON.parse(menuData[i])leftMenuData.value.push(jsonData)       }console.log(leftMenuData)
})

在这里插入图片描述

//  接口返回数据需要进行加工，基本结构应该是[{index:1,data:[{name,url},{},{}]}]const showMainData=computed(()=>{let resultList = [];let result = {"index":"","data":[]};for(let i in leftMenuData.value){let id = leftMenuData.value[i].main_menu_id;let data = {"name":leftMenuData.value[i].main_menu_name};if(result["index"] != null && id == result["index"]){result["data"].push(data);}else{result = {"index":"","data":[]};result["index"] = id;result["data"].push(data);resultList.push(result);}}return resultList;})

在这里插入图片描述

完整代码

<template><div class="left-menu"><ul><li v-for="(item,index) in showMainData" :key="index"><span v-for="(d,i) in item.data" :key="i"><a href="">{{d.name}}</a><!-- 删除多余的斜线 --><span v-if="item.data.length-i-1">/</span></span></li></ul><div class="second-item">我是二级菜单</div></div>{{showMainData}}
</template><style scoped lang="less">
@red: #e2231a;
.left-menu {// text-align: left;// float: left;background-color: #fff;width: 190px;height: 470px;ul {padding-top: 15px;li {padding-top: 5px;padding-bottom: 5px;padding-left: 15px;&:hover {cursor: pointer;background-color: #d9d9d9;}a {font-size: 14px;color: #333;&:hover {cursor: pointer;color: @red;}}}}
}
</style><script setup>
import {getMainMenu} from "@/network/home.js"
import {onMounted, ref,computed} from "vue"let leftMenuData=ref([])
onMounted(()=>{getMainMenu().then(res=>{init_menu_data(res.data)})
})const init_menu_data=(menuData=>{for(let i in menuData){let jsonData = JSON.parse(menuData[i])leftMenuData.value.push(jsonData)       }
})//  接口返回数据需要进行加工，基本结构应该是[{index:1,data:[{name,url},{},{}]}]const showMainData=computed(()=>{let resultList = [];let result = {"index":"","data":[]};for(let i in leftMenuData.value){let id = leftMenuData.value[i].main_menu_id;let data = {"name":leftMenuData.value[i].main_menu_name};if(result["index"] != null && id == result["index"]){result["data"].push(data);}else{result = {"index":"","data":[]};result["index"] = id;result["data"].push(data);resultList.push(result);}}return resultList;})
</script>

在这里插入图片描述

二级菜单栏的显示与隐藏

需要把二级菜单调到右边覆盖banner
home/leftMenu.vue
在这里插入图片描述
在这里插入图片描述

home/SecondMenu.vue
接收一级菜单传递过来的id

<template><div>我是二级菜单xxxxxxxxxxxxxxxxxx {{showSecondMenuIndex}}</div>
</template><script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"])
</script>

鼠标移动会向二级菜单传递一级菜单的ID
在这里插入图片描述

二级菜单栏的代码开发骨架结构搭建

在这里插入图片描述
home/SecondMenu.vue

<template><div class="second"><div class="menu-content"><div class="menu-title"><span><a href=""> 家电馆<img src="@/assets/images/menu/arrows-white.png" alt="" /></a></span></div><div class="menu-detail"><div class="menu-detail-item"><span><span><span class="menu-detail-tit"><a href="">电视<img src="@/assets/images/menu/arrows-black.png" alt="" /></a></span><span class="menu-detail-data"><a href="">全面屏电视</a></span></span></span></div></div></div></div>
</template><script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
</script><style lang="less" scoped>
</style>

二级菜单栏的代码开发页面样式渲染

<template><div class="second"><div class="menu-content"><div class="menu-title"><span><a href="">家电馆<img src="@/assets/images/menu/arrows-white.png" alt="" /></a></span></div><div class="menu-detail"><div class="menu-detail-item"><span><span class="menu-detail-tit"><a href="">电视<img src="@/assets/images/menu/arrows-black.png" alt="" /></a></span><span class="menu-detail-data"><a href="">全面屏电视</a></span></span></div></div></div></div>
</template><script setup>
const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
</script><style lang="less" scoped>
@red: #e2231a;
.second {width: 1000px;background-color: #fff;border: 2px solid #e9e9e9;padding: 20px;.menu-content {margin-right: 900px;.menu-title {a {display: inline-block;background-color: black;color: white;margin-right: 10px;height: 25px;line-height: 25px;padding: 0 10px;img {height: 18px;}&:hover {background-color: @red;}}}.menu-detail {margin-top: 15px;.menu-detail-item {.menu-detail-tit {a {font-weight: 700;img {height: 18px;}&:hover {color: @red;}}}.menu-detail-data {a {margin-left: 20px;&:hover {color: @red;}}}}}}
}
</style>

二级菜单栏的接口数据渲染

home/secondMenu.vue

<template><div class="second"><div class="menu-content" v-for="(item,index) in showSubMenuData" :key="index"><div class="menu-title"><span v-for="(d,i) in item.data" :key="i"><a href="" v-show="d.type==='channel'">{{d.name}}<img src="@/assets/images/menu/arrows-white.png" alt="" /></a></span></div><div class="menu-detail"><div class="menu-detail-item"><span v-for="(d,i) in item.data" :key="i"><span class="menu-detail-tit" v-if="d.type==='dt'"><a href="">{{d.name}}<img src="@/assets/images/menu/arrows-black.png" alt="" /></a></span><span class="menu-detail-data" v-else-if="d.type==='dd'"><a href="">{{d.name}}</a></span></span></div></div></div></div>
</template><script setup>
import { getSecondMenu } from "@/network/home.js";
import { ref, watch,computed } from "vue";const showSecondMenuIndex = defineProps(["showSecondMenuIndex"]);
watch(showSecondMenuIndex, (newVlue, oldValue) => {getSecondMenu(newVlue.showSecondMenuIndex).then((res) => {initMenuData(res.data);});
});let subMenuData = ref([]);
const initMenuData = (menuData) => {// 每次初始化的时候  必须把subMenuData设置为空 不然数据会累加subMenuData.value = [];for (let i in menuData) {let jsonData = JSON.parse(menuData[i]);subMenuData.value.push(jsonData);}
};const showSubMenuData = computed(() => {let resultList = [];let result = { index: "", data: [] };for (let i in subMenuData.value) {let id = subMenuData.value[i].sub_menu_id;let data = {name: subMenuData.value[i].sub_menu_name,type: subMenuData.value[i].sub_menu_type,};if (result["index"] != null && id == result["index"]) {result["data"].push(data);} else {result = { index: "", data: [] };result["index"] = id;result["data"].push(data);resultList.push(result);}}return resultList;
});
</script><style lang="less" scoped>
@red: #e2231a;
.second {width: 1000px;background-color: #fff;border: 2px solid #e9e9e9;padding: 20px;.menu-content {// margin-right: 80px;.menu-title {a {display: inline-block;background-color: black;color: white;margin-right: 10px;height: 25px;line-height: 25px;padding: 0 10px;img {height: 18px;}&:hover {background-color: @red;}}}.menu-detail {margin-top: 15px;.menu-detail-item {.menu-detail-tit {a {font-weight: 700;img {height: 18px;}&:hover {color: @red;}}}.menu-detail-data {a {margin-left: 20px;&:hover {color: @red;}}}}}}
}
</style>

在这里插入图片描述
在这里插入图片描述

首页 Banner 图效果开发

home/banner

<template><div class="block" style="width: 1000px;"><span class="demonstration"></span><el-carousel trigger="click" height="470px"><el-carousel-item v-for="item in images" :key="item"><img :src="item" alt=""></el-carousel-item></el-carousel></div>
</template><script setup>
import banner1 from "@/assets/images/banner/banner1.png";
import banner2 from "@/assets/images/banner/banner2.png";
import banner3 from "@/assets/images/banner/banner3.png";
import banner4 from "@/assets/images/banner/banner4.png";
import banner5 from "@/assets/images/banner/banner5.png";
import banner6 from "@/assets/images/banner/banner6.png";
import { ref } from "vue";const images=ref([banner1,banner2,banner3,banner4,banner5,banner6])</script><style scoped>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 150px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n + 1) {background-color: #d3dce6;}
</style>

home/Navigation.vue


<template><div class="nav "><div class="main clearfix"><div class="menu fl"><LeftMenu></LeftMenu></div><div class="banner fl"><Banner></Banner></div></div></div>
</template><style lang="less" scoped>
.nav {.main {padding-top: 15px;width: var(--content-width);margin: 0 auto;}
}
</style><script setup>
import LeftMenu from "./LeftMenu.vue";
import Banner from "./Banner.vue";
</script>

http://www.ppmy.cn/news/1186180.html

相关文章

mycat2.X读写分离

mycat2.X读写分离

一、数据库中间件介绍 二、下载安装包 2.1下载地址： 下载两个一个是mycat程序，一个是mycat的驱动 http://dl.mycat.org.cn/2.0/install-template/mycat2-install-template-1.20.zip http://dl.mycat.org.cn/2.0/1.21-release/mycat2-1.21-release-jar-with-dependencies-2…
阅读更多...
请教设计师全屋定制有哪些门道

请教设计师全屋定制有哪些门道

⬛装修很难绕开全屋定制&#xff0c;设计师来告诉你有哪些前期就要留意的事项&#x1f320;⬛全屋定制板材&#x1f4da;常用的板材&#xff1a;颗粒板、密度板、生态板、多层板、欧松板、实木指接板’对于家装来说&#xff0c;建议大家选大品牌和环保达标的。常用板材的厚度&a…
阅读更多...
微信定时发圈，快人一步不落索

微信定时发圈，快人一步不落索

现在的社交媒体运营已经成为了私域流量获取的重要手段&#xff0c;而微信作为最大的社交平台之一&#xff0c;更是吸引了众多使用者。但是&#xff0c;你是否曾经感叹过每天手动发朋友圈的繁琐&#xff1f;是否希望能够事先设置好定时发送的功能&#xff0c;让你的朋友圈自动更…
阅读更多...
SAP SPAD新建打印纸张

SAP SPAD新建打印纸张

SAP SPAD新建打印纸张 1.事务代码SPAD 2.完全管理&#xff0d;设备类型&#xff0d;页格式-显示(创建格式页) 3.按标准A4纸张为模板参考创建。同一个纸张纵向/横向各创建1次(创建格式页) 4.完全管理&#xff0d;设备类型&#xff0d;格式类型-显示(创建格式类型&#xff0…
阅读更多...
第四章认识Node.js模块化开发

第四章认识Node.js模块化开发

Node.js系统模块 续上一篇文章第三章认识Node.js模块化开发-CSDN博客&#xff0c;这次继续来认识和总结以下node的常用模块开发 Node.js系统模块是指Node.js自带的一些模块&#xff0c;这些模块可以直接在Node.js中使用&#xff0c;无需安装其他包。以下是常用的Node.js系统模块…
阅读更多...
实用篇-Gateway网关

实用篇-Gateway网关

前面学的Nacos是对内负载均衡&#xff0c;现在学的Gateway网关是对外负载均衡和校验&#xff0c;不冲突 一、网关的作用 网关功能: 1、身份认证和权限校验 2、服务路由、负载均衡 3、请求限流 在SpringCloud中有两个组件可以实现网关&#xff0c;分别是gateway、zuul Zu…
阅读更多...
paddle模型定义

paddle模型定义

import paddle import paddle.nn as nn # #方法1、内置的模型 # print(飞桨框架内置模型&#xff1a;, paddle.vision.models.__all__) # # 模型组网并初始化网络 # lenet paddle.vision.models.LeNet(num_classes10) # print(type(lenet)) # # 可视化模型组网结构和参数 # pa…
阅读更多...
TiDB x 汉口银行丨分布式数据库应用实践

TiDB x 汉口银行丨分布式数据库应用实践

汉口银行是一家城市商业银行&#xff0c;近年来专注科技金融、民生金融等领域。在数据库国产化改造中&#xff0c;汉口银行引入了 TiDB 数据库&#xff0c;并将其应用在重要业务系统&#xff1a;头寸系统中&#xff0c;实现了一栈式的数据服务&#xff0c;同时满足了高并发、低…
阅读更多...
最新文章

Copyright @ 2022~2023