'更新'

Your Name

2022-07-05 99d349889a704692e5ef81ca8e077a33121eaece

 src/views/loginPage/loginPage.vue

@@ -12,9 +12,9 @@
         <div class="loginPanel">
            <div class="welc">WELCOME！</div>
            <div class="welcc">欢迎登录</div>
<!--            <div class="loginInfo">-->
<!--               <el-input v-model="input" placeholder="Please input" />-->
<!--            </div>-->
            <!--            <div class="loginInfo">-->
            <!--               <el-input v-model="input" placeholder="Please input" />-->
            <!--            </div>-->
            <div>
               <el-tabs v-model="tabsActiveName">
                  <AccountLogin />
@@ -27,134 +27,135 @@
</template>

<script lang="ts">
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
import { loginBg } from '../../../static/loginPage.js/login.js'
import { loginApp } from '../../../static/loginPage.js/loginApp.js'
   import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
   import { storeToRefs } from 'pinia';
   import { useThemeConfig } from '/@/stores/themeConfig';
   import logoMini from '/@/assets/logo-mini.svg';
   import loginIconTwo from '/@/assets/login-icon-two.svg';
   import { NextLoading } from '/@/utils/loading';
   import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
   import { loginBg } from '../../../static/loginPage.js/login.js'
   import { loginApp } from '../../../static/loginPage.js/loginApp.js'

// 定义接口来定义对象的类型
interface LoginState {
   tabsActiveName: string;
   isScan: boolean;
}
   // 定义接口来定义对象的类型
   interface LoginState {
      tabsActiveName: string;
      isScan: boolean;
   }

export default defineComponent({
   name: 'loginIndex',
   components: { AccountLogin },
   setup() {
      const storesThemeConfig = useThemeConfig();
      const { themeConfig } = storeToRefs(storesThemeConfig);
      const state = reactive<LoginState>({
         tabsActiveName: 'account',
         isScan: false,
      });
      // 获取布局配置信息
      const getThemeConfig = computed(() => {
         return themeConfig.value;
      });
      // 页面加载时
      onMounted(() => {
         NextLoading.done();
         loginBg();
         loginApp()
      });
      return {
         logoMini,
         loginIconTwo,
         getThemeConfig,
         ...toRefs(state),
      };
   },
});
   export default defineComponent({
      name: 'loginIndex',
      components: { AccountLogin },
      setup() {
         const storesThemeConfig = useThemeConfig();
         const { themeConfig } = storeToRefs(storesThemeConfig);
         const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false,
         });
         // 获取布局配置信息
         const getThemeConfig = computed(() => {
            return themeConfig.value;
         });
         // 页面加载时
         onMounted(() => {
            NextLoading.done();
            loginBg();
            loginApp()
         });
         return {
            logoMini,
            loginIconTwo,
            getThemeConfig,
            ...toRefs(state),
         };
      },
   });
</script>

<style scoped lang="scss">
.login-container {
   width: 100%;
   height: 100%;
   position: relative;
   z-index: 999;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: radial-gradient(at center, #0075c3, #000b61);

   canvas {
      display: block;
      vertical-align: bottom;
   }

   #particles-js {
   .login-container {
      width: 100%;
      height: 100%;

      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   .loginContent{
      width: 100%;
      padding: 0 300px;
      position: relative;
      z-index: 999;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      align-items: center;
      justify-content: center;
      background: url("../../assets/loginPage/login-bg.jpg") no-repeat center;
      /*background-image: radial-gradient(at center, #0075c3, #000b61);*/

      .loginContL{
         font-size: 48px;
         font-weight: bold;
         padding-top: 20px;
         margin-right: 30px;

         .apTitleT{
            color: #fff;
            margin-bottom: 20px;
            letter-spacing: 4px;
         }
         .apTitleB{
            color: #01d0ff;
            margin-bottom: 40px;
            letter-spacing: 4px;
         }
         &>span{
            display: block;
            width: 120px;
            height: 8px;
            background: #01d0ff;
         }
      canvas {
         display: block;
         vertical-align: bottom;
      }
      .loginPanel{
         padding: 85px 70px;
         background: #fff;
         border-radius: 15px;
         box-shadow: 0 8px 40px rgba(0,0,0,.15);

         .welc{
            font-size: 36px;
            font-family: "PingFang SC";
            font-weight: normal;
            color: #999999;
            letter-spacing: 2px;
            margin-bottom: 15px;
      #particles-js {
         width: 100%;
         height: 100%;

         background-size: cover;
         background-position: 50% 50%;
         background-repeat: no-repeat;
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0;
         left: 0;
      }

      .loginContent{
         width: 100%;
         padding: 0 300px;
         display: flex;
         align-items: flex-start;
         justify-content: space-between;

         .loginContL{
            font-size: 48px;
            font-weight: bold;
            padding-top: 80px;
            margin-right: 30px;

            .apTitleT{
               color: #fff;
               margin-bottom: 20px;
               letter-spacing: 4px;
            }
            .apTitleB{
               color: #01d0ff;
               margin-bottom: 40px;
               letter-spacing: 4px;
            }
            &>span{
               display: block;
               width: 120px;
               height: 8px;
               background: #01d0ff;
            }
         }
         .welcc{
            font-size: 32px;
            font-family: "PingFang SC";
            font-weight: lighter;
            color: #333;
            letter-spacing: 2px;
         .loginPanel{
            padding: 85px 70px;
            background: #fff;
            border-radius: 15px;
            box-shadow: 0 8px 40px rgba(0,0,0,.15);

            .welc{
               font-size: 36px;
               font-family: "PingFang SC";
               font-weight: normal;
               color: #999999;
               letter-spacing: 2px;
               margin-bottom: 15px;
            }
            .welcc{
               font-size: 32px;
               font-family: "PingFang SC";
               font-weight: lighter;
               color: #333;
               letter-spacing: 2px;
            }
         }
      }
   }
}
</style>