Skip to content

Y
yq-ui
Commit c17fe362 by zhaopanyu
Options

zpy

parent ee5d1eef
Showing with 347 additions and 1125 deletions
.env.development
# 页面标题 # 页面标题
VUE_APP_TITLE = 若依管理系统 VUE_APP_TITLE = 胜利智联油气智能化品牌
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
# 若依管理系统/开发环境 # 胜利智联油气智能化品牌/开发环境
VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = '/dev-api'
# 路由懒加载 # 路由懒加载
......
.env.production
# 页面标题 # 页面标题
VUE_APP_TITLE = 若依管理系统 VUE_APP_TITLE = 胜利智联油气智能化品牌
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'
# 若依管理系统/生产环境 # 胜利智联油气智能化品牌/生产环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
.env.staging
# 页面标题 # 页面标题
VUE_APP_TITLE = 若依管理系统 VUE_APP_TITLE = 胜利智联油气智能化品牌
NODE_ENV = production NODE_ENV = production
# 测试环境配置 # 测试环境配置
ENV = 'staging' ENV = 'staging'
# 若依管理系统/测试环境 # 胜利智联油气智能化品牌/测试环境
VUE_APP_BASE_API = '/stage-api' VUE_APP_BASE_API = '/stage-api'
package.json
{ {
"name": "ruoyi", "name": "ruoyi",
"version": "3.8.8", "version": "3.8.8",
"description": "若依管理系统", "description": "胜利智联油气智能化品牌",
"author": "若依", "author": "若依",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
......
src/views/index.vue
...@@ -5,30 +5,20 @@ ...@@ -5,30 +5,20 @@
<blockquote class="text-warning" style="font-size: 14px"> <blockquote class="text-warning" style="font-size: 14px">
领取阿里云通用云产品1888优惠券 领取阿里云通用云产品1888优惠券
<br /> <br />
<el-link <el-link href="https://www.aliyun.com/minisite/goods?userCode=brki8iof" type="primary"
href="https://www.aliyun.com/minisite/goods?userCode=brki8iof" target="_blank">https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link>
type="primary"
target="_blank"
>https://www.aliyun.com/minisite/goods?userCode=brki8iof</el-link
>
<br /> <br />
领取腾讯云通用云产品2860优惠券 领取腾讯云通用云产品2860优惠券
<br /> <br />
<el-link <el-link
href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console" href="https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console"
type="primary" type="primary"
target="_blank" target="_blank">https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link>
>https://cloud.tencent.com/redirect.php?redirect=1025&cps_key=198c8df2ed259157187173bc7f4f32fd&from=console</el-link
>
<br /> <br />
阿里云服务器折扣区 阿里云服务器折扣区
<el-link href="http://aly.ruoyi.vip" type="primary" target="_blank" <el-link href="http://aly.ruoyi.vip" type="primary" target="_blank">>☛☛点我进入☚☚</el-link>
>>☛☛点我进入☚☚</el-link
>
&nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区 &nbsp;&nbsp;&nbsp; 腾讯云服务器秒杀区
<el-link href="http://txy.ruoyi.vip" type="primary" target="_blank" <el-link href="http://txy.ruoyi.vip" type="primary" target="_blank">>☛☛点我进入☚☚</el-link><br />
>>☛☛点我进入☚☚</el-link
><br />
<h4 class="text-danger"> <h4 class="text-danger">
云产品通用红包，可叠加官网常规优惠使用。(仅限新用户) 云产品通用红包，可叠加官网常规优惠使用。(仅限新用户)
</h4> </h4>
...@@ -41,7 +31,7 @@ ...@@ -41,7 +31,7 @@
<el-col :sm="24" :lg="12" style="padding-left: 20px"> <el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>若依后台管理框架</h2> <h2>若依后台管理框架</h2>
<p> <p>
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。 一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了胜利智联油气智能化品牌，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
</p> </p>
<p> <p>
<b>当前版本:</b> <span>v{{ version }}</span> <b>当前版本:</b> <span>v{{ version }}</span>
...@@ -50,21 +40,9 @@ ...@@ -50,21 +40,9 @@
<el-tag type="danger">&yen;免费开源</el-tag> <el-tag type="danger">&yen;免费开源</el-tag>
</p> </p>
<p> <p>
<el-button <el-button type="primary" size="mini" icon="el-icon-cloudy" plain
type="primary" @click="goTarget('https://gitee.com/y_project/RuoYi-Vue')">访问码云</el-button>
size="mini" <el-button size="mini" icon="el-icon-s-home" plain @click="goTarget('http://ruoyi.vip')">访问主页</el-button>
icon="el-icon-cloudy"
plain
@click="goTarget('https://gitee.com/y_project/RuoYi-Vue')"
>访问码云</el-button
>
<el-button
size="mini"
icon="el-icon-s-home"
plain
@click="goTarget('http://ruoyi.vip')"
>访问主页</el-button
>
</p> </p>
</el-col> </el-col>
...@@ -111,32 +89,24 @@ ...@@ -111,32 +89,24 @@
</div> </div>
<div class="body"> <div class="body">
<p> <p>
<i class="el-icon-s-promotion"></i> 官网：<el-link <i class="el-icon-s-promotion"></i> 官网：<el-link href="http://www.ruoyi.vip"
href="http://www.ruoyi.vip" target="_blank">http://www.ruoyi.vip</el-link>
target="_blank"
>http://www.ruoyi.vip</el-link
>
</p> </p>
<p> <p>
<i class="el-icon-user-solid"></i> QQ群：<s> 满937441 </s> <s> 满887144332 </s> <i class="el-icon-user-solid"></i> QQ群：<s> 满937441 </s> <s> 满887144332 </s>
<s> 满180251782 </s> <s> 满104180207 </s> <s> 满186866453 </s> <s> 满201396349 </s> <s> 满180251782 </s> <s> 满104180207 </s> <s> 满186866453 </s> <s> 满201396349 </s>
<s> 满101456076 </s> <s> 满101539465 </s> <s> 满264312783 </s> <s> 满167385320 </s> <s> 满101456076 </s> <s> 满101539465 </s> <s> 满264312783 </s> <s> 满167385320 </s>
<s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s> <s> 满108482800 </s> <s> 满104748341 </s> <s> 满160110482 </s> <s> 满170801498 </s> <s> 满108482800 </s>
<s> 满101046199 </s> <s> 满136919097 </s> <s> 满143961921 </s> <s> 满174951577 </s> <s> 满101046199 </s> <s> 满136919097 </s> <s> 满143961921 </s> <s> 满174951577 </s>
<s> 满161281055 </s> <s> 满138988063 </s> <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=SUc-msaypcqB2UTFif4eqGlBHkKcvMNP&authKey=JdQBouY2PG%2BS%2BCzAfIgbCGNgxyahpfh24IW%2F03rPxGilhqVbisLma%2FFFnt79DHNh&noverify=0&group_code=151450850" target="_blank">151450850</a> <s> 满161281055 </s> <s> 满138988063 </s> <a
href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=SUc-msaypcqB2UTFif4eqGlBHkKcvMNP&authKey=JdQBouY2PG%2BS%2BCzAfIgbCGNgxyahpfh24IW%2F03rPxGilhqVbisLma%2FFFnt79DHNh&noverify=0&group_code=151450850"
target="_blank">151450850</a>
</p> </p>
<p> <p>
<i class="el-icon-chat-dot-round"></i> 微信：<a <i class="el-icon-chat-dot-round"></i> 微信：<a href="javascript:;">/ *若依</a>
href="javascript:;"
>/ *若依</a
>
</p> </p>
<p> <p>
<i class="el-icon-money"></i> 支付宝：<a <i class="el-icon-money"></i> 支付宝：<a href="javascript:;" class="支付宝信息">/ *若依</a>
href="javascript:;"
class="支付宝信息"
>/ *若依</a
>
</p> </p>
</div> </div>
</el-card> </el-card>
...@@ -999,14 +969,8 @@ ...@@ -999,14 +969,8 @@
<span>捐赠支持</span> <span>捐赠支持</span>
</div> </div>
<div class="body"> <div class="body">
<img <img src="@/assets/images/pay.png" alt="donate" width="100%" />
src="@/assets/images/pay.png" <span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>
alt="donate"
width="100%"
/>
<span style="display: inline-block; height: 30px; line-height: 30px"
>你可以请作者喝杯咖啡表示鼓励</span
>
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
...@@ -1039,12 +1003,14 @@ export default { ...@@ -1039,12 +1003,14 @@ export default {
font-size: 17.5px; font-size: 17.5px;
border-left: 5px solid #eee; border-left: 5px solid #eee;
} }
hr { hr {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
border: 0; border: 0;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.col-item { .col-item {
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -1054,7 +1020,11 @@ export default { ...@@ -1054,7 +1020,11 @@ export default {
margin: 0; margin: 0;
} }
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "open sans",
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
font-size: 13px; font-size: 13px;
color: #676a6c; color: #676a6c;
overflow-x: hidden; overflow-x: hidden;
...@@ -1094,4 +1064,3 @@ export default { ...@@ -1094,4 +1064,3 @@ export default {
} }
} }
</style> </style>
src/views/zyyq/cs.vue
<template> <template>
<div class="container"> <div class="container">
<div style="width: 400px"> <div style="width: 400px">
<el-menu <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
default-active="2" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
class="el-menu-vertical-demo" <div v-for="outerItem in collapseDataOuter">
@open="handleOpen" <div v-if="outerItem.cplx === '产品'">
@close="handleClose" <el-submenu :index="outerItem.mc">
background-color="#545c64" <template slot="title">{{ outerItem.mc }}</template>
text-color="#fff" <div v-for="outerItem2 in outerItem.cpChildren">
active-text-color="#ffd04b"> <el-submenu :index="outerItem2.id">
<div v-for="outerItem in collapseDataOuter"> <template slot="title">{{ outerItem2.mc }}</template>
<div v-if="outerItem.cplx === '产品'" > <div v-for="outerItem3 in outerItem2.children2">
<el-submenu :index="outerItem.mc"> <el-menu-item :index="outerItem3.mc">{{ outerItem3.mc }}</el-menu-item>
<template slot="title">{{outerItem.mc}}</template> </div>
<div v-for="outerItem2 in outerItem.cpChildren"> </el-submenu>
<el-submenu :index="outerItem2.id"> </div>
<template slot="title">{{outerItem2.mc}}</template>
<div v-for="outerItem3 in outerItem2.children2"> </el-submenu>
<el-menu-item :index="outerItem3.mc">{{outerItem3.mc}}</el-menu-item>
</div> </div>
</el-submenu> <div v-if="outerItem.cplx === '服务类'">
</div> <el-submenu :index="outerItem.mc">
<template slot="title">{{ outerItem.mc }}</template>
<div v-for="outerItem2 in outerItem.fwlChildren">
<el-menu-item :index="outerItem2.mc">{{ outerItem2.mc }}</el-menu-item>
</div>
</el-submenu>
</el-submenu> </div>
</div> </div>
<div v-if="outerItem.cplx === '服务类'" >
<el-submenu :index="outerItem.mc">
<template slot="title">{{outerItem.mc}}</template>
<div v-for="outerItem2 in outerItem.fwlChildren">
<el-menu-item :index="outerItem2.mc">{{outerItem2.mc}}</el-menu-item>
</div>
</el-submenu>
</div>
</div>
</el-menu> </el-menu>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
......
src/views/zyyq/index copy.vue
<template> <template>
<div class="container"> <div>
<el-row style="margin: 150px auto 100px ;"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
<img src="../../assets/images/background.png" alt="" style=" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
height: 111px; <el-menu-item-group>
width: 877px; <el-submenu index="产品">
/* background-size: cover; <template slot="title">产品</template>
position: absolute; <el-submenu index="产品1">
top: 50%; <template slot="title">产品1</template>
left: 50%; <el-menu-item index="产品1选项1">选项1</el-menu-item>
transform: translate(-50%, -50%); <el-menu-item index="产品1选项2">选项2</el-menu-item>
object-fit: cover; */
" />
</el-row>
<el-row class="content" style="background-color: #f5f8fe;">
<el-col :span="7"
style="padding: 20px; border-radius: 10px; min-height: 712px; overflow-x: auto; background-color: #f5f8fe;">
<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-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.name)">
<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="handleInnerClick(innerItem.name, content.mc, content.id, content.remark)"
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new"
style="width: 28px; height: 28px; margin-left: -30px; vertical-align: middle;" />
<span
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span>
<span :style="{
fontFamily: 'PingFang SC',
fontWeight: '500',
fontSize: '15px',
color: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : '#222222',
textDecoration: activeNameInner === innerItem.name + '-' + content.mc ? 'underline' : 'none',
textDecorationColor: activeNameInner === innerItem.name + '-' + content.mc ? '#165BFF' : 'transparent',
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0'
}">
{{ content.mc }}<span v-if="content.remark"> ({{ content.remark }})</span>
</span>
</el-menu-item>
</el-submenu>
</el-submenu> </el-submenu>
</el-menu> <el-menu-item index="产品2">产品2</el-menu-item>
</el-submenu>
<el-menu v-if="activeNameOuter === '服务类'" :default-active="activeNameInner" class="product-menu"
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'" <el-submenu index="服务类">
:default-openeds="defaultOpeneds"> <template slot="title">服务类</template>
<!-- 外层菜单 --> <el-menu-item index="服务类1">选项1</el-menu-item>
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" <el-menu-item index="服务类2">选项2</el-menu-item>
@click.native="setActiveOuter(outerItem.cplx)"> <el-menu-item index="服务类3">选项3</el-menu-item>
<template #title> </el-submenu>
<img src="../../assets/images/tag.png" alt=""> </el-menu-item-group>
<span </el-menu>
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 }">
<img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new"
style="width: 28px; height: 28px; margin-left: -30px; vertical-align: middle;" />
<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 }}<span v-if="service.remark"> ({{ service.remark }})</span>
</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-col>
<!-- 显示选项卡的内容 -->
<el-col v-if="activeNameOuter === '产品'" :span="17"
style="border-radius: 10px; min-height: 730px; 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: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${cpjj}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second" :class="{ 'custom-active2': activeName === 'second' }">
<el-card style="width: 100%; height: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${gntd}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third" :class="{ 'custom-active3': activeName === 'third' }">
<el-card style="width: 100%; height: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yycx}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="fourth" :class="{ 'custom-active4': activeName === 'fourth' }">
<el-card style="width: 100%; height: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${yfjs}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- <div class="remark">
<div>{{ this.remark }}</div>
</div> -->
</div>
</el-col>
<!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === '服务类'" :span="17"
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: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${tdjs}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务特色" name="second">
<el-card style="width: 100%; height: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwts}`"></div>
</el-card>
</el-tab-pane>
<el-tab-pane label="服务案例" name="third">
<el-card style="width: 100%; height: 712px; overflow-y: auto;">
<div v-html="`<style>
.table-container table { border: 1px solid #888; border-collapse: collapse; }
.table-container table tbody tr td { border: 1px solid #999; padding: 8px; text-align: left; }
</style>${fwal}`"></div>
</el-card>
</el-tab-pane>
</el-tabs>
<!-- <div class="remark">
<div>{{ this.remark }}</div>
</div> -->
</div>
</el-col>
</el-row>
</div> </div>
</template> </template>
<script>
import { getListcx, getListdt, } from "@/api/sy.js"; <script>
export default { export default {
name: "gasDigitization",
// components: { footerNav },
data() {
return {
remark: '', // 新增的remark属性
defaultOpeneds: [],// 根据需要初始化 defaultOpeneds
selectedId: null, // 用于存储选中项的ID
cpjj: '',
gntd: '',
yycx: '',
yfjs: '',
tdjs: '',
fwts: '',
fwal: '',
activeNameOuter: "", // 默认选中的第一级选项
activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [],
activeName: "first",
name: null,
ipdz: null,
yl1: null,
showDialog: false, // 控制对话框显示的变量
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}`;
// console.log(this.activeNameInner, ' this.activeNameInner');
// 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}`;
// console.log(this.activeNameInner, 'this.activeNameInner');
// this.activeServiceId = firstProductChild.id; // 设置 activeServiceId 为第一项的 ID
// console.log(this.activeServiceId, 'Selected Product ID');
// this.getListdt(this.activeServiceId);
// }
// }
// }
// }
},
mounted() {
this.getList();
},
methods: {
// 获取列表数据
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];
if (firstContent) {
this.setActiveInner(firstInnerItem.name, firstContent.mc, firstContent.id); // 设置默认内层菜单内容
}
this.defaultOpeneds = [firstOuterItem.px, firstInnerItem.px]; // 设置展开的菜单
}
}
});
},
// 设置当前选中的外层菜单
setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 更新外层菜单
console.log('Outer menu set to:', this.activeNameOuter);
// 根据选中的外层菜单类型设置默认的内层菜单
const firstInnerItem = this.collapseDataOuter.find(item => item.cplx === cplx);
console.log(firstInnerItem, 'firstInnerItem');
debugger;
if (firstInnerItem) {
console.log(firstInnerItem, 'firstInnerItem');
// 如果是产品，选择第三级菜单的第一项
if (cplx === '产品' && firstInnerItem.cpChildren.length > 0) {
const firstInner = firstInnerItem.cpChildren[0];
this.activeNameInner = `${firstInner.name}-${firstInner.children2[0]?.mc || ''}`; // 设置第三级菜单的第一项
this.setActiveInner(firstInner.name, firstInner.children2[0]?.mc, firstInner.children2[0]?.id); // 设置内容
}
// 如果是服务类，选择第二级菜单的第一项
else if (cplx === '服务类' && firstInnerItem.fwlChildren.length > 0) {
const firstService = firstInnerItem.fwlChildren[0];
this.activeNameInner = `${firstInnerItem.mc}-${firstService.mc}`; // 设置第二级菜单的第一项
this.handleServiceClick(firstInnerItem.mc, firstService.mc, firstService.id); // 设置内容
}
}
},
// 处理内层菜单点击
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(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; // 更新活动名称
console.log(this.activeName, ' this.activeName');
},
},
};
</script>
<style scoped lang="scss">
::v-deep.tabs {
display: flex;
align-items: flex-start;
}
::v-deep.custom-tabs {
flex-grow: 1;
// padding-right: 10px
}
::v-deep.remark {
position: absolute;
top: 20px;
/* 向上移动 */
right: 30px;
/* 向左移动 */
white-space: nowrap;
font-size: 18px;
// font-weight: bold;
font-family: PingFang SC;
// font-weight: 800;
// color: #222222;
line-height: 40px
}
::v-deep.menu-item-active {
background-color: #ffffff;
/* 选中项背景白色 */
}
::v-deep.related-menu-item-active {
background-color: #ffffff;
/* 兄弟项背景白色 */
}
::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色
}
::v-deep img {
max-width: 90% !important;
height: auto !important;
}
::v-deep video {
max-width: 90% !important;
height: auto !important;
}
::v-deep .rounded-corner-start {
border-radius: 10px 0 0 0 !important;
}
::v-deep.rounded-corner-end {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 其他可能需要的样式 */
}
::v-deep.el-submenu .el-menu-item {
height: 39px;
line-height: 50px;
padding: 0 45px;
min-width: 200px;
}
::v-deep.el-submenu .el-submenu__title {
border-bottom-color: #1890ff;
height: 46px;
}
::v-deep.custom-tabs .el-tabs__nav .el-tabs__item {
padding: 0 20px;
height: 43px;
box-sizing: border-box;
line-height: 40px;
display: inline-block;
list-style: none;
font-size: 15px;
font-weight: 500;
color: #303133;
position: relative;
width: 120px;
text-align: center;
}
// ::v-deep.el-tabs .el-tabs__header.el-tabs__nav .el-tabs__item {
// color: #ff0000;
// /* 设置字体颜色 */
// }
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: 1px none;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1):hover {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3):hover {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4):hover {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1).is-active {
background-color: #165bff;
color: white;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3).is-active {
background-color: #165bff;
color: white;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4).is-active {
background-color: #165bff;
color: white;
border-radius: 0 10px 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(1) {
background-color: #d8e1eb;
color: black;
border-radius: 10px 0 0 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(2) {
background-color: #d8e1eb;
color: black;
;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(3) {
background-color: #d8e1eb;
color: black;
border-radius: 0;
}
::v-deep .el-tabs__nav .el-tabs__item:nth-child(4) {
background-color: #d8e1eb;
color: black;
border-radius: 0 10px 0 0;
}
::v-deep.el-tabs .el-tabs__header {
padding: 0;
position: relative;
margin: 0 0 0px !important;
}
::v-deep.product-menu {
// 内层菜单展开时的背景色
.inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色
}
}
// 默认状态的箭头颜色
.el-submenu {
.el-submenu__icon-arrow {
color: #000; // 默认箭头颜色
}
}
}
::v-deep.product-menu .menu-item-active {
color: #165BFF !important;
/* 选中菜单项的字体颜色 */
}
::v-deep.product-menu .el-menu-item {
background-color: #ffffff;
/* 第三级菜单的背景色 */
}
// .text-align {
// display: flex;
// justify-content: flex-end;
// margin: 0px 10px;
// }
// .text {
// margin-left: auto;
// margin: 3px 15px;
// }
// .row {
// display: flex;
// flex-direction: row;
// align-items: inherit;
// justify-content: center;
// margin: 20px 0 20px -30px;
// }
// .box {
// position: relative;
// top: -20px;
// left: 0;
// margin-bottom: -20px;
// width: 100%;
// min-height: 102vh;
// background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
// background-repeat: no-repeat;
// background-position: left top;
// background-color: #f55202;
// }
.container {
overflow-y: auto;
height: 1080px;
background-image: url(../../assets/images/background1.png) !important;
// background-size: cover;
background-size: 100% 60%;
background-repeat: no-repeat;
}
h1 {
text-align: center;
color: #333;
}
.content {
margin: 20px auto;
max-width: 70%;
min-height: calc(100vh - 420px);
padding: 20px;
background: #F5F8FE;
border-radius: 10px 10px 0px 0px;
/* 设置背景色 */
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.bt {
text-indent: 3.6em;
margin: 20px auto;
/* max-width: 70%; */
width: 1200px;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow-y: auto;
}
h2 {
font-size: 24px;
color: #333;
margin-bottom: 15px;
font-family: "方正小标宋", "Fangzheng Xiaobiao Song", serif;
}
p {
font-size: 16px;
color: #555;
line-height: 1.6;
font-family: "FangSong_GB2312";
}
.title {
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #c80000;
line-height: 30px;
}
.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 14px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
} }
</script>
.custom-title { <style lang="scss" scoped></style>
font-family: PingFang SC; \ No newline at end of file
font-weight: 800;
font-size: 16px;
color: #165bff;
line-height: 26px;
}
</style>
src/views/zyyq/index.vue
...@@ -13,96 +13,96 @@ ...@@ -13,96 +13,96 @@
" /> " />
</el-row> </el-row>
<el-row class="content" style="background-color: #f5f8fe;"> <el-row class="content" style="background-color: #f5f8fe;">
<el-col :span="7" <el-col :span="7" style="padding: 20px; border-radius: 10px; height: 712px; overflow-y: auto; ">
style="padding: 20px; border-radius: 10px; min-height: 712px; overflow-x: auto; background-color: #f5f8fe;"> <el-menu :default-active="activeNameInner" class="el-menu-vertical-demo" :background-color="'transparent'"
<el-menu v-if="activeNameOuter === '产品'" :default-active="activeNameInner" class="product-menu" text-color="#333" active-text-color="#409EFF">
:background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'" <div v-for="outerItem in collapseDataOuter" :key="outerItem.px">
:default-openeds="defaultOpeneds"> <div v-if="outerItem.cplx === '产品'">
<!-- 外层菜单 --> <el-submenu :index="outerItem.mc">
<el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px" <template slot="title">
@click.native="setActiveOuter(outerItem.cplx)"> <img src="../../assets/images/tag.png" alt="">
<template #title> <span
<img src="../../assets/images/tag.png" alt=""> style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;">
<span {{ outerItem.mc }}
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> </span>
{{ outerItem.mc }} </template>
</span> <div v-for="outerItem2 in outerItem.cpChildren" :key="outerItem2.mc">
</template> <el-submenu :index="outerItem2.mc">
<template slot="title">
<!-- 第二级菜单 --> <span
<el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px" style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;">
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" {{ outerItem2.mc }}
@click.native="setActiveInner(innerItem.name)"> </span>
<template #title> </template>
<span <div v-for="outerItem3 in outerItem2.children2" :key="outerItem3.mc">
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 17px; color: #222222; line-height: 26px;"> <el-menu-item :index="outerItem3.name + '-' + outerItem3.mc"
{{ innerItem.mc }} @click.native="handleInnerClick(outerItem2.name, outerItem3.mc, outerItem3.id, outerItem3.remark, outerItem.cplx)"
</span> :class="{ 'menu-item-active': activeNameInner === outerItem3.name + '-' + outerItem3.mc }">
</template> <img v-if="outerItem3.zx === '1'" src="../../assets/images/new.png" alt="new"
style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
<!-- 第三级菜单 --> <span
<el-menu-item v-for="content in innerItem.children2" :key="content.id" :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
:index="innerItem.name + '-' + content.mc"
@click.native="handleInnerClick(innerItem.name, content.mc, content.id, content.remark)" <span :style="{
:class="{ 'menu-item-active': activeNameInner === innerItem.name + '-' + content.mc }">
<img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new" fontFamily: 'PingFang SC',
style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" /> fontWeight: '500',
<span fontSize: '15px',
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span> color: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : '#222222',
<span :style="{ textDecoration: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? 'underline' : 'none',
fontFamily: 'PingFang SC', textDecorationColor: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '#165BFF' : 'transparent',
fontWeight: '500', textUnderlineOffset: activeNameInner === outerItem3.name + '-' + outerItem3.mc ? '8px' : '0',
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', {{ outerItem3.mc }}<span v-if="outerItem3.remark"> ({{ outerItem3.remark }})</span>
textUnderlineOffset: activeNameInner === innerItem.name + '-' + content.mc ? '8px' : '0' </span>
}"> </el-menu-item>
{{ content.mc }}<span v-if="content.remark"> ({{ content.remark }})</span> </div>
</span> </el-submenu>
</el-menu-item> </div>
</el-submenu> </el-submenu>
</el-submenu> </div>
</el-menu>
<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 <div v-for="service in outerItem.fwlChildren" :key="service.mc">
style="font-family: 'PingFang SC'; font-weight: 800; font-size: 23px; color: #222222; line-height: 40px;"> <el-menu-item :index="outerItem.mc + '-' + service.mc"
{{ outerItem.mc }} @click.native="handleServiceClick(outerItem.mc, service.mc, service.id, service.remark)"
</span> :class="{ 'menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc }">
</template> <img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new"
<!-- 服务类的第二级菜单 --> style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" />
<el-menu-item v-for="service in outerItem.fwlChildren" :key="service.id" :index="service.mc" <span
@click.native="handleServiceClick(outerItem.mc, service.mc, service.id, service.remark)" :style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginLeft: '6px' }"></span>
:class="{ 'menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc, 'service-menu-item-active': activeNameInner === outerItem.mc + '-' + service.mc }">
<img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new" <span :style="{
style="width: 20px; height: 20px; margin-left: -20px; vertical-align: middle;" /> fontFamily: 'PingFang SC',
<span fontWeight: '500',
:style="{ width: '6px', height: '6px', background: '#165BFF', borderRadius: '50%', display: 'inline-block', marginRight: '10px' }"></span> fontSize: '15px',
<span :style="{ color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222',
fontFamily: 'PingFang SC', textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none',
fontWeight: '500', textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent',
fontSize: '15px', textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0'
color: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : '#222222', }">
textDecoration: activeNameInner === outerItem.mc + '-' + service.mc ? 'underline' : 'none', {{ service.mc }}<span v-if="service.remark"> ({{ service.remark }})</span>
textDecorationColor: activeNameInner === outerItem.mc + '-' + service.mc ? '#165BFF' : 'transparent', </span>
textUnderlineOffset: activeNameInner === outerItem.mc + '-' + service.mc ? '8px' : '0' </el-menu-item>
}"> </div>
{{ service.mc }}<span v-if="service.remark"> ({{ service.remark }})</span> </el-submenu>
</span> </div>
</el-menu-item> </div>
</el-submenu>
</el-menu> </el-menu>
</el-col> </el-col>
<!-- 显示选项卡的内容 --> <!-- 显示选项卡的内容 -->
<el-col v-if="activeNameOuter === '产品'" :span="17" <el-col v-if="selectedCplx === '产品'" :span="17"
style="border-radius: 10px; min-height: 730px; background-color: #f5f8fe;"> style="border-radius: 10px; min-height: 730px; background-color: #f5f8fe;">
<div class="tabs"> <div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
</div> </div>
</el-col> </el-col>
<!-- 外层折叠项 2 选中的内容 --> <!-- 外层折叠项 2 选中的内容 -->
<el-col v-else-if="activeNameOuter === '服务类'" :span="17" <el-col v-else-if="selectedCplx === '服务类'" :span="17"
style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;"> style="border-radius: 10px; min-height: 700px; background-color: #f5f8fe;">
<div class="tabs"> <div class="tabs">
<el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card" class="custom-tabs">
...@@ -192,6 +192,7 @@ export default { ...@@ -192,6 +192,7 @@ export default {
data() { data() {
return { return {
selectedCplx: '', // 添加这个属性来存储当前选中的类别
isOuterMenuClicked: false, isOuterMenuClicked: false,
remark: '', // 新增的remark属性 remark: '', // 新增的remark属性
defaultOpeneds: [],// 根据需要初始化 defaultOpeneds defaultOpeneds: [],// 根据需要初始化 defaultOpeneds
...@@ -203,7 +204,7 @@ export default { ...@@ -203,7 +204,7 @@ export default {
tdjs: '', tdjs: '',
fwts: '', fwts: '',
fwal: '', fwal: '',
activeNameOuter: "", // 默认选中的第一级选项 activeNameOuter: '', // 当前外层菜单
activeNameInner: "", // 默认选中的第二级选项 activeNameInner: "", // 默认选中的第二级选项
collapseDataOuter: [], collapseDataOuter: [],
activeName: "first", activeName: "first",
...@@ -232,6 +233,7 @@ export default { ...@@ -232,6 +233,7 @@ export default {
if (this.collapseDataOuter.length > 0) { if (this.collapseDataOuter.length > 0) {
const firstOuterItem = this.collapseDataOuter[0]; const firstOuterItem = this.collapseDataOuter[0];
this.activeNameOuter = firstOuterItem.cplx; // 设置默认外层菜单 this.activeNameOuter = firstOuterItem.cplx; // 设置默认外层菜单
this.selectedCplx = firstOuterItem.cplx; // 更新选中的类别
// 如果外层菜单有子菜单，设置第一个内层菜单和内容 // 如果外层菜单有子菜单，设置第一个内层菜单和内容
if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) { if (firstOuterItem.cpChildren && firstOuterItem.cpChildren.length > 0) {
...@@ -248,6 +250,7 @@ export default { ...@@ -248,6 +250,7 @@ export default {
}); });
}, },
// 设置当前选中的外层菜单 // 设置当前选中的外层菜单
setActiveOuter(cplx) { setActiveOuter(cplx) {
this.activeNameOuter = cplx; // 更新外层菜单 this.activeNameOuter = cplx; // 更新外层菜单
...@@ -257,41 +260,30 @@ export default { ...@@ -257,41 +260,30 @@ export default {
const firstInnerItem = this.collapseDataOuter.find(item => item.cplx === cplx); const firstInnerItem = this.collapseDataOuter.find(item => item.cplx === cplx);
console.log(firstInnerItem, 'firstInnerItem'); console.log(firstInnerItem, 'firstInnerItem');
// if (firstInnerItem) {
// // 仅在第一次点击外层菜单时设置默认值
// if (!this.isOuterMenuClicked) {
// this.isOuterMenuClicked = true; // 设置状态为已点击外层菜单
// // 如果是产品，选择第三级菜单的第一项
// if (cplx === '产品' && firstInnerItem.cpChildren.length > 0) {
// const firstInner = firstInnerItem.cpChildren[0];
// this.activeNameInner = `${firstInner.name}-${firstInner.children2[0]?.mc || ''}`; // 设置第三级菜单的第一项
// this.setActiveInner(firstInner.name, firstInner.children2[0]?.mc, firstInner.children2[0]?.id); // 设置内容
// }
// // 如果是服务类，选择第二级菜单的第一项
// else if (cplx === '服务类' && firstInnerItem.fwlChildren.length > 0) {
// const firstService = firstInnerItem.fwlChildren[0];
// this.activeNameInner = `${firstInnerItem.mc}-${firstService.mc}`; // 设置第二级菜单的第一项
// this.handleServiceClick(firstInnerItem.mc, firstService.mc, firstService.id); // 设置内容
// }
// }
// }
},
},
handleInnerClick(innerName, contentName, contentId) { handleInnerClick(innerName, contentName, contentId, remark, cplx) {
this.isOuterMenuClicked = false; // 取消外层菜单点击状态
this.activeNameInner = `${innerName}-${contentName}`; // 更新内层菜单 this.activeNameInner = `${innerName}-${contentName}`; // 更新内层菜单
this.selectedCplx = cplx; // 更新选中的类别
// 打印选中的信息
console.log(`选中的内容: 内层名称: ${innerName}, 内容名称: ${contentName}, 内容ID: ${contentId}, 类别: ${cplx}`);
// 获取内容相关的数据 // 获取内容相关的数据
this.getListdt(contentId); this.getListdt(contentId);
}, },
handleServiceClick(outerName, serviceName, serviceId) { handleServiceClick(outerItemName, serviceName, serviceId, remark) {
this.isOuterMenuClicked = false; // 取消外层菜单点击状态 this.activeNameInner = `${outerItemName}-${serviceName}`; // 更新内层菜单
this.activeNameInner = `${outerName}-${serviceName}`; // 更新内层菜单 this.selectedCplx = '服务类'; // 设置 cplx 为 '服务类'
// 获取服务相关的数据 // 打印选中的信息
console.log(`选中的内容: 外层名称: ${outerItemName}, 服务名称: ${serviceName}, 服务ID: ${serviceId}, 类别: ${this.selectedCplx}`);
// 获取内容相关的数据
this.getListdt(serviceId); this.getListdt(serviceId);
}, },
// 设置当前选中的内层菜单 // 设置当前选中的内层菜单
setActiveInner(innerName, content = '', id = null) { setActiveInner(innerName, content = '', id = null) {
if (content) { if (content) {
...@@ -313,8 +305,11 @@ export default { ...@@ -313,8 +305,11 @@ export default {
this.yycx = res.data.yycx; this.yycx = res.data.yycx;
this.yfjs = res.data.yfjs; this.yfjs = res.data.yfjs;
this.tdjs = res.data.tdjs; this.tdjs = res.data.tdjs;
this.fwts = res.data.fwts; this.fwts = res.data.fwts;
this.fwal = res.data.fwal; this.fwal = res.data.fwal;
this.remark = res.data.remark; this.remark = res.data.remark;
}).catch(error => { }).catch(error => {
console.error('Error fetching data:', error); // 错误处理 console.error('Error fetching data:', error); // 错误处理
...@@ -341,6 +336,10 @@ export default { ...@@ -341,6 +336,10 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep.el-menu {
border-right: 1px none !important;
}
::v-deep.tabs { ::v-deep.tabs {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
...@@ -366,19 +365,24 @@ export default { ...@@ -366,19 +365,24 @@ export default {
line-height: 40px line-height: 40px
} }
::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 {
// background-color: #ee0606 !important; // 服务类选中项背景色为白色
// }
// ::v-deep .el-menu .el-menu--inline {
// background-color: #ee0606 !important; // 服务类选中项背景色为白色
// }
::v-deep .service-menu-item-active {
background-color: #ffffff !important; // 服务类选中项背景色为白色
}
::v-deep img { ::v-deep img {
max-width: 90% !important; max-width: 90% !important;
...@@ -519,35 +523,35 @@ export default { ...@@ -519,35 +523,35 @@ export default {
} }
::v-deep.product-menu { // ::v-deep.product-menu {
// 内层菜单展开时的背景色 // // 内层菜单展开时的背景色
.inner-submenu-active { // .inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色 // background-color: #ffffff; // 内层菜单背景色为白色
// 设置箭头图标颜色为蓝色 // // 设置箭头图标颜色为蓝色
.el-submenu__icon-arrow { // .el-submenu__icon-arrow {
color: #165BFF; // 改变箭头颜色 // 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 {
// display: flex; // display: flex;
...@@ -684,4 +688,4 @@ p { ...@@ -684,4 +688,4 @@ p {
color: #165bff; color: #165bff;
line-height: 26px; line-height: 26px;
} }
</style> </style>
\ No newline at end of file
src/views/zyyqsj/index.vue
...@@ -2,10 +2,7 @@ ...@@ -2,10 +2,7 @@
<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 <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;
...@@ -14,241 +11,174 @@ ...@@ -14,241 +11,174 @@
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; height: 100vh"> <el-row class="content" style="background-color: #f5f8fe; height: 100vh">
<el-col <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="
:xs="24"
:sm="24"
:md="24"
:lg="24"
:xl="24"
style="
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
height: auto; height: auto;
background-color: #f5f8fe; background-color: #f5f8fe;
" ">
> <el-menu v-if="activeNameOuter === '产品'" :default-active="activeNameInner" class="product-menu"
<el-menu :background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'"
v-if="activeNameOuter === '产品'" :default-openeds="defaultOpeneds">
:default-active="activeNameInner"
class="product-menu"
:background-color="'transparent'"
:text-color="'#333'"
:active-text-color="'#409EFF'"
:default-openeds="defaultOpeneds"
>
<!-- 外层菜单 --> <!-- 外层菜单 -->
<el-submenu <el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
v-for="outerItem in collapseDataOuter" @click.native="setActiveOuter(outerItem.cplx)">
:key="outerItem.px"
:index="outerItem.px"
@click.native="setActiveOuter(outerItem.cplx)"
>
<template #title> <template #title>
<img src="../../assets/images/tag.png" alt="" /> <img src="../../assets/images/tag.png" alt="" />
<span <span style="
style="
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 800; font-weight: 800;
font-size: 23px; font-size: 23px;
color: #222222; color: #222222;
line-height: 40px; line-height: 40px;
" ">
>
{{ outerItem.mc }} {{ outerItem.mc }}
</span> </span>
</template> </template>
<!-- 第二级菜单 --> <!-- 第二级菜单 -->
<el-submenu <el-submenu v-for="innerItem in outerItem.cpChildren" :key="innerItem.id" :index="innerItem.px"
v-for="innerItem in outerItem.cpChildren"
:key="innerItem.id"
:index="innerItem.px"
:class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }" :class="{ 'inner-submenu-active': isInnerActive(innerItem.name) }"
@click.native="setActiveInner(innerItem.mc)" @click.native="setActiveInner(innerItem.mc)">
>
<template #title> <template #title>
<span <span style="
style="
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 800; font-weight: 800;
font-size: 17px; font-size: 17px;
color: #222222; color: #222222;
line-height: 26px; line-height: 26px;
" ">
>
{{ innerItem.mc }} {{ innerItem.mc }}
</span> </span>
</template> </template>
<!-- 第三级菜单 --> <!-- 第三级菜单 -->
<el-menu-item <el-menu-item v-for="content in innerItem.children2" :key="content.id"
v-for="content in innerItem.children2" :index="innerItem.name + '-' + content.mc" @click.native="
:key="content.id"
:index="innerItem.name + '-' + content.mc"
@click.native="
handleInnerClick( handleInnerClick(
innerItem.name, innerItem.name,
content.mc, content.mc,
content.id, content.id,
content.remark content.remark
) )
" " :class="{
:class="{
'menu-item-active': 'menu-item-active':
activeNameInner === innerItem.name + '-' + content.mc, activeNameInner === innerItem.name + '-' + content.mc,
}" }">
> <span :style="{
<span width: '6px',
:style="{ height: '6px',
width: '6px', background: '#165BFF',
height: '6px', borderRadius: '50%',
background: '#165BFF', display: 'inline-block',
borderRadius: '50%', marginRight: '10px',
display: 'inline-block', }"></span>
marginRight: '10px', <span :style="{
}" fontFamily: 'PingFang SC',
></span> fontWeight: '500',
<span fontSize: '15px',
:style="{ color:
fontFamily: 'PingFang SC', activeNameInner === innerItem.name + '-' + content.mc
fontWeight: '500', ? '#165BFF'
fontSize: '15px', : '#222222',
color: textDecoration:
activeNameInner === innerItem.name + '-' + content.mc activeNameInner === innerItem.name + '-' + content.mc
? '#165BFF' ? 'underline'
: '#222222', : 'none',
textDecoration: textDecorationColor:
activeNameInner === innerItem.name + '-' + content.mc activeNameInner === innerItem.name + '-' + content.mc
? 'underline' ? '#165BFF'
: 'none', : 'transparent',
textDecorationColor: textUnderlineOffset:
activeNameInner === innerItem.name + '-' + content.mc activeNameInner === innerItem.name + '-' + content.mc
? '#165BFF' ? '8px'
: 'transparent', : '0',
textUnderlineOffset: }">
activeNameInner === innerItem.name + '-' + content.mc
? '8px'
: '0',
}"
>
{{ content.mc }} {{ content.mc }}
</span> </span>
<img <img v-if="content.zx === '1'" src="../../assets/images/new.png" alt="new" style="
v-if="content.zx === '1'"
src="../../assets/images/new.png"
alt="new"
style="
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: 5px; margin-left: 5px;
vertical-align: middle; vertical-align: middle;
" " />
/>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
</el-submenu> </el-submenu>
</el-menu> </el-menu>
<el-menu <el-menu v-if="activeNameOuter === '服务类'" :default-active="activeNameInner" class="product-menu"
v-if="activeNameOuter === '服务类'" :background-color="'transparent'" :text-color="'#333'" :active-text-color="'#409EFF'"
:default-active="activeNameInner" :default-openeds="defaultOpeneds">
class="product-menu"
:background-color="'transparent'"
:text-color="'#333'"
:active-text-color="'#409EFF'"
:default-openeds="defaultOpeneds"
>
<!-- 外层菜单 --> <!-- 外层菜单 -->
<el-submenu <el-submenu v-for="outerItem in collapseDataOuter" :key="outerItem.px" :index="outerItem.px"
v-for="outerItem in collapseDataOuter" @click.native="setActiveOuter(outerItem.cplx)">
:key="outerItem.px"
:index="outerItem.px"
@click.native="setActiveOuter(outerItem.cplx)"
>
<template #title> <template #title>
<img src="../../assets/images/tag.png" alt="" /> <img src="../../assets/images/tag.png" alt="" />
<span <span style="
style="
font-family: 'PingFang SC'; font-family: 'PingFang SC';
font-weight: 800; font-weight: 800;
font-size: 23px; font-size: 23px;
color: #222222; color: #222222;
line-height: 40px; line-height: 40px;
" ">
>
{{ outerItem.mc }} {{ outerItem.mc }}
</span> </span>
</template> </template>
<!-- 服务类的第二级菜单 --> <!-- 服务类的第二级菜单 -->
<el-menu-item <el-menu-item v-for="service in outerItem.fwlChildren" :key="service.id" :index="service.mc" @click.native="
v-for="service in outerItem.fwlChildren" handleServiceClick(
:key="service.id" outerItem.mc,
:index="service.mc" service.mc,
@click.native=" service.id,
handleServiceClick( service.remark
outerItem.mc, )
service.mc, " :class="{
service.id,
service.remark
)
"
:class="{
'menu-item-active': 'menu-item-active':
activeNameInner === outerItem.mc + '-' + service.mc, activeNameInner === outerItem.mc + '-' + service.mc,
'service-menu-item-active': 'service-menu-item-active':
activeNameInner === outerItem.mc + '-' + service.mc, activeNameInner === outerItem.mc + '-' + service.mc,
}" }">
> <span :style="{
<span width: '6px',
:style="{ height: '6px',
width: '6px', background: '#165BFF',
height: '6px', borderRadius: '50%',
background: '#165BFF', display: 'inline-block',
borderRadius: '50%', marginRight: '10px',
display: 'inline-block', }"></span>
marginRight: '10px', <span :style="{
}" fontFamily: 'PingFang SC',
></span> fontWeight: '500',
<span fontSize: '15px',
:style="{ color:
fontFamily: 'PingFang SC', activeNameInner === outerItem.mc + '-' + service.mc
fontWeight: '500', ? '#165BFF'
fontSize: '15px', : '#222222',
color: textDecoration:
activeNameInner === outerItem.mc + '-' + service.mc activeNameInner === outerItem.mc + '-' + service.mc
? '#165BFF' ? 'underline'
: '#222222', : 'none',
textDecoration: textDecorationColor:
activeNameInner === outerItem.mc + '-' + service.mc activeNameInner === outerItem.mc + '-' + service.mc
? 'underline' ? '#165BFF'
: 'none', : 'transparent',
textDecorationColor: textUnderlineOffset:
activeNameInner === outerItem.mc + '-' + service.mc activeNameInner === outerItem.mc + '-' + service.mc
? '#165BFF' ? '8px'
: 'transparent', : '0',
textUnderlineOffset: }">
activeNameInner === outerItem.mc + '-' + service.mc
? '8px'
: '0',
}"
>
{{ service.mc }} {{ service.mc }}
<!-- 判断 zx 是否为 1，如果是则显示图片 --> <!-- 判断 zx 是否为 1，如果是则显示图片 -->
<img <img v-if="service.zx === '1'" src="../../assets/images/new.png" alt="new" style="
v-if="service.zx === '1'"
src="../../assets/images/new.png"
alt="new"
style="
width: 40px; width: 40px;
height: 40px; height: 40px;
margin-left: 5px; margin-left: 5px;
vertical-align: middle; vertical-align: middle;
" " />
/>
</span> </span>
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
...@@ -598,7 +528,7 @@ export default { ...@@ -598,7 +528,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;
} }
...@@ -681,6 +611,7 @@ export default { ...@@ -681,6 +611,7 @@ export default {
} }
::v-deep.product-menu { ::v-deep.product-menu {
// 内层菜单展开时的背景色 // 内层菜单展开时的背景色
.inner-submenu-active { .inner-submenu-active {
background-color: #ffffff; // 内层菜单背景色为白色 background-color: #ffffff; // 内层菜单背景色为白色
...@@ -830,6 +761,7 @@ p { ...@@ -830,6 +761,7 @@ p {
color: #165bff; color: #165bff;
line-height: 26px; line-height: 26px;
} }
.el-menu { .el-menu {
border-right: 1px none !important; border-right: 1px none !important;
} }
......
vue.config.js
...@@ -7,7 +7,7 @@ function resolve(dir) { ...@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require("compression-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin");
const name = process.env.VUE_APP_TITLE || "若依管理系统"; // 网页标题 const name = process.env.VUE_APP_TITLE || "胜利智联油气智能化品牌"; // 网页标题
const port = process.env.port || process.env.npm_config_port || 80; // 端口 const port = process.env.port || process.env.npm_config_port || 80; // 端口
...@@ -35,10 +35,10 @@ module.exports = { ...@@ -35,10 +35,10 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8081`, // target: `http://localhost:8081`,
// target: `http://192.168.31.190:8899`, // target: `http://192.168.31.190:8899`,
// target: `http://192.168.31.95:8081`, // target: `http://192.168.31.95:8081`,
// target: `http://192.168.31.95:8081`, target: `http://192.168.31.95:8081`,
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
......
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