Files
xl-mobile/src/pages/login/index.vue

59 lines
1.7 KiB
Vue
Raw Normal View History

2025-03-25 16:35:39 +08:00
<script setup>
2025-05-08 19:54:38 +08:00
import BGICON from "../../static/icons/bg.png";
2025-03-25 16:35:39 +08:00
import XNav from "../../components/XNav.vue";
import BulletChat from "./BulletChat.vue";
import {ref} from "vue";
import AccountLogin from "./AccountLogin.vue";
import PhoneLogin from "./PhoneLogin.vue";
2025-03-26 19:10:41 +08:00
import WXOfficialAccount from "../../components/WXOfficialAccount.vue";
2025-03-25 16:35:39 +08:00
const currentTab = ref(0);
2025-03-26 19:10:41 +08:00
const showWX = ref(false);
2025-03-25 16:35:39 +08:00
const tabs = [
{
name: '手机号登录',
},
{
name: '账号密码登录',
},
];
</script>
<template>
<!--登陆-->
2025-05-08 19:54:38 +08:00
<XNav :showBack="false"></XNav>
2025-03-25 16:35:39 +08:00
<view class="h-[390rpx] relative overflow-hidden">
2025-05-08 19:54:38 +08:00
<image class="!absolute left-1/2 top-1/2 -translate-1/2 !w-[1198rpx] !h-[806rpx] !pb-[40rpx]"
:src="BGICON"></image>
2025-03-25 16:35:39 +08:00
2025-05-08 19:54:38 +08:00
<view class="!flex gap-[16rpx] items-center !mt-[56rpx] !ml-[16rpx] relative z-10">
2025-03-25 16:35:39 +08:00
<image class="!w-[68rpx] !h-[68rpx]" src="/static/icons/hi.png"></image>
<view class="title">欢迎登录系统</view>
</view>
<BulletChat></BulletChat>
</view>
2025-05-08 19:54:38 +08:00
<view class="h-full bg-white !-mt-[20rpx] rounded-t-[20rpx] relative z-10">
<tui-tabs class="!mx-auto !mb-[40rpx]" :tabs="tabs" :currentTab="currentTab" itemWidth="50%"
@change="({index}) => currentTab=index" :width="300" :sliderWidth="130"></tui-tabs>
2025-03-25 16:35:39 +08:00
<PhoneLogin v-if="currentTab === 0"></PhoneLogin>
<AccountLogin v-else></AccountLogin>
</view>
2025-03-26 19:10:41 +08:00
<w-x-official-account v-model:show="showWX"></w-x-official-account>
2025-03-25 16:35:39 +08:00
</template>
<style lang="scss" scoped>
.title {
color: rgb(29, 33, 41);
font-size: 26px;
font-weight: 700;
line-height: 28px;
letter-spacing: 0;
text-align: left;
}
</style>