yvan/Study
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

替换部分css为tailwindcss 删除某些无用css

Browse Source
This commit is contained in:
piexlMax
2023-08-08 16:05:41 +08:00
parent 22fe4053e9
commit 78de254230
20 changed files with 118 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/dashboard/index.vue
+32 -96
View File
@@ -8,7 +8,8 @@
<div class="gva-top-card-left-rows">
<el-row>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<div class="flex items-center">
<el-icon class="dashboard-icon">
<sort />
</el-icon>
@@ -16,7 +17,7 @@
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<div class="flex items-center">
<el-icon class="dashboard-icon">
<avatar />
</el-icon>
@@ -24,7 +25,7 @@
</div>
</el-col>
<el-col :span="8" :xs="24" :sm="8">
<div class="flex-center">
<div class="flex items-center">
<el-icon class="dashboard-icon">
<comment />
</el-icon>
@@ -56,12 +57,8 @@
</div>
</div>
<div class="gva-card-box">
<el-card class="gva-card quick-entrance">
<template #header>
<div class="card-header">
<span>快捷入口</span>
</div>
</template>
<div class="gva-card quick-entrance">
<div class="gva-card-title">快捷入口</div>
<el-row :gutter="20">
<el-col
v-for="(card, key) in toolCards"
@@ -81,15 +78,12 @@
</div>
</el-col>
</el-row>
</el-card>
<!-- <div class="quick-entrance-title"></div> -->
</div>
</div>
<div class="gva-card-box">
<div class="gva-card">
<div class="card-header">
<span>数据统计</span>
</div>
<div class="echart-box">
<div class="gva-card-title">数据统计</div>
<div class="p-4">
<el-row :gutter="20">
<el-col :xs="24" :sm="18">
<echarts-line />
@@ -172,52 +166,32 @@ export default {
</script>
<style lang="scss" scoped>
@mixin flex-center {
display: flex;
align-items: center;
}
.page {
background: #f0f2f5;
padding: 0;
@apply p-0;
.gva-card-box{
padding: 12px 16px;
@apply p-4;
&+.gva-card-box{
padding-top: 0px;
@apply pt-0;
}
}
.gva-card {
box-sizing: border-box;
background-color: #fff;
border-radius: 2px;
height: auto;
padding: 26px 30px;
overflow: hidden;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.03);
@apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
.gva-card-title{
@apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
}
}
.gva-top-card {
height: 260px;
@include flex-center;
justify-content: space-between;
color: #777;
@apply h-72 flex items-center justify-between text-gray-500;
&-left {
height: 100%;
display: flex;
flex-direction: column;
@apply h-full flex flex-col w-auto;
&-title {
font-size: 22px;
color: #343844;
@apply text-3xl text-gray-600;
}
&-dot {
font-size: 16px;
color: #6B7687;
margin-top: 24px;
@apply mt-4 text-gray-600 text-lg;
}
&-rows {
// margin-top: 15px;
margin-top: 18px;
color: #6B7687;
width: 600px;
align-items: center;
@apply mt-4 flex flex-col text-gray-600 w-[500px];
}
&-item{
+.gva-top-card-left-item{
@@ -233,76 +207,38 @@ export default {
}
}
::v-deep(.el-card__header){
padding:0;
border-bottom: none;
@apply p-0 border-gray-200;
}
.card-header{
padding-bottom: 20px;
border-bottom: 1px solid #e8e8e8;
@apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
}
.quick-entrance-title {
height: 30px;
font-size: 22px;
color: #333;
width: 100%;
border-bottom: 1px solid #eee;
}
.quick-entrance-items {
@include flex-center;
justify-content: center;
text-align: center;
color: #333;
@apply flex items-center justify-center text-center text-gray-800;
.quick-entrance-item {
padding: 16px 28px;
margin-top: -16px;
margin-bottom: -16px;
border-radius: 4px;
transition: all 0.2s;
@apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
&:hover{
box-shadow: 0px 0px 7px 0px rgba(217, 217, 217, 0.55);
@apply shadow-lg;
}
cursor: pointer;
height: auto;
text-align: center;
// align-items: center;
&-icon {
width: 50px;
height: 50px !important;
border-radius: 8px;
@include flex-center;
justify-content: center;
margin: 0 auto;
i {
font-size: 24px;
}
@apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
}
p {
margin-top: 10px;
@apply mt-2.5;
}
}
}
.echart-box{
padding: 14px;
}
}
.dashboard-icon {
font-size: 20px;
color: rgb(85, 160, 248);
width: 30px;
height: 30px;
margin-right: 10px;
@include flex-center;
}
.flex-center {
@include flex-center;
@apply flex items-center text-xl mr-2 text-blue-400;
}
//小屏幕不显示右侧，将登录框居中
@media (max-width: 750px) {
.gva-card {
padding: 20px 10px !important;
@apply px-5 py-2.5;
.gva-top-card {
height: auto;
@apply h-auto;
&-left {
&-title {
font-size: 20px !important;
web/src/view/example/upload/upload.vue
+2 -16
View File
@@ -7,27 +7,16 @@
<div class="gva-btn-list">
<upload-common
v-model:imageCommon="imageCommon"
class="upload-btn"
@on-success="getTableData"
/>
<upload-image
v-model:imageUrl="imageUrl"
:file-size="512"
:max-w-h="1080"
class="upload-btn"
@on-success="getTableData"
/>
<el-form ref="searchForm" :inline="true" :model="search">
<el-form-item label="">
<el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="getTableData">查询</el-button>
</el-form-item>
</el-form>
<el-input v-model="search.keyword" class="keyword" placeholder="请输入文件名或备注" />
<el-button type="primary" icon="search" @click="getTableData">查询</el-button>
</div>
<el-table :data="tableData">
@@ -204,7 +193,4 @@ export default {
cursor: pointer;
}
.upload-btn + .upload-btn {
margin-left: 12px;
}
</style>
web/src/view/layout/index.vue
+6 -6
View File
@@ -19,14 +19,14 @@
<el-row>
<el-col>
<el-header class="header-cont">
<el-row class="pd-0">
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" style="z-index:100">
<div class="menu-total" @click="totalCollapse">
<el-row class="p-0">
<el-col :xs="2" :lg="1" :md="1" :sm="1" :xl="1" class="z-50 flex items-center pl-3">
<div class="text-black cursor-pointer text-lg leading-5" @click="totalCollapse">
<div v-if="isCollapse" class="gvaIcon gvaIcon-arrow-double-right" />
<div v-else class="gvaIcon gvaIcon-arrow-double-left" />
</div>
</el-col>
<el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1">
<el-col :xs="10" :lg="14" :md="14" :sm="9" :xl="14" :pull="1" class="flex items-center">
<!-- 修改为手机端不显示顶部标签 -->
<el-breadcrumb v-show="!isMobile" class="breadcrumb">
<el-breadcrumb-item
@@ -39,8 +39,8 @@
<div class="right-box">
<Search />
<el-dropdown>
<div class="dp-flex justify-content-center align-items height-full width-full">
<span class="header-avatar" style="cursor: pointer">
<div class="flex justify-center items-center h-full w-full">
<span class="cursor-pointer flex justify-center items-center">
<CustomPic />
<span v-show="!isMobile" style="margin-left: 5px">{{ userStore.userInfo.nickName }}</span>
<el-icon>
web/src/view/layout/search/search.vue
+1 -13
View File
@@ -1,20 +1,8 @@
<template>
<div class="search-component">
<div
class="user-box"
>
<div class="gvaIcon gvaIcon-refresh" :class="[reload ? 'reloading' : '']" @click="handleReload" />
</div>
<div
class="user-box"
>
<Screenfull class="search-icon" :style="{cursor:'pointer'}" />
</div>
<div
class="user-box"
>
<Screenfull class="search-icon" />
<div class="service gvaIcon-customer-service" @click="toService" />
</div>
</div>
</template>
web/src/view/person/person.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div>
<el-row>
<el-col :span="6">
<div class="fl-left avatar-box">
<div class="float-left avatar-box">
<div class="user-card">
<div class="header-box">
<SelectImage v-model="userStore.userInfo.headerImg" />
web/src/view/superAdmin/api/api.vue
+21 -21
View File
@@ -29,30 +29,30 @@
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<div class="gva-btn-list flex items-center gap-3">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="openDialog('addApi')">新增</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=7&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
<el-popover v-model="deleteVisible" placement="top" width="160">
<p>确定要删除吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
<el-popover v-model="freshVisible" placement="top" width="160">
<p>确定要刷新Casbin缓存吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button type="primary" link @click="freshVisible = false">取消</el-button>
<el-button type="primary" @click="onFresh">确定</el-button>
</div>
<template #reference>
<el-button icon="Refresh" style="margin-left: 10px;" @click="freshVisible = true">刷新缓存</el-button>
</template>
</el-popover>
</div>
<el-popover v-model="deleteVisible" placement="top" width="160">
<p>确定要删除吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button type="primary" link @click="deleteVisible = false">取消</el-button>
<el-button type="primary" @click="onDelete">确定</el-button>
</div>
<template #reference>
<el-button icon="delete" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
<el-popover v-model="freshVisible" placement="top" width="160">
<p>确定要刷新Casbin缓存吗？</p>
<div style="text-align: right; margin-top: 8px;">
<el-button type="primary" link @click="freshVisible = false">取消</el-button>
<el-button type="primary" @click="onFresh">确定</el-button>
</div>
<template #reference>
<el-button icon="Refresh" style="margin-left: 10px;" @click="freshVisible = true">刷新缓存</el-button>
</template>
</el-popover>
</div>
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column
web/src/view/superAdmin/authority/authority.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<div class="authority">
<warning-bar title="注：右上角头像下拉可切换角色" />
<div class="gva-table-box">
<div class="gva-btn-list flex items-center gap-3">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="addAuthority(0)">新增角色</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT?p=8&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
</div>
@@ -394,7 +394,7 @@ export default {
}
.tree-content{
margin-top: 10px;
height: calc(100vh - 148px);
height: calc(100vh - 158px);
overflow: auto;
}
web/src/view/superAdmin/authority/components/apis.vue
+4 -6
View File
@@ -1,8 +1,8 @@
<template>
<div>
<div class="clearfix sticky-button">
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
<el-button class="fl-right" type="primary" @click="authApiEnter">确 定</el-button>
<div class="sticky top-0.5 z-10 bg-white">
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
<el-button class="float-right" type="primary" @click="authApiEnter">确 定</el-button>
</div>
<div class="tree-content">
<el-tree
@@ -134,6 +134,4 @@ watch(filterText, (val) => {
</script>
<style lang="scss" scoped>
@import "@/style/button.scss";
</style>
web/src/view/superAdmin/authority/components/datas.vue
+6 -6
View File
@@ -1,13 +1,13 @@
<template>
<div>
<warning-bar title="此功能仅用于创建角色和角色的many2many关系表，具体使用还须自己结合表实现业务，详情参考示例代码（客户示例）。此功能不建议使用，建议使用插件市场【组织管理功能（点击前往）】来管理资源权限。" href="https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36" />
<div class="clearfix sticky-button" style="margin: 18px">
<el-button class="fl-right" type="primary" @click="authDataEnter">确 定</el-button>
<el-button class="fl-left" type="primary" @click="all">全选</el-button>
<el-button class="fl-left" type="primary" @click="self">本角色</el-button>
<el-button class="fl-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
<div class="sticky top-0.5 z-10 bg-white my-4">
<el-button class="float-left" type="primary" @click="all">全选</el-button>
<el-button class="float-left" type="primary" @click="self">本角色</el-button>
<el-button class="float-left" type="primary" @click="selfAndChildren">本角色及子角色</el-button>
<el-button class="float-right" type="primary" @click="authDataEnter">确 定</el-button>
</div>
<div class="tree-content">
<div class="clear-both pt-4">
<el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
<el-checkbox v-for="(item,key) in authoritys" :key="key" :label="item">{{ item.authorityName }}</el-checkbox>
</el-checkbox-group>
web/src/view/superAdmin/authority/components/menus.vue
+5 -6
View File
@@ -1,10 +1,10 @@
<template>
<div>
<div class="clearfix sticky-button">
<el-input v-model="filterText" class="fitler" placeholder="筛选" />
<el-button class="fl-right" type="primary" @click="relation">确 定</el-button>
<div class="sticky top-0.5 z-10 bg-white">
<el-input v-model="filterText" class="w-3/5" placeholder="筛选" />
<el-button class="float-right" type="primary" @click="relation">确 定</el-button>
</div>
<div class="tree-content">
<div class="tree-content clear-both">
<el-tree
ref="menuTree"
:data="menuTreeData"
@@ -216,10 +216,9 @@ export default {
</script>
<style lang="scss" scoped>
@import "@/style/button.scss";
.custom-tree-node{
span+span{
margin-left: 12px;
@apply ml-3;
}
}
</style>
web/src/view/superAdmin/dictionary/sysDictionary.vue
+1 -1
View File
@@ -36,7 +36,7 @@
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list flex items-center gap-3">
<div class="gva-btn-list">
<el-button
type="primary"
web/src/view/superAdmin/menu/menu.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<div class="gva-table-box">
<div class="gva-btn-list flex items-center gap-3">
<div class="gva-btn-list">
<el-button type="primary" icon="plus" @click="addMenu('0')">新增根菜单</el-button>
<el-icon class="cursor-pointer" @click="toDoc('https://www.bilibili.com/video/BV1kv4y1g7nT/?p=4&vd_source=f2640257c21e3b547a790461ed94875e')"><VideoCameraFilled /></el-icon>
</div>
web/src/view/systemTools/autoCode/index.vue
+1 -1
View File
@@ -262,7 +262,7 @@
</el-table-column>
</el-table>
<!-- 组件列表 -->
<div class="gva-btn-list justify-content-flex-end auto-btn-list">
<div class="gva-btn-list justify-end auto-btn-list">
<el-button type="primary" @click="enterForm(true)">预览代码</el-button>
<el-button type="primary" @click="enterForm(false)">生成代码</el-button>
</div>