Skip to content

Y
yq-ui
Commit ed5a0dbb by “zhaodan”
Options

zd

parent 07f75b2c
Showing with 467 additions and 333 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
background-size: 100% 100%; src="../../assets/images/background1.png"
margin-top: 20px; alt=""
height: 300px; style="
width: 100%; background-size: 100% 100%;
float: none; margin-top: 20px;
margin: 0 auto; height: 300px;
" /> width: 100%;
<img src="../../assets/images/bt.png" alt="" style=" float: none;
background-size: 100% 100%; margin: 0 auto;
position: absolute; "
top: 50%; />
left: 50%; <img
height: 200px; src="../../assets/images/bt.png"
width: 50%; alt=""
transform: translate(-50%, -50%); style="
" /> background-size: 100% 100%;
</el-row> position: absolute;
<el-row style="margin-top: -10px"> top: 50%;
<div class="content"> left: 50%;
<el-tabs v-model="activeName" @tab-click="handleClick" type="card"> height: 200px;
<el-tab-pane label="产品简介" name="first"> width: 50%;
<div class="text" v-html="bmjj"></div> transform: translate(-50%, -50%);
</el-tab-pane> "
<el-tab-pane label="功能特点" name="second"> />
<div class="text" v-html="zzld"></div> </el-row>
</el-tab-pane> <el-row class="content">
<el-tab-pane label="应用成效" name="third"> <el-col
<div class="text" v-html="sjglry"></div> :span="4"
</el-tab-pane> style="padding: 20px; background-color: #fff; border-radius: 10px"
<el-tab-pane label="用法介绍" name="third"> >
<div class="text" v-html="sjglry"></div> <!-- <el-collapse v-model="activeName" accordion>
</el-tab-pane> <el-collapse-item
</el-tabs> 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> </div>
</el-collapse-item>
</el-row> </el-collapse> -->
<el-collapse v-model="activeNameOuter" accordion>
<!-- 外层 collapse 循环 -->
<el-collapse-item
</div> 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-tab-pane label="产品简介" name="first">
<div class="text" v-html="bmjj"></div>
</el-tab-pane>
<el-tab-pane label="功能特点" name="second">
<div class="text" v-html="zzld"></div>
</el-tab-pane>
<el-tab-pane label="应用成效" name="third">
<div class="text" v-html="sjglry"></div>
</el-tab-pane>
<el-tab-pane label="用法介绍" name="third">
<div class="text" v-html="sjglry"></div>
</el-tab-pane>
</el-tabs>
</div>
</el-row>
</div>
</template> </template>
<script> <script>
// import { addTp } from "@/api/benchmarkVoting.js"; // import { addTp } from "@/api/benchmarkVoting.js";
// 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 默认选中
isDialogVisible: false, collapseDataOuter: [
name: null, {
ipdz: null, name: "outer1",
yl1: null, title: "外层折叠项 1",
addLoading: false, collapseData: [
fwXz: [], {
zyhXz: [], name: "1",
kyXz: [], title: "智能化办公",
yzXz: [], contents: ["大模型", "会议系统", "数字员工"],
dialogVisible: false,
selectedUnit: {},
showDialog: false, // 控制对话框显示的变量
form: {
yqsc: [], // 用于存储选中的单位
ky: [],
zyh: [],
fw: [],
}, },
selectedUnits: { {
oilGasProduction: [], name: "2",
research: [], title: "生产化信息",
specialization: [], contents: ["大模型", "哈哈哈哈", "嘻嘻嘻嘻"],
serviceCoordination: [],
}, },
],
}; },
{
name: "outer2",
title: "外层折叠项 2",
collapseData: [
{
name: "3",
title: "基础设施",
contents: ["999", "777", "666"],
},
{
name: "4",
title: "其他",
contents: ["内容1", "内容2", "内容3"],
},
],
},
],
// -------------
activeName: "first",
currentImage: "",
isDialogVisible: false,
name: null,
ipdz: null,
yl1: null,
addLoading: false,
fwXz: [],
zyhXz: [],
kyXz: [],
yzXz: [],
dialogVisible: false,
selectedUnit: {},
showDialog: false, // 控制对话框显示的变量
form: {
yqsc: [], // 用于存储选中的单位
ky: [],
zyh: [],
fw: [],
},
selectedUnits: {
oilGasProduction: [],
research: [],
specialization: [],
serviceCoordination: [],
},
};
},
created() {},
computed: {},
mounted() {},
methods: {
handleChange(val) {
console.log(val);
}, },
computed: { handleClick(tab, event) {
console.log(tab, event);
}, },
mounted() { closeDialog() {
this.isDialogVisible = false; // 关闭对话框
},
submitTp() {
this.addLoading = true;
const isValid =
this.fwXz.length > 0 &&
this.zyhXz.length > 0 &&
this.kyXz.length > 0 &&
this.yzXz.length > 0;
if (!isValid) {
this.$modal.msgError("每个板块至少选 1 家单位。");
this.addLoading = false;
return; // 终止提交
}
const params = {
name: this.name,
ipdz: this.ipdz,
yl1: this.yl1,
tpInfoCbListA: this.fwXz,
tpInfoCbListB: this.zyhXz,
tpInfoCbListC: this.kyXz,
tpInfoCbListD: this.yzXz,
};
addTp(params)
.then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("投票成功");
} else if (response.code == 500) {
this.$modal.msgError("已投票，请勿重复投票");
}
})
.finally(() => {
this.addLoading = false;
});
}, },
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
closeDialog() {
this.isDialogVisible = false; // 关闭对话框
},
submitTp() {
this.addLoading = true;
const isValid =
this.fwXz.length > 0 &&
this.zyhXz.length > 0 &&
this.kyXz.length > 0 &&
this.yzXz.length > 0;
if (!isValid) {
this.$modal.msgError("每个板块至少选 1 家单位。");
this.addLoading = false;
return; // 终止提交
}
const params = {
name: this.name,
ipdz: this.ipdz,
yl1: this.yl1,
tpInfoCbListA: this.fwXz,
tpInfoCbListB: this.zyhXz,
tpInfoCbListC: this.kyXz,
tpInfoCbListD: this.yzXz,
};
addTp(params)
.then((response) => {
if (response.code == 200) {
this.$modal.msgSuccess("投票成功");
} else if (response.code == 500) {
this.$modal.msgError("已投票，请勿重复投票");
}
})
.finally(() => {
this.addLoading = false;
});
},
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;
} }
::v-deep .el-tabs__item.is-top { ::v-deep .el-tabs__item.is-top {
font-size: 16px !important; font-size: 16px !important;
} }
.preview-img { .preview-img {
width: 100%; width: 100%;
/* 或者根据需要设置 */ /* 或者根据需要设置 */
height: auto; height: auto;
/* 保持比例 */ /* 保持比例 */
} }
.xzText { .xzText {
font-family: "黑体", sans-serif; font-family: "黑体", sans-serif;
/* 或者使用 "Heiti" */ /* 或者使用 "Heiti" */
font-size: 15.5px; font-size: 15.5px;
/* 黑色字体 */ /* 黑色字体 */
} }
.btdlg { .btdlg {
display: inline-block !important; display: inline-block !important;
font-family: Microsoft YaHei !important; font-family: Microsoft YaHei !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 14px !important; font-size: 14px !important;
color: #c80000 !important; color: #c80000 !important;
line-height: 30px !important; line-height: 30px !important;
} }
.nrdlg { .nrdlg {
display: inline-block !important; display: inline-block !important;
font-family: Microsoft YaHei !important; font-family: Microsoft YaHei !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 30px !important; line-height: 30px !important;
} }
.nrdlgnr { .nrdlgnr {
display: inline-block !important; display: inline-block !important;
font-family: Microsoft YaHei !important; font-family: Microsoft YaHei !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 14px !important; font-size: 14px !important;
line-height: 30px !important; line-height: 30px !important;
} }
.img-container { .img-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.imgdlg { .imgdlg {
/* width: 560px; */ /* width: 560px; */
width: 100%; width: 100%;
height: 120px; height: 120px;
} }
.imgdlgst { .imgdlgst {
/* width: 560px; */ /* width: 560px; */
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
.sj { .sj {
/* width: 560px; */ /* width: 560px; */
margin: 10px 0; margin: 10px 0;
} }
.cc { .cc {
text-indent: 2em; text-indent: 2em;
} }
.text-align { .text-align {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin: 0px 10px; margin: 0px 10px;
} }
.text { .text {
margin-left: auto; margin-left: auto;
margin: 10px 15px; margin: 10px 15px;
} }
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: inherit; align-items: inherit;
justify-content: center; justify-content: center;
margin: 20px 0 20px -30px; margin: 20px 0 20px -30px;
} }
.checkbox-group-inline { .checkbox-group-inline {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.checkbox-group-inline .el-checkbox { .checkbox-group-inline .el-checkbox {
margin-right: 10px; margin-right: 10px;
/* 给复选框之间增加一些间距 */ /* 给复选框之间增加一些间距 */
} }
.box { .box {
position: relative; position: relative;
top: -20px; top: -20px;
left: 0; left: 0;
margin-bottom: -20px; margin-bottom: -20px;
width: 100%; width: 100%;
min-height: 102vh; min-height: 102vh;
background-image: url(../../assets/images/background1.png) !important; background-image: url(../../assets/images/background1.png) !important;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: left top; background-position: left top;
background-color: #f55202; background-color: #f55202;
} }
.container { .container {
max-width: 100vw; max-width: 100vw;
overflow-y: auto; overflow-y: auto;
height: 100vh; height: 100vh;
} }
.bg { .bg {
padding-bottom: 20px; padding-bottom: 20px;
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(
rgba(255, 255, 255, 0) 30%, 180deg,
rgba(255, 255, 255, 0.65) 100%); rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.65) 100%
);
} }
h1 { h1 {
text-align: center; text-align: center;
color: #333; color: #333;
} }
.toptit { .toptit {
background-color: transparent; background-color: transparent;
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
} }
.content { .content {
margin: 20px auto; margin: 20px auto;
max-width: 70%; max-width: 70%;
padding: 20px; padding: 20px;
background-color: #f0f8ff; background-color: #f0f8ff;
/* 设置背景色 */ /* 设置背景色 */
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;
} }
.bt1 { .bt1 {
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;
} }
.tpxx { .tpxx {
margin: 20px auto; margin: 20px auto;
max-width: 70%; max-width: 70%;
padding: 10px; padding: 10px;
background-color: #f0f8ff; background-color: #f0f8ff;
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);
text-align: left; text-align: left;
} }
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";
} }
.bttitle { .bttitle {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
line-height: 30px; line-height: 30px;
} }
.yuan { .yuan {
display: inline-block; display: inline-block;
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #c80000; background: #c80000;
border-radius: 50%; border-radius: 50%;
color: #c80000; color: #c80000;
vertical-align: middle; vertical-align: middle;
} }
.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;
} }
.titlenr { .titlenr {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
} }
.nrtab { .nrtab {
margin: 5px 5%; margin: 5px 5%;
} }
.btsty { .btsty {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #c80000; color: #c80000;
line-height: 30px; line-height: 30px;
} }
.kuang { .kuang {
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #acacac; border: 1px solid #acacac;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.xq { .xq {
margin-left: auto; margin-left: auto;
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 10px; right: 10px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #006ad7; color: #006ad7;
line-height: 30px; line-height: 30px;
text-decoration-line: underline; text-decoration-line: underline;
cursor: pointer; cursor: pointer;
} }
.xqname { .xqname {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
color: #222222; color: #222222;
line-height: 20px; line-height: 20px;
margin-left: 10px; margin-left: 10px;
text-align: left; text-align: left;
} }
.xqcard { .xqcard {
width: 270px; width: 270px;
height: 60px; height: 60px;
background: #f5f5f5; background: #f5f5f5;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: #f5f5f5; background: #f5f5f5;
margin: 5px 0; margin: 5px 0;
padding: 20px 15px; padding: 20px 15px;
position: relative; position: relative;
} }
.btdlgsty { .btdlgsty {
height: 18px; height: 18px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-weight: bold; font-weight: bold;
font-size: 18px; font-size: 18px;
color: #000000; color: #000000;
line-height: 24px; line-height: 24px;
text-align: center !important; text-align: center !important;
} }
.flex { .flex {
display: flex; display: flex;
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