Tuoyuan-vue-login NPM

Install

npm install tuoyuan-vue-login -S

Quick Start

import Vue from 'vue'
import LoginPage from 'tuoyuan-vue-login'
const LOGIN_CONFIG = {
  cssVars: {
    ThemeColor: '',
    TitleColor: ''
  },
  template: {
    title: '全域治理数字化平台',
    carousel: {
      timeout: 4000,
      defaultModuleIndex: 0,
      moduleList: [
        {
          name: 'IOC运营中心',
          items: [
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            }
          ]
        },
        {
          name: '社区场景应用',
          items: [
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            }
          ]
        },
        {
          name: '运营分析名称',
          items: [
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            }
          ]
        },
        {
          name: '支撑能力平台',
          items: [
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            },
            {
              image: 'http://118.31.78.162:3001/images/assets/login-page/modules/SketchPng9e3fe126a3bf771c27b04fd1864dd376cc78e48da91178595b2fa0ab1d2be454.png'
            }
          ]
        }
      ]
    },
    footer: [
      {
        title: '速联万物',
        description: '物联网、传感器网',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/速联万物.png'
      },
      {
        title: '一体化智联',
        description: '快速获取、提供服务',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/一体化智联.png'
      },
      {
        title: '全域智控',
        description: '全域范围AI协作',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/全域智控.png'
      },
      {
        title: '数据智能',
        description: '智能指标体系应用',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/数据智能.png'
      },
      {
        title: '运营管理',
        description: '基于服务级别协议',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/运营管理.png'
      },
      {
        title: '云边融合',
        description: '云端、边缘计算端融合',
        icon: 'http://118.31.78.162:3001/images/assets/login-page/footer/云边融合.png'
      }
    ],
    form: [
      {
        type: 'input',
        title: '账号密码登录',
        formItems: [
          {
            key: 'user',
            type: 'text',
            placeholder: '用户名'
          },
          {
            key: 'pass',
            type: 'password',
            placeholder: '密码'
          }
        ],
        btn: {
          text: '登录',
          color: '#175FEC'
        }
      }
    ]
  }
}

Vue.use(LoginPage, LOGIN_CONFIG)

<template>
  <div class="page">
    <login-page @on-submit="handleOnSubmit" />
  </div>
</template>

<script>
export default {
  methods: {
    handleOnSubmit ({ type, data }) {
      if (type === 'input') {
        console.log(data)
      }
    }
  },
};
</script>