Skip to content

C
campSite
Commit b48cb011 authored by 杨梦雪's avatar 杨梦雪
Browse files
Options

首页

parent 1194c751
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 5 deletions
src/views/base/home/Home.vue
View file @ b48cb011
<template> <template>
<div>Home</div> <div class="com-container home-container">
<div>
<el-carousel height="300px">
<el-carousel-item :key="index" v-for="(item,index) in bannerlist">
<img :src="item.url" class="small"/>
</el-carousel-item>
</el-carousel>
</div>
<!-- 热门活动 -->
<div>
<div class="home_title">
热门活动
</div>
<div class="active-list">
<div :key="index" :style="{
'-webkit-animation-delay': (index+1)*0.1+'s',
'imation-delay': (index+1)*0.1+'s',
}" class="active-list-item"
v-for="(item, index) in activeList">
<div class="inner">
<div class="active-list-item-bg">
<el-image :src="item.cover" fit="cover"></el-image>
</div>
<div class="active-list-item-cont">
<div class="active-list-item-cont-header">
<div class="label">{{item.label}}</div>
<div class="title">{{item.name}}</div>
</div>
<div class="active-list-item-cont-txt1">{{item.school}}</div>
<div class="active-list-item-cont-txt2">{{item.beginTime}} （共{{item.days}}天）</div>
<div class="active-list-item-cont-txt3">报名截止时间：{{item.bmEndTime}}</div>
<div @click="$router.push('/active/'+item.id)" class="active-list-item-cont-bottom">
<div>查看详情</div>
<i class="el-icon-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 学生感想和体会 -->
<div>
<div class="home_title">
学生感想和体会
</div>
<div class="reflectionList">
<div :key="index"
class="reflections_item" v-for="(item, index) in reflectionsList">
<div class="item_float">
<div :key="index2" class="tag" v-for="(item2, index2) in item.tag">
{{item2}}
</div>
<div class="item_name">
{{item.name}}
</div>
</div>
<div>
<div class="item_text">
{{item.think}}
</div>
</div>
<div></div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import img from "../../../assets/img/recruit.png";
export default { export default {
name: "Home" name: "Home",
data() {
return {
bannerlist: [{
url: require("@/assets/img/Banner/banner@2x.png")
}, {
url: require("@/assets/img/Banner/banner@2x.png")
}],
activeList: [
{
id: 1,
cover: img,
label: '线上',
name: '2023年寒假历史营地',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
},
{
id: 2,
cover: img,
label: '线上',
name: '2023年寒假历史营地2',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
},
{
id: 3,
cover: img,
label: '线上',
name: '2023年寒假历史营地3',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
},
{
id: 1,
cover: img,
label: '线上',
name: '2023年寒假历史营地',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
},
{
id: 2,
cover: img,
label: '线上',
name: '2023年寒假历史营地2',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
},
{
id: 3,
cover: img,
label: '线上',
name: '2023年寒假历史营地3',
school: '南开大学 | 历史学',
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
}
],
reflectionsList: [{
name: '同学',
think: '我想小鸟肯定是害怕了，小鸟失去了自由，一定高兴不起来了，只有外面的天空才是小鸟的家，小鸟被细绳牵着失去自由实在是太可怜了，我决心把小鸟放走我轻轻的走过去，把小鸟腿上的细绳解开了。我把小鸟放在窗台上，我站在远处看着它，只见小鸟趴在窗台上还是一动也不动，嘴巴张着。妈妈说小鸟可能吓坏了，我有点后悔。后来过了好一会儿，小鸟才回过神来，它眨了眨眼睛，慢慢飞了起来。我看我觉的小鸟是我们人类的朋友，我们不能伤害小鸟，只有让小鸟在天空中自由的飞翔，它才会感到快乐',
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
}]
};
},
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
@import "a/scss/common";
@-webkit-keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.active-list {
margin-top: 30px;
display: flex;
flex-flow: wrap;
.active-list-item {
flex-basis: 31%;
margin: 1.75% 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
-webkit-animation: fade ease-out 0.5s forwards;
animation: fade ease-out 0.5s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
&:nth-child(3n+2) {
margin: 1.75% 3.5%;
}
.inner {
border-radius: 4px;
overflow: hidden;
max-width: none;
background: #fff;
box-sizing: border-box;
transition: all ease-out 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
.active-list-item-bg {
width: 100%;
height: 163px;
overflow: hidden;
background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px;
::v-deep .el-image {
width: 100%;
height: 100%;
transition: all .5s;
-webkit-transition: all .5s;
.el-image__error {
background-color: #D8D8D8;
}
&:hover {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
.active-list-item-cont {
flex: 1;
/*height: 240px;*/
padding: 10px 20px 0;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
font-family: PingFang SC;
font-weight: 400;
.active-list-item-cont-header {
display: flex;
flex-flow: row;
align-items: center;
line-height: 28px;
margin: 10px 0 5px;
.label {
font-size: 12px;
padding: 0 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
margin-right: 5px;
}
.title {
font-size: 18px;
font-weight: 500;
}
}
.active-list-item-cont-txt1 {
font-size: 16px;
line-height: 32px;
}
.active-list-item-cont-txt2 {
font-size: 14px;
color: #999999;
line-height: 24px;
}
.active-list-item-cont-txt3 {
font-size: 15px;
color: #EC808D;
line-height: 32px;
}
.active-list-item-cont-bottom {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 10px;
font-size: 14px;
height: 50px;
line-height: 50px;
cursor: pointer;
.el-icon-right {
font-size: 18px;
}
&:hover {
color: var(--all_color);
}
}
}
}
&:hover {
.inner {
box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);
.active-list-item-bg {
::v-deep .el-image {
transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-moz-transform: scale(1.1); /* Firefox */
-webkit-transform: scale(1.1); /* Safari 和 Chrome */
-o-transform: scale(1.1);
}
}
}
}
}
}
.home_title {
font-size: 20px;
margin: 20px 0;
}
.home-container {
padding: 50px;
color: #333333;
font-family: "PingFang SC";
}
.reflectionList {
/*margin-top: 30px;*/
display: flex;
flex-flow: wrap;
font-size: 12px;
.reflections_item {
flex-basis: 31%;
margin: 1.75% 0;
background-color: #ffffff;
height: 163px;
position: relative;
width: 200px;
&:nth-child(3n+2) {
margin: 1.75% 3.5%;
}
.item_float {
display: flex;
position: absolute;
top: -10%;
margin-left: 10px;
.tag {
display: flex;
background-color: #D7D7D7;
padding: 9px;
margin-right: 10px;
}
.item_name {
border-bottom: 2px solid #D7D7D7;
}
}
.item_text {
margin: 7% 3%;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment