Skip to content

Y
yq-ui
Commit eed1d26d by zhaopanyu
Options

zpy

parent 34b4614a
Showing with 172 additions and 455 deletions
src/views/zyyqsj/index.vue
...@@ -15,175 +15,99 @@ ...@@ -15,175 +15,99 @@
</div> </div>
</el-row> </el-row>
<el-row class="content" style="background-color: #f5f8fe; height: 100vh"> <el-row class="content" style="background-color: #f5f8fe; height: 100vh">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style=" <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"
padding: 20px; style="padding: 20px; border-radius: 10px; height: 712px; overflow-y: auto; ">
border-radius: 10px; <el-menu :default-openeds="defaultActiveKeys" class="el-menu-vertical-demo" :background-color="'transparent'"
height: auto; text-color="#333" active-text-color="#409EFF">
background-color: #f5f8fe; <div v-for="outerItem in collapseDataOuter" :key="outerItem.px">
"> <div v-if="outerItem.cplx === '产品'">
<el-menu v-if="activeNameOuter === '产品'" :default-active="activeNameInner" class="product-menu" <el-submenu :index="outerItem.mc">
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'" <template slot="title">
:default-openeds="defaultOpeneds"> <img src="../../assets/images/tag.png" alt="">
<!-- 外层菜单 --> <span
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
@click.native="setActiveOuter(outerItem.cplx)"> {{ outerItem.mc }}
<template #title> </span>
<img src="../../assets/images/tag.png" alt="" /> </template>
<span style=" <div v-for="outerItem2 in outerItem.cpChildren" :key="outerItem2.mc">
font-family: 'PingFang SC'; <el-submenu :index="outerItem2.mc">
font-weight: 800; <template slot="title">
font-size: 23px; <span
color: #222222; style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
line-height: 40px; {{ outerItem2.mc }}
"> </span>
{{ outerItem.mc }} </template>
</span> <div v-for="outerItem3 in outerItem2.children2" :key="outerItem3.mc">
</template> <el-menu-item :index="outerItem3.name + '-' + outerItem3.mc"
@click.native="handleInnerClick(outerItem2.name, outerItem3.mc, outerItem3.id, outerItem3.remark, outerItem.cplx)"
<!-- 第二级菜单 --> :class="{ 'menu-item-active': activeNameInner === outerItem3.name + '-' + outerItem3.mc }"
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px" :style="{
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" display: 'block',
@click.native="setActiveInner(innerItem.mc)"> overflowWrap: 'break-word',
<template #title> wordWrap: 'break-word',
<span style=" whiteSpace: 'normal'
font-family: 'PingFang SC'; }">
font-weight: 800; <img v-if="outerItem3.zx === '1'" src="../../assets/images/new.png" alt="new"
font-size: 17px; style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
color: #222222; <span
line-height: 26px; :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
">
{{ innerItem.mc }} <span :style="{
</span> fontFamily: 'PingFang SC',
</template> fontWeight: '500',
fontSize: '15px',
<!-- 第三级菜单 --> color: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : '#222222',
<el-menu-item v-for="content in innerItem.children2" :key="content.id" textDecoration: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? 'underline' : 'none',
:index="innerItem.name + '-' + content.mc" @click.native=" textDecorationColor: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : 'transparent',
handleInnerClick( textUnderlineOffset: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '8px' : '0',
innerItem.name,
content.mc, }">
content.id, {{ outerItem3.mc }}<span v-if="outerItem3.remark"> ({{ outerItem3.remark }})</span>
content.remark </span>
) </el-menu-item>
" :class="{ </div>
'menu-item-active': </el-submenu>
activeNameInner === innerItem.name + '-' + content.mc, </div>
}"> </el-submenu>
<span :style="{ </div>
width: '6px',
height: '6px', <div v-if="outerItem.cplx === '服务类'">
background: '#165BFF', <el-submenu :index="outerItem.mc">
borderRadius: '50%', <template slot="title">
display: 'inline-block', <img src="../../assets/images/tag.png" alt="">
marginRight: '10px', <span
}"></span> style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
<span :style="{ {{ outerItem.mc }}
fontFamily: 'PingFang SC', </span>
fontWeight: '500', </template>
fontSize: '15px', <div v-for="service in outerItem.fwlChildren" :key="service.mc">
color: <el-menu-item :index="outerItem.mc + '-' + service.mc"
activeNameInner === innerItem.name + '-' + content.mc @click.native="handleServiceClick(outerItem.mc, service.mc, service.id, service.remark)"
? '#165BFF' :class="{ 'menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc }">
: '#222222', <img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new"
textDecoration: style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
activeNameInner === innerItem.name + '-' + content.mc <span
? 'underline' :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
: 'none',
textDecorationColor: <span :style="{
activeNameInner === innerItem.name + '-' + content.mc fontFamily: 'PingFang SC',
? '#165BFF' fontWeight: '500',
: 'transparent', fontSize: '15px',
textUnderlineOffset: color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222',
activeNameInner === innerItem.name + '-' + content.mc textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none',
? '8px' textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent',
: '0', textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0'
}"> }">
{{ content.mc }} {{ service.mc }}<span v-if="service.remark"> ({{ service.remark }})</span>
</span> </span>
<img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new" style=" </el-menu-item>
width: 40px; </div>
height: 40px; </el-submenu>
margin-left: 5px; </div>
vertical-align: middle; </div>
" />
</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-menu>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -195,6 +119,9 @@ export default { ...@@ -195,6 +119,9 @@ export default {
data() { data() {
return { return {
activeNameInner: '', // 当前激活的菜单项
defaultActiveKeys: [],
selectedMenu: '',
remark: "", // 新增的remark属性 remark: "", // 新增的remark属性
defaultOpeneds: [], // 根据需要初始化 defaultOpeneds defaultOpeneds: [], // 根据需要初始化 defaultOpeneds
selectedId: null, // 用于存储选中项的ID selectedId: null, // 用于存储选中项的ID
...@@ -205,8 +132,7 @@ export default { ...@@ -205,8 +132,7 @@ export default {
tdjs: "", tdjs: "",
fwts: "", fwts: "",
fwal: "", fwal: "",
activeNameOuter: "产品", // 默认选中的第一级选项 activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [], collapseDataOuter: [],
activeName: "first", activeName: "first",
name: null, name: null,
...@@ -217,176 +143,53 @@ export default { ...@@ -217,176 +143,53 @@ export default {
}; };
}, },
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);
}
}
}
},
},
mounted() { mounted() {
this.getList(); this.getList();
}, },
methods: { 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() { getList() {
getListcx().then((res) => { getListcx().then(res => {
console.log("res", res); console.log('res', res);
this.collapseDataOuter = res.data; this.collapseDataOuter = res.data; // 保存外层菜单数据
this.collapseDataOuter.forEach(outerItem => {
// 获取数据后，设置默认选中的第一个外层和内层菜单项 this.defaultActiveKeys.push(outerItem.mc);
if (this.collapseDataOuter.length > 0) { if (outerItem.cpChildren) {
const firstOuterItem = this.collapseDataOuter[0]; outerItem.cpChildren.forEach(outerItem2 => {
this.activeNameOuter = firstOuterItem.cplx; this.defaultActiveKeys.push(outerItem2.mc);
});
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) { handleInnerClick(innerName, contentName, contentId) {
this.activeNameInner = `${innerName}-${contentName}`; const selectedMenu = `${innerName}-${contentName}`;
// 传递 contentId 到路由中 localStorage.setItem('selectedMenu', selectedMenu); // 保存选中菜单
this.$router.push({ this.$router.push({
path: "/sj", path: "/sj",
query: { query: { id: contentId },
id: contentId,
},
}); });
// 处理内容相关的逻辑，比如获取内容等
this.getListdt(contentId);
console.log(contentId, "contentId");
}, },
handleServiceClick(outerName, serviceName, serviceId) { handleServiceClick(outerName, serviceName, serviceId) {
this.activeNameInner = `${outerName}-${serviceName}`; const selectedMenu = `${outerName}-${serviceName}`;
// 传递 serviceId 到路由中 localStorage.setItem('selectedMenu', selectedMenu); // 保存选中菜单
this.$router.push({ this.$router.push({
path: "/sj", path: "/sj",
query: { query: { id: serviceId },
id: serviceId,
},
}); });
// 处理服务相关的逻辑，比如获取内容等
this.getListdt(serviceId);
console.log(serviceId, "serviceId");
}, },
setActiveInner(innerName, content = "", id = null) {
// 设置当前选中的内层菜单
setActiveInner(innerName, content = '', id = null) {
if (content) { if (content) {
this.activeNameInner = `${innerName}-${content}`; this.activeNameInner = `${innerName}-${content}`; // 更新内层菜单
console.log(this.activeNameInner, "this.activeNameInner"); console.log(this.activeNameInner, 'this.activeNameInner');
this.selectedId = id; // 更新选中项的ID this.selectedId = id; // 更新选中项的ID
console.log("activeNameInner updated to:", this.activeNameInner); console.log('activeNameInner updated to:', this.activeNameInner);
this.getListdt(this.selectedId); // 获取内容数据 this.getListdt(this.selectedId); // 获取内容数据
} }
}, },
...@@ -496,11 +299,24 @@ export default { ...@@ -496,11 +299,24 @@ export default {
/* 其他可能需要的样式 */ /* 其他可能需要的样式 */
} }
::v-deep.el-submenu .el-menu-item { ::v-deep .el-submenu .el-menu-item {
height: 39px; height: auto;
line-height: 50px; /* 默认高度 */
line-height: 30px;
padding: 0 45px; padding: 0 45px;
min-width: 200px; min-width: 200px;
margin: 10px 0;
}
@media (max-width: 600px) {
/* 根据需要调整最大宽度 */
::v-deep .el-submenu .el-menu-item {
height: auto;
/* 换行时自动高度 */
margin: 5px 0;
/* 换行时间隔小一点 */
}
} }
::v-deep.el-submenu .el-submenu__title { ::v-deep.el-submenu .el-submenu__title {
......
src/views/zyyqsj/tzy/index.vue
<template> <template>
<div class="container"> <div class="container">
<img <img src="../../../assets/images/fh.png" alt="" style="
src="../../../assets/images/fh.png"
alt=""
style="
height: 50px; height: 50px;
width: 50px; width: 50px;
position: fixed; position: fixed;
right: 40px; right: 40px;
bottom: 40px; bottom: 40px;
z-index: 9999; z-index: 9999;
" " @click="goBack" />
@click="goBack"
/>
<el-row style="margin: 0px auto 150px"> <el-row style="margin: 0px auto 150px">
<div class="bjt"> <div class="bjt">
<img <img src="../../../assets/images/background.png" alt="" style="
src="../../../assets/images/background.png"
alt=""
style="
height: 111px; height: 111px;
width: 877px; width: 877px;
/*background-size: cover; /*background-size: cover;
...@@ -27,89 +19,49 @@ ...@@ -27,89 +19,49 @@
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 <el-col v-if="this.cplx === '产品'" :span="24" :xs="24" :sm="24" :md="24"
v-if="this.cplx === '产品'" style="border-radius: 10px; height: 100%; background-color: #f5f8fe">
:span="24"
:xs="24"
:sm="24"
:md="24"
style="border-radius: 10px; height: 100%; background-color: #f5f8fe"
>
<div class="tabs"> <div class="tabs">
<el-tabs <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
v-model="activeName" <el-tab-pane label="产品简介" name="first" :class="{ 'custom-active1': activeName === 'first' }">
@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"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${cpjj}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
label="功能特点"
name="second"
:class="{ 'custom-active2': activeName === 'second' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${gntd}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
label="应用成效"
name="third"
:class="{ 'custom-active3': activeName === 'third' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${yycx}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane <el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
label="用法介绍"
name="fourth"
:class="{ 'custom-active4': activeName === 'fourth' }"
>
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${yfjs}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -119,59 +71,38 @@ ...@@ -119,59 +71,38 @@
</div> </div>
</el-col> </el-col>
<!-- 外层折叠项 2 选中的内容 --> <!-- 外层折叠项 2 选中的内容 -->
<el-col <el-col v-else-if="this.cplx === '服务类'" :span="24" :xs="24" :sm="24" :md="24" style="
v-else-if="this.cplx === '服务类'"
:span="24"
:xs="24"
:sm="24"
:md="24"
style="
border-radius: 10px; border-radius: 10px;
min-height: 700px; min-height: 700px;
background-color: #f5f8fe; background-color: #f5f8fe;
" ">
>
<div class="tabs"> <div class="tabs">
<el-tabs <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
v-model="activeName"
@tab-click="handleClick"
type="card"
class="custom-tabs"
>
<el-tab-pane label="团队介绍" name="first"> <el-tab-pane label="团队介绍" name="first">
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${tdjs}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="服务特色" name="second"> <el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${fwts}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="服务案例" name="third"> <el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; height: 100%; overflow-y: auto"> <el-card style="width: 100%; height: 100%; overflow-y: auto">
<div <div v-html="`<style>
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}` </style>${fwal}`
" "></div>
></div>
</el-card> </el-card>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -214,41 +145,7 @@ export default { ...@@ -214,41 +145,7 @@ export default {
}; };
}, },
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);
}
}
}
},
},
mounted() { mounted() {
const id = this.$route.query.id; const id = this.$route.query.id;
...@@ -516,7 +413,7 @@ export default { ...@@ -516,7 +413,7 @@ 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;
} }
...@@ -599,6 +496,7 @@ export default { ...@@ -599,6 +496,7 @@ export default {
} }
::v-deep.product-menu { ::v-deep.product-menu {
// 内层菜单展开时的背景色 // 内层菜单展开时的背景色
.inner-submenu-active { .inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色 background-color: #ffffff; // 内层菜单背景色为白色
...@@ -664,6 +562,7 @@ export default { ...@@ -664,6 +562,7 @@ export default {
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% 100%; // background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -760,9 +659,11 @@ p { ...@@ -760,9 +659,11 @@ p {
margin: 0 !important; margin: 0 !important;
} }
::v-deep.el-tabs--top.el-tabs--card ::v-deep.el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2) {
> .el-tabs__header
.el-tabs__item:nth-child(2) {
padding: 0 !important; padding: 0 !important;
} }
::v-deep.el-card {
border: none;
}
</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