Skip to content

Y
yq-ui
Commit 9d77ee7b by “zhaodan”
Options

zd

parent d0ed1596
Showing with 1184 additions and 951 deletions
src/views/zyyqsj/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-row style="margin: 0px auto 150px ;"> <el-row style="margin: 0px auto 150px">
<div class="bjt"> <div class="bjt">
<img src="../../assets/images/background.png" alt="" style=" <img
height: 111px; src="../../assets/images/background.png"
width: 877px; alt=""
/* background-size: cover; style="
height: 111px;
width: 877px;
/* background-size: cover;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover; */ object-fit: cover; */
" /> "
</div> />
</el-row> </div>
<el-row class="content" style="background-color: #f5f8fe;"> </el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" <el-row class="content" style="background-color: #f5f8fe; height: 100vh">
style="padding: 20px; border-radius: 10px; height: auto; background-color: #f5f8fe;"> <el-col
<el-menu v-if="activeNameOuter === '产品'" :default-active="activeNameInner" class="product-menu" :xs="24"
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'" :sm="24"
:default-openeds="defaultOpeneds"> :md="24"
<!-- 外层菜单 --> :lg="24"
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" :xl="24"
@click.native="setActiveOuter(outerItem.cplx)"> style="
<template #title> padding: 20px;
<img src="../../assets/images/tag.png" alt=""> border-radius: 10px;
<span height: auto;
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> background-color: #f5f8fe;
{{ outerItem.mc }} "
</span> >
</template> <el-menu
v-if="activeNameOuter === '产品'"
<!-- 第二级菜单 --> :default-active="activeNameInner"
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px" class="product-menu"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" :background-color="'transparent'"
@click.native="setActiveInner(innerItem.mc)"> :text-color="'#333'"
<template #title> :active-text-color="'#409EFF'"
<span :default-openeds="defaultOpeneds"
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;"> >
{{ innerItem.mc }} <!-- 外层菜单 -->
</span> <el-submenu
</template> v-for="outerItem in collapseDataOuter"
:key="outerItem.px"
<!-- 第三级菜单 --> :index="outerItem.px"
<el-menu-item v-for="content in innerItem.children2" :key="content.id" @click.native="setActiveOuter(outerItem.cplx)"
:index="innerItem.name + '-' + content.mc" >
@click.native="handleInnerClick(innerItem.name, content.mc, content.id, content.remark,)" <template #title>
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }"> <img src="../../assets/images/tag.png" alt="" />
<span <span
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span> style="
<span :style="{ font-family: 'PingFang SC';
fontFamily: 'PingFang SC', font-weight: 800;
fontWeight: '500', font-size: 23px;
fontSize: '15px', color: #222222;
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222', line-height: 40px;
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none', "
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent', >
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0' {{ outerItem.mc }}
}"> </span>
{{ content.mc }} </template>
</span>
<img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new" <!-- 第二级菜单 -->
style="width: 40px; height: 40px; margin-left: 5px; vertical-align: middle;" /> <el-submenu
</el-menu-item> v-for="innerItem in outerItem.cpChildren"
</el-submenu> :key="innerItem.id"
:index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)"
>
</el-submenu> <template #title>
</el-menu> <span
<el-menu v-if="activeNameOuter === '服务类'" :default-active="activeNameInner" class="product-menu" style="
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'" font-family: 'PingFang SC';
:default-openeds="defaultOpeneds"> font-weight: 800;
<!-- 外层菜单 --> font-size: 17px;
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" color: #222222;
@click.native="setActiveOuter(outerItem.cplx)"> line-height: 26px;
<template #title> "
<img src="../../assets/images/tag.png" alt=""> >
<span {{ innerItem.mc }}
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> </span>
{{ outerItem.mc }} </template>
</span>
</template> <!-- 第三级菜单 -->
<!-- 服务类的第二级菜单 --> <el-menu-item
<el-menu-item v-for="service in outerItem.fwlChildren" :key="service.id" :index="service.mc" v-for="content in innerItem.children2"
@click.native="handleServiceClick(outerItem.mc, service.mc, service.id, service.remark)" :key="content.id"
:class="{ 'menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc, 'service-menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc }"> :index="innerItem.name + '-' + content.mc"
<span @click.native="
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span> handleInnerClick(
<span :style="{ innerItem.name,
fontFamily: 'PingFang SC', content.mc,
fontWeight: '500', content.id,
fontSize: '15px', content.remark
color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222', )
textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none', "
textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent', :class="{
textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0' 'menu-item-active':
}"> activeNameInner === innerItem.name + '-' + content.mc,
{{ service.mc }} }"
<!-- 判断 zx 是否为 1，如果是则显示图片 --> >
<img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new" <span
style="width: 40px; height: 40px; margin-left: 5px; vertical-align: middle;" /> :style="{
</span> width: '6px',
</el-menu-item> height: '6px',
background: '#165BFF',
borderRadius: '50%',
display: 'inline-block',
</el-submenu> marginRight: '10px',
</el-menu> }"
</el-col> ></span>
<span
</el-row> :style="{
fontFamily: 'PingFang SC',
</div> 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>
<img
v-if="content.zx === '1'"
src="../../assets/images/new.png"
alt="new"
style="
width: 40px;
height: 40px;
margin-left: 5px;
vertical-align: middle;
"
/>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
<el-menu
v-if="activeNameOuter === '服务类'"
:default-active="activeNameInner"
class="product-menu"
:background-color="'transparent'"
:text-color="'#333'"
:active-text-color="'#409EFF'"
:default-openeds="defaultOpeneds"
>
<!-- 外层菜单 -->
<el-submenu
v-for="outerItem in collapseDataOuter"
:key="outerItem.px"
:index="outerItem.px"
@click.native="setActiveOuter(outerItem.cplx)"
>
<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-menu-item
v-for="service in outerItem.fwlChildren"
:key="service.id"
:index="service.mc"
@click.native="
handleServiceClick(
outerItem.mc,
service.mc,
service.id,
service.remark
)
"
:class="{
'menu-item-active':
activeNameInner === outerItem.mc + '-' + service.mc,
'service-menu-item-active':
activeNameInner === outerItem.mc + '-' + service.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 === 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 }}
<!-- 判断 zx 是否为 1，如果是则显示图片 -->
<img
v-if="service.zx === '1'"
src="../../assets/images/new.png"
alt="new"
style="
width: 40px;
height: 40px;
margin-left: 5px;
vertical-align: middle;
"
/>
</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
</el-row>
</div>
</template> </template>
<script> <script>
import { getListcx, getListdt } from "@/api/sy.js";
import { getListcx, getListdt, } from "@/api/sy.js";
export default { export default {
name: "gasDigitization", name: "gasDigitization",
// components: { footerNav }, // components: { footerNav },
data() { data() {
return { return {
remark: '', // 新增的remark属性 remark: "", // 新增的remark属性
defaultOpeneds: [],// 根据需要初始化 defaultOpeneds defaultOpeneds: [], // 根据需要初始化 defaultOpeneds
selectedId: null, // 用于存储选中项的ID selectedId: null, // 用于存储选中项的ID
cpjj: '', cpjj: "",
gntd: '', gntd: "",
yycx: '', yycx: "",
yfjs: '', yfjs: "",
tdjs: '', tdjs: "",
fwts: '', fwts: "",
fwal: '', fwal: "",
activeNameOuter: "产品", // 默认选中的第一级选项 activeNameOuter: "产品", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项 activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [], collapseDataOuter: [],
activeName: "first", activeName: "first",
name: null, name: null,
ipdz: null, ipdz: null,
yl1: null, yl1: null,
showDialog: false, // 控制对话框显示的变量 showDialog: false, // 控制对话框显示的变量
form: { form: {},
};
}, },
}; watch: {
activeNameOuter(newValue) {
console.log(newValue, "newValue");
if (newValue === "服务类") {
const selectedItem = this.collapseDataOuter.find(
(item) => item.mc === "智能化服务类"
);
if (selectedItem && selectedItem.fwlChildren.length > 0) {
const firstService = selectedItem.fwlChildren[0];
this.activeNameInner = `智能化服务类-${firstService.mc}`;
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, "Selected Service ID");
this.getListdt(this.activeServiceId);
}
} else if (newValue === "产品") {
const selectedItem = this.collapseDataOuter.find(
(item) => item.mc === "软硬件产品"
);
if (
selectedItem &&
selectedItem.cpChildren &&
selectedItem.cpChildren.length > 0
) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
if (firstProduct.children2 && firstProduct.children2.length > 0) {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, "Selected Product ID");
this.getListdt(this.activeServiceId);
}
}
}
}, },
},
watch: {
activeNameOuter(newValue) { mounted() {
console.log(newValue, 'newValue'); this.getList();
if (newValue === '服务类') { },
const selectedItem = this.collapseDataOuter.find(item => item.mc === '智能化服务类'); methods: {
if (selectedItem && selectedItem.fwlChildren.length > 0) { setActiveOuter(cplx) {
const firstService = selectedItem.fwlChildren[0]; this.activeNameOuter = cplx; // 设置选中的外层菜单类型
this.activeNameInner = `智能化服务类-${firstService.mc}`; this.activeNameInner = ""; // 清空内层选中的状态
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, 'Selected Service ID'); // 查找对应的外层菜单项
this.getListdt(this.activeServiceId); const selectedOuterItem = this.collapseDataOuter.find(
} (item) => item.cplx === cplx
} else if (newValue === '产品') { );
const selectedItem = this.collapseDataOuter.find(item => item.mc === '软硬件产品');
if (selectedItem && selectedItem.cpChildren && selectedItem.cpChildren.length > 0) { if (selectedOuterItem) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品 // 处理产品类型的情况
if (firstProduct.children2 && firstProduct.children2.length > 0) { if (cplx === "产品") {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品 if (
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`; selectedOuterItem.cpChildren &&
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID selectedOuterItem.cpChildren.length > 0
console.log(this.activeServiceId, 'Selected Product ID'); ) {
this.getListdt(this.activeServiceId); const firstInnerItem = selectedOuterItem.cpChildren[0];
} const firstContent =
} firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(
firstInnerItem.name,
firstContent.mc,
firstContent.id,
firstContent.zx
); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
} }
}
} else if (cplx === "服务类") {
if (
selectedOuterItem.fwlChildren &&
selectedOuterItem.fwlChildren.length > 0
) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(
selectedOuterItem.mc,
firstService.mc,
null,
firstService.id,
firstService.zx
); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
} }
},
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
mounted() { }
this.getList();
}, },
methods: {
setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 设置选中的外层菜单类型
this.activeNameInner = ''; // 清空内层选中的状态
// 查找对应的外层菜单项
const selectedOuterItem = this.collapseDataOuter.find(item => item.cplx === cplx);
if (selectedOuterItem) {
// 处理产品类型的情况
if (cplx === '产品') {
if (selectedOuterItem.cpChildren && selectedOuterItem.cpChildren.length > 0) {
const firstInnerItem = selectedOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id, firstContent.zx); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
}
}
} else if (cplx === '服务类') {
if (selectedOuterItem.fwlChildren && selectedOuterItem.fwlChildren.length > 0) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(selectedOuterItem.mc, firstService.mc, null, firstService.id, firstService.zx); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
}
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
}
},
displaySelectedInfo(menuName, content) {
// 在这里更新展示选中的内容的信息
// 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
},
getList() {
getListcx().then(res => {
console.log('res', res);
this.collapseDataOuter = res.data;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(firstInnerItem.mc, firstContent.mc, firstContent.id);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log('Outer menu set to:', this.activeNameOuter);
},
handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`;
// 传递 contentId 到路由中
this.$router.push({
path: '/sj',
query: {
id: contentId,
}
});
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
console.log(contentId, 'contentId');
},
handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`;
// 传递 serviceId 到路由中
this.$router.push({
path: '/sj',
query: {
id: serviceId,
}
});
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
console.log(serviceId, 'serviceId');
},
displaySelectedInfo(menuName, content) {
// 在这里更新展示选中的内容的信息
// 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
},
getList() {
getListcx().then((res) => {
console.log("res", res);
this.collapseDataOuter = res.data;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (
firstOuterItem.cpChildren &&
firstOuterItem.cpChildren.length > 0
) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(
firstInnerItem.mc,
firstContent.mc,
firstContent.id
);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveInner(innerName, content = '', id = null) { setActiveOuter(cplx) {
if (content) { this.activeNameOuter = cplx;
this.activeNameInner = `${innerName}-${content}`; console.log("Outer menu set to:", this.activeNameOuter);
console.log(this.activeNameInner, 'this.activeNameInner'); },
this.selectedId = id; // 更新选中项的ID handleInnerClick(innerName, contentName, contentId) {
console.log('activeNameInner updated to:', this.activeNameInner); this.activeNameInner = `${innerName}-${contentName}`;
this.getListdt(this.selectedId); // 获取内容数据 // 传递 contentId 到路由中
} this.$router.push({
}, path: "/sj",
getListdt(id) { query: {
// 假设你的getListdt接口是一个异步函数 id: contentId,
getListdt(id).then(res => {
console.log('12222:', res.data.remark);
this.cpjj = res.data.cpjj
this.gntd = res.data.gntd
this.yycx = res.data.yycx
this.yfjs = res.data.yfjs
this.tdjs = res.data.tdjs
this.fwts = res.data.fwts
this.fwal = res.data.fwal
this.remark = res.data.remark
// 在这里处理返回的数据
}).catch(error => {
console.error('Error fetching data:', error);
});
}, },
});
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
console.log(contentId, "contentId");
},
isInnerActive(innerName) { handleServiceClick(outerName, serviceName, serviceId) {
return this.activeNameInner.startsWith(innerName); // 判断是否为活动状态 this.activeNameInner = `${outerName}-${serviceName}`;
// 传递 serviceId 到路由中
this.$router.push({
path: "/sj",
query: {
id: serviceId,
}, },
handleChange(val) { });
console.log(val); // 处理服务相关的逻辑，比如获取内容等
}, this.getListdt(serviceId);
handleClick(tab, event) { console.log(serviceId, "serviceId");
this.activeName = tab.name; // 确保更新activeName },
console.log(this.activeName, ' this.activeName');
},
setActiveInner(innerName, content = "", id = null) {
if (content) {
this.activeNameInner = `${innerName}-${content}`;
console.log(this.activeNameInner, "this.activeNameInner");
this.selectedId = id; // 更新选中项的ID
console.log("activeNameInner updated to:", this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据
}
},
getListdt(id) {
// 假设你的getListdt接口是一个异步函数
getListdt(id)
.then((res) => {
console.log("12222:", res.data.remark);
this.cpjj = res.data.cpjj;
this.gntd = res.data.gntd;
this.yycx = res.data.yycx;
this.yfjs = res.data.yfjs;
this.tdjs = res.data.tdjs;
this.fwts = res.data.fwts;
this.fwal = res.data.fwal;
this.remark = res.data.remark;
// 在这里处理返回的数据
})
.catch((error) => {
console.error("Error fetching data:", error);
});
},
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");
},
},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@media (max-width: 1199px) { @media (max-width: 1199px) {
.bjt { .bjt {
height: 150px; height: 150px;
// background: rgba(255, 255, 255, 0.9); // background: rgba(255, 255, 255, 0.9);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
z-index: 20; // z-index: 20;
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
display: block; display: block;
} }
} }
::v-deep.tabs { ::v-deep.tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
::v-deep.custom-tabs { ::v-deep.custom-tabs {
flex-grow: 1; flex-grow: 1;
// padding-right: 10px // padding-right: 10px
} }
::v-deep.remark { ::v-deep.remark {
position: absolute; position: absolute;
top: 5px; top: 5px;
/* 向上移动 */ /* 向上移动 */
right: 30px; right: 30px;
/* 向左移动 */ /* 向左移动 */
white-space: nowrap; white-space: nowrap;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
::v-deep.menu-item-active { ::v-deep.menu-item-active {
background-color: #ffffff; background-color: #ffffff;
/* 选中项背景白色 */ /* 选中项背景白色 */
} }
::v-deep.related-menu-item-active { ::v-deep.related-menu-item-active {
background-color: #ffffff; background-color: #ffffff;
/* 兄弟项背景白色 */ /* 兄弟项背景白色 */
} }
::v-deep .service-menu-item-active { ::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色 background-color: #ffffff !important; // 服务类选中项背景色为白色
} }
::v-deep img { ::v-deep img {
max-width: 90% !important; max-width: 90% !important;
height: auto !important; height: auto !important;
} }
::v-deep video { ::v-deep video {
max-width: 90% !important; max-width: 90% !important;
height: auto !important; height: auto !important;
} }
::v-deep .rounded-corner-start { ::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important; border-radius: 10px 0 0 0 !important;
} }
::v-deep.rounded-corner-end { ::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */ /* 其他可能需要的样式 */
} }
::v-deep.el-submenu .el-menu-item { ::v-deep.el-submenu .el-menu-item {
height: 39px; height: 39px;
line-height: 50px; line-height: 50px;
padding: 0 45px; padding: 0 45px;
min-width: 200px; min-width: 200px;
} }
::v-deep.el-submenu .el-submenu__title { ::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff; border-bottom-color: #1890ff;
height: 46px; height: 46px;
} }
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item { ::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px; padding: 0 20px;
height: 43px; height: 43px;
box-sizing: border-box; box-sizing: border-box;
line-height: 40px; line-height: 40px;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
color: #303133; color: #303133;
position: relative; position: relative;
width: 120px; width: 120px;
text-align: center; text-align: center;
} }
// ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item { // ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
...@@ -442,118 +598,115 @@ export default { ...@@ -442,118 +598,115 @@ export default {
// /* 设置字体颜色 */ // /* 设置字体颜色 */
// } // }
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav { ::v-deep.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px none; border: 1px none;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
; border-radius: 0;
border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep.el-tabs .el-tabs__header { ::v-deep.el-tabs .el-tabs__header {
padding: 0; padding: 0;
position: relative; position: relative;
margin: 0 0 0px !important; margin: 0 0 0px !important;
} }
::v-deep.product-menu { ::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 内层菜单展开时的背景色 // 设置箭头图标颜色为蓝色
.inner-submenu-active { .el-submenu__icon-arrow {
background-color: #ffffff; // 内层菜单背景色为白色 color: #165bff; // 改变箭头颜色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
} }
}
// 默认状态的箭头颜色 // 默认状态的箭头颜色
.el-submenu { .el-submenu {
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
color: #000; // 默认箭头颜色 color: #000; // 默认箭头颜色
}
} }
}
} }
::v-deep.product-menu .menu-item-active { ::v-deep.product-menu .menu-item-active {
color: #165BFF !important; color: #165bff !important;
/* 选中菜单项的字体颜色 */ /* 选中菜单项的字体颜色 */
} }
::v-deep.product-menu .el-menu-item { ::v-deep.product-menu .el-menu-item {
background-color: #ffffff; background-color: #ffffff;
/* 第三级菜单的背景色 */ /* 第三级菜单的背景色 */
} }
// .text-align { // .text-align {
...@@ -575,7 +728,6 @@ export default { ...@@ -575,7 +728,6 @@ export default {
// margin: 20px 0 20px -30px; // margin: 20px 0 20px -30px;
// } // }
// .box { // .box {
// position: relative; // position: relative;
// top: -20px; // top: -20px;
...@@ -591,19 +743,17 @@ export default { ...@@ -591,19 +743,17 @@ export default {
// } // }
.container { .container {
overflow-y: auto; overflow-y: auto;
// height: 1080px; // height: 1080px;
background-image: url(../../assets/images/background1.png) !important; background-image: url(../../assets/images/background1.png) !important;
// background-size: cover; // background-size: cover;
background-size: 100% 60%; // background-size: 100% 60%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
} }
// .content { // .content {
...@@ -619,76 +769,68 @@ h1 { ...@@ -619,76 +769,68 @@ h1 {
// } // }
.bt { .bt {
text-indent: 3.6em; text-indent: 3.6em;
margin: 20px auto; margin: 20px auto;
/* max-width: 70%; */ /* max-width: 70%; */
width: 1200px; width: 1200px;
padding: 20px; padding: 20px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto; overflow-y: auto;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif; font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
} }
p { p {
font-size: 16px; font-size: 16px;
color: #555; color: #555;
line-height: 1.6; line-height: 1.6;
font-family: "FangSong_GB2312"; font-family: "FangSong_GB2312";
} }
.title { .title {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #c80000; color: #c80000;
line-height: 30px; line-height: 30px;
} }
.flex { .flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bttext { .bttext {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #222222; color: #222222;
line-height: 26px; line-height: 26px;
margin-left: 10px; margin-left: 10px;
text-decoration: none; text-decoration: none;
} }
.bttext:hover { .bttext:hover {
color: #165bff; color: #165bff;
text-decoration: underline; text-decoration: underline;
} }
.custom-title { .custom-title {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
font-size: 16px; font-size: 16px;
color: #165bff; color: #165bff;
line-height: 26px; line-height: 26px;
}
.el-menu {
border-right: 1px none !important;
} }
</style> </style>
src/views/zyyqsj/tzy/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-row style="margin: 0px auto 150px ;"> <img
<div class="bjt"> src="../../../assets/images/fh.png"
<img src="../../../assets/images/background.png" alt="" style=" alt=""
height: 111px; style="
width: 877px; height: 50px;
/* background-size: cover; width: 50px;
position: absolute; position: fixed;
right: 40px;
bottom: 40px;
z-index: 9999;
"
@click="goBack"
/>
<el-row style="margin: 0px auto 150px">
<div class="bjt">
<img
src="../../../assets/images/background.png"
alt=""
style="
height: 111px;
width: 877px;
/*background-size: cover;
position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover; */ object-fit: cover; */
" /> "
/>
</div> </div>
</el-row> </el-row>
<el-row class="content" style="background-color: #f5f8fe;"> <el-row class="content" style="background-color: #f5f8fe">
<!-- 显示选项卡的内容 --> <!-- 显示选项卡的内容 -->
<el-col v-if="this.cplx === '产品'" :span="24" :xs="24" :sm="24" :md="24" <el-col
style="border-radius: 10px; height: 100%; background-color: #f5f8fe;"> v-if="this.cplx === '产品'"
<div class="tabs"> :span="24"
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> :xs="24"
<el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }"> :sm="24"
<el-card style="width: 100%; height:100%; overflow-y: auto;"> :md="24"
<div v-html="`<style> style="border-radius: 10px; height: 100%; background-color: #f5f8fe"
>
<div class="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-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div> </style>${cpjj}`
</el-card> "
</el-tab-pane> ></div>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }"> </el-card>
<el-card style="width: 100%; height:100%; overflow-y: auto;"> </el-tab-pane>
<div v-html="`<style> <el-tab-pane
label="功能特点"
name="second"
:class="{ 'custom-active2': activeName === 'second' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div> </style>${gntd}`
</el-card> "
</el-tab-pane> ></div>
<el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }"> </el-card>
<el-card style="width: 100%; height:100%; overflow-y: auto;"> </el-tab-pane>
<div v-html="`<style> <el-tab-pane
label="应用成效"
name="third"
:class="{ 'custom-active3': activeName === 'third' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div> </style>${yycx}`
</el-card> "
</el-tab-pane> ></div>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }"> </el-card>
<el-card style="width: 100%; height:100%; overflow-y: auto;"> </el-tab-pane>
<div v-html="`<style> <el-tab-pane
label="用法介绍"
name="fourth"
:class="{ 'custom-active4': activeName === 'fourth' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div> </style>${yfjs}`
</el-card> "
</el-tab-pane> ></div>
</el-tabs> </el-card>
<!-- <div class="remark"> </el-tab-pane>
</el-tabs>
<!-- <div class="remark">
<h2>{{ this.remark }}</h2> <h2>{{ this.remark }}</h2>
</div> --> </div> -->
</div> </div>
</el-col> </el-col>
<!-- 外层折叠项 2 选中的内容 --> <!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="this.cplx === '服务类'" :span="24" :xs="24" :sm="24" :md="24" <el-col
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> v-else-if="this.cplx === '服务类'"
<div class="tabs"> :span="24"
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> :xs="24"
<el-tab-pane label="团队介绍" name="first"> :sm="24"
<el-card style="width: 100%; height:100%; overflow-y: auto;"> :md="24"
<div v-html="`<style> style="
border-radius: 10px;
min-height: 700px;
background-color: #f5f8fe;
"
>
<div class="tabs">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
type="card"
class="custom-tabs"
>
<el-tab-pane label="团队介绍" name="first">
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${tdjs}`"></div> </style>${tdjs}`
</el-card> "
</el-tab-pane> ></div>
<el-tab-pane label="服务特色" name="second"> </el-card>
<el-card style="width: 100%; height:100%; overflow-y: auto;"> </el-tab-pane>
<div v-html="`<style> <el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwts}`"></div> </style>${fwts}`
</el-card> "
</el-tab-pane> ></div>
<el-tab-pane label="服务案例" name="third"> </el-card>
<el-card style="width: 100%; height:100%; overflow-y: auto;"> </el-tab-pane>
<div v-html="`<style> <el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; height: 100%; overflow-y: auto">
<div
v-html="
`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; } .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; } .table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwal}`"></div> </style>${fwal}`
</el-card> "
</el-tab-pane> ></div>
</el-tabs> </el-card>
<!-- <div class="remark"> </el-tab-pane>
</el-tabs>
<!-- <div class="remark">
<h2>{{ this.remark }}</h2> <h2>{{ this.remark }}</h2>
</div> --> </div> -->
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</div>
</div>
</template> </template>
<script> <script>
import { getListcx, getListdt } from "@/api/sy.js";
import { getListcx, getListdt, } from "@/api/sy.js";
export default { export default {
name: "gasDigitization", name: "gasDigitization",
// components: { footerNav }, // components: { footerNav },
data() { data() {
return { return {
cplx: '', cplx: "",
remark: '', // 新增的remark属性 remark: "", // 新增的remark属性
defaultOpeneds: [],// 根据需要初始化 defaultOpeneds defaultOpeneds: [], // 根据需要初始化 defaultOpeneds
selectedId: null, // 用于存储选中项的ID selectedId: null, // 用于存储选中项的ID
cpjj: '', cpjj: "",
gntd: '', gntd: "",
yycx: '', yycx: "",
yfjs: '', yfjs: "",
tdjs: '', tdjs: "",
fwts: '', fwts: "",
fwal: '', fwal: "",
activeNameOuter: "产品", // 默认选中的第一级选项 activeNameOuter: "产品", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项 activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [], collapseDataOuter: [],
activeName: "first", activeName: "first",
name: null, name: null,
ipdz: null, ipdz: null,
yl1: null, yl1: null,
showDialog: false, // 控制对话框显示的变量 showDialog: false, // 控制对话框显示的变量
form: { form: {},
};
}, },
}; watch: {
activeNameOuter(newValue) {
console.log(newValue, "newValue");
if (newValue === "服务类") {
const selectedItem = this.collapseDataOuter.find(
(item) => item.mc === "智能化服务类"
);
if (selectedItem && selectedItem.fwlChildren.length > 0) {
const firstService = selectedItem.fwlChildren[0];
this.activeNameInner = `智能化服务类-${firstService.mc}`;
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, "Selected Service ID");
this.getListdt(this.activeServiceId);
}
} else if (newValue === "产品") {
const selectedItem = this.collapseDataOuter.find(
(item) => item.mc === "软硬件产品"
);
if (
selectedItem &&
selectedItem.cpChildren &&
selectedItem.cpChildren.length > 0
) {
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品
if (firstProduct.children2 && firstProduct.children2.length > 0) {
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`;
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
console.log(this.activeServiceId, "Selected Product ID");
this.getListdt(this.activeServiceId);
}
}
}
}, },
},
watch: {
activeNameOuter(newValue) { mounted() {
console.log(newValue, 'newValue'); const id = this.$route.query.id;
if (newValue === '服务类') { this.getListdt(id);
const selectedItem = this.collapseDataOuter.find(item => item.mc === '智能化服务类'); },
if (selectedItem && selectedItem.fwlChildren.length > 0) { methods: {
const firstService = selectedItem.fwlChildren[0]; goBack() {
this.activeNameInner = `智能化服务类-${firstService.mc}`; this.$router.go(-1); // 返回上一页
this.activeServiceId = firstService.id; // 设置 activeServiceId 为第一项的 ID },
console.log(this.activeServiceId, 'Selected Service ID'); setActiveOuter(cplx) {
this.getListdt(this.activeServiceId); this.activeNameOuter = cplx; // 设置选中的外层菜单类型
} this.activeNameInner = ""; // 清空内层选中的状态
} else if (newValue === '产品') {
const selectedItem = this.collapseDataOuter.find(item => item.mc === '软硬件产品'); // 查找对应的外层菜单项
if (selectedItem && selectedItem.cpChildren && selectedItem.cpChildren.length > 0) { const selectedOuterItem = this.collapseDataOuter.find(
const firstProduct = selectedItem.cpChildren[0]; // 从 cpChildren 中获取第一个产品 (item) => item.cplx === cplx
if (firstProduct.children2 && firstProduct.children2.length > 0) { );
const firstProductChild = firstProduct.children2[0]; // 从 children2 中获取第一个子产品
this.activeNameInner = `软硬件产品-${firstProductChild.mc}`; if (selectedOuterItem) {
this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID // 处理产品类型的情况
console.log(this.activeServiceId, 'Selected Product ID'); if (cplx === "产品") {
this.getListdt(this.activeServiceId); if (
} selectedOuterItem.cpChildren &&
} selectedOuterItem.cpChildren.length > 0
) {
const firstInnerItem = selectedOuterItem.cpChildren[0];
const firstContent =
firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(
firstInnerItem.name,
firstContent.mc,
firstContent.id,
firstContent.zx
); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
} }
}
} else if (cplx === "服务类") {
if (
selectedOuterItem.fwlChildren &&
selectedOuterItem.fwlChildren.length > 0
) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(
selectedOuterItem.mc,
firstService.mc,
null,
firstService.id,
firstService.zx
); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
} }
},
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
}
},
mounted() { displaySelectedInfo(menuName, content) {
const id = this.$route.query.id // 在这里更新展示选中的内容的信息
this.getListdt(id); // 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
}, },
methods: {
setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 设置选中的外层菜单类型
this.activeNameInner = ''; // 清空内层选中的状态
// 查找对应的外层菜单项
const selectedOuterItem = this.collapseDataOuter.find(item => item.cplx === cplx);
if (selectedOuterItem) {
// 处理产品类型的情况
if (cplx === '产品') {
if (selectedOuterItem.cpChildren && selectedOuterItem.cpChildren.length > 0) {
const firstInnerItem = selectedOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2 && firstInnerItem.children2[0]; // 确保存在内容
if (firstContent) {
this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id, firstContent.zx); // 传递 zx
this.displaySelectedInfo(firstInnerItem.name, firstContent); // 展示选中的信息
}
}
} else if (cplx === '服务类') {
if (selectedOuterItem.fwlChildren && selectedOuterItem.fwlChildren.length > 0) {
const firstService = selectedOuterItem.fwlChildren[0]; // 默认选中第一个服务
this.setActiveInner(selectedOuterItem.mc, firstService.mc, null, firstService.id, firstService.zx); // 传递 zx
this.displaySelectedInfo(selectedOuterItem.mc, firstService); // 展示选中的信息
}
}
// 设置展开的菜单项
this.defaultOpeneds = [selectedOuterItem.px]; // 展开外层菜单
}
},
displaySelectedInfo(menuName, content) {
// 在这里更新展示选中的内容的信息
// 你可以根据需要展示的内容更新相应的数据属性
this.selectedMenuName = menuName; // 例如设置当前选中的菜单名称
this.selectedContent = content; // 设置当前选中的内容
// 其他逻辑，例如更新界面中的某些元素的显示
},
getList() {
getListcx().then(res => {
console.log('res', res);
this.collapseDataOuter = res.data;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(firstInnerItem.mc, firstContent.mc, firstContent.id);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log('Outer menu set to:', this.activeNameOuter);
},
handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`;
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
},
handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`;
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
},
setActiveInner(innerName, content = '', id = null) {
if (content) {
this.activeNameInner = `${innerName}-${content}`;
console.log(this.activeNameInner, 'this.activeNameInner');
this.selectedId = id; // 更新选中项的ID
console.log('activeNameInner updated to:', this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据
}
},
getListdt(id) {
// 假设你的getListdt接口是一个异步函数
getListdt(id).then(res => {
console.log('12222:', res.data.remark);
this.cpjj = res.data.cpjj
this.gntd = res.data.gntd
this.yycx = res.data.yycx
this.yfjs = res.data.yfjs
this.tdjs = res.data.tdjs
this.fwts = res.data.fwts
this.fwal = res.data.fwal
this.remark = res.data.remark
this.cplx = res.data.cplx;
// 在这里处理返回的数据
}).catch(error => {
console.error('Error fetching data:', error);
});
},
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;
// 获取数据后，设置默认选中的第一个外层和内层菜单项
if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx;
if (
firstOuterItem.cpChildren &&
firstOuterItem.cpChildren.length > 0
) {
const firstInnerItem = firstOuterItem.cpChildren[0];
const firstContent = firstInnerItem.children2[0]; // 假设有第三级菜单内容
// 默认选中第一项
this.setActiveInner(
firstInnerItem.mc,
firstContent.mc,
firstContent.id
);
// 设置展开的菜单项
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 外层和内层菜单都展开
}
}
});
},
setActiveOuter(cplx) {
this.activeNameOuter = cplx;
console.log("Outer menu set to:", this.activeNameOuter);
},
handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`;
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
},
handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`;
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
},
setActiveInner(innerName, content = "", id = null) {
if (content) {
this.activeNameInner = `${innerName}-${content}`;
console.log(this.activeNameInner, "this.activeNameInner");
this.selectedId = id; // 更新选中项的ID
console.log("activeNameInner updated to:", this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据
}
},
getListdt(id) {
// 假设你的getListdt接口是一个异步函数
getListdt(id)
.then((res) => {
console.log("12222:", res.data.remark);
this.cpjj = res.data.cpjj;
this.gntd = res.data.gntd;
this.yycx = res.data.yycx;
this.yfjs = res.data.yfjs;
this.tdjs = res.data.tdjs;
this.fwts = res.data.fwts;
this.fwal = res.data.fwal;
this.remark = res.data.remark;
this.cplx = res.data.cplx;
// 在这里处理返回的数据
})
.catch((error) => {
console.error("Error fetching data:", error);
});
},
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");
}, },
},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@media (max-width: 1199px) { @media (max-width: 1199px) {
.bjt { .bjt {
height: 150px; height: 150px;
// background: rgba(255, 255, 255, 0.9); // background: rgba(255, 255, 255, 0.9);
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
padding: 0 15px; padding: 0 15px;
z-index: 20; // z-index: 20;
box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06); box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.06);
display: block; display: block;
} }
} }
::v-deep.tabs { ::v-deep.tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
} }
::v-deep.custom-tabs { ::v-deep.custom-tabs {
flex-grow: 1; flex-grow: 1;
// padding-right: 10px // padding-right: 10px
} }
::v-deep.remark { ::v-deep.remark {
position: absolute; position: absolute;
top: 5px; top: 5px;
/* 向上移动 */ /* 向上移动 */
right: 30px; right: 30px;
/* 向左移动 */ /* 向左移动 */
white-space: nowrap; white-space: nowrap;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
::v-deep.menu-item-active { ::v-deep.menu-item-active {
background-color: #ffffff; background-color: #ffffff;
/* 选中项背景白色 */ /* 选中项背景白色 */
} }
::v-deep.related-menu-item-active { ::v-deep.related-menu-item-active {
background-color: #ffffff; background-color: #ffffff;
/* 兄弟项背景白色 */ /* 兄弟项背景白色 */
} }
::v-deep .service-menu-item-active { ::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色 background-color: #ffffff !important; // 服务类选中项背景色为白色
} }
::v-deep img { ::v-deep img {
max-width: 90% !important; max-width: 90% !important;
height: auto !important; height: auto !important;
} }
::v-deep video { ::v-deep video {
max-width: 90% !important; max-width: 90% !important;
height: auto !important; height: auto !important;
} }
::v-deep .rounded-corner-start { ::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important; border-radius: 10px 0 0 0 !important;
} }
::v-deep.rounded-corner-end { ::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */ /* 其他可能需要的样式 */
} }
::v-deep.el-submenu .el-menu-item { ::v-deep.el-submenu .el-menu-item {
height: 39px; height: 39px;
line-height: 50px; line-height: 50px;
padding: 0 45px; padding: 0 45px;
min-width: 200px; min-width: 200px;
} }
::v-deep.el-submenu .el-submenu__title { ::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff; border-bottom-color: #1890ff;
height: 46px; height: 46px;
} }
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item { ::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
// padding: 0 20px; height: 43px;
height: 43px; box-sizing: border-box;
box-sizing: border-box; line-height: 40px;
line-height: 40px; display: inline-block;
display: inline-block; list-style: none;
list-style: none; font-size: 15px;
font-size: 15px; font-weight: 500;
font-weight: 500; color: #303133;
color: #303133; position: relative;
position: relative; width: auto;
width: auto; text-align: center;
text-align: center; flex-grow: 1;
text-align: center;
padding: 0;
margin: 0;
} }
// ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item { // ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
...@@ -407,118 +516,115 @@ export default { ...@@ -407,118 +516,115 @@ export default {
// /* 设置字体颜色 */ // /* 设置字体颜色 */
// } // }
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav { ::v-deep.el-tabs--card > .el-tabs__header .el-tabs__nav {
border: 1px none; border: 1px none;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff; background-color: #165bff;
color: white; color: white;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 10px 0 0 0; border-radius: 10px 0 0 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
; border-radius: 0;
border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0; border-radius: 0;
} }
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) { ::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb; background-color: #d8e1eb;
color: black; color: black;
border-radius: 0 10px 0 0; border-radius: 0 10px 0 0;
} }
::v-deep.el-tabs .el-tabs__header { ::v-deep.el-tabs .el-tabs__header {
padding: 0; padding: 0;
position: relative; position: relative;
margin: 0 0 0px !important; margin: 0 0 0px !important;
} }
::v-deep.product-menu { ::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 内层菜单展开时的背景色 // 设置箭头图标颜色为蓝色
.inner-submenu-active { .el-submenu__icon-arrow {
background-color: #ffffff; // 内层菜单背景色为白色 color: #165bff; // 改变箭头颜色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
} }
}
// 默认状态的箭头颜色 // 默认状态的箭头颜色
.el-submenu { .el-submenu {
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
color: #000; // 默认箭头颜色 color: #000; // 默认箭头颜色
}
} }
}
} }
::v-deep.product-menu .menu-item-active { ::v-deep.product-menu .menu-item-active {
color: #165BFF !important; color: #165bff !important;
/* 选中菜单项的字体颜色 */ /* 选中菜单项的字体颜色 */
} }
::v-deep.product-menu .el-menu-item { ::v-deep.product-menu .el-menu-item {
background-color: #ffffff; background-color: #ffffff;
/* 第三级菜单的背景色 */ /* 第三级菜单的背景色 */
} }
// .text-align { // .text-align {
...@@ -540,7 +646,6 @@ export default { ...@@ -540,7 +646,6 @@ export default {
// margin: 20px 0 20px -30px; // margin: 20px 0 20px -30px;
// } // }
// .box { // .box {
// position: relative; // position: relative;
// top: -20px; // top: -20px;
...@@ -556,122 +661,108 @@ export default { ...@@ -556,122 +661,108 @@ export default {
// } // }
.container { .container {
overflow-y: auto; overflow-y: auto;
// height: 1080px; // height: 1080px;
background-image: url(../../../assets/images/background1.png) !important; background-image: url(../../../assets/images/background1.png) !important;
// background-size: cover; // background-size: cover;
background-size: 100% 60%; // background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
} }
.content { .content {
// margin: 20px auto; // margin: 20px auto;
width: auto; width: auto;
// min-height: calc(100vh - 420px); // min-height: calc(100vh - 420px);
// padding: 20px; // padding: 20px;
background: #F5F8FE; background: #f5f8fe;
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
/* 设置背景色 */ /* 设置背景色 */
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
} }
.bt { .bt {
text-indent: 3.6em; text-indent: 3.6em;
margin: 20px auto; margin: 20px auto;
/* max-width: 70%; */ /* max-width: 70%; */
width: 1200px; width: 1200px;
padding: 20px; padding: 20px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto; overflow-y: auto;
} }
h2 { h2 {
font-size: 24px; font-size: 24px;
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif; font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
} }
p { p {
font-size: 16px; font-size: 16px;
color: #555; color: #555;
line-height: 1.6; line-height: 1.6;
font-family: "FangSong_GB2312"; font-family: "FangSong_GB2312";
} }
.title { .title {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #c80000; color: #c80000;
line-height: 30px; line-height: 30px;
} }
.flex { .flex {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bttext { .bttext {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #222222; color: #222222;
line-height: 26px; line-height: 26px;
margin-left: 10px; margin-left: 10px;
text-decoration: none; text-decoration: none;
} }
.bttext:hover { .bttext:hover {
color: #165bff; color: #165bff;
text-decoration: underline; text-decoration: underline;
} }
.custom-title { .custom-title {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 800; font-weight: 800;
font-size: 16px; font-size: 16px;
color: #165bff; color: #165bff;
line-height: 26px; line-height: 26px;
} }
::v-deep.custom-tabs .el-tabs__nav { ::v-deep.custom-tabs .el-tabs__nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item { ::v-deep.el-tabs .el-tabs__header {
flex-grow: 1; padding: 0;
text-align: center; margin: 0 !important;
width: auto;
padding: 0;
margin: 0;
} }
::v-deep.el-tabs .el-tabs__header { ::v-deep.el-tabs--top.el-tabs--card
padding: 0; > .el-tabs__header
margin: 0 !important; .el-tabs__item:nth-child(2) {
padding: 0 !important;
} }
</style> </style>
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