Skip to content

G
gin-vue-admin

FLIPPED-AURORA / gin-vue-admin
9 个月 前同步成功

通知 324
Star 18154
Fork 5505
G
gin-vue-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7701ba0c 编写于 作者: P piexlMax
浏览文件
操作

css 优化

上级 efcee079
隐藏空白更改
内联 并排
Showing with 108 addition and 595 deletion
web/src/style/basics.scss
浏览文件 @ 7701ba0c
// basice
$icon-size:18px;
$active-color:#1890ff;
$bg-main:#f0f2f5;
$border-color: #f4f4f4;
$white-bg:#fff;
$el-icon-small:30px;
......
web/src/style/main.scss
浏览文件 @ 7701ba0c
......@@ -511,19 +511,12 @@ li {
// 导航
#app {
.el-container {
position: relative;
height: 100%;
width: 100%;
@apply relative h-full w-full;
}
.el-container.mobile.openside {
position: fixed;
top: 0;
@apply fixed top-0;
}
.gva-aside {
-webkit-transition: width .2s;
transition: width .2s;
width: $width-aside;
height: 100%;
position: fixed;
font-size: 0;
top: 0;
......@@ -535,20 +528,13 @@ li {
border-right: none;
}
.tilte {
min-height: $height-aside-tilte;
line-height: $height-aside-tilte;
@apply min-h-[60px];
text-align: center;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
.logoimg {
width: $width-aside-img;
height: $height-aside-img;
background: #fff;
border-radius: 50%;
padding: 3px;
}
.tit-text {
display: inline-block;
color: #fff;
......@@ -584,31 +570,16 @@ li {
}
.hideside {
.aside {
width: $width-hideside-aside;
}
}
.mobile.hideside {
.gva-aside {
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transform: translate3d(-210px, 0, 0);
transform: translate3d(-220px, 0, 0);
@apply w-[54px]
}
}
.mobile {
.gva-aside {
-webkit-transition: -webkit-transform .28s;
transition: -webkit-transform .28s;
transition: transform .28s;
transition: transform .28s, -webkit-transform .28s;
width: $width-mobile-aside;
width: $width-hideside-aside;
}
}
.main-cont.el-main {
min-height: 100%;
margin-left: $width-aside;
position: relative;
}
.hideside {
.main-cont.el-main {
margin-left: 54px;
......@@ -627,298 +598,63 @@ li {
top: 0;
height: 100%;
position: absolute;
z-index: 999;
z-index: 1001;
left: 0;
}
}
}
// layout
.layout-cont {
.main-cont {
position: relative;
&.el-main {
background-color: $bg-main;
padding: 0;
}
}
}
.admin-box {
min-height: calc(100vh - 200px);
padding: 12px 16px;
margin: 100px 2px 20px;
.el-table--border {
border-radius: 4px;
margin-bottom: 14px;
}
@apply min-h-[calc(100vh-200px)] px-3 py-4 mt-28 mb-4 mx-1;
.el-table {
thead {
@apply text-gray-950;
}
th {
padding: 6px 0;
@apply px-0 py-2;
.cell {
color: rgba($color: #000000, $alpha: 0.85);
font-size: 14px;
line-height: 40px;
min-height: 40px;
@apply leading-[40px] text-gray-700;
}
}
td {
padding: 6px 0;
@apply px-0 py-2;
.cell {
min-height: 40px;
line-height: 40px;
color: rgba($color: #000000, $alpha: 0.65);
@apply leading-[40px] text-gray-600;
}
}
td.is-leaf {
border-bottom: 1px solid #e8e8e8;
}
th.is-leaf {
background: #F7FBFF;
border-bottom: none;
}
}
.el-pagination {
padding: 20px 0 0 0;
}
.upload-demo,
.upload {
padding: 0;
}
.edit_container,
.edit {
padding: 0;
}
.el-input {
.el-input__suffix {
margin-top: -3px;
}
&.is-disabled {
.el-input__suffix {
margin-top: 0px;
}
.is-leaf {
background: #F7FBFF !important;
@apply border-b border-t-0 border-l-0 border-r-0 border-solid border-gray-50;
}
}
.el-cascader {
.el-input {
.el-input__suffix {
margin-top: 0px;
}
}
}
.el-input__inner {
border-color: rgba($color: #000000, $alpha: 0.15);
height: 32px;
border-radius: 2px;
}
}
.admin-box:after,
.admin-box:before {
content: "";
display: block;
clear: both;
}
.button-box {
background: $white-bg;
border: none;
padding: 0 0 10px 0px;
}
// table
.has-gutter {
tr {
th {
background-color: #fafafa;
}
}
}
.el-table--striped {
.el-table__body {
tr.el-table__row--striped {
td {
background: #fff !important;
}
}
}
}
.el-table th,
.el-table tr {
background-color: #ffffff;
}
.el-pagination {
@apply mt-8;
.btn-prev,
.btn-next {
border: 1px solid #ddd;
border-radius: 4px;
@apply border border-solid border-gray-300 rounded;
}
.el-pager {
li {
color: #666;
font-size: 12px;
margin: 0 5px;
border: 1px solid #ddd;
border-radius: 4px;
@apply border border-solid border-gray-300 rounded text-gray-600 text-sm mx-1;
}
}
padding: 20px 0 !important;
}
.el-row {
padding: 10px 0;
.el-col>label {
line-height: 30px;
text-align: right;
width: 80%;
padding-right: 15px;
display: inline-block;
}
.line {
line-height: 30px;
text-align: center;
}
}
.edit_container {
background-color: $white-bg;
padding: 15px;
.el-button {
margin: 15px 0;
}
}
.edit {
background-color: $white-bg;
.el-button {
margin: 15px 0;
}
}
.el-container {
.tips {
margin-top: 10px;
font-size: 14px;
font-weight: 400;
color: #606266;
}
}
.el-container.layout-cont {
.main-cont.el-main {
background-color: $bg-main;
}
}
.el-container.layout-cont {
.main-cont {
.router-history {
@apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
.el-tabs__header {
@apply m-0;
.el-tabs__item{
@apply border-solid border-r border-t-0 border-gray-100 border-b-0;
&+.el-tabs__item{
@apply border-l-0;
}
}
.el-tabs__item.is-active {
@apply bg-blue-500 bg-opacity-5;
}
.el-tabs__nav {
@apply border-0;
}
}
}
}
}
.el-table__row {
.el-button.el-button--text.el-button--small {
@apply relative;
}
.cell {
button:last-child::after {
content: '' !important;
position: absolute !important;
width: 0px !important;
}
}
}
.clear:after,
.clear:before {
content: "";
display: block;
clear: both;
}
.el-table--striped .el-table__body tr.el-table__row--level-1 td:first-child {
.cell {
.el-table__indent {
border-right: 1.5px solid #ccc;
margin-left: 6px;
}
.el-table__placeholder {
width: 10px;
}
}
}
.el-table--striped .el-table__body tr.el-table__row--level-2 td:first-child {
.cell {
.el-table__indent {
border-right: 1.5px solid #ccc;
margin-left: 6px;
}
.el-table__placeholder {
width: 10px;
}
.header-cont {
@apply px-4 h-16 bg-white;
}
}
$headerHigh: 52px;
$mainHight: 100vh;
.dropdown-group {
min-width: 100px;
}
.topfix {
position: fixed;
top: 0;
box-sizing: border-box;
z-index: 999;
>.el-row {
padding: 0;
.el-col-lg-14 {
height: 60px;
.main-cont {
@apply h-screen overflow-visible;
&.el-main {
@apply min-h-full ml-[220px] bg-main p-0 overflow-auto;
}
}
}
.layout-cont {
.right-box {
padding-top: 16px;
display: flex;
justify-content: flex-end;
align-items: center;
img {
vertical-align: middle;
border: 1px solid #ccc;
border-radius: 6px;
}
}
.header-cont {
@apply px-4 h-16 bg-white;
background: #fff;
}
.main-cont {
.breadcrumb {
@apply h-16 flex items-center p-0 ml-12 text-lg;
.el-breadcrumb__item {
......@@ -932,42 +668,42 @@ $mainHight: 100vh;
}
}
}
&.el-main {
overflow: auto;
background: #fff;
.router-history {
@apply bg-white p-0 border-t border-l-0 border-r-0 border-b-0 border-solid border-gray-100;
.el-tabs__header {
@apply m-0;
.el-tabs__item{
@apply border-solid border-r border-t-0 border-gray-100 border-b-0 border-l-0;
}
.el-tabs__item.is-active {
@apply bg-blue-500 bg-opacity-5;
}
.el-tabs__nav {
@apply border-0;
}
}
}
height: $mainHight !important;
overflow: visible;
position: relative;
.aside {
overflow: auto;
// background: #fff;
&::-webkit-scrollbar {
display: none;
}
@apply overflow-auto;
}
.el-menu-vertical {
height: calc(100vh - 60px) !important;
visibility: auto;
@apply h-[calc(100vh-60px)];
&:not(.el-menu--collapse) {
width: 220px;
@apply w-[220px];
}
}
.el-menu--collapse {
width: 54px;
@apply w-[54px];
li {
.el-tooltip,
.el-sub-menu__title {
padding: 0px 15px !important;
@apply px-4;
}
}
}
&::-webkit-scrollbar {
display: none;
}
&.main-left {
width: auto !important;
}
&.main-right {
.admin-title {
float: left;
......@@ -985,24 +721,8 @@ $mainHight: 100vh;
}
}
.search-component {
@apply inline-flex overflow-hidden text-center gap-5 mr-5;
div{
@apply cursor-pointer;
}
.el-input__inner {
@apply border-b border-solid border-gray-300;
}
.el-dropdown-link {
@apply cursor-pointer;
}
.dropdown-group {
min-width: 100px;
}
}
.el-dropdown {
overflow: hidden;
@apply overflow-hidden
}
.gva-table-box {
......
web/src/style/mobile.scss
浏览文件 @ 7701ba0c
......@@ -10,54 +10,9 @@
}
}
}
.layout-cont {
.right-box {
@apply mr-1.5;
}
}
.el-main {
.admin-box {
margin-left: 0;
margin-right: 0;
}
.big.admin-box {
padding: 0;
}
.big {
.bottom {
.chart-player {
height: auto!important;
margin-bottom: 15px;
}
.todoapp {
background-color: #fff;
padding-bottom: 10px;
}
}
}
}
.card .car-left,
.card .car-right {
width: 100%;
height: 100%;
}
.card {
@apply px-1.5;
}
.card {
.text {
width: 100%;
h4 {
white-space: break-spaces;
}
}
}
.shadow {
margin-left: 4px;
margin-right: 4px;
.grid-content {
margin-bottom: 10px;
padding: 0;
@apply mx-0;
}
}
.el-dialog {
......
web/src/style/newLogin.scss 已删除 100644 → 0
浏览文件 @ efcee079
#userLayout {
margin: 0;
padding: 0;
background-image: url("@/assets/login_background.jpg");
background-size: cover;
width: 100%;
height: 100%;
position: relative;
.input-icon {
padding-right: 6px;
padding-top: 4px;
}
.login_panel {
position: absolute;
top: 3vh;
left: 2vw;
width: 96vw;
height: 94vh;
background-color: rgba(255, 255, 255, .8);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-evenly;
.login_panel_right {
background-image: url("@/assets/login_left.svg");
background-size: cover;
width: 40%;
height: 60%;
float: right !important;
}
.login_panel_form {
width: 420px;
background-color: #fff;
padding: 40px 40px 40px 40px;
border-radius: 10px;
box-shadow: 2px 3px 7px rgba(0, 0, 0, .2);
.login_panel_form_title {
display: flex;
align-items: center;
margin: 30px 0;
.login_panel_form_title_logo {
width: 90px;
height: 72px;
}
.login_panel_form_title_p {
font-size: 40px;
padding-left: 20px;
}
}
.vPicBox {
display: flex;
justify-content: space-between;
width: 100%;
}
.vPic {
width: 33%;
height: 38px;
background: #ccc;
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
}
}
.login_panel_foot {
position: absolute;
bottom: 20px;
.links {
display: flex;
align-items: center;
justify-content: space-between;
.link-icon {
width: 30px;
height: 30px;
}
}
.copyright {
color: #777777;
margin-top: 5px;
}
}
}
}
//小屏幕不显示右侧，将登录框居中
@media (max-width: 750px) {
.login_panel_right {
display: none;
}
.login_panel {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.login_panel_form {
width: 100%;
}
}
/*
powerBy : bypanghu@163.com
*/
\ No newline at end of file
web/src/view/error/index.vue
浏览文件 @ 7701ba0c
<template>
<div>
<div class="big">
<div class="inner">
<div class="w-full h-screen bg-gray-50 flex items-center justify-center">
<div class="flex flex-col items-center text-2xl gap-4">
<img src="../../assets/notFound.png">
<p>页面被神秘力量吸走了（如果您是开源版请联系我们修复）</p>
<p style="font-size:18px;line-height:40px;">常见问题为当前此角色无当前路由，如果确定要使用本路由，请到角色管理进行分配</p>
<p>↓</p>
<img src="../../assets/qm.png" class="leftPic">
<img src="../../assets/qm.png" class="w-16 h-16 mt-20">
<el-button @click="toDashboard">返回首页</el-button>
</div>
</div>
</div>
......@@ -15,31 +16,16 @@
<script>
export default {
name: 'Error'
}
</script>
<style lang="scss">
.big{
width: 100%;
height: calc(100vh - 220px);
background-color: rgb(244,244,244);
position: relative;
}
.inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.inner p {
text-align: center;
font-size: 24px;
}
.inner .leftPic{
width: 60px;
height: 60px;
margin-left: 44%;
margin-top: 20px;
}
</style>
<script setup>
import {useUserStore} from "@/pinia/modules/user";
import {useRouter} from "vue-router";
const userStore = useUserStore()
const router = useRouter()
const toDashboard = () =>{
router.push({name:userStore.userInfo.authority.defaultRouter})
}
</script>
web/src/view/layout/index.vue
浏览文件 @ 7701ba0c
......@@ -2,9 +2,9 @@
<el-container class="layout-cont">
<el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
<el-row :class="[isShadowBg?'shadowBg':'']" @click="changeShadow()" />
<el-aside class="main-cont main-left gva-aside">
<el-aside class="main-cont gva-aside" :style="{width:asideWidth()}">
<div class="tilte" :style="{background: backgroundColor}">
<img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
<img alt class="w-9 h-9 p-1 bg-white rounded-full" :src="$GIN_VUE_ADMIN.appLogo">
<div v-if="isSider" class="tit-text" :style="{color:textColor}">{{ $GIN_VUE_ADMIN.appName }}</div>
</div>
<Aside class="aside" />
......@@ -13,8 +13,8 @@
<el-main class="main-cont main-right">
<transition :duration="{ enter: 800, leave: 100 }" mode="out-in" name="el-fade-in-linear">
<div
:style="{width: `calc(100% - ${isMobile?'0px':isCollapse?'54px':'220px'})`}"
class="topfix"
:style="{width: `calc(100% - ${getAsideWidth()})`}"
class="fixed top-0 box-border z-50"
>
<el-row>
<el-col>
......@@ -35,8 +35,8 @@
>{{ fmtTitle(item.meta.title,route) }}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9">
<div class="right-box">
<el-col :xs="12" :lg="9" :md="9" :sm="14" :xl="9" class="flex items-center justify-end">
<div class="mr-1.5 flex items-center">
<Search />
<el-dropdown>
<div class="flex justify-center items-center h-full w-full">
......@@ -49,9 +49,9 @@
</span>
</div>
<template #dropdown>
<el-dropdown-menu class="dropdown-group">
<el-dropdown-menu>
<el-dropdown-item>
<span style="font-weight: 600;">
<span class="font-bold">
当前角色：{{ userStore.userInfo.authority.authorityName }}
</span>
</el-dropdown-item>
......@@ -211,6 +211,18 @@ onMounted(() => {
const userStore = useUserStore()
const asideWidth = ()=> {
if (isMobile.value) {
return isCollapse.value?'0px':'220px'
}
return isCollapse.value ? '54px' : '220px'
}
const getAsideWidth = () =>{
if(isMobile.value) return '0px'
return isCollapse.value?'54px':'220px'
}
const textColor = computed(() => {
if (userStore.sideMode === 'dark') {
return '#fff'
......@@ -294,7 +306,5 @@ const changeShadow = () => {
:deep .el-overlay {
background-color: hsla(0,0%,100%,.9) !important;
}
.command-box{
}
</style>
web/src/view/layout/search/search.vue
浏览文件 @ 7701ba0c
......@@ -2,7 +2,7 @@
<div class="search-component">
<div class="gvaIcon gvaIcon-refresh" :class="[reload ? 'reloading' : '']" @click="handleReload" />
<Screenfull class="search-icon" />
<div class="service gvaIcon-customer-service" @click="toService" />
<div class="gvaIcon gvaIcon-customer-service" @click="toService" />
</div>
</template>
......@@ -30,33 +30,25 @@ const toService = () => {
</script>
<style scoped lang="scss">
.reload {
font-size: 18px;
}
.transition-box {
overflow: hidden;
width: 160px;
margin-right: 32px;
text-align: center;
::v-deep(.el-input__wrapper) {
.el-input__inner {
border-bottom: 1px solid var(--el-color-info-light-7);
}
box-shadow: none !important;
.search-component {
@apply inline-flex overflow-hidden text-center gap-5 mr-5;
div{
@apply cursor-pointer;
}
::v-deep(.el-select .el-input .el-input__wrapper.is-focus) {
box-shadow: none !important;
.el-input__inner {
@apply border-b border-solid border-gray-300;
}
::v-deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: none !important;
.el-dropdown-link {
@apply cursor-pointer;
}
}
.reload {
font-size: 18px;
}
.reloading{
animation:turn 0.5s linear infinite;
}
......@@ -83,19 +75,4 @@ const toService = () => {
}
}
.service {
font-family: "gvaIcon", serif !important;
font-size: 16px;
font-style: normal;
font-weight: 800;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//小屏幕不显示
@media (max-width: 750px) {
.service {
display: none;
}
}
</style>
web/src/view/login/index.vue
浏览文件 @ 7701ba0c
......@@ -44,8 +44,7 @@
</div>
</el-form-item>
<el-form-item class="mb-6">
<el-button class="shadow shadow-blue-600 h-11 w-full" type="primary" size="large" @click="submitForm">登
录</el-button>
<el-button class="shadow shadow-blue-600 h-11 w-full" type="primary" size="large" @click="submitForm">登 录</el-button>
</el-form-item>
<el-form-item class="mb-6">
<el-button
......
web/src/view/superAdmin/api/api.vue
浏览文件 @ 7701ba0c
......@@ -28,7 +28,6 @@
</el-form>
</div>
<div class="gva-table-box">
<div class="gva-btn-list">
<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>
......@@ -39,7 +38,7 @@
<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>
<el-button icon="delete" :disabled="!apis.length" @click="deleteVisible = true">删除</el-button>
</template>
</el-popover>
<el-popover v-model="freshVisible" placement="top" width="160">
......@@ -49,10 +48,9 @@
<el-button type="primary" @click="onFresh">确定</el-button>
</div>
<template #reference>
<el-button icon="Refresh" style="margin-left: 10px;" @click="freshVisible = true">刷新缓存</el-button>
<el-button icon="Refresh" @click="freshVisible = true">刷新缓存</el-button>
</template>
</el-popover>
</div>
</div>
<el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
<el-table-column
......@@ -406,12 +404,6 @@ const deleteApiFunc = async(row) => {
</script>
<style scoped lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
.warning {
color: #dc143c;
}
......
web/src/view/systemTools/autoCode/index.vue
浏览文件 @ 7701ba0c
......@@ -727,13 +727,7 @@ export default {
align-items: center;
padding: 5px 0;
}
.button-box {
padding: 10px 20px;
.el-button {
margin-right: 20px;
float: right;
}
}
.auto-btn-list{
margin-top: 16px;
}
......
web/src/view/systemTools/autoCodeAdmin/index.vue
浏览文件 @ 7701ba0c
......@@ -173,12 +173,7 @@ const goAutoCode = (row) => {
</script>
<style scoped lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
.el-tag--mini {
margin-left: 5px;
}
......
web/src/view/systemTools/autoPkg/autoPkg.vue
浏览文件 @ 7701ba0c
......@@ -149,15 +149,3 @@ const deleteApiFunc = async(row) => {
getTableData()
</script>
<style scoped lang="scss">
.button-box {
padding: 10px 20px;
.el-button {
float: right;
}
}
.warning {
color: #dc143c;
}
</style>
web/src/view/systemTools/installPlugin/index.vue
浏览文件 @ 7701ba0c
<template>
<div>
<el-upload
class="upload-demo"
drag
:action="`${path}/autoCode/installPlugin`"
:headers="{'x-token':userStore.token}"
......
web/tailwind.config.js
浏览文件 @ 7701ba0c
......@@ -5,7 +5,11 @@ module.exports = {
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
extend: {
backgroundColor: {
"main": "#F5F5F5",
}
},
},
plugins: [],
corePlugins: {
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或