twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use tailwindcss replace unocss (#342)

Browse Source 
* refactor: use `tailwindcss` replace `unocss`

* fix: update
This commit is contained in:
RealityBoy
2022-09-07 15:07:01 +08:00
committed by GitHub
parent 4dfde1bea6
commit 3683bd46a4
57 changed files with 550 additions and 808 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/able/ant-anchor.vue
View File

@@ -37,8 +37,8 @@ function handleAnchorClick(e, link) {
</span>
</div>
</template>
<div class="w-400px">
<Anchor class="float-left mt-200px" @click="handleAnchorClick">
<div class="w-[400px]">
<Anchor class="float-left mt-[200px]" @click="handleAnchorClick">
<AnchorLink href="one" title="测试one" />
<AnchorLink href="two" title="测试two" />
<AnchorLink href="three" title="测试three" />
@@ -47,21 +47,21 @@ function handleAnchorClick(e, link) {
<el-scrollbar class="float-right overflow-auto" height="600px">
<header
id="one"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #409eff"
>
测试one
</header>
<header
id="two"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #67c23a"
>
测试two
</header>
<header
id="three"
class="w-200px h-600px text-cyan-50 flex justify-center items-center text-4xl"
class="w-[200px] h-[600px] text-cyan-50 flex justify-center items-center text-4xl"
style="background: #f56c6c"
>
测试three

8
src/views/able/ant-treeSelect.vue
View File

@@ -149,7 +149,7 @@ const onLoadData = treeNode => {
<div>
<span>线性样式：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value1"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
@@ -169,7 +169,7 @@ const onLoadData = treeNode => {
<div>
<span>虚拟滚动：</span>
<TreeSelect
class="w-200px mt-6"
class="w-[200px] mt-6"
v-model:value="checkedKeys"
tree-checkable
tree-default-expand-all
@@ -190,7 +190,7 @@ const onLoadData = treeNode => {
<div>
<span>可勾选：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value2"
:tree-data="treeData2"
tree-checkable
@@ -203,7 +203,7 @@ const onLoadData = treeNode => {
<div>
<span>异步加载：</span>
<TreeSelect
class="w-200px"
class="w-[200px]"
v-model:value="value3"
tree-data-simple-mode
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

2
src/views/able/execl.vue
View File

@@ -84,7 +84,7 @@ const exportExcel = () => {
</div>
</template>
<el-button type="primary" @click="exportExcel">导出Excel </el-button>
<div class="h-100 mt-3">
<div class="h-[25rem] mt-3">
<el-auto-resizer>
<template #default="{ height, width }">
<el-table-v2

6
src/views/able/line-tree.vue
View File

@@ -30,14 +30,14 @@ let dataProps = {
</template>
<el-row :gutter="24">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-20px">
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-[20px]">
<el-card>
<template #header>
<div class="card-header">
<span class="font-medium"> 普通树结构 </span>
</div>
</template>
<div class="max-h-550px overflow-y-auto">
<div class="max-h-[550px] overflow-y-auto">
<el-tree
:data="menusData"
:props="dataProps"
@@ -66,7 +66,7 @@ let dataProps = {
<span class="font-medium"> 虚拟树结构 </span>
</div>
</template>
<div class="max-h-550px overflow-y-auto">
<div class="max-h-[550px] overflow-y-auto">
<el-tree-v2
:data="menusData"
:props="dataProps"

2
src/views/able/pdf.vue
View File

@@ -73,7 +73,7 @@ const onPrint = () => {
{{ currentPage }} / {{ pageCount }}
</el-pagination>
</div>
<div class="w-170px flex-bc">
<div class="w-[170px] flex-bc">
<el-checkbox v-model="showAllPages" @change="showAllPagesChange">
显示所有页面
</el-checkbox>

2
src/views/able/print.vue
View File

@@ -197,7 +197,7 @@ const tableData: User[] = [
border
:data="tableData"
:row-class-name="tableRowClassName"
class="el-table w-full mt-40px mr-40px"
class="el-table w-full mt-[40px] mr-[40px]"
>
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />

18
src/views/able/qrcode.vue
View File

@@ -40,19 +40,19 @@ const disabledClick = () => {
</template>
<el-row :gutter="20" justify="space-between">
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">基础用法</div>
<ReQrcode :text="qrcodeText" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">img标签</div>
<ReQrcode :text="qrcodeText" tag="img" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">样式配置</div>
<ReQrcode
:text="qrcodeText"
@@ -66,19 +66,19 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">点击事件</div>
<ReQrcode :text="qrcodeText" @click="codeClick" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">异步内容</div>
<ReQrcode :text="asyncTitle" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">失效</div>
<ReQrcode
:text="qrcodeText"
@@ -88,13 +88,13 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">logo配置</div>
<ReQrcode :text="qrcodeText" :logo="avatars" />
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">logo样式</div>
<ReQrcode
:text="qrcodeText"
@@ -109,7 +109,7 @@ const disabledClick = () => {
</el-card>
</el-col>
<el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px text-center">
<el-card shadow="hover" class="mb-[10px] text-center">
<div class="font-bold">大小配置</div>
<ReQrcode :text="qrcodeText" :width="100" />
</el-card>

4
src/views/able/swiper.vue
View File

@@ -119,11 +119,11 @@ const swiperExample: SwiperExample[] = [
</template>
<el-row :gutter="10">
<el-col v-for="item in swiperExample" :key="item.id" :span="12">
<h3 class="py-24px text-24px font-bold">{{ item.label }}</h3>
<h3 class="py-[24px] text-[24px] font-bold">{{ item.label }}</h3>
<swiper v-bind="item.options">
<swiper-slide v-for="i in 5" :key="i">
<div
class="flex justify-center items-center h-240px border-1px border-[#999] text-18px font-bold"
class="flex justify-center items-center h-[240px] border-[1px] border-[#999] text-[18px] font-bold"
>
Slide{{ i }}
</div>

2
src/views/able/virtual-list/horizontal.vue
View File

@@ -29,7 +29,7 @@ function changeMessage(message) {
<div class="dynamic-scroller-demo">
<div class="flex justify-around mb-4">
<el-input
class="mr-2 !w-1/1.5"
class="mr-2 !w-[1/1.5]"
clearable
v-model="search"
placeholder="Filter..."

4
src/views/able/virtual-list/index.vue
View File

@@ -23,8 +23,8 @@ defineOptions({
</div>
</template>
<div class="w-full flex justify-around flex-wrap">
<vertical-list class="h-500px w-500px" />
<horizontal-list class="h-500px w-500px" />
<vertical-list class="h-[500px] w-[500px]" />
<horizontal-list class="h-[500px] w-[500px]" />
</div>
</el-card>
</template>

2
src/views/able/virtual-list/vertical.vue
View File

@@ -33,7 +33,7 @@ function onResize() {
<div class="dynamic-scroller-demo">
<div class="flex justify-around mb-4">
<el-input
class="mr-2 !w-1/1.5"
class="mr-2 !w-[1/1.5]"
clearable
v-model="search"
placeholder="Filter..."