refactor(style): remove tailwind css

This commit is contained in:
nebv
2020-10-11 00:05:29 +08:00
parent 66b5616957
commit 03b6025d07
52 changed files with 513 additions and 505 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -21,3 +21,8 @@
},
});
</script>
<style lang="less" scoped>
.bg-gray-700 {
background: #4a5568;
}
</style>

View File

@@ -88,3 +88,8 @@
},
});
</script>
<style lang="less" scoped>
.bg-gray-700 {
background: #4a5568;
}
</style>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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}
>

View File

@@ -0,0 +1,5 @@
.exception {
display: flex;
align-items: center;
flex-direction: column;
}

View File

@@ -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>