首页
This commit is contained in:
clay
BIN
src/assets/index/1.png
Normal file
BIN
src/assets/index/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/index/1@2x.png
Normal file
BIN
src/assets/index/1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
src/assets/index/sy_icon_sjzx.png
Normal file
BIN
src/assets/index/sy_icon_sjzx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
src/assets/index/sy_icon_sjzx@2x.png
Normal file
BIN
src/assets/index/sy_icon_sjzx@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
src/assets/index/tw1.png
Normal file
BIN
src/assets/index/tw1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/assets/index/tw1@2x.png
Normal file
BIN
src/assets/index/tw1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
@@ -1,40 +1,86 @@
|
||||
<template>
|
||||
<div class="ele_test_box">
|
||||
<!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档-->
|
||||
<el-popover placement="bottom" title="标题" width="400" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<span>11111111111111111</span> <!-- 利用分发取代content属性 可以嵌套表单表格按钮等组件-->
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
<!-- Carousel 走马灯组件 -->
|
||||
<el-carousel :interval="3000" type="card" height="200px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<!-- Collapse 折叠面板 -->
|
||||
<el-collapse v-model="activeIndex" @change="handleChange">
|
||||
<el-collapse-item title="第一块面板（操作互不干扰）" name="1">
|
||||
<div>第一块的内容是在这里</div>
|
||||
<div>通过accordion属性来设置是否以手风琴模式显示。</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="第二块面板（操作互不干扰）" name="2">
|
||||
<div>第二块的内容是在这里</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="第三块面板（操作互不干扰）" name="3">
|
||||
<div>第三块的内容是在这里</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item>
|
||||
<template slot="title">
|
||||
<i class="header-icon el-icon-caret-left"></i>第四块的内容是在这里<i class="header-icon el-icon-caret-right"></i>
|
||||
</template>
|
||||
<div>除了可以通过title属性以外,还可以通过具名slot来实现自定义面板的标题内容，以实现增加图标等效果</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div>分别通过<span style="color: red">(default-expanded-keys)和(default-checked-keys)</span>设置默认展开和默认选中的节点,需要注意的是,此时必须设置<span style="color: red">(node-key)</span>,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的.</div>
|
||||
<el-tree :data="data2" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps">
|
||||
</el-tree>
|
||||
<div style="margin-top: 30px;">
|
||||
<el-button type="primary" @click="goNextPage">跳转页面</el-button>
|
||||
<div class="banner-card">
|
||||
<ul class="ul">
|
||||
<li>
|
||||
<div class="card_img">
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="left-btn">
|
||||
<span>
|
||||
<button class="el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="right-btn">
|
||||
<span>
|
||||
<button class="el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -42,76 +88,200 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeIndex: ['1'], //默认展开第一块
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: '一级 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: '二级 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: '三级 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: '三级 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: '一级 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: '二级 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: '二级 2-2',
|
||||
disabled: true //通过disabled设置禁用状态
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: '一级 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: '二级 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: '二级 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
}
|
||||
default: {
|
||||
//默认值
|
||||
classArray: ["one", "two", "three", "four", "five", "six"],
|
||||
leftSlider: true,
|
||||
},
|
||||
bannerWrap: null,
|
||||
time: null,
|
||||
lisArray: null, //卡片的集合
|
||||
classlist: null,
|
||||
leftBtn: null,
|
||||
rightBtn: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
console.log(val);
|
||||
constructor() {
|
||||
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
|
||||
let lis = this.bannerWrap.getElementsByTagName("li");
|
||||
// 将类数组转化为数组
|
||||
this.lisArray = Array.from(lis);
|
||||
this.classlist = this.default.classArray;
|
||||
//获取左右按钮
|
||||
this.leftBtn = document.getElementsByClassName("left-btn")[0];
|
||||
this.rightBtn = document.getElementsByClassName("right-btn")[0];
|
||||
|
||||
this.move(this.classlist);
|
||||
// this.timer();
|
||||
this.listenMouseEvent();
|
||||
this.listenMouseClickBtnEvent();
|
||||
},
|
||||
//跳转下一页面
|
||||
goNextPage() {
|
||||
this.$router.push({ name: 'tableTest' })
|
||||
//移动
|
||||
move(list) {
|
||||
this.lisArray.forEach((value, index) => {
|
||||
value.setAttribute("class", list[index]); //给每一个li添加对应的类名
|
||||
});
|
||||
},
|
||||
// 向左运动
|
||||
leftMove() {
|
||||
let popValue = this.classlist.pop(); //删除并返回数组的最后一个
|
||||
this.classlist.unshift(popValue); //把刚才删除的最后一个添加到数组开头
|
||||
this.move(this.classlist); //调用移动方法，每一个li会根据新数组的位置进行移动，从而实现轮播的效果
|
||||
},
|
||||
// 向右运动
|
||||
rightMove() {
|
||||
let shiftValue = this.classlist.shift(); //删除并返回数组的第一个
|
||||
this.classlist.push(shiftValue); //把刚才删除的第一个push到数组末尾
|
||||
this.move(this.classlist);
|
||||
},
|
||||
// 定时器自动切换
|
||||
timer() {
|
||||
this.time = setInterval(this.leftMove.bind(this), 1000);
|
||||
},
|
||||
// 鼠标移入移出事件
|
||||
listenMouseEvent() {
|
||||
this.bannerWrap.addEventListener("mouseover", () => {
|
||||
clearInterval(this.time);
|
||||
this.leftBtn.style.cssText = `left: 6rem; opacity: 1`;
|
||||
this.rightBtn.style.cssText = `right: 6rem; opacity: 1`;
|
||||
});
|
||||
this.bannerWrap.addEventListener("mouseout", () => {
|
||||
// this.timer();
|
||||
this.leftBtn.style.cssText = `left: 2rem; opacity: 0`;
|
||||
this.rightBtn.style.cssText = `right: 2rem; opacity: 0`;
|
||||
});
|
||||
},
|
||||
// 点击左右按钮事件
|
||||
listenMouseClickBtnEvent() {
|
||||
this.leftBtn.addEventListener("click", () => {
|
||||
this.leftMove();
|
||||
});
|
||||
this.rightBtn.addEventListener("click", () => {
|
||||
this.rightMove();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.constructor();
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.banner-card {
|
||||
margin-top: 10rem;
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.banner-card {
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
background: #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
width: 110rem;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: 0rem 0rem 2rem 2rem;
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
list-style-type: none;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
|
||||
.card_img {
|
||||
width: 40rem;
|
||||
height: 30rem;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
//border-radius: .4rem;
|
||||
}
|
||||
}
|
||||
.card_title{
|
||||
font-size: 2rem;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #1C1C1C;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
width: 36rem;
|
||||
margin: 2rem auto;
|
||||
//height: 10rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-carousel__item h3 {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
.one {
|
||||
z-index: 98;
|
||||
left: 2rem;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #333;
|
||||
.two {
|
||||
z-index: 99;
|
||||
left: 20rem;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #ff9933;
|
||||
.three {
|
||||
left: 38rem;
|
||||
z-index: 100;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.four {
|
||||
z-index: 99;
|
||||
left: 56rem;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.five {
|
||||
left: 74rem;
|
||||
z-index: 98;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.six {
|
||||
left: 82rem;
|
||||
z-index: 96;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.banner-card .left-btn ,.right-btn {
|
||||
transition: 0.3s;
|
||||
position: absolute;
|
||||
top: 20rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.banner-card div span {
|
||||
display: inline-block;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.left-btn {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -43,6 +43,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.footer {
|
||||
padding-top: 2rem;
|
||||
height: 20rem;
|
||||
background-color: rgb(107, 109, 108);
|
||||
color: #b2b2b2 !important;
|
||||
|
||||
282
src/views/index/components/slideshow_card.vue
Normal file
282
src/views/index/components/slideshow_card.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div class="banner-card">
|
||||
<ul class="ul">
|
||||
<li>
|
||||
<div class="card_img">
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="card_img">
|
||||
|
||||
<img
|
||||
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="card_title">
|
||||
建党百年 信息报国——信息科学与技术学院备份
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="left-btn">
|
||||
<span>
|
||||
<button class="el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="right-btn">
|
||||
<span>
|
||||
<button class="el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i></button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
default: {
|
||||
//默认值
|
||||
classArray: ["one", "two", "three", "four", "five", "six"],
|
||||
leftSlider: true,
|
||||
},
|
||||
bannerWrap: null,
|
||||
time: null,
|
||||
lisArray: null, //卡片的集合
|
||||
classlist: null,
|
||||
leftBtn: null,
|
||||
rightBtn: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
constructor() {
|
||||
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
|
||||
let lis = this.bannerWrap.getElementsByTagName("li");
|
||||
// 将类数组转化为数组
|
||||
this.lisArray = Array.from(lis);
|
||||
this.classlist = this.default.classArray;
|
||||
//获取左右按钮
|
||||
this.leftBtn = document.getElementsByClassName("left-btn")[0];
|
||||
this.rightBtn = document.getElementsByClassName("right-btn")[0];
|
||||
|
||||
this.move(this.classlist);
|
||||
this.timer();
|
||||
this.listenMouseEvent();
|
||||
this.listenMouseClickBtnEvent();
|
||||
},
|
||||
//移动
|
||||
move(list) {
|
||||
this.lisArray.forEach((value, index) => {
|
||||
value.setAttribute("class", list[index]); //给每一个li添加对应的类名
|
||||
});
|
||||
},
|
||||
// 向左运动
|
||||
leftMove() {
|
||||
let popValue = this.classlist.pop(); //删除并返回数组的最后一个
|
||||
this.classlist.unshift(popValue); //把刚才删除的最后一个添加到数组开头
|
||||
this.move(this.classlist); //调用移动方法，每一个li会根据新数组的位置进行移动，从而实现轮播的效果
|
||||
},
|
||||
// 向右运动
|
||||
rightMove() {
|
||||
let shiftValue = this.classlist.shift(); //删除并返回数组的第一个
|
||||
this.classlist.push(shiftValue); //把刚才删除的第一个push到数组末尾
|
||||
this.move(this.classlist);
|
||||
},
|
||||
// 定时器自动切换
|
||||
timer() {
|
||||
this.time = setInterval(this.leftMove.bind(this), 1000);
|
||||
},
|
||||
// 鼠标移入移出事件
|
||||
listenMouseEvent() {
|
||||
this.bannerWrap.addEventListener("mouseover", () => {
|
||||
clearInterval(this.time);
|
||||
this.leftBtn.style.cssText = `left: 6rem; opacity: 1`;
|
||||
this.rightBtn.style.cssText = `right: 6rem; opacity: 1`;
|
||||
});
|
||||
this.bannerWrap.addEventListener("mouseout", () => {
|
||||
this.timer();
|
||||
this.leftBtn.style.cssText = `left: 2rem; opacity: 0`;
|
||||
this.rightBtn.style.cssText = `right: 2rem; opacity: 0`;
|
||||
});
|
||||
},
|
||||
// 点击左右按钮事件
|
||||
listenMouseClickBtnEvent() {
|
||||
this.leftBtn.addEventListener("click", () => {
|
||||
this.leftMove();
|
||||
});
|
||||
this.rightBtn.addEventListener("click", () => {
|
||||
this.rightMove();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.constructor();
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.banner-card {
|
||||
width: 100%;
|
||||
height: 50rem;
|
||||
//background: #f5f5f5;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
width: 102rem;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: 2rem;
|
||||
width: 40rem;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 2.5rem;
|
||||
list-style-type: none;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
border: 1px solid #DA2D2D;
|
||||
background-color: #fff;
|
||||
|
||||
.card_img {
|
||||
width: 40rem;
|
||||
height: 30rem;
|
||||
|
||||
img {
|
||||
border-radius:2rem 2rem 0 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
.card_title{
|
||||
font-size: 2rem;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #1C1C1C;
|
||||
text-align: left;
|
||||
width: 36rem;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.one {
|
||||
z-index: 98;
|
||||
left: -6rem;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.two {
|
||||
z-index: 99;
|
||||
left: 14rem;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.three {
|
||||
left: 30rem;
|
||||
z-index: 100;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.four {
|
||||
z-index: 99;
|
||||
left: 48rem;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.five {
|
||||
left: 66rem;
|
||||
z-index: 98;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.six {
|
||||
left: 74rem;
|
||||
z-index: 96;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.banner-card .left-btn ,.right-btn {
|
||||
transition: 0.3s;
|
||||
position: absolute;
|
||||
top: 20rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.banner-card div span {
|
||||
display: inline-block;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.left-btn {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.right-btn {
|
||||
right: 10rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -288,27 +288,21 @@
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<!--标题-->
|
||||
<div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">科学研究</div>
|
||||
<div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">党群工作</div>
|
||||
<div class="divider" style="width: 80rem;">
|
||||
<div class="divider_left">
|
||||
<img src="@/assets/index/tttl.png" alt="">
|
||||
</div>
|
||||
<div class="name" style="color: #DA2D2D;">Scientific research trends</div>
|
||||
<div class="name" style="color: #DA2D2D;">Party Building Activities</div>
|
||||
<div class="divider_right">
|
||||
<img src="@/assets/index/tttr.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<el-carousel :interval="4000" type="card">
|
||||
<el-carousel-item v-for="item in 6" :key="item">
|
||||
<div>
|
||||
<img src="@/assets/index/t1@2x.png" alt="">
|
||||
<div class="bottom_title">
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<SlideshowCard/>
|
||||
</div>
|
||||
|
||||
<!--更多-->
|
||||
<div class="more_title" style="background: #DA2D2D; color: #FFFFFF">{{ $t('message.more') }}</div>
|
||||
|
||||
@@ -317,7 +311,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="divider" style="width: 64rem;">
|
||||
<div class="divider" style="width: 64rem; margin-top: 2rem;">
|
||||
<div class="divider_left">
|
||||
<img src="@/assets/index/tttl.png" alt="">
|
||||
</div>
|
||||
@@ -327,13 +321,106 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phe">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="phe_img">
|
||||
<img src="@/assets/index/1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="phe_context">
|
||||
<div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
|
||||
<div class="phe_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="phe_time">2021.11.10</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="phe_img">
|
||||
<img src="@/assets/index/1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="phe_context">
|
||||
<div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
|
||||
<div class="phe_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="phe_time">2021.11.10</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="phe_img">
|
||||
<img src="@/assets/index/1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="phe_context">
|
||||
<div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
|
||||
<div class="phe_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="phe_time">2021.11.10</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<div class="phe_img">
|
||||
<img src="@/assets/index/1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="phe_context">
|
||||
<div class="phe_context_title">喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！</div>
|
||||
<div class="phe_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<div class="phe_time">2021.11.10</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="teaching_and_student">
|
||||
<el-col>
|
||||
<el-row :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<!--教学工作-->
|
||||
<div class="title">教学工作</div>
|
||||
<div class="divider" style="width: 76rem;">
|
||||
@@ -345,6 +432,167 @@
|
||||
<img src="@/assets/index/sy_icon_gd1.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tw">
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
28
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
2021-10
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||||
</div>
|
||||
<div class="tw_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="tw_img">
|
||||
<img src="@/assets/index/tw1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
28
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
2021-10
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||||
</div>
|
||||
<div class="tw_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="tw_img">
|
||||
<img src="@/assets/index/tw1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
28
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
2021-10
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||||
</div>
|
||||
<div class="tw_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="tw_img">
|
||||
<img src="@/assets/index/tw1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
28
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
2021-10
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||||
</div>
|
||||
<div class="tw_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="tw_img">
|
||||
<img src="@/assets/index/tw1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :offset="3" :span="18">
|
||||
<el-row>
|
||||
<el-col :span="3">
|
||||
<div class="tw_time">
|
||||
<div class="tw_top">
|
||||
28
|
||||
</div>
|
||||
<div class="tw_bottoms">
|
||||
2021-10
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="17">
|
||||
<div class="tw_context">
|
||||
<div class="tw_context_title">
|
||||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||||
</div>
|
||||
<div class="tw_context_text">
|
||||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="3" :offset="1">
|
||||
<div class="tw_img">
|
||||
<img src="@/assets/index/tw1.png" alt="">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
<!--更多-->
|
||||
@@ -352,14 +600,68 @@
|
||||
<div class="more_img">
|
||||
<img src="@/assets/index/sy_icon_zhdl.png" alt="">
|
||||
</div>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<el-col>
|
||||
<el-row :offset="3" :span="18">
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-row>
|
||||
<el-col :offset="5" :span="12">
|
||||
<div class="table">
|
||||
<table>
|
||||
<tr>
|
||||
<td rowspan="6">
|
||||
<div class="left">
|
||||
<div class="table_img">
|
||||
<img src="@/assets/index/sy_icon_sjzx.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td width="45rem">
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="right">
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -369,8 +671,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SlideshowCard from './components/slideshow_card'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
SlideshowCard
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -564,15 +871,124 @@ export default {
|
||||
|
||||
.party_building_active {
|
||||
background-image: url('../../assets/index/sy_bj3.png');
|
||||
|
||||
.phe {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 4rem;
|
||||
|
||||
.phe_context {
|
||||
.phe_context_title {
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #161616;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.phe_context_title:hover {
|
||||
color: #DA2D2D;
|
||||
}
|
||||
|
||||
.phe_context_text {
|
||||
margin-top: 0.8rem;
|
||||
font-size: 1.6rem;
|
||||
color: #565656;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.phe_time {
|
||||
text-align: right;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
color: #565656;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teaching_and_student {
|
||||
height: 101.2rem;
|
||||
|
||||
.tw {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.tw_time {
|
||||
border-right: .2rem solid #D5D5D5;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
color: #1956BC;
|
||||
text-align: center;
|
||||
|
||||
.tw_top {
|
||||
height: 8rem;
|
||||
width: 100%;
|
||||
line-height: 8rem;
|
||||
font-size: 5.2rem;
|
||||
}
|
||||
|
||||
.tw_bottoms {
|
||||
height: 2rem;
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tw_context {
|
||||
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
color: #161616;
|
||||
|
||||
.tw_context_title {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
padding-right: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.tw_context_text {
|
||||
margin-top: .8rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 2rem;
|
||||
background-image: url('../../assets/index/sy_bj4.png');
|
||||
height: 66rem;
|
||||
|
||||
.table{
|
||||
margin: 4rem 0 0 0 ;
|
||||
|
||||
|
||||
td{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.left {
|
||||
width: 55rem;
|
||||
height: 55rem;
|
||||
.table_img{
|
||||
text-align: right;
|
||||
padding-top: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 55rem;
|
||||
height: 6.5rem;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user