perf: perf style (#89)

perf: perf style
2025-11-03 13:44:47 +08:00 · 2021-10-31 20:24:57 +08:00
parent 0fb7b5e983
commit 9ddf449ea7
20 changed files with 161 additions and 166 deletions
--- a/src/views/components/contextmenu/index.vue
+++ b/src/views/components/contextmenu/index.vue
@@ -5,7 +5,7 @@ import menuDynamic from "./menuDynamic.vue";
 </script>

 <template>
-  <div style="margin: 10px">
+  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
        <!-- 基本使用 -->
--- a/src/views/components/count-to/index.vue
+++ b/src/views/components/count-to/index.vue
@@ -3,7 +3,7 @@ import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
 </script>

 <template>
-  <div style="margin: 10px">
+  <div>
    <el-row :gutter="24">
      <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
        <el-card shadow="always">
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -25,7 +25,7 @@ const onCropper = (): void => {
 </script>

 <template>
-  <div style="margin: 10px">
+  <div>
    <div class="cropper-container">
      <Cropper ref="refCropper" :width="'40vw'" :src="img" />
      <img :src="cropperImg" class="croppered" v-if="cropperImg" />
--- a/src/views/components/map/index.vue
+++ b/src/views/components/map/index.vue
@@ -3,14 +3,11 @@ import { Amap } from "/@/components/ReMap";
 </script>

 <template>
-  <div class="map">
-    <Amap />
-  </div>
+  <Amap />
 </template>

 <style scoped>
-.map {
-  width: 100%;
-  height: 89vh;
+.main-content {
+  margin: 0;
 }
 </style>
--- a/src/views/components/seamless-scroll/index.vue
+++ b/src/views/components/seamless-scroll/index.vue
@@ -110,10 +110,6 @@ function changeDirection(val) {
 </template>

 <style lang="scss" scoped>
-.box-card {
-  margin: 10px;
-}
-
 .card-header {
  display: flex;
  justify-content: space-between;
--- a/src/views/components/selector/index.vue
+++ b/src/views/components/selector/index.vue
@@ -23,12 +23,7 @@ const selectedVal = ({ left, right }): void => {

 <template>
  <div>
-    <el-card
-      class="box-card"
-      style="margin: 10px"
-      v-for="(item, key) in dataLists"
-      :key="key"
-    >
+    <el-card class="box-card" v-for="(item, key) in dataLists" :key="key">
      <template #header>
        <div class="card-header">
          <span>{{ item.title }}</span>
@@ -44,3 +39,9 @@ const selectedVal = ({ left, right }): void => {
    </el-card>
  </div>
 </template>
+
+<style scoped>
+.el-card {
+  margin-bottom: 10px;
+}
+</style>
--- a/src/views/components/split-pane/index.vue
+++ b/src/views/components/split-pane/index.vue
@@ -41,12 +41,11 @@ const settingTB: ContextProps = reactive({

 <style lang="scss" scoped>
 $W: 100%;
-$H: 80vh;
+$H: 70vh;

 .split-pane {
-  width: 98%;
+  width: 70vw;
  height: $H;
-  margin-top: 5px;
  text-align: center;
  font-size: 50px;
  color: #fff;
--- a/src/views/flow-chart/index.vue
+++ b/src/views/flow-chart/index.vue
@@ -86,9 +86,8 @@ onMounted(() => {

 <style scoped>
 #LF-Turbo {
-  width: 100vw;
-  height: 88.5vh;
-  outline: none;
+  width: 100%;
+  height: calc(100vh - 90px);
 }

 .logic-flow-view {
@@ -138,4 +137,8 @@ onMounted(() => {
  height: 85vh;
  overflow: auto;
 }
+
+.main-content {
+  margin: 0;
+}
 </style>
--- a/src/views/nested/menu1/index.vue
+++ b/src/views/nested/menu1/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div>
    <p>{{ $t("message.hsmenu1") }}</p>
    <router-view>
      <template #default="{ Component, route }">
--- a/src/views/nested/menu2/index.vue
+++ b/src/views/nested/menu2/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div>
    <p>{{ $t("message.hsmenu2") }}</p>
    <el-input v-model="input" />
  </div>
--- a/src/views/permission/button/index.vue
+++ b/src/views/permission/button/index.vue
@@ -14,7 +14,7 @@ function changRole(value) {
 </script>

 <template>
-  <div class="app-container">
+  <div>
    <el-radio-group v-model="auth" @change="changRole">
      <el-radio-button label="admin"></el-radio-button>
      <el-radio-button label="test"></el-radio-button>
--- a/src/views/permission/page/index.vue
+++ b/src/views/permission/page/index.vue
@@ -22,7 +22,7 @@ function changRole() {
 </script>

 <template>
-  <div class="app-container">
+  <div>
    <h4>
      当前角色：
      <span style="font-size: 26px">{{ purview }}</span>
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -197,7 +197,7 @@ function handleClose() {
 </script>

 <template>
-  <div class="dict-container">
+  <div>
    <!-- 工具栏 -->
    <vxe-toolbar>
      <template #buttons>
@@ -309,10 +309,6 @@ function handleClose() {
 </template>

 <style lang="scss" scoped>
-.dict-container {
-  margin: 10px;
-}
-
 .vxe-input + .vxe-button,
 .vxe-input + .vxe-button--dropdown,
 .vxe-button + .vxe-button,
@@ -324,6 +320,14 @@ function handleClose() {
  border-radius: 0;
 }

+.vxe-toolbar.size--medium {
+  padding: 10px;
+}
+
+.vxe-table--render-default.size--medium {
+  margin-top: 12px;
+}
+
 .vxe-button.size--medium.type--button {
  margin-right: 0.07em;
 }
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -6,7 +6,7 @@ const gridOptions = reactive({
  border: true,
  resizable: true,
  keepSource: true,
-  height: 500,
+  height: 578,
  printConfig: {},
  importConfig: {},
  exportConfig: {},
@@ -162,33 +162,6 @@ const gridOptions = reactive({
                sex: "Man ",
                age: 35,
                address: "Guangzhou"
-              },
-              {
-                id: 100011,
-                name: "Test11",
-                nickname: "T11",
-                role: "Test",
-                sex: "Women ",
-                age: 26,
-                address: "vxe-table 从入门到放弃"
-              },
-              {
-                id: 100012,
-                name: "Test12",
-                nickname: "T12",
-                role: "Develop",
-                sex: "Man ",
-                age: 34,
-                address: "Guangzhou"
-              },
-              {
-                id: 100013,
-                name: "Test13",
-                nickname: "T13",
-                role: "Test",
-                sex: "Women ",
-                age: 22,
-                address: "Shenzhen"
              }
            ];
            resolve({
@@ -238,5 +211,5 @@ const gridOptions = reactive({
 </script>

 <template>
-  <vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
+  <vxe-grid v-bind="gridOptions"></vxe-grid>
 </template>
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -6,12 +6,10 @@ import {
  ReLine,
  ReBar
 } from "/@/components/ReCharts/index";
-import { useAppStoreHook } from "/@/store/modules/app";
-import { ref, shallowRef, computed, onBeforeMount } from "vue";
+import { ref, computed } from "vue";

 const date: Date = new Date();
 let loading = ref<boolean>(true);
-const componentList = shallowRef([]);

 setTimeout(() => {
  loading.value = !loading.value;
@@ -27,56 +25,6 @@ let greetings = computed(() => {
  }
 });

-onBeforeMount(() => {
-  if (useAppStoreHook().device === "mobile") {
-    componentList.value = [
-      {
-        width: "20em",
-        title: "GitHub饼图信息",
-        component: RePie
-      },
-      {
-        width: "20em",
-        title: "GitHub折线图信息",
-        component: ReLine
-      },
-      {
-        width: "20em",
-        title: "GitHub柱状图信息",
-        component: ReBar
-      }
-    ];
-  } else {
-    componentList.value = [
-      {
-        width: "43em",
-        title: "GitHub信息",
-        component: ReGithub
-      },
-      {
-        width: "43em",
-        title: "GitHub滚动信息",
-        component: ReInfinite
-      },
-      {
-        width: "28.28em",
-        title: "GitHub饼图信息",
-        component: RePie
-      },
-      {
-        width: "28.28em",
-        title: "GitHub折线图信息",
-        component: ReLine
-      },
-      {
-        width: "28.28em",
-        title: "GitHub柱状图信息",
-        component: ReBar
-      }
-    ];
-  }
-});
-
 const openDepot = (): void => {
  window.open("https://github.com/xiaoxian521/vue-pure-admin");
 };
@@ -95,27 +43,97 @@ const openDepot = (): void => {
      </div>
    </el-card>

-    <el-space class="space" wrap size="large">
-      <el-skeleton
-        v-for="(item, key) in componentList"
-        :key="key"
-        animated
-        :rows="7"
-        :loading="loading"
-        :class="$style.size"
-        :style="{ width: item.width }"
+    <el-row :gutter="24" style="margin: 20px">
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        style="margin-bottom: 20px"
      >
-        <template #default>
-          <div
-            :class="['echart-card', $style.size]"
-            :style="{ width: item.width }"
-          >
-            <h4>{{ item.title }}</h4>
-            <component :is="item.component"></component>
-          </div>
-        </template>
-      </el-skeleton>
-    </el-space>
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub信息</h4>
+              <ReGithub />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="12"
+        :xl="12"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub滚动信息</h4>
+              <ReInfinite />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="8"
+        :xl="8"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub饼图信息</h4>
+              <RePie />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="12"
+        :md="12"
+        :lg="8"
+        :xl="8"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub折线图信息</h4>
+              <ReLine />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <el-col
+        :xs="24"
+        :sm="24"
+        :md="24"
+        :lg="8"
+        :xl="1"
+        style="margin-bottom: 20px"
+      >
+        <el-skeleton animated :rows="7" :loading="false">
+          <template #default>
+            <el-card>
+              <h4>GitHub柱状图信息</h4>
+              <ReBar />
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+    </el-row>
  </div>
 </template>

@@ -126,8 +144,11 @@ const openDepot = (): void => {
 </style>

 <style lang="scss" scoped>
+.main-content {
+  margin: 0;
+}
+
 .welcome {
-  width: 100%;
  height: 100%;

  .top-content {
@@ -155,22 +176,5 @@ const openDepot = (): void => {
      }
    }
  }
-
-  .space {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 8px;
-    padding: 10px;
-
-    .echart-card {
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-
-      h4 {
-        margin: 0;
-        padding: 20px;
-      }
-    }
-  }
 }
 </style>