create-pubinfo 2.0.0-beta.2 → 2.0.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +173 -125
- package/dist/index.js +167 -120
- package/package.json +3 -2
- package/templates/pubinfo-template/.browserslistrc +5 -0
- package/templates/pubinfo-template/.editorconfig +10 -0
- package/templates/pubinfo-template/.env +12 -0
- package/templates/pubinfo-template/.env.development +6 -0
- package/templates/pubinfo-template/.env.production +10 -0
- package/templates/pubinfo-template/commitlint.config.js +66 -0
- package/templates/pubinfo-template/eslint.config.ts +3 -0
- package/templates/pubinfo-template/index.html +47 -0
- package/templates/pubinfo-template/openapi.config.ts +33 -0
- package/templates/pubinfo-template/package.json +52 -0
- package/templates/pubinfo-template/pubinfo.config.ts +9 -0
- package/templates/pubinfo-template/public/browser_upgrade/chrome.png +0 -0
- package/templates/pubinfo-template/public/browser_upgrade/edge.png +0 -0
- package/templates/pubinfo-template/public/browser_upgrade/index.css +49 -0
- package/templates/pubinfo-template/public/loading.css +92 -0
- package/templates/pubinfo-template/src/App.vue +15 -0
- package/templates/pubinfo-template/src/api/modules/auth/index.ts +3 -0
- package/templates/pubinfo-template/src/api/modules/auth/renzhengfuwu.ts +145 -0
- package/templates/pubinfo-template/src/api/modules/auth/typings.d.ts +97 -0
- package/templates/pubinfo-template/src/api/request.ts +124 -0
- package/templates/pubinfo-template/src/assets/icons/logo.svg +1 -0
- package/templates/pubinfo-template/src/assets/icons/process-management.svg +1 -0
- package/templates/pubinfo-template/src/assets/icons/workbench.svg +1 -0
- package/templates/pubinfo-template/src/assets/images/login-bg.webp +0 -0
- package/templates/pubinfo-template/src/assets/images/login-bg_dark.webp +0 -0
- package/templates/pubinfo-template/src/assets/images/login-small.png +0 -0
- package/templates/pubinfo-template/src/assets/images/login-small_dark.webp +0 -0
- package/templates/pubinfo-template/src/components/UIProvider/index.vue +47 -0
- package/templates/pubinfo-template/src/layouts/index.vue +38 -0
- package/templates/pubinfo-template/src/main.ts +23 -0
- package/templates/pubinfo-template/src/modules/auth.ts +21 -0
- package/templates/pubinfo-template/src/modules/rbac.ts +52 -0
- package/templates/pubinfo-template/src/routes/index.ts +71 -0
- package/templates/pubinfo-template/src/routes/modules/demo/breadcrumb.example.ts +62 -0
- package/templates/pubinfo-template/src/routes/modules/demo/link.ts +15 -0
- package/templates/pubinfo-template/src/routes/modules/demo/multilevel.menu.example.ts +68 -0
- package/templates/pubinfo-template/src/routes/modules/demo/other.page.ts +37 -0
- package/templates/pubinfo-template/src/routes/modules/demo/single.ts +14 -0
- package/templates/pubinfo-template/src/settings.ts +8 -0
- package/templates/pubinfo-template/src/stores/index.ts +2 -0
- package/templates/pubinfo-template/src/stores/modules/conter.ts +16 -0
- package/templates/pubinfo-template/src/views/demo/breadcrumb_example/detail1.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/breadcrumb_example/detail2.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/breadcrumb_example/list1.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/breadcrumb_example/list2.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/multilevel_menu_example/level2/level3/page1.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/multilevel_menu_example/level2/level3/page2.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/multilevel_menu_example/level2/page.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/multilevel_menu_example/page.vue +11 -0
- package/templates/pubinfo-template/src/views/demo/other_page/des.vue +13 -0
- package/templates/pubinfo-template/src/views/demo/other_page/index.vue +25 -0
- package/templates/pubinfo-template/src/views/demo/preview-empty/index.vue +17 -0
- package/templates/pubinfo-template/src/views/demo/single/index.vue +13 -0
- package/templates/pubinfo-template/src/views/system/index.vue +5 -0
- package/templates/pubinfo-template/src/views/system/login/components/LoginForm.vue +68 -0
- package/templates/pubinfo-template/src/views/system/login/components/LoginWithPhone.vue +213 -0
- package/templates/pubinfo-template/src/views/system/login/components/PasswordLogin.vue +199 -0
- package/templates/pubinfo-template/src/views/system/login/components/Savephone.vue +17 -0
- package/templates/pubinfo-template/src/views/system/login/components/Useragreement.vue +26 -0
- package/templates/pubinfo-template/src/views/system/login/composables.ts +84 -0
- package/templates/pubinfo-template/src/views/system/login/index.vue +165 -0
- package/templates/pubinfo-template/stylelint.config.js +3 -0
- package/templates/pubinfo-template/tsconfig.json +3 -0
- package/templates/pubinfo-template/uno.config.ts +17 -0
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { createAuth, withModule } from '@pubinfo/module-auth';
|
|
2
|
+
import FourA from '@pubinfo/module-auth/providers/4A';
|
|
3
|
+
|
|
4
|
+
export const auth = createAuth({
|
|
5
|
+
baseURL: import.meta.env.VITE_APP_API_BASEURL,
|
|
6
|
+
providers: [
|
|
7
|
+
FourA({
|
|
8
|
+
clientId: import.meta.env.VITE_AUTH_4A_CLIENT_ID,
|
|
9
|
+
redirectUri: import.meta.env.VITE_AUTH_4A_REDIRECT_URI,
|
|
10
|
+
}),
|
|
11
|
+
],
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* 登录相关配置
|
|
16
|
+
*/
|
|
17
|
+
export function setupAuth() {
|
|
18
|
+
return withModule(auth, {
|
|
19
|
+
redirectTo: '/',
|
|
20
|
+
});
|
|
21
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { rbac } from '@pubinfo/module-rbac';
|
|
2
|
+
import '@pubinfo/module-rbac/style.css';
|
|
3
|
+
|
|
4
|
+
export function setupRbac() {
|
|
5
|
+
return rbac({
|
|
6
|
+
pages: {
|
|
7
|
+
AuthorityManage: {
|
|
8
|
+
Resource: true,
|
|
9
|
+
Role: true,
|
|
10
|
+
RoleGroup: true,
|
|
11
|
+
DataPermission: true,
|
|
12
|
+
Organization: true,
|
|
13
|
+
User: true,
|
|
14
|
+
Tenant: import.meta.env.VITE_TENANT_ENABLED === 'true',
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
SystemManage: {
|
|
18
|
+
DictionaryPage: {
|
|
19
|
+
Dictionary: true,
|
|
20
|
+
DictionaryItem: true,
|
|
21
|
+
},
|
|
22
|
+
Position: true,
|
|
23
|
+
Region: true,
|
|
24
|
+
Group: true,
|
|
25
|
+
},
|
|
26
|
+
|
|
27
|
+
SettingManage: {
|
|
28
|
+
ThemeSetting: true,
|
|
29
|
+
LayoutSetting: true,
|
|
30
|
+
PageAnimationSetting: true,
|
|
31
|
+
PageSizeSetting: true,
|
|
32
|
+
MenuSetting: true,
|
|
33
|
+
TabbarSetting: true,
|
|
34
|
+
ToolbarSetting: true,
|
|
35
|
+
BreadcrumbSetting: true,
|
|
36
|
+
OtherSetting: true,
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
SafeManage: {
|
|
40
|
+
Blacklist: true,
|
|
41
|
+
Whitelist: true,
|
|
42
|
+
SafeSetting: true,
|
|
43
|
+
WatermarkSetting: true,
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
LogManage: {
|
|
47
|
+
LoginHistory: true,
|
|
48
|
+
OperateHistory: true,
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import Login from '@/views/system/login/index.vue';
|
|
2
|
+
import { defineAsyncRoutes, defineSystemRoutes } from 'pubinfo';
|
|
3
|
+
|
|
4
|
+
import breadcrumb from './modules/demo/breadcrumb.example';
|
|
5
|
+
import Link from './modules/demo/link';
|
|
6
|
+
import MultilevelMenuExample from './modules/demo/multilevel.menu.example';
|
|
7
|
+
import OtherPage from './modules/demo/other.page';
|
|
8
|
+
import Single from './modules/demo/single';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* ========================================================================
|
|
12
|
+
* 动态路由(异步路由、导航栏路由)
|
|
13
|
+
*========================================================================*
|
|
14
|
+
*/
|
|
15
|
+
defineAsyncRoutes([
|
|
16
|
+
{
|
|
17
|
+
meta: {
|
|
18
|
+
title: '演示管理系统',
|
|
19
|
+
icon: 'workbench',
|
|
20
|
+
},
|
|
21
|
+
children: [
|
|
22
|
+
Single,
|
|
23
|
+
MultilevelMenuExample,
|
|
24
|
+
OtherPage,
|
|
25
|
+
Link,
|
|
26
|
+
breadcrumb,
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
meta: {
|
|
31
|
+
title: '演示系统1',
|
|
32
|
+
icon: 'process-management',
|
|
33
|
+
isDev: true,
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
]);
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* ========================================================================
|
|
40
|
+
* 系统路由(包含布局)
|
|
41
|
+
*========================================================================*
|
|
42
|
+
*/
|
|
43
|
+
defineSystemRoutes([
|
|
44
|
+
{
|
|
45
|
+
path: '/',
|
|
46
|
+
name: 'Home',
|
|
47
|
+
component: () => import('@/views/system/index.vue'),
|
|
48
|
+
meta: {
|
|
49
|
+
title: '首页',
|
|
50
|
+
icon: 'i-ant-design:home-twotone',
|
|
51
|
+
breadcrumb: false,
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
]);
|
|
55
|
+
|
|
56
|
+
/**
|
|
57
|
+
* ========================================================================
|
|
58
|
+
* 固定路由(默认路由)
|
|
59
|
+
*========================================================================*
|
|
60
|
+
*/
|
|
61
|
+
export const constantRoutes = [
|
|
62
|
+
{
|
|
63
|
+
path: '/login',
|
|
64
|
+
name: 'Login',
|
|
65
|
+
component: Login,
|
|
66
|
+
meta: {
|
|
67
|
+
whiteList: true,
|
|
68
|
+
title: '登录',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
];
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import type { RouteRecordRaw } from 'vue-router';
|
|
2
|
+
|
|
3
|
+
const routes: RouteRecordRaw = {
|
|
4
|
+
path: '/breadcrumb_example',
|
|
5
|
+
redirect: '/breadcrumb_example/list1',
|
|
6
|
+
name: 'breadcrumbExample',
|
|
7
|
+
meta: {
|
|
8
|
+
title: '面包屑导航',
|
|
9
|
+
icon: 'i-solar-confetti-minimalistic-bold',
|
|
10
|
+
},
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
path: 'list1',
|
|
14
|
+
name: 'breadcrumbExampleList1',
|
|
15
|
+
component: () => import('@/views/demo/breadcrumb_example/list1.vue'),
|
|
16
|
+
meta: {
|
|
17
|
+
title: '列表1(平级模式)',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
path: 'detail1',
|
|
22
|
+
name: 'breadcrumbExampleDetail1',
|
|
23
|
+
component: () => import('@/views/demo/breadcrumb_example/detail1.vue'),
|
|
24
|
+
meta: {
|
|
25
|
+
title: '详情1',
|
|
26
|
+
sidebar: false,
|
|
27
|
+
activeMenu: '/breadcrumb_example/list1',
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
path: 'list2',
|
|
32
|
+
name: 'breadcrumbExampleList2',
|
|
33
|
+
redirect: '/breadcrumb_example/demo/list2',
|
|
34
|
+
meta: {
|
|
35
|
+
title: '列表2(层级模式)',
|
|
36
|
+
},
|
|
37
|
+
children: [
|
|
38
|
+
{
|
|
39
|
+
path: '',
|
|
40
|
+
component: () => import('@/views/demo/breadcrumb_example/list2.vue'),
|
|
41
|
+
meta: {
|
|
42
|
+
title: '列表2(层级模式)',
|
|
43
|
+
sidebar: false,
|
|
44
|
+
breadcrumb: false,
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
path: 'detail2',
|
|
49
|
+
name: 'breadcrumbExampleDetail2',
|
|
50
|
+
component: () => import('@/views/demo/breadcrumb_example/detail2.vue'),
|
|
51
|
+
meta: {
|
|
52
|
+
title: '详情2',
|
|
53
|
+
sidebar: false,
|
|
54
|
+
activeMenu: '/breadcrumb_example/list2',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
],
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export default routes;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { RouteRecordRaw } from 'vue-router';
|
|
2
|
+
|
|
3
|
+
const routes: RouteRecordRaw = {
|
|
4
|
+
path: '/link',
|
|
5
|
+
name: 'Link',
|
|
6
|
+
redirect: '',
|
|
7
|
+
meta: {
|
|
8
|
+
title: '跳转路由',
|
|
9
|
+
singleMenu: true,
|
|
10
|
+
icon: 'i-solar-confetti-minimalistic-bold',
|
|
11
|
+
link: 'http://124.223.184.245:10000/docs/',
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export default routes;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import type { RouteRecordRaw } from 'vue-router';
|
|
2
|
+
|
|
3
|
+
const routes: RouteRecordRaw = {
|
|
4
|
+
path: '/multilevel_menu_example',
|
|
5
|
+
redirect: '/multilevel_menu_example/page',
|
|
6
|
+
name: 'multilevelMenuExample',
|
|
7
|
+
meta: {
|
|
8
|
+
title: '多级导航',
|
|
9
|
+
icon: 'i-heroicons-solid:menu-alt-3',
|
|
10
|
+
},
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
path: 'page',
|
|
14
|
+
name: 'multilevelMenuExample1',
|
|
15
|
+
component: () => import('@/views/demo/multilevel_menu_example/page.vue'),
|
|
16
|
+
meta: {
|
|
17
|
+
title: '导航1',
|
|
18
|
+
icon: 'i-heroicons-solid:menu-alt-3',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
path: 'level2',
|
|
23
|
+
name: 'multilevelMenuExample2',
|
|
24
|
+
redirect: '/multilevel_menu_example/level2/page',
|
|
25
|
+
meta: {
|
|
26
|
+
title: '导航2',
|
|
27
|
+
},
|
|
28
|
+
children: [
|
|
29
|
+
{
|
|
30
|
+
path: 'page',
|
|
31
|
+
name: 'multilevelMenuExample2-1',
|
|
32
|
+
component: () => import('@/views/demo/multilevel_menu_example/level2/page.vue'),
|
|
33
|
+
meta: {
|
|
34
|
+
title: '导航2-1',
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
path: 'level3',
|
|
39
|
+
name: 'multilevelMenuExample2-2',
|
|
40
|
+
redirect: '/multilevel_menu_example/level2/level3/page1',
|
|
41
|
+
meta: {
|
|
42
|
+
title: '导航2-2',
|
|
43
|
+
},
|
|
44
|
+
children: [
|
|
45
|
+
{
|
|
46
|
+
path: 'page1',
|
|
47
|
+
name: 'multilevelMenuExample2-2-1',
|
|
48
|
+
component: () => import('@/views/demo/multilevel_menu_example/level2/level3/page1.vue'),
|
|
49
|
+
meta: {
|
|
50
|
+
title: '导航2-2-1',
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
path: 'page2',
|
|
55
|
+
name: 'multilevelMenuExample2-2-2',
|
|
56
|
+
component: () => import('@/views/demo/multilevel_menu_example/level2/level3/page2.vue'),
|
|
57
|
+
meta: {
|
|
58
|
+
title: '导航2-2-2',
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
],
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export default routes;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { RouteRecordRaw } from 'vue-router';
|
|
2
|
+
|
|
3
|
+
const routes: RouteRecordRaw = {
|
|
4
|
+
path: '/other-page',
|
|
5
|
+
redirect: '/other-page/list',
|
|
6
|
+
name: 'OtherPage',
|
|
7
|
+
meta: {
|
|
8
|
+
title: '下探页面',
|
|
9
|
+
icon: 'i-solar-confetti-minimalistic-bold',
|
|
10
|
+
},
|
|
11
|
+
children: [
|
|
12
|
+
{
|
|
13
|
+
path: 'list',
|
|
14
|
+
name: 'OtherPageList',
|
|
15
|
+
component: () => import('@/views/demo/other_page/index.vue'),
|
|
16
|
+
meta: {
|
|
17
|
+
title: '列表页',
|
|
18
|
+
sidebar: false,
|
|
19
|
+
breadcrumb: false,
|
|
20
|
+
activeMenu: '/other-page',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
path: 'detail',
|
|
25
|
+
name: 'OtherPageDetail',
|
|
26
|
+
component: () => import('@/views/demo/other_page/des.vue'),
|
|
27
|
+
meta: {
|
|
28
|
+
title: '详情页',
|
|
29
|
+
sidebar: false,
|
|
30
|
+
breadcrumb: true,
|
|
31
|
+
activeMenu: '/other-page',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
],
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export default routes;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { RouteRecordRaw } from 'vue-router';
|
|
2
|
+
|
|
3
|
+
const routes: RouteRecordRaw = {
|
|
4
|
+
path: '/single',
|
|
5
|
+
component: () => import('@/views/demo/single/index.vue'),
|
|
6
|
+
name: 'Single',
|
|
7
|
+
meta: {
|
|
8
|
+
title: '单页面路由',
|
|
9
|
+
singleMenu: true,
|
|
10
|
+
icon: 'i-solar-confetti-minimalistic-bold',
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default routes;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { defineStore } from 'pinia';
|
|
2
|
+
import { computed, ref } from 'vue';
|
|
3
|
+
|
|
4
|
+
export const useCounterStore = defineStore('counter', () => {
|
|
5
|
+
const count = ref(0);
|
|
6
|
+
const doubleCount = computed(() => count.value * 2);
|
|
7
|
+
function increment() {
|
|
8
|
+
count.value++;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
return {
|
|
12
|
+
count,
|
|
13
|
+
doubleCount,
|
|
14
|
+
increment,
|
|
15
|
+
};
|
|
16
|
+
});
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { PageMain } from 'pubinfo';
|
|
3
|
+
|
|
4
|
+
defineOptions({
|
|
5
|
+
name: 'OtherPage',
|
|
6
|
+
});
|
|
7
|
+
/* =============================================
|
|
8
|
+
= 逻辑代码 =
|
|
9
|
+
============================================= */
|
|
10
|
+
const router = useRouter();
|
|
11
|
+
function jump() {
|
|
12
|
+
router.push({
|
|
13
|
+
name: 'OtherPageDetail',
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<PageMain>
|
|
20
|
+
列表页
|
|
21
|
+
<a-button type="primary" @click="jump">
|
|
22
|
+
点击跳转入详情页
|
|
23
|
+
</a-button>
|
|
24
|
+
</PageMain>
|
|
25
|
+
</template>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/* =============================================
|
|
3
|
+
= Vue SFC Options 配置 =
|
|
4
|
+
============================================= */
|
|
5
|
+
defineOptions({
|
|
6
|
+
name: 'PreviewEmpty',
|
|
7
|
+
});
|
|
8
|
+
/* =============================================
|
|
9
|
+
= 逻辑代码 =
|
|
10
|
+
============================================= */
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div>
|
|
15
|
+
空白展示页面
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { useLoginTabs } from '../composables';
|
|
3
|
+
|
|
4
|
+
defineOptions({
|
|
5
|
+
name: 'LoginFrom',
|
|
6
|
+
});
|
|
7
|
+
|
|
8
|
+
const { tabs, initialTab, changeActiveTab } = useLoginTabs();
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<template>
|
|
12
|
+
<div class="login-warp">
|
|
13
|
+
<div class="login-tabs">
|
|
14
|
+
<div
|
|
15
|
+
v-for="(tab, index) in tabs"
|
|
16
|
+
:key="tab.title"
|
|
17
|
+
class="login-tab"
|
|
18
|
+
:class="{ active: initialTab === index }"
|
|
19
|
+
:style="{ width: `${100 / tabs.length}%` }"
|
|
20
|
+
@click="changeActiveTab(index)"
|
|
21
|
+
>
|
|
22
|
+
{{ tab.title }}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="login-form">
|
|
26
|
+
<component :is="tabs[initialTab].component" :key="tabs[initialTab].title" :name="tabs[initialTab].title" />
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
30
|
+
|
|
31
|
+
<style scoped lang="scss">
|
|
32
|
+
.login-warp {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-direction: column;
|
|
35
|
+
width: 456px;
|
|
36
|
+
background: transparent;
|
|
37
|
+
|
|
38
|
+
.login-tabs {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: row;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
border: 1px solid #e7e8e9;
|
|
43
|
+
border-radius: 4px;
|
|
44
|
+
|
|
45
|
+
.login-tab {
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
justify-content: center;
|
|
50
|
+
height: 40px;
|
|
51
|
+
font-size: 16px;
|
|
52
|
+
color: #8a8e92;
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
border-radius: 4px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.active {
|
|
58
|
+
color: #2f6bff;
|
|
59
|
+
background: #ecf1fd;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.login-form {
|
|
64
|
+
position: relative;
|
|
65
|
+
min-height: 350px;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
</style>
|