Skip to content

郑
郑州生态环境局-前端
提交 63947f39 authored 作者: jxs's avatar jxs
浏览文件
操作

登陆首页背景图的增加

上级 d9593844
隐藏空白字符变更
内嵌 并排
正在显示 包含 94 行增加 和 482 行删除
. babelrc 0 → 100644
浏览文件 @ 63947f39
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
\ No newline at end of file
package.json
浏览文件 @ 63947f39
......@@ -25,6 +25,7 @@
"docx-preview": "^0.1.11",
"dom-align": "1.12.0",
"echarts": "^5.3.3",
"element-ui": "^2.15.10",
"enquire.js": "^2.1.6",
"jquery": "^3.6.0",
"js-cookie": "^2.2.0",
......@@ -62,6 +63,7 @@
"@vue/cli-service": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "7.2.3",
"babel-plugin-component": "^1.1.1",
"compression-webpack-plugin": "^3.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.1.0",
......
src/assets/login-p/bg_login2.jpg 0 → 100644
浏览文件 @ 63947f39
差异被折叠。
src/assets/login-p/bg_login4.jpg 0 → 100644
浏览文件 @ 63947f39
差异被折叠。
src/components/layouts/UserLayout.vue
浏览文件 @ 63947f39
......@@ -51,19 +51,19 @@ export default {
&.mobile {
.container {
.main {
max-width: 368px;
width: 98%;
}
// .main {
// max-width: 368px;
// width: 98%;
// }
}
}
.container {
width: 100%;
min-height: 100%;
padding: 110px 0 144px;
// min-height: 100%;
// padding: 110px 0 144px;
position: relative;
height: 100%;
a {
text-decoration: none;
}
......@@ -112,9 +112,10 @@ export default {
}
.main {
min-width: 260px;
width: 368px;
margin: 0 auto;
height: 100%;
// min-width: 260px;
// width: 368px;
// margin: 0 auto;
}
.footer {
......
src/main.js
浏览文件 @ 63947f39
......@@ -7,6 +7,7 @@ import Storage from 'vue-ls'
import router from './router'
import store from './store/'
import { VueAxios } from '@/utils/request'
import 'element-ui/lib/theme-chalk/index.css';
//
import utils from './utils'
//
......
src/views/user/Login.vue
浏览文件 @ 63947f39
<template>
<div class="login">
<div class="login-bg"></div>
<div class="loginHead">
<!-- <el-carousel height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel> -->
<div class="login_wrap">
<carousel indicator-position="none" @change="carouselChange">
<carousel-item v-for="item in 6" :key="item" >
<div class="login_bg" :class="active_img"></div>
<!-- -->
</carousel-item>
</carousel>
<div class="aaaa">
<div class="loginHead">
<img src="@/assets/system/left.png" alt="" class="icon" />
<span>郑州市土壤环境监管平台</span>
<img src="@/assets/system/right.png" alt="" class="icon" />
</div>
<div class="main">
<div class="login_form">
<a-form-model class="user-layout-login login-form" @keyup.enter.native="handleSubmit">
<h3 class="title">郑州市土壤环境监管平台</h3>
<login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed">
......@@ -49,6 +52,7 @@
<login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
<third-login ref="thirdLogin"></third-login>
</div>
</div>
</div>
</template>
......@@ -60,11 +64,11 @@ import LoginSelectTenant from './LoginSelectTenant'
import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
import { timeFix } from '@/utils/util'
import ElCarousel from './module/carousel/src/main'
import ElCarouselItem from './module/carousel/src/item'
import { Carousel, CarouselItem } from 'element-ui'
import LoginAccount from './LoginAccount'
import LoginPhone from './LoginPhone'
import { active } from 'tinymce'
export default {
components: {
......@@ -73,8 +77,8 @@ export default {
ThirdLogin,
LoginAccount,
LoginPhone,
ElCarousel,
ElCarouselItem,
Carousel,
CarouselItem,
},
data() {
return {
......@@ -87,6 +91,7 @@ export default {
key: '',
iv: '',
},
active_img:"login_bg0"
}
},
created() {
......@@ -110,7 +115,10 @@ export default {
}
})
},
carouselChange(index){
console.log(index)
this.active_img=`login_bg${index}`;
},
//登录
handleSubmit() {
this.loginBtn = true
......@@ -186,11 +194,9 @@ export default {
}
</script>
<style lang="less" scoped>
.login-bg {
background-image: url('../../assets/login_bg.jpg');
background-size: 100% 100%;
.login_bg{
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
/*关键*/
background-position: center;
position: fixed;
......@@ -198,6 +204,25 @@ export default {
left: 0;
width: 100%;
height: 100%;
}
.login_bg0 {
background-image: url('../../assets/login-p/bg_login1.jpg');
}
.login_bg1{
background-image: url('../../assets/login-p/bg_login2.jpg');
}
.login_bg2{
background-image: url('../../assets/login-p/bg_login3.jpg');
}
.login_bg3{
background-image: url('../../assets/login-p/bg_login4.jpg');
}
.login_bg4{
background-image: url('../../assets/login-p/bg_login5.jpg');
}
.login_bg5{
background-image: url('../../assets/login-p/bg_login6.jpg');
}
.loginHead {
......@@ -214,7 +239,8 @@ export default {
position: absolute;
left: 50%;
transform: translateX(-700px);
z-index: 12;
top: 6%;
span {
margin: 0 40px;
}
......@@ -225,13 +251,29 @@ export default {
height: 50px;
}
}
.main {
.login_wrap{
width:100%;
height:100%;
.el-carousel--horizontal{
height:100%;
}
/deep/ .el-carousel__container{
height:100%;
}
}
.login_form {
min-width: 260px;
width: 480px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 13;
// right: 50%;
// transform: translateX(560px);
// position: absolute;
......@@ -308,13 +350,6 @@ export default {
}
}
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
</style>
<style lang="less">
.valid-error .ant-select-selection__placeholder {
......
src/views/user/LoginSeletctSystem.vue
浏览文件 @ 63947f39
......@@ -238,6 +238,7 @@ ul li {
position: absolute;
top: 40px;
right: 6%;
z-index: 16;
}
.project-panel .action a{
font-size: 20px;
......@@ -251,7 +252,7 @@ ul li {
left: 0;
background: #0e5c8d;
z-index: 99;
background: url('../../assets/login_bg.jpg') no-repeat;
background: url('../../assets/login-p/login_bg.jpg') no-repeat;
background-size: 100% 100%;
}
.project-panel .project-content {
......@@ -268,7 +269,7 @@ ul li {
}
.project-panel .project-content .project-content-title {
min-width: 1150px;
height: 76px;
/* height: 76px; */
text-align: center;
font-size: 76px;
font-family: PingFangSC-Medium, PingFang SC;
......@@ -276,7 +277,7 @@ ul li {
color: #ffffff;
line-height: 76px;
text-shadow: 0px 2px 7px rgba(17, 10, 10, 0.3);
padding: 0 0 190px;
padding-bottom: 5%;
position: relative;
}
.project-panel .project-content .project-content-title img {
......
src/views/user/module/carousel/src/item.vue deleted 100644 → 0
浏览文件 @ d9593844
<template>
<div
v-show="ready"
class="el-carousel__item"
:class="{
'is-active': active,
'el-carousel__item--card': $parent.type === 'card',
'is-in-stage': inStage,
'is-hover': hover,
'is-animating': animating
}"
@click="handleItemClick"
:style="itemStyle">
<div
v-if="$parent.type === 'card'"
v-show="!active"
class="el-carousel__mask">
</div>
<slot></slot>
</div>
</template>
<script>
// import { autoprefixer } from 'element-ui/src/utils/util';
const CARD_SCALE = 0.83;
export default {
name: 'ElCarouselItem',
props: {
name: String,
label: {
type: [String, Number],
default: ''
}
},
data() {
return {
hover: false,
translate: 0,
scale: 1,
active: false,
ready: false,
inStage: false,
animating: false
};
},
methods: {
processIndex(index, activeIndex, length) {
if (activeIndex === 0 && index === length - 1) {
return -1;
} else if (activeIndex === length - 1 && index === 0) {
return length;
} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
return length + 1;
} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
return -2;
}
return index;
},
calcCardTranslate(index, activeIndex) {
const parentWidth = this.$parent.$el.offsetWidth;
if (this.inStage) {
return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
} else if (index < activeIndex) {
return -(1 + CARD_SCALE) * parentWidth / 4;
} else {
return (3 + CARD_SCALE) * parentWidth / 4;
}
},
calcTranslate(index, activeIndex, isVertical) {
const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
return distance * (index - activeIndex);
},
translateItem(index, activeIndex, oldIndex) {
const parentType = this.$parent.type;
const parentDirection = this.parentDirection;
const length = this.$parent.items.length;
if (parentType !== 'card' && oldIndex !== undefined) {
this.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2 && this.$parent.loop) {
index = this.processIndex(index, activeIndex, length);
}
if (parentType === 'card') {
if (parentDirection === 'vertical') {
console.warn('[Element Warn][Carousel]vertical directionis not supported in card mode');
}
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex;
this.translate = this.calcCardTranslate(index, activeIndex);
this.scale = this.active ? 1 : CARD_SCALE;
} else {
this.active = index === activeIndex;
const isVertical = parentDirection === 'vertical';
this.translate = this.calcTranslate(index, activeIndex, isVertical);
}
this.ready = true;
},
handleItemClick() {
const parent = this.$parent;
if (parent && parent.type === 'card') {
const index = parent.items.indexOf(this);
parent.setActiveItem(index);
}
}
},
computed: {
parentDirection() {
return this.$parent.direction;
},
itemStyle() {
const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
const style = {
transform: value
};
// return autoprefixer(style);
}
},
created() {
this.$parent && this.$parent.updateItems();
},
destroyed() {
this.$parent && this.$parent.updateItems();
}
};
</script>
src/views/user/module/carousel/src/main.vue deleted 100644 → 0
浏览文件 @ d9593844
<template>
<div
:class="carouselClasses"
@mouseenter.stop="handleMouseEnter"
@mouseleave.stop="handleMouseLeave">
<div
class="el-carousel__container"
:style="{ height: height }">
<transition
v-if="arrowDisplay"
name="carousel-arrow-left">
<button
type="button"
v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
@mouseenter="handleButtonEnter('left')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex - 1)"
class="el-carousel__arrow el-carousel__arrow--left">
<i class="el-icon-arrow-left"></i>
</button>
</transition>
<transition
v-if="arrowDisplay"
name="carousel-arrow-right">
<button
type="button"
v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
@mouseenter="handleButtonEnter('right')"
@mouseleave="handleButtonLeave"
@click.stop="throttledArrowClick(activeIndex + 1)"
class="el-carousel__arrow el-carousel__arrow--right">
<i class="el-icon-arrow-right"></i>
</button>
</transition>
<slot></slot>
</div>
<ul
v-if="indicatorPosition !== 'none'"
:class="indicatorsClasses">
<li
v-for="(item, index) in items"
:key="index"
:class="[
'el-carousel__indicator',
'el-carousel__indicator--' + direction,
{ 'is-active': index === activeIndex }]"
@mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)">
<button class="el-carousel__button">
<span v-if="hasLabel">{{ item.label }}</span>
</button>
</li>
</ul>
</div>
</template>
<script>
// import throttle from 'throttle-debounce/throttle';
// import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
export default {
name: 'ElCarousel',
props: {
initialIndex: {
type: Number,
default: 0
},
height: String,
trigger: {
type: String,
default: 'hover'
},
autoplay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 3000
},
indicatorPosition: String,
indicator: {
type: Boolean,
default: true
},
arrow: {
type: String,
default: 'hover'
},
type: String,
loop: {
type: Boolean,
default: true
},
direction: {
type: String,
default: 'horizontal',
validator(val) {
return ['horizontal', 'vertical'].indexOf(val) !== -1;
}
}
},
data() {
return {
items: [],
activeIndex: -1,
containerWidth: 0,
timer: null,
hover: false
};
},
computed: {
arrowDisplay() {
return this.arrow !== 'never' && this.direction !== 'vertical';
},
hasLabel() {
return this.items.some(item => item.label.toString().length > 0);
},
carouselClasses() {
const classes = ['el-carousel', 'el-carousel--' + this.direction];
if (this.type === 'card') {
classes.push('el-carousel--card');
}
return classes;
},
indicatorsClasses() {
const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];
if (this.hasLabel) {
classes.push('el-carousel__indicators--labels');
}
if (this.indicatorPosition === 'outside' || this.type === 'card') {
classes.push('el-carousel__indicators--outside');
}
return classes;
}
},
watch: {
items(val) {
if (val.length > 0) this.setActiveItem(this.initialIndex);
},
activeIndex(val, oldVal) {
this.resetItemPosition(oldVal);
if (oldVal > -1) {
this.$emit('change', val, oldVal);
}
},
autoplay(val) {
val ? this.startTimer() : this.pauseTimer();
},
loop() {
this.setActiveItem(this.activeIndex);
}
},
methods: {
handleMouseEnter() {
this.hover = true;
this.pauseTimer();
},
handleMouseLeave() {
this.hover = false;
this.startTimer();
},
itemInStage(item, index) {
const length = this.items.length;
if (index === length - 1 && item.inStage && this.items[0].active ||
(item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
return 'left';
} else if (index === 0 && item.inStage && this.items[length - 1].active ||
(item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
return 'right';
}
return false;
},
handleButtonEnter(arrow) {
if (this.direction === 'vertical') return;
this.items.forEach((item, index) => {
if (arrow === this.itemInStage(item, index)) {
item.hover = true;
}
});
},
handleButtonLeave() {
if (this.direction === 'vertical') return;
this.items.forEach(item => {
item.hover = false;
});
},
updateItems() {
this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
},
resetItemPosition(oldIndex) {
this.items.forEach((item, index) => {
item.translateItem(index, this.activeIndex, oldIndex);
});
},
playSlides() {
if (this.activeIndex < this.items.length - 1) {
this.activeIndex++;
} else if (this.loop) {
this.activeIndex = 0;
}
},
pauseTimer() {
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
startTimer() {
if (this.interval <= 0 || !this.autoplay || this.timer) return;
this.timer = setInterval(this.playSlides, this.interval);
},
setActiveItem(index) {
if (typeof index === 'string') {
const filteredItems = this.items.filter(item => item.name === index);
if (filteredItems.length > 0) {
index = this.items.indexOf(filteredItems[0]);
}
}
index = Number(index);
if (isNaN(index) || index !== Math.floor(index)) {
console.warn('[Element Warn][Carousel]index must be an integer.');
return;
}
let length = this.items.length;
const oldIndex = this.activeIndex;
if (index < 0) {
this.activeIndex = this.loop ? length - 1 : 0;
} else if (index >= length) {
this.activeIndex = this.loop ? 0 : length - 1;
} else {
this.activeIndex = index;
}
if (oldIndex === this.activeIndex) {
this.resetItemPosition(oldIndex);
}
},
prev() {
this.setActiveItem(this.activeIndex - 1);
},
next() {
this.setActiveItem(this.activeIndex + 1);
},
handleIndicatorClick(index) {
this.activeIndex = index;
},
handleIndicatorHover(index) {
if (this.trigger === 'hover' && index !== this.activeIndex) {
this.activeIndex = index;
}
}
},
created() {
// this.throttledArrowClick = throttle(300, true, index => {
// this.setActiveItem(index);
// });
// this.throttledIndicatorHover = throttle(300, index => {
// this.handleIndicatorHover(index);
// });
},
mounted() {
this.updateItems();
this.$nextTick(() => {
// addResizeListener(this.$el, this.resetItemPosition);
if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
this.activeIndex = this.initialIndex;
}
this.startTimer();
});
},
beforeDestroy() {
if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
this.pauseTimer();
}
};
</script>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论