Skip to content

Y
yq-ui
Commit ed5a0dbb by “zhaodan”
Options

zd

parent 07f75b2c
Showing with 179 additions and 45 deletions
src/views/gasDigitization/index.vue
<template> <template>
<div class="container"> <div class="container">
<el-row> <el-row>
<img src="../../assets/images/background1.png" alt="" style=" <img
src="../../assets/images/background1.png"
alt=""
style="
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 20px; margin-top: 20px;
height: 300px; height: 300px;
width: 100%; width: 100%;
float: none; float: none;
margin: 0 auto; margin: 0 auto;
" /> "
<img src="../../assets/images/bt.png" alt="" style=" />
<img
src="../../assets/images/bt.png"
alt=""
style="
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -17,10 +24,86 @@ ...@@ -17,10 +24,86 @@
height: 200px; height: 200px;
width: 50%; width: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
" /> "
/>
</el-row> </el-row>
<el-row style="margin-top: -10px"> <el-row class="content">
<div class="content"> <el-col
:span="4"
style="padding: 20px; background-color: #fff; border-radius: 10px"
>
<!-- <el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="item in collapseData"
:key="item.name"
:title="item.title"
:name="item.name"
>
<template #title>
<span class="custom-title">{{ item.title }}</span>
</template>
<div
v-for="content in item.contents"
:key="content"
style="display: flex; flex-direction: row; align-items: center"
>
<span
style="
width: 5px;
height: 5px;
background: #165bff;
border-radius: 50%;
display: inline-block;
"
></span>
<a class="bttext">{{ content }}</a>
</div>
</el-collapse-item>
</el-collapse> -->
<el-collapse v-model="activeNameOuter" accordion>
<!-- 外层 collapse 循环 -->
<el-collapse-item
v-for="outerItem in collapseDataOuter"
:key="outerItem.name"
:title="outerItem.title"
:name="outerItem.name"
>
<el-collapse v-model="activeNameInner" accordion>
<el-collapse-item
v-for="innerItem in outerItem.collapseData"
:key="innerItem.name"
:name="innerItem.name"
>
<template #title>
<span class="custom-title">{{ innerItem.title }}</span>
</template>
<div
v-for="content in innerItem.contents"
:key="content"
style="
display: flex;
flex-direction: row;
align-items: center;
"
>
<span
style="
width: 5px;
height: 5px;
background: #165bff;
border-radius: 50%;
display: inline-block;
"
></span>
<a class="bttext">{{ content }}</a>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</el-col>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick" type="card"> <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
<el-tab-pane label="产品简介" name="first"> <el-tab-pane label="产品简介" name="first">
<div class="text" v-html="bmjj"></div> <div class="text" v-html="bmjj"></div>
...@@ -36,11 +119,7 @@ ...@@ -36,11 +119,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
...@@ -48,13 +127,51 @@ ...@@ -48,13 +127,51 @@
// import store from "@/store"; // import store from "@/store";
// import { encrypt, decrypt } from "@/js/aesEncrypt" // import { encrypt, decrypt } from "@/js/aesEncrypt"
// import footerNav from "@/components/footerNav" // import footerNav from "@/components/footerNav"
export default { export default {
name: "gasDigitization", name: "gasDigitization",
// components: { footerNav }, // components: { footerNav },
data() { data() {
return { return {
activeName: 'first', activeNameOuter: "outer1", // 外层 collapse 默认选中
currentImage: '', activeNameInner: "1", // 内层 collapse 默认选中
collapseDataOuter: [
{
name: "outer1",
title: "外层折叠项 1",
collapseData: [
{
name: "1",
title: "智能化办公",
contents: ["大模型", "会议系统", "数字员工"],
},
{
name: "2",
title: "生产化信息",
contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
},
],
},
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
currentImage: "",
isDialogVisible: false, isDialogVisible: false,
name: null, name: null,
ipdz: null, ipdz: null,
...@@ -79,18 +196,15 @@ export default { ...@@ -79,18 +196,15 @@ export default {
specialization: [], specialization: [],
serviceCoordination: [], serviceCoordination: [],
}, },
}; };
}, },
computed: { created() {},
computed: {},
}, mounted() {},
mounted() {
},
methods: { methods: {
handleChange(val) {
console.log(val);
},
handleClick(tab, event) { handleClick(tab, event) {
console.log(tab, event); console.log(tab, event);
}, },
...@@ -132,46 +246,42 @@ export default { ...@@ -132,46 +246,42 @@ export default {
}); });
}, },
openDialog(unit) { openDialog(unit) {
this.selectedUnit = unit; // 保存当前点击的单位信息 this.selectedUnit = unit; // 保存当前点击的单位信息
this.showDialog = true; // 显示弹窗 this.showDialog = true; // 显示弹窗
}, },
tc() { tc() {
window.location.href = "http://ipms.slof.com/tzLogout/sjbgtx" window.location.href = "http://ipms.slof.com/tzLogout/sjbgtx";
} },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.content { // .content {
margin: 20px 20% 40px 20%; // margin: 20px 20% 40px 20%;
position: relative; // position: relative;
//
.text { // .text {
font-size: 14px; // font-size: 14px;
text-indent: 2em; // text-indent: 2em;
line-height: 25px; // line-height: 25px;
color: #101010; // color: #101010;
padding: 0px 20px; // padding: 0px 20px;
} // }
// }
} ::v-deep .el-tabs--card > .el-tabs__header {
::v-deep .el-tabs--card>.el-tabs__header {
border-bottom: 1px dashed #dddddd; border-bottom: 1px dashed #dddddd;
} }
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav { ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
border-left: none; border-left: none;
border-top: none; border-top: none;
} }
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active { ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
border-bottom: 1px dashed #dddddd; border-bottom: 1px dashed #dddddd;
} }
...@@ -299,9 +409,11 @@ export default { ...@@ -299,9 +409,11 @@ export default {
padding-top: 30px; padding-top: 30px;
min-height: 102vh; min-height: 102vh;
width: 100%; width: 100%;
background-image: linear-gradient(180deg, background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.65) 100%); rgba(255, 255, 255, 0.65) 100%
);
} }
h1 { h1 {
...@@ -476,4 +588,26 @@ p { ...@@ -476,4 +588,26 @@ p {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
} }
.bttext {
font-family: PingFang SC;
font-weight: bold;
font-size: 16px;
color: #222222;
line-height: 26px;
margin-left: 10px;
text-decoration: none;
}
.bttext:hover {
color: #165bff;
text-decoration: underline;
}
.custom-title {
font-family: PingFang SC;
font-weight: 800;
font-size: 18px;
color: #165bff;
line-height: 26px;
}
</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