From 62709bcec6b4686cc68163627d0b91a9e7a5e5ee Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Tue, 7 Feb 2023 18:06:27 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80app=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  | 26 +------
 frontend/src/styles/common.scss               | 16 +++++
 .../views/website/website/config/index.vue    | 70 +++++++++++--------
 .../views/website/website/status/index.vue    | 36 ++++------
 4 files changed, 71 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index 0fa177a36..5cec3a97e 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="a-card" v-if="data.isExist">
+        <div class="app-status" v-if="data.isExist">
             <el-card>
                 <div>
                     <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
@@ -142,33 +142,11 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.a-card {
-    font-size: 12px;
-
-    .el-card {
-        --el-card-padding: 12px;
-
-        .buttons {
-            margin-left: 100px;
-        }
-    }
-}
-
-// body {
-//     margin: 0;
-// }
-
-.status-content {
-    margin-left: 50px;
-}
-
+<style lang="scss">
 .app-warn {
     text-align: center;
     margin-top: 100px;
     span:first-child {
-        // font-weight: 500;
-        // font-size: 16px;
         color: #bbbfc4;
     }
 
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 73cd16cd4..3fe385078 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -248,3 +248,19 @@
         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;
+        }
+    }
+}
diff --git a/frontend/src/views/website/website/config/index.vue b/frontend/src/views/website/website/config/index.vue
index e6524d712..729b0fe99 100644
--- a/frontend/src/views/website/website/config/index.vue
+++ b/frontend/src/views/website/website/config/index.vue
@@ -1,34 +1,44 @@
 <template>
-    <LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading">
-        <template #app>
-            <WebsiteStatus
-                v-if="website.id > 0"
-                :primary-domain="website.primaryDomain"
-                :status="website.status"
-                :expire-date="website.expireDate"
-            />
-        </template>
-        <template #buttons>
-            <el-button type="primary" :plain="index !== 'basic'" @click="changeTab('basic')">
-                {{ $t('website.basic') }}
-            </el-button>
-            <el-button type="primary" :plain="index !== 'safety'" @click="changeTab('safety')">
-                {{ $t('website.security') }}
-            </el-button>
-            <el-button type="primary" :plain="index !== 'log'" @click="changeTab('log')">
-                {{ $t('website.log') }}
-            </el-button>
-            <el-button type="primary" :plain="index !== 'resource'" @click="changeTab('resource')">
-                {{ $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>
+        <RouterButton
+            :buttons="[
+                {
+                    label: $t('website.website'),
+                    path: '/websites',
+                },
+            ]"
+        />
+        <LayoutContent :title="$t('website.websiteConfig')" :back-name="'Website'" v-loading="loading">
+            <template #app>
+                <WebsiteStatus
+                    v-if="website.id > 0"
+                    :primary-domain="website.primaryDomain"
+                    :status="website.status"
+                    :expire-date="website.expireDate"
+                />
+            </template>
+            <template #buttons>
+                <el-button type="primary" :plain="index !== 'basic'" @click="changeTab('basic')">
+                    {{ $t('website.basic') }}
+                </el-button>
+                <el-button type="primary" :plain="index !== 'safety'" @click="changeTab('safety')">
+                    {{ $t('website.security') }}
+                </el-button>
+                <el-button type="primary" :plain="index !== 'log'" @click="changeTab('log')">
+                    {{ $t('website.log') }}
+                </el-button>
+                <el-button type="primary" :plain="index !== 'resource'" @click="changeTab('resource')">
+                    {{ $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>
 
 <script setup lang="ts">
diff --git a/frontend/src/views/website/website/status/index.vue b/frontend/src/views/website/website/status/index.vue
index 16d8fd857..46787da24 100644
--- a/frontend/src/views/website/website/status/index.vue
+++ b/frontend/src/views/website/website/status/index.vue
@@ -1,29 +1,23 @@
 <template>
-    <el-card>
-        <el-row :gutter="20">
-            <el-col :lg="3" :xl="2">
-                <div>
-                    <el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
-                </div>
-            </el-col>
-            <el-col :lg="4" :xl="2">
-                <div class="span-font">
+    <div class="app-status">
+        <el-card>
+            <div>
+                <el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
+                <span class="status-content">
                     <Status class="span-font" :key="props.status" :status="props.status"></Status>
-                </div>
-            </el-col>
-            <el-col :lg="4" :xl="4">
-                <div class="span-font">
-                    <el-tag>
+                </span>
+                <span class="status-content">
+                    <el-tag type="info">
                         {{ $t('website.expireDate') }}:
                         <span v-if="isEver(props.expireDate)">
                             {{ $t('website.neverExpire') }}
                         </span>
                         <span v-else>{{ dateFormatSimple(props.expireDate) }}</span>
                     </el-tag>
-                </div>
-            </el-col>
-        </el-row>
-    </el-card>
+                </span>
+            </div>
+        </el-card>
+    </div>
 </template>
 <script lang="ts" setup>
 import Status from '@/components/status/index.vue';
@@ -49,8 +43,4 @@ const isEver = (time: string) => {
 };
 </script>
 
-<style lang="scss">
-.span-font {
-    font-size: 14px;
-}
-</style>
+<style lang="scss"></style>