Skip to content

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

营地2.0-活动中心

parent 2463f973
Expand all Hide 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;
}
\ No newline at end of file --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
This diff is collapsed.
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>
export default { import img from "../../../assets/img/recruit.png";
name: "ActiveInfo"
} export default {
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