前端补正

This commit is contained in:
xvv 2024-08-04 20:33:37 +08:00
parent 05b79aefb2
commit b72e0215ce
7 changed files with 350 additions and 56 deletions

View File

@ -5,8 +5,7 @@ VUE_APP_TITLE = 虚拟仿真实验教学中心
ENV = 'development'
# 若依管理系统/开发环境
# VUE_APP_BASE_API = 'https://f382b38516.zicp.fun'
VUE_APP_BASE_API = 'http://localhost:8080'
VUE_APP_BASE_API = 'https://f382b38516.zicp.fun'
# 路由懒加载

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -22,12 +22,23 @@
</div>
</div>
<div class="committee-cont">
<div v-if="currentActive == 0">
<div class="noticeRsr" v-for="(item,index) in onelist" @click="goDeatail(item)" >
<div >{{item.contentTitle}}</div>
<div >{{item.publishDate}}</div>
</div>
</div>
<div v-if="currentActive == 0">
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
</div>
<!-- main -->
<div v-for="(item, index) in nav " :key=index>
<div class="about-conts-item1" v-if="currentActive == index && currentActive !== 1">
<div class="about-conts-item1" v-if="currentActive == 2">
<div class="neirong" v-html="pageContextList[index]"></div>
</div>
<div class="about-conts-item1" v-if="currentActive == index && currentActive === 1">
<div class="about-conts-item1" v-if="currentActive == 1">
<div class="dataClass">
<div v-for="(item, index) in dataList">
{{item.contentTitle}}
@ -48,12 +59,14 @@ import "swiper/css/swiper.min.css";
import {getPageData, getPageColumn, getListById} from "@/api/officialWebsite/getPageData";
import footers from '@/views/officialWebsite/Components/footer.vue'
import headers from '@/views/officialWebsite/Components/header.vue'
import PageUtil from '@/views/officialWebsite/Components/page/index.vue'
export default {
components: {
headers,
footers,
Swiper,
SwiperSlide,
"page-util": PageUtil
},
name: 'HelloWorld',
props: {
@ -61,7 +74,9 @@ export default {
},
data() {
return {
onelist:[],
dataList: [],
categoryId:'',
pageContextList: [],
nav: [
// { name: '' },
@ -82,6 +97,24 @@ export default {
},
methods: {
handleDataFromPage(data){
if (this.currentActive === 0){
this.onelist = data
}
},
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');
}
},
getContentByCategoryId(id){
getListById(id).then(res => {
this.dataList = res.data
@ -105,6 +138,10 @@ export default {
"pageSize": 10
}
getPageColumn(routeParam).then(response => {
console.log('routeParam',response)
this.onelist = response.data[0].children.list
this.categoryId = response.data[0].id
response.data.forEach(cloumnItem => {
this.nav.push(cloumnItem);
@ -320,7 +357,7 @@ export default {
.committee-cont {
width: 80%;
margin: 100px auto;
margin: 15px auto;
padding: 30px 0;
}
@ -547,4 +584,15 @@ export default {
text-align: center;
padding: 20px;
}
.noticeRsr{
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
font-size: 20px;
}
.noticeRsr:hover{
color: #00A0E8;
cursor: pointer;
}
</style>

View File

@ -149,9 +149,12 @@ export default {
</script>
<style scoped>
/* .container {
background: #F5F5F5;
} */
.container {
background: url(../../assets/images/bckimg.png) no-repeat;
background-size:100% 100%;
background-attachment:fixed;
}
.bj {
background: #F5F5F5;
}

View File

@ -22,17 +22,26 @@
</div>
</div>
<div class="news">
<div v-if="currentActive == 0">
<div class="noticeRsr" v-for="(item,index) in onelist" @click="goDeatail(item)" >
<div >{{item.contentTitle}}</div>
<div >{{item.publishDate}}</div>
</div>
</div>
<div v-if="currentActive == 1"> <div class="noticeRsr" v-for="(item,index) in twolist" @click="goDeatail(item)" >
<div >{{item.contentTitle}}</div>
<div >{{item.publishDate}}</div>
</div></div>
<!-- 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 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>
<div class="page-box">
<el-pagination background layout="prev, pager, next" :total="1000" class="">
</el-pagination>
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
</div>
<footers></footers>
</div>
@ -44,12 +53,14 @@ import "swiper/css/swiper.min.css";
import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
import footers from '@/views/officialWebsite/Components/footer.vue'
import headers from '@/views/officialWebsite/Components/header.vue'
import PageUtil from '@/views/officialWebsite/Components/page'
export default {
components: {
headers,
footers,
Swiper,
SwiperSlide,
"page-util": PageUtil
},
name: 'HelloWorld',
props: {
@ -57,6 +68,11 @@ export default {
},
data() {
return {
onelist:[],
oneid:'',
twolist:[],
twoid:'',
categoryId: "",
pageContextList: [],
nav: [
// { name: '' },
@ -76,21 +92,53 @@ export default {
},
methods: {
handleDataFromPage(data){
if (this.currentActive === 0){
this.onelist = data
}
if (this.currentActive === 1){
this.twolist = data
}
},
//
getCurrentActive(value) {
if (this.currentActive == value) {
return
}
this.currentActive = value
if (this.currentActive === 0){
this.categoryId = this.oneid
}
if (this.currentActive === 1){
this.categoryId = this.twoid
}
},
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');
}
},
initPageData() {
let routeParam = {
"categoryId": this.$route.query.id,
"pageNum": 1,
"pageSize": 10
}
getPageColumn(routeParam).then(response => {
console.log(response,"97")
this.onelist = response.data[0].children.list
this.oneid = response.data[0].id
this.twolist = response.data[1].children.list
this.twoid = response.data[1].id
this.categoryId = response.data[0].id
response.data.forEach(cloumnItem => {
this.nav.push(cloumnItem);
@ -308,7 +356,7 @@ export default {
.news {
padding: 30px 0;
width: 80%;
margin: 100px auto;
margin: 20px auto;
}
.page-box{
width: 82%;
@ -511,4 +559,15 @@ export default {
line-height: 18px;
}
.noticeRsr{
width: 100%;
padding: 1rem;
display: flex;
justify-content: space-between;
font-size: 20px;
}
.noticeRsr:hover{
color: #00A0E8;
cursor: pointer;
}
</style>

View File

@ -24,22 +24,22 @@
<div class="about-conts" v-bind:class="[currentActive == 1 ? 'bj' : '']">
<!-- main -->
<div v-for="(item, index) in nav " :key=index>
<div class="about-conts-item1" v-show="currentActive == index">
<div class="neirong" v-html="pageContextList[index]"></div>
<div class="about-conts-item1" v-show="currentActive == 1">
<div class="neirong" v-html="pageContextList[1]"></div>
</div>
</div>
<!-- 专业平台介绍 -->
<!-- <div class="ayptjs" v-if="currentActive == 0">
<div class="tt">专业平台介绍</div>
<div class="ayptjs" v-if="currentActive == 0">
<div class="ayptjs-list">
<div class="item" v-for="(item, index) in 8">
<div class="item" v-for="(item, index) in onelist" @click="goDeatail(item)" >
<div class="img">
<img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="">
<img :src="imgurl+item.contentImg" alt="">
</div>
<div class="text">
<div class="tts">人机工程仿真分析平台</div>
<div class="tts">{{item.contentTitle}}</div>
<div class="desc" >
人机工程学是一门涉及人体测量学工业设计工业工程心理学美学等多个领域的交叉学科其研究目的是实现不同的作业中人机器环境三者间的协调即运用上述学科的知识研究方法评价手段对工作器具工作方式和工作环境的设计进行分析并提出改造建议使得作业在效率安全健康舒适等方面的性能得以有效提高
{{item.summary}}
</div>
</div>
<div class="more">
@ -48,10 +48,11 @@
</div>
</div>
</div>
<div class="neirong" v-html="professionalResources"></div>
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
<!-- <div class="neirong" v-html="professionalResources"></div>-->
</div>
软硬件资源介绍
<!-- 软硬件资源介绍
<div class="about-conts-item1" v-if="currentActive == 1">
<div class="neirong" v-html="content"></div>
</div> -->
@ -67,12 +68,14 @@ import "swiper/css/swiper.min.css";
import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
import footers from '@/views/officialWebsite/Components/footer.vue'
import headers from '@/views/officialWebsite/Components/header.vue'
import PageUtil from '@/views/officialWebsite/Components/page/index.vue'
export default {
components: {
headers,
footers,
Swiper,
SwiperSlide,
"page-util": PageUtil
},
name: 'HelloWorld',
props: {
@ -80,6 +83,9 @@ export default {
},
data() {
return {
imgurl:process.env.VUE_APP_BASE_API,
categoryId:'',
onelist:[],
dataList: [],
pageContextList: [],
nav: [
@ -90,18 +96,7 @@ export default {
isMounted: false,
professionalResources: "",
content: "",
// 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>`
}
},
mounted() {
@ -112,6 +107,21 @@ export default {
},
methods: {
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');
}
},
handleDataFromPage(data){
this.onelist = data
},
//
getCurrentActive(value) {
if (this.currentActive == value) {
@ -127,6 +137,9 @@ export default {
"pageSize": 10
}
getPageColumn(routeParam).then(response => {
console.log(response,'119')
this.onelist = response.data[0].children.list
this.categoryId = response.data[0].id
response.data.forEach(cloumnItem => {
this.nav.push(cloumnItem);
@ -345,8 +358,8 @@ export default {
.about-conts .ayptjs-list .item .text {
position: absolute;
width: 94%;
height: 191px;
width: 100%;
height: 212px;
z-index: 3;
background: linear-gradient(180deg, rgba(0, 83, 117, 0) 0%, #005375 100%);
display: flex;
@ -426,7 +439,7 @@ export default {
color: #005375;
font-size: 18px;
position: absolute;
bottom: -10px;
bottom: -30px;
display: none;
}
@ -573,4 +586,53 @@ export default {
line-height: 18px;
}
/* 圆形分页按钮样式 */
::v-deep .el-pagination .el-pager li:not(.disabled) {
border-radius: 100%;
/* 圆形 */
width: 50px;
height: 50px;
/* 按钮高度 */
line-height: 50px;
/* 文字垂直居中 */
text-align: center;
/* 文字水平居中 */
margin: 0 15px;
/* 按钮间距 */
border-radius: 50%;
width: 50px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
}
/* 选中的页码按钮样式 */
::v-deep .el-pagination .el-pager .active {
background-color: #005375;
;
/* 背景颜色 */
color: #fff;
/* 文字颜色 */
}
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .btn-prev {
background-color: #f4f4f5;
color: #333;
margin: 0 15px;
border-radius: 50%;
width: 50px;
height: 50px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
}
::v-deep .el-pagination .btn-next .el-icon,
::v-deep .el-pagination .btn-prev .el-icon {
font-size: 18px;
}
</style>

View File

@ -23,17 +23,57 @@
</div>
<div class="teaching" v-bind:class="[currentActive == 0 ? 'bj' : '']">
<!-- main -->
<div v-for="(item, index) in nav " :key=index>
<div class="teaching-list" v-if="currentActive == index">
<div class="neirong" v-html="pageContextList[index]"></div>
</div>
<div class="wrap-box">
<div class="box-l" v-if="currentActive == 0" v-for="(item,index) in onelist" :key="index">
<div class="img-s">
<img :src="imgurl+item.contentImg" style="width: 100%;height: 195px;">
</div>
<div class="kuang">
<div class="time_">{{item.publishDate}}</div>
<div class="size_">{{item.contentTitle}}</div>
<div class="d-s" style="justify-content: space-between">
<!-- <el-button type="primary" style="background:#015375 " >在线预览</el-button>-->
<el-button @click="goDeatail(item)" >查看详情</el-button>
</div>
<div class="page-box" style="margin-top: 25px" ><el-pagination background layout="prev, pager, next" :total="1000" class="">
</el-pagination></div>
</div>
</div>
<div class="box-l" v-if="currentActive == 1" v-for="(item,index) in twolist" :key="index">
<div class="img-s">
<img :src="imgurl+item.contentImg" style="width: 100%;height: 195px;">
</div>
<div class="kuang">
<div class="time_">{{item.publishDate}}</div>
<div class="size_">{{item.contentTitle}}</div>
<div class="d-s" style="justify-content: space-between">
<!-- <el-button type="primary" style="background:#015375 " >在线预览</el-button>-->
<el-button @click="goDeatail(item)" >查看详情</el-button>
</div>
</div>
</div>
<div class="box-l" v-if="currentActive == 2" v-for="(item,index) in threelist" :key="index">
<div class="img-s">
<img :src="imgurl+item.contentImg" style="width: 100%;height: 195px;">
</div>
<div class="kuang">
<div class="time_">{{item.publishDate}}</div>
<div class="size_">{{item.contentTitle}}</div>
<div class="d-s" style="justify-content: space-between">
<!-- <el-button type="primary" style="background:#015375 " >在线预览</el-button>-->
<el-button @click="goDeatail(item)" >查看详情</el-button>
</div>
</div>
</div>
</div>
</div>
<div class="page-box">
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
</div>
<footers></footers>
</div>
</template>
@ -45,8 +85,11 @@ import { getPageData, getPageColumn } from "@/api/officialWebsite/getPageData";
import footers from '@/views/officialWebsite/Components/footer.vue'
import headers from '@/views/officialWebsite/Components/header.vue'
import PageUtil from '@/views/officialWebsite/Components/page/index.vue'
export default {
components: {
"page-util": PageUtil,
headers,
footers,
Swiper,
@ -58,7 +101,16 @@ export default {
},
data() {
return {
imgurl:process.env.VUE_APP_BASE_API,
onelist:[],
oneid:'',
twolist:[],
twoid:'',
threelist:[],
threeid:'',
categoryId: "",
pageContextList: [],
nav: [
// { name: '' },
// { name: '' },
@ -80,6 +132,29 @@ export default {
},
methods: {
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');
}
},
handleDataFromPage(data){
if (this.currentActive == 0){
this.onelist = data
}
if (this.currentActive == 1){
this.twolist = data
}
if (this.currentActive == 2){
this.threelist = data
}
},
//
getCurrentActive(value) {
if (this.currentActive == value) {
@ -95,6 +170,14 @@ export default {
"pageSize": 10
}
getPageColumn(routeParam).then(response => {
console.log(response)
this.onelist = response.data[0].children.list
this.oneid = response.data[0].id
this.twolist = response.data[1].children.list
this.twoid = response.data[1].id
this.threelist = response.data[2].children.list
this.threeid = response.data[2].id
this.categoryId = response.data[0].id
response.data.forEach(cloumnItem => {
this.nav.push(cloumnItem);
@ -150,9 +233,9 @@ export default {
</script>
<style scoped>
/* .container {
.container {
background: #F5F5F5;
} */
}
/* 圆形分页按钮样式 */
::v-deep .el-pagination .el-pager li:not(.disabled) {
border-radius: 100%;
@ -332,10 +415,15 @@ export default {
color: #005375;
font-weight: bold;
}
.wrap-box{
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.teaching {
width: 80%;
margin: 100px auto;
margin: 15px auto;
}
.page-box{
width: 82%;
@ -430,7 +518,11 @@ export default {
font-size: 18px;
color: #005375;
}
.kuang{
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.index-footer {
background: #383838;
padding-top: 30px;
@ -440,7 +532,12 @@ export default {
width: 80%;
margin: 0 auto;
}
.time_{
font-size: 14px;
font-weight: bold;
margin-bottom: 15px;
color: #005474;
}
.index-footer .footer .logo {
display: flex;
justify-content: space-between;
@ -459,7 +556,21 @@ export default {
font-size: 16px;
/* justify-content: flex-end; */
}
.size_{
height: 50px;
margin: 15px auto;
overflow: hidden;
/** 隐藏超出的内容 **/
word-break: break-all;
text-overflow: ellipsis;
/** 多行 **/
display: -webkit-box;
/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2;
/** 显示的行数 **/
}
.index-footer .footer .logo .footer-contact .p img {
margin-right: 10px;
}
@ -561,4 +672,16 @@ export default {
.about-conts {
padding: 40px 0;
}
.box-l{
width: 23%;
height: 365px;
/* overflow: hidden; */
margin-right: 2%;
position: relative;
margin-bottom: 25px;
background: #fff;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
}
</style>