update

src/views/monitor/log/errorLog.vue

@@ -1,52 +1,54 @@
 <template>
   <div class="app-container">
-    <div class="head-container">
-      <Search />
-      <crudOperation>
-        <el-button
-          slot="left"
-          class="filter-item"
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :loading="crud.delAllLoading"
-          @click="confirmDelAll()"
-        >
-          清空
-        </el-button>
-      </crudOperation>
-    </div>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <el-form label-position="left" inline class="demo-table-expand">
-            <el-form-item label="请求方法">
-              <span>{{ props.row.method }}</span>
-            </el-form-item>
-            <el-form-item label="请求参数">
-              <span>{{ props.row.params }}</span>
-            </el-form-item>
-          </el-form>
-        </template>
-      </el-table-column>
-      <el-table-column prop="username" label="用户名" />
-      <el-table-column prop="requestIp" label="IP" />
-      <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
-      <el-table-column prop="description" label="描述" />
-      <el-table-column prop="browser" label="浏览器" />
-      <el-table-column prop="createTime" label="创建日期" />
-      <el-table-column label="异常详情" width="100px">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
-      <pre>{{ errorInfo }}</pre>
-    </el-dialog>
-    <!--分页组件-->
-    <pagination />
+    <el-card class="box-card" shadow="always">
+      <div class="head-container">
+        <Search />
+        <crudOperation>
+          <el-button
+            slot="left"
+            class="filter-item"
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            :loading="crud.delAllLoading"
+            @click="confirmDelAll()"
+          >
+            清空
+          </el-button>
+        </crudOperation>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="请求方法">
+                <span>{{ props.row.method }}</span>
+              </el-form-item>
+              <el-form-item label="请求参数">
+                <span>{{ props.row.params }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="requestIp" label="IP" />
+        <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+        <el-table-column prop="description" label="描述" />
+        <el-table-column prop="browser" label="浏览器" />
+        <el-table-column prop="createTime" label="创建日期" />
+        <el-table-column label="异常详情" width="100px">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="info(scope.row.id)">查看详情</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="30px" width="85%">
+        <pre>{{ errorInfo }}</pre>
+      </el-dialog>
+      <!--分页组件-->
+      <pagination />
+    </el-card>
   </div>
 </template>
 

src/views/monitor/log/index.vue

@@ -1,51 +1,53 @@
 <template>
   <div class="app-container">
-    <div class="head-container">
-      <Search />
-      <crudOperation>
-        <el-button
-          slot="left"
-          class="filter-item"
-          type="danger"
-          icon="el-icon-delete"
-          size="mini"
-          :loading="crud.delAllLoading"
-          @click="confirmDelAll()"
-        >
-          清空
-        </el-button>
-      </crudOperation>
-    </div>
-    <!--表格渲染-->
-    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
-      <el-table-column type="expand">
-        <template slot-scope="props">
-          <el-form label-position="left" inline class="demo-table-expand">
-            <el-form-item label="请求方法">
-              <span>{{ props.row.method }}</span>
-            </el-form-item>
-            <el-form-item label="请求参数">
-              <span>{{ props.row.params }}</span>
-            </el-form-item>
-          </el-form>
-        </template>
-      </el-table-column>
-      <el-table-column prop="username" label="用户名" />
-      <el-table-column prop="requestIp" label="IP" />
-      <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
-      <el-table-column prop="description" label="描述" />
-      <el-table-column prop="browser" label="浏览器" />
-      <el-table-column prop="time" label="请求耗时" align="center">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
-          <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
-          <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建日期" width="180px" />
-    </el-table>
-    <!--分页组件-->
-    <pagination />
+    <el-card class="box-card" shadow="always">
+      <div class="head-container">
+        <Search />
+        <crudOperation>
+          <el-button
+            slot="left"
+            class="filter-item"
+            type="danger"
+            icon="el-icon-delete"
+            size="mini"
+            :loading="crud.delAllLoading"
+            @click="confirmDelAll()"
+          >
+            清空
+          </el-button>
+        </crudOperation>
+      </div>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+        <el-table-column type="expand">
+          <template slot-scope="props">
+            <el-form label-position="left" inline class="demo-table-expand">
+              <el-form-item label="请求方法">
+                <span>{{ props.row.method }}</span>
+              </el-form-item>
+              <el-form-item label="请求参数">
+                <span>{{ props.row.params }}</span>
+              </el-form-item>
+            </el-form>
+          </template>
+        </el-table-column>
+        <el-table-column prop="username" label="用户名" />
+        <el-table-column prop="requestIp" label="IP" />
+        <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
+        <el-table-column prop="description" label="描述" />
+        <el-table-column prop="browser" label="浏览器" />
+        <el-table-column prop="time" label="请求耗时" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
+            <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
+            <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建日期" width="180px" />
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </el-card>
   </div>
 </template>