gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 22:18:07 +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;
}
}
}

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

@ -1,4 +1,13 @@
<template> <template>
<div>
<RouterButton
:buttons="[
{
label: $t('website.website'),
path: '/websites',
},
]"
/>
<LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading"> <LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading">
<template #app> <template #app>
<WebsiteStatus <WebsiteStatus
@ -29,6 +38,7 @@
<Resource :id="id" v-if="index === 'resource'"></Resource> <Resource :id="id" v-if="index === 'resource'"></Resource>
</template> </template>
</LayoutContent> </LayoutContent>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

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

@ -1,29 +1,23 @@
<template> <template>
<div class="app-status">
<el-card> <el-card>
<el-row :gutter="20">
<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>
</div> <span class="status-content">
</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>
</span>
</div> </div>
</el-col>
</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>