组件loginBoxMain

整页模板，可Ctrl+A复制完整粘贴

<template> <view> <view class="mark" v-if="login_popup_show"> <view class="login_box"> <view class="left_login_box"> <image src="../../static/image/login_logo.png" style="width: 110px;margin-left: 24px;" mode="widthFix"></image> <view class="login_bg"> <image src="/static/image/login_box_img.png" style="width: 254px;" mode="widthFix"></image> </view> </view> <view class="right_login_box" style="margin-left: 4px;flex: 1" v-if="is_pc"> <view class="font-20 text-center" style="height: 28px">登录注册</view> <view class="font-14 text-center" style="color: rgba(0, 0, 0, .65);margin-top: 8px;">首次验证通过即注册鱼泡网账号 </view> <view class="flex-b identity_cut"> <view class="active_box" :style="{transform: (identity === 1? 'translateX(0px)' : 'translateX(175px)')}"></view> <view class="inactive_box" :style="{color: (identity === 1? '#0092ff' : '')}" @click="identity_cut(1)">我要招聘</view> <view class="inactive_box" :style="{color: (identity === 2? '#0092ff' : '')}" @click="identity_cut(2)">我要找工作</view> </view> <view style="margin-top: 24px;"> <input class="input" v-model="value" placeholder="请输入手机号" placeholder-style="color: #ccc" style="border-radius: 8px;"></input> </view> <view style="margin-top: 24px;"> <view class="input flex" style="padding-right: 0;"> <input class="font-14" v-model="value" placeholder="请输入图片验证码" placeholder-style="color: #ccc" style="border-radius: 8px;height: 48px;flex: 1;"></input> <view class="flex-center pointer" style="width: 100px;height: 100%;"> <image src="../../static/image/pic_code.png" mode="widthFix" style="padding: 2px 0;box-sizing: border-box;"></image> </view> </view> </view> <view style="margin-top: 24px;"> <view class="input flex" style="padding-right: 0;"> <input class="font-14" v-model="value" placeholder="请输入验证码" placeholder-style="color: #ccc" style="border-radius: 8px;height: 48px;flex: 1;"></input> <view class="flex-center pointer font-14" style="width: 105px;height: 100%;color: #0092ff;box-sizing: border-box;" :style="{color: (!timer? '#0092ff' : 'rgba(0, 0, 0, 0.25)')}" @click="sms_click()"> {{ sms_text }} </view> </view> </view> <view class="flex" style="margin-top: 32px;"> <el-checkbox v-model="checked"></el-checkbox> <view class="font-12" style="margin-left: 6px;color: rgba(0, 0, 0, .45);">已阅读并同意</view> <view class="flex font-12" style="color: #0092ff"> <view class="pointer">《隐私政策》</view> <view class="pointer">《服务协议》</view> </view> </view> <view style="margin-top: 16px;"> <el-button type="text" class="login_btn">登录/注册</el-button> </view> <view class="flex pointer" style="position: absolute;top: 4px;left: 4px;" @click="is_pc = false"> <image src="../../static/image/login_wechat.png" style="width: 64px;height: 64px;"></image> <view class="font-12" style="height: 64px;line-height: 64px;position: relative;left: -16px;color: #0092ff;">微信扫码登录 </view> </view> <view class="close" @click="close()"> <i class="el-icon-close" style="color: rgba(0, 0, 0, .25);font-size: 18px;"></i> </view> </view> <view class="right_login_box" style="margin-left: 4px;flex: 1" v-else> <view class="flex pointer" style="position: absolute;top: 4px;left: 4px;" @click="is_pc = true"> <image src="../../static/image/login_code.png" style="width: 64px;height: 64px;"></image> <view class="font-12" style="height: 64px;line-height: 64px;position: relative;left: -16px;color: #0092ff;z-index: 2;"> 验证码登录/注册 </view> </view> <view class="flex-column" style="justify-content: center;align-items: center;height: 100%;position: relative;top: -10px"> <view class="font-20" style="height: 32px;line-height: 32px;margin-top: 20px;">微信登录</view> <image src="../../static/image/wx_qr_code.jpg" style="width: 240px;height: 240px;border: 1px solid #e2e2e2;margin-top: 15px;vertical-align: bottom;"> </image> <view class="text-center" style="margin-top: 15px;color: #373737;font-size: 13px;height: 20px;line-height: 20px;"> 使用微信扫一扫登录</view> <view class="text-center" style="margin-top: 7px;color: #373737;font-size: 13px;height: 20px;line-height: 20px;">"鱼泡网" </view> </view> <view class="close" @click="close()"> <i class="el-icon-close" style="color: rgba(0, 0, 0, .25);font-size: 18px;"></i> </view> </view> </view> </view> </view> </template> <script> export default { name: "loginBoxMain", props: { login_popup_show: { type: Boolean, default: false } }, data() { return { identity: 1, is_pc: true, value: "", sms_text: "获取验证码", timer: false, checked: false } }, methods: { identity_cut(index) { this.identity = index }, sms_click() { if (!this.timer) { let time = 60 this.timer = setInterval(() => { if (time > 0) { let residue_time = time-- this.sms_text = `${String(residue_time).padStart(2, "0")}s后重新获取` } else { this.sms_text = "获取验证码" clearInterval(this.timer) this.timer = false } }, 1000) } }, close() { this.$emit("login_popup_close", false) } } } </script> <style lang="scss"> .mark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .45); z-index: 999; } .login_box { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 740px; min-height: 508px; background-color: #fff; padding: 4px; border-radius: 8px; box-sizing: border-box; .left_login_box { position: relative; width: 254px; min-width: 254px; background: #0092ff; padding-top: 16px; border-radius: 8px; overflow: hidden; box-sizing: border-box; } .login_bg { position: absolute; bottom: 0; left: 0; margin-bottom: -20px; } .right_login_box { padding: 36px 60px 0; box-sizing: border-box; position: relative; } .identity_cut { position: relative; width: 354px; height: 44px; background-color: #f5f6fa; padding: 3px; border-radius: 8px; margin-top: 8px; box-sizing: border-box; } .inactive_box { width: 172px; height: 38px; line-height: 38px; text-align: center; background-color: transparent; border-radius: 6px; font-size: 14px; cursor: pointer; color: rgba(0, 0, 0, .65); z-index: 1; } .active_box { position: absolute; top: 3px; left: 3px; width: 172px; height: 38px; line-height: 38px; text-align: center; background-color: #fff; border-radius: 6px; transition: transform .2s ease-in-out; font-size: 14px; cursor: pointer; color: #0092ff; } .input { width: 100%; height: 48px; padding: 0 12px; border-radius: 8px; font-size: 14px; border: 1px solid #e9edf3; background-color: transparent; box-sizing: border-box; overflow: hidden; } .input:focus-within { border: 1px solid #0092ff; } .login_btn { background-color: #0092ff; width: 100%; height: 40px; padding: 0 16px; border-radius: 6px; color: #FFF } .close { position: absolute; top: 12px; right: 12px; cursor: pointer; } } </style>

使用

<view class="font-14" @click="login_popup()">登录 | 注册</view> <loginBoxMain :login_popup_show="login_popup_show" @login_popup_close="login_popup_close"></loginBoxMain> login_popup_show: false, login_popup() { this.login_popup_show = true }, login_popup_close(e) { this.login_popup_show = e },