Skip to content

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

首页

parent 8880f7ff
Show whitespace changes
Inline Side-by-side
Showing with 418 additions and 23 deletions
src/router/base/myInfo.js 0 → 100644
View file @ 076c13f1
export default [{
path: '/signUpList',
name: 'signUpList',
component: () => import(/* webpackChunkName: "login" */ 'v/base/myInfo/signUp.vue'),
meta: {
title: '我的报名'
}
},
]
src/router/index.js
View file @ 076c13f1
......@@ -5,7 +5,6 @@ import VueRouter from 'vue-router';
import store from '@/store';
import indexLogin from './index/login';
import indexCamp from './index/camp';
import indexHome from './base/home';
import indexActive from './base/active';
import {getCam} from "r/index/login";
......@@ -37,15 +36,31 @@ const routes = [
children: [...indexLogin]
},
{
path: '/',
name: 'cerificateIndex',
path: '/myInfo',
name: 'myInfoIndex',
meta: {
title: '营地报名'
title: '个人中心'
},
// redirect: '/cerificate/signUp',
component: () => import('v/index/camp/Index.vue'),
children: [...indexCamp]
component: () => import('v/base/myInfo/index.vue'),
children: [{
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',
name: 'recruit',
......@@ -69,7 +84,7 @@ const routes = [
const router = new VueRouter({
mode: 'history',
// base: process.env.BASE_URL,
routes
routes: routes //原因
})
......@@ -128,12 +143,15 @@ function checkCam(code, cb) {
}
router.beforeEach((to, from, next) => {
console.log(to)
let
toLogin = "/login",
toRegister = "/register",
toReset = "/reset",
toHome = "/home",
toActive = "/active";
let toMyInfo;
toMyInfo = "/myInfo";
let code = false;
document.title = to.meta.title;
if (to.path == toLogin || to.path == toRegister || to.path == toReset) {
......@@ -150,7 +168,7 @@ router.beforeEach((to, from, 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();
} else if (to.name == "recruit") {
code = to.params.code;
......
src/views/base/home/Home.vue
View file @ 076c13f1
......@@ -3,7 +3,7 @@
<div>
<el-carousel height="300px">
<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>
</div>
......@@ -39,7 +39,11 @@
</div>
</div>
</div>
<!--查看更多-->
<div class="flex line">
<div class="line"></div>
<span>查看更多</span>
</div>
<!-- 学生感想和体会 -->
<div>
<div class="home_title">
......@@ -53,13 +57,21 @@
{{item2}}
</div>
<div class="item_name">
<div>
<div class="name">
{{item.name}}
</div>
<div class="name_line">
</div>
</div>
</div>
</div>
<div>
<div class="item_text">
{{item.think}}
</div>
</div>
<div></div>
......@@ -71,15 +83,16 @@
<script>
import img from "../../../assets/img/recruit.png";
import banner from "../../../assets/img/Banner/banner@2x.png";
export default {
name: "Home",
data() {
return {
bannerlist: [{
// url: require("@/assets/img/Banner/banner@2x.png")
url: banner
}, {
// url: require("@/assets/img/Banner/banner@2x.png")
url: banner
}],
activeList: [
{
......@@ -155,7 +168,7 @@
tag: ['北京市第八中序', '2023南开历史营']
},
{
name: '同学',
name: '同学同学同学同学',
think: '2222222',
tag: ['北京市第八中序', '2023南开历史营']
},
......@@ -376,6 +389,22 @@
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 {
/*margin-top: 30px;*/
display: flex;
......@@ -383,13 +412,14 @@
font-size: 12px;
.reflections_item {
flex-basis: 31%;
flex-basis: 46%;
margin: 1.75% 0;
background-color: #ffffff;
height: 163px;
position: relative;
width: 200px;
&:nth-child(3n+2) {
&:nth-child(2n+2) {
margin: 1.75% 3.5%;
}
......@@ -397,7 +427,7 @@
display: flex;
position: absolute;
top: -10%;
margin-left: 10px;
margin-left: 8%;
.tag {
display: flex;
......@@ -407,7 +437,17 @@
}
.item_name {
display: flex;
align-items: end;
}
.name {
margin-bottom: 10px;
}
.name_line {
border-bottom: 2px solid #D7D7D7;
}
}
......
src/views/base/myInfo/index.vue 0 → 100644
View file @ 076c13f1
<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 @ 076c13f1
<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 @ 076c13f1
......@@ -29,11 +29,7 @@
<div class="camp_right" ref="rightBox">
<router-view
@getStatus="getStatus"
/>
</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