<template> <div class="main-container flex-grow-1 dashboard-bg"> <div class="lock"></div> <div class="message"> <h1 class="message" v-if="isRealUser"> {{ $t("ToContinuePleaseUpgradeTheSystemAgain") }} </h1> <h1 class="message" v-else> {{ $t("ToCntinuePleaseRegisterInTheSystem") }} </h1> <!-- <p>اگر فکر می کنید اشتباه است، لطفا به مدیر سایت پیام دهید..</p> --> </div> <ul class="links"> <li> <router-link class="btn btn-outline-primary" :to="{ name: 'defaultRoute' }" title="سامانه ها" >{{ $t("System") }}</router-link > </li> <li> <router-link :to="{ name: 'aboutUs' }" class="btn"> {{ $t("AboutUs") }} </router-link> </li> <li> <router-link :to="{ name: 'contactUs' }" class="btn"> {{ $t("ContactUs") }}</router-link > </li> <li> <router-link :to="{ name: 'login' }" class="btn"> {{ $t("Register") }} </router-link> </li> </ul> </div> </template> <script> import { mapState } from "pinia"; export default { computed: { ...mapState(["isRealUser"]), }, }; </script> <style lang="scss" scoped> $animationTime: 2s; .dashboard-bg { // background-image: url('../../../assets/common/img/main-bg.png'); background-size: 14em; background-position: center; } .main-container { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; //background: linear-gradient(to bottom right, #EEE, #e9e9e9); } .links { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; li { &:first-child { margin-left: 0.5em; .btn { font-size: 1rem; } } .btn { font-size: 1rem; } } } h1 { margin: 40px 0 20px; } .lock { position: relative; border-radius: 5px; width: 55px; height: 45px; background-color: #333; animation: dip 1s; animation-delay: ($animationTime - 0.5); &::before, &::after { content: ""; position: absolute; border-left: 5px solid #333; height: 20px; width: 25px; left: calc(50% - 12.5px); } &::before { top: -30px; border: 5px solid #333; border-bottom-color: transparent; border-radius: 15px 15px 0 0; height: 35px; // animation: lock $animationTime, spin $animationTime; } // &::after { // top: -10px; // border-right: 5px solid transparent; // animation: spin $animationTime; // } } @keyframes lock { 0% { top: -45px; } 65% { top: -45px; } 100% { top: -30px; } } @keyframes spin { 0% { transform: scaleX(-1); left: calc(50% - 30px); } 65% { transform: scaleX(1); left: calc(50% - 12.5px); } } @keyframes dip { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } } .message { font-size: 2.5rem; } @media (max-width: 576px) { .message { font-size: 1.5rem; } .links li:first-child .btn { font-size: 0.7rem; } } </style>