前端效果 登入界面

简介: 前端效果 登入界面

效果展示:

代码:

<template>
  <div class="login">
    <div class="section-1">
      <div class="card" @mouseover="activeCard = 1" @mouseleave="activeCard = 0" @click="islogin = !islogin">
        <div class="container" :class="{ active: activeCard === 1 }">
          <div class="title-info">
            <div class="title">{{ '登入' }}</div>
            <div class="info">{{ '登入网易云音乐' }}</div>
          </div>
        </div>
      </div>
      <div class="card" @mouseover="activeCard = 2" @mouseleave="activeCard = 0" @click="goTo('about')">
        <div class="container" :class="{ active: activeCard === 2 }">
          <div class="title-info">
            <div class="title">{{ '跳过' }}</div>
            <div class="info">{{ '跳过登入进入' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="section-2" v-if="islogin">
      <p style="font-size: 35px; font-weight:600; text-align: center;"> 登入</p>
      <el-input class="input" v-model="form.username" placeholder="Please input username" />
      <el-input
        class="input"
        v-model="form.password"
        type="password"
        placeholder="Please input password"
        show-password
      />
      <div class="input" style="display: flex; justify-content: center;">
        <el-button type="primary"  style= "width: 200px; " @click="onSubmit">登入</el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
const activeCard = ref(0)
const router = useRouter()
const islogin = ref(false)
const form = reactive({
  username : '',
  password : '',
});
const onSubmit = () => {
  console.log(form.username, form.password)
}
NProgress.start()
onMounted(() => {
  NProgress.done()
})
onUnmounted(() => {
  NProgress.remove() // 如果需要在组件卸载时清除进度条,可以调用这个方法
})
async function goTo(path) {
  await router.push({ path: `/${path}` })
  console.log('hello')
}
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 192px);
}
.section-1 {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.section-2 {
  background-color: #eaeffd;
  justify-content: center;
  margin-left: 100px;
  width: 500px;
  height: 312px;
  padding-left: 80px;
  padding-right: 80px;
  padding-top: 10px;
}
.section-2 .input {
  margin-top: 30px;
  height: 40px
}
.card {
  cursor: pointer;
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eaeffd;
  border-radius: 8px;
  height: 128px;
  width: 300px;
  transition: all 0.3s;
  padding-left: 22px;
  box-sizing: border-box;
  .active {
    .title-info {
      transform: translateX(-8px);
    }
  }
  .container {
    display: rgb(234, 239, 253);
    // justify-content: space-around;
    align-items: center;
    color: #335eea;
  }
  .title-info {
    transition: all 0.3s;
  }
  .title {
    font-size: 24px;
    font-weight: 600;
  }
  .info {
    margin-top: 2px;
    font-size: 14px;
    color: rgba(51, 94, 234, 0.78);
  }
}
</style>


目录
相关文章
|
12天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
6月前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端界面的技术探索
【5月更文挑战第20天】Vue.js是一款渐进式JavaScript框架,擅长构建交互式前端界面。其核心特性包括响应式数据绑定、组件化开发、指令系统和虚拟DOM,简化开发并提升性能。通过Vue CLI创建项目,拆分组件,结合数据绑定和事件处理实现交互,使用Vue Router管理路由,Vuex进行状态管理,能高效构建现代Web应用。
|
2月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
53 0
|
4月前
|
开发框架 前端开发 JavaScript
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
|
3月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
|
3月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
基于SqlSugar的开发框架循序渐进介绍(15)-- 整合代码生成工具进行前端界面的生成
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
|
3月前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
30 0
|
3月前
|
前端开发 JavaScript 开发者
天崩地裂!现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【8月更文挑战第12天】本文通过实际案例对比了主流前端框架:Vue.js 以其简洁语法和组件化脱颖而出;React 依托虚拟DOM确保高效的界面更新;Angular 则以强大的模块系统适用于企业级应用。三者虽殊途同归,但在实现相同功能时各具特色,为高效响应式Web界面的构建提供了多样选择。
43 0