600 lines
12 KiB
Vue
600 lines
12 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="top-box">
|
||
<div class="tab-box">
|
||
<!-- left -->
|
||
<div class="d-s">
|
||
<div class="logo-box"></div>
|
||
<div class="logo-size">
|
||
虚拟仿真实验教学中心
|
||
</div>
|
||
</div>
|
||
<!-- tab -->
|
||
<div class="d-s">
|
||
<div class="x-x" v-for="(item, index) in tablist " :key="index">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<!-- right -->
|
||
<div class="d-s" style="font-size: 20px; color: #fff;">
|
||
<i class="el-icon-search"></i>
|
||
<div style="font-size: 18px; margin-left: 15px; ">搜索</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ny-banner">
|
||
<img src="../../assets/gw/ny-banner.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="navigation">
|
||
<div class="content">
|
||
<div class="left"> <img src="../../assets/gw/home.png" alt="">
|
||
<p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list">
|
||
<div class="item" v-for="(item, index) in 8" :key="index">
|
||
<div class="img">
|
||
<img src="../../assets/gw/Snipaste_2024-07-24_21-58-16.jpg" alt="" class="">
|
||
</div>
|
||
<div class="tt">船舶轮机实训虚拟仿真项目</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<el-pagination background layout="prev, pager, next" :total="1000" class="">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
<div class="index-footer">
|
||
<div class="footer">
|
||
<div class="logo">
|
||
<div class="d-s">
|
||
<div class="logo-box"></div>
|
||
<div class="logo-size">
|
||
虚拟仿真实验教学中心
|
||
</div>
|
||
</div>
|
||
<div class="footer-contact">
|
||
<div class="p">
|
||
|
||
<img src="../../assets/gw/tel.png" alt="">
|
||
<div class="pp">电话：0000-00000000</div>
|
||
|
||
</div>
|
||
|
||
<div class="p">
|
||
|
||
<img src="../../assets/gw/email.png" alt="">
|
||
<div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
|
||
|
||
</div>
|
||
<div class="p">
|
||
|
||
<img src="../../assets/gw/address.png" alt="">
|
||
<div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer-nav">
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">虚仿专业频道</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">教学团队</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">教学研讨活动</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
</div>
|
||
<div class="web_icp">
|
||
<div class="left">
|
||
<a href="">版权所有：XXXXXX</a>
|
||
<a href="">版权所有：XXXXXX</a>
|
||
</div>
|
||
<div class="right">
|
||
<div class="">返回顶部</div>
|
||
<img src="../../assets/gw/top.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||
import "swiper/css/swiper.min.css";
|
||
export default {
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide,
|
||
},
|
||
name: 'HelloWorld',
|
||
props: {
|
||
msg: String
|
||
},
|
||
data() {
|
||
return {
|
||
tablist: [
|
||
{ name: '首页' },
|
||
{ name: '中心概括' },
|
||
{ name: '教学资源' },
|
||
{ name: '教学平台' },
|
||
{ name: '教学团队' },
|
||
{ name: '专业委员会' },
|
||
{ name: '教学研讨活动' },
|
||
{ name: '虚仿专业频道' },
|
||
{ name: '大赛风采' },
|
||
{ name: '实践平台' },
|
||
{ name: '合作企业' },
|
||
{ name: '联系我们' },
|
||
],
|
||
|
||
nav: [
|
||
{ name: '教学团队' },
|
||
{ name: '教学成果' },
|
||
],
|
||
currentActive: 0,
|
||
isMounted: false,
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
|
||
methods: {
|
||
// 触发导航
|
||
getCurrentActive(value) {
|
||
if (this.currentActive == value) {
|
||
return
|
||
}
|
||
this.currentActive = value
|
||
}
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
.bj {
|
||
background: #F5F5F5;
|
||
}
|
||
|
||
::v-deep .team .el-input__inner {
|
||
width: 240px;
|
||
border-radius: 50px;
|
||
}
|
||
|
||
/* 圆形分页按钮样式 */
|
||
::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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
|
||
.list {
|
||
width: 80%;
|
||
margin: 30px auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-top: 50px;
|
||
|
||
}
|
||
|
||
.list .item {
|
||
width: 23%;
|
||
height: 220px;
|
||
margin-bottom: 30px;
|
||
position: relative;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.list .item .img {
|
||
width: 100%;
|
||
height: 220px;
|
||
border-radius: 0px 0px 0px 0px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.list .item .img img {
|
||
width: 75%;
|
||
}
|
||
|
||
.list .item .tt {
|
||
font-size: 20px;
|
||
|
||
position: absolute;
|
||
width: 94%;
|
||
height: 94%;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
color: #FFFFFF;
|
||
line-height: 35px;
|
||
padding: 3%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(0, 83, 117, 0.9);
|
||
top: 100%;
|
||
left: 0;
|
||
transition: 0.5s ease;
|
||
}
|
||
.list .item:hover .tt{
|
||
top: 0%;
|
||
}
|
||
|
||
.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>
|