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

<script setup>
import BGICON from "../../static/icons/bg.png";
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";
import WXOfficialAccount from "../../components/WXOfficialAccount.vue";
import { onLoad } from "@dcloudio/uni-app";

const currentTab = ref(0);
const showWX = ref(false);
const tabs = [
    {
        name: '手机号登录',
    },
    {
        name: '账号密码登录',
    },
];

onLoad((options) => {
    const { showWX: _showWX } = options;
    showWX.value = _showWX === '1';
});
</script>

<template>
    <!--登陆-->
    <XNav :showBack="false"></XNav>

    <view class="box">
        <image class="boximg" :src="BGICON">
        </image>

        <view class="hi-box">
            <image class="hi" src="/static/icons/hi.png"></image>
            <view class="title">欢迎登录系统</view>
        </view>

        <BulletChat></BulletChat>
    </view>

    <view class="form">
        <tui-tabs class="tabs" :tabs="tabs" :currentTab="currentTab" itemWidth="50%"
            @change="({ index }) => currentTab = index" :width="300" :sliderWidth="130"></tui-tabs>

        <PhoneLogin v-if="currentTab === 0"></PhoneLogin>
        <AccountLogin v-else></AccountLogin>
    </view>

    <w-x-official-account v-model:show="showWX"></w-x-official-account>
</template>

<style lang="scss" scoped>
.tabs {
    @apply mx-auto mb-[40rpx];
}

.form {
    @apply h-full -mt-[20rpx] rounded-t-[20rpx] relative z-10;
    background-color: #fff;
}

.boximg {
    @apply absolute left-1/2 top-1/2 -translate-1/2 w-[1198rpx] h-[806rpx] pb-[40rpx];
}

.box {
    @apply h-[390rpx] relative overflow-hidden;
}

.hi-box {
    @apply flex gap-[16rpx] items-center mt-[56rpx] ml-[16rpx] relative z-10;
}

.hi {
    @apply w-[68rpx] h-[68rpx];
}

.title {
    color: rgb(29, 33, 41);
    font-size: 26px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    text-align: left;
}
</style>

<style lang="scss">
page {
    background-color: #fff;
}
</style>