style: 调整 openresty 的状态样式

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>

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>