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

css 优化

Browse Source
This commit is contained in:
piexlMax
2023-08-08 18:25:23 +08:00
parent 78de254230
commit aee26bc9b2
14 changed files with 122 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/view/error/index.vue
+14 -28
View File
@@ -1,12 +1,13 @@
<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
+20 -10
View File
@@ -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
+15 -38
View File
@@ -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,32 +30,24 @@ const toService = () => {
</script>
<style scoped lang="scss">
.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;
}
}
.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;
}
::v-deep(.el-select .el-input .el-input__wrapper.is-focus) {
box-shadow: none !important;
}
::v-deep(.el-select .el-input.is-focus .el-input__wrapper) {
box-shadow: none !important;
}
}
.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
+1 -2
View File
@@ -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
+2 -10
View File
@@ -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
+1 -7
View File
@@ -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
+1 -6
View File
@@ -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
-12
View File
@@ -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
-1
View File
@@ -1,7 +1,6 @@
<template>
<div>
<el-upload
class="upload-demo"
drag
:action="`${path}/autoCode/installPlugin`"
:headers="{'x-token':userStore.token}"