Skip to content

Y
yq-ui
Commit 84acaebc by zhaopanyu
Options

zpy

parent bef3646d
Showing with 38 additions and 67 deletions
src/views/zyyq/index.vue
...@@ -19,9 +19,8 @@ ...@@ -19,9 +19,8 @@
<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.name)"> @click.native="setActiveOuter(outerItem.cplx)">
<template #title> <template #title>
<img src="../../assets/images/tag.png" alt=""> <img src="../../assets/images/tag.png" alt="">
<span <span
...@@ -30,10 +29,9 @@ ...@@ -30,10 +29,9 @@
</span> </span>
</template> </template>
<!-- 根据 cplx 字段判断使用哪个子菜单 --> <!-- 第二级菜单 -->
<template v-if="outerItem.cplx === '产品类'"> <el-submenu v-if="outerItem.cplx === '产品'" v-for="innerItem in outerItem.cpChildren" :key="innerItem.id"
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px" :index="innerItem.px" :class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)"> @click.native="setActiveInner(innerItem.mc)">
<template #title> <template #title>
<span <span
...@@ -44,20 +42,11 @@ ...@@ -44,20 +42,11 @@
<!-- 第三级菜单 --> <!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.children2" :key="content.id" <el-menu-item v-for="content in innerItem.children2" :key="content.id"
:index="innerItem.name + '-' + content.mc" :index="innerItem.name + '-' + content.mc" @click.native="setActiveInner(innerItem.name, content.mc)"
@click.native="setActiveInner(innerItem.name, content.mc)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }"> :class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<!-- 蓝色圆点 --> <!-- 蓝色圆点 -->
<span :style="{ <span
width: '6px', :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
marginRight: '10px'
}"></span>
<!-- 第三级菜单文本 --> <!-- 第三级菜单文本 -->
<span :style="{ <span :style="{
fontFamily: 'PingFang SC', fontFamily: 'PingFang SC',
...@@ -72,56 +61,27 @@ ...@@ -72,56 +61,27 @@
</span> </span>
</el-menu-item> </el-menu-item>
</el-submenu> </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" <el-menu-item v-if="outerItem.cplx === '服务类'" v-for="service in outerItem.fwlChildren" :key="service.id"
:index="innerItem.name + '-' + content.mc" :index="service.mc" @click.native="setActiveInner(outerItem.mc, service.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="{ <span :style="{
fontFamily: 'PingFang SC', fontFamily: 'PingFang SC',
fontWeight: '500', fontWeight: '500',
fontSize: '15px', fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222', color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none', textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent', textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0' textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0'
}"> }">
{{ content.mc }} {{ service.mc }}
</span> </span>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</template>
</el-submenu>
</template>
</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();
},
methods: {
setDefaultActiveMenu() {
if (this.collapseDataOuter.length > 0) { if (this.collapseDataOuter.length > 0) {
this.activeNameOuter = this.collapseDataOuter[0].name; // 默认选中第一个外层选项 const firstOuterItem = this.collapseDataOuter.find(item => item.mc === "软硬件产品"); // 找到目标外层菜单项
const firstInner = this.collapseDataOuter[0].collapseData[0]; if (firstOuterItem) {
if (firstInner) { const firstInnerItem = firstOuterItem.cpChildren.find(inner => inner.name === "智能化办公"); // 找到目标内层菜单项
this.activeNameInner = firstInner.name + '-' + firstInner.contents[0]; // 默认选中第一个内层选项 if (firstInnerItem && firstInnerItem.children2.length > 0) {
this.activeNameInner = `${firstInnerItem.name}-${firstInnerItem.children2[0].mc}`; // 默认选中第一个内容
}
} }
console.log('默认选中项:', this.activeNameInner); // 检查默认选中项
} }
}, },
methods: { isInnerActive(name) {
setActiveOuter(name) { // 判断内层菜单项激活状态的逻辑
this.activeNameOuter = 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