vue2实现的落日余晖登录页+滑块校验

上传者: qq727338622 | 上传时间: 2024-04-02 15:33:18 | 文件大小: 462KB | 文件类型: ZIP
用vue2实现的一个登录页demo, 背景图可直接替换,成品案例直接可运行 设计技术: vue2、element-ui、vue-router、滑块校验 安装包 npm install 开发运行 npm run serve 编译运行 npm run build 代码解读: 需要注意的是,由于该方法只会在login.vue组件中生效,因此如果其他组件也需要相同的背景图效果,需要分别在这些组件中添加相应的样式。 一个名为background的CSS类,并设置了背景图、大小、位置、重复方式和高度等属性,你可以完全自定义。 在Vue.js应用程序中实现让login.vue页面有一个全局的背景图了。需要注意的是,由于全局样式会作用于整个应用程序,因此在设计样式时要注意不要影响到其他页面。 一定要注意body标签,这个标签默认是有 margin:8px 导致后续页面可能有白边,所以要注意处理一下,后续会有对应的文章进行详细的介绍,欢迎看我主页进行查找。

文件下载

资源详情

[{"title":"( 76 个子文件 462KB ) vue2实现的落日余晖登录页+滑块校验","children":[{"title":"login-demo","children":[{"title":"babel.config.js <span style='color:#111;'> 73B </span>","children":null,"spread":false},{"title":"src","children":[{"title":"App.vue <span style='color:#111;'> 146B </span>","children":null,"spread":false},{"title":"assets","children":[{"title":"bg.jpg <span style='color:#111;'> 194.83KB </span>","children":null,"spread":false}],"spread":true},{"title":"main.js <span style='color:#111;'> 280B </span>","children":null,"spread":false},{"title":"components","children":[{"title":"SilderVerify","children":[{"title":"index.vue <span style='color:#111;'> 7.17KB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"router","children":[{"title":"index.js <span style='color:#111;'> 291B </span>","children":null,"spread":false}],"spread":true},{"title":"views","children":[{"title":"login.vue <span style='color:#111;'> 2.94KB </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":".git","children":[{"title":"index <span style='color:#111;'> 1.23KB </span>","children":null,"spread":false},{"title":"HEAD <span style='color:#111;'> 23B </span>","children":null,"spread":false},{"title":"refs","children":[{"title":"heads","children":[{"title":"master <span style='color:#111;'> 41B </span>","children":null,"spread":false}],"spread":true},{"title":"tags","children":null,"spread":false}],"spread":true},{"title":"COMMIT_EDITMSG <span style='color:#111;'> 5B </span>","children":null,"spread":false},{"title":"objects","children":[{"title":"40","children":[{"title":"3adbc1e527906a4aa59558cd582c20bcd1d738 <span style='color:#111;'> 160B </span>","children":null,"spread":false}],"spread":true},{"title":"df","children":[{"title":"36fcfb72584e00488330b560ebcf34a41c64c2 <span style='color:#111;'> 979B </span>","children":null,"spread":false}],"spread":true},{"title":"94","children":[{"title":"890dfdda1497124ed564a919f6d7b510790ed2 <span style='color:#111;'> 150B </span>","children":null,"spread":false}],"spread":true},{"title":"e6","children":[{"title":"73390cb1eb506dc0e500b642739e37c0624a60 <span style='color:#111;'> 208B </span>","children":null,"spread":false}],"spread":true},{"title":"3e","children":[{"title":"5a13962197105f2078d2a224cc57dfa09b4893 <span style='color:#111;'> 383B </span>","children":null,"spread":false}],"spread":true},{"title":"f3","children":[{"title":"d2503fc2a44b5053b0837ebea6e87a2d339a43 <span style='color:#111;'> 6.40KB </span>","children":null,"spread":false}],"spread":false},{"title":"55","children":[{"title":"df315325bff60798291a7a13720ef273f6c3bb <span style='color:#111;'> 332B </span>","children":null,"spread":false}],"spread":false},{"title":"99","children":[{"title":"bf960e214e73e5513e054ac34c331b6d4b1a46 <span style='color:#111;'> 88B </span>","children":null,"spread":false}],"spread":false},{"title":"65","children":[{"title":"10c6a45035b6573151ff6196e4bdea78deb75d <span style='color:#111;'> 53B </span>","children":null,"spread":false}],"spread":false},{"title":"91","children":[{"title":"0e297e0f53483455d2aa432887c3b7975d6c11 <span style='color:#111;'> 117B </span>","children":null,"spread":false}],"spread":false},{"title":"63","children":[{"title":"eb05f711c8cb5cda45128882fa69c351f105fb <span style='color:#111;'> 131B </span>","children":null,"spread":false}],"spread":false},{"title":"3f","children":[{"title":"adaf7f3e9db75fd37502b05f94ff207ea97734 <span style='color:#111;'> 310B </span>","children":null,"spread":false}],"spread":false},{"title":"pack","children":null,"spread":false},{"title":"87","children":[{"title":"9051a29739fdfb17ae82ed23b53fac251c2b7e <span style='color:#111;'> 713B </span>","children":null,"spread":false}],"spread":false},{"title":"info","children":null,"spread":false},{"title":"0a","children":[{"title":"f62758581bcf5d4ce1f6ccb6a60a78048ff60b <span style='color:#111;'> 111.77KB </span>","children":null,"spread":false}],"spread":false},{"title":"4a","children":[{"title":"afc5f6ed86fe6dff8d4b6be59290cbdeb61656 <span style='color:#111;'> 175B </span>","children":null,"spread":false}],"spread":false},{"title":"ea","children":[{"title":"3244a3014a2f0c2bd685b14ab2dfb3a1b46fc3 <span style='color:#111;'> 409B </span>","children":null,"spread":false}],"spread":false},{"title":"d2","children":[{"title":"9574f6f5687b5a85e53ce2c2944f125139ab30 <span style='color:#111;'> 118B </span>","children":null,"spread":false}],"spread":false},{"title":"64","children":[{"title":"afaea7e0f99e8262f35bd394af63c86e2c04b3 <span style='color:#111;'> 59B </span>","children":null,"spread":false}],"spread":false},{"title":"e9","children":[{"title":"558405fdcc02f12d757acb308e02937a7444f1 <span style='color:#111;'> 82B </span>","children":null,"spread":false}],"spread":false}],"spread":false},{"title":"description <span style='color:#111;'> 73B </span>","children":null,"spread":false},{"title":"FETCH_HEAD <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"info","children":[{"title":"exclude <span style='color:#111;'> 240B </span>","children":null,"spread":false}],"spread":true},{"title":"logs","children":[{"title":"HEAD <span style='color:#111;'> 147B </span>","children":null,"spread":false},{"title":"refs","children":[{"title":"heads","children":[{"title":"master <span style='color:#111;'> 147B </span>","children":null,"spread":false}],"spread":false}],"spread":true}],"spread":true},{"title":"hooks","children":[{"title":"post-update.sample <span style='color:#111;'> 189B </span>","children":null,"spread":false},{"title":"prepare-commit-msg <span style='color:#111;'> 913B </span>","children":null,"spread":false},{"title":"post-checkout <span style='color:#111;'> 866B </span>","children":null,"spread":false},{"title":"prepare-commit-msg.sample <span style='color:#111;'> 1.46KB </span>","children":null,"spread":false},{"title":"post-update <span style='color:#111;'> 858B </span>","children":null,"spread":false},{"title":"commit-msg <span style='color:#111;'> 854B </span>","children":null,"spread":false},{"title":"pre-push <span style='color:#111;'> 846B </span>","children":null,"spread":false},{"title":"commit-msg.sample <span style='color:#111;'> 896B </span>","children":null,"spread":false},{"title":"pre-receive.sample <span style='color:#111;'> 544B </span>","children":null,"spread":false},{"title":"sendemail-validate <span style='color:#111;'> 886B </span>","children":null,"spread":false},{"title":"update.sample <span style='color:#111;'> 3.56KB </span>","children":null,"spread":false},{"title":"pre-auto-gc <span style='color:#111;'> 858B </span>","children":null,"spread":false},{"title":"pre-commit.sample <span style='color:#111;'> 1.60KB </span>","children":null,"spread":false},{"title":"pre-rebase.sample <span style='color:#111;'> 4.78KB </span>","children":null,"spread":false},{"title":"pre-applypatch <span style='color:#111;'> 870B </span>","children":null,"spread":false},{"title":"update <span style='color:#111;'> 838B </span>","children":null,"spread":false},{"title":"post-rewrite <span style='color:#111;'> 862B </span>","children":null,"spread":false},{"title":"post-merge <span style='color:#111;'> 854B </span>","children":null,"spread":false},{"title":"post-receive <span style='color:#111;'> 862B </span>","children":null,"spread":false},{"title":"post-commit <span style='color:#111;'> 858B </span>","children":null,"spread":false},{"title":"applypatch-msg.sample <span style='color:#111;'> 478B </span>","children":null,"spread":false},{"title":"post-applypatch <span style='color:#111;'> 874B </span>","children":null,"spread":false},{"title":"fsmonitor-watchman.sample <span style='color:#111;'> 4.62KB </span>","children":null,"spread":false},{"title":"pre-commit <span style='color:#111;'> 854B </span>","children":null,"spread":false},{"title":"pre-receive <span style='color:#111;'> 858B </span>","children":null,"spread":false},{"title":"push-to-checkout <span style='color:#111;'> 878B </span>","children":null,"spread":false},{"title":"applypatch-msg <span style='color:#111;'> 870B </span>","children":null,"spread":false},{"title":"push-to-checkout.sample <span style='color:#111;'> 2.72KB </span>","children":null,"spread":false},{"title":"pre-rebase <span style='color:#111;'> 854B </span>","children":null,"spread":false},{"title":"pre-applypatch.sample <span style='color:#111;'> 424B </span>","children":null,"spread":false},{"title":"pre-push.sample <span style='color:#111;'> 1.34KB </span>","children":null,"spread":false},{"title":"pre-merge-commit.sample <span style='color:#111;'> 416B </span>","children":null,"spread":false}],"spread":false},{"title":"config <span style='color:#111;'> 130B </span>","children":null,"spread":false}],"spread":false},{"title":"jsconfig.json <span style='color:#111;'> 279B </span>","children":null,"spread":false},{"title":"package.json <span style='color:#111;'> 968B </span>","children":null,"spread":false},{"title":"public","children":[{"title":"favicon.ico <span style='color:#111;'> 4.19KB </span>","children":null,"spread":false},{"title":"index.html <span style='color:#111;'> 611B </span>","children":null,"spread":false}],"spread":true},{"title":"package-lock.json <span style='color:#111;'> 415.51KB </span>","children":null,"spread":false},{"title":"vue.config.js <span style='color:#111;'> 203B </span>","children":null,"spread":false},{"title":".gitignore <span style='color:#111;'> 231B </span>","children":null,"spread":false},{"title":"README.md <span style='color:#111;'> 437B </span>","children":null,"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明