dianliang/school_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端补正

Browse Source
This commit is contained in:
xvv 2024-07-29 11:08:00 +08:00
parent 1fbd3799bf
commit 834ccef6ea
5 changed files with 443 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ruoyi-ui/src/permission.js
View File

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

1
ruoyi-ui/src/router/index.js
View File

@ -101,7 +101,6 @@ export const constantRoutes = [
component: () => import('@/views/officialWebsite/contact'), component: () => import('@/views/officialWebsite/contact'),
hidden: true hidden: true
}, },
{ {
path: '/practice', // 实践平台 path: '/practice', // 实践平台
component: () => import('@/views/officialWebsite/practice'), component: () => import('@/views/officialWebsite/practice'),

158
ruoyi-ui/src/views/home.vue
View File

@ -1,34 +1,35 @@
<template> <template>
<div class="container"> <div class="container">
<div class="top-box"> <div class="top-box">
<div class="tab-box"> <headers></headers>
<!-- left --> <!-- <div class="tab-box">-->
<div class="d-s"> <!-- &lt;!&ndash; left &ndash;&gt;-->
<div class="logo-box"> <!-- <div class="d-s">-->
<img :src="baseInfo.webImg" /> <!-- <div class="logo-box">-->
</div> <!-- <img :src="baseInfo.webImg" />-->
<div class="logo-size"> <!-- </div>-->
{{ this.baseInfo.webName }} <!-- <div class="logo-size">-->
</div> <!-- {{ this.baseInfo.webName }}-->
</div> <!-- </div>-->
<!-- tab --> <!-- </div>-->
<div class="d-s"> <!-- &lt;!&ndash; tab &ndash;&gt;-->
<div class="x-x" v-for="(item, index) in tablist " :key="index"> <!-- <div class="d-s">-->
{{ item.label }} <!-- <div class="x-x" v-for="(item, index) in tablist " :key="index" @click="tabClick(item)" >-->
</div> <!-- {{ item.label }}-->
</div> <!-- </div>-->
<!-- right --> <!-- </div>-->
<div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;"> <!-- &lt;!&ndash; right &ndash;&gt;-->
<i class="el-icon-search" v-if="show_search"></i> <!-- <div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;">-->
<div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索 <!-- <i class="el-icon-search" v-if="show_search"></i>-->
</div> <!-- <div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索-->
<el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search"> <!-- </div>-->
<i slot="prefix" class="el-input__icon el-icon-search"></i> <!-- <el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">-->
</el-input> <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;" <!-- </el-input>-->
@click="show_search = true"></i> <!-- <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"-->
</div> <!-- @click="show_search = true"></i>-->
</div> <!-- </div>-->
<!-- </div>-->
<div style="overflow: hidden;position: relative;" class="mySwiper"> <div style="overflow: hidden;position: relative;" class="mySwiper">
<swiper ref="mySwiper" :options="swiperOptions" style="width: 100%"> <swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
<swiper-slide v-for="(item,index) in bannerlist" :key="index"> <swiper-slide v-for="(item,index) in bannerlist" :key="index">
@ -161,60 +162,61 @@
<img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px"> <img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
</div> </div>
</div> </div>
<div class="index-footer"> <footers></footers>
<div class="footer"> <!-- <div class="index-footer">-->
<div class="logo"> <!-- <div class="footer">-->
<div class="d-s"> <!-- <div class="logo">-->
<div class="logo-box"> <!-- <div class="d-s">-->
<img :src="baseInfo.webImg" /> <!-- <div class="logo-box">-->
</div> <!-- <img :src="baseInfo.webImg" />-->
<div class="logo-size"> <!-- </div>-->
{{this.baseInfo.webName}} <!-- <div class="logo-size">-->
</div> <!-- {{this.baseInfo.webName}}-->
</div> <!-- </div>-->
<div class="footer-contact"> <!-- </div>-->
<div class="p"> <!-- <div class="footer-contact">-->
<!-- <div class="p">-->
<img src="../assets/gw/tel.png" alt=""> <!-- <img src="../assets/gw/tel.png" alt="">-->
<div class="pp">电话：{{this.baseInfo.contactNumber}}</div> <!-- <div class="pp">电话：{{this.baseInfo.contactNumber}}</div>-->
</div> <!-- </div>-->
<div class="p"> <!-- <div class="p">-->
<img src="../assets/gw/email.png" alt=""> <!-- <img src="../assets/gw/email.png" alt="">-->
<div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div> <!-- <div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div>-->
</div> <!-- </div>-->
<div class="p"> <!-- <div class="p">-->
<img src="../assets/gw/address.png" alt=""> <!-- <img src="../assets/gw/address.png" alt="">-->
<div class="pp">地址：{{ this.baseInfo.address }}</div> <!-- <div class="pp">地址：{{ this.baseInfo.address }}</div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="footer-nav"> <!-- <div class="footer-nav">-->
<div class="footer-nav-item" v-for="item in itemsWithoutFirst"> <!-- <div class="footer-nav-item" v-for="item in itemsWithoutFirst">-->
<div class="tt">{{ item.label }}</div> <!-- <div class="tt">{{ item.label }}</div>-->
<a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a> <!-- <a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="web_icp"> <!-- <div class="web_icp">-->
<div class="left"> <!-- <div class="left">-->
<a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a> <!-- <a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a>-->
<a href="">备案信息：{{ this.baseInfo.recordInfo }}</a> <!-- <a href="">备案信息：{{ this.baseInfo.recordInfo }}</a>-->
</div> <!-- </div>-->
<div class="right"> <!-- <div class="right">-->
<div class="">返回顶部</div> <!-- <div class="">返回顶部</div>-->
<img src="../assets/gw/top.png" alt=""> <!-- <img src="../assets/gw/top.png" alt="">-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
</template> </template>
@ -222,11 +224,14 @@
import {Swiper, SwiperSlide} from "vue-awesome-swiper"; import {Swiper, SwiperSlide} from "vue-awesome-swiper";
import "swiper/css/swiper.min.css"; import "swiper/css/swiper.min.css";
import {getTab, getbanner, getBaseInfo} from "@/api/gw/home"; import {getTab, getbanner, getBaseInfo} from "@/api/gw/home";
import headers from '@/views/officialWebsite/Components/header.vue'
import footers from '@/views/officialWebsite/Components/footer.vue'
export default { export default {
components: { components: {
Swiper, Swiper,
SwiperSlide, SwiperSlide,
headers,
footers
}, },
name: 'HelloWorld', name: 'HelloWorld',
props: { props: {
@ -353,6 +358,11 @@ export default {
}, },
methods: { methods: {
tabClick(item){
if(item.label=="联系我们"){
this.$router.push('/contact');
}
},
/** 顶部tab列表 */ /** 顶部tab列表 */
tabLsit() { tabLsit() {
getTab().then(response => { getTab().then(response => {
@ -454,7 +464,7 @@ export default {
} }
.x-x { .x-x {
margin-right: 20px; margin-right: 10px;
cursor: pointer; cursor: pointer;
} }

231
ruoyi-ui/src/views/officialWebsite/Components/footer.vue Normal file
View File

@ -0,0 +1,231 @@
<template>
<div class="index-footer">
<div class="footer">
<div class="logo">
<div class="d-s">
<div class="logo-box">
<img :src="baseInfo.webImg" />
</div>
<div class="logo-size">
{{this.baseInfo.webName}}
</div>
</div>
<div class="footer-contact">
<div class="p">
<img src="../../../assets/gw/tel.png" alt="">
<div class="pp">电话：{{this.baseInfo.contactNumber}}</div>
</div>
<div class="p">
<img src="../../../assets/gw/email.png" alt="">
<div class="pp">邮箱：{{this.baseInfo.contactEmail}}</div>
</div>
<div class="p">
<img src="../../../assets/gw/address.png" alt="">
<div class="pp">地址：{{ this.baseInfo.address }}</div>
</div>
</div>
</div>
<div class="footer-nav">
<div class="footer-nav-item" v-for="item in itemsWithoutFirst">
<div class="tt">{{ item.label }}</div>
<a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</a>
</div>
</div>
<div class="web_icp">
<div class="left">
<a href="">版权所有：{{ this.baseInfo.copyrightInfo }}</a>
<a href="">备案信息：{{ this.baseInfo.recordInfo }}</a>
</div>
<div class="right">
<div class="">返回顶部</div>
<img src="../../../assets/gw/top.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
import { getBaseInfo, } from '@/api/gw/home'
export default {
data() {
return {
baseInfo:"",
}
},
mounted() {
this.getWebBaseInfo()
},
methods:{
getWebBaseInfo() {
getBaseInfo().then(res => {
this.baseInfo = res.data
this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
})
}
}
}
</script>
<style scoped lang="scss">
.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;
}
.logo-box {
width: 50px;
height: 50px;
background: #fff;
}
.logo-box img{
width: 50px;
height: 50px;
}
.logo-size {
font-weight: 800;
font-size: 24px;
color: #FFFFFF;
margin-left: 20px;
}
.d-s {
display: flex;
align-items: center;
}
</style>

127
ruoyi-ui/src/views/officialWebsite/Components/header.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div class="tab-box">
<!-- left -->
<div class="d-s">
<div class="logo-box">
<img :src="baseInfo.webImg" />
</div>
<div class="logo-size">
{{ this.baseInfo.webName }}
</div>
</div>
<!-- tab -->
<div class="d-s">
<div class="x-x" v-for="(item, index) in tablist " :key="index" @click="tabClick(item)" >
{{ item.label }}
</div>
</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>
</div>
</div>
</template>
<script>
import { getbanner, getBaseInfo, getTab } from '@/api/gw/home'
export default {
data() {
return {
baseInfo:"",
input:'',
show_search: true,
tablist: [
{name: '首页'},
{name: '中心概括'},
{name: '教学资源'},
{name: '教学平台'},
{name: '教学团队'},
{name: '专业委员会'},
{name: '教学研讨活动'},
{name: '虚仿专业频道'},
{name: '大赛风采'},
{name: '实践平台'},
{name: '合作企业'},
{name: '联系我们'},
],
}
},
mounted() {
// 页面加载完毕调用
this.tabLsit();
this.getWebBaseInfo()
},
methods:{
tabClick(item){
if(item){
this.$router.push(item.jumpUrl);
}
},
tabLsit() {
getTab().then(response => {
if (response.code == 200) {
this.tablist = response.data;
this.categoryQuery.categoryId = this.tablist[0].id
}
})
},
getWebBaseInfo() {
getBaseInfo().then(res => {
this.baseInfo = res.data
this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
})
}
}
}
</script>
<style scoped lang="scss">
.tab-box {
width: 100%;
box-sizing: border-box;
padding: 20px 50px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);;
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-box img{
width: 50px;
height: 50px;
}
.logo-size {
font-weight: 800;
font-size: 24px;
color: #FFFFFF;
margin-left: 20px;
}
.x-x {
margin-right: 10px;
cursor: pointer;
}
</style>