feat: 为关于页面的卡片信息添加内容超出显示滚动条 (#957)

src/views/about/index.vue

@@ -75,7 +75,9 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">平台信息</span>
         </div>
       </template>
-      <PureDescriptions border :columns="columns" :column="4" />
+      <el-scrollbar>
+        <PureDescriptions border :columns="columns" :column="4" />
+      </el-scrollbar>
     </el-card>
 
     <el-card class="m-4 box-card" shadow="never">
@@ -84,28 +86,30 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">生产环境依赖</span>
         </div>
       </template>
-      <el-descriptions border size="small" :column="6">
-        <el-descriptions-item
-          v-for="(item, index) in schema"
-          :key="index"
-          :label="item.label"
-          :label-class-name="getMainLabel(item.label)"
-          class-name="pure-version"
-          label-align="right"
-        >
-          <a
-            :href="'https://www.npmjs.com/package/' + item.label"
-            target="_blank"
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="6">
+          <el-descriptions-item
+            v-for="(item, index) in schema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
           >
-            <span
-              :class="getMainLabel(item.label)"
-              style="color: var(--el-color-primary)"
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
             >
-              {{ item.field }}
-            </span>
-          </a>
-        </el-descriptions-item>
-      </el-descriptions>
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
     </el-card>
 
     <el-card class="m-4 box-card" shadow="never">
@@ -114,28 +118,30 @@ Object.keys(devDependencies).forEach(key => {
           <span class="font-medium">开发环境依赖</span>
         </div>
       </template>
-      <el-descriptions border size="small" :column="5">
-        <el-descriptions-item
-          v-for="(item, index) in devSchema"
-          :key="index"
-          :label="item.label"
-          :label-class-name="getMainLabel(item.label)"
-          class-name="pure-version"
-          label-align="right"
-        >
-          <a
-            :href="'https://www.npmjs.com/package/' + item.label"
-            target="_blank"
+      <el-scrollbar>
+        <el-descriptions border size="small" :column="5">
+          <el-descriptions-item
+            v-for="(item, index) in devSchema"
+            :key="index"
+            :label="item.label"
+            :label-class-name="getMainLabel(item.label)"
+            class-name="pure-version"
+            label-align="right"
           >
-            <span
-              :class="getMainLabel(item.label)"
-              style="color: var(--el-color-primary)"
+            <a
+              :href="'https://www.npmjs.com/package/' + item.label"
+              target="_blank"
             >
-              {{ item.field }}
-            </span>
-          </a>
-        </el-descriptions-item>
-      </el-descriptions>
+              <span
+                :class="getMainLabel(item.label)"
+                style="color: var(--el-color-primary)"
+              >
+                {{ item.field }}
+              </span>
+            </a>
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-scrollbar>
     </el-card>
   </div>
 </template>