school_website/ruoyi-ui/src/views/officialWebsite/about.vue
2024-07-29 19:00:42 +08:00

617 lines
15 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="container">
<div class="top-box">
<headers></headers>
<div class="ny-banner">
<img src="../../assets/gw/ny-banner.jpg" alt="">
</div>
</div>
<!-- new -->
<div class="navigation">
<div class="content">
<div class="left"> <img src="../../assets/gw/home.png" alt="">
<p><a href="/gw">首页</a><i class="el-icon-arrow-right"></i> <span href="">中心概况</span></p>
</div>
<div class="right">
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
@click="getCurrentActive(index)">
{{ item.categoryName }}
</div>
</div>
</div>
</div>
<div class="about-conts" v-bind:class="[currentActive == 0 ? 'bj' : '']">
<!-- main -->
<div v-for="(item, index) in nav " :key=index>
<div class="about-conts-item1" v-if="currentActive == index">
<div class="neirong" v-html="pageContextList[index]"></div>
</div>
</div>
<!-- 中心简介 -->
<!-- <div class="about-conts-item1" v-if="currentActive == 0"> -->
<!-- <div class="neirong" v-html="content"></div> -->
<!-- </div> -->
<!-- 组织机构 -->
<!-- <div class="about-conts-item1" v-if="currentActive == 1"> -->
<!-- <div class="div" v-for="(item, index) in orgList">
{{ item.contentDetail }}
</div> -->
<!-- <div class="neirong" v-html="orgList"></div> -->
<!-- </div> -->
<!-- 现任领导 -->
<!-- <div class="about-conts-item1" v-if="currentActive == 2"> -->
<!-- <div class="about-conts-item3-div" v-for="postList">
<div class="left">
主任
</div>
<div class="right">
<div class="divs" v-for="(item, index) in 2">
<div class="img">
<img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
</div>
<div class="tt">钟离</div>
</div>
</div>
</div> -->
<!-- <div class="about-conts-item3-div">
<div class="left">
主任
</div>
<div class="right">
<div class="divs" v-for="(item, index) in 1">
<div class="img">
<img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
</div>
<div class="tt">钟离</div>
</div>
</div>
</div>
<div class="about-conts-item3-div">
<div class="left">
主任
</div>
<div class="right">
<div class="divs" v-for="(item, index) in 4">
<div class="img">
<img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
</div>
<div class="tt">钟离</div>
</div>
</div>
</div> -->
<!-- <div class="neirong" v-html="leaderList"></div> -->
<!-- </div> -->
</div>
<footers></footers>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
import headers from '@/views/officialWebsite/Components/header.vue'
import footers from '@/views/officialWebsite/Components/footer.vue'
// import {useRoute, useRouter} from "vue-router";
// const route = useRoute();
// const router = useRouter();
export default {
components: {
Swiper,
SwiperSlide,
headers,
footers
},
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
pageContextList: [],
nav: [
// { name: '中心简介' },
// { name: '组织机构' },
// { name: '现任领导' },
],
currentActive: 2,
isMounted: false,
orgList: "",
postList: [],
// content: `<p style="box-sizing: inherit; text-align: justify; text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
// <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">淄博瑞安输变电工程有限公司成立于2006年公司原属国网淄博供电公司下属施工企业现为山东泉舜控股集团有限公司全资子公司注册资本5000万元。公司设立于历史悠久的齐文化发祥地淄博市并在济南、青岛、聊城、东营、潍坊、济宁、泰安、李庄、邯郸等各地设有分支机构。企业人才结构合理大专以上学历及具有各种专业技术职称的近300余人是一支经过国家电网公司多年锻造、专业技术强、电力工程施工经验丰富的的铁军队伍。<br/></span>
// </p>
// <p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
// <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司主要经营范围包括:220千伏及以下电力工程总承包施工电力输配电线路架设施工变电站电气设备安装建筑物土建施工城市及道路照明工程施工高低压电气设备修试:电力技术咨询;输配变电电力线路设备巡视、维护、维修及带电作业服务;电力销售;房屋、设备、车辆租赁及新能源技术开发、技术转让、技术服务。</span>
// </p>
// <p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
// <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司秉承山东泉舜控股集团有限公司建设“泉心立业、舜势百年”的百年企业的美好愿景,坚持“专业、规范、服务、诚信、创新、实力”的经营宗旨,为广大客户提供“电保姆”式的电力全产业链服务!</span>
// </p>
// <p style="box-sizing: inherit; margin-top: 0px; text-align: justify; text-indent: 2em; margin-bottom: 5px; line-height: 1.75em;">
// <span style="box-sizing: inherit; font-family: 微软雅黑, MicrosoftYaHei;"></span><br/>
// </p>`
content: "",
leaderList: "",
}
},
computed: {
},
mounted() {
// 页面加载完毕调用
debugger;
this.initPageData();
},
methods: {
// 触发导航
getCurrentActive(value) {
if (this.currentActive == value) {
return
}
this.currentActive = value
},
initPageData() {
console.log("123123", this.$route.query.id);
let routeParam = {
"categoryId": this.$route.query.id,
"pageNum": 1,
"pageSize": 10
}
getPageColumn(routeParam).then(response => {
response.data.forEach(cloumnItem => {
this.nav.push(cloumnItem);
let context = "";
cloumnItem.children.list.forEach(element => {
context += element.contentDetail;
});
this.pageContextList.push(context);
// cloumnItem.categoryName
});
});
// let introduction_center_param = {
// "categoryId": "1813827591224823808",
// "pageNum": 1,
// "pageSize": 1000
// };
// getPageData(introduction_center_param).then(response => {
// response.data.list.forEach(element => {
// this.content += element.contentDetail;
// });
// });
// let organizational_structure_param = {
// "categoryId": "1813827750121836544",
// "pageNum": 1,
// "pageSize": 1000
// };
// getPageData(organizational_structure_param).then(response => {
// response.data.list.forEach(element => {
// // this.orgList.push(element);
// this.orgList += element.contentDetail;
// });
// });
// let current_leader_param = {
// "categoryId": "1813827861774209024",
// "pageNum": 1,
// "pageSize": 1000
// };
// getPageData(current_leader_param).then(response => {
// response.data.list.forEach(element => {
// this.leaderList += element.contentDetail;
// });
// });
},
}
}
</script>
<style scoped>
/* .container {
background: #F5F5F5;
} */
.bj {
background: #F5F5F5;
}
.top-box {
width: 100%;
/* height: 1000px; */
/* background: url(''); */
/* background-size: cover; */
/* 背景图片铺满盒子 */
/* background-repeat: no-repeat; */
/* 禁止背景图片重复 */
position: relative;
}
.tab-box {
width: 100%;
box-sizing: border-box;
padding: 20px 2%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
background-color: #005375;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
/* position: absolute; */
z-index: 3;
}
.d-s {
display: flex;
align-items: center;
}
.logo-box {
width: 50px;
height: 50px;
background: #fff;
}
.logo-size {
font-weight: 800;
font-size: 24px;
color: #FFFFFF;
margin-left: 20px;
}
.x-x {
margin-right: 20px;
cursor: pointer;
}
.ny-banner {
width: 100%;
}
.ny-banner img {
width: 100%;
}
.navigation {
width: 100%;
height: 60px;
background: #FFFFFF;
border-radius: 0px 0px 0px 0px;
border-bottom: 1px solid #EEEEEE;
}
.navigation .content {
width: 80%;
margin: 0 auto;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center
}
.navigation .content .left {
width: 30%;
display: flex;
align-items: center
}
.navigation img {
width: 15px;
margin-right: 10px;
}
.navigation p {
/* margin-top: 5px; */
color: #999;
}
.navigation span {
color: #999;
}
.navigation span:last-child {
font-weight: 700;
color: #005375;
}
.navigation .content .right {
width: 70%;
display: flex;
justify-content: flex-end;
align-items: center
}
.navigation .content .right .nav-item {
width: 200px;
display: flex;
height: 60px;
justify-content: center;
align-items: center;
font-size: 20px;
cursor: pointer;
font-weight: 500;
border-bottom: 3px solid transparent;
}
.navigation .content .right .active {
border-bottom: 3px solid #005375;
color: #005375;
font-weight: bold;
}
.about-conts {
padding: 40px 0;
}
.about-conts .about-conts-item1 {
padding: 30px 2%;
width: 76%;
margin: 0 auto;
background-color: #fff;
}
.about-conts .about-conts-item2 {
/* padding: 30px; */
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
/* background-color: #fff; */
}
.about-conts .about-conts-item2 .div {
width: 31%;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
position: relative;
margin-right: 2%;
margin-bottom: 30px;
font-size: 20px;
font-weight: 500;
}
.about-conts .about-conts-item2 .div:nth-child(3n) {
margin-right: 0;
}
.about-conts .about-conts-item2 .div::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #EEEEEE;
}
.about-conts .about-conts-item3 {
padding: 30px 2%;
width: 76%;
margin: 0 auto;
margin-top: -40px;
margin-bottom: -40px;
background: linear-gradient(180deg, #E8FCFF 0%, rgba(255, 255, 255, 0) 100%);
/* background-color: #fff; */
}
.about-conts .about-conts-item3 .about-conts-item3-div {
width: 100%;
padding: 30px;
border-bottom: 1px solid #EEEEEE;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.about-conts .about-conts-item3 .about-conts-item3-div:last-child {
margin-bottom: 0;
border-bottom: 1px solid transparent;
}
.about-conts .about-conts-item3 .about-conts-item3-div .left {
width: 20%;
/* background-color: #f0f; */
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 20px;
color: #005375;
}
.about-conts .about-conts-item3 .about-conts-item3-div .right {
width: 80%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
}
.about-conts .about-conts-item3 .about-conts-item3-div .right .divs {
width: 120px;
margin: 30px;
border-radius: 0px 0px 0px 0px;
}
.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .img {
width: 120px;
height: 150px;
background: #D9D9D9;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0px 0px 0px 0px;
}
.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .img img {
width: 100%;
object-fit: cover;
}
.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .tt {
text-align: center;
margin-top: 20px;
font-weight: 500;
font-size: 20px;
color: #333333;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.index-footer {
background: #383838;
padding-top: 30px;
}
.index-footer .footer {
width: 80%;
margin: 0 auto;
}
.index-footer .footer .logo {
display: flex;
justify-content: space-between;
/* align-items: center; */
}
.index-footer .footer .logo .footer-contact {}
.index-footer .footer .logo .footer-contact .p {
display: inline-block;
display: flex;
float: left;
margin-left: 50px;
align-items: center;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
/* justify-content: flex-end; */
}
.index-footer .footer .logo .footer-contact .p img {
margin-right: 10px;
}
.index-footer .footer .logo .footer-contact .p:nth-child(3) {
width: 100%;
clear: both;
margin-top: 20px;
}
.index-footer .footer .footer-nav {
display: flex;
margin-top: 20px;
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.index-footer .footer .footer-nav .footer-nav-item {
width: 9%;
margin-right: 1%;
}
.index-footer .footer .footer-nav .footer-nav-item:last-child {
margin-right: 0;
}
.index-footer .footer .footer-nav .footer-nav-item .tt {
font-weight: 500;
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
line-height: 18px;
position: relative;
padding-bottom: 20px;
margin-bottom: 20px;
}
.index-footer .footer .footer-nav .footer-nav-item .tt::after {
content: "";
width: 20px;
height: 2px;
background: #005375;
border-radius: 0px 0px 0px 0px;
position: absolute;
bottom: 0;
left: 0;
}
.index-footer .footer .footer-nav .footer-nav-item a {
text-decoration: none;
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
line-height: 16px;
display: block;
margin-bottom: 15px;
}
.index-footer .footer .footer-nav .footer-nav-item a:last-child {
margin-bottom: 0;
}
.index-footer .footer .web_icp {
display: flex;
margin-top: 50px;
height: 80px;
align-items: center;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.index-footer .footer .web_icp a {
text-decoration: none;
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
line-height: 16px;
margin-right: 30px;
}
.index-footer .footer .web_icp .right {
display: flex;
align-items: center;
justify-content: flex-end
}
.index-footer .footer .web_icp .right div {
margin-right: 25px;
font-weight: 500;
font-size: 18px;
color: rgba(255, 255, 255, 0.7);
line-height: 18px;
}
</style>