Skip to content

C
campSite
Commit 31de37b9 authored by wuwangwolihui's avatar wuwangwolihui
Browse files
Options

Merge remote-tracking branch 'origin/yingdi2.0' into yingdi2.0

parents e1e156e2 076c13f1
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 23 deletions
src/router/base/myInfo.js 0 → 100644
View file @ 31de37b9
export default [{
path: '/signUpList',
name: 'signUpList',
component: () => import(/* webpackChunkName: "login" */ 'v/base/myInfo/signUp.vue'),
meta: {
title: '我的报名'
}
},
]
src/router/index.js
View file @ 31de37b9
...@@ -5,7 +5,6 @@ import VueRouter from 'vue-router'; ...@@ -5,7 +5,6 @@ import VueRouter from 'vue-router';
import store from '@/store'; import store from '@/store';
import indexLogin from './index/login'; import indexLogin from './index/login';
import indexCamp from './index/camp';
import indexHome from './base/home'; import indexHome from './base/home';
import indexActive from './base/active'; import indexActive from './base/active';
import {getCam} from "r/index/login"; import {getCam} from "r/index/login";
...@@ -37,15 +36,31 @@ const routes = [ ...@@ -37,15 +36,31 @@ const routes = [
children: [...indexLogin] children: [...indexLogin]
}, },
{ {
path: '/', path: '/myInfo',
name: 'cerificateIndex', name: 'myInfoIndex',
meta: { meta: {
title: '营地报名' title: '个人中心'
}, },
// redirect: '/cerificate/signUp', component: () => import('v/base/myInfo/index.vue'),
component: () => import('v/index/camp/Index.vue'), children: [{
children: [...indexCamp] path: '/signUpList',
name: 'signUpList',
component: () => import(/* webpackChunkName: "login" */ 'v/base/myInfo/signUp.vue'),
meta: {
title: '我的报名'
}
}]
}, },
// {
// path: '/',
// name: 'cerificateIndex',
// meta: {
// title: '营地报名'
// },
// // redirect: '/cerificate/signUp',
// component: () => import('v/index/camp/Index.vue'),
// children: [...indexCamp]
// },
{ {
path: '/:code', path: '/:code',
name: 'recruit', name: 'recruit',
...@@ -69,7 +84,7 @@ const routes = [ ...@@ -69,7 +84,7 @@ const routes = [
const router = new VueRouter({ const router = new VueRouter({
mode: 'history', mode: 'history',
// base: process.env.BASE_URL, // base: process.env.BASE_URL,
routes routes: routes //原因
}) })
...@@ -128,12 +143,15 @@ function checkCam(code, cb) { ...@@ -128,12 +143,15 @@ function checkCam(code, cb) {
} }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to)
let let
toLogin = "/login", toLogin = "/login",
toRegister = "/register", toRegister = "/register",
toReset = "/reset", toReset = "/reset",
toHome = "/home", toHome = "/home",
toActive = "/active"; toActive = "/active";
let toMyInfo;
toMyInfo = "/myInfo";
let code = false; let code = false;
document.title = to.meta.title; document.title = to.meta.title;
if (to.path == toLogin || to.path == toRegister || to.path == toReset) { if (to.path == toLogin || to.path == toRegister || to.path == toReset) {
...@@ -150,7 +168,7 @@ router.beforeEach((to, from, next) => { ...@@ -150,7 +168,7 @@ router.beforeEach((to, from, next) => {
// } // }
// }); // });
return next(); return next();
} else if (to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) { } else if (to.path == toMyInfo || to.path == toHome || to.path == toActive || to.path.indexOf(toActive) != -1) {
return next(); return next();
} else if (to.name == "recruit") { } else if (to.name == "recruit") {
code = to.params.code; code = to.params.code;
......
src/views/base/home/Home.vue
View file @ 31de37b9
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div> <div>
<el-carousel height="300px"> <el-carousel height="300px">
<el-carousel-item :key="index" v-for="(item,index) in bannerlist"> <el-carousel-item :key="index" v-for="(item,index) in bannerlist">
<img :src="item.url" class="small"/> <img :src="item.url" class="small" style="width: 100%;"/>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </div>
...@@ -39,7 +39,11 @@ ...@@ -39,7 +39,11 @@
</div> </div>
</div> </div>
</div> </div>
<!--查看更多-->
<div class="flex line">
<div class="line"></div>
<span>查看更多</span>
</div>
<!-- 学生感想和体会 --> <!-- 学生感想和体会 -->
<div> <div>
<div class="home_title"> <div class="home_title">
...@@ -53,13 +57,21 @@ ...@@ -53,13 +57,21 @@
{{item2}} {{item2}}
</div> </div>
<div class="item_name"> <div class="item_name">
<div>
<div class="name">
{{item.name}} {{item.name}}
</div> </div>
<div class="name_line">
</div>
</div>
</div>
</div> </div>
<div> <div>
<div class="item_text"> <div class="item_text">
{{item.think}} {{item.think}}
</div> </div>
</div> </div>
<div></div> <div></div>
...@@ -71,15 +83,16 @@ ...@@ -71,15 +83,16 @@
<script> <script>
import img from "../../../assets/img/recruit.png"; import img from "../../../assets/img/recruit.png";
import banner from "../../../assets/img/Banner/banner@2x.png";
export default { export default {
name: "Home", name: "Home",
data() { data() {
return { return {
bannerlist: [{ bannerlist: [{
// url: require("@/assets/img/Banner/banner@2x.png") url: banner
}, { }, {
// url: require("@/assets/img/Banner/banner@2x.png") url: banner
}], }],
activeList: [ activeList: [
{ {
...@@ -155,7 +168,7 @@ ...@@ -155,7 +168,7 @@
tag: ['北京市第八中序', '2023南开历史营'] tag: ['北京市第八中序', '2023南开历史营']
}, },
{ {
name: '同学', name: '同学同学同学同学',
think: '2222222', think: '2222222',
tag: ['北京市第八中序', '2023南开历史营'] tag: ['北京市第八中序', '2023南开历史营']
}, },
...@@ -376,6 +389,22 @@ ...@@ -376,6 +389,22 @@
font-family: "PingFang SC"; font-family: "PingFang SC";
} }
.line {
align-items: center;
div {
width: 100%;
border-bottom: 1px solid #D7D7D7;
}
span {
color: #333333;
font-size: 14px;
width: 74px;
margin-left: 20px;
}
}
.reflectionList { .reflectionList {
/*margin-top: 30px;*/ /*margin-top: 30px;*/
display: flex; display: flex;
...@@ -383,13 +412,14 @@ ...@@ -383,13 +412,14 @@
font-size: 12px; font-size: 12px;
.reflections_item { .reflections_item {
flex-basis: 31%; flex-basis: 46%;
margin: 1.75% 0; margin: 1.75% 0;
background-color: #ffffff; background-color: #ffffff;
height: 163px; height: 163px;
position: relative; position: relative;
width: 200px; width: 200px;
&:nth-child(3n+2) {
&:nth-child(2n+2) {
margin: 1.75% 3.5%; margin: 1.75% 3.5%;
} }
...@@ -397,7 +427,7 @@ ...@@ -397,7 +427,7 @@
display: flex; display: flex;
position: absolute; position: absolute;
top: -10%; top: -10%;
margin-left: 10px; margin-left: 8%;
.tag { .tag {
display: flex; display: flex;
...@@ -407,7 +437,17 @@ ...@@ -407,7 +437,17 @@
} }
.item_name { .item_name {
display: flex;
align-items: end;
}
.name {
margin-bottom: 10px;
}
.name_line {
border-bottom: 2px solid #D7D7D7; border-bottom: 2px solid #D7D7D7;
} }
} }
......
src/views/base/myInfo/index.vue 0 → 100644
View file @ 31de37b9
<template>
<div class="camp-index">
<el-header height="104px">
<Header></Header>
<div class="bg-top"></div>
</el-header>
<div class="com-container">
<div class="index-container">
<div class="camp_left" ref="leftBoxFu">
<ul
:class="{
'is-fixed': isPosition == 1,
'is-absolute': isPosition == 2,
}"
class="camp_left_box"
ref="leftBox"
>
<li
:class="{ active: campindex_type === index }"
:key="index"
@click="ToSignUp(index)"
v-for="(item, index) in tabs"
>
<img :src="item.url"/>
{{ item.desc }}
</li>
</ul>
</div>
<div class="camp_right" ref="rightBox">
<signUpList v-if="this.campindex_type==0"></signUpList>
<!-- <router-view></router-view>-->
</div>
</div>
</div>
<Footer></Footer>
</div>
</template>
<script>
/* eslint-disable */
import Header from "@/components/index/SignUp/Header.vue";
import Footer from "@/components/index/Footer.vue";
import svg1 from '@/assets/img/signUp/icon.svg';
import signUpList from '../myInfo/signUp.vue';
export default {
name: "myInfoIndex",
components: {
Header,
Footer,
signUpList
},
// props:{}
data() {
return {
index: 0,
isPosition: 0, // 左侧box是否浮动
pageYOffset: 0, // 左侧box浮动时，滚动的高度
scorllHeight: 0, // 最大滚动高度
tabs: [
{
id: "0",
desc: "我的报名",
icon: "icon-icon1",
url: svg1
},
],
campindex_type: 0,
};
},
watch: {},
created() {
this.ToSignUp(this.campindex_type)
},
mounted() {
window.addEventListener("scroll", this.handleScrollX, true);
window.addEventListener("resize", this.onResize, true);
},
beforeDestroy() {
window.removeEventListener("scroll", this.handleScrollX, true);
window.removeEventListener("resize", this.onResize, true);
},
methods: {
ToSignUp(index) {
console.log(index, 'index')
this.campindex_type = index;
if (this.campindex_type == 0) {
this.$router.push({path: '/signUpList'});
}
},
onResize() {
const refLeft = this.$refs["leftBox"];
const leftBoxFu = this.$refs["leftBoxFu"];
refLeft.style.width = leftBoxFu.offsetWidth + "px";
},
// 页面滚动事件
handleScrollX() {
const top = document.documentElement.scrollTop || document.body.scrollTop;
const refLeft = this.$refs["leftBox"];
const leftBoxFu = this.$refs["leftBoxFu"];
const refRight = this.$refs["rightBox"];
if (top > 0) {
if (this.isPosition == 0) {
this.scorllHeight = refRight.offsetHeight - refLeft.offsetHeight;
refLeft.style.width = leftBoxFu.offsetWidth + "px";
}
this.isPosition = 1;
} else {
if ((this.isPosition = 1)) {
this.isPosition = 0;
}
}
if (top >= this.scorllHeight) {
if (this.isPosition == 1) {
this.isPosition = 2;
}
} else if (top < this.scorllHeight) {
if (this.isPosition == 2) {
this.isPosition = 1;
refLeft.style.width = leftBoxFu.offsetWidth + "px";
}
}
},
},
};
</script>
<style lang="scss" scoped>
@import "a/scss/common";
@import "a/scss/index";
@import "a/style";
@font-face {
font-family: "icomoon";
src: url("../../../assets/fonts/icomoon.eot?dcunb6");
src: url("../../../assets/fonts/icomoon.eot?dcunb6#iefix") format("embedded-opentype"),
url("../../../assets/fonts/icomoon.ttf?dcunb6") format("truetype"),
url("../../../assets/fonts/icomoon.woff?dcunb6") format("woff"),
url("../../../assets/fonts/icomoon.svg?dcunb6#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.camp_left i {
font-family: "icomoon";
}
.camp-index {
background: #f8f8f8;
.el-header {
position: fixed;
width: 100%;
padding: 0;
background-color: #ffffff;
z-index: 2000; //消息提示框z-index=2019
.bg-top {
height: 24px;
background-color: #f8f8f8;
}
}
// .com-container {
// height: calc(100% - 100px);
// }
.index-container {
padding: 104px 0 70px 0;
display: flex;
flex-flow: row;
.camp_left {
// width: 100px;
height: 100%;
position: relative;
width: 22%;
max-width: 280px;
min-width: 200px;
// width: calc(100% - 100px);
height: 300px;
background-color: #ffffff;
border-radius: 8px;
padding: 20px 0;
margin-right: 25px;
.camp_left_box {
padding-inline-start: 0 !important;
}
&.is-fixed {
position: fixed;
top: 104px;
/*width: 14.4%;*/
max-width: 280px;
min-width: 216px;
}
&.is-absolute {
position: absolute;
bottom: 0;
width: 100%;
}
}
li {
position: relative;
padding: 0 23px 0 51px;
height: 44px;
line-height: 44px;
margin: 10px 0;
font-size: 15px;
list-style: none;
img {
vertical-align: middle;
margin: -3px 8px 0 0;
width: 20px;
position: absolute;
left: -1000px;
filter: drop-shadow(var(--color) 1023px 13px) !important;
}
&.active,
&:hover {
cursor: pointer;
background-color: #f8f8f8;
}
}
}
.camp_right {
flex: 1;
// width: calc(100% - 100px);
// height: 100%;
// overflow: auto;
border-radius: 8px;
background-color: #ffffff;
}
}
</style>
src/views/base/myInfo/signUp.vue 0 → 100644
View file @ 31de37b9
<template>
<div class="signUp">
<el-tabs @tab-click="handleClick" v-model="activeName">
<el-tab-pane label="正在报名" name="1">
111
</el-tab-pane>
<el-tab-pane label="即将开营" name="2">
<div :key="index" v-for="(item,index) in List" class="campList" >
<el-card class="box-card">
<div class="flex list_item">
<div class="item_img">
<img :src="item.url"/>
</div>
<div >
<div class="item_title">{{item.name}}</div>
<div class="item_tag">{{item.tag}}</div>
<div class="item_time">活动时间：{{item.time}}</div>
</div>
</div>
</el-card>
</div>
</el-tab-pane>
<el-tab-pane label="开营中" name="3">开营中</el-tab-pane>
<el-tab-pane label="已结营" name="4">已结营</el-tab-pane>
<el-tab-pane label="已退营" name="5">已退营</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import img from "../../../assets/img/recruit.png";
export default {
name: "signUpList",
data() {
return {
activeName: '2',
List: [{
url: img,
name: 'XX大学暑期营',
tag: '线下活动',
time: '2023-07-23至2023-07-27',
}, {
url: img,
name: 'XX大学暑期营',
tag: '线下活动',
time: '2023-07-23至2023-07-27',
}]
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
<style lang="scss" scoped>
.flex{
display: flex;
}
.signUp {
margin: 10px 80px 10px 31px;
.campList{
margin: 10px 0;
.list_item{
.item_img{
width: 30%;
margin-right: 10%;
img{
width: 100%;
}
}
.item_title{
}
}
}
}
</style>
src/views/index/camp/Index.vue
View file @ 31de37b9
...@@ -29,11 +29,7 @@ ...@@ -29,11 +29,7 @@
<div class="camp_right" ref="rightBox"> <div class="camp_right" ref="rightBox">
<router-view <router-view
@getStatus="getStatus" @getStatus="getStatus"
/> />
</div> </div>
</div> </div>
......
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