Add software and hardware statistics

src/assets/css/pages/system/index.scss

@@ -0,0 +1,57 @@
+@use '@/assets/css/constants' as constants;
+
+.root-content {
+  padding: 30px;
+  gap: 20px;
+
+  .root-row {
+    gap: 20px;
+
+    .common-card {
+      padding: 20px;
+      gap: 20px;
+
+      > .head {
+        align-items: center;
+        gap: 5px;
+        color: constants.$main-color;
+
+        .icon {
+          font-size: constants.$SIZE_ICON_MD;
+          flex: 0 0 auto;
+        }
+
+        .title {
+          display: flex;
+          font-size: 1.2em;
+        }
+      }
+
+      .card-content {
+        font-size: 1.1em;
+        padding: 0 10px;
+        gap: 10px;
+
+        .key {
+          flex: 0 0 auto;
+          color: constants.$font-main-color;
+        }
+
+        .value {
+          color: constants.$font-secondary-color;
+          overflow: hidden;
+
+          > * {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+
+        > * {
+          gap: 5px;
+        }
+      }
+    }
+  }
+}

src/assets/css/pages/system/settings.scss

@@ -10,6 +10,7 @@
     .settings-card {
       padding: 20px;
       gap: 20px;
+      color: constants.$main-color;
 
       > .head {
         align-items: center;