mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 19:29:04 +08:00
refactor(style): remove tailwind css
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="h-full w-full flex justify-center items-center">
|
||||
<div class="welcome">
|
||||
<House />
|
||||
</div>
|
||||
</template>
|
||||
@@ -14,3 +14,12 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.welcome {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,11 +1,8 @@
|
||||
<template>
|
||||
<div class="px-64">
|
||||
<div class="px-10">
|
||||
<Alert message="点内外部触发事件" show-icon class="mt-4"></Alert>
|
||||
<ClickOutSide @clickOutside="handleClickOutside" class="flex justify-center mt-10">
|
||||
<div
|
||||
@click="innerClick"
|
||||
class="bg-primary w-full h-64 flex justify-center items-center text-2xl text-white rounded-lg shadow-lg"
|
||||
>
|
||||
<div @click="innerClick" class="demo-box">
|
||||
{{ text }}
|
||||
</div>
|
||||
</ClickOutSide>
|
||||
@@ -30,3 +27,17 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.demo-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: #408ede;
|
||||
border-radius: 10px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
@@ -8,11 +8,11 @@
|
||||
<a-button @click="scrollTo(0)" class="mr-2">滚动到顶部</a-button>
|
||||
<a-button @click="scrollBottom()" class="mr-2">滚动到底部</a-button>
|
||||
</div>
|
||||
<div class="w-1/2 h-64 bg-white">
|
||||
<div class="scroll-wrap">
|
||||
<ScrollContainer class="mt-4" ref="scrollRef">
|
||||
<ul class="p-3">
|
||||
<template v-for="index in 100" :key="index">
|
||||
<li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
@@ -50,3 +50,10 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scroll-wrap {
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -9,9 +9,9 @@
|
||||
</VirtualScroll>
|
||||
</div>
|
||||
|
||||
<Divider>即使不可见,也预先加载30条数据,防止空白</Divider>
|
||||
<Divider>即使不可见,也预先加载50条数据,防止空白</Divider>
|
||||
<div class="virtual-scroll-demo-wrap">
|
||||
<VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="30">
|
||||
<VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
|
||||
<template v-slot="{ item }">
|
||||
<div class="virtual-scroll-demo__item">{{ item.title }}</div>
|
||||
</template>
|
||||
|
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<Alert message="抽取el-scrollbar,并对其进行扩展,滚动条美化,适用于各个浏览器" type="info" />
|
||||
<div class="w-1/2 h-64 bg-white">
|
||||
<div class="scroll-wrap">
|
||||
<ScrollContainer class="mt-4">
|
||||
<ul class="p-3">
|
||||
<template v-for="index in 100" :key="index">
|
||||
<li class="leading-8 px-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
<li class="p-2" :style="{ border: '1px solid #eee' }">{{ index }}</li>
|
||||
</template>
|
||||
</ul>
|
||||
</ScrollContainer>
|
||||
@@ -24,3 +24,10 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.scroll-wrap {
|
||||
width: 50%;
|
||||
height: 300px;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="p-4 flex justify-center">
|
||||
<div class="w-1/2 bg-white p-10 rounded-md">
|
||||
<div class="demo-wrap p-10">
|
||||
<StrengthMeter placeholder="默认" />
|
||||
<StrengthMeter placeholder="禁用" disabled />
|
||||
<br />
|
||||
@@ -21,3 +21,10 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.demo-wrap {
|
||||
width: 50%;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
@@ -21,3 +21,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bg-gray-700 {
|
||||
background: #4a5568;
|
||||
}
|
||||
</style>
|
||||
|
@@ -88,3 +88,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bg-gray-700 {
|
||||
background: #4a5568;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<div class="p-4">
|
||||
<CollapseContainer
|
||||
class="px-20 bg-white w-full h-32 rounded-md"
|
||||
title="在下面输入框输入文本,切换后回来内容会保存"
|
||||
>
|
||||
<CollapseContainer title="在下面输入框输入文本,切换后回来内容会保存">
|
||||
<a-input placeholder="请输入" />
|
||||
</CollapseContainer>
|
||||
|
||||
<CollapseContainer class="px-20 mt-10 bg-white w-full h-32 rounded-md" title="标签页操作">
|
||||
<CollapseContainer class="mt-4 px-4" title="标签页操作">
|
||||
<a-button class="mr-2" @click="closeAll">关闭所有</a-button>
|
||||
<a-button class="mr-2" @click="closeLeft">关闭左侧</a-button>
|
||||
<a-button class="mr-2" @click="closeRight">关闭右侧</a-button>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="p-10 m-4 rounded-md bg-white">
|
||||
<div class="p-4 m-4 demo">
|
||||
<Alert message="刷新后会还原" show-icon />
|
||||
|
||||
<CurrentPermissionMode />
|
||||
@@ -83,3 +83,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.demo {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="p-10 m-4 rounded-md bg-white">
|
||||
<div class="p-4 m-4 demo">
|
||||
<Alert
|
||||
message="目前mock了两组数据, id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看"
|
||||
show-icon
|
||||
@@ -35,3 +35,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.demo {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
|
||||
Super 角色可见
|
||||
</div>
|
||||
<div class="m-10 auth-page"> Super 角色可见 </div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.auth-page {
|
||||
display: flex;
|
||||
height: 300px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: #409efe;
|
||||
border-radius: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<div class="m-10 bg-primary text-2xl h-64 rounded-lg flex justify-center items-center text-white">
|
||||
Test 角色可见
|
||||
</div>
|
||||
<div class="m-10 auth-page"> Test 角色可见 </div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.auth-page {
|
||||
display: flex;
|
||||
height: 300px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
background: #409efe;
|
||||
border-radius: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="p-10 m-4 rounded-md bg-white">
|
||||
<div class="demo p-4 m-4">
|
||||
<Alert
|
||||
message="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口"
|
||||
show-icon
|
||||
@@ -82,3 +82,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.demo {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="p-10 m-4 rounded-md bg-white">
|
||||
<div class="p-4 m-4 demo">
|
||||
<Alert
|
||||
message="由于刷新的时候会请求用户信息接口,会根据接口重置角色信息,所以刷新后界面会恢复原样,如果不需要,可以注释 src/layout/default/index内的获取用户信息接口"
|
||||
show-icon
|
||||
@@ -46,3 +46,8 @@
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.demo {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
@@ -17,7 +17,7 @@
|
||||
<a-button @click="deleteNodeByKey('2-2')" class="mr-2">删除parent3节点</a-button>
|
||||
<a-button @click="updateNodeByKey('1-1')" class="mr-2">更新parent2节点</a-button>
|
||||
</div>
|
||||
<CollapseContainer title="函数操作" class="w-1/3 mr-4" :canExpan="false">
|
||||
<CollapseContainer title="函数操作" class="mr-4" :canExpan="false" :style="{ width: '33%' }">
|
||||
<BasicTree :treeData="treeData" ref="treeRef" :checkable="true" />
|
||||
</CollapseContainer>
|
||||
</div>
|
||||
|
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="flex p-4">
|
||||
<CollapseContainer title="右侧操作按钮" class="w-1/3 mr-4">
|
||||
<CollapseContainer title="右侧操作按钮" class="mr-4" :style="{ width: '33%' }">
|
||||
<BasicTree :treeData="treeData" :actionList="actionList" />
|
||||
</CollapseContainer>
|
||||
|
||||
<CollapseContainer title="右键菜单" class="w-1/3 mr-4">
|
||||
<CollapseContainer title="右键菜单" class="mr-4" :style="{ width: '33%' }">
|
||||
<BasicTree :treeData="treeData" :beforeRightClick="getRightMenuList" />
|
||||
</CollapseContainer>
|
||||
</div>
|
||||
|
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="flex p-4">
|
||||
<CollapseContainer title="基础示例" class="w-1/3 mr-4">
|
||||
<CollapseContainer title="基础示例" :style="{ width: '33%' }" class="mr-4">
|
||||
<BasicTree :treeData="treeData" />
|
||||
</CollapseContainer>
|
||||
|
||||
<CollapseContainer title="可勾选" class="w-1/3 mr-4">
|
||||
<CollapseContainer title="可勾选" class="mr-4" :style="{ width: '33%' }">
|
||||
<BasicTree :treeData="treeData" :checkable="true" />
|
||||
</CollapseContainer>
|
||||
|
||||
<CollapseContainer title="默认展开/勾选示例" class="w-1/3">
|
||||
<CollapseContainer title="默认展开/勾选示例" :style="{ width: '33%' }">
|
||||
<BasicTree
|
||||
:treeData="treeData"
|
||||
:checkable="true"
|
||||
|
@@ -1,110 +0,0 @@
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
<a-button @click="test">change </a-button>
|
||||
<div class="sw">
|
||||
<Scrollbar ref="a">
|
||||
<div class="ss">13123</div>
|
||||
</Scrollbar>
|
||||
</div>
|
||||
|
||||
<a-button @click="test1" type="primary">change</a-button>
|
||||
<ScrollYTransition>
|
||||
<div class="box" v-show="show"> 1 </div>
|
||||
</ScrollYTransition>
|
||||
|
||||
<!-- <BasicModal /> -->
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { Scrollbar } from '/@/components/Scrollbar/index';
|
||||
import { ScrollContainer } from '/@/components/Container/index';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import { useThemeMode } from '/@/useApp';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import {
|
||||
CollapseTransition,
|
||||
ExpandXTransition,
|
||||
ScaleTransition,
|
||||
ScaleRotateTransition,
|
||||
ScrollYTransition,
|
||||
} from '/@/components/Transition';
|
||||
import { ThemeModeEnum } from '../enums/appEnum';
|
||||
// import { BasicModal } from '/@/components/modal';
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: {
|
||||
Scrollbar,
|
||||
CollapseTransition,
|
||||
ExpandXTransition,
|
||||
ScaleTransition,
|
||||
ScaleRotateTransition,
|
||||
ScrollYTransition,
|
||||
ScrollContainer,
|
||||
// BasicModal
|
||||
},
|
||||
setup() {
|
||||
const { createMessage } = useMessage();
|
||||
createMessage.success({
|
||||
content: '123',
|
||||
duration: 999999,
|
||||
});
|
||||
// createMessage.error('123');
|
||||
// createMessage.info('123');
|
||||
// createMessage.warning('123');
|
||||
// createConfirm({
|
||||
// iconType: 'success',
|
||||
// title: '123',
|
||||
// content: '123',
|
||||
// });
|
||||
const { runChangeThemeMode } = useThemeMode(ThemeModeEnum.DARK);
|
||||
let msg = ref('hello Home');
|
||||
const show = ref(true);
|
||||
function test() {
|
||||
msg.value = 'hello Home1';
|
||||
}
|
||||
defHttp.request({
|
||||
method: 'post',
|
||||
url: '/login',
|
||||
params: {
|
||||
username: 'vben',
|
||||
password: '123456',
|
||||
},
|
||||
});
|
||||
|
||||
const a = ref(null);
|
||||
function test1() {
|
||||
runChangeThemeMode();
|
||||
// show.value = !show.value;
|
||||
// a.value.scrollTo(200);
|
||||
}
|
||||
return {
|
||||
a,
|
||||
msg,
|
||||
test,
|
||||
show,
|
||||
test1,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sw {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border: 1px solid red;
|
||||
|
||||
.scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ss {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #000;
|
||||
}
|
||||
</style>
|
@@ -15,6 +15,7 @@ import { useRoute } from 'vue-router';
|
||||
import { useGo, useRedo } from '/@/hooks/web/usePage';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
|
||||
import './exception.less';
|
||||
interface MapValue {
|
||||
title: string;
|
||||
subTitle: string;
|
||||
@@ -105,7 +106,7 @@ export default defineComponent({
|
||||
const { title, subTitle, btnText, icon, handler } = unref(getMapValue) || {};
|
||||
return (
|
||||
<Result
|
||||
class="flex items-center flex-col"
|
||||
class="exception "
|
||||
title={props.title || title}
|
||||
sub-title={props.subTitle || subTitle}
|
||||
>
|
||||
|
5
src/views/sys/exception/exception.less
Normal file
5
src/views/sys/exception/exception.less
Normal file
@@ -0,0 +1,5 @@
|
||||
.exception {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
@@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<div class="login h-screen relative">
|
||||
<div class="login-mask h-full hidden lg:block" />
|
||||
<div
|
||||
class="h-full absolute right-0 top-0 w-full lg:w-2/5 xl:w-1/3 flex justify-center items-center"
|
||||
>
|
||||
<div class="login-form bg-white w-full rounded-sm border-solid bg-clip-padding mx-6 xl:mx-14">
|
||||
<div class="w-full h-full border border-gray-600 px-2 py-10 rounded-sm">
|
||||
<header class="flex justify-center items-center">
|
||||
<img src="/@/assets/images/logo.png" class="w-12 mr-4 inline-block" />
|
||||
<h1 class="text-2xl text-center text-primary tracking-wide">Vben Admin 2.0</h1>
|
||||
<div class="login">
|
||||
<div class="login-mask" />
|
||||
<div class="login-form-wrap">
|
||||
<div class="login-form mx-6">
|
||||
<div class="login-form__content px-2 py-10">
|
||||
<header>
|
||||
<img src="/@/assets/images/logo.png" class="mr-4" />
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
|
||||
<a-form class="w-4/5 mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
|
||||
<a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
|
||||
<a-form-item name="account">
|
||||
<a-input size="large" v-model:value="formData.account" placeholder="vben" />
|
||||
</a-form-item>
|
||||
@@ -50,9 +48,11 @@
|
||||
import { userStore } from '/@/store/modules/user';
|
||||
import { appStore } from '/@/store/modules/app';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useSetting } from '/@/hooks/core/useSetting';
|
||||
export default defineComponent({
|
||||
components: { BasicDragVerify },
|
||||
setup() {
|
||||
const { globSetting } = useSetting();
|
||||
const { notification } = useMessage();
|
||||
const formRef = ref<any>(null);
|
||||
const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
|
||||
@@ -115,23 +115,79 @@
|
||||
formRules,
|
||||
login: handleLogin,
|
||||
openLoginVerify: openLoginVerifyRef,
|
||||
title: globSetting && globSetting.title,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../design/index.less';
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: url(../../../assets/images/login/login-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-mask {
|
||||
display: none;
|
||||
height: 100%;
|
||||
background: url(../../../assets/images/login/login-in.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.respond-to(large, { display: block;});
|
||||
}
|
||||
|
||||
&-form {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
width: 100%;
|
||||
background: @white;
|
||||
border: 10px solid rgba(255, 255, 255, 0.5);
|
||||
border-width: 10px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
.respond-to(xlarge, { margin: 0 56px});
|
||||
|
||||
&-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.respond-to(large, { width: 40%;});
|
||||
.respond-to(xlarge, { width: 33.3%;});
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
color: @primary-color;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user