157 lines
7.8 KiB
Plaintext
157 lines
7.8 KiB
Plaintext
<template>
|
|
<view class="admin-page-container">
|
|
<view class="login-wrapper">
|
|
<view class="login-card">
|
|
<view class="login-aside">
|
|
<view class="aside-content">
|
|
<text class="aside-title">商家寄件</text>
|
|
<text class="aside-desc">中小商家可灵活选择多家快递品牌</text>
|
|
<view class="aside-illustration">
|
|
<view class="illu-box">
|
|
<view class="illu-icon"></view>
|
|
<view class="illu-card">
|
|
<view class="illu-avatar"></view>
|
|
<view class="illu-line"></view>
|
|
<view class="illu-line short"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="login-main">
|
|
<view class="login-tabs">
|
|
<view class="tab-item" :class="{ active: activeTab == 'account' }" @click="activeTab = 'account'">
|
|
<text class="tab-text">账号登录</text>
|
|
</view>
|
|
<view class="tab-item" :class="{ active: activeTab == 'sms' }" @click="activeTab = 'sms'">
|
|
<text class="tab-text">短信登录/注册</text>
|
|
</view>
|
|
</view>
|
|
<view class="login-form">
|
|
<template v-if="activeTab == 'account'">
|
|
<view class="form-item">
|
|
<input class="form-input" placeholder="请输入手机号/账号" v-model="account" />
|
|
</view>
|
|
<view class="form-item password-item">
|
|
<input class="form-input" type="password" placeholder="请输入密码" v-model="password" />
|
|
<text class="forget-password">忘记密码</text>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="form-item">
|
|
<input class="form-input" placeholder="请输入手机号" v-model="phone" />
|
|
</view>
|
|
<view class="form-item sms-item">
|
|
<input class="form-input" placeholder="请输入验证码" v-model="verifyCode" />
|
|
<text class="get-code">获取验证码</text>
|
|
</view>
|
|
</template>
|
|
<view class="form-agreement">
|
|
<checkbox-group @change="onAgreementChange">
|
|
<label class="agreement-label">
|
|
<checkbox class="agreement-cb" value="agreed" color="#2d8cf0" :checked="isAgreed" />
|
|
<text class="agreement-text">仔细阅读并同意</text>
|
|
<text class="agreement-link">《用户协议》</text>
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<button class="login-btn" type="primary" @click="handleLogin" :disabled="!isAgreed">登录</button>
|
|
<view class="contact-box">
|
|
<text class="contact-text">咨询客服</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="float-tabs">
|
|
<view class="float-tab active">
|
|
<text class="float-icon">U</text>
|
|
<text class="float-text">账号登录</text>
|
|
</view>
|
|
<view class="float-tab">
|
|
<text class="float-icon gray">C</text>
|
|
<text class="float-text gray">扫码登录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="page-footer">
|
|
<view class="footer-links">
|
|
<text class="footer-link">官网</text>
|
|
<text class="footer-link">社区</text>
|
|
<text class="footer-link">文档</text>
|
|
</view>
|
|
<text class="footer-copy">Copyright (c) 2014-2025 CRMEB-BZ v5.6.4</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
const activeTab = ref('account')
|
|
const account = ref('')
|
|
const password = ref('')
|
|
const phone = ref('')
|
|
const verifyCode = ref('')
|
|
const isAgreed = ref(false)
|
|
const onAgreementChange = (e : any) => {
|
|
const values = e.detail.value as string[]
|
|
isAgreed.value = values.includes('agreed')
|
|
}
|
|
const handleLogin = () => {
|
|
if (!isAgreed.value) {
|
|
uni.showToast({ title: '请先同意用户协议', icon: 'none' })
|
|
return
|
|
}
|
|
uni.showToast({ title: '登录中...', icon: 'loading' })
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.admin-page-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
/* 使用 Layout 的背景和内边距 */
|
|
}
|
|
.login-wrapper { position: relative; display: flex; flex-direction: row; margin-bottom: 60px; }
|
|
.login-card { display: flex; flex-direction: row; width: 800px; height: 480px; background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1); }
|
|
.login-aside { width: 320px; background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%); padding: 40px; color: #fff; }
|
|
.aside-title { font-size: 28px; font-weight: bold; margin-bottom: 12px; display: block; }
|
|
.aside-desc { font-size: 14px; opacity: 0.9; line-height: 1.6; }
|
|
.aside-illustration { margin-top: 60px; display: flex; justify-content: center; }
|
|
.illu-box { width: 160px; height: 160px; background-color: rgba(255,255,255,0.2); border-radius: 12px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
.illu-card { width: 80px; height: 100px; background-color: #fff; border-radius: 4px; padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
.illu-avatar { width: 30px; height: 30px; background-color: #e6f7ff; border-radius: 50%; margin: 0 auto 10px; }
|
|
.illu-line { height: 4px; background-color: #f0f0f0; border-radius: 2px; margin-bottom: 8px; }
|
|
.illu-line.short { width: 60%; }
|
|
.login-main { flex: 1; padding: 40px 60px; display: flex; flex-direction: column; }
|
|
.login-tabs { display: flex; flex-direction: row; margin-bottom: 40px; border-bottom: 1px solid #f0f0f0; }
|
|
.tab-item { margin-right: 32px; padding: 0 0 12px 0; cursor: pointer; position: relative; }
|
|
.tab-text { font-size: 18px; color: #909399; }
|
|
.tab-item.active .tab-text { color: #303133; font-weight: bold; }
|
|
.tab-item.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: #2d8cf0; }
|
|
.login-form { display: flex; flex-direction: column; }
|
|
.form-item { margin-bottom: 24px; border-bottom: 1px solid #dcdfe6; padding-bottom: 8px; display: flex; flex-direction: row; align-items: center; }
|
|
.form-input { flex: 1; height: 36px; font-size: 14px; }
|
|
.forget-password { font-size: 14px; color: #2d8cf0; cursor: pointer; }
|
|
.sms-item .get-code { font-size: 14px; color: #2d8cf0; cursor: pointer; }
|
|
.form-agreement { margin-bottom: 30px; }
|
|
.agreement-label { display: flex; flex-direction: row; align-items: center; }
|
|
.agreement-cb { transform: scale(0.7); margin-right: 4px; }
|
|
.agreement-text { font-size: 12px; color: #909399; }
|
|
.agreement-link { font-size: 12px; color: #2d8cf0; cursor: pointer; }
|
|
.login-btn { width: 100%; height: 44px; background-color: #2d8cf0; color: #fff; border-radius: 4px; font-size: 16px; margin-bottom: 20px; }
|
|
.contact-box { display: flex; justify-content: center; }
|
|
.contact-text { font-size: 14px; color: #909399; cursor: pointer; }
|
|
.float-tabs { display: flex; flex-direction: column; margin-left: 1px; }
|
|
.float-tab { width: 44px; height: 90px; background-color: #f0f2f5; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 4px 4px 0; margin-bottom: 1px; cursor: pointer; }
|
|
.float-tab.active { background-color: #2d8cf0; }
|
|
.float-icon { font-size: 20px; color: #fff; margin-bottom: 8px; }
|
|
.float-icon.gray { color: #909399; }
|
|
.float-text { font-size: 12px; color: #fff; writing-mode: vertical-lr; letter-spacing: 2px; }
|
|
.float-text.gray { color: #909399; writing-mode: vertical-lr; }
|
|
.page-footer { display: flex; flex-direction: column; align-items: center; }
|
|
.footer-links { display: flex; flex-direction: row; margin-bottom: 12px; }
|
|
.footer-link { font-size: 14px; color: #909399; margin: 0 12px; }
|
|
.footer-copy { font-size: 12px; color: #c0c4cc; }
|
|
</style>
|