- <template>
- <div class="doorPage">
- <!-- 头部 -->
- <div class="doorHead">
- <div class="header-name">***海绵综合管理平台</div>
- </div>
- <!-- 装饰框 -->
- <div class="zsDiv zsBottom"></div>
- <!-- 登录框 -->
- <div class="middle">
- <div :class="['loginPages ']">
- <LoginPage v-if="showLogin"></LoginPage>
- </div>
- </div>
- <!-- 底部二维码 -->
- <div class="doorFooter">
- <div class="footCon">
- <div class="part">
- <!-- https://www.pgyer.com/bj9MvqhO -->
- <img src="https://www.pgyer.com/app/qrcode/bj9MvqhO" alt="安卓APP扫码" title="开封海绵城市" />
- <p>安卓APP下载</p>
- </div>
- <div class="part">
- <img :src="wx_code" alt="微信公众号关注" title="开封城管" />
- <p>微信公众号关注</p>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script setup name="系统首页">
- import LoginPage from './login.vue';
- import wx_code from '@/assets/images/login/wx_code.png';
- const { proxy } = getCurrentInstance();
- const week = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);
- const dateTime = ref(proxy.moment(new Date()).format('YYYY年MM月DD日 ') + week.value[new Date().getDay()]);
- const showLogin = ref(true);
- onMounted(() => {});
- </script>
- <style lang="scss" scoped>
- .doorPage {
- width: 100%;
- height: 100%;
- position: relative;
- background: url('@/assets/images/login/bg_img.png') no-repeat;
- background-size: 100% 100%;
-
- .doorHead {
- width: 100%;
- height: 80px;
- background: url('@/assets/images/login/top.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- .header-name {
- font-size: 30px;
- font-family: YouSheBiaoTiHei;
- font-weight: 300;
- color: #ffffff;
- }
- }
- .zsDiv {
- position: absolute;
- pointer-events: none;
-
- &.zsBottom {
- width: calc(100% - 20px);
- height: 25px;
- bottom: 10px;
- left: 10px;
- background: url('@/assets/images/login/Bottom.png') no-repeat center;
- background-size: 100% 100%;
- z-index: 11;
- // background: red;
- }
- }
- .middle {
- width: 100%;
- height: calc(100vh - 350px);
- // background: red;
- .loginPages {
- position: absolute;
- top: 20%;
- right: 38%;
- z-index: 100;
- }
- }
-
- .doorFooter {
- width: 100%;
- display: flex;
- justify-content: center;
-
- .footCon {
- width: 20%;
- display: flex;
- justify-content: space-evenly;
- align-items: center;
- color: #fff;
- font-family: PingFang SC;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- .part {
- background: rgba(47, 147, 250, 0.5);
- text-align: center;
- padding: 10px;
- border-radius: 8px;
- box-shadow: 0px 0px 10px rgba(47, 147, 250, 0.2);
- cursor: pointer;
- &:hover {
- transform: scale(1.1);
- }
- img {
- width: 120px;
- height: 120px;
- border-radius: 5px;
- }
- p {
- text-align: center;
- margin-top: 5px;
- }
- }
- }
- }
- }
- </style>