<template>
  <!-- <div class="container"> -->
  <!-- <Particles
      id="tsparticles"
      class="container__particles"
      :particles-init="particlesInit"
      :options="{
        fpsLimit: 20,
        interactivity: {
          detect_on: 'canvas',
          events: {
            onClick: {
              enable: true,
              mode: 'push'
            },
            onHover: {
              enable: true,
              mode: 'grab'
            },
            resize: true
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40
            },
            push: {
              quantity: 4
            },
            repulse: {
              distance: 200,
              duration: 10
            }
          }
        },
        particles: {
          color: {
            value: '#ffffff'
          },
          links: {
            color: '#ffffff',
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1
          },
          collisions: {
            enable: false
          },
          move: {
            direction: 'none',
            enable: true,
            outMode: 'bounce',
            random: true,
            speed: 3,
            straight: true
          },
          number: {
            density: {
              enable: true,
              area: 400
            },
            value: 20
          },
          opacity: {
            value: 0.5
          },
          shape: {
            type: 'circle'
          },
          size: {
            random: true,
            value: 4
          }
        },
        detectRetina: true
      }"
    /> -->
  <!-- <div class="content-inner"> -->
  <section class="container">
    <LoginForm />
  </section>
  <!-- </div> -->
  <!-- <div class="logo"> -->
  <!-- <img alt="logo" :src="logo" width="36" height="36" /> -->
  <!-- <div class="logo-text">SIOT数字物联中台</div>
    </div>
    <LoginBanner />
    <div class="content">
      <div class="content-inner">
        <LoginForm />
      </div>
      <div class="footer">
        <Footer />
      </div>
    </div> -->
  <!-- </div> -->
</template>

<script lang="ts" setup>
// import Footer from '@/components/footer/index.vue'
// import logo from '@/assets/images/logo.png'
import { loadFull } from 'tsparticles'
// import LoginBanner from './components/banner.vue'
import LoginForm from './components/login-form.vue'

const particlesInit = async (engine: any) => {
  console.log(engine)
  // await loadFull(engine)
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
// .container {
//   display: flex;
//   height: 100vh;

//   .banner {
//     width: 550px;
//     background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
//   }

//   &__particles {
//     width: 100%;
//     height: 100%;
//     background-image: url('@/assets/images/bg.jpg');
//     background-size: cover;
//     background-repeat: no-repeat;
//   }

//   .content {
//     position: relative;
//     display: flex;
//     flex: 1;
//     align-items: center;
//     justify-content: center;
//     padding-bottom: 40px;
//   }

//   .footer {
//     position: absolute;
//     right: 0;
//     bottom: 0;
//     width: 100%;
//   }
// }

// .logo {
//   position: fixed;
//   top: 24px;
//   left: 22px;
//   z-index: 1;
//   display: inline-flex;
//   align-items: center;

//   &-text {
//     margin-right: 4px;
//     margin-left: 4px;
//     color: var(--color-fill-1);
//     font-size: 20px;
//   }
// }
</style>

<style lang="less" scoped>
// responsive
// @media (max-width: @screen-lg) {
//   .container {
//     .banner {
//       width: 25%;
//     }
//   }
// }
</style>
