diff --git a/frontend/src/views/setting/backup-account/index.vue b/frontend/src/views/setting/backup-account/index.vue index 77451589b..96b781cb4 100644 --- a/frontend/src/views/setting/backup-account/index.vue +++ b/frontend/src/views/setting/backup-account/index.vue @@ -2,31 +2,29 @@ <div> <LayoutContent :title="$t('commons.button.backup')"> <template #main> - <el-form label-width="130px" :v-key="refresh"> - <el-row :gutter="20"> - <el-col :span="24"> - <div class="flx-justify-between"> - <span class="flx-align-center"> - <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon> - <span class="card-title"> {{ $t('setting.LOCAL') }}</span> - </span> - <div style="float: right"> - <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)"> - {{ $t('commons.button.edit') }} - </el-button> - </div> + <el-form :v-key="refresh"> + <div class="flex flex-col gpa-4"> + <div class="flex flex-row justify-between items-center"> + <div class="flex gap-1 items-center"> + <svg-icon class="card-logo" iconName="p-file-folder"></svg-icon> + <span class="card-title"> {{ $t('setting.LOCAL') }}</span> </div> - <el-divider class="divider" /> - <div style="margin-left: 20px"> - <el-form-item :label="$t('setting.backupDir')"> - {{ localData.varsJson['dir'] }} - </el-form-item> - <el-form-item :label="$t('commons.table.createdAt')"> - {{ dateFormat(0, 0, localData.createdAt) }} - </el-form-item> + <div> + <el-button round @click="onOpenDialog('edit', 'LOCAL', localData)"> + {{ $t('commons.button.edit') }} + </el-button> </div> - </el-col> - </el-row> + </div> + <el-divider class="divider" /> + <div class="grid gird-cols-2 items-center justify-center"> + <el-form-item :label="$t('setting.backupDir')"> + {{ localData.varsJson['dir'] }} + </el-form-item> + <el-form-item :label="$t('commons.table.createdAt')"> + {{ dateFormat(0, 0, localData.createdAt) }} + </el-form-item> + </div> + </div> </el-form> <div class="common-div"> diff --git a/frontend/src/views/setting/panel/index.vue b/frontend/src/views/setting/panel/index.vue index 8553f286f..a4ad8f896 100644 --- a/frontend/src/views/setting/panel/index.vue +++ b/frontend/src/views/setting/panel/index.vue @@ -2,7 +2,7 @@ <div v-loading="loading"> <LayoutContent :title="$t('setting.panel')" :divider="true"> <template #main> - <el-form :model="form" label-position="left" label-width="150px"> + <el-form :model="form" :label-position="mobile ? 'top' : 'left'" label-width="150px"> <el-row> <el-col :span="1"><br /></el-col> <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12"> @@ -168,7 +168,7 @@ </template> <script lang="ts" setup> -import { ref, reactive, onMounted } from 'vue'; +import { ref, reactive, onMounted, computed } from 'vue'; import { ElForm } from 'element-plus'; import { getSettingInfo, updateSetting, getSystemAvailable } from '@/api/modules/setting'; import { GlobalStore } from '@/store'; @@ -194,6 +194,10 @@ const { isProductPro } = storeToRefs(globalStore); const { switchTheme } = useTheme(); +const mobile = computed(() => { + return globalStore.isMobile(); +}); + const form = reactive({ userName: '', password: '', diff --git a/frontend/src/views/setting/safe/index.vue b/frontend/src/views/setting/safe/index.vue index 8e6219541..5565e4004 100644 --- a/frontend/src/views/setting/safe/index.vue +++ b/frontend/src/views/setting/safe/index.vue @@ -2,7 +2,12 @@ <div> <LayoutContent v-loading="loading" :title="$t('setting.safe')" :divider="true"> <template #main> - <el-form :model="form" v-loading="loading" label-position="left" label-width="150px"> + <el-form + :model="form" + v-loading="loading" + :label-position="mobile ? 'top' : 'left'" + label-width="150px" + > <el-row> <el-col :span="1"><br /></el-col> <el-col :xs="24" :sm="20" :md="15" :lg="12" :xl="12"> @@ -178,7 +183,7 @@ </template> <script lang="ts" setup> -import { ref, reactive, onMounted } from 'vue'; +import { ref, reactive, onMounted, computed } from 'vue'; import { ElForm, ElMessageBox } from 'element-plus'; import PortSetting from '@/views/setting/safe/port/index.vue'; import BindSetting from '@/views/setting/safe/bind/index.vue'; @@ -209,6 +214,10 @@ const sslInfo = ref<Setting.SSLInfo>(); const domainRef = ref(); const allowIPsRef = ref(); +const mobile = computed(() => { + return globalStore.isMobile(); +}); + const form = reactive({ serverPort: 9999, ipv6: 'disable',