From 1fa970fbc1490cb1ee1340ea5f9a745baa640488 Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Wed, 22 Feb 2023 15:38:49 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=20openresty=20?=
 =?UTF-8?q?=E7=9A=84=E7=8A=B6=E6=80=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/website/website/nginx/index.vue |  8 +--
 .../website/website/nginx/status/index.vue    | 64 ++++++++++++++++---
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/website/website/nginx/index.vue b/frontend/src/views/website/website/nginx/index.vue
index 551ea5709..90482f4da 100644
--- a/frontend/src/views/website/website/nginx/index.vue
+++ b/frontend/src/views/website/website/nginx/index.vue
@@ -2,10 +2,10 @@
     <LayoutContent :title="$t('nginx.nginxConfig')" :reload="true">
         <template #buttons>
             <el-button type="primary" :plain="activeName !== '1'" @click="changeTab('1')">
-                {{ $t('nginx.configResource') }}
+                {{ $t('nginx.status') }}
             </el-button>
             <el-button type="primary" :plain="activeName !== '2'" @click="changeTab('2')">
-                {{ $t('nginx.status') }}
+                {{ $t('nginx.configResource') }}
             </el-button>
             <el-button type="primary" :plain="activeName !== '3'" @click="changeTab('3')">
                 {{ $t('website.nginxPer') }}
@@ -15,8 +15,8 @@
             </el-button>
         </template>
         <template #main>
-            <Source v-if="activeName === '1'"></Source>
-            <Status v-if="activeName === '2'" :status="status" />
+            <Status v-if="activeName === '1'" :status="status" />
+            <Source v-if="activeName === '2'"></Source>
             <NginxPer v-if="activeName === '3'" />
             <ContainerLog v-if="activeName === '4'" ref="dialogContainerLogRef" />
         </template>
diff --git a/frontend/src/views/website/website/nginx/status/index.vue b/frontend/src/views/website/website/nginx/status/index.vue
index 6f59b7204..94a25d064 100644
--- a/frontend/src/views/website/website/nginx/status/index.vue
+++ b/frontend/src/views/website/website/nginx/status/index.vue
@@ -1,16 +1,49 @@
 <template>
     <el-row>
-        <el-col :span="12">
-            <el-descriptions :column="1" border>
-                <el-descriptions-item :width="100" :label="$t('nginx.connections')">
-                    {{ data.active }}
+        <el-col :span="22" :offset="1">
+            <el-descriptions :column="4" direction="vertical">
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.connections') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.active }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.accepts') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.accepts }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.handled') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.handled }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.requests') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.requests }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.reading') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.reading }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.writing') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.writing }}</span>
+                </el-descriptions-item>
+                <el-descriptions-item>
+                    <template #label>
+                        <span class="status-label">{{ $t('nginx.waiting') }}</span>
+                    </template>
+                    <span class="status-count">{{ data.waiting }}</span>
                 </el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.accepts')">{{ data.accepts }}</el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.handled')">{{ data.handled }}</el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.requests')">{{ data.requests }}</el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.reading')">{{ data.reading }}</el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.writing')">{{ data.writing }}</el-descriptions-item>
-                <el-descriptions-item :label="$t('nginx.waiting')">{{ data.waiting }}</el-descriptions-item>
             </el-descriptions>
         </el-col>
     </el-row>
@@ -50,3 +83,14 @@ onMounted(() => {
     get();
 });
 </script>
+
+<style lang="scss" scoped>
+.status-count {
+    font-size: 24px;
+}
+
+.status-label {
+    font-size: 14px;
+    color: #646a73;
+}
+</style>