登录

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div style="overflow: hidden">
     <router-view/>
+    <LoginCom v-if="!isLogin" class="login"/>
   </div>
 </template>
 <script lang="ts">
@@ -17,17 +18,24 @@ import {
 import {useStore} from 'vuex'
 import {ElConfigProvider} from 'element-plus'
 import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
+import LoginCom from '@/views/login/index.vue'
 export default defineComponent({
   name: 'App',
   components: {
-    [ElConfigProvider.name]: ElConfigProvider //添加组件
+    [ElConfigProvider.name]: ElConfigProvider, //添加组件
+    LoginCom
   },
   setup() {
     const store = useStore()
     const locale = ref(zhLocale)
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const isLogin = computed(() => {
+      return localStorage.getItem('scToken')
+    })
+
     return {
-      locale
+      locale,
+      isLogin
     }
   }
 })
@@ -40,4 +48,12 @@ html, body {
   width: 100%;
   height: 100%;
 }
+.login {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 99999;
+  top: 0;
+  left: 0;
+}
 </style>

src/api/index.ts

@@ -0,0 +1,14 @@
+import * as request from './request'
+
+export const handle = ({url, params, method}: { [index: string]: any}) => {
+  const methodLow: string = method.toLowerCase()
+  // @ts-ignore
+  return request[methodLow]({url, params});
+}
+
+const files = import.meta.globEager("/src/api/module/*.ts")
+const apiModule = {}
+for (const [key, value] of Object.entries(files)) {
+  Object.assign(apiModule, value)
+}
+export default apiModule

src/api/module/user.ts

@@ -0,0 +1,9 @@
+import { handle } from '../index'
+
+const suffix = 'api'
+
+export const getInfo = (params: any) => handle({
+  url: `/${suffix}/info`,
+  method: 'get',
+  params
+})

src/api/request.ts

@@ -0,0 +1,35 @@
+import axios from 'axios'
+
+const instance = axios.create({
+  timeout: 10000
+})
+// 添加请求拦截器
+instance.interceptors.request.use((config: any) => {
+  // 在发送请求之前做些什么
+  return config
+}, (error: any) => {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+// 添加响应拦截器
+instance.interceptors.response.use((response: any) => {
+  // 对响应数据做点什么
+  return response
+}, (error: any) => {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export const get = ({url, params}: { [index: string]: any }) => {
+  return new Promise((resolve, reject) => {
+    let paramUrl = url
+    if (params) {
+      paramUrl += `?${params}`
+    }
+    instance.get(paramUrl).then((res: any) => {
+      resolve(res)
+    }).catch((err) => {
+      reject(err);
+    })
+  })
+}

src/main.ts

@@ -4,6 +4,7 @@ import router from './router'
 import store from "./store"
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import * as api from './api/index'
 import 'animate.css';
 import './style/cus-element.scss'
 import * as util from '@/utils/util'
@@ -12,4 +13,5 @@ app.use(router)
 app.use(store)
 app.use(ElementPlus)
 app.config.globalProperties.$util = util
+app.config.globalProperties.$api = api.default
 app.mount('#app')

src/views/login/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="login-main">
+    <div class="login-main-block">
+      <div class="lmb-head">
+        欢迎使用社管总体平台
+      </div>
+      <div class="lmb-content">
+        <div class="lmbc-left">
+          <img src="./img/login-bg-left.png"/>
+        </div>
+        <img class="lmbc-center" src="./img/login-bg-center.png"/>
+        <div class="lmbc-right">
+          <el-form class="form" ref="ref_form" :model="form" label-width="80px"
+                   :inline="true" :show-message	="true">
+            <el-form-item label="" prop="username" :rules="[
+              { required: true, trigger: 'blur', message: '请输入您的用户名' }]">
+              <el-input @keyup.enter="onNormalClick" v-model="form.username" placeholder="输入您的用户名">
+                <template v-slot:prefix>
+                  <img src="./img/login-bg-username.png"/>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item label="" prop="password" :rules="[
+              { required: true, trigger: 'blur', message: '请输入您的密码' }]">
+              <el-input @keyup.enter="onNormalClick" v-model="form.password" placeholder="输入您的密码" show-password>
+                <template v-slot:prefix>
+                  <img src="./img/login-bg-password.png"/>
+                </template>
+              </el-input>
+            </el-form-item>
+            <el-form-item class="code" label="" prop="code" :rules="[
+              { required: true, trigger: 'blur', message: '请输入验证码' }]">
+              <el-input @keyup.enter="onNormalClick" v-model="form.code" placeholder="验证码" class="code">
+                <template v-slot:prefix>
+                  <img src="./img/login-bg-code.png"/>
+                </template>
+                <template v-slot:suffix>
+                  <img v-if="codeImg" :src="codeImg"/>
+                </template>
+              </el-input>
+            </el-form-item>
+          </el-form>
+          <div class="__hover login-button">安全登录</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      form: {},
+      codeImg: ''
+    })
+    const onNormalClick = () => {
+
+    }
+    return {
+      ...toRefs(state),
+      onNormalClick
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.login-main {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .login-main-block {
+    background: url("./img/login-bg.png") 100% 100% no-repeat;
+    width: 961px;
+    height: 561px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .lmb-head {
+      background: url("./img/login-bg-head.png") 100% 100% no-repeat;
+      width: 614px;
+      height: 63px;
+      display: flex;
+      justify-content: center;
+      font-size: 30px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      color: #97E3F4;
+      line-height: 56px;
+    }
+    .lmb-content {
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      .lmbc-left, .lmbc-right {
+        width: 381px;
+      }
+      .lmbc-left {
+        position: relative;
+        height: 443px;
+        >img {
+          position: absolute;
+          top: 0;
+          left: -210px;
+        }
+      }
+      .lmbc-center {
+        margin-top: 69px;
+      }
+      .lmbc-right {
+        margin-top: 69px;
+        padding-left: 50px;
+        height: 443px;
+        :deep(.form) {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          .el-form-item {
+            margin-right: 0px;
+            margin-bottom: 25px;
+            width: 100%;
+            height: 58px;
+            input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
+
+            }
+            .el-input {
+              width: 100%;
+              height: 100%;
+              .el-input__wrapper {
+                border: 1px solid #17396F;
+                background-color: rgba(107,185,248,0.1);
+                padding: 2px;
+                box-sizing: border-box;
+                border-radius: 0;
+                box-shadow: 0 0 0 1px transparent inset;
+                .el-input__prefix {
+                  width: 58px;
+                  height: 100%;
+                  background: #17396F;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  .el-input__prefix-inner {
+                    >img {
+                      margin-right: 0px;
+                    }
+                  }
+                }
+                .el-input__inner {
+                  padding-left: 15px;
+                  width: 100%;
+                  height: 100%;
+                  background: rgba(107,185,248,0.1) !important;
+                  font-size: 20px;
+                  font-family: FZLanTingHeiS-DB-GB;
+                  font-weight: 400;
+                  color: #FFFFFF;
+                  border-color: transparent;
+                  &:focus {
+                    border-color: #0d84ff;
+                  }
+                  &::placeholder {
+                    font-size: 18px;
+                    font-family: FZLanTingHei-R-GBK;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                  }
+                  &:-webkit-autofill {
+                    background-color: rgba(34, 58, 80, 0.3) !important;
+                    -webkit-text-fill-color: #ededed !important;
+                    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
+                    background-image: none;
+                    transition: background-color 50000s ease-in-out 0s;
+                    caret-color: #eee; //光标颜色
+                    //背景色透明  生效时长  过渡效果  启用时延迟的时间
+                  }
+                }
+                .el-input__suffix {
+                  width: 58px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  background: rgba(107,185,248,0.1);
+                  .el-input__suffix-inner {
+                    >i {
+                      font-size: 20px;
+                      margin-left: 0;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .login-button {
+          margin-top: 13px;
+          width: 100%;
+          height: 58px;
+          background: #56C7FC;
+          border: 1px solid #134B7E;
+          font-size: 24px;
+          font-family: FZLanTingHeiS-DB-GB;
+          font-weight: 400;
+          color: #FFFFFF;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
+    }
+  }
+}
+</style>