Skip to content

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

样式调整-lh

parent 529b0202
Show whitespace changes
Inline Side-by-side
Showing with 676 additions and 942 deletions
src/App.vue
View file @ c0d40e50
<template> <template>
<div id="app"> <div id="app">
<router-view /> <router-view/>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */
export default { export default {
name: "recruit", name: "recruit",
data() { data() {
return {}; return {};
}, },
created() { created() {
// window.localStorage.setItem(
// "index-identity",
// "c59086fdb37848e7a10765812d1da349"
// );
// this.getCam();
}, },
methods: { methods: {
// getCam() {
// getCam({}).then((res) => {
// console.log(res, "getCam");
// let root = document.querySelector(":root");
// root.style.setProperty("--color", res.data.system_color);
// root.style.setProperty("--bk_pic", res.data.background_picture); //当前营地的背景图
// //当前营地logo
// window.localStorage.setItem("system_logo", res.data.system_logo);
// window.localStorage.setItem(
// "doubt_code",
// res.data.fill_individual_Invitationcode
// ); //是否填写邀请码
// window.localStorage.setItem(
// "doubt_info",
// res.data.fill_individual_information
// ); //是否填写个人资料
// window.localStorage.setItem(
// "doubt_check",
// res.data.audit_individual_information
// ); //是否审核个人资料
// });
// },
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style lang="scss">
// @import "~a/css/base.css"; @import "a/scss/index";
#app { // @import "~a/css/base.css";
#app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
position: relative; position: relative;
height: 100%; height: 100vh;
background: #fff; background: #fff;
} background: #f8f8f8;
}
//滚动条的宽度
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 4px;
}
.el-dropdown-menu {
.el-dropdown-menu__item {
padding: 0 26px !important;
&:hover {
color: #ffffff !important;
background-color: var(--color) !important;
}
}
}
.el-message-box {
width: 360px !important;
.el-message-box__header {
.el-message-box__title {
color: red;
}
.el-message-box__close{
&:hover{
color: var(--color);
}
}
}
.el-button{
&:nth-child(1):hover{
color: #fff;
background-color: var(--color);
border-color: var(--color);
opacity: 0.6;
}
&:nth-child(2) {
color: #fff;
background-color: var(--color);
border-color: var(--color);
&:hover {
color: #fff;
background-color: var(--color);
border-color: var(--color);
opacity: 0.9;
}
}
}
}
</style> </style>
src/assets/scss/common.scss 0 → 100644
View file @ c0d40e50
.com-container{
width: 60%;
max-width: 1160px;
min-width: 1024px;
//min-width: 960px;
padding: 0 40px;
margin: 0 auto;
}
\ No newline at end of file
src/components/index/Footer.vue
View file @ c0d40e50
...@@ -2,37 +2,31 @@ ...@@ -2,37 +2,31 @@
<template> <template>
<!--底部--> <!--底部-->
<div class="footer"> <div class="footer">
<div class="content flex"> <div class="com-container content">
<div class="cc flex"> <ul class="contact_list">
<div class="info">
<ul class="contact_list flex">
<li> <li>
<i class="el-icon-message"></i <i class="el-icon-message"></i>
><span>考务邮箱</span>service@thussat.com <span>考务邮箱</span>service@thussat.com
</li> </li>
<li> <li>
<i class="el-icon-phone-outline"></i <i class="el-icon-phone-outline"></i>
><span>联系电话</span>010-56218127; <span>联系电话</span>010-56218127
</li> </li>
<li> <li>
<i class="el-icon-aim"></i><span>工作时间</span>周一至周五 09:00 - <i class="el-icon-aim"></i>
12:00, 14:00 - 18:00 <span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00
</li> </li>
</ul> </ul>
</div>
<div class="line"></div> <div class="line"></div>
<div class="copyRight"> <div class="copyRight">
<div> <div>
<a href="">Copyright © 2021 营地系统 版权所有</a> <a href="">Copyright © 2021 营地系统 版权所有</a>
<a target="_blank" href="https://beian.miit.gov.cn" <a target="_blank" href="https://beian.miit.gov.cn"
>京ICP备19058825号-3</a >京ICP备19058825号-3</a>
><a <a
target="_blank" target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034612" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034612"
> >京公网安备 11010802034612号</a>
京公网安备 11010802034612号</a
>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -40,82 +34,62 @@ ...@@ -40,82 +34,62 @@
</template> </template>
<script> <script>
/* eslint-disable */ export default {
export default {
name: "Footer", name: "Footer",
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex { @import "a/scss/common";
display: flex; .footer {
} font-family: PingFang SC;
.footer {
font-family: PingFangSC-Medium, PingFang SC;
font-size: 14px; font-size: 14px;
height: 170px; height: 169px;
background: #000000; background: #000000;
opacity: 0.9; opacity: 0.9;
line-height: 60px; line-height: 60px;
// text-align: center;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
.content { .content {
justify-content: center; .contact_list {
.cc { display: flex;
width: 85%; flex-flow: row;
justify-content: space-around;
align-items: center; align-items: center;
flex-direction: column; height: 88px;
} margin: 0;
} padding: 0;
.info { li{
font-weight: 500; font-size: 12px;
color: #ffffff; height: 14px;
line-height: 14px; line-height: 14px;
margin-top: 35px; font-family: PingFang SC;
width: 100%;
.contact_list {
padding: 0 !important;
// width: 61%;
// justify-content: flex-start;
// justify-content: space-between;
li {
margin-bottom: 30px;
height: 18px;
line-height: 18px;
font-size: 14px;
color: #e5e5e5;
font-weight: 500; font-weight: 500;
font-family: PingFangSC-Medium, PingFang SC; color: #FFFFFF;
list-style-type: none; list-style: none;
list-style-type: none; margin-right: 40px;
margin-right: 20px; span{
&:last-child { margin: 0 15px 0 7px;
margin-bottom: 0;
}
i {
opacity: 0.8;
font-size: 18px;
vertical-align: top;
font-weight: bold;
}
span {
margin: 0 5px 0 5px;
line-height: 18px;
} }
&:last-child{
margin-right: 0;
} }
} }
} }
} .line {
.line {
width: 100%; width: 100%;
height: 1px; height: 1px;
background: #ffffff; background: #ffffff;
opacity: 0.2; opacity: 0.2;
// margin-top: 50px; }
} .copyRight {
a { display: flex;
flex-flow: row;
align-items: center;
height: 62px;
margin: 0;
padding: 0;
a {
font-size: 12px;
font-weight: 400; font-weight: 400;
margin-right: 20px; margin-right: 20px;
color: #333333; color: #333333;
...@@ -127,8 +101,8 @@ a { ...@@ -127,8 +101,8 @@ a {
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.copyRight { }
width: 100%; }
} }
</style> </style>
src/components/index/Header.vue
View file @ c0d40e50
<template> <template>
<div class="Header"> <div class="Header">
<div class="H_content flex"> <div class="H_content com-container">
<div class="cc flex">
<div class="image"> <div class="image">
<img :src="system_logo" alt="" /> <img :src="system_logo" alt="" />
</div> </div>
<div class="right"> <div class="right">
<span @click="toLogin">登录</span> <span @mouseenter="onMouserEnter(false)" :class="isHover?'':'is-hover'" @click="toLogin">登录</span>
<span @click="toRegister">注册</span> <span @mouseenter="onMouserEnter(true)" :class="isHover?'is-hover':''" @click="toRegister">注册</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -19,6 +17,7 @@ export default { ...@@ -19,6 +17,7 @@ export default {
name: "Header", name: "Header",
data() { data() {
return { return {
isHover: true,
system_logo: window.localStorage.getItem("system_logo"), system_logo: window.localStorage.getItem("system_logo"),
}; };
}, },
...@@ -30,29 +29,24 @@ export default { ...@@ -30,29 +29,24 @@ export default {
toRegister() { toRegister() {
this.$router.replace({ name: "index-register" }); this.$router.replace({ name: "index-register" });
}, },
onMouserEnter(val){
this.isHover = val;
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex { @import "a/scss/common";
display: flex; .Header {
} font-family: PingFang SC;
.Header {
font-family: PingFangSC-Medium, PingFang SC;
height: 80px; height: 80px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.H_content { .H_content {
justify-content: center; height: 100%;
.cc { display: flex;
width: 100%; flex-flow: row;
justify-content: space-around;
align-items: center; align-items: center;
div { justify-content: space-between;
flex-direction: column;
}
}
}
.image img { .image img {
width: 318px; width: 318px;
height: 62px; height: 62px;
...@@ -63,16 +57,19 @@ export default { ...@@ -63,16 +57,19 @@ export default {
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
line-height: 21px; line-height: 21px;
}
:last-child {
font-weight: 500;
color: var(--color);
line-height: 21px;
padding: 10px 36px; padding: 10px 36px;
border-radius: 4px; border-radius: 4px;
border: 2px solid var(--color); border: 2px solid transparent;
margin-left: 50px; &:last-child {
margin-left: 10px;
}
&.is-hover{
cursor: pointer;
color: var(--color);
border-color: var(--color);
}
}
}
} }
} }
}
</style> </style>
src/components/index/SignUp/Header.vue
View file @ c0d40e50
<template> <template>
<div class="Header"> <div class="Header">
<div class="H_content flex"> <div class="H_content com-container">
<div class="cc flex">
<div class="image" @click="toRecruit"> <div class="image" @click="toRecruit">
<img :src="system_logo" alt="" /> <img :src="system_logo" alt=""/>
</div> </div>
<div class="right"> <div class="right">
<el-dropdown @command="handleCommand" trigger="click"> <el-dropdown @command="handleCommand" trigger="click">
<div class="el-dropdown-link flex"> <div class="el-dropdown-link">
<div> <img src="@/assets/img/default.svg" class="img_user"/>
<img src="@/assets/img/default.svg" class="img_user" />
</div>
<div style="line-height: 64px">
<span class="phone">{{ phone }}</span> <span class="phone">{{ phone }}</span>
<i class="el-icon-arrow-down el-icon--right"></i> <i class="el-icon-arrow-down el-icon--right"></i>
</div> </div>
</div>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="1">退出</el-dropdown-item> <el-dropdown-item command="1">退出</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
...@@ -24,12 +18,12 @@ ...@@ -24,12 +18,12 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
import { logout } from "r/index/login"; import {logout} from "r/index/login";
export default {
export default {
name: "Header", name: "Header",
data() { data() {
return { return {
...@@ -60,83 +54,68 @@ export default { ...@@ -60,83 +54,68 @@ export default {
window.localStorage.clear(); window.localStorage.clear();
this.$store.state.token = ""; this.$store.state.token = "";
// 使用编程式导航跳转到登录页面 // 使用编程式导航跳转到登录页面
this.$router.replace({ name: "recruit" }); this.$router.replace({name: "recruit"});
}, },
// 点击图片跳转到招生简章页面 // 点击图片跳转到招生简章页面
toRecruit() { toRecruit() {
// 清除本地的 token // 清除本地的 token
window.localStorage.clear(); window.localStorage.clear();
this.$store.state.token = ""; this.$store.state.token = "";
this.$router.replace({ name: "recruit" }); this.$router.replace({name: "recruit"});
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex { @import "a/scss/common";
display: flex;
} .Header {
.Header { font-family: PingFang SC;
font-family: PingFangSC-Medium, PingFang SC;
height: 80px; height: 80px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.H_content { .H_content {
justify-content: center; height: 100%;
.cc { display: flex;
width: 100%; flex-flow: row;
justify-content: space-around; align-items: center;
} justify-content: space-between;
}
.image img { .image img {
width: 318px; width: 318px;
height: 62px; height: 62px;
cursor: pointer;
} }
.right { .right {
.el-dropdown { height: 80px;
float: right;
&:hover { ::v-deep .el-dropdown {
cursor: pointer; height: 80px;
}
.el-dropdown-link {
height: 80px;
display: flex;
flex-flow: row;
align-items: center;
.img_user { .img_user {
width: 34px; width: 34px;
height: 34px; height: 34px;
background-color: #d8d8d8; background-color: #d8d8d8;
border-radius: 50%; border-radius: 50%;
float: left;
margin: 15px 0 0 0;
} }
.phone { .phone {
margin: 0 10px 0 12px; margin: 0 10px 0 12px;
} }
} }
}
::v-deep .el-dropdown-menu__item {
padding: 0 26 px !important;
}
::v-deep .el-dropdown-item {
display: inline-block;
}
::v-deep .el-dropdown-menu__item:hover { &:hover {
color: #ffffff; cursor: pointer;
background-color: var(--color);
} }
::v-deep .el-message-box {
width: 1000px !important;
.el-message-box__header {
.el-message-box__title {
color: red !important;
} }
} }
.el-button--primary {
color: #fff;
background-color: var(--color);
border-color: var(--color);
} }
} }
}
</style> </style>
src/router/index.js
View file @ c0d40e50
...@@ -62,6 +62,11 @@ router.onError((error) => { ...@@ -62,6 +62,11 @@ router.onError((error) => {
router.replace(targetPath) router.replace(targetPath)
} }
}) })
// 页面跳转之后页面回滚到顶部
router.afterEach((to, from, next) => {
window.scrollTo(0, 0)
});
// router.beforeEach((to, from, next) => { // router.beforeEach((to, from, next) => {
// // 记录上一页 // // 记录上一页
// if (from) { // if (from) {
......
src/views/index/camp/Index.vue
View file @ c0d40e50
<template> <template>
<div class="camp-index"> <div class="camp-index">
<Header> </Header> <el-header height="104px">
<div class="content flex"> <Header></Header>
<div class="cc flex"> <div class="bg-top"></div>
</el-header>
<div class="com-container">
<div class="index-container">
<div class="camp_left"> <div class="camp_left">
<ul class="camp_left_box"> <ul class="camp_left_box" ref="leftBox" :class="{
'is-fixed':isPosition==1,
'is-absolute':isPosition==2,
}">
<li @click="ToSignUp" :class="type == 1 ? 'active' : ''"> <li @click="ToSignUp" :class="type == 1 ? 'active' : ''">
<img src="@/assets/img/signUp/icon-bm.png" />营地报名 <img src="@/assets/img/signUp/icon-bm.png"/>营地报名
</li> </li>
<li @click="ToHomework" :class="type == 2 ? 'active' : ''"> <li @click="ToHomework" :class="type == 2 ? 'active' : ''">
<img src="@/assets/img/signUp/icon-zs.png" />营地作业 <img src="@/assets/img/signUp/icon-zs.png"/>营地作业
</li> </li>
<li @click="ToCertificate" :class="type == 3 ? 'active' : ''"> <li @click="ToCertificate" :class="type == 3 ? 'active' : ''">
<img src="@/assets/img/signUp/icon-zy.png" />营地证书 <img src="@/assets/img/signUp/icon-zy.png"/>营地证书
</li> </li>
</ul> </ul>
</div> </div>
<div class="camp_right"> <div class="camp_right" ref="rightBox">
<router-view /> <router-view/>
</div> </div>
</div> </div>
</div> </div>
<Footer></Footer>
<Footer> </Footer>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ import Header from "@/components/index/SignUp/Header.vue";
import Header from "@/components/index/SignUp/Header.vue"; import Footer from "@/components/index/Footer.vue";
import Footer from "@/components/index/Footer.vue";
export default { export default {
name: "campIndex", name: "campIndex",
components: { components: {
Header, Header,
...@@ -40,79 +45,114 @@ export default { ...@@ -40,79 +45,114 @@ export default {
data() { data() {
return { return {
type: 1, type: 1,
isPosition: 0,// 左侧box是否浮动
pageYOffset: 0,// 左侧box浮动时，滚动的高度
scorllHeight: 0,// 最大滚动高度
}; };
}, },
mounted() {
window.addEventListener('scroll', this.handleScrollX, true);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScrollX, true);
},
methods: { methods: {
// 页面滚动事件
handleScrollX() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
let refLeft = this.$refs['leftBox'];
let refRight = this.$refs['rightBox'];
if (top > 0) {
if (this.isPosition == 0) {
this.scorllHeight = refRight.offsetHeight - refLeft.offsetHeight;
}
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;
}
}
},
ToSignUp() { ToSignUp() {
this.$router.replace({ name: "index-signUp" }); this.$router.replace({name: "index-signUp"});
this.type = 1; this.type = 1;
}, },
ToHomework() { ToHomework() {
this.$router.replace({ name: "index-homework" }); this.$router.replace({name: "index-homework"});
this.type = 2; this.type = 2;
}, },
ToCertificate() { ToCertificate() {
this.$router.replace({ name: "index-certificate" }); this.$router.replace({name: "index-certificate"});
this.type = 3; this.type = 3;
}, },
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.camp-index { @import "a/scss/common";
background: #f8f8f8;
.content { .camp-index {
justify-content: center;
.cc {
width: 60%;
justify-content: space-around;
// align-items: center;
margin: 30px 0 50px 0;
}
}
.tab {
width: 280px;
height: 320px;
background: #ffffff;
position: relative;
top: 0;
// position: relative;
// top: -544px;
li {
height: 52px;
background: #f8f8f8; background: #f8f8f8;
.el-header {
position: fixed;
width: 100%;
padding: 0;
background-color: #ffffff;
z-index: 10000;
.bg-top {
height: 24px;
background-color: #f8f8f8;
} }
} }
.index-container {
padding: 104px 0 70px 0;
display: flex;
flex-flow: row;
.camp_left { .camp_left {
position: relative; position: relative;
width: 24%; width: 24%;
max-width: 280px; max-width: 280px;
min-width: 240px; min-width: 200px;
/*height: 340px;*/
border-radius: 8px; border-radius: 8px;
margin-right: 30px; margin-right: 24px;
.camp_left_box { .camp_left_box {
max-width: 280px; max-width: 280px;
min-width: 240px; min-width: 200px;
height: 300px; height: 300px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 8px; border-radius: 8px;
padding: 20px 0; padding: 20px 0;
margin: 0; margin: 0;
&.is-fixed { &.is-fixed {
position: fixed; position: fixed;
top: 92px; top: 104px;
width: 24%; width: 14.4%;
max-width: 280px; max-width: 280px;
min-width: 240px; min-width: 216px;
} }
&.is-absolute { &.is-absolute {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
li { li {
position: relative; position: relative;
padding: 0 23px; padding: 0 23px;
...@@ -121,6 +161,7 @@ export default { ...@@ -121,6 +161,7 @@ export default {
margin: 10px 0; margin: 10px 0;
font-size: 15px; font-size: 15px;
list-style: none; list-style: none;
img { img {
vertical-align: middle; vertical-align: middle;
margin: -3px 8px 0 0; margin: -3px 8px 0 0;
...@@ -131,10 +172,17 @@ export default { ...@@ -131,10 +172,17 @@ export default {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: #F8F8F8; background-color: #F8F8F8;
// border-right: 4px solid #3c0664;
} }
} }
} }
} }
}
.camp_right {
flex: 1;
border-radius: 8px;
background-color: #ffffff;
}
}
}
</style> </style>
src/views/index/camp/SignUp.vue
View file @ c0d40e50
...@@ -146,8 +146,8 @@ export default { ...@@ -146,8 +146,8 @@ export default {
} }
.signUp { .signUp {
background: #ffffff; /*background: #ffffff;*/
width: 856px; /*width: 856px;*/
.signUp_titile { .signUp_titile {
font-size: 24px; font-size: 24px;
font-weight: 500; font-weight: 500;
......
src/views/index/login/Index.vue
View file @ c0d40e50
<template> <template>
<div class="login-index"> <div class="login-index">
<div class="ConDivContent_bg"> <div class="big-img">
<img :src="bigImg" />
</div>
<div class="big-right">
<div class="info-box">
<router-view /> <router-view />
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
/* eslint-disable */
export default { export default {
name: "loginIndex", name: "loginIndex",
data() { data() {
return { return {
bigImg: window.localStorage.getItem('bk_pic')
}; };
}, },
created() { created() {
this.$emit("getStatus", false); let bk_pic = window.localStorage.getItem('bk_pic');
if(bk_pic){
}, this.bigImg = bk_pic;
methods: { }
this.$emit("getStatus", false);
}, },
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.login-index { .login-index {
// height: 1080px; position: relative;
min-width: 1104px;
background: #f8f8f8; background: #f8f8f8;
.ConDivContent_bg { display: flex;
height: 1080px; flex-flow: row;
background: url("../../../assets/img/login/left@2x.png") no-repeat; .big-img{
background-size: 100% 100%; width: (500/1920*100%);
width: 30%; min-width: 350px;
/*height: 100%;*/
img{
width: 100%;
/*height: 100%;*/
}
}
.big-right{
flex: 1;
position: relative;
.info-box{
width: 520px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
} }
// @media screen and (max-width: 1600px) {
// .ConDivContent_bg {
// max-height: 600px;
// }
// }
} }
</style> </style>
src/views/index/login/Login.vue
View file @ c0d40e50
<template> <template>
<div>
<div style="border: none">
<div class="container"> <div class="container">
<div class="title">账号密码登录</div> <div class="title">账号密码登录</div>
<div class="line"></div> <div class="line"></div>
...@@ -59,12 +57,9 @@ ...@@ -59,12 +57,9 @@
</div> </div>
</el-form> </el-form>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
/* eslint-disable */
import { login } from "r/index/login"; import { login } from "r/index/login";
import { mobileCheck } from "@/common/utils.js"; import { mobileCheck } from "@/common/utils.js";
...@@ -184,109 +179,12 @@ export default { ...@@ -184,109 +179,12 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 内容区域
.box_content {
.content {
max-width: 1150px;
margin: 40px auto;
padding: 0 50px;
overflow: auto;
.floatL {
float: left;
width: 670px;
h3 {
font-size: 20px;
color: #4c4c4c;
font-weight: inherit;
padding-bottom: 15px;
margin-bottom: 23px;
border-bottom: 4px solid #e0823d;
}
ul {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
a {
display: inline-block;
width: 100%;
font-size: 16px;
color: #34538b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.ContentLReg {
height: 60px;
color: #333333;
font-size: 14px;
span {
cursor: pointer;
color: #563279;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
}
.img_box {
width: 100%;
height: 156px;
text-align: center;
img {
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.floatR {
float: right;
width: 374px;
ul {
margin-top: 36px;
margin-left: 87px;
li {
font-size: 16px;
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 70px;
margin-bottom: 35px;
// &:nth-child(1) {
// background: url("../../../assets/images/weidu.png") no-repeat 0px
// center;
// }
// &:nth-child(2) {
// background: url("../../../assets/images/fangshi.png") no-repeat 0px
// center;
// }
// &:nth-child(3) {
// background: url("../../../assets/images/xingtai.png") no-repeat 0px
// center;
// }
}
}
}
}
}
.container { .container {
width: 440px;
// height: 640px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
position: absolute; padding: 40px 60px;
top: 50%;
right: 18%;
// left: 10%;
transform: translate(0, -50%);
padding: 60px;
margin-top: 0; margin-top: 0;
// background: url("../../../assets/images/loginbgp.png") no-repeat 0 center;
overflow: hidden; overflow: hidden;
.title { .title {
margin: 19px 0 6px 0; margin: 19px 0 6px 0;
...@@ -385,19 +283,4 @@ export default { ...@@ -385,19 +283,4 @@ export default {
} }
} }
} }
@media screen and (max-width: 1601px) {
.container {
right: 18%;
}
}
@media screen and (max-width: 1501px) {
.container {
right: 16%;
}
}
@media screen and (max-width: 1401px) {
.container {
right: 14%;
}
}
</style> </style>
src/views/index/login/Register.vue
View file @ c0d40e50
...@@ -276,121 +276,13 @@ export default { ...@@ -276,121 +276,13 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 内容区域
.box_content {
.content {
max-width: 1150px;
margin: 40px auto;
padding: 0 50px;
overflow: auto;
.floatL {
float: left;
width: 670px;
h3 {
font-size: 20px;
color: #4c4c4c;
font-weight: inherit;
padding-bottom: 15px;
margin-bottom: 23px;
border-bottom: 4px solid #e0823d;
}
ul {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
a {
display: inline-block;
width: 100%;
font-size: 16px;
color: #34538b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.ContentLReg {
height: 60px;
color: #333333;
font-size: 14px;
span {
cursor: pointer;
color: #563279;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
}
.img_box {
width: 100%;
height: 156px;
text-align: center;
img {
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.floatR {
float: right;
width: 374px;
ul {
margin-top: 36px;
margin-left: 87px;
li {
font-size: 16px;
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 70px;
margin-bottom: 35px;
// &:nth-child(1) {
// background: url("../../../assets/images/weidu.png") no-repeat 0px
// center;
// }
// &:nth-child(2) {
// background: url("../../../assets/images/fangshi.png") no-repeat 0px
// center;
// }
// &:nth-child(3) {
// background: url("../../../assets/images/xingtai.png") no-repeat 0px
// center;
// }
}
}
}
}
}
// 注册输入 // 注册输入
.container { .container {
width: 440px;
// height: 640px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
position: absolute; padding: 40px 60px;
top: 50%;
right: 18%;
transform: translate(0, -50%);
padding: 60px;
margin-top: 0; margin-top: 0;
overflow: hidden; overflow: hidden;
......
src/views/index/login/Reset.vue
View file @ c0d40e50
...@@ -268,121 +268,13 @@ export default { ...@@ -268,121 +268,13 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// 内容区域
.box_content {
.content {
max-width: 1150px;
margin: 40px auto;
padding: 0 50px;
overflow: auto;
.floatL {
float: left;
width: 670px;
h3 {
font-size: 20px;
color: #4c4c4c;
font-weight: inherit;
padding-bottom: 15px;
margin-bottom: 23px;
border-bottom: 4px solid #e0823d;
}
ul {
li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ddd;
a {
display: inline-block;
width: 100%;
font-size: 16px;
color: #34538b;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
.ContentLReg {
height: 60px;
color: #333333;
font-size: 14px;
span {
cursor: pointer;
color: #563279;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
}
.img_box {
width: 100%;
height: 156px;
text-align: center;
img {
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.floatR {
float: right;
width: 374px;
ul {
margin-top: 36px;
margin-left: 87px;
li {
font-size: 16px;
width: 100%;
height: 45px;
line-height: 45px;
padding-left: 70px;
margin-bottom: 35px;
// &:nth-child(1) {
// background: url("../../../assets/images/weidu.png") no-repeat 0px
// center;
// }
// &:nth-child(2) {
// background: url("../../../assets/images/fangshi.png") no-repeat 0px
// center;
// }
// &:nth-child(3) {
// background: url("../../../assets/images/xingtai.png") no-repeat 0px
// center;
// }
}
}
}
}
}
// 注册输入 // 注册输入
.container { .container {
width: 440px;
// height: 640px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
border-radius: 8px; border-radius: 8px;
position: absolute; padding: 40px 60px;
top: 50%;
right: 18%;
transform: translate(0, -50%);
padding: 60px;
margin-top: 0; margin-top: 0;
overflow: hidden; overflow: hidden;
......
src/views/index/recruit/Index.vue
View file @ c0d40e50
<template> <template>
<div class="recruit"> <div class="recruit">
<div> <el-header height="104px">
<Header></Header> <Header></Header>
</div> <div class="bg-top"></div>
<div class="content flex"> </el-header>
<div class="cc flex"> <div class="com-container content">
<div class="title">2021年南开大学历史学科暑假营招生简章</div> <div class="title">2021年南开大学历史学科暑假营招生简章</div>
<div class="time">发布时间：2021-12-28</div> <div class="time">发布时间：2021-12-28</div>
<div class="part"> <div class="part">
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</p> </p>
</div> </div>
<div class="paper"> <div class="paper">
<img src="../../../assets/img/recruit.png" alt="" /> <img src="../../../assets/img/recruit.png" alt=""/>
</div> </div>
<div class="part"> <div class="part">
<span>第三部分</span> <span>第三部分</span>
...@@ -35,28 +35,26 @@ ...@@ -35,28 +35,26 @@
南开大学占地443.12万平方米，其中八里台校区占地121.60万平方米，津南校区占地245.89万平方米，泰达学院占地6.72万平方米。校舍建筑总面积195.19万平方米。按照“独立办学、紧密合作”的原则，与天津大学全面合作办学。 南开大学占地443.12万平方米，其中八里台校区占地121.60万平方米，津南校区占地245.89万平方米，泰达学院占地6.72万平方米。校舍建筑总面积195.19万平方米。按照“独立办学、紧密合作”的原则，与天津大学全面合作办学。
</p> </p>
</div> </div>
</div>
</div>
<div class="btn"> <div class="btn">
<el-button @click="toLogin()">立即报名 </el-button> <el-button @click="toLogin()">立即报名</el-button>
</div> </div>
<div>
<Footer></Footer>
</div> </div>
<Footer></Footer>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */
import Header from "@/components/index/Header.vue";
import Footer from "@/components/index/Footer.vue";
import { getCam } from "r/index/login";
export default { import Header from "@/components/index/Header.vue";
import Footer from "@/components/index/Footer.vue";
import {getCam} from "r/index/login";
export default {
name: "recruit", name: "recruit",
data() { data() {
return {}; return {};
}, },
created(){ created() {
window.localStorage.setItem( window.localStorage.setItem(
"index-identity", "index-identity",
"c59086fdb37848e7a10765812d1da349" "c59086fdb37848e7a10765812d1da349"
...@@ -65,7 +63,7 @@ export default { ...@@ -65,7 +63,7 @@ export default {
}, },
methods: { methods: {
toLogin() { toLogin() {
this.$router.replace({ name: "index-login" }); this.$router.replace({name: "index-login"});
}, },
getCam() { getCam() {
getCam({}).then((res) => { getCam({}).then((res) => {
...@@ -73,6 +71,7 @@ export default { ...@@ -73,6 +71,7 @@ export default {
let root = document.querySelector(":root"); let root = document.querySelector(":root");
root.style.setProperty("--color", res.data.system_color); root.style.setProperty("--color", res.data.system_color);
root.style.setProperty("--bk_pic", res.data.background_picture); //当前营地的背景图 root.style.setProperty("--bk_pic", res.data.background_picture); //当前营地的背景图
window.localStorage.setItem('bk_pic',res.data.background_picture)
//当前营地logo //当前营地logo
window.localStorage.setItem("system_logo", res.data.system_logo); window.localStorage.setItem("system_logo", res.data.system_logo);
window.localStorage.setItem( window.localStorage.setItem(
...@@ -94,46 +93,55 @@ export default { ...@@ -94,46 +93,55 @@ export default {
Header, Header,
Footer, Footer,
}, },
}; };
</script> </script>
<style lang="scss" > <style lang="scss">
.flex { @import "a/scss/common";
display: flex;
}
.recruit {
font-family: PingFangSC-Medium, PingFang SC;
flex-direction: column; .recruit {
.content { font-family: PingFang SC;
justify-content: center; .el-header {
.cc { position: fixed;
width: 60%; width: 100%;
justify-content: space-around; padding: 0;
align-items: center; background-color: #ffffff;
flex-direction: column; z-index: 10000;
}
.bg-top {
height: 24px;
background-color: #f8f8f8;
}
}
.content {
.title { .title {
margin: 90px 0 20px 0; padding: 170px 0 20px 0;
font-size: 34px; font-size: 34px;
text-align: center; text-align: center;
} }
.time { .time {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #828282; color: #828282;
text-align: center; text-align: center;
} }
.paper img {
.paper{
text-align: center;
margin: 8px 0 24px 0;
img {
width: 654px; width: 654px;
height: 368px; height: 368px;
} }
}
.part { .part {
span { span {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
} }
p { p {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -141,14 +149,15 @@ export default { ...@@ -141,14 +149,15 @@ export default {
line-height: 32px; line-height: 32px;
} }
} }
}
.btn { .btn {
text-align: center; text-align: center;
padding-bottom: 104px; padding-bottom: 104px;
.el-button { .el-button {
width: 200px; width: 200px;
height: 50px; height: 50px;
background:var(--color); background: var(--color);
border-radius: 4px; border-radius: 4px;
opacity: 0.8; opacity: 0.8;
line-height: 50px; line-height: 50px;
...@@ -159,5 +168,6 @@ export default { ...@@ -159,5 +168,6 @@ export default {
margin: 30px 0 0 0; margin: 30px 0 0 0;
} }
} }
} }
}
</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