Skip to content

C
campSite
Commit 3d175f38 authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

营地2.0-活动中心-样式

parent e0bde720
Show whitespace changes
Inline Side-by-side
Showing with 152 additions and 91 deletions
src/components/base/Footer.vue
View file @ 3d175f38
......@@ -3,20 +3,28 @@
<!--底部-->
<div class="footer">
<div class="com-container content">
<ul class="contact_list">
<li>
<div class="contact_us">
<div class="contact_list">
<div class="contact_list_item">
<i class="el-icon-message"></i>
<span>联系邮箱</span>ydhdservice@163.com
</li>
<!-- <li>
<i class="el-icon-phone-outline"></i>
<span>联系电话</span>010-56218127
</li> -->
<li>
</div>
<div class="contact_list_item">
<i class="el-icon-aim"></i>
<span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00
</li>
</ul>
</div>
</div>
<div class="contact_qr">
<div class="contact_qr_item">
<img src="../../assets/img/footer/service.png"/>
<div class="name">大中衔接人才培养</div>
</div>
<div class="contact_qr_item">
<img src="../../assets/img/footer/wb.png"/>
<div class="name">大中贯通人才培养</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="copyRight">
<div>
......@@ -45,29 +53,32 @@ export default {
.footer {
font-family: PingFang SC;
font-size: 14px;
height: 169px;
/*height: 169px;*/
background: #000000;
opacity: 0.9;
line-height: 60px;
border-top: 1px solid #ccc;
.content {
.contact_list {
.contact_us{
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: center;
height: 88px;
padding: 20px 0 10px;
.contact_list {
display: flex;
flex-flow: column;
align-items: flex-start;
margin: 0;
padding: 0;
li {
font-size: 12px;
height: 14px;
line-height: 14px;
.contact_list_item {
font-size: 14px;
height: 24px;
line-height: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
list-style: none;
margin-right: 40px;
span {
margin: 0 15px 0 7px;
}
......@@ -76,6 +87,30 @@ export default {
}
}
}
.contact_qr{
display: flex;
flex-flow: row;
align-items: center;
.contact_qr_item{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
margin-left: 20px;
img{
width: 88px;
}
.name{
font-size: 14px;
line-height: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
}
}
}
}
.line {
width: 100%;
height: 1px;
......@@ -90,7 +125,7 @@ export default {
margin: 0;
padding: 0;
a {
font-size: 12px;
font-size: 14px;
font-weight: 400;
margin-right: 20px;
color: #FFFFFF;
......
src/views/base/active/Active.vue
View file @ 3d175f38
<template>
<div class="com-container active-container">
<div class="com-container active-container" v-loading="loading">
<div class="active-search">
<div class="active-search-title">活动筛选</div>
<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>
<el-checkbox
class="is-check-all"
v-model="checkAll[index]"
@change="handleCheckAllChange($event,1, item.labelLists, index)"
>全部
......@@ -15,7 +16,6 @@
<el-checkbox v-for="(item2, index2) in item.labelLists"
:key="index2"
:label="item2.lableId"
:class="checkAll[index]?'is-check-all':''"
border>{{item2.lableName}}
</el-checkbox>
</el-checkbox-group>
......@@ -40,6 +40,7 @@
<div class="content-item">
<div class="content-item-tit">本站报名</div>
<el-checkbox
class="is-check-all"
v-model="checkAllSupp"
@change="handleCheckAllChange($event,2, supportList)"
>全部
......@@ -49,15 +50,16 @@
<el-checkbox v-for="(item, index) in supportList"
:key="index"
:label="item.lableId"
:class="checkAllSupp?'is-check-all':''"
border>{{item.lableName}}
</el-checkbox>
</el-checkbox-group>
<div class="btn-area">
<el-button @click="resetHandle">重置</el-button>
<el-button @click="searchHandle">确定</el-button>
</div>
</div>
</div>
</div>
<div class="active-list" v-if="activeList.length>0">
<div class="active-list-item" v-for="(item, index) in activeList" :key="index"
......@@ -122,20 +124,8 @@
lableName: '不支持'
},
],
selectIds: {
0: [],
1: [],
2: [],
3: [],
4: [],
},
checkAll: {
0: false,
1: false,
2: false,
3: false,
4: false,
},
selectIds: {},
checkAll: {},
isSupport: [],
checkAllSupp: false,
}
......@@ -206,7 +196,17 @@
return false;
}
this.loading = true;
HotList(this.queryForm).then(res => {
let queryForm = JSON.parse(JSON.stringify(this.queryForm));
let flag = true;
for (let key in queryForm['ids']) {
if (!this.checkAll[key]) {
flag = false;
}
}
if (flag) {
queryForm['ids'] = {};
}
HotList(queryForm).then(res => {
console.log(res)
if (res.data.code != 200) {
this.loading = false;
......@@ -225,11 +225,20 @@
// 获取筛选标签列表
getLabelType() {
LabelType({}).then(res => {
console.log(res)
if (res.data.code != 200) {
return this.$message.error(res.data.msg);
}
this.labelList = res.data.data;
console.log(res)
let labelList = res.data.data;
let selectIds = {};
let checkAll = {};
labelList.forEach((item, index) => {
selectIds[index] = [];
checkAll[index] = false;
})
this.selectIds = selectIds;
this.checkAll = checkAll;
this.labelList = labelList;
}).catch(err => {
console.log(err)
})
......@@ -329,11 +338,11 @@
}
}
/*&.is-check-all {*/
/* .el-checkbox__label {*/
/* color: #333333 !important;*/
/* }*/
/*}*/
&.is-check-all.is-checked {
.el-checkbox__label {
font-weight: bold;
}
}
}
::v-deep .el-input {
......@@ -365,6 +374,8 @@
display: inline-block;
}
.btn-area {
/*margin-left: 130px;*/
.el-button {
height: 36px;
color: #333333;
......@@ -380,6 +391,8 @@
}
}
}
}
}
}
......@@ -419,7 +432,8 @@
.active-list-item-bg {
width: 100%;
height: 163px;
height: 13.6vw;
min-height: 163px;
overflow: hidden;
background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px;
......@@ -446,7 +460,6 @@
.active-list-item-cont {
flex: 1;
/*height: 240px;*/
padding: 10px 20px 0;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
......@@ -458,13 +471,13 @@
flex-flow: row;
align-items: center;
line-height: 28px;
margin: 10px 0 5px;
margin: 0.8vw 0 0.4vw;
.label {
font-size: 12px;
> span {
padding: 0 10px;
padding: 5px 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
......@@ -480,19 +493,22 @@
.active-list-item-cont-txt1 {
font-size: 16px;
line-height: 32px;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt2 {
font-size: 14px;
color: #999999;
line-height: 24px;
margin: 0.4vw 0;
}
.active-list-item-cont-txt3 {
font-size: 15px;
color: #EC808D;
line-height: 32px;
line-height: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-bottom {
......@@ -501,10 +517,10 @@
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 10px;
margin-top: 1vw;
padding: 1vw 0;
font-size: 14px;
height: 50px;
line-height: 50px;
line-height: 32px;
cursor: pointer;
.el-icon-right {
......
src/views/base/active/ActiveInfo.vue
View file @ 3d175f38
......@@ -27,9 +27,9 @@
</div>
</div>
<div>
<el-button>报名未开放</el-button>
<el-button>立即报名</el-button>
<el-button>报名已截止</el-button>
<el-button :disabled="true">报名未开放</el-button>
<el-button @click="signUp">立即报名</el-button>
<el-button :disabled="true">报名已截止</el-button>
<el-button :disabled="true">已结营</el-button>
</div>
</div>
......@@ -132,8 +132,6 @@
</template>
<script>
import img from "../../../assets/img/recruit.png";
export default {
name: "ActiveInfo",
data() {
......@@ -161,6 +159,15 @@
this.getInfo()
},
methods: {
// 立即报名按钮
signUp() {
let allToken = window.localStorage.getItem('index-token-all');
if (allToken) {
this.$router.push('/signUp/examInfo?code=' + this.activeInfo.code);
} else {
this.$router.push('/baseLogin');
}
},
// 去活动详情页面（当前活动/往期活动回顾区域）
toActiveInfo(type, id) {
this.$router.push('/active/' + type + '/' + id);
......@@ -208,7 +215,8 @@
this.activeContent = 1;
this.activeInfo = {
id: 1,
cover: img,
code: '0e2a2be59c33479ca91a0e3b0df88744',
cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
label: '线上',
name: '2023年寒假历史营地',
school: ['南开大学', '历史学', '大学生'],
......@@ -239,7 +247,7 @@
this.backList = [
{
id: 1,
cover: img,
cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
label: '线上',
name: '2023年寒假历史营地1',
school: ['南开大学', '历史学', '大学生'],
......@@ -252,7 +260,7 @@
},
{
id: 2,
cover: img,
cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
label: '线上',
name: '2023年寒假历史营地2',
school: ['南开大学', '历史学', '大学生'],
......@@ -268,7 +276,7 @@
this.nowList = [
{
id: 3,
cover: img,
cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
label: '线上',
name: '2023年寒假历史营地3',
school: ['南开大学', '历史学', '大学生'],
......@@ -281,7 +289,7 @@
},
{
id: 4,
cover: img,
cover: 'http://campiste.oss-cn-beijing.aliyuncs.com/image/png/20230912/ddf982eb228142c4a2d8b765fd263073.png',
label: '线上',
name: '2023年寒假历史营地4',
school: ['南开大学', '历史学', '大学生'],
......@@ -344,7 +352,7 @@
.active-info-cover {
flex: 1;
max-height: 300px;
max-height: 340px;
overflow: hidden;
border-radius: 4px;
......@@ -455,6 +463,7 @@
&.is-disabled {
color: #333333;
border-color: #333333;
opacity: 0.5;
}
}
}
......@@ -529,6 +538,7 @@
&:hover {
border-bottom: 2px solid #eeeeee;
}
&.is-active {
border-bottom: 2px solid var(--all_color);
}
......@@ -543,7 +553,7 @@
.right-area {
flex: 1.5;
min-width: 290px;
min-width: 320px;
.question-area {
......
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