Skip to content

C
campSite
Commit 6bd0351c authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0-活动中心

parent 2463f973
Show whitespace changes
Inline Side-by-side
Showing with 753 additions and 31 deletions
src/assets/scss/index.scss
View file @ 6bd0351c
...@@ -5,4 +5,6 @@ ...@@ -5,4 +5,6 @@
--color: #60194a; --color: #60194a;
--bk_pic: #60194a; --bk_pic: #60194a;
--logo: #60194a; --logo: #60194a;
--all_color: #3EACEF;
} }
src/components/base/Header.vue
View file @ 6bd0351c
...@@ -152,14 +152,14 @@ ...@@ -152,14 +152,14 @@
&:hover { &:hover {
font-weight: bold; font-weight: bold;
color: var(--color); color: var(--all_color);
} }
&.is-active { &.is-active {
font-weight: bold; font-weight: bold;
color: var(--color); color: var(--all_color);
border-bottom-width: 3px; border-bottom-width: 3px;
border-bottom-color: var(--color); border-bottom-color: var(--all_color);
} }
} }
} }
...@@ -182,8 +182,8 @@ ...@@ -182,8 +182,8 @@
&.is-hover { &.is-hover {
cursor: pointer; cursor: pointer;
color: var(--color); color: var(--all_color);
border-color: var(--color); border-color: var(--all_color);
} }
} }
} }
......
src/views/base/active/Active.vue
View file @ 6bd0351c
...@@ -3,33 +3,500 @@ ...@@ -3,33 +3,500 @@
<div class="active-search"> <div class="active-search">
<div class="active-search-title">活动筛选</div> <div class="active-search-title">活动筛选</div>
<div class="active-search-content"> <div class="active-search-content">
<div class="content-item" v-for="(item, index) in labelList" :key="index">
<div class="content-item-tit">{{item.categoryName}}</div>
<div class="content-item-txt is-active">全部</div>
<div class="content-item-txt"
v-for="(item2, index2) in item.labelLists"
:key="index2">
{{item2.lableName}}
</div>
</div>
<div class="content-item"> <div class="content-item">
<div>活动状态</div> <div class="content-item-tit">活动天数</div>
<ul> <el-input v-model="queryForm.num1"
<li>全部</li> type="number"
<li>报名未开放</li> :min="1"
<li>报名中</li> placeholder="最小天数"
<li>开营中</li> class="ml"
<li>已结营</li> oninput="value=value.replace(/^0/g, '')"
</ul> @blur="onInputBlur"
></el-input>
<div class="line">——</div>
<el-input v-model="queryForm.num2"
type="number"
:min="1"
placeholder="最大天数"
oninput="value=value.replace(/^0/g, '')"
@blur="onInputBlur"
></el-input>
<el-button @click="clearInput">清除</el-button>
</div>
</div>
</div>
<div class="active-list">
<div class="active-list-item" v-for="(item, index) in activeList" :key="index"
:style="{
'-webkit-animation-delay': (index+1)*0.1+'s',
'imation-delay': (index+1)*0.1+'s',
}">
<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 class="active-list-item-cont-bottom" @click="$router.push('/active/'+item.id)">
<div>查看详情</div>
<i class="el-icon-right"></i>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
Active
<el-button @click="$router.push('/active/1')">活动详情</el-button>
</div> </div>
</template> </template>
<script> <script>
import img from "../../../assets/img/recruit.png";
export default { export default {
name: "Active" name: "Active",
data() {
return {
loading: false,
queryForm: {
num1: null,
num2: null,
},
labelList: [
{
categoryId: 1,
categoryName: "活动状态",
labelLists: [
{
lableId: 5,
lableName: "222"
},
{
lableId: 6,
lableName: "33333"
},
{
lableId: 12,
lableName: "new"
},
]
},
{
categoryId: 2,
categoryName: "学科分类",
labelLists: [
{lableId: 8, lableName: "数学"},
{lableId: 9, lableName: "物理"},
{lableId: 10, lableName: "英语"},
{lableId: 11, lableName: "历史"},
{lableId: 13, lableName: "语文"},
]
},
{
categoryId: 3,
categoryName: "学校",
labelLists: [
{lableId: 2, lableName: "南开大学444"},
{lableId: 3, lableName: "北京航空航天大学"},
]
},
{
categoryId: 4,
categoryName: "面向人群",
labelLists: [
{lableId: 7, lableName: "555"},
]
},
{
categoryId: 5,
categoryName: "活动形式",
labelLists: [
{lableId: 14, lableName: "线上"},
{lableId: 15, lableName: "线下"},
{lableId: 16, lableName: " 线上结合线下"},
],
}
],
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',
}
]
}
},
created() {
this.getList();
},
methods: {
// 输入框失去焦点
onInputBlur() {
this.getList();
},
// 清除按钮
clearInput() {
this.queryForm.num1 = null;
this.queryForm.num2 = null;
this.getList();
},
// 获取列表
getList() {
if (this.loading) {
return false;
}
this.loading = true;
console.log('getList');
setTimeout(() => {
this.loading = false;
}, 2000)
},
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "a/scss/common"; @import "a/scss/common";
.active-container{
@-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-container {
padding: 50px; padding: 50px;
} color: #333333;
font-family: "PingFang SC";
.active-search {
padding: 20px 25px;
border-radius: 4px;
background-color: #ffffff;
.active-search-title {
font-size: 20px;
line-height: 46px;
}
.active-search-content {
.content-item {
display: flex;
flex-flow: row;
align-items: center;
line-height: 36px;
margin: 15px 0;
.content-item-tit {
width: 140px;
text-align: center;
background-color: #f5f5f5;
margin-right: 10px;
}
.content-item-txt {
padding: 0 10px;
margin-left: 15px;
cursor: pointer;
&:hover,
&.is-active {
color: var(--all_color);
}
}
::v-deep .el-input {
width: 130px;
height: 36px;
line-height: 36px;
&.ml {
margin-left: 25px;
}
.el-input__inner {
height: 36px;
line-height: 36px;
color: #333333;
border-color: #333333;
&:focus,
&:hover {
color: #000000;
border-color: var(--all_color);
}
}
}
.line {
color: #333333;
margin: 0 10px;
display: inline-block;
}
.el-button {
height: 36px;
color: #333333;
border-color: #333333;
background-color: #ffffff;
margin-left: 15px;
&:hover {
color: var(--all_color);
border-color: var(--all_color);
background-color: #ffffff;
}
}
}
}
}
.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);
}
}
}
}
}
}
}
</style> </style>
src/views/base/active/ActiveInfo.vue
View file @ 6bd0351c
<template> <template>
<div>ActiveInfo</div> <div class="com-container active-info-container">
<div class="active-info card-box">
<div class="active-info-cover">
<el-image :src="activeInfo.cover" fit="cover"/>
</div>
<div class="active-info-cont">
<div class="active-info-cont-header">
<div class="label">{{activeInfo.label}}</div>
<div class="title">{{activeInfo.name}}</div>
</div>
<div class="active-info-cont-txt1">
<div class="sign"
v-for="(item, index) in activeInfo.school"
:key="index">
{{item}}
</div>
</div>
<div class="active-info-cont-txt2">活动时间：{{activeInfo.beginTime}} 至 {{activeInfo.endTime}}</div>
<div class="active-info-cont-txt3">
<div>报名截止：{{activeInfo.bmEndTime}}</div>
<div>
活动费用：￥{{activeInfo.free}}
<el-tooltip class="item" effect="dark" content="申请审核通过后，才可缴费参与活动" placement="top">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
</div>
<div>
<el-button>报名未开放</el-button>
<el-button>立即报名</el-button>
<el-button>报名已截止</el-button>
<el-button :disabled="true">已结营</el-button>
</div>
</div>
</div>
<div class="active-area">
<div class="left-area card-box">
<ul>
<li>活动介绍</li>
<li>活动安排</li>
<li>活动收获</li>
</ul>
</div>
<div class="center-area card-box">
<div>活动简章</div>
</div>
<div class="right-area">
<div class="question-area card-box">
<div>常见问题</div>
</div>
<div class="back-area">
<div>往期活动回顾</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import img from "../../../assets/img/recruit.png";
export default { export default {
name: "ActiveInfo" name: "ActiveInfo",
data() {
return {
activeInfo: {
id: 1,
cover: img,
label: '线上',
name: '2023年寒假历史营地',
school: ['南开大学', '历史学', '大学生'],
beginTime: '2023-09-01',
endTime: '20230903',
days: '3',
bmEndTime: '2023-08-31',
free: 6000,
},
}
},
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
@import "a/scss/common";
.active-info-container {
padding: 50px;
color: #333333;
font-family: "PingFang SC";
.card-box {
border-radius: 4px;
background-color: #ffffff;
}
.active-info {
padding: 40px 60px;
display: flex;
flex-flow: row;
.active-info-cover {
flex: 1;
max-height: 300px;
overflow: hidden;
border-radius: 4px;
::v-deep .el-image {
width: 100%;
height: 100%;
border-radius: 4px;
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-info-cont {
flex: 1;
margin-left: 70px;
display: flex;
flex-flow: column;
justify-content: space-between;
.active-info-cont-header {
display: flex;
flex-flow: row;
align-items: center;
.label {
font-size: 16px;
padding: 0 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
margin-right: 15px;
line-height: 28px;
}
.title {
font-size: 22px;
font-weight: 500;
line-height: 36px;
}
}
.active-info-cont-txt1 {
font-size: 16px;
line-height: 32px;
display: flex;
flex-flow: row;
align-items: center;
.sign {
padding: 0 10px;
border-radius: 4px;
background-color: #eeeeee;
margin-right: 10px;
&:last-child {
margin: 0;
}
}
}
.active-info-cont-txt2 {
font-size: 16px;
color: #999999;
line-height: 24px;
}
.active-info-cont-txt3 {
font-size: 16px;
color: #EC808D;
line-height: 32px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
.el-tooltip {
color: #999999;
margin-left: 10px;
cursor: pointer;
}
}
.el-button {
width: 150px;
height: 40px;
color: #333333;
border-color: #333333;
background-color: #ffffff;
&:hover {
color: var(--all_color);
border-color: var(--all_color);
}
&.is-disabled {
color: #333333;
border-color: #333333;
}
}
}
}
.active-area {
display: flex;
flex-flow: row;
align-items: initial;
justify-content: space-between;
margin-top: 50px;
.left-area {
flex: 1;
ul {
padding: 20px 10px;
}
li {
list-style: none;
font-size: 18px;
height: 44px;
line-height: 44px;
padding: 0 23px;
text-align: center;
border-bottom: 1px solid #cccccc;
&:hover,
&.is-active {
background-color: #f5f5f5;
border-left: 4px solid var(--all_color);
}
}
}
.center-area {
flex: 4;
margin: 0 20px;
}
.right-area {
flex: 2;
.question-area {
}
}
}
}
</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