gradido/frontend/src/layouts/AuthLayout.vue

<template>
  <div class="auth-template">
    <div class="h-100 align-middle">
      <auth-navbar class="index10" />

      <div class="left-content-box position-fixed d-none d-lg-block">
        <div class="bg-img-box position-absolute w-100">
          <auth-carousel class="carousel" />
        </div>
        <div class="bg-txt-box position-relative d-none d-lg-block text-center align-self-center">
          <BLink :href="`https://gradido.net/${$i18n.locale}`" target="_blank">
            <BButton variant="gradido">
              {{ $t('auth.left.learnMore') }}
            </BButton>
          </BLink>
        </div>
      </div>
      <BRow class="justify-content-md-center justify-content-lg-end">
        <BCol sm="12" md="8" lg="6" class="zindex1000">
          <div class="ml-3 ml-sm-4 mr-3 mr-sm-4">
            <BRow class="d-none d-md-block d-lg-none">
              <BCol class="mb--4">
                <auth-navbar-small />
              </BCol>
            </BRow>
            <BRow class="mt-0 mt-md-5 pl-2 pl-md-0 pl-lg-0">
              <BCol lg="9" md="9" sm="12">
                <div class="mb--2">{{ $t('welcome') }}</div>
                <div class="h1 mb-0">{{ communityName }}</div>
                <div class="mb-0">{{ $t('1000thanks') }}</div>
              </BCol>
              <BCol cols="3" class="text-right d-none d-sm-none d-md-inline">
                <BAvatar
                  src="/img/brand/gradido_coin●.png"
                  size="6rem"
                  variant="transparent"
                ></BAvatar>
              </BCol>
            </BRow>
            <BCard no-body ref="pageFontSize" class="border-0 mt-4 gradido-custom-background">
              <BRow class="p-4">
                <BCol cols="10">
                  <language-switch-2 class="ml-3" />
                </BCol>
                <BCol cols="2" class="text-right">
                  <div id="popover-target-1" class="pointer">
                    <BImg src="/img/svg/type.svg" width="19" class="svgType"></BImg>
                  </div>
                  <BPopover
                    target="popover-target-1"
                    triggers="click"
                    placement="top"
                    variant="dark"
                  >
                    <div class="text-light">
                      <span class="pointer" @click="setTextSize(0.85)">{{ $t('85') }}</span>
                      {{ $t('math.pipe') }}
                      <span class="pointer" @click="setTextSize(1)">{{ $t('100') }}</span>
                      {{ $t('math.pipe') }}
                      <span class="pointer" @click="setTextSize(1.25)">{{ $t('125') }}</span>
                    </div>
                  </BPopover>
                </BCol>
              </BRow>
              <BRow class="d-inline d-sm-inline d-md-none d-lg-none mb-3">
                <BCol class="text-center">
                  <BAvatar
                    src="/img/brand/gradido_coin●.png"
                    size="6rem"
                    bg-variant="transparent"
                  ></BAvatar>
                  <BRow>
                    <BCol class="zindex1000 d-flex justify-content-center">
                      <auth-navbar-small />
                    </BCol>
                  </BRow>
                </BCol>
              </BRow>
              <BCardBody class="">
                <router-view></router-view>
              </BCardBody>
            </BCard>
          </div>
          <auth-footer v-if="!$route.meta.hideFooter" class="pr-5 mb-5"></auth-footer>
        </BCol>
      </BRow>
    </div>
  </div>
</template>

<script>
import AuthNavbar from '@/components/Auth/AuthNavbar'
import AuthNavbarSmall from '@/components/Auth/AuthNavbarSmall'
import AuthCarousel from '@/components/Auth/AuthCarousel'
import LanguageSwitch2 from '@/components/LanguageSwitch2'
import AuthFooter from '@/components/Auth/AuthFooter'
import CONFIG from '@/config'

export default {
  name: 'AuthLayout',
  components: {
    AuthNavbar,
    AuthNavbarSmall,
    AuthCarousel,
    LanguageSwitch2,
    AuthFooter,
  },
  data() {
    return {
      communityName: CONFIG.COMMUNITY_NAME,
    }
  },
  methods: {
    setTextSize(size) {
      console.log(size)
      console.log(this.$refs.pageFontSize)
      this.$refs.pageFontSize.$el.style.fontSize = size + 'rem'
    },
  },
}
</script>

<style lang="scss">
/* left  */
.left-content-box {
  width: 40%;
  top: 0px;
  bottom: 0px;
}

.bg-img-box {
  top: 0px;
  bottom: 0px;
}

/* right */
.right-content-box {
  max-width: 640px;
}
.page-font-size {
  font-size: 1rem;
}
.auth-template {
  overflow-x: hidden;
}

.bg-txt-box {
  margin-top: 520px;
  text-shadow: 2px 2px 8px #000000;
  max-width: 733px;
}

.bg-img {
  border-radius: 0% 50% 70% 0% / 50% 70% 70% 50%;
  overflow: hidden;
}

.svgType:hover {
  filter: invert(38%) sepia(18%) saturate(5307%) hue-rotate(179deg) brightness(89%) contrast(89%);
}
@media screen and (min-width: 2000px) {
  .right-content-box {
    max-width: 60%;
    font-size: xx-large;
  }
}
</style>