big-model-web/src/views/global/invite/index.vue

<template>
  <div
    class="relative size-full bg-[url('@/assets/images/login-bg.png')] bg-[length:100%_100%] bg-no-repeat"
  >
    <img
      class="absolute top-11 left-15 h-11 w-69"
      src="@/assets/images/taiji-logo.png"
    />
    <div
      class="absolute top-0 right-0 flex h-full w-[42.5rem] items-center justify-center bg-[var(--czr-dialog-bg)]"
    >
      <div class="flex w-[26.5rem] flex-col">
        <div class="text-[1.88rem] font-bold text-[#373D4C]">xxx邀请您加入</div>
        <div class="mt-4 text-[1.88rem] font-bold text-[#3363DE]">xxx组织</div>
        <div
          class="__hover mt-2 mt-12 flex h-[2.5rem] w-full items-center justify-center bg-[#3363DE] text-sm text-[#ffffff]"
          @click="onSubmit"
          v-loading="state.loading"
        >
          加入组织
        </div>
        <div class="mt-3 text-sm text-[#576275]">
          链接将在 <span class="text-[#3363DE]">2025-07-31 12:22:33</span> 失效
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, reactive, ref, onMounted } from 'vue'
import { User, Lock, Clock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/stores'

const AppStore = useAppStore()
const router = useRouter()
const emit = defineEmits([])
const props = defineProps({})
const { proxy }: any = getCurrentInstance()
const state: any = reactive({
  loading: false,
})
const onSubmit = () => {
  if (!state.loading) {
    state.loading = true
    ElMessage.success('加入组织成功！')
    router.replace({ name: 'root' })
  }
}
onMounted(() => {})
</script>

<style lang="scss" scoped></style>