前端补正

This commit is contained in:
xvv 2024-08-01 19:19:11 +08:00
parent 67eb86025b
commit ff273f9a40
7 changed files with 633 additions and 133 deletions

View File

@ -15,3 +15,9 @@ export function getPageColumn(data) {
data
})
}
export function getContent(id) {
return request({
url: '/api/content/' + id ,
method: 'get',
})
}

View File

@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/register', '/virtually', '/sb','/about','/platform','/teaching','/team','/committee','/competition','/contact' ]
const whiteList = ['/login', '/register', '/virtually', '/sb','/about','/platform','/teaching','/team','/committee','/competition','/contact','/details','/about' ]
router.beforeEach((to, from, next) => {
NProgress.start()

View File

@ -42,15 +42,21 @@ export const constantRoutes = [
]
},
{
path: '/virtually',
path: '/virtually',//首页
name:'virtually',
component: () => import('@/views/home'),
hidden: true
},
{
path: '/sb',//测试
name:'sb',
component: () => import('@/views/sb'),
path: '/list',//查看更多 列表页
name:'list',
component: () => import('@/views/officialWebsite/list'),
hidden: true
},
{
path: '/details',//查看更多 详情页
name:'details',
component: () => import('@/views/officialWebsite/details'),
hidden: true
},
{
@ -121,7 +127,6 @@ export const constantRoutes = [
},
{
path: '/login',
component: () => import('@/views/login'),
hidden: true
},

View File

@ -59,7 +59,7 @@
<div class="new-gang"></div>
<div class="new-container">
<div class="new-list">
<div class="list-box" v-for="(item, index) in this.newList[0]" :key="index">
<div class="list-box" v-for="(item, index) in this.newList[0]" :key="index" @click="goDeatail(item)" >
<div class="list-bs">
<img :src="item.contentImg" style=" ">
<div class="new-wb">{{ item.contentTitle }}</div>
@ -92,7 +92,7 @@
</div>
</div>
<div class="new-list">
<div class="list-box" v-for="(item, index) in this.newList[1]" :key="index">
<div class="list-box" v-for="(item, index) in this.newList[1]" :key="index" @click="goDeatail(item)" >
<div class="list-bs">
<img :src="item.contentImg" style="width: 125px; height: 70px ">
<div class="new-wb">{{ item.contentTitle }}</div>
@ -112,7 +112,7 @@
<div class="new-gang"></div>
<div class="list">
<swiper ref="mySwiper" :options="swiperOptions1" style="width: 100%">
<swiper-slide class="gongao-item" v-for="item in this.noticeList">
<swiper-slide class="gongao-item" v-for="item in this.noticeList" @click="goDeatail(item)">
<div class="bj">
<div class="tt">{{ item.contentTitle }}</div>
<div class="p">
@ -143,7 +143,7 @@
</div>
<div class="new-gang"></div>
<div class="news11-list">
<div class="news11-list-item" v-for="(item, index) in this.nationalVirtualLass" :key="index">
<div class="news11-list-item" v-for="(item, index) in this.nationalVirtualLass" :key="index" @click="goDeatail(item)">
<div class="img">
<img :src="item.contentImg" class="imgWO" style="width: 100%; height: 100% ">
</div>
@ -156,10 +156,11 @@
3750
</div>
</div>
<div class="backmo"></div>
<div class="backmo">
<div>{{item.summary}}</div>
</div>
</div>
<!-- 动画-->
</div>
<div style=" width: 156px;height: 42px;margin: 50px auto;">
<img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
@ -188,6 +189,7 @@ export default {
},
data() {
return {
Serial:0,
baseInfo:"",
categoryQuery: {
@ -313,6 +315,20 @@ export default {
this.$router.push('/contact');
}
},
goDeatail(data){
console.log(data)
if(data.linkType == 0){
this.$router.push({
name: 'details',
query:{ id: data.id }
});
}
if(data.linkType == 1){
window.open(data.link, '_blank');
}
},
/** 顶部tab列表 */
tabLsit() {
getTab().then(response => {
@ -337,12 +353,13 @@ export default {
}
index += 1
})
console.log('newList',this.newList)
//
this.noticeList = res.data[1].children.list
//
this.nationalVirtualLass = res.data[2].children.list
console.log( '362', this.nationalVirtualLass)
this.nationalVirtualLass.forEach(item => {
item.contentImg = process.env.VUE_APP_BASE_API + item.contentImg
})
@ -881,7 +898,6 @@ export default {
.backmo{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
@ -895,12 +911,13 @@ export default {
border: 1px solid #eee;
margin-bottom: 20px;
position: relative;
}
.news11 .news11-list .news11-list-item:hover>.backmo {
transition: background-color 0.5s;
background-color: rgba(0, 0, 0, 0.46) !important;
color: #fff;
}
.news11 .news11-list .news11-list-item .img {
width: 100%;

View File

@ -17,14 +17,14 @@
</div>
<!-- right -->
<div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;justify-content: flex-end">
<i class="el-icon-search" v-if="show_search"></i>
<div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
</div>
<el-input placeholder="输入关键词" v-model="input" style="width: 150px;height: 35px" v-if="!show_search">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
@click="show_search = true"></i>
<!-- <i class="el-icon-search" v-if="show_search"></i>-->
<!-- <div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索-->
<!-- </div>-->
<!-- <el-input placeholder="输入关键词" v-model="input" style="width: 150px;height: 35px" v-if="!show_search">-->
<!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!-- </el-input>-->
<!-- <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"-->
<!-- @click="show_search = true"></i>-->
</div>
</div>
</template>

View File

@ -8,84 +8,22 @@
</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 class="content-box" >
<div class="title_">{{info.contentTitle}}</div>
<div class="size_" v-if="info.contentType == 0" v-html="info.contentDetail" ></div>
<div v-if="info.contentType == 1" style="display: flex;flex-wrap: wrap">
<div class="" v-for="(item,index) in info.imageUrl" :key="index">
<img :src="imgurl + item" alt="" >
</div>
</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 v-if="info.contentType == 2" style="display: flex;">
<div class="" v-for="(item,index) in info.videoUrl" :key="index">
<video :src="imgurl + item"></video>
</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>
@ -93,7 +31,7 @@
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
import { getContent, getPageColumn } from "@/api/officialWebsite/getPageData";
import headers from '@/views/officialWebsite/Components/header.vue'
import footers from '@/views/officialWebsite/Components/footer.vue'
@ -114,28 +52,15 @@ export default {
},
data() {
return {
info:null,
imgurl:process.env.VUE_APP_BASE_API,
pageContextList: [],
nav: [
// { name: '' },
// { name: '' },
// { name: '' },
],
nav: [],
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;">20065000300<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: "",
}
@ -158,26 +83,21 @@ export default {
this.currentActive = value
},
initPageData() {
console.log("123123", this.$route.query.id);
console.log("文章", 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 id = this.$route.query.id
getContent(id).then(response => {
console.log(response)
this.info = response.data;
if(response.data.contentType == 0){
console.log('文章')
}
if(response.data.contentType == 1){
console.log('图片')
}
if(response.data.contentType == 2){
console.log('视频')
}
});
// let introduction_center_param = {
@ -612,5 +532,17 @@ export default {
color: rgba(255, 255, 255, 0.7);
line-height: 18px;
}
.title_{
font-weight: bold;
font-size: 28px;
color: #333333;
text-align: center;
}
.content-box{
width: 80%;
margin: 25px auto;
min-height:400px;
}
</style>

View File

@ -0,0 +1,540 @@
<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 -->
<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;">20065000300<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>