Newer
Older
KaiFengPC / src / views / door.vue
@zhangdeliang zhangdeliang on 10 Oct 3 KB update
  1. <template>
  2. <div class="doorPage">
  3. <!-- 头部 -->
  4. <div class="doorHead">
  5. <div class="header-name">***海绵综合管理平台</div>
  6. </div>
  7. <!-- 装饰框 -->
  8. <div class="zsDiv zsBottom"></div>
  9. <!-- 登录框 -->
  10. <div class="middle">
  11. <div :class="['loginPages ']">
  12. <LoginPage v-if="showLogin"></LoginPage>
  13. </div>
  14. </div>
  15. <!-- 底部二维码 -->
  16. <div class="doorFooter">
  17. <div class="footCon">
  18. <div class="part">
  19. <!-- https://www.pgyer.com/bj9MvqhO -->
  20. <img src="https://www.pgyer.com/app/qrcode/bj9MvqhO" alt="安卓APP扫码" title="开封海绵城市" />
  21. <p>安卓APP下载</p>
  22. </div>
  23. <div class="part">
  24. <img :src="wx_code" alt="微信公众号关注" title="开封城管" />
  25. <p>微信公众号关注</p>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31.  
  32. <script setup name="系统首页">
  33. import LoginPage from './login.vue';
  34. import wx_code from '@/assets/images/login/wx_code.png';
  35. const { proxy } = getCurrentInstance();
  36. const week = ref(['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']);
  37. const dateTime = ref(proxy.moment(new Date()).format('YYYY年MM月DD日 ') + week.value[new Date().getDay()]);
  38. const showLogin = ref(true);
  39. onMounted(() => {});
  40. </script>
  41. <style lang="scss" scoped>
  42. .doorPage {
  43. width: 100%;
  44. height: 100%;
  45. position: relative;
  46. background: url('@/assets/images/login/bg_img.png') no-repeat;
  47. background-size: 100% 100%;
  48.  
  49. .doorHead {
  50. width: 100%;
  51. height: 80px;
  52. background: url('@/assets/images/login/top.png') no-repeat;
  53. background-size: 100% 100%;
  54. display: flex;
  55. align-items: center;
  56. justify-content: center;
  57. .header-name {
  58. font-size: 30px;
  59. font-family: YouSheBiaoTiHei;
  60. font-weight: 300;
  61. color: #ffffff;
  62. }
  63. }
  64. .zsDiv {
  65. position: absolute;
  66. pointer-events: none;
  67.  
  68. &.zsBottom {
  69. width: calc(100% - 20px);
  70. height: 25px;
  71. bottom: 10px;
  72. left: 10px;
  73. background: url('@/assets/images/login/Bottom.png') no-repeat center;
  74. background-size: 100% 100%;
  75. z-index: 11;
  76. // background: red;
  77. }
  78. }
  79. .middle {
  80. width: 100%;
  81. height: calc(100vh - 350px);
  82. // background: red;
  83. .loginPages {
  84. position: absolute;
  85. top: 20%;
  86. right: 38%;
  87. z-index: 100;
  88. }
  89. }
  90.  
  91. .doorFooter {
  92. width: 100%;
  93. display: flex;
  94. justify-content: center;
  95.  
  96. .footCon {
  97. width: 20%;
  98. display: flex;
  99. justify-content: space-evenly;
  100. align-items: center;
  101. color: #fff;
  102. font-family: PingFang SC;
  103. font-size: 14px;
  104. font-style: normal;
  105. font-weight: 400;
  106. .part {
  107. background: rgba(47, 147, 250, 0.5);
  108. text-align: center;
  109. padding: 10px;
  110. border-radius: 8px;
  111. box-shadow: 0px 0px 10px rgba(47, 147, 250, 0.2);
  112. cursor: pointer;
  113. &:hover {
  114. transform: scale(1.1);
  115. }
  116. img {
  117. width: 120px;
  118. height: 120px;
  119. border-radius: 5px;
  120. }
  121. p {
  122. text-align: center;
  123. margin-top: 5px;
  124. }
  125. }
  126. }
  127. }
  128. }
  129. </style>