Skip to content

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

营地2.0-修改样式

parent cec35c5a
Show whitespace changes
Inline Side-by-side
Showing with 379 additions and 143 deletions
src/assets/scss/active/activeList.scss
View file @ cabe800e
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
flex-flow: wrap; flex-flow: wrap;
.active-list-item { .active-list-item {
flex-basis: 31%; flex-basis: 23.3%;
margin: 1.75% 0; margin: 1% 0;
-webkit-transform: translate3d(0, 3em, 0); -webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0); transform: translate3d(0, 3em, 0);
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
...@@ -43,9 +43,12 @@ ...@@ -43,9 +43,12 @@
animation: fade ease-out 0.5s forwards; animation: fade ease-out 0.5s forwards;
-webkit-animation-delay: .3s; -webkit-animation-delay: .3s;
animation-delay: .3s; animation-delay: .3s;
margin: 1% 2% 1% 0;
border: 1px solid #cccccc;
border-radius: 4px;
&:nth-child(3n+2) { &:nth-child(4n+4) {
margin: 1.75% 3.5%; margin: 1% 0;
} }
.inner { .inner {
...@@ -62,11 +65,12 @@ ...@@ -62,11 +65,12 @@
.active-list-item-bg { .active-list-item-bg {
width: 100%; width: 100%;
height: 13.6vw; height: 10.37vw;
min-height: 163px; min-height: 142px;
overflow: hidden; overflow: hidden;
background-color: #D8D8D8; background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px;
border-bottom: 1px solid #cccccc;
::v-deep .el-image { ::v-deep .el-image {
width: 100%; width: 100%;
...@@ -97,16 +101,11 @@ ...@@ -97,16 +101,11 @@
font-weight: 400; font-weight: 400;
.active-list-item-cont-header { .active-list-item-cont-header {
//display: flex;
//flex-flow: row;
//align-items: center;
line-height: 28px; line-height: 28px;
//margin: 0.8vw 0 0.4vw;
.label { .label {
height: 28px; height: 26px;
font-size: 12px; font-size: 12px;
margin: 0.8vw 0 0.4vw; margin: 0.2vw 0 0.4vw;
> span { > span {
padding: 5px 10px; padding: 5px 10px;
...@@ -120,17 +119,17 @@ ...@@ -120,17 +119,17 @@
.title { .title {
height: 28px; height: 28px;
font-size: 18px; font-size: 17px;
font-weight: 500; font-weight: 500;
margin: 0.4vw 0 0.4vw; margin: 0.2vw 0;
color: #000000; color: #000000;
} }
} }
.active-list-item-cont-txt1 { .active-list-item-cont-txt1 {
font-size: 16px; font-size: 14px;
line-height: 28px; line-height: 24px;
margin: 0.4vw 0; margin: 0.2vw 0;
.sign-box { .sign-box {
display: inline-block; display: inline-block;
...@@ -161,16 +160,17 @@ ...@@ -161,16 +160,17 @@
.active-list-item-cont-txt2 { .active-list-item-cont-txt2 {
font-size: 14px; font-size: 14px;
color: #999999; //color: #999999;
color: #333333;
line-height: 24px; line-height: 24px;
margin: 0.4vw 0; margin: 0.2vw 0;
} }
.active-list-item-cont-txt3 { .active-list-item-cont-txt3 {
font-size: 15px; font-size: 14px;
color: #EC808D; color: #FEB77A;
line-height: 28px; line-height: 24px;
margin: 0.4vw 0; margin: 0.2vw 0;
} }
.active-list-item-cont-bottom { .active-list-item-cont-bottom {
...@@ -179,11 +179,12 @@ ...@@ -179,11 +179,12 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid #cccccc; border-top: 1px solid #cccccc;
margin-top: 1vw; margin-top: 0.5vw;
padding: 1vw 0; padding: 0.5vw 0;
font-size: 14px; font-size: 14px;
line-height: 32px; line-height: 28px;
cursor: pointer; cursor: pointer;
color: #999999;
.el-icon-right { .el-icon-right {
font-size: 18px; font-size: 18px;
......
src/assets/scss/active/activeList2.scss 0 → 100644
View file @ cabe800e
@-webkit-keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
@keyframes fade {
0% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
opacity: 0
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1
}
}
.active-list {
margin-top: 30px;
display: flex;
flex-flow: wrap;
.active-list-item {
flex-basis: 31%;
margin: 1.75% 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
opacity: 0;
-webkit-animation: fade ease-out 0.5s forwards;
animation: fade ease-out 0.5s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
&:nth-child(3n+2) {
margin: 1.75% 3.5%;
}
.inner {
border-radius: 4px;
overflow: hidden;
max-width: none;
background: #fff;
box-sizing: border-box;
transition: all ease-out 0.2s;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
.active-list-item-bg {
width: 100%;
height: 13.6vw;
min-height: 163px;
overflow: hidden;
background-color: #D8D8D8;
border-radius: 4px 4px 0px 0px;
::v-deep .el-image {
width: 100%;
height: 100%;
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-list-item-cont {
flex: 1;
padding: 10px 20px 0;
background-color: #ffffff;
border-radius: 0 0 4px 4px;
font-family: PingFang SC;
font-weight: 400;
.active-list-item-cont-header {
//display: flex;
//flex-flow: row;
//align-items: center;
line-height: 28px;
//margin: 0.8vw 0 0.4vw;
.label {
height: 28px;
font-size: 12px;
margin: 0.8vw 0 0.4vw;
> span {
padding: 5px 10px;
border-radius: 8px;
color: #ffffff;
background-color: var(--all_color);
margin-right: 5px;
vertical-align: middle;
}
}
.title {
height: 28px;
font-size: 18px;
font-weight: 500;
margin: 0.4vw 0 0.4vw;
color: #000000;
}
}
.active-list-item-cont-txt1 {
font-size: 16px;
line-height: 28px;
margin: 0.4vw 0;
.sign-box {
display: inline-block;
&::after {
content: '|';
color: #333333;
margin: 0 5px;
}
&:last-child {
&::after {
content: '';
margin: 0;
}
}
.sign {
display: inline-block;
padding: 0 5px 0 0;
&:last-child {
padding-right: 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: 28px;
margin: 0.4vw 0;
}
.active-list-item-cont-bottom {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cccccc;
margin-top: 1vw;
padding: 1vw 0;
font-size: 14px;
line-height: 32px;
cursor: pointer;
.el-icon-right {
font-size: 18px;
}
&:hover {
color: var(--all_color);
}
}
}
}
&:hover {
.inner {
box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);
.active-list-item-bg {
::v-deep .el-image {
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);
}
}
}
}
}
}
src/assets/scss/common.scss
View file @ cabe800e
.com-container{ .com-container{
width: 80%; width: 80%;
max-width: 1576px; max-width: 1620px;
min-width: 1050px; min-width: 1050px;
padding: 0 50px; padding: 0 50px;
margin: 0 auto; margin: 0 auto;
......
src/assets/scss/index.scss
View file @ cabe800e
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
// var(--color) 用于引用 // var(--color) 用于引用
// 在页面样式的引用中，你将会看到 // 在页面样式的引用中，你将会看到
:root { :root {
--color: #436EF3; --color: #4FACFE;
--bk_pic: #436EF3; --bk_pic: #4FACFE;
--logo: #436EF3; --logo: #4FACFE;
--all_color: #436EF3; --all_color: #4FACFE;
} }
body{ body{
font-family: "PingFang SC"; font-family: "PingFang SC";
......
src/components/Footer.vue
View file @ cabe800e
...@@ -2,76 +2,96 @@ ...@@ -2,76 +2,96 @@
<template> <template>
<!--底部--> <!--底部-->
<div class="footer"> <div class="footer">
<div class="com-container content"> <div class="content">
<div class="com-container">
<div class="contact_us"> <div class="contact_us">
<div class="logo-img">
<img src="../assets/img/logo_f.png"/>
</div>
<div class="contact_list"> <div class="contact_list">
<div class="contact_list_title">联系我们</div>
<div class="contact_list_item"> <div class="contact_list_item">
<i class="el-icon-message"></i> <!--<i class="el-icon-message"></i>-->
<span>联系邮箱</span>service@campcenter.cn <span>联系邮箱：</span>service@campcenter.cn
</div> </div>
<div class="contact_list_item"> <!--<div class="contact_list_item">
<i class="el-icon-aim"></i> <i class="el-icon-aim"></i>
<span>工作时间</span>周一至周五 09:00 - 12:00，14:00 - 18:00 <span>工作时间:</span>周一至周五 09:00 - 12:00，14:00 - 18:00
</div>-->
</div> </div>
</div> </div>
<div class="contact_qr"> <div class="contact_qr">
<div class="contact_qr_item"> <div class="contact_qr_item">
<img src="../assets/img/footer/service.png"/> <img src="../assets/img/footer/qr_1.png"/>
<div class="name">大中衔接人才培养</div> <div class="name">大中衔接人才培养</div>
</div> </div>
<div class="contact_qr_item"> <div class="contact_qr_item">
<img src="../assets/img/footer/wb.png"/> <img src="../assets/img/footer/qr_2.png"/>
<div class="name">大中贯通人才培养</div> <div class="name">大中贯通人才培养</div>
</div> </div>
</div> </div>
</div> </div>
<div class="line"></div> </div>
<div class="copyRight"> <div class="copyRight">
<div> <div class="com-container">
<a href="">Copyright © 2021 营地系统 版权所有</a> <a href="">Copyright © 2021 营地系统 版权所有</a>
<!-- <a target="_blank" href="https://beian.miit.gov.cn"
>京ICP备19058825号-3</a>
<a
target="_blank"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034612"
>京公网安备 11010802034612号</a> -->
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */ /* eslint-disable */
export default { export default {
name: "Footer", name: "Footer",
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "a/scss/common"; @import "a/scss/common";
.footer {
font-family: PingFang SC; .footer {
font-size: 14px; font-size: 14px;
/*height: 169px;*/
background: #000000;
opacity: 0.9; opacity: 0.9;
line-height: 60px; font-family: PingFang SC;
border-top: 1px solid #ccc;
.content { .content {
.contact_us{ padding: 40px 0 30px;
background: linear-gradient(to right, #44A7ED 0%, #1CCAED 80%);
.com-container {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 20px 0 10px; .contact_us {
flex: 1.3;
display: flex;
flex-flow: row;
justify-content: space-between;
.logo-img {
height: 40px;
> img {
height: 40px;
}
}
.contact_list { .contact_list {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: flex-start; align-items: flex-start;
margin: 0; margin: 0;
padding: 0; padding: 0;
.contact_list_title {
font-size: 20px;
line-height: 40px;
color: #ffffff;
margin-bottom: 10px;
}
.contact_list_item { .contact_list_item {
font-size: 14px; font-size: 14px;
height: 24px; height: 24px;
...@@ -79,30 +99,32 @@ export default { ...@@ -79,30 +99,32 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
span {
margin: 0 15px 0 7px;
} }
&:last-child {
margin-right: 0;
} }
} }
}
.contact_qr{ .contact_qr {
flex: 1;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
.contact_qr_item{ justify-content: flex-end;
.contact_qr_item {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: 20px; margin-left: 20px;
img{
width: 88px; img {
width: 100px;
} }
.name{
.name {
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
margin: 10px 0;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
...@@ -111,34 +133,28 @@ export default { ...@@ -111,34 +133,28 @@ export default {
} }
} }
} }
.line {
width: 100%;
height: 1px;
background: #ffffff;
opacity: 0.2;
} }
.copyRight { .copyRight {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
align-items: center; align-items: center;
height: 62px;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #005897;
line-height: 30px;
a { a {
font-size: 14px; font-size: 12px;
font-weight: 400; font-weight: 400;
margin-right: 20px; margin-right: 20px;
color: #FFFFFF; color: #cccccc;
text-decoration: none; text-decoration: none;
img {
width: 15px;
margin-top: -3px;
}
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
} }
}
</style> </style>
src/components/Header.vue
View file @ cabe800e
...@@ -46,7 +46,7 @@ ...@@ -46,7 +46,7 @@
</template> </template>
<script> <script>
import {logout} from "r/index/login"; import {logout} from "r/index/login";
import logoImg from "../assets/img/logo_base.png"; import logoImg from "../assets/img/logo_h.png";
export default { export default {
name: "Header", name: "Header",
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
this.$router.push(key); this.$router.push(key);
let root = document.querySelector(":root"); let root = document.querySelector(":root");
root.style.setProperty("--color", "#436EF3"); root.style.setProperty("--color", "#4FACFE");
// let code = this.$store.state.indexIdentity; // let code = this.$store.state.indexIdentity;
// window.localStorage.setItem("system_logo" + code, this.all_logo); // window.localStorage.setItem("system_logo" + code, this.all_logo);
}, },
...@@ -82,7 +82,7 @@ ...@@ -82,7 +82,7 @@
handleCommand(command) { handleCommand(command) {
if (command == 1) { if (command == 1) {
let root = document.querySelector(":root"); let root = document.querySelector(":root");
root.style.setProperty("--color", "#436EF3"); root.style.setProperty("--color", "#4FACFE");
this.toCenter(); this.toCenter();
} }
if (command == 2) { if (command == 2) {
...@@ -203,7 +203,7 @@ ...@@ -203,7 +203,7 @@
.image{ .image{
img { img {
height: 50px; height: 40px;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
} }
......
src/router/index.js
View file @ cabe800e
...@@ -197,7 +197,6 @@ function checkCam(code, cb) { ...@@ -197,7 +197,6 @@ function checkCam(code, cb) {
} }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to, from)
if (from.fullPath != '/' && from.fullPath != '/baseLogin' && from.fullPath != '/baseRegister') { if (from.fullPath != '/' && from.fullPath != '/baseLogin' && from.fullPath != '/baseRegister') {
store.commit('setPreviousPath', from.fullPath); store.commit('setPreviousPath', from.fullPath);
} }
......
src/store/time.js
View file @ cabe800e
...@@ -45,12 +45,12 @@ export function formatYMD(data) { ...@@ -45,12 +45,12 @@ export function formatYMD(data) {
return (y + "-" + add0(m) + "-" + add0(d)); return (y + "-" + add0(m) + "-" + add0(d));
} }
// 2023年1月1日1点 // 2023年1月1日
export function formatYMDChina(data) { export function formatYMDChina(data) {
let time = new Date(data); let time = new Date(data);
let y = time.getFullYear(); let y = time.getFullYear();
let m = time.getMonth() + 1; let m = time.getMonth() + 1;
let d = time.getDate(); let d = time.getDate();
let h = time.getHours(); let h = time.getHours();
return (y + "年" + m + "月" + d + "日" + h + "点"); return (y + "年" + m + "月" + d + "日");
} }
src/views/base/active/Active.vue
View file @ cabe800e
...@@ -142,8 +142,8 @@ ...@@ -142,8 +142,8 @@
labelList: [], labelList: [],
activeList: [],// 通过后台数据得到的所有数据 activeList: [],// 通过后台数据得到的所有数据
showActiveList: [],// 前端页面需要渲染的数据 showActiveList: [],// 前端页面需要渲染的数据
pageSize: 6, //渲染数据的多少根据实际情况设置 pageSize: 8, //渲染数据的多少根据实际情况设置
baseSize: 6,// 渲染基础页数 baseSize: 8,// 渲染基础页数
totall: 0, //总数据量 totall: 0, //总数据量
statusList: [ statusList: [
...@@ -299,14 +299,14 @@ ...@@ -299,14 +299,14 @@
}, },
// 确定按钮 // 确定按钮
searchHandle() { searchHandle() {
this.pageSize = 6; this.pageSize = 8;
this.totall = 0; this.totall = 0;
this.showActiveList = []; this.showActiveList = [];
this.getList(); this.getList();
}, },
// 重置按钮 // 重置按钮
resetHandle() { resetHandle() {
this.pageSize = 6; this.pageSize = 8;
this.totall = 0; this.totall = 0;
this.showActiveList = []; this.showActiveList = [];
this.queryForm = { this.queryForm = {
......
src/views/base/home/Home.vue
View file @ cabe800e
...@@ -60,9 +60,9 @@ ...@@ -60,9 +60,9 @@
</div> </div>
</div> </div>
<!--查看更多--> <!--查看更多-->
<div class="flex line"> <div class="flex-line">
<div class="line"></div> <div class="line"></div>
<span class="view-more" @click="viewMore">查看更多</span> <div class="view-more" @click="viewMore">查看更多</div>
</div> </div>
<!-- 学生感想和体会 --> <!-- 学生感想和体会 -->
<div> <div>
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
</template> </template>
<script> <script>
import banner1 from "../../../assets/img/Banner/banner1.jpg"; import banner1 from "../../../assets/img/Banner/banner1.png";
import banner2 from "../../../assets/img/Banner/banner2.jpg"; import banner2 from "../../../assets/img/Banner/banner2.jpg";
import {hot} from "r/base/home"; import {hot} from "r/base/home";
...@@ -212,6 +212,7 @@ ...@@ -212,6 +212,7 @@
.home_title { .home_title {
font-size: 26px; font-size: 26px;
margin: 20px 0; margin: 20px 0;
font-weight: 600;
} }
.active-list { .active-list {
...@@ -227,19 +228,23 @@ ...@@ -227,19 +228,23 @@
padding: 50px; padding: 50px;
} }
.line { .flex-line {
width: 80%;
margin: 0 auto;
display: flex;
flex-flow: row;
align-items: center; align-items: center;
div { .line {
width: 100%; flex: 1;
border-bottom: 1px solid #D7D7D7; border-bottom: 1px solid #D7D7D7;
} }
.view-more { .view-more {
color: #333333; color: #666666;
font-size: 14px; font-size: 16px;
width: 74px; width: 74px;
margin-left: 20px; margin-left: 40px;
cursor: pointer; cursor: pointer;
} }
} }
......
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