更新
This commit is contained in:
许允枞
parent
cd2d738511
commit
2b07763429
BIN
ruoyi-ui/src/assets/gw/dtmap2.png
Normal file
BIN
ruoyi-ui/src/assets/gw/dtmap2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 758 KiB |
BIN
ruoyi-ui/src/assets/gw/zxgkbackground.png
Normal file
BIN
ruoyi-ui/src/assets/gw/zxgkbackground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
ruoyi-ui/src/assets/gw/zxgkbanner.png
Normal file
BIN
ruoyi-ui/src/assets/gw/zxgkbanner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 KiB |
BIN
ruoyi-ui/src/assets/images/b_img.png
Normal file
BIN
ruoyi-ui/src/assets/images/b_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
ruoyi-ui/src/assets/images/bck.png
Normal file
BIN
ruoyi-ui/src/assets/images/bck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 778 KiB |
BIN
ruoyi-ui/src/assets/images/bottom_.png
Normal file
BIN
ruoyi-ui/src/assets/images/bottom_.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 544 KiB |
BIN
ruoyi-ui/src/assets/images/l_img.png
Normal file
BIN
ruoyi-ui/src/assets/images/l_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
ruoyi-ui/src/assets/images/map_l.png
Normal file
BIN
ruoyi-ui/src/assets/images/map_l.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
ruoyi-ui/src/assets/images/map_r.png
Normal file
BIN
ruoyi-ui/src/assets/images/map_r.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
ruoyi-ui/src/assets/images/new_bck.png
Normal file
BIN
ruoyi-ui/src/assets/images/new_bck.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 711 KiB |
BIN
ruoyi-ui/src/assets/images/top_.png
Normal file
BIN
ruoyi-ui/src/assets/images/top_.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
@ -16,7 +16,7 @@
|
||||
@click="tabClick(item.jumpUrl, item.id,index)"
|
||||
>
|
||||
<div>
|
||||
<img v-if="item.iconUrl" :src=" imgurl +item.iconUrl " alt="" style="width: 25px;height: 25px">
|
||||
<img v-if="item.iconUrl" :src=" imgurl +item.iconUrl " alt="" style="width: 20px;height: 20px">
|
||||
</div>
|
||||
<div class="bsize">{{ item.label }}</div>
|
||||
</div>
|
||||
@ -500,7 +500,8 @@ export default {
|
||||
.tab-boxs {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 50px;
|
||||
//padding: 0px 50px;
|
||||
padding-left: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -526,15 +527,15 @@ export default {
|
||||
}
|
||||
|
||||
.logo-box img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 47px;
|
||||
height: 47px;
|
||||
}
|
||||
|
||||
.logo-size {
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 20px;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
@ -558,7 +559,7 @@ export default {
|
||||
|
||||
.bsize {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
@ -1,51 +1,64 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
|
||||
<div class="top-box">
|
||||
<headers :msg='msg'></headers>
|
||||
<headers :msg="msg"></headers>
|
||||
|
||||
<div class="ny-banner">
|
||||
<img src="../../assets/gw/zxgg.jpg" alt="">
|
||||
<img src="../../assets/gw/zxgkbanner.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- new -->
|
||||
<div class="navigation">
|
||||
<div class="content">
|
||||
<div></div>
|
||||
<!-- <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="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)">
|
||||
@click="getCurrentActive(index)"
|
||||
>
|
||||
{{ item.categoryName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-conts" v-bind:class="[currentActive == 0 ? 'bj' : '']">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div v-for="(item, index) in nav " :key=index>
|
||||
<div class="about-conts-item1" v-if="currentActive == index && currentActive !== 1">
|
||||
<div class="about-conts-item1" v-if="currentActive == index ">
|
||||
<div class="neirong" v-html="pageContext"></div>
|
||||
|
||||
</div>
|
||||
<div class="about-conts-item1" v-if="currentActive == index && currentActive === 1">
|
||||
<div class="dataClass">
|
||||
<div class="ddj" v-for="(item, index) in dataList" @click="goDeatail(item)">
|
||||
{{ item.contentTitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="about-conts-item1" v-if="currentActive == index && currentActive === 1">-->
|
||||
<!-- <div class="dataClass">-->
|
||||
<!-- <div class="ddj" v-for="(item, index) in dataList" @click="goDeatail(item)">-->
|
||||
<!-- {{ item.contentTitle }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<footers></footers>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import { getListById, getCategoryByParentId} from "@/api/officialWebsite/getPageData";
|
||||
import {getinfo} from "@/api/gw/home";
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
import { getListById, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
|
||||
import { getinfo } from '@/api/gw/home'
|
||||
import headers from '@/views/officialWebsite/Components/header.vue'
|
||||
import footers from '@/views/officialWebsite/Components/footer.vue'
|
||||
|
||||
@ -64,19 +77,18 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
msg:1,
|
||||
msg: 1,
|
||||
dataList: [],
|
||||
pageContext: "",
|
||||
nav: [
|
||||
],
|
||||
pageContext: '',
|
||||
nav: [],
|
||||
currentActive: 0,
|
||||
isMounted: false,
|
||||
orgList: "",
|
||||
orgList: '',
|
||||
postList: [],
|
||||
content: "",
|
||||
leaderList: "",
|
||||
queryForm:{
|
||||
categoryId: this.$route.query.id || "",
|
||||
content: '',
|
||||
leaderList: '',
|
||||
queryForm: {
|
||||
categoryId: this.$route.query.id || '',
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
@ -86,10 +98,38 @@ export default {
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData();
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
@ -98,7 +138,7 @@ export default {
|
||||
this.currentActive = value
|
||||
if (value === 1) {
|
||||
this.getContentByCategoryId(this.nav[value].id)
|
||||
}else {
|
||||
} else {
|
||||
this.getContent()
|
||||
}
|
||||
},
|
||||
@ -110,12 +150,12 @@ export default {
|
||||
initPageData() {
|
||||
getCategoryByParentId(this.queryForm.categoryId).then(res => {
|
||||
this.nav = res.data
|
||||
if (this.currentActive === 0){
|
||||
if (this.currentActive === 0) {
|
||||
this.getContent()
|
||||
}
|
||||
})
|
||||
},
|
||||
getContent(){
|
||||
getContent() {
|
||||
this.queryForm.categoryId = this.nav[this.currentActive].id
|
||||
getinfo(this.queryForm).then(res => {
|
||||
this.pageContext = res.data.list[0].contentDetail
|
||||
@ -126,7 +166,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
/* .container {
|
||||
background: #F5F5F5;
|
||||
} */
|
||||
@ -134,6 +174,32 @@ export default {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
|
||||
.container {
|
||||
//position: relative;
|
||||
}
|
||||
|
||||
.b_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.r_img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
/* height: 1000px; */
|
||||
@ -153,7 +219,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
@ -267,13 +333,35 @@ export default {
|
||||
|
||||
.about-conts {
|
||||
padding: 40px 0;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
//z-index: -2;
|
||||
background-position: top;
|
||||
|
||||
}
|
||||
|
||||
//.bottom_img {
|
||||
// width: 100%;
|
||||
// height: 400px;
|
||||
// position: fixed; /* 固定在页面 */
|
||||
// bottom: 0px; /* 固定在底部 */
|
||||
// left: 0; /* 确保元素从页面左侧开始 */
|
||||
// background-image: url("../../assets/images/bottom_.png");
|
||||
// background-repeat: no-repeat;
|
||||
// //z-index: -1;
|
||||
// background-size: cover;
|
||||
//}
|
||||
|
||||
|
||||
.about-conts .about-conts-item1 {
|
||||
padding: 30px 2%;
|
||||
width: 76%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
z-index: 999!important;
|
||||
}
|
||||
|
||||
.about-conts .about-conts-item2 {
|
||||
@ -524,11 +612,13 @@ export default {
|
||||
gap: 10px;
|
||||
|
||||
}
|
||||
.ddj:hover{
|
||||
|
||||
.ddj:hover {
|
||||
background-color: #00afff;
|
||||
color: #fff;
|
||||
}
|
||||
.ddj{
|
||||
|
||||
.ddj {
|
||||
border: 1px solid black;
|
||||
font-size: 18px;
|
||||
margin: 10px;
|
||||
@ -538,4 +628,62 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.neirong {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
//position: fixed; /* 固定在页面 */
|
||||
//top: 0px; /* 固定在底部 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="top-box">
|
||||
<headers :msg='msg'></headers>
|
||||
<headers :msg="msg"></headers>
|
||||
|
||||
<div class="ny-banner">
|
||||
<img src="../../assets/gw/hzqy.png" alt="">
|
||||
@ -10,41 +10,52 @@
|
||||
|
||||
<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="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 teachingAchievements" :key="index" @click="goDeatail(item)">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="list1">
|
||||
<div class="item" v-for="(item, index) in teachingAchievements" :key="index" @click="goDeatail(item)">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
</div>
|
||||
<div class="tt">{{ item.contentTitle }}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="page-box">
|
||||
<!-- <el-pagination background layout="prev, pager, next" :total="1000" class="">-->
|
||||
<!-- </el-pagination>-->
|
||||
<!-- <page-util :category-id="categoryId" @event-message="handleDataFromPage" />-->
|
||||
<!-- <el-pagination background layout="prev, pager, next" :total="1000" class="">-->
|
||||
<!-- </el-pagination>-->
|
||||
<!-- <page-util :category-id="categoryId" @event-message="handleDataFromPage" />-->
|
||||
</div>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import {getPageData, getListById,getCategoryByParentId} from "@/api/officialWebsite/getPageData";
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
import { getPageData, getListById, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
|
||||
import headers from '@/views/officialWebsite/Components/header.vue'
|
||||
import footers from '@/views/officialWebsite/Components/footer.vue'
|
||||
import {getTab, getinfo} from "@/api/gw/home";
|
||||
import { getTab, getinfo } from '@/api/gw/home'
|
||||
import PageUtil from '@/views/officialWebsite/Components/page'
|
||||
|
||||
export default {
|
||||
@ -53,13 +64,13 @@ export default {
|
||||
SwiperSlide,
|
||||
headers,
|
||||
footers,
|
||||
"page-util": PageUtil
|
||||
'page-util': PageUtil
|
||||
},
|
||||
name: 'HelloWorld',
|
||||
|
||||
data() {
|
||||
return {
|
||||
msg:10,
|
||||
msg: 10,
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
teachingAchievements: [],
|
||||
pageContextList: [],
|
||||
@ -69,16 +80,49 @@ export default {
|
||||
],
|
||||
currentActive: 0,
|
||||
isMounted: false,
|
||||
categoryId: "",
|
||||
categoryId: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 页面加载完毕调用
|
||||
this.initPageData();
|
||||
this.initPageData()
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
@ -89,9 +133,9 @@ export default {
|
||||
|
||||
initPageData() {
|
||||
let routeParam = {
|
||||
"categoryId": this.$route.query.id,
|
||||
"pageNum": 1,
|
||||
"pageSize": 10
|
||||
'categoryId': this.$route.query.id,
|
||||
'pageNum': 1,
|
||||
'pageSize': 10
|
||||
}
|
||||
getCategoryByParentId(routeParam.categoryId).then(res => {
|
||||
getListById(res.data[0].id).then(response => {
|
||||
@ -99,7 +143,7 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
handleDataFromPage(data){
|
||||
handleDataFromPage(data) {
|
||||
this.teachingAchievements = data
|
||||
}
|
||||
}
|
||||
@ -144,7 +188,7 @@ export default {
|
||||
|
||||
/* 选中的页码按钮样式 */
|
||||
::v-deep .el-pagination .el-pager .active {
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
/* 背景颜色 */
|
||||
color: #fff;
|
||||
/* 文字颜色 */
|
||||
@ -193,7 +237,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
@ -307,13 +351,22 @@ export default {
|
||||
|
||||
|
||||
.list {
|
||||
width: 80%;
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
//width: 80%; //margin: 30px auto; display: flex;
|
||||
flex-wrap: wrap;
|
||||
/*justify-content: space-between;*/
|
||||
margin-top: 50px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.list1 {
|
||||
width: 76%;
|
||||
margin: 30px auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
@ -491,4 +544,57 @@ export default {
|
||||
line-height: 18px;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 200px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -22,27 +22,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="committee-cont" v-show="currentActive == 0">
|
||||
<div >
|
||||
<!-- <div class="committee-cont" v-show="currentActive == 0">-->
|
||||
<!-- <div >-->
|
||||
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- v-if="currentActive !== 0"-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="committee-cont" >
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div v-if="currentActive == 0" style="width: 75%;background: #fff;">
|
||||
<div class="n-box" v-for="(item,index) in onelist" @click="goDeatail(item)" >
|
||||
<div>
|
||||
<div class="v-time" >{{item.publishDate}}</div>
|
||||
<div class="v-title">{{item.contentTitle}}</div>
|
||||
<div class="v-size">{{item.summary || '' }}</div>
|
||||
<div class="v-time" >{{item.publishDate}}111</div>
|
||||
<div class="v-title">{{item.contentTitle}}111</div>
|
||||
<div class="v-size">{{item.summary || '' }}11</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src=" imgurl + item.contentImg" style="width: 420px; height: 263px; ">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<page-util style="background: #fff;z-index: 999;position:relative" :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
<page-util style="margin-top: 30px" :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
|
||||
<div class="committee-cont" v-if="currentActive !== 0" >
|
||||
<!-- main -->
|
||||
<div>
|
||||
|
||||
<div v-else>
|
||||
<div class="about-conts-item1" v-if="currentActive == 2">
|
||||
<div class="noticeRsr" v-html="twolist" >
|
||||
</div>
|
||||
@ -55,9 +64,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
</div>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
<footers style="position: relative;"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -109,8 +120,38 @@ export default {
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
getContentDetail(){
|
||||
this.routeParam.categoryId = this.nav[this.currentActive].id
|
||||
getPageData(this.routeParam).then(res => {
|
||||
@ -199,7 +240,9 @@ export default {
|
||||
|
||||
border: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.about-conts-item1{
|
||||
background: #fff;
|
||||
}
|
||||
/* 选中的页码按钮样式 */
|
||||
::v-deep .el-pagination .el-pager .active {
|
||||
background-color: #005375 !important;
|
||||
@ -359,13 +402,20 @@ export default {
|
||||
}
|
||||
|
||||
.committee-cont {
|
||||
width: 80%;
|
||||
margin: 15px auto;
|
||||
padding: 30px 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
//width: 80%;
|
||||
//margin: 15px auto;
|
||||
//padding: 30px 0;
|
||||
//box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.committee-cont .news {
|
||||
@ -641,4 +691,57 @@ export default {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,26 +24,318 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="committee-cont">
|
||||
<div class="tabber-box " v-if="currentActive == 6">
|
||||
<div>
|
||||
<el-steps :active="active" finish-status="success" align-center>
|
||||
<el-step title="个人选拔赛报名"></el-step>
|
||||
<el-step title="地区选拔赛报名"></el-step>
|
||||
<el-step title="确认报名团队"></el-step>
|
||||
<el-step title="地区选拔赛报名结果"></el-step>
|
||||
<el-step title="比赛资料上传"></el-step>
|
||||
</el-steps>
|
||||
<div class="step-box" v-if="active == 0">
|
||||
<div class="step-box-title">
|
||||
<el-form label-width="80px" :model="signUpForm" :rules="rules" ref="form">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div style="width: 76%;margin: 0 auto;background: #FFFFFF;">
|
||||
<div class="tabber-box " v-if="currentActive == 6">
|
||||
<div>
|
||||
<el-steps :active="active" finish-status="success" align-center>
|
||||
<el-step title="个人选拔赛报名"></el-step>
|
||||
<el-step title="地区选拔赛报名"></el-step>
|
||||
<el-step title="确认报名团队"></el-step>
|
||||
<el-step title="地区选拔赛报名结果"></el-step>
|
||||
<el-step title="比赛资料上传"></el-step>
|
||||
</el-steps>
|
||||
<div class="step-box" v-if="active == 0">
|
||||
<div class="step-box-title">
|
||||
<el-form label-width="80px" :model="signUpForm" :rules="rules" ref="form">
|
||||
<el-form-item label="学号" prop="studentId">
|
||||
<el-input v-model="signUpForm.studentId"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="stuName">
|
||||
<el-input v-model="signUpForm.stuName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="stuName">
|
||||
<el-select v-model="signUpForm.sex" filterable allow-create default-first-option
|
||||
placeholder="请选择性别"
|
||||
>
|
||||
<el-option key="男" label="男" value="男">
|
||||
</el-option>
|
||||
<el-option key="女" label="女" value="女">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属赛区" prop="division">
|
||||
<el-select v-model="signUpForm.division" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校" label-width="80px" prop="schoolName">
|
||||
<el-select v-model="signUpForm.schoolName" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="院系名称" prop="collegeName">
|
||||
<el-input v-model="signUpForm.collegeName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业名称" prop="major">
|
||||
<el-input v-model="signUpForm.major"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="手机号" prop="phoneNumber">
|
||||
<el-input v-model="signUpForm.phoneNumber">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="signUpForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学生证/学生卡" prop="studentIdCard" label-width="130px">
|
||||
<image-upload :limit="1" v-model="signUpForm.studentIdCard"></image-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="trialsSubmitForm">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 1" style="position: relative">
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">
|
||||
个人选拔赛成绩未出，请耐心等待
|
||||
<br>
|
||||
成绩仅供参考，最终选择由指导老师和领队老师做决定
|
||||
</div>
|
||||
<!-- <div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">成绩仅供参考，最终选择由指导老师和领队老师做决定</div> -->
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%"
|
||||
v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == false"
|
||||
>
|
||||
等待领队老师确认，您的个人成绩为 : {{ signUpForm.trialsScore }}
|
||||
</div>
|
||||
<div style="position: absolute;left: 15%; top: 30%" v-if="signUpForm.trialsScore">
|
||||
<div style="font-size: 24px">
|
||||
个人选拔赛成绩：
|
||||
</div>
|
||||
<div style="font-size: 24px;color:#ff0000;margin-top: 15px">
|
||||
{{ signUpForm.trialsScore }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-top: 25px;width: 600px;margin-left: 30%" v-if="signUpForm.isPreliminary == true">
|
||||
|
||||
<el-form ref="form" :rules="preliminaryFormRules" :model="preliminaryForm" label-width="150px">
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<el-form-item label="赛区" prop="divisionLabel">
|
||||
<el-input v-model="preliminaryForm.divisionLabel"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学校" prop="schoolName">
|
||||
<el-input v-model="preliminaryForm.schoolName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="赛事" prop="competition">
|
||||
<el-checkbox-group v-model="preliminaryForm.competition">
|
||||
<el-checkbox label="1">化验赛</el-checkbox>
|
||||
<el-checkbox label="2">虚拟赛</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="领队老师" prop="ldTeacherInfo.teacherName">
|
||||
<el-input v-model="preliminaryForm.ldTeacherInfo.teacherName" disabled></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="团队名称" prop="teamName">
|
||||
<el-input v-model="preliminaryForm.teamName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="队员1" prop="teammateOne">
|
||||
<el-select v-model="preliminaryForm.teammateOne" placeholder="第一个队友">
|
||||
<el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
|
||||
:label="item.stuName"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="队员2" prop="teammateTwo">
|
||||
<el-select v-model="preliminaryForm.teammateTwo" placeholder="第二个队友">
|
||||
<el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId"
|
||||
:label="item.stuName"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="d-s">
|
||||
<el-form-item label="指导老师1" prop="teacherOne">
|
||||
<el-select v-model="preliminaryForm.teacherOne" placeholder="指导老师1">
|
||||
<el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
|
||||
:label="item.teacherName" :value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指导老师2" prop="teacherTwo">
|
||||
<el-select v-model="preliminaryForm.teacherTwo" placeholder="指导老师2">
|
||||
<el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
|
||||
:label="item.teacherName" :value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="盲样联系人" prop="sampleConcat">
|
||||
<el-input v-model="preliminaryForm.sampleConcat"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人手机号" prop="sampleNumber">
|
||||
<el-input v-model="preliminaryForm.sampleNumber"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item v-if="preliminaryForm.competition.includes('1')" label="盲样邮寄地址"
|
||||
prop="sampleAddress"
|
||||
>
|
||||
<el-input v-model="preliminaryForm.sampleAddress"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件（纸质报名表盖章）" prop="uploadFile" label-width="180px">
|
||||
<!-- <file-upload :fileSize="20" :fileType="['doc','docx','pdf','zip']" v-model="preliminaryForm.uploadFile"></file-upload> -->
|
||||
<file-upload :fileSize="20" :fileType="['pdf']" v-model="preliminaryForm.uploadFile"></file-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == true">
|
||||
<el-button type="primary" @click="preliminarySubmit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 2">
|
||||
|
||||
<el-descriptions class="margin-top" title="团队信息" border>
|
||||
<el-descriptions-item label="赛区">{{ preliminaryForm.divisionLabel }}</el-descriptions-item>
|
||||
<el-descriptions-item label="学校">{{ preliminaryForm.hitRegInfo.schoolName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="领队老师">{{
|
||||
preliminaryForm.ldTeacherInfo.teacherName
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="指导老师">{{ preliminaryForm.zdTeacherStr }}</el-descriptions-item>
|
||||
<el-descriptions-item label="样品联系人">{{
|
||||
preliminaryForm.hitRegInfo.sampleConcat
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人手机号">{{
|
||||
preliminaryForm.hitRegInfo.sampleNumber
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="样品邮寄地址">{{
|
||||
preliminaryForm.hitRegInfo.sampleAddress
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
<el-table :data="preliminaryForm.hitRegInfo.studentUser" border style="width: 100%">
|
||||
<el-table-column prop="userName" align="center" label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.status == 0">待确认</span>
|
||||
<span v-if="scope.row.status == 1">同意</span>
|
||||
<span v-if="scope.row.status == 2">拒绝</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.isOwn == '1'">
|
||||
<el-button size="mini" type="text" icon="el-icon-check"
|
||||
@click="regChoose(scope.row, 1)"
|
||||
>同意
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-close"
|
||||
@click="regChoose(scope.row, 2)"
|
||||
>拒绝
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 3">
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%">
|
||||
地区选拔赛报名提交成功，请通过大赛通知获取通过信息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-box" v-if="active == 4">
|
||||
<div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）
|
||||
</div>
|
||||
<file-upload style="margin-top: 5%" :fileSize="200" :fileType="['zip', 'rar', '7z']"
|
||||
v-model="preliminaryForm.hitRegInfo.dsFile"
|
||||
></file-upload>
|
||||
<div>
|
||||
<el-button style="margin-top: 8%" type="primary" @click="fileSubmit">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成绩查询 -->
|
||||
<div class="tabber-box1" v-if="currentActive == 7">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="成绩" name="scores" class="tabber-box">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h3>个人选拔赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.trialsScore">{{
|
||||
studentForm.trialsScore
|
||||
}}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h3>虚拟赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.virtualScore">{{
|
||||
studentForm.virtualScore
|
||||
}}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h3>化验赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.assayScore">{{ studentForm.assayScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h3>团队成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.teamScore">{{ studentForm.teamScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="个人信息" name="edit-student">
|
||||
<el-form :model="studentForm" label-width="80px" :rules="rules" label-position="left">
|
||||
<h3>修改学生信息</h3>
|
||||
<el-form-item label="学号" prop="studentId">
|
||||
<el-input v-model="signUpForm.studentId"></el-input>
|
||||
<el-input v-model="studentForm.studentId" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="stuName">
|
||||
<el-input v-model="signUpForm.stuName"></el-input>
|
||||
<el-input v-model="studentForm.stuName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="stuName">
|
||||
<el-select v-model="signUpForm.sex" filterable allow-create default-first-option
|
||||
<el-select v-model="studentForm.sex" filterable allow-create default-first-option
|
||||
placeholder="请选择性别"
|
||||
>
|
||||
<el-option key="男" label="男" value="男">
|
||||
@ -53,7 +345,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属赛区" prop="division">
|
||||
<el-select v-model="signUpForm.division" filterable allow-create default-first-option
|
||||
<el-select v-model="studentForm.division" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
|
||||
@ -63,7 +355,7 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校" label-width="80px" prop="schoolName">
|
||||
<el-select v-model="signUpForm.schoolName" filterable allow-create default-first-option
|
||||
<el-select v-model="studentForm.schoolName" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
|
||||
@ -74,394 +366,120 @@
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="院系名称" prop="collegeName">
|
||||
<el-input v-model="signUpForm.collegeName"></el-input>
|
||||
<el-input v-model="studentForm.collegeName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业名称" prop="major">
|
||||
<el-input v-model="signUpForm.major"></el-input>
|
||||
<el-input v-model="studentForm.major" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="手机号" prop="phoneNumber">
|
||||
<el-input v-model="signUpForm.phoneNumber">
|
||||
<el-input v-model="studentForm.phoneNumber" style="width: 300px;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="signUpForm.email"></el-input>
|
||||
<el-input v-model="studentForm.email" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学生证/学生卡" prop="studentIdCard" label-width="130px">
|
||||
<image-upload :limit="1" v-model="signUpForm.studentIdCard"></image-upload>
|
||||
<image-upload :limit="1" v-model="studentForm.studentIdCard"></image-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="trialsSubmitForm">提交</el-button>
|
||||
<el-button type="primary" @click="editStudentInfo">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 1" style="position: relative">
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">
|
||||
个人选拔赛成绩未出，请耐心等待
|
||||
<br>
|
||||
成绩仅供参考，最终选择由指导老师和领队老师做决定
|
||||
</div>
|
||||
<!-- <div class="step-box-title" style="font-size: 20px;margin-top: 8%" v-if="signUpForm.trialsScore == null">成绩仅供参考，最终选择由指导老师和领队老师做决定</div> -->
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%"
|
||||
v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == false"
|
||||
>
|
||||
等待领队老师确认，您的个人成绩为 : {{ signUpForm.trialsScore }}
|
||||
</div>
|
||||
<div style="position: absolute;left: 15%; top: 30%" v-if="signUpForm.trialsScore">
|
||||
<div style="font-size: 24px">
|
||||
个人选拔赛成绩：
|
||||
</div>
|
||||
<div style="font-size: 24px;color:#ff0000;margin-top: 15px">
|
||||
{{ signUpForm.trialsScore }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="margin-top: 25px;width: 600px;margin-left: 30%" v-if="signUpForm.isPreliminary == true">
|
||||
|
||||
<el-form ref="form" :rules="preliminaryFormRules" :model="preliminaryForm" label-width="150px">
|
||||
<div class="d-s" style="justify-content: space-between">
|
||||
<el-form-item label="赛区" prop="divisionLabel">
|
||||
<el-input v-model="preliminaryForm.divisionLabel"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="学校" prop="schoolName">
|
||||
<el-input v-model="preliminaryForm.schoolName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="赛事" prop="competition">
|
||||
<el-checkbox-group v-model="preliminaryForm.competition">
|
||||
<el-checkbox label="1">化验赛</el-checkbox>
|
||||
<el-checkbox label="2">虚拟赛</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="领队老师" prop="ldTeacherInfo.teacherName">
|
||||
<el-input v-model="preliminaryForm.ldTeacherInfo.teacherName" disabled></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="团队名称" prop="teamName">
|
||||
<el-input v-model="preliminaryForm.teamName"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="队员1" prop="teammateOne">
|
||||
<el-select v-model="preliminaryForm.teammateOne" placeholder="第一个队友">
|
||||
<el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId" :label="item.stuName"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="队员2" prop="teammateTwo">
|
||||
<el-select v-model="preliminaryForm.teammateTwo" placeholder="第二个队友">
|
||||
<el-option v-for="item in preliminaryForm.tdStudentList" :key="item.userId" :label="item.stuName"
|
||||
:value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div class="d-s">
|
||||
<el-form-item label="指导老师1" prop="teacherOne">
|
||||
<el-select v-model="preliminaryForm.teacherOne" placeholder="指导老师1">
|
||||
<el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
|
||||
:label="item.teacherName" :value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="指导老师2" prop="teacherTwo">
|
||||
<el-select v-model="preliminaryForm.teacherTwo" placeholder="指导老师2">
|
||||
<el-option v-for="item in preliminaryForm.zdTeacherList" :key="item.userId"
|
||||
:label="item.teacherName" :value="item.userId"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<el-form-item label="盲样联系人" prop="sampleConcat">
|
||||
<el-input v-model="preliminaryForm.sampleConcat"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人手机号" prop="sampleNumber">
|
||||
<el-input v-model="preliminaryForm.sampleNumber"></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item v-if="preliminaryForm.competition.includes('1')" label="盲样邮寄地址"
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="团队信息" name="edit-team" v-if="teamForm" label-position="left">
|
||||
<el-form :model="teamForm" label-width="100px" :rules="preliminaryFormRules">
|
||||
<h3>修改团队信息</h3>
|
||||
<el-form-item label="团队名称" prop="teamName">
|
||||
<el-input v-model="teamForm.teamName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属赛区" prop="division">
|
||||
<el-select v-model="teamForm.division" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校" prop="schoolName">
|
||||
<el-select v-model="teamForm.schoolName" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="赛事" prop="competition">
|
||||
<el-checkbox-group v-model="teamForm.competition">
|
||||
<el-checkbox label="1">化验赛</el-checkbox>
|
||||
<el-checkbox label="2">虚拟赛</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人" prop="sampleConcat">
|
||||
<el-input v-model="teamForm.sampleConcat" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人手机号" prop="sampleNumber">
|
||||
<el-input v-model="teamForm.sampleNumber" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="teamForm.competition && teamForm.competition.includes('1')" label="盲样邮寄地址"
|
||||
prop="sampleAddress"
|
||||
>
|
||||
<el-input v-model="preliminaryForm.sampleAddress"></el-input>
|
||||
<el-input v-model="teamForm.sampleAddress" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="附件（纸质报名表盖章）" prop="uploadFile" label-width="180px">
|
||||
<!-- <file-upload :fileSize="20" :fileType="['doc','docx','pdf','zip']" v-model="preliminaryForm.uploadFile"></file-upload> -->
|
||||
<file-upload :fileSize="20" :fileType="['pdf']" v-model="preliminaryForm.uploadFile"></file-upload>
|
||||
<el-form-item v-if="studentForm.isUpdateTeam">
|
||||
<el-button type="primary" @click="updateTeamInfo">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="signUpForm.trialsScore != null && signUpForm.isPreliminary == true">
|
||||
<el-button type="primary" @click="preliminarySubmit">提交</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<div v-show="currentActive == 0 || currentActive == 1" v-html="pageContext"></div>
|
||||
|
||||
<div v-show="currentActive == 3 || currentActive == 4" class="wrapbox">
|
||||
<div class="rsr" v-for="(item, index) in otherList" @click="goDeatail(item)">
|
||||
<img :src="imgurl + item.contentImg" style="width: 255px;height: 220px">
|
||||
<div class="size-t">{{ item.contentTitle }}</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 2">
|
||||
</div>
|
||||
|
||||
<el-descriptions class="margin-top" title="团队信息" border>
|
||||
<el-descriptions-item label="赛区">{{ preliminaryForm.divisionLabel }}</el-descriptions-item>
|
||||
<el-descriptions-item label="学校">{{ preliminaryForm.hitRegInfo.schoolName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="领队老师">{{
|
||||
preliminaryForm.ldTeacherInfo.teacherName
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="指导老师">{{ preliminaryForm.zdTeacherStr }}</el-descriptions-item>
|
||||
<el-descriptions-item label="样品联系人">{{
|
||||
preliminaryForm.hitRegInfo.sampleConcat
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="联系人手机号">{{
|
||||
preliminaryForm.hitRegInfo.sampleNumber
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="样品邮寄地址">{{
|
||||
preliminaryForm.hitRegInfo.sampleAddress
|
||||
}}
|
||||
</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
<el-table :data="preliminaryForm.hitRegInfo.studentUser" border style="width: 100%">
|
||||
<el-table-column prop="userName" align="center" label="姓名">
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.status == 0">待确认</span>
|
||||
<span v-if="scope.row.status == 1">同意</span>
|
||||
<span v-if="scope.row.status == 2">拒绝</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.isOwn == '1'">
|
||||
<el-button size="mini" type="text" icon="el-icon-check"
|
||||
@click="regChoose(scope.row, 1)"
|
||||
>同意
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-close"
|
||||
@click="regChoose(scope.row, 2)"
|
||||
>拒绝
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-show="currentActive == 2 || currentActive == 5 || currentActive == 4" class="wrapbox">
|
||||
<div class="n-box" v-for="(item, index) in noticeList" @click="goDeatail(item)">
|
||||
<div>
|
||||
<div class="v-time">{{ item.publishDate }}</div>
|
||||
<div class="v-title">{{ item.contentTitle }}</div>
|
||||
<div class="v-size">{{ item.summary || '' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgurl + item.contentImg" style="width: 300px; height: 150px; ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="step-box" v-if="active == 3">
|
||||
<div class="step-box-title" style="font-size: 20px;margin-top: 8%">
|
||||
地区选拔赛报名提交成功，请通过大赛通知获取通过信息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="step-box" v-if="active == 4">
|
||||
<div class="step-box-title" style="font-size: 18px;margin-top: 8%;color: red">（地区选拔赛前无需上传资料）</div>
|
||||
<file-upload style="margin-top: 5%" :fileSize="200" :fileType="['zip', 'rar', '7z']"
|
||||
v-model="preliminaryForm.hitRegInfo.dsFile"
|
||||
></file-upload>
|
||||
<div>
|
||||
<el-button style="margin-top: 8%" type="primary" @click="fileSubmit">提交</el-button>
|
||||
</div>
|
||||
<div v-show="currentActive == 2 || currentActive == 4 || currentActive === 3 || currentActive == 5" style="z-index: 999;position:relative">
|
||||
<page-util :category-id="categoryId" @event-message="handleDataFromPage"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成绩查询 -->
|
||||
<div class="tabber-box1" v-if="currentActive == 7">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="成绩" name="scores" class="tabber-box">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h3>个人选拔赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.trialsScore">{{ studentForm.trialsScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h3>虚拟赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.virtualScore">{{ studentForm.virtualScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h3>化验赛成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.assayScore">{{ studentForm.assayScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h3>团队成绩</h3>
|
||||
<p style="color: red; font-size: 20px" v-if="studentForm.teamScore">{{ studentForm.teamScore }}</p>
|
||||
<p style="font-size: 20px" v-else>暂无</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="个人信息" name="edit-student">
|
||||
<el-form :model="studentForm" label-width="80px" :rules="rules" label-position="left">
|
||||
<h3>修改学生信息</h3>
|
||||
<el-form-item label="学号" prop="studentId">
|
||||
<el-input v-model="studentForm.studentId" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="stuName">
|
||||
<el-input v-model="studentForm.stuName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="stuName">
|
||||
<el-select v-model="studentForm.sex" filterable allow-create default-first-option
|
||||
placeholder="请选择性别"
|
||||
>
|
||||
<el-option key="男" label="男" value="男">
|
||||
</el-option>
|
||||
<el-option key="女" label="女" value="女">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属赛区" prop="division">
|
||||
<el-select v-model="studentForm.division" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校" label-width="80px" prop="schoolName">
|
||||
<el-select v-model="studentForm.schoolName" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="院系名称" prop="collegeName">
|
||||
<el-input v-model="studentForm.collegeName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="专业名称" prop="major">
|
||||
<el-input v-model="studentForm.major" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="手机号" prop="phoneNumber">
|
||||
<el-input v-model="studentForm.phoneNumber" style="width: 300px;">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="studentForm.email" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学生证/学生卡" prop="studentIdCard" label-width="130px">
|
||||
<image-upload :limit="1" v-model="studentForm.studentIdCard"></image-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="editStudentInfo">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="团队信息" name="edit-team" v-if="teamForm" label-position="left">
|
||||
<el-form :model="teamForm" label-width="100px" :rules="preliminaryFormRules">
|
||||
<h3>修改团队信息</h3>
|
||||
<el-form-item label="团队名称" prop="teamName">
|
||||
<el-input v-model="teamForm.teamName" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="所属赛区" prop="division">
|
||||
<el-select v-model="teamForm.division" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.com_region" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="学校" prop="schoolName">
|
||||
<el-select v-model="teamForm.schoolName" filterable allow-create default-first-option
|
||||
placeholder="请选择学校名称"
|
||||
>
|
||||
<el-option v-for="item in dict.type.school_name" :key="item.value" :label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="赛事" prop="competition">
|
||||
<el-checkbox-group v-model="teamForm.competition">
|
||||
<el-checkbox label="1">化验赛</el-checkbox>
|
||||
<el-checkbox label="2">虚拟赛</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人" prop="sampleConcat">
|
||||
<el-input v-model="teamForm.sampleConcat" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="盲样联系人手机号" prop="sampleNumber">
|
||||
<el-input v-model="teamForm.sampleNumber" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="teamForm.competition && teamForm.competition.includes('1')" label="盲样邮寄地址"
|
||||
prop="sampleAddress"
|
||||
>
|
||||
<el-input v-model="teamForm.sampleAddress" style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="studentForm.isUpdateTeam">
|
||||
<el-button type="primary" @click="updateTeamInfo">修改</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<!-- main -->
|
||||
<div v-show="currentActive == 0 || currentActive == 1" v-html="pageContext"></div>
|
||||
|
||||
<div v-show="currentActive == 3 || currentActive == 4" class="wrapbox">
|
||||
<div class="rsr" v-for="(item, index) in otherList" @click="goDeatail(item)">
|
||||
<img :src="imgurl + item.contentImg" style="width: 255px;height: 220px">
|
||||
<div class="size-t">{{ item.contentTitle }}</div>
|
||||
<div class="anniu" v-show=" registerStatus == 1 &¤tActive == 0" @click="toRegister">
|
||||
<img src="../../assets/images/bhuaa.png" style="width:140px;height: 88px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="currentActive == 2 || currentActive == 5 || currentActive == 4" class="wrapbox">
|
||||
<div class="n-box" v-for="(item, index) in noticeList" @click="goDeatail(item)">
|
||||
<div>
|
||||
<div class="v-time">{{ item.publishDate }}</div>
|
||||
<div class="v-title">{{ item.contentTitle }}</div>
|
||||
<div class="v-size">{{ item.summary || '' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<img :src="imgurl + item.contentImg" style="width: 300px; height: 150px; ">
|
||||
</div>
|
||||
<div class="anniu2" v-show="registerStatus == 1 && currentActive == 0 && studentForm.signUp" @click="toQuery">
|
||||
<img src="../../assets/images/cha_kan_geng_duo.png" style="width: 140px;height: 58px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-show="currentActive == 2 || currentActive == 4 || currentActive === 3 || currentActive == 5">
|
||||
<page-util :category-id="categoryId" @event-message="handleDataFromPage"/>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
<div class="anniu" v-show=" registerStatus == 1 &¤tActive == 0" @click="toRegister">
|
||||
<img src="../../assets/images/bhuaa.png" style="width:140px;height: 88px">
|
||||
</div>
|
||||
<div class="anniu2" v-show="registerStatus == 1 && currentActive == 0 && studentForm.signUp" @click="toQuery">
|
||||
<img src="../../assets/images/cha_kan_geng_duo.png" style="width: 140px;height: 58px">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -651,6 +669,13 @@ export default {
|
||||
console.log('组件创建')
|
||||
// 页面加载完毕调用
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
@ -659,6 +684,27 @@ export default {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log('高度', document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom = '0'
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom = '-300px'
|
||||
}
|
||||
},
|
||||
regChoose(data, status) {
|
||||
data.status = status
|
||||
console.log(data)
|
||||
@ -1155,14 +1201,19 @@ export default {
|
||||
}
|
||||
|
||||
.committee-cont {
|
||||
width: 80%;
|
||||
margin: 40px auto;
|
||||
//width: 80%;
|
||||
//margin: 40px auto;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
min-height: 400px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
@ -1523,4 +1574,63 @@ h3 {
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,65 +1,60 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="top-box">
|
||||
<headers :msg='msg'></headers>
|
||||
<headers :msg="msg"></headers>
|
||||
<div class="ny-banner">
|
||||
<img src="../../assets/gw/lxwm.png" 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 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="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"-->
|
||||
<!-- @click="getCurrentActive(index)"-->
|
||||
<!-- >-->
|
||||
<!-- {{ item.categoryName }}-->
|
||||
<!-- </div>-->
|
||||
<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 class="contact">
|
||||
<div class="info">
|
||||
<!-- 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>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="info">-->
|
||||
<!-- <div class="info-item" v-for="(item,index) in fourlist" :key="index">-->
|
||||
<!-- <img class="info-img" :src="imgurl + item.contentImg" alt="">-->
|
||||
<!-- <div class="p">{{item.contentTitle}}</div>-->
|
||||
<!-- <div class="desc" v-html="item.summary"></div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="info-item" v-for="(item,index) in fourlist" :key="index">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
<div class="p">{{item.contentTitle}}</div>
|
||||
<div class="desc" v-html="item.summary"></div>
|
||||
</div>
|
||||
<!-- </div>-->
|
||||
<div class="map">
|
||||
|
||||
</div>
|
||||
<div class="map">
|
||||
<img src="../../assets/gw/dtmap.png" alt="">
|
||||
</div>
|
||||
<img src="../../assets/gw/dtmap2.png">
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import {getCategoryByParentId} from "@/api/officialWebsite/getPageData";
|
||||
import {getinfo} from "@/api/gw/home";
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
import { getCategoryByParentId } from '@/api/officialWebsite/getPageData'
|
||||
import { getinfo } from '@/api/gw/home'
|
||||
import footers from '@/views/officialWebsite/Components/footer.vue'
|
||||
import headers from '@/views/officialWebsite/Components/header.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
headers,
|
||||
footers,
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
SwiperSlide
|
||||
},
|
||||
name: 'HelloWorld',
|
||||
|
||||
data() {
|
||||
return {
|
||||
msg:11,
|
||||
msg: 11,
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
pageContextList: [],
|
||||
nav: [
|
||||
@ -68,16 +63,14 @@ export default {
|
||||
],
|
||||
fourlist: [],
|
||||
currentActive: 0,
|
||||
isMounted: false,
|
||||
isMounted: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 页面加载完毕调用
|
||||
this.initPageData();
|
||||
},
|
||||
computed: {
|
||||
|
||||
this.initPageData()
|
||||
},
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
// 触发导航
|
||||
@ -85,15 +78,15 @@ export default {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
this.currentActive = value;
|
||||
this.currentActive = value
|
||||
},
|
||||
initPageData() {
|
||||
console.log('测试')
|
||||
|
||||
let routeParam = {
|
||||
"categoryId": this.$route.query.id,
|
||||
"pageNum": 1,
|
||||
"pageSize": 10
|
||||
'categoryId': this.$route.query.id,
|
||||
'pageNum': 1,
|
||||
'pageSize': 10
|
||||
}
|
||||
getCategoryByParentId(routeParam.categoryId).then(res => {
|
||||
routeParam.categoryId = res.data[0].id
|
||||
@ -113,7 +106,7 @@ export default {
|
||||
// });
|
||||
// });
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -121,7 +114,7 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background: #F5F5F5;
|
||||
//background: #F5F5F5;
|
||||
}
|
||||
|
||||
.bj {
|
||||
@ -156,7 +149,7 @@ export default {
|
||||
|
||||
/* 选中的页码按钮样式 */
|
||||
::v-deep .el-pagination .el-pager .active {
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
/* 背景颜色 */
|
||||
color: #fff;
|
||||
/* 文字颜色 */
|
||||
@ -173,7 +166,7 @@ export default {
|
||||
height: 50px;
|
||||
background: #FFFFFF;
|
||||
|
||||
border: 1px solid #DDDDDD;
|
||||
//border: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
::v-deep .el-pagination .btn-next .el-icon,
|
||||
@ -200,7 +193,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
@ -313,40 +306,32 @@ export default {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.contact {
|
||||
width: 80%;
|
||||
margin: 50px auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.contact .info {
|
||||
.info {
|
||||
width: 48%;
|
||||
height: 468px;
|
||||
height: 300px;
|
||||
box-shadow: 0px 0px 15px 0px rgba(14, 62, 81, 0.2);
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
padding: 50px 0;
|
||||
padding-bottom: 20px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: -50px;
|
||||
|
||||
}
|
||||
|
||||
.contact .info::after {
|
||||
.info::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 84px;
|
||||
background: #005375;
|
||||
border-radius: 20px 20px 0px 0px;
|
||||
}
|
||||
|
||||
.contact .info .info-item {
|
||||
.info .info-item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -356,22 +341,34 @@ export default {
|
||||
/* background-color: #f0f */
|
||||
}
|
||||
|
||||
.contact .info .info-item .p {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
.info .info-item .p {
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.contact .info .info-item .desc {
|
||||
.info-img {
|
||||
margin-top: 50px;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.info .info-item .desc {
|
||||
width: 70%;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
font-size: 20px;
|
||||
color: #005375;
|
||||
margin-top: 20px;
|
||||
line-height: 30px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.contact .info .info-item:nth-child(2n-1):after {
|
||||
.info .info-item:nth-child(2n-1):after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -381,7 +378,7 @@ export default {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.contact .info .info-item:nth-child(1)::before {
|
||||
.info .info-item:nth-child(1)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -391,7 +388,7 @@ export default {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.contact .info .info-item:nth-child(2)::before {
|
||||
.info .info-item:nth-child(2)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -401,20 +398,14 @@ export default {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.contact .map {
|
||||
width: 46%;
|
||||
/* height: 468px; */
|
||||
background: #F9F9F9;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1%;
|
||||
.map {
|
||||
width: 100%;
|
||||
//height: 468px;
|
||||
//background: #F9F9F9;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.contact .map img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.index-footer {
|
||||
background: #383838;
|
||||
@ -432,7 +423,8 @@ export default {
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact {}
|
||||
.index-footer .footer .logo .footer-contact {
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact .p {
|
||||
display: inline-block;
|
||||
@ -542,4 +534,17 @@ export default {
|
||||
line-height: 18px;
|
||||
|
||||
}
|
||||
|
||||
.map {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.map img {
|
||||
width: 85%; /* 设置图片宽度 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -10,30 +10,40 @@
|
||||
|
||||
|
||||
<!-- new -->
|
||||
<div class="content-box" >
|
||||
<!-- <div class="title_">{{info.contentTitle}}</div>-->
|
||||
<div class="size_" v-if="info.contentType == 0" v-html="info.contentDetail" ></div>
|
||||
<div v-if="info.contentType == 1" style="display: flex;flex-wrap: wrap">
|
||||
<div class="new_">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="content-box">
|
||||
<!-- <div class="title_">{{info.contentTitle}}</div>-->
|
||||
<div class="size_" v-if="info.contentType == 0" v-html="info.contentDetail"></div>
|
||||
<div v-if="info.contentType == 1" style="display: flex;flex-wrap: wrap">
|
||||
<div class="" v-for="(item,index) in info.imageUrl" :key="index">
|
||||
<img :src="imgurl + item" alt="" style="width: 100%;" >
|
||||
<img :src="imgurl + item" alt="" style="width: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="info.contentType == 2" style="display: flex;">
|
||||
<div v-if="info.contentType == 2" style="display: flex;">
|
||||
<div class="" v-for="(item,index) in info.videoUrl" :key="index">
|
||||
<video :src="imgurl + item"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="['bottom_img']" ref="bottomImg">
|
||||
</div>
|
||||
</div>
|
||||
<footers></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import { getContent } from "@/api/officialWebsite/getPageData";
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
import { getContent } from '@/api/officialWebsite/getPageData'
|
||||
import headers from '@/views/officialWebsite/Components/header.vue'
|
||||
import footers from '@/views/officialWebsite/Components/footer.vue'
|
||||
|
||||
@ -54,29 +64,55 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info:{},
|
||||
imgurl:process.env.VUE_APP_BASE_API,
|
||||
info: {},
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
pageContextList: [],
|
||||
nav: [],
|
||||
currentActive: 2,
|
||||
isMounted: false,
|
||||
orgList: "",
|
||||
orgList: '',
|
||||
postList: [],
|
||||
|
||||
content: "",
|
||||
leaderList: "",
|
||||
content: '',
|
||||
leaderList: '',
|
||||
isBottomVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
this.initPageData();
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
goback(){
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
goback() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
// 触发导航
|
||||
@ -92,11 +128,11 @@ export default {
|
||||
let id = this.$route.query.id
|
||||
getContent(id).then(response => {
|
||||
// console.log(response)
|
||||
this.info = response.data;
|
||||
this.info = response.data
|
||||
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -107,6 +143,7 @@ export default {
|
||||
background: #f4f4f4;
|
||||
|
||||
}
|
||||
|
||||
.bj {
|
||||
background: #F5F5F5;
|
||||
}
|
||||
@ -130,7 +167,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
@ -383,7 +420,8 @@ export default {
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact {}
|
||||
.index-footer .footer .logo .footer-contact {
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact .p {
|
||||
display: inline-block;
|
||||
@ -493,19 +531,15 @@ export default {
|
||||
line-height: 18px;
|
||||
|
||||
}
|
||||
.title_{
|
||||
|
||||
.title_ {
|
||||
font-weight: bold;
|
||||
font-size: 28px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
.content-box{
|
||||
width: 80%;
|
||||
margin: 25px auto;
|
||||
min-height:400px;
|
||||
|
||||
}
|
||||
.back{
|
||||
.back {
|
||||
width: 80%;
|
||||
margin: 15px auto;
|
||||
display: flex;
|
||||
@ -513,10 +547,98 @@ export default {
|
||||
cursor: pointer;
|
||||
color: #00A0E8;
|
||||
}
|
||||
.size_{
|
||||
|
||||
.size_ {
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
content: '';
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 535px; /* 根据你的图片高度调整 */
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.new_ {
|
||||
//min-height:900px; //width: 80%; padding-bottom: 0px; position: relative; background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
width: 76%;
|
||||
margin: 25px auto;
|
||||
z-index: 99999 !important;
|
||||
|
||||
//min-height: 400px; //padding-bottom: 100px; /* 与背景图片高度一致 */
|
||||
}
|
||||
|
||||
/*footers {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}*/
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 100px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="news">
|
||||
<div v-show="currentActive == 0">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div v-show="currentActive == 0" class="about-conts-item1">
|
||||
<div class="n-box" v-for="(item,index) in onelist" @click="goDeatail(item)" >
|
||||
<div>
|
||||
<div class="v-time" >{{item.publishDate}}</div>
|
||||
@ -35,7 +41,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="currentActive == 1"> <div class="noticeRsr" v-for="(item,index) in twolist" @click="goDeatail(item)" >
|
||||
<div v-show="currentActive == 1" class="about-conts-item1"> <div class="noticeRsr" v-for="(item,index) in twolist" @click="goDeatail(item)" >
|
||||
<div >{{item.contentTitle}}</div>
|
||||
<div >{{item.publishDate}}</div>
|
||||
</div></div>
|
||||
@ -46,11 +52,13 @@
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="page-box">
|
||||
<div class="page-box" style="z-index: 999;position:relative">
|
||||
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
</div>
|
||||
<footers></footers>
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -98,8 +106,38 @@ export default {
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
handleDataFromPage(data){
|
||||
if (this.currentActive === 0){
|
||||
this.onelist = data
|
||||
@ -194,7 +232,13 @@ export default {
|
||||
::v-deep .el-pagination .btn-prev .el-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.about-conts-item1 {
|
||||
width: 76%;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
z-index: 99999 !important;
|
||||
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
/* height: 1000px; */
|
||||
@ -328,13 +372,18 @@ export default {
|
||||
|
||||
|
||||
.news {
|
||||
padding: 30px 0;
|
||||
width: 80%;
|
||||
margin: 20px auto;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
//padding: 30px 0;
|
||||
////width: 80%;
|
||||
//margin: 20px auto;
|
||||
//background: #fff;
|
||||
//box-sizing: border-box;
|
||||
//padding: 15px;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
.page-box{
|
||||
width: 82%;
|
||||
@ -576,4 +625,57 @@ export default {
|
||||
font-size: 18px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
</div>
|
||||
|
||||
<div class="about-conts" v-bind:class="[currentActive == 1 ? 'bj' : '']">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<!-- main -->
|
||||
<!-- <div v-for="(item, index) in nav " :key=index @click="goDeatail(item)">-->
|
||||
<!-- <div class="about-conts-item1" v-show="currentActive == 1">-->
|
||||
@ -51,7 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #fff">
|
||||
<div style="background: #fff;z-index: 999;position:relative">
|
||||
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
|
||||
@ -64,7 +70,9 @@
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<footers></footers>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
<footers style="position: relative;"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -114,8 +122,41 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
|
||||
handleDataFromPage(data){
|
||||
// console.log(data)
|
||||
@ -295,11 +336,18 @@ export default {
|
||||
}
|
||||
|
||||
.about-conts {
|
||||
width: 80%;
|
||||
margin: 15px auto;
|
||||
padding: 15px;
|
||||
//width: 80%; margin: 15px auto; padding: 15px;
|
||||
//display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.about-conts .about-conts-item1 {
|
||||
@ -311,8 +359,9 @@ export default {
|
||||
|
||||
.about-conts .ayptjs {
|
||||
padding: 30px 0;
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
//z-index: 99999 !important;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs .tt {
|
||||
@ -412,7 +461,7 @@ export default {
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
height: 211px;
|
||||
z-index: 1;
|
||||
//z-index: 1;
|
||||
/* background-color: #f0f; */
|
||||
filter: blur(10px);
|
||||
background: rgba(0, 83, 117, 0.7);
|
||||
@ -633,4 +682,49 @@ export default {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
||||
40% {transform: translateY(-30px);}
|
||||
60% {transform: translateY(-15px);}
|
||||
}
|
||||
.left_img{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 200px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
.right_img{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="top-box">
|
||||
<headers :msg='msg'></headers>
|
||||
<headers :msg="msg"></headers>
|
||||
|
||||
<div class="ny-banner">
|
||||
<img src="../../assets/gw/dssj.png" alt="">
|
||||
@ -16,18 +16,25 @@
|
||||
<!-- </div>-->
|
||||
<div class="right">
|
||||
<div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
|
||||
@click="getCurrentActive(index)">
|
||||
@click="getCurrentActive(index)"
|
||||
>
|
||||
{{ item.categoryName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-conts" v-bind:class="[currentActive == 0 || currentActive == 3 ? 'bj' : '']">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div v-for="(item, index) in nav " :key=index>
|
||||
<div class="about-conts-item1" v-if="currentActive == index">
|
||||
<!-- 实践平台 -->
|
||||
<div v-if="currentActive !== 0" class="list" >
|
||||
<div v-if="currentActive !== 0" class="list">
|
||||
<div class="item" v-for="(item, index) in teachingAchievements" :key="index" @click="toDetail(item.id)">
|
||||
<div class="img">
|
||||
<img :src="imgurl + item.contentImg" alt="">
|
||||
@ -50,7 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="z-index: 99999;position:relative">
|
||||
<page-util :page-num="pageNum" :page-size="8" :category-id="categoryId" @event-message="handleDataFromPage"/>
|
||||
</div>
|
||||
|
||||
@ -117,41 +124,44 @@
|
||||
</el-pagination></div>
|
||||
|
||||
</div> -->
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
</div>
|
||||
<footers></footers>
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||||
import "swiper/css/swiper.min.css";
|
||||
import { getPageData, getCategoryByParentId } from "@/api/officialWebsite/getPageData";
|
||||
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
||||
import 'swiper/css/swiper.min.css'
|
||||
import { getPageData, getCategoryByParentId } from '@/api/officialWebsite/getPageData'
|
||||
import footers from '@/views/officialWebsite/Components/footer.vue'
|
||||
import headers from '@/views/officialWebsite/Components/header.vue'
|
||||
import PageUtil from '@/views/officialWebsite/Components/page'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
headers,
|
||||
footers,
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
PageUtil,
|
||||
PageUtil
|
||||
},
|
||||
name: 'HelloWorld',
|
||||
|
||||
data() {
|
||||
return {
|
||||
msg:9,
|
||||
isShowDetails:false,
|
||||
detailsContent:"",
|
||||
msg: 9,
|
||||
isShowDetails: false,
|
||||
detailsContent: '',
|
||||
imgurl: process.env.VUE_APP_BASE_API,
|
||||
teachingAchievements: [],
|
||||
teachingAchievements2: [],
|
||||
teachingAchievements3: [],
|
||||
pageContext: "",
|
||||
categoryId: "",
|
||||
pageContext: '',
|
||||
categoryId: '',
|
||||
pageNum: 1,
|
||||
input4: "",
|
||||
input4: '',
|
||||
show_search: true,
|
||||
nav: [
|
||||
// { name: '实践教学资源' },
|
||||
@ -173,38 +183,65 @@ export default {
|
||||
<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>`,
|
||||
routeParam : {
|
||||
"categoryId": this.$route.query.id,
|
||||
"pageNum": 1,
|
||||
"pageSize": 10
|
||||
routeParam: {
|
||||
'categoryId': this.$route.query.id,
|
||||
'pageNum': 1,
|
||||
'pageSize': 10
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
this.initPageData();
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed: {
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
computed: {},
|
||||
|
||||
methods: {
|
||||
showDetails(value){
|
||||
this.isShowDetails = true;
|
||||
this.currentActive = 999;
|
||||
this.detailsContent = value.contentDetail;
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
showDetails(value) {
|
||||
this.isShowDetails = true
|
||||
this.currentActive = 999
|
||||
this.detailsContent = value.contentDetail
|
||||
},
|
||||
// 触发导航
|
||||
getCurrentActive(value) {
|
||||
if (this.currentActive == value) {
|
||||
return
|
||||
}
|
||||
if (value !== 0){
|
||||
if (value !== 0) {
|
||||
this.categoryId = this.nav[value].id
|
||||
this.pageNum = 1
|
||||
}
|
||||
this.currentActive = value;
|
||||
this.isShowDetails = false;
|
||||
this.currentActive = value
|
||||
this.isShowDetails = false
|
||||
},
|
||||
initPageData() {
|
||||
getCategoryByParentId(this.routeParam.categoryId).then(res => {
|
||||
@ -212,14 +249,14 @@ export default {
|
||||
this.getContentDetail()
|
||||
})
|
||||
},
|
||||
getContentDetail(){
|
||||
getContentDetail() {
|
||||
this.routeParam.categoryId = this.nav[this.currentActive].id
|
||||
getPageData(this.routeParam).then(response => {
|
||||
this.pageContext = response.data.list[0].contentDetail
|
||||
})
|
||||
},
|
||||
handleDataFromPage(data){
|
||||
if (this.currentActive !== 0){
|
||||
handleDataFromPage(data) {
|
||||
if (this.currentActive !== 0) {
|
||||
this.teachingAchievements = data
|
||||
}
|
||||
// if (this.currentActive === 2 || this.currentActive == 4){
|
||||
@ -229,12 +266,12 @@ export default {
|
||||
// this.noticeList = data
|
||||
// }
|
||||
},
|
||||
toDetail(id){
|
||||
if (id){
|
||||
toDetail(id) {
|
||||
if (id) {
|
||||
this.$router.push({
|
||||
name: 'details',
|
||||
query:{ id: id }
|
||||
});
|
||||
query: { id: id }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -273,7 +310,7 @@ export default {
|
||||
|
||||
/* 选中的页码按钮样式 */
|
||||
::v-deep .el-pagination .el-pager .active {
|
||||
background-color: #005375 !important;
|
||||
background-color: #005375 !important;
|
||||
|
||||
/* 背景颜色 */
|
||||
color: #fff;
|
||||
@ -318,7 +355,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background-color: #005375 !important; ;
|
||||
background-color: #005375 !important;;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
@ -432,6 +469,11 @@ export default {
|
||||
|
||||
.about-conts {
|
||||
padding: 40px 0;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.about-conts .about-conts-item1 {
|
||||
@ -501,8 +543,7 @@ export default {
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
transition: 0.5s ease;
|
||||
padding-bottom: 20px;
|
||||
;
|
||||
padding-bottom: 20px;;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .text .tts {
|
||||
@ -579,7 +620,7 @@ export default {
|
||||
width: 70%;
|
||||
height: 1px;
|
||||
/* left: 0; */
|
||||
background-color: #005375 !important; ;
|
||||
background-color: #005375 !important;;
|
||||
}
|
||||
|
||||
.about-conts .ayptjs-list .item .more p {
|
||||
@ -601,8 +642,7 @@ export default {
|
||||
width: 31%;
|
||||
height: 432px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
;
|
||||
position: relative;;
|
||||
}
|
||||
|
||||
.list .item .img {
|
||||
@ -753,7 +793,8 @@ export default {
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact {}
|
||||
.index-footer .footer .logo .footer-contact {
|
||||
}
|
||||
|
||||
.index-footer .footer .logo .footer-contact .p {
|
||||
display: inline-block;
|
||||
@ -955,8 +996,7 @@ export default {
|
||||
width: 31%;
|
||||
height: 432px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
;
|
||||
position: relative;;
|
||||
}
|
||||
|
||||
.swiper-list .item .img {
|
||||
@ -1008,4 +1048,57 @@ export default {
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,6 +23,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="teaching" v-bind:class="[currentActive == 0 ? 'bj' : '']">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<!-- main -->
|
||||
<div class="wrap-box">
|
||||
<div class="box-l" v-if="currentActive == 0" v-for="(item,index) in dataList" :key="index" @click="goDeatail(item)">
|
||||
@ -71,11 +77,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page-box">
|
||||
<page-util :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
<page-util style="z-index: 999;position:relative" :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
<footers></footers>
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
|
||||
<footers style="position: relative;"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -135,8 +145,41 @@ export default {
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
// goDeatail(data){
|
||||
// // console.log(data)
|
||||
// if(data.linkType == 0){
|
||||
@ -360,14 +403,25 @@ export default {
|
||||
font-weight: bold;
|
||||
}
|
||||
.wrap-box{
|
||||
width: 100%;
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.teaching {
|
||||
width: 80%;
|
||||
margin: 15px auto;
|
||||
//width: 90%;
|
||||
//margin: 15px auto;
|
||||
//text-align: center;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
z-index: 2;
|
||||
}
|
||||
.page-box{
|
||||
width: 82%;
|
||||
@ -628,4 +682,48 @@ export default {
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@keyframes bounce{
|
||||
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
||||
40% {transform: translateY(-30px);}
|
||||
60% {transform: translateY(-15px);}
|
||||
}
|
||||
.left_img{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 200px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
.right_img{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 100px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,6 +23,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-conts">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- 教学成果 -->
|
||||
<div class="ayptjs" v-if="currentActive == 1">
|
||||
@ -61,12 +67,13 @@
|
||||
<div class="neirong" v-html="detailsContent"></div>
|
||||
</div>
|
||||
|
||||
<div v-show="currentActive === 1">
|
||||
<div v-show="currentActive === 1" style="z-index: 999;position:relative">
|
||||
<page-util :page-size="8" :category-id="categoryId" @event-message="handleDataFromPage" />
|
||||
</div>
|
||||
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
</div>
|
||||
<footers></footers>
|
||||
<footers style="position: relative;"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -117,8 +124,41 @@ export default {
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
showDetails(value){
|
||||
this.isShowDetails = true;
|
||||
this.currentActive = 999;
|
||||
@ -294,9 +334,14 @@ export default {
|
||||
}
|
||||
|
||||
.about-conts {
|
||||
width: 80%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 30px 0;
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.about-conts .about-conts-item1 {
|
||||
@ -686,4 +731,58 @@ export default {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -8,6 +8,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="news11">
|
||||
<div class="left_img" ref="leftImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="right_img" ref="rightImg">
|
||||
<img src="../../assets/images/l_img.png" alt="">
|
||||
</div>
|
||||
<div class="news11-list">
|
||||
<div class="news11-list-item" v-for="(item, index) in this.xlist" :key="index" @click="goDeatail(item)">
|
||||
<div class="img">
|
||||
@ -41,10 +47,12 @@
|
||||
:current-page.sync="queryParams.pageNum"
|
||||
:page-size.sync="queryParams.pageSize"
|
||||
@size-change="getWebBaseInfo"
|
||||
@current-change="getWebBaseInfo">
|
||||
@current-change="getWebBaseInfo"
|
||||
style="z-index: 999;position:relative">
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<div class="bottom_img" ref="bottomImg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -54,7 +62,7 @@
|
||||
<div class="neirong" v-html="detailsContent"></div>
|
||||
</div>
|
||||
|
||||
<footers></footers>
|
||||
<footers style="position: relative"></footers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -131,8 +139,40 @@ export default {
|
||||
computed: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// 页面加载完毕调用
|
||||
// debugger;
|
||||
this.initPageData()
|
||||
// 在组件挂载后添加滚动监听
|
||||
window.addEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// 在组件销毁前移除滚动监听
|
||||
window.removeEventListener('scroll', this.handleScroll)
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
let browserHeight = document.documentElement.clientHeight
|
||||
console.log("高度",document.documentElement.clientHeight)
|
||||
const leftImg = this.$refs.leftImg
|
||||
const rightImg = this.$refs.rightImg
|
||||
const bottomImg = this.$refs.bottomImg
|
||||
const scrollPosition = window.scrollY
|
||||
if (scrollPosition > 450) {
|
||||
leftImg.style.top = '100px'
|
||||
leftImg.style.position = 'fixed'
|
||||
rightImg.style.top = '0px'
|
||||
rightImg.style.position = 'fixed'
|
||||
bottomImg.style.bottom="0"
|
||||
} else {
|
||||
leftImg.style.top = '250px'
|
||||
leftImg.style.position = 'absolute'
|
||||
rightImg.style.top = '150px'
|
||||
rightImg.style.position = 'absolute'
|
||||
bottomImg.style.bottom="-300px"
|
||||
}
|
||||
},
|
||||
goDeatail(data){
|
||||
|
||||
imitationId(data.id).then(res=>{
|
||||
@ -186,7 +226,13 @@ export default {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
|
||||
.news11{
|
||||
padding-bottom: 0px;
|
||||
position: relative;
|
||||
background-image: url("../../assets/images/top_.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.d-s {
|
||||
display: flex;
|
||||
@ -582,7 +628,7 @@ export default {
|
||||
}
|
||||
|
||||
.news11-list {
|
||||
width: 80%;
|
||||
width: 76%;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
display: flex;
|
||||
@ -697,7 +743,7 @@ export default {
|
||||
font-size: 14px;
|
||||
}
|
||||
.pagin{
|
||||
width: 80%;
|
||||
width: 76%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -757,4 +803,56 @@ export default {
|
||||
width: 80%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.left_img {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 250px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
|
||||
}
|
||||
|
||||
.right_img {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 150px;
|
||||
display: inline-block;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s; /* 设置整个动画持续时间为两秒 */
|
||||
animation-timing-function: ease-in-out; /* 控制速度曲线 */
|
||||
animation-iteration-count: infinite; /* 循环播放次数 */
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; display: none; }
|
||||
}
|
||||
.bottom_img {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
position: fixed; /* 固定在页面 */
|
||||
display: block;
|
||||
bottom: -300px;
|
||||
left: 0; /* 确保元素从页面左侧开始 */
|
||||
background-image: url("../../assets/images/bottom_.png");
|
||||
background-repeat: no-repeat;
|
||||
//z-index: -1;
|
||||
background-size: cover;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user