style(AboutPage): 使关于卡片更Fluent化

通过自写样式表移除 FluentUI Web Component 矢一样的预设样式，对比 WinUI App Gallery 进行参考以达到更加类似于纯血 Fluent Design 的视觉效果。同时，本项目也正在计划正式启动去 FluentUI Web Component 化专项项目（详见 #114 与 #120），目标分支 “wu/ui” 即将建立，将于很久之后（划掉）开工！ Signed-off-by: crrashh1542 <[email protected]>
crrashh1542 · Aug 24, 2024 · 4e886de · 4e886de
1 parent 0568473
commit 4e886de
Showing 1 changed file with 17 additions and 8 deletions.
diff --git a/src/views/MainAbout.vue b/src/views/MainAbout.vue
@@ -32,7 +32,7 @@ const sources = [
    </p>
    <br />
 
-   <Card v-for="i in buildInfo" :key="i.key" class="text-lg">
+   <Card v-for="i in buildInfo" :key="i.key" class="section text-lg">
       <!-- 如果有外部链接，加 a 标签 -->
       <a v-if="i[3] !== undefined" :href="i[2]" class="flex" target="_blank">
          <span class="flex-none item" :class="i[1]">{{ i[0] }}</span>
@@ -70,19 +70,28 @@ const sources = [
    <p>
       Windows 为 Microsoft Corporation 的注册商标，本项目与 Microsoft
       Corporation 无关。项目采用的所有字体和图片均搜集自网络且仅用作学习，
-      其版权归原公司所有；项目采用的所有图标来自<a
+      其版权归原公司所有；项目采用的所有图标来自 <a
          href="https://www.iconfont.cn">iconfont</a>。
    </p>
 </template>
 
 <style lang="less" scoped>
 @import url('@s/global.less');
 .card {
-   padding: 10px 18px;
+   display: block;
+   margin: 3px 0;
+   padding: 18px calc(12px + 1.2%);
+   box-shadow: unset;
+   border-radius: 5px;
+   border: 1px solid #e6e6e6;
+   font-size: 18px;
 
    .item::before {
-      margin-right: 10px;
-      font-size: 18px;
+      margin: 0 18px 0 0;
+   }
+
+   .value {
+      color: #666;
    }
 }
 
@@ -94,9 +103,9 @@ li {
 // 移动端
 @media screen and (max-width: 800px) {
    .card {
-      .value {
-         font-size: 16px;
-      }
+      font-size: 16px;
+      .item::before { margin: 0 8px 0 0; }
+    //   .value { font-size: 16px; }
    }
 }
 </style>