用VUE实现登录页

最新推荐文章于 2024-07-28 15:42:57 发布

一名爱记录的程序媛

最新推荐文章于 2024-07-28 15:42:57 发布

阅读量2.5k

点赞数

分类专栏：笔记文章标签：前端 es6 css3

本文链接：https://blog.csdn.net/qq_62449212/article/details/121456039

版权

本文通过Vue.js技术栈，详细介绍了如何构建一个登录页面。包括头部组件的实现和登录内容的具体编写，利用ES6语法和CSS3样式提升用户体验。

摘要由CSDN通过智能技术生成

代码展示

1、头部实现

<template>
  <div class="box">
    <div class="box1">
      <span class="iconfont con-zuojiantou"></span>
      <b>账户登录</b>
      <h3 style="font-size: 0.16rem"></h3>
    </div>

    <div class="box2">
      <img src="../../../assets/zx/img/图片3_03.jpg" />
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { ActionSheet } from "vant";
import { Toast } from "vant";
Vue.use(Toast);
Vue.use(ActionSheet);
export default {
  name: "Up",
  data() {
    return {
      show: false,
      actions: [
        {
          name: "换个账户登录",
        },
        {
          name: "注册",
        },
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.box1 {