mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
add component Auth/MobileStart.vue
This commit is contained in:
ogerly
parent
bf5f5a4153
commit
cfcbcc96a7
128
frontend/src/components/Auth/MobileStart.vue
Normal file
128
frontend/src/components/Auth/MobileStart.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="mobil-start-box d-inline d-sm-inline d-md-inline d-lg-none">
|
||||
<div class="position-absolute h1 text-white zindex1000 w-100 text-center mt-8">
|
||||
{{ $t('auth.left.gratitude') }}
|
||||
</div>
|
||||
<div class="position-absolute h2 text-white zindex1000 w-100 text-center mt-9">
|
||||
{{ $t('auth.left.newCurrency') }}
|
||||
</div>
|
||||
<img src="img/template/Blaetter.png" class="header-img d-block d-lg-none zindex1000" />
|
||||
<b-img id="img0" src="img/template/logo-header.png" alt="start background image"></b-img>
|
||||
<b-img
|
||||
fluid
|
||||
height="100%"
|
||||
id="img1"
|
||||
src="img/template/background-start-mobil.png"
|
||||
alt="start background image"
|
||||
></b-img>
|
||||
<b-img
|
||||
id="img2"
|
||||
src="img/template/gradido_background_header.png"
|
||||
alt="start background image"
|
||||
></b-img>
|
||||
<b-img id="img3" src="img/template/Foto_01.jpg" alt="start background image"></b-img>
|
||||
<div class="mobil-start-box-text text-center">
|
||||
<b-button variant="gradido" to="/register" @click="$emit('is-mobile-start', false)">
|
||||
{{ $t('signup') }}
|
||||
</b-button>
|
||||
<div class="mt-3 h3 text-white">
|
||||
{{ $t('auth.left.hasAccount') }}
|
||||
<b-link
|
||||
to="/login"
|
||||
class="text-gradido gradido-global-color-blue"
|
||||
@click="$emit('is-mobile-start', false)"
|
||||
>
|
||||
{{ $t('auth.left.hereLogin') }}
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'MobileStart',
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.mobil-start-box {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.mobil-start-box-text {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
bottom: 65px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobil-start-box #img0 {
|
||||
/* position: absolute;*/
|
||||
z-index: 1000;
|
||||
/* width: 33%; */
|
||||
}
|
||||
|
||||
.mobil-start-box #img1 {
|
||||
/* position: absolute;*/
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
/* width: 100%;*/
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.mobil-start-box #img2 {
|
||||
/*position: absolute;*/
|
||||
/*width: 49%;*/
|
||||
height: 14%;
|
||||
z-index: 1;
|
||||
}
|
||||
.mobil-start-box #img3 {
|
||||
width: 115%;
|
||||
/*position: relative;*/
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 150%;
|
||||
top: -148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 100%;
|
||||
top: -148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.mobil-start-box #img3 {
|
||||
top: 66px;
|
||||
width: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 160%;
|
||||
left: -71px;
|
||||
top: 35px;
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 145%;
|
||||
left: -94px;
|
||||
top: 24px;
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +1,6 @@
|
||||
<template>
|
||||
<div class="auth-template" ref="pageFontSize">
|
||||
<div v-if="mobilStart" class="mobil-start-box d-inline d-sm-inline d-md-inline d-lg-none">
|
||||
<div class="position-absolute h1 text-white zindex1000 w-100 text-center mt-8">
|
||||
{{ $t('auth.left.gratitude') }}
|
||||
</div>
|
||||
<div class="position-absolute h2 text-white zindex1000 w-100 text-center mt-9">
|
||||
{{ $t('auth.left.newCurrency') }}
|
||||
</div>
|
||||
<img src="img/template/Blaetter.png" class="header-img d-block d-lg-none zindex1000" />
|
||||
<b-img id="img0" src="img/template/logo-header.png" alt="start background image"></b-img>
|
||||
<b-img
|
||||
fluid
|
||||
height="100%"
|
||||
id="img1"
|
||||
src="img/template/background-start-mobil.png"
|
||||
alt="start background image"
|
||||
></b-img>
|
||||
<b-img
|
||||
id="img2"
|
||||
src="img/template/gradido_background_header.png"
|
||||
alt="start background image"
|
||||
></b-img>
|
||||
<b-img id="img3" src="img/template/Foto_01.jpg" alt="start background image"></b-img>
|
||||
<div class="mobil-start-box-text text-center">
|
||||
<b-button variant="gradido" to="/register" @click="mobilStart = false">
|
||||
{{ $t('signup') }}
|
||||
</b-button>
|
||||
<div class="mt-3 h3 text-white">
|
||||
{{ $t('auth.left.hasAccount') }}
|
||||
<b-link
|
||||
to="/login"
|
||||
class="text-gradido gradido-global-color-blue"
|
||||
@click="mobilStart = false"
|
||||
>
|
||||
{{ $t('auth.left.hereLogin') }}
|
||||
</b-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mobile-start v-if="mobileStart" class="d-inline d-lg-none" @is-mobile-start="isMobileStart" />
|
||||
<div>
|
||||
<auth-header class="auth-header" />
|
||||
|
||||
@ -119,6 +81,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MobileStart from '@/components/Auth/MobileStart.vue'
|
||||
import AuthHeader from '@/components/Auth/Header.vue'
|
||||
import Carousel from '@/components/Auth/Carousel.vue'
|
||||
import LanguageSwitch from '@/components/LanguageSwitch2'
|
||||
@ -127,6 +90,7 @@ import AuthFooter from '@/components/Auth/Footer.vue'
|
||||
export default {
|
||||
name: 'AuthTemplate',
|
||||
components: {
|
||||
MobileStart,
|
||||
AuthHeader,
|
||||
Carousel,
|
||||
LanguageSwitch,
|
||||
@ -134,10 +98,13 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mobilStart: true,
|
||||
mobileStart: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isMobileStart(boolean) {
|
||||
this.mobileStart = boolean
|
||||
},
|
||||
setTextSize(size) {
|
||||
this.$refs.pageFontSize.style.fontSize = size + 'rem'
|
||||
},
|
||||
@ -168,39 +135,6 @@ export default {
|
||||
.auth-header {
|
||||
z-index: 999;
|
||||
}
|
||||
.mobil-start-box {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.mobil-start-box-text {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
bottom: 65px;
|
||||
width: 100%;
|
||||
}
|
||||
.mobil-start-box #img1 {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.mobil-start-box #img0 {
|
||||
/* position: absolute;*/
|
||||
z-index: 1000;
|
||||
/* width: 33%; */
|
||||
}
|
||||
.mobil-start-box #img2 {
|
||||
position: absolute;
|
||||
width: 49%;
|
||||
height: 14%;
|
||||
z-index: 1;
|
||||
}
|
||||
.mobil-start-box #img3 {
|
||||
width: 115%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-img-box {
|
||||
margin-top: -308px;
|
||||
@ -238,49 +172,4 @@ export default {
|
||||
border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 150%;
|
||||
top: -148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 100%;
|
||||
top: -148px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 650px) {
|
||||
.mobil-start-box #img3 {
|
||||
top: 66px;
|
||||
width: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 450px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 160%;
|
||||
left: -71px;
|
||||
top: 35px;
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 740px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 115%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 300px) {
|
||||
.mobil-start-box #img3 {
|
||||
width: 145%;
|
||||
left: -94px;
|
||||
top: 24px;
|
||||
min-width: 360px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user