vue项目-添加登录组件背景样式

1、设置粒子背景

官网地址：https://vue-particles.netlify.app/

安装粒子组件

npm install vue-particles --save-dev

2、在src/main.js中全局引入粒子组件

import VueParticles from 'vue-particles'
...
Vue.use(VueParticles)

3、在login.vue中添加粒子效果代码

<vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    ></vue-particles>

4、设置login.vue背景色等样式

<template>
  <div class="login">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
      style="height:100%"
    ></vue-particles>
  </div>
</template>
<script>
export default {
  name: "Login",
};
</script>
<style scoped>
//给div容器设置背景色
.login {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
</style>

5、设置App.vue中html,body的宽高及默认边距等样式

<style>
html,
body,
#app {
  margin: 0;
  height:100%;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>