登录页面B站修改（Vue)

最新推荐文章于 2024-06-06 09:55:15 发布
最新推荐文章于 2024-06-06 09:55:15 发布
阅读量361 收藏 3
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52600282/article/details/137016801
版权 
<template>
  <div class="All-View">
    <div class="shell">
      <div class="container a-container" id="a-container" ref="AContainer">
        <el-form action="" method="" class="form" id="a-form">
          <h2 class="form_title title">创建账号</h2>
          <div class="form_icons">
            <i class="iconfont icon-QQ">
              <img src="../assets/img/qq.png">
            </i>
            <i class="iconfont icon-weixin">
              <img src="../assets/img/wx.png">
            </i>
            <i class="iconfont icon-bilibili-line">
              <img src="../assets/img/dh.png">
            </i>
          </div>
          <span class="form_span">选择注册方式活电子邮箱注册</span>
          <input type="text" class="form_input" placeholder="Name" v-model="data.info.name">
          <input type="text" class="form_input" placeholder="Email" v-model="data.info.email">
          <input  class="form_input" placeholder="Password" type="password" v-model="data.info.passWord">
          <button class="form_button button submit" @click="ToggleFunction('enroll')">SIGN UP</button>
        </el-form>
      </div>

      <div class="container b-container" id="b-container" ref="BContainer">
        <form action="" method="" class="form" id="b-form">
          <h2 class="form_title title">登入账号</h2>
          <div class="form_icons">
            <i class="iconfont icon-QQ">
              <img src="../assets/img/qq.png">
            </i>
            <i class="iconfont icon-weixin">
              <img src="../assets/img/wx.png">
            </i>
            <i class="iconfont icon-bilibili-line">
              <img src="../assets/img/dh.png">
            </i>
          </div>
          <span class="form_span">选择登录方式活电子邮箱登录</span>
          <input type="text" class="form_input" placeholder="Email" v-model="data.info.name">
          <input  class="form_input" placeholder="Password" type="password" v-model="data.info.passWord">
          <a class="form_link">忘记密码？</a>
          <button class="form_button button submit" @click="ToggleFunction('login')">SIGN IN</button>
        </form>
      </div>

      <div class="switch" id="switch-cnt" ref="SwitchCnt">
        <div class="switch_circle" ref="SwiCir1"></div>
        <div class="switch_circle switch_circle-t"   ref="SwiCir2"></div>
        <div class="switch_container" id="switch-c1" ref="SwitchC1">
          <h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
          <p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！！！</p>
          <button class="switch_button button switch-btn" ref="SwitchBtn1" @click="RegisterTheFunction">SIGN IN</button>
        </div>

        <div class="switch_container is-hidden" id="switch-c2" ref="SwitchC2">
          <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
          <p class="switch_description description">去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！</p>
          <button class="switch_button button switch-btn" ref="SwitchBtn2" @click="RegisterTheFunction">SIGN UP</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive, getCurrentInstance} from "vue";
import {debounce} from "../tool/antiVibrationThrottling.js";
//1
let switchCtn = document.querySelector("#switch-cnt");
const SwitchCnt=ref(null);
//1
let switchC1 = document.querySelector("#switch-c1");
const SwitchC1=ref(null);
//1
let switchC2 = document.querySelector("#switch-c2");
const SwitchC2=ref(null);
//1
let switchCircle = document.querySelectorAll(".switch_circle");
const   SwiCir1=ref(null);
const   SwiCir2=ref(null);
//1
let switchBtn = document.querySelectorAll(".switch-btn");
const SwitchBtn1=ref(null);
const SwitchBtn2=ref(null);
//1
let aContainer = document.querySelector("#a-container");
const AContainer=ref(null);
//1
let bContainer = document.querySelector("#b-container");
const BContainer=ref(null);
//1
let allButtons = document.querySelectorAll(".submit");

let getButtons = (e) => e.preventDefault()
let changeForm = (e) => {}
const data=reactive({
  info:{
    name:null,
    passWord:null,
    email:null
  },
  globalProperties:getCurrentInstance().appContext.config.globalProperties,
})
/**
 * 注册函数
 * */
function RegisterTheFunction(){
  console.log(SwitchCnt);
  setTimeout(()=>{
    SwitchCnt.value.classList.add('is-gx');
  },1500)
  SwitchCnt.value.classList.toggle("is-txr");
  SwiCir1.value.classList.toggle('is-txr');
  SwiCir2.value.classList.toggle("is-txr");

  SwitchC1.value.classList.toggle("is-hidden");
  SwitchC2.value.classList.toggle("is-hidden");
  AContainer.value.classList.toggle("is-txl");
  BContainer.value.classList.toggle("is-txl");
  BContainer.value.classList.toggle("is-z");
}

/**
 * 登录函数-防抖处理
 * */
const ToggleFunction=debounce((text)=>{
  //登录
  if (text==='login'){


    //注册
  }else if (text==='enroll'){

  }
  console.log(123,text)
},2000)



onMounted(()=>{
  // 点击切换
  let shell = (e) => {
    console.log('2222')
    for (var i = 0; i < allButtons.length; i++)
      allButtons[i].addEventListener("click", getButtons);
    for (var i = 0; i < switchBtn.length; i++)
      switchBtn[i].addEventListener("click", changeForm)
  }
  window.addEventListener("load", shell);
})



</script>

<style scoped >
 *{
   /*字体无法选中*/
   user-select: none;
 }
 body{
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 12px;
   background-color: #ecf0f3;
   color: #a0a5a8;
 }
 .form_icons{
   display: flex;
 }
 .All-View{
   width: 100%;
   min-height: 100vh;
   display: flex;
   align-items: center;
 }
 .shell{
   margin: 0 auto;
   position: relative;
   width: 1000px;
   min-width: 1000px;
   min-height: 600px;
   height: 600px;
   padding: 25px;
   background-color: #ecf0f3;
   box-shadow: 10px 10px 10px #d1d9e6,-10px -10px 10px #f9f9f9;
   border-radius: 12px;
   overflow: hidden;
 }
 /*设置响应式*/
 @media (max-width: 1200px) {
   .shell{
     transform: scale(0.7);
   }
 }
@media (max-width: 100px) {
  .shell{
    transform: scale(0.6);
  }
}
 @media (max-width: 800px) {
   .shell{
     transform: scale(0.5);
   }
 }
 @media (max-width: 600px) {
   .shell{
     transform: scale(0.4);
   }
 }
 .container{
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0;
   width: 600px;
   height: 100%;
   padding: 25px;
   background-color: #ecf0f3;
   transition: 1.25s;
 }
 .form{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 .iconfont{
   display: flex;
   justify-content: center;
   align-items: center;
   width: 40px;
   height: 40px;
   margin: 0 5px;
   padding: 4px;
   overflow: hidden;
   /*border: rgba(0,0,0,0.5) 2px solid;*/
   border-radius: 50%;
   /*font-size: 25px;*/
   /*opacity:透明度*/
   opacity: 0.5;

 }
 /*img{*/
 /*  width: 100%;*/
 /*  height: 100%;*/
 /*}*/
 .iconfont:hover{
   opacity: 1;
   transition: 0.125s;
   cursor: pointer;
 }
 .form_input{
   width: 350px;
   height: 40px;
   margin: 4px 0;
   padding-left: 25px;
   font-size: 25px;
   /*letter-spacing:表示字母之间的间距为*/
   letter-spacing: 0.15px;
   border: none;
   outline: none;
   background-color: #ecf0f3;
   transition: 0.25s ease;
   border-radius: 8px;
   box-shadow: inset 2px 2px 4px #d1d9e6,inset -2px -2px 4px #f9f9f9;
 }
 .form_input:focus{
   box-shadow: inset 4px 4px 4px #d1d9e6,inset -4px -4px 4px #f9f9f9;
 }
 .form_span{
   margin-top: 30px;
   margin-bottom: 12px;
 }
 .form_link{
   color: #181818;
    font-size: 15px;
   margin-top: 25px;
   border-bottom: 1px solid #a0a5a8;
   line-height: 2;
 }
 .title{
   font-size: 34px;
   font-weight: 700;
   line-height: 3;
   color: #181818;
   letter-spacing: 10px;
 }
 .description{
   font-size: 14px;
   letter-spacing: 0.25px;
   text-align: center;
   line-height: 1.6;
 }
 .button{
   width: 180px;
   height: 50px;
   border-radius: 25px;
   margin-top: 50px;
   font-weight: 700;
   font-size: 14px ;
   letter-spacing: 1.15px;
   background-color: #4b70E2;
   color: #f9f9f9;
   box-shadow: 8px 8px 16px #d1d9e6,-8px -8px 16px #f9f9f9;
   border: none;
   outline: none;
 }
 .a-container{
   z-index: 100;
   left: calc(100% - 600px);
 }
 .b-container{
   z-index: 0;
   left: calc(100% - 600px);
 }
 .switch{
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 400px;
   padding: 50px;
   z-index: 200;
   transition: 1.25s;
   background-color: #ecf0f3;
   overflow: hidden;
   box-shadow: 4px 4px 10px #d1d9e6,-4px -4px 10px #d1d9e6;
 }
 .switch_circle{
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background-color: #ecf0f3;
   box-shadow: inset 8px 8px 12px #b8bec7,inset -8px -8px 12px #ffffff;
   bottom: -60%;
   left: -60%;
   transition: 1.25s;
 }
 .switch_circle-t{
   top: -30%;
   left: 60%;
   width: 300px;
   height: 300px;
 }
 .switch_container{
   display: flex;justify-content: center;align-items: center;
   flex-direction: column;
   position: absolute;
   width: 400px;
   padding: 50px 55px;
   transition: 1.25s;
 }
 .switch_button{
   cursor: pointer;
 }
 .switch_button:hover,
 .submit:hover{
   box-shadow: 6px 6px 10px #d1d9e6,-6px -6px 10px #f9f9f9;
   transform: scale(0.985);
   transition: 0.25s;
 }
 .switch_button:active,
 .switch_button:focus{
   box-shadow: 2px 2px 6px #d1d9e6,-2px -2px 6px #f9f9f9;
   transition: 0.25s;
 }
 .is-txr {
   left: calc(100% - 400px);
   transition: 1.25s;
   transform-origin: left;
 }

 .is-txl {
   left: 0;
   transition: 1.25s;
   transform-origin: right;
 }

 .is-z {
   z-index: 200;
   transition: 1.25s;
 }

 .is-hidden {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   transition: 1.25s;
 }

 .is-gx {
   animation: is-gx 1.25s;
 }

 @keyframes is-gx {
   0%,
   10%,
   100% {
     width: 400px;
   }

   30%,
   50% {
     width: 500px;
   }
 }
</style>

Vue版本b站原生HTML!!!!

效果图

垫底菜鸡
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2集成ElementUI编写登录页面
5年编程经验的老猿。
04-28 994
vue2集成ElementUI编写登录页面
b站黑马Vue2后台管理项目笔记——（1）登录功能
weixin_72322475的博客
01-30 3098
总结b站黑马Vue2后台管理项目（1）登录功能笔记，相关技术点
vue 3 项目实战一（绘制登录界面）
qq_41045128的博客
07-07 2万+
本文记录了项目实现的详细步骤以及原理，十分适合初学vue的萌新练手。
vue密码登录和账号登录页面的设计
qq_55928824的博客
08-05 2948
vue登录页面的设计
vue A页面更新B页面数据
半梅芒果干的博客
03-24 707
其实无论你活成什么样子 都会有人说三道四 这个世界我们只来一次 吃想吃的东西 见想见的人 看喜欢看的风景 做喜欢做的事 不要在闲言碎语中迷失自己。
【Vue】模仿b站网站-----使用vue实现
coding加油站
08-17 2780
vue作业，vue模仿b站，b站，b站网页设计
使用vue-cli创建登录页面&后台交互
qq_64001795的博客
09-29 1692
通过观察控制台可以发现，post发送请求时，请求参数是以json格式通过request payload进行传送的，的struts的并没有处理这种方式传递的参数（起码是我们使用的struts版本），所以传递到服务器的参数并没有得到有效的解析。2）在element-ui组件，在form组件中找到与登录页面类似的组件，拷贝代码到刚新建的Login组件中，修改为自己需要的登录页面，页面包含：账户，密码， 提交按钮。在命令行，到自己的vue工程存放的目录，运行一下命令，前提是vue-cli先安装好。
Vue 实现登录界面 验证码
qq_40320637的博客
01-02 5715
登录界面 SIdentify 创建验证码组件，实现绘画出图片验证码` <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div> </te...
3、Vue+ElementUI制作用户登录页面
热门推荐
weixin_44868863的博客
05-24 8万+
前面两篇简单了解了一下vue和SPA，现在来用Vue+ElementUI做一个用户登录页面，ElementUI是Element出的一套针对vue的UI库，类似的UI库非常多，ElementUI只是其中一个，只是在GitHub上ElementUI是使用人数最多的，也可以使用其他的UI库，ElementUI官网地址：https://element.eleme.cn/#/zh-CN/component/...
解决vue单页面 回退页面 keeplive 缓存问题
12-28
场景：项目中遇到 vue 点击回退 从A页跳到B页，缓存A页，当B页状态修改再次返回A时，A页查询条件缓存不刷新，列表刷新 A页： B页： 解决方法： 利用keep-alive 缓存需要缓存的页面 1.在app.vue中改写router-view ...
在vue中实现简单页面逆传值的方法
01-19
　在 ios 开发中，页面跳转 A -> B -> C，到 C 页面后，内存中一直存储着 A 和 B 页面的数据和状态，通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等，另外还有代理，block传值等操作。　 　vue是一个单页...
母婴在线商城 采用B/S架构 前端界面由Vue构建，后端利用Spring Boot
03-08
前端界面由Vue构建，后端利用Spring Boot来简化Spring应用的配置和部署过程，从而提高开发效率。数据库方面，选择MySQL 1.前端用户功能(1)用户界面:系统提供用户注册功能，注册账户后可以登录系统，进行购买商品，...
vue缓存的keepalive页面刷新数据的方法
12-03
a页面点击新建列表按钮进入到新建的页面b，填写b页面并点击b页面确认添加按钮，把这些数据带到a页面，填充到列表（数组），可以添加多条， 点击这条的时候进入到编辑页面，确认修改之后，回退到a页面，a页面需要更新...
vue语法.rar
08-16
在一个系统或App中，由多个页面组成，通常会使用vue中的组件来实现，那么从一个页面跳转到另一个页面时， 通过url路径来实现的，哪个url对应哪个页面，在vue中是通过vue-router来实现 Vue-router在vue2.0中的使用...
vue3 vue-draggable-next 实现拖拽穿梭框效果
游九尘的博客
06-01 410
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
vue 弹出框组件重复打开时，资源重新加载
最新发布
洋葱的博客
06-06 242
2、v-if和:visible.sync同时使用。新增或者编辑内容使用同一个弹出框，如何使数据可以重新加载？1、绑定时间戳，有副作用，屏幕会闪烁一下。
vue-标签选择
zw899004的专栏
06-01 728
vue-标签选择
对于vsc中的vue命令 vue.json
F2297468264的博客
05-31 493
打开vsc 然后在左下角有一个设置。将此代码粘贴 （我的不一定都适合）3.输入 vue.json回车。2.点击用户代码片段。
vue 书籍添加修改删除页面
05-14
对于Vue的书籍添加修改删除页面，可以使用Vue Router和Vue组件来实现。 首先，在Vue项目中安装Vue Router： ``` npm install vue-router --save ``` 然后，在项目中创建一个`router.js`文件，用于配置路由： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值