Merge branch 'main' of http://122.51.230.86:3000/dianliang/school_website
This commit is contained in:
xiao-fajia
commit
db309a2740
@ -57,7 +57,7 @@
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"swiper": "^11.1.5",
|
||||
"swiper": "^5.4.5",
|
||||
"vue": "2.6.12",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-count-to": "1.0.13",
|
||||
|
||||
BIN
ruoyi-ui/src/assets/gw/Snipaste_2024-07-23_22-51-23.jpg
Normal file
BIN
ruoyi-ui/src/assets/gw/Snipaste_2024-07-23_22-51-23.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
ruoyi-ui/src/assets/gw/home.png
Normal file
BIN
ruoyi-ui/src/assets/gw/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
ruoyi-ui/src/assets/gw/ny-banner.jpg
Normal file
BIN
ruoyi-ui/src/assets/gw/ny-banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
|
||||
|
||||
NProgress.configure({ showSpinner: false })
|
||||
|
||||
const whiteList = ['/login', '/register']
|
||||
const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching']
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
|
||||
@ -46,6 +46,26 @@ export const constantRoutes = [
|
||||
component: () => import('@/views/home'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/sb',
|
||||
component: () => import('@/views/sb'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
component: () => import('@/views/officialWebsite/about'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/platform',
|
||||
component: () => import('@/views/officialWebsite/platform'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/teaching',
|
||||
component: () => import('@/views/officialWebsite/teaching'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login'),
|
||||
|
||||
@ -209,8 +209,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swiper, SwiperSlide, } from "vue-awesome-swiper";
|
||||
import "/src/components/swiper/css/swiper.min.css";
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import { getTab,getbanner } from "@/api/gw/home";
|
||||
export default {
|
||||
components: {
|
||||
@ -316,7 +316,7 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
this.tabLsit();
|
||||
// this.tabLsit();
|
||||
},
|
||||
computed: {
|
||||
customswiper() {
|
||||
|
||||
664
ruoyi-ui/src/views/officialWebsite/about.vue
Normal file
664
ruoyi-ui/src/views/officialWebsite/about.vue
Normal file
@ -0,0 +1,664 @@
|
||||
<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>
|
||||
<!-- new -->
|
||||
<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 class="right">
|
||||
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
@click="getCurrentActive(index)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-conts" v-bind:class="[currentActive == 0 ? 'bj' : '']">
|
||||
<!-- 中心简介 -->
|
||||
<div class="about-conts-item1" v-if="currentActive == 0">
|
||||
<div class="neirong" v-html="content"></div>
|
||||
</div>
|
||||
<!-- 组织机构 -->
|
||||
<div class="about-conts-item2" v-if="currentActive == 1">
|
||||
<div class="div" v-for="(item, index) in 8">
|
||||
教学中心办公室
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 现任领导 -->
|
||||
<div class="about-conts-item3" v-if="currentActive == 2">
|
||||
<div class="about-conts-item3-div">
|
||||
<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>
|
||||
|
||||
</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: '组织机构' },
|
||||
{ name: '现任领导' },
|
||||
],
|
||||
currentActive: 2,
|
||||
isMounted: false,
|
||||
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: 微软雅黑, "Microsoft YaHei"; font-size: 18px;">淄博瑞安输变电工程有限公司成立于2006年，公司原属国网淄博供电公司下属施工企业，现为山东泉舜控股集团有限公司全资子公司，注册资本5000万元。公司设立于历史悠久的齐文化发祥地淄博市，并在济南、青岛、聊城、东营、潍坊、济宁、泰安、李庄、邯郸等各地设有分支机构。企业人才结构合理，大专以上学历及具有各种专业技术职称的近300余人，是一支经过国家电网公司多年锻造、专业技术强、电力工程施工经验丰富的的铁军队伍。<br/></span>
|
||||
</p>
|
||||
<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
|
||||
<span style="font-family: 微软雅黑, "Microsoft YaHei"; 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: 微软雅黑, "Microsoft YaHei"; 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>`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
this.currentActive = value
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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>
|
||||
676
ruoyi-ui/src/views/officialWebsite/platform.vue
Normal file
676
ruoyi-ui/src/views/officialWebsite/platform.vue
Normal file
@ -0,0 +1,676 @@
|
||||
<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>
|
||||
<!-- new -->
|
||||
<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 class="right">
|
||||
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
@click="getCurrentActive(index)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-conts" v-bind:class="[currentActive == 1 ? 'bj' : '']">
|
||||
|
||||
<!-- 专业平台介绍 -->
|
||||
<div class="ayptjs" v-if="currentActive == 0">
|
||||
<div class="tt">专业平台介绍</div>
|
||||
<div class="ayptjs-list">
|
||||
<div class="item" v-for="(item, index) in 8">
|
||||
<div class="img">
|
||||
<img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="">
|
||||
</div>
|
||||
<div class="text">
|
||||
<div class="tts">人机工程仿真分析平台</div>
|
||||
<div class="desc">
|
||||
人机工程学是一门涉及人体测量学、工业设计、工业工程、心理学、美学等多个领域的交叉学科，其研究目的是实现不同的作业中人、机器、环境三者间的协调。即运用上述学科的知识、研究方法、评价手段，对工作器具、工作方式和工作环境的设计进行分析，并提出改造建议，使得作业在效率、安全、健康、舒适等方面的性能得以有效提高。
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
<div class="xian"></div>
|
||||
<p>查看详情</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 软硬件资源介绍 -->
|
||||
<div class="about-conts-item1" v-if="currentActive == 1">
|
||||
<div class="neirong" v-html="content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</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,
|
||||
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: 微软雅黑, "Microsoft YaHei"; font-size: 18px;">淄博瑞安输变电工程有限公司成立于2006年，公司原属国网淄博供电公司下属施工企业，现为山东泉舜控股集团有限公司全资子公司，注册资本5000万元。公司设立于历史悠久的齐文化发祥地淄博市，并在济南、青岛、聊城、东营、潍坊、济宁、泰安、李庄、邯郸等各地设有分支机构。企业人才结构合理，大专以上学历及具有各种专业技术职称的近300余人，是一支经过国家电网公司多年锻造、专业技术强、电力工程施工经验丰富的的铁军队伍。<br/></span>
|
||||
</p>
|
||||
<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
|
||||
<span style="font-family: 微软雅黑, "Microsoft YaHei"; 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: 微软雅黑, "Microsoft YaHei"; 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>`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
this.currentActive = value
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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 .ayptjs {
|
||||
padding: 30px 0;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs .tt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item {
|
||||
width: 23%;
|
||||
height: 211px;
|
||||
/* overflow: hidden; */
|
||||
margin-right: 2%;
|
||||
position: relative;
|
||||
margin-bottom: 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 211px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .img img {
|
||||
width: 100%;
|
||||
height: 211px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .text {
|
||||
position: absolute;
|
||||
width: 94%;
|
||||
height: 191px;
|
||||
z-index: 3;
|
||||
background: linear-gradient(180deg, rgba(0, 83, 117, 0) 0%, #005375 100%);
|
||||
display: flex;
|
||||
padding: 0 3%;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
transition: 0.5s ease;
|
||||
padding-bottom: 20px;
|
||||
;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .text .tts {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #FFFFFF;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .text .desc {
|
||||
overflow: hidden;
|
||||
/** 隐藏超出的内容 **/
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
/** 多行 **/
|
||||
display: -webkit-box;
|
||||
/** 对象作为伸缩盒子模型显示 **/
|
||||
-webkit-box-orient: vertical;
|
||||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||||
-webkit-line-clamp: 2;
|
||||
/** 显示的行数 **/
|
||||
line-height: 28px;
|
||||
font-size: 16px;
|
||||
/* display: none; */
|
||||
transition: 0.5s ease;
|
||||
margin-bottom: -85px;
|
||||
/* padding-bottom: 20px; */
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item:hover .img::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
height: 211px;
|
||||
z-index: 1;
|
||||
/* background-color: #f0f; */
|
||||
filter: blur(10px);
|
||||
background: rgba(0, 83, 117, 0.7);
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item:hover .text .desc {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item:hover .text {
|
||||
top: -30px
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item:hover .img {
|
||||
top: -30px
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .more {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #005375;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item:hover .more {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .more .xian {
|
||||
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
/* left: 0; */
|
||||
background-color: #005375;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .more p {
|
||||
width: 30%;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.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>
|
||||
626
ruoyi-ui/src/views/officialWebsite/teaching.vue
Normal file
626
ruoyi-ui/src/views/officialWebsite/teaching.vue
Normal file
@ -0,0 +1,626 @@
|
||||
<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>
|
||||
<!-- new -->
|
||||
<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 class="right">
|
||||
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
@click="getCurrentActive(index)">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaching">
|
||||
<div class="teaching-list">
|
||||
<div class="item" v-for="(item, index) in 8">
|
||||
<div class="img">
|
||||
<img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
|
||||
</div>
|
||||
<div class="time">2024-07-20</div>
|
||||
<div class="tt">《基础化学实验》实验教学大纲《基础化学实验》实验教学大纲基础化学实验》实验教学大纲《基础化学实验》实验教学大纲</div>
|
||||
<div class="bottom">
|
||||
<div class="btn">在线预览</div>
|
||||
<p>资源下载</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page"><el-pagination background layout="prev, pager, next" :total="1000" class="">
|
||||
</el-pagination></div>
|
||||
|
||||
</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: '实验指导书' },
|
||||
{ name: '资源共享' },
|
||||
],
|
||||
currentActive: 2,
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
this.currentActive = value
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .container {
|
||||
background: #F5F5F5;
|
||||
} */
|
||||
/* 圆形分页按钮样式 */
|
||||
::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: #409EFF;
|
||||
/* 背景颜色 */
|
||||
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;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.teaching {
|
||||
padding: 40px 0;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.teaching .teaching-list {
|
||||
/* padding: 30px 2%; */
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item {
|
||||
width: 31%;
|
||||
height: 525px;
|
||||
background-color: #fff;
|
||||
margin-right: 3.2%;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .img {
|
||||
width: 100%;
|
||||
height: 288px;
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .time {
|
||||
width: 85%;
|
||||
margin: 20px auto;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #005375;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .tt {
|
||||
width: 85%;
|
||||
margin: 20px auto;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
/** 隐藏超出的内容 **/
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
/** 多行 **/
|
||||
display: -webkit-box;
|
||||
/** 对象作为伸缩盒子模型显示 **/
|
||||
-webkit-box-orient: vertical;
|
||||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||||
-webkit-line-clamp: 2;
|
||||
/** 显示的行数 **/
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .bottom {
|
||||
width: 85%;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
left: 7.5%;
|
||||
bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .bottom .btn {
|
||||
width: 132px;
|
||||
height: 48px;
|
||||
background: #005375;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.teaching .teaching-list .item .bottom p {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #005375;
|
||||
}
|
||||
|
||||
.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>
|
||||
1114
ruoyi-ui/src/views/sb.vue
Normal file
1114
ruoyi-ui/src/views/sb.vue
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user