gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 16:29:17 +08:00
Code

style: 统一app状态栏样式

Browse Source
This commit is contained in:
zhengkunwang223 2023-02-07 18:06:27 +08:00 committed by zhengkunwang223
parent 24b3d21204
commit 62709bcec6
4 changed files with 71 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/app-status/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="a-card" v-if="data.isExist"> <div class="app-status" v-if="data.isExist">
<el-card> <el-card>
<div> <div>
<el-tag effect="dark" type="success">{{ data.app }}</el-tag> <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
@ -142,33 +142,11 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.a-card {
font-size: 12px;
.el-card {
--el-card-padding: 12px;
.buttons {
margin-left: 100px;
}
}
}
// body {
// margin: 0;
// }
.status-content {
margin-left: 50px;
}
.app-warn { .app-warn {
text-align: center; text-align: center;
margin-top: 100px; margin-top: 100px;
span:first-child { span:first-child {
// font-weight: 500;
// font-size: 16px;
color: #bbbfc4; color: #bbbfc4;
} }

16
frontend/src/styles/common.scss
View File

@ -248,3 +248,19 @@
border-color: var(--el-button-hover-border-color); border-color: var(--el-button-hover-border-color);
} }
} }
.app-status {
font-size: 12px;
.el-card {
--el-card-padding: 12px;
.buttons {
margin-left: 100px;
}
.status-content {
margin-left: 50px;
}
}
}

70
frontend/src/views/website/website/config/index.vue
View File

@ -1,34 +1,44 @@
<template> <template>
<LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading"> <div>
<template #app> <RouterButton
<WebsiteStatus :buttons="[
v-if="website.id > 0" {
:primary-domain="website.primaryDomain" label: $t('website.website'),
:status="website.status" path: '/websites',
:expire-date="website.expireDate" },
/> ]"
</template> />
<template #buttons> <LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading">
<el-button type="primary" :plain="index !== 'basic'" @click="changeTab('basic')"> <template #app>
{{ $t('website.basic') }} <WebsiteStatus
</el-button> v-if="website.id > 0"
<el-button type="primary" :plain="index !== 'safety'" @click="changeTab('safety')"> :primary-domain="website.primaryDomain"
{{ $t('website.security') }} :status="website.status"
</el-button> :expire-date="website.expireDate"
<el-button type="primary" :plain="index !== 'log'" @click="changeTab('log')"> />
{{ $t('website.log') }} </template>
</el-button> <template #buttons>
<el-button type="primary" :plain="index !== 'resource'" @click="changeTab('resource')"> <el-button type="primary" :plain="index !== 'basic'" @click="changeTab('basic')">
{{ $t('website.source') }} {{ $t('website.basic') }}
</el-button> </el-button>
</template> <el-button type="primary" :plain="index !== 'safety'" @click="changeTab('safety')">
<template #main> {{ $t('website.security') }}
<Basic :id="id" v-if="index === 'basic'"></Basic> </el-button>
<Safety :id="id" v-if="index === 'safety'"></Safety> <el-button type="primary" :plain="index !== 'log'" @click="changeTab('log')">
<Log :id="id" v-if="index === 'log'"></Log> {{ $t('website.log') }}
<Resource :id="id" v-if="index === 'resource'"></Resource> </el-button>
</template> <el-button type="primary" :plain="index !== 'resource'" @click="changeTab('resource')">
</LayoutContent> {{ $t('website.source') }}
</el-button>
</template>
<template #main>
<Basic :id="id" v-if="index === 'basic'"></Basic>
<Safety :id="id" v-if="index === 'safety'"></Safety>
<Log :id="id" v-if="index === 'log'"></Log>
<Resource :id="id" v-if="index === 'resource'"></Resource>
</template>
</LayoutContent>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

36
frontend/src/views/website/website/status/index.vue
View File

@ -1,29 +1,23 @@
<template> <template>
<el-card> <div class="app-status">
<el-row :gutter="20"> <el-card>
<el-col :lg="3" :xl="2"> <div>
<div> <el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
<el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag> <span class="status-content">
</div>
</el-col>
<el-col :lg="4" :xl="2">
<div class="span-font">
<Status class="span-font" :key="props.status" :status="props.status"></Status> <Status class="span-font" :key="props.status" :status="props.status"></Status>
</div> </span>
</el-col> <span class="status-content">
<el-col :lg="4" :xl="4"> <el-tag type="info">
<div class="span-font">
<el-tag>
{{ $t('website.expireDate') }}: {{ $t('website.expireDate') }}:
<span v-if="isEver(props.expireDate)"> <span v-if="isEver(props.expireDate)">
{{ $t('website.neverExpire') }} {{ $t('website.neverExpire') }}
</span> </span>
<span v-else>{{ dateFormatSimple(props.expireDate) }}</span> <span v-else>{{ dateFormatSimple(props.expireDate) }}</span>
</el-tag> </el-tag>
</div> </span>
</el-col> </div>
</el-row> </el-card>
</el-card> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Status from '@/components/status/index.vue'; import Status from '@/components/status/index.vue';
@ -49,8 +43,4 @@ const isEver = (time: string) => {
}; };
</script> </script>
<style lang="scss"> <style lang="scss"></style>
.span-font {
font-size: 14px;
}
</style>