前端补正

This commit is contained in:
xvv 2024-08-01 13:44:32 +08:00
parent 2746bde28b
commit 67eb86025b
8 changed files with 650 additions and 10 deletions

View File

@ -1,12 +1,12 @@
# 页面标题
VUE_APP_TITLE = 后台管理系统
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'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

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

View File

@ -42,8 +42,8 @@ export const constantRoutes = [
]
},
{
path: '/gw',
name:'gw',
path: '/virtually',
name:'virtually',
component: () => import('@/views/home'),
hidden: true
},

View File

@ -1,7 +1,7 @@
<template>
<div class="container">
<div class="top-box">
<headers></headers>
<headers :msg='Serial' ></headers>
<!-- <div class="tab-box">-->
<!-- &lt;!&ndash; left &ndash;&gt;-->
<!-- <div class="d-s">-->
@ -145,7 +145,7 @@
<div class="news11-list">
<div class="news11-list-item" v-for="(item, index) in this.nationalVirtualLass" :key="index">
<div class="img">
<img :src="item.contentImg" class="imgWO" alt="">
<img :src="item.contentImg" class="imgWO" style="width: 100%; height: 100% ">
</div>
<div class="tt">
{{ item.contentTitle }}
@ -156,7 +156,10 @@
3750
</div>
</div>
<div class="backmo"></div>
</div>
<!-- 动画-->
</div>
<div style=" width: 156px;height: 42px;margin: 50px auto;">
<img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
@ -185,6 +188,7 @@ export default {
},
data() {
return {
Serial:0,
baseInfo:"",
categoryQuery: {
categoryId: "",
@ -874,13 +878,30 @@ export default {
justify-content: space-between;
}
.backmo{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.news11 .news11-list .news11-list-item {
width: 24%;
height: 324px;
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;
}
.news11 .news11-list .news11-list-item .img {
width: 100%;
height: 194px;

View File

@ -1,7 +1,7 @@
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">后台管理系统</h3>
<h3 class="title">虚拟仿真实验教学中心</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"

View File

@ -54,6 +54,9 @@ export default {
],
}
},
props: {
msg: String
},
mounted() {
//
this.tabLsit();

View File

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

View File

@ -1,7 +1,7 @@
<template>
<div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">若依后台管理系统</h3>
<h3 class="title">虚拟仿真实验教学中心</h3>
<el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />