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 @@
<el-menu :default-active="activeNameInner" class="product-menu" :background-color="'transparent'"
:text-color="'#333'" :active-text-color="'#409EFF'">
<!-- 外层菜单 -->
<template>
<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>
<img src="../../assets/images/tag.png" alt="">
<span
......@@ -30,10 +29,9 @@
</span>
</template>
<!-- 根据 cplx 字段判断使用哪个子菜单 -->
<template v-if="outerItem.cplx === '产品类'">
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
<!-- 第二级菜单 -->
<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>
<span
......@@ -44,20 +42,11 @@
<!-- 第三级菜单 -->
<el-menu-item v-for="content in innerItem.children2" :key="content.id"
:index="innerItem.name + '-' + content.mc"
@click.native="setActiveInner(innerItem.name, content.mc)"
: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="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
<!-- 第三级菜单文本 -->
<span :style="{
fontFamily: 'PingFang SC',
......@@ -72,56 +61,27 @@
</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>
<!-- 第三级菜单文本 -->
<!-- 服务类的第二级菜单 -->
<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 === 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'
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'
}">
{{ content.mc }}
{{ service.mc }}
</span>
</el-menu-item>
</el-submenu>
</template>
</el-submenu>
</template>
</el-menu>
</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;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
......@@ -160,7 +120,7 @@
</el-col>
<!-- 外层折叠项 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;">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
<el-tab-pane label="团队介绍" name="first">
......@@ -208,7 +168,6 @@ export default {
tdjs: '',
fwts: '',
fwal: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [],
......@@ -261,18 +220,28 @@ export default {
computed: {},
mounted() {
this.getList();
// 设置默认选中的第一级和第二级
this.setDefaultActiveMenu();
},
methods: {
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]; // 默认选中第一个内层选项
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); // 检查默认选中项
}
},
methods: {
setActiveOuter(name) {
this.activeNameOuter = name;
isInnerActive(name) {
// 判断内层菜单项激活状态的逻辑
return this.activeNameInner.startsWith(name);
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log(this.activeNameOuter, ' this.activeNameOuter');
},
setActiveInner(innerName, content = '') {
......
vue.config.js
......@@ -36,7 +36,9 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// 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,
pathRewrite: {
["^" + 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