Skip to content

Y
yq-ui
Commit 84acaebc by zhaopanyu
Options

zpy

parent bef3646d
Showing with 644 additions and 107 deletions
src/views/zyyq/index copy 2.vue 0 → 100644
<template>
<div class="container">
<el-row style="margin: 150px auto 100px ;">
<img src="../../assets/images/background.png" alt="" style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover; */
" />
</el-row>
<el-row class="content" style="background-color: #f5f8fe;">
<el-col :span="6" style="padding: 20px; border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 -->
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
@click.native="setActiveOuter(outerItem.name)">
<template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.mc }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-for="innerItem in outerItem.cpChildren
" :key="innerItem.id" :index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.mc }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.children2" :key="content.id"
:index="innerItem.name + '-' + content.mc" @click.native="setActiveInner(innerItem.name, content.mc)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<!-- 蓝色圆点 -->
<span :style="{
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
}">
{{ content.mc }}
</span>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-col>
<!-- 显示选项卡的内容 -->
<el-col v-if="activeNameOuter === 'outer1'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
<el-card style="width: 100%; height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
<!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === 'outer2'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="团队介绍" name="first">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${tdjs}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwts}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; min-height: 712px;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwal}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
import { getListcx, getListdt, } from "@/api/sy.js";
export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
tdjs: '',
fwts: '',
fwal: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [],
// collapseDataOuter: [
// {
// name: "outer1",
// title: "外层折叠项 1",
// collapseData: [
// {
// name: "1",
// title: "智能化办公",
// contents: ["大模型", "会议系统", "数字员工"],
// },
// {
// name: "2",
// title: "生产化信息",
// contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
// },
// ],
// },
// {
// name: "outer2",
// title: "外层折叠项 2",
// collapseData: [
// {
// name: "3",
// title: "基础设施",
// contents: ["999", "777", "666"],
// },
// {
// name: "4",
// title: "其他",
// contents: ["内容1", "内容2", "内容3"],
// },
// ],
// },
// ],
// -------------
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
form: {
},
};
},
computed: {},
mounted() {
this.getList();
// 设置默认选中的第一级和第二级
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
},
methods: {
setActiveOuter(name) {
this.activeNameOuter = name;
},
setActiveInner(innerName, content = '') {
if (content) {
this.activeNameInner = innerName + '-' + content;
console.log('activeNameInner updated to:', this.activeNameInner); // 调试打印
}
},
isInnerActive(innerName) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态
},
handleChange(val) {
console.log(val);
},
handleClick(tab, event) {
this.activeName = tab.name; // 确保更新activeName
console.log(this.activeName, ' this.activeName');
},
getList() {
getListcx().then(res => {
console.log('res', res)
this.collapseDataOuter = res.data;
// this.cpjj = res.data.bmjjwh
// this.gntd = res.data.zzld
// this.yycx = res.data.sjglry
// this.yfjs = res.data.sjglry
})
},
},
};
</script>
<style scoped lang="scss">
::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important;
}
::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */
}
::v-deep.el-submenu .el-menu-item {
height: 39px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
}
::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff;
height: 46px;
}
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px;
height: 43px;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: 500;
color: #303133;
position: relative;
width: 120px;
text-align: center;
}
::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
color: #ff0000;
/* 设置字体颜色 */
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px none;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb;
color: black;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb;
color: black;
;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb;
color: black;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb;
color: black;
border-radius: 0 10px 0 0;
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
// .text-align {
// display: flex;
// justify-content: flex-end;
// margin: 0px 10px;
// }
// .text {
// margin-left: auto;
// margin: 3px 15px;
// }
// .row {
// display: flex;
// flex-direction: row;
// align-items: inherit;
// justify-content: center;
// margin: 20px 0 20px -30px;
// }
// .box {
// position: relative;
// top: -20px;
// left: 0;
// margin-bottom: -20px;
// width: 100%;
// min-height: 102vh;
// background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
// background-repeat: no-repeat;
// background-position: left top;
// background-color: #f55202;
// }
.container {
overflow-y: auto;
height: 1080px;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 60%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
.content {
margin: 20px auto;
max-width: 70%;
min-height: calc(100vh - 420px);
padding: 20px;
background: #F5F8FE;
border-radius: 10px 10px 0px 0px;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/zyyq/index.vue
...@@ -19,109 +19,69 @@ ...@@ -19,109 +19,69 @@
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'" <el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'"> :text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 --> <!-- 外层菜单 -->
<template> <el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" @click.native="setActiveOuter(outerItem.cplx)">
@click.native="setActiveOuter(outerItem.name)"> <template #title>
<img src="../../assets/images/tag.png" alt="">
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
{{ outerItem.mc }}
</span>
</template>
<!-- 第二级菜单 -->
<el-submenu v-if="outerItem.cplx === '产品'" v-for="innerItem in outerItem.cpChildren" :key="innerItem.id"
:index="innerItem.px" :class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)">
<template #title> <template #title>
<img src="../../assets/images/tag.png" alt="">
<span <span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ outerItem.mc }} {{ innerItem.mc }}
</span> </span>
</template> </template>
<!-- 根据 cplx 字段判断使用哪个子菜单 --> <!-- 第三级菜单 -->
<template v-if="outerItem.cplx === '产品类'"> <el-menu-item v-for="content in innerItem.children2" :key="content.id"
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px" :index="innerItem.name + '-' + content.mc" @click.native="setActiveInner(innerItem.name, content.mc)"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" :class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
@click.native="setActiveInner(innerItem.mc)"> <!-- 蓝色圆点 -->
<template #title> <span
<span :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;"> <!-- 第三级菜单文本 -->
{{ innerItem.mc }} <span :style="{
</span> fontFamily: 'PingFang SC',
</template> fontWeight: '500',
fontSize: '15px',
<!-- 第三级菜单 --> color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
<el-menu-item v-for="content in innerItem.children2" :key="content.id" textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
:index="innerItem.name + '-' + content.mc" textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
@click.native="setActiveInner(innerItem.name, content.mc)" textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }"> }">
{{ content.mc }}
<!-- 蓝色圆点 --> </span>
<span :style="{ </el-menu-item>
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
}">
{{ content.mc }}
</span>
</el-menu-item>
</el-submenu>
</template>
<template v-else-if="outerItem.cplx === '服务类'">
<el-submenu v-for="innerItem in outerItem.fwlChildren" :key="innerItem.id" :index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)">
<template #title>
<span
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
{{ innerItem.mc }}
</span>
</template>
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.children2" :key="content.id"
:index="innerItem.name + '-' + content.mc"
@click.native="setActiveInner(innerItem.name, content.mc)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<!-- 蓝色圆点 -->
<span :style="{
width: '6px',
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
}">
{{ content.mc }}
</span>
</el-menu-item>
</el-submenu>
</template>
</el-submenu> </el-submenu>
</template>
<!-- 服务类的第二级菜单 -->
<el-menu-item v-if="outerItem.cplx === '服务类'" v-for="service in outerItem.fwlChildren" :key="service.id"
:index="service.mc" @click.native="setActiveInner(outerItem.mc, service.mc)">
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0'
}">
{{ service.mc }}
</span>
</el-menu-item>
</el-submenu>
</el-menu> </el-menu>
</el-col> </el-col>
<!-- 显示选项卡的内容 --> <!-- 显示选项卡的内容 -->
<el-col v-if="activeNameOuter === 'outer1'" :span="18" <el-col v-if="activeNameOuter === '产品'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }"> <el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
...@@ -160,7 +120,7 @@ ...@@ -160,7 +120,7 @@
</el-col> </el-col>
<!-- 外层折叠项 2 选中的内容 --> <!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === 'outer2'" :span="18" <el-col v-else-if="activeNameOuter === '服务类'" :span="18"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="团队介绍" name="first"> <el-tab-pane label="团队介绍" name="first">
...@@ -208,7 +168,6 @@ export default { ...@@ -208,7 +168,6 @@ export default {
tdjs: '', tdjs: '',
fwts: '', fwts: '',
fwal: '', fwal: '',
activeNameOuter: "", // 默认选中的第一级选项 activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项 activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [], collapseDataOuter: [],
...@@ -261,18 +220,28 @@ export default { ...@@ -261,18 +220,28 @@ export default {
computed: {}, computed: {},
mounted() { mounted() {
this.getList(); this.getList();
// 设置默认选中的第一级和第二级 this.setDefaultActiveMenu();
if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项
const firstInner = this.collapseDataOuter[0].collapseData[0];
if (firstInner) {
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项
}
}
}, },
methods: { methods: {
setActiveOuter(name) { setDefaultActiveMenu() {
this.activeNameOuter = name; if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter.find(item => item.mc === "软硬件产品"); // 找到目标外层菜单项
if (firstOuterItem) {
const firstInnerItem = firstOuterItem.cpChildren.find(inner => inner.name === "智能化办公"); // 找到目标内层菜单项
if (firstInnerItem && firstInnerItem.children2.length > 0) {
this.activeNameInner = `${firstInnerItem.name}-${firstInnerItem.children2[0].mc}`; // 默认选中第一个内容
}
}
console.log('默认选中项:', this.activeNameInner); // 检查默认选中项
}
},
isInnerActive(name) {
// 判断内层菜单项激活状态的逻辑
return this.activeNameInner.startsWith(name);
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log(this.activeNameOuter, ' this.activeNameOuter');
}, },
setActiveInner(innerName, content = '') { setActiveInner(innerName, content = '') {
......
vue.config.js
...@@ -36,7 +36,9 @@ module.exports = { ...@@ -36,7 +36,9 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8080`, // target: `http://localhost:8080`,
target: `http://192.168.31.190:8899`, // target: `http://192.168.31.190:8899`,
target: `http://192.168.31.95:8081`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: "", ["^" + process.env.VUE_APP_BASE_API]: "",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment