docs(ui/card): optimization doc & style

packages/varlet-ui/src/card/__tests__/__snapshots__/index.spec.js.snap

@@ -54,10 +54,10 @@ exports[`test card example 1`] = `
       <div class=\\"var-card__description\\">如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~</div>
       <div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" style=\\"color: rgb(255, 152, 0);\\">
           <!--v-if-->
-          <div class=\\"var-button__content\\">分享</div>
+          <div class=\\"var-button__content\\">操作 1</div>
         </button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" style=\\"color: rgb(255, 152, 0);\\">
           <!--v-if-->
-          <div class=\\"var-button__content\\">浏览</div>
+          <div class=\\"var-button__content\\">操作 2</div>
         </button></div>
       <!--v-if-->
     </div>
@@ -72,9 +72,12 @@ exports[`test card example 1`] = `
       <div class=\\"var-card__title\\">本草纲目</div>
       <div class=\\"var-card__subtitle\\">如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~</div>
       <!--v-if-->
-      <div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--small var--inline-flex var-button--text-default var-button--text\\" style=\\"color: rgb(255, 152, 0);\\">
+      <div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
           <!--v-if-->
-          <div class=\\"var-button__content\\">查看详情</div>
+          <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-star\\" style=\\"transition: transform 0ms;\\"></i></div>
+        </button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\">
+          <!--v-if-->
+          <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-heart\\" style=\\"transition: transform 0ms;\\"></i></div>
         </button></div>
       <!--v-if-->
     </div>
@@ -97,7 +100,7 @@ exports[`test card example 1`] = `
   </div>
   <div class=\\"var-card__holder\\" style=\\"width: auto; height: auto;\\"></div>
 </div>
-<div class=\\"app-type\\">全屏显示</div>
+<div class=\\"app-type\\">漂浮</div>
 <div class=\\"var-card\\">
   <div class=\\"var-card__floater var-elevation--1\\" style=\\"width: 100%; height: 100%; overflow: hidden; position: static;\\"><img class=\\"var-card__image\\" style=\\"object-fit: cover;\\" src=\\"https://varlet-varletjs.vercel.app/cat.jpg\\">
     <div class=\\"var-card__container\\">
@@ -106,16 +109,16 @@ exports[`test card example 1`] = `
       <!--v-if-->
       <div class=\\"var-card__footer\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" style=\\"color: rgb(255, 152, 0);\\">
           <!--v-if-->
-          <div class=\\"var-button__content\\">分享</div>
+          <div class=\\"var-button__content\\">操作 1</div>
         </button><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text\\" style=\\"color: rgb(255, 152, 0);\\">
           <!--v-if-->
-          <div class=\\"var-button__content\\">浏览</div>
+          <div class=\\"var-button__content\\">操作 2</div>
         </button></div>
       <div class=\\"var-card__content\\" style=\\"height: 0px; opacity: 0; transition: opacity 500ms;\\">
         <div class=\\"var-divider var--box var-divider--dashed\\">
           <!--v-if-->
         </div>
-        <div class=\\"card-example-text\\">如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~ 如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~ 如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~ 如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~ 如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~ 如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~</div>
+        <div class=\\"card-example-text\\">如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子，还有莲子；黄药子、苦豆子、川楝子，我要面子。用我的方式，改写一部历史。没什么别的事，跟着我念几个字。山药当归枸杞 GO，山药 当归 枸杞 GO，看我抓一把中药，服下一帖骄傲~</div>
       </div>
     </div>
     <!--v-if-->

packages/varlet-ui/src/card/card.less

@@ -2,19 +2,18 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
-@card-row-image-width: 120px;
-@card-row-height: 120px;
+@card-row-image-width: 150px;
+@card-row-height: 150px;
 @card-image-height: 200px;
 @card-title-color: #333;
 @card-title-font-size: 20px;
 @card-title-padding: 0 12px;
 @card-title-margin: 15px 0 0 0;
-@card-title-row-margin: 10px 0 0 0;
+@card-title-row-margin: 12px 0;
 @card-subtitle-color: rgba(0, 0, 0, 0.6);
 @card-subtitle-font-size: 14px;
-@card-subtitle-row-font-size: 12px;
-@card-subtitle-padding: 0 13px;
-@card-subtitle-row-margin: 4px 0 0 0;
+@card-subtitle-padding: 0 12px;
+@card-subtitle-row-margin: -8px 0 0 0;
 @card-subtitle-margin: 10px 0 0 0;
 @card-description-color: rgba(0, 0, 0, 0.6);
 @card-description-font-size: 14px;
@@ -25,7 +24,7 @@
 @card-footer-bottom: 9px;
 @card-footer-margin: 30px 0 0px 0;
 @card-line-height: 22px;
-@card-row-line-height: 1.4;
+@card-row-line-height: 1.5;
 @card-floater-toolbar-bottom: 16px;
 @card-floater-toolbar-right: 16px;
 @card-floater-toolbar-color: #fff;
@@ -48,7 +47,6 @@
   --card-title-row-margin: @card-title-row-margin;
   --card-subtitle-color: @card-subtitle-color;
   --card-subtitle-font-size: @card-subtitle-font-size;
-  --card-subtitle-row-font-size: @card-subtitle-row-font-size;
   --card-subtitle-padding: @card-subtitle-padding;
   --card-subtitle-margin: @card-subtitle-margin;
   --card-subtitle-row-margin: @card-subtitle-row-margin;
@@ -73,6 +71,7 @@
 .var-card {
   &--layout-row {
     height: var(--card-row-height);
+    position: relative;
   }
 
   &__floater {
@@ -133,7 +132,6 @@
   }
 
   &--layout-row &__subtitle {
-    font-size: var(--card-subtitle-row-font-size);
     margin: var(--card-subtitle-row-margin);
     text-overflow: ellipsis;
     display: -webkit-box;

packages/varlet-ui/src/card/docs/en-US.md

@@ -41,7 +41,12 @@
       src="https://varlet-varletjs.vercel.app/cat.jpg"
       layout="row">
     <template #extra>
-      <var-button text text-color="#ff9800" size="mini">Learn More</var-button>
+      <var-button text round>
+        <var-icon name="star" />
+      </var-button>
+      <var-button round text>
+        <var-icon name="heart" />
+      </var-button>
     </template>
   </var-card>
 </template>
@@ -59,8 +64,8 @@
   >
     <template #extra>
       <var-space>
-        <var-button text text-color="#ff9800">Share</var-button>
-        <var-button text text-color="#ff9800">Explore</var-button>
+        <var-button text text-color="#ff9800">ACTION 1</var-button>
+        <var-button text text-color="#ff9800">ACTION 2</var-button>
       </var-space>
     </template>
   </var-card>
@@ -80,7 +85,7 @@
 </template>
 ```
 
-### Full Screen
+### Floating
 
 ```html
 <script setup>
@@ -99,8 +104,8 @@ const floating = ref(false)
       src="https://varlet-varletjs.vercel.app/cat.jpg"
   >
     <template #extra>
-      <var-button text text-color="#ff9800">Share</var-button>
-      <var-button text text-color="#ff9800">Explore</var-button>
+      <var-button text text-color="#ff9800">ACTION 1</var-button>
+      <var-button text text-color="#ff9800">ACTION 2</var-button>
     </template>
 
     <template #content>
@@ -170,30 +175,29 @@ Here are the CSS variables used by the component, Styles can be customized using
 | `--card-padding`                             | `0px 0 15px 0`       |
 | `--card-border-radius`                       | `4px`                |
 | `--card-image-width`                         | `100%`               |
-| `--card-row-image-width`                     | `120px`              |
+| `--card-row-image-width`                     | `150px`              |
 | `--card-image-height`                        | `200px`              |
-| `--card-row-image-height`                    | `120px`              |
+| `--card-row-image-height`                    | `150px`              |
 | `--card-title-color`                         | `#333`               |
 | `--card-title-font-size`                     | `20px`               |
 | `--card-title-padding`                       | `0 12px`             |
 | `--card-title-margin`                        | `15px 0 0 0`         |
-| `--card-title-row-margin`                    | `10px 0 0 0`         |
+| `--card-title-row-margin`                    | `12px 0`             |
 | `--card-subtitle-color`                      | `rgba(0, 0, 0, 0.6)` |
 | `--card-subtitle-font-size`                  | `14px`               |
-| `--card-subtitle-row-font-size`              | `12px`               |
 | `--card-subtitle-padding`                    | `0 13px`             |
 | `--card-subtitle-margin`                     | `10px 0 0 0`         |
-| `--card-subtitle-row-margin`                 | `4px 0 0 0`          |
+| `--card-subtitle-row-margin`                 | `-8px 0 0 0`         |
 | `--card-description-color`                   | `rgba(0, 0, 0, 0.6)` |
 | `--card-description-font-size`               | `14px`               |
 | `--card-description-margin`                  | `20px 0 0 0`         |
 | `--card-description-padding`                 | `0 13px`             |
 | `--card-footer-padding`                      | `0 12px`             |
 | `--card-footer-margin`                       | `30px 0 0px 0`       |
 | `--card-footer-right`                        | `13px`               |
-| `--card-footer-bottom`                       | `9px`               |
+| `--card-footer-bottom`                       | `9px`                |
 | `--card-line-height`                         | `22px`               |
-| `--card-row-line-height`                     | `1.4`                |
+| `--card-row-line-height`                     | `1.5`                |
 | `--card-floater-toolbar-bottom`              | `16px`               |
 | `--card-floater-toolbar-right`               | `16px`               |
 | `--card-floater-toolbar-color`               | `#fff`               |

packages/varlet-ui/src/card/docs/zh-CN.md

@@ -46,7 +46,12 @@
     src="https://varlet-varletjs.vercel.app/cat.jpg"
     layout="row">
     <template #extra>
-      <var-button text text-color="#ff9800" size="small">查看详情</var-button>
+      <var-button text round>
+        <var-icon name="star" />
+      </var-button>
+      <var-button round text>
+        <var-icon name="heart" />
+      </var-button>
     </template>
   </var-card>
 </template>
@@ -64,8 +69,8 @@
   >
     <template #extra>
       <var-space>
-        <var-button text text-color="#ff9800">分享</var-button>
-        <var-button text text-color="#ff9800">浏览</var-button>
+        <var-button text text-color="#ff9800">操作 1</var-button>
+        <var-button text text-color="#ff9800">操作 2</var-button>
       </var-space>
     </template>
   </var-card>
@@ -85,7 +90,7 @@
 </template>
 ```
 
-### 全屏
+### 漂浮
 
 ```html
 <script setup>
@@ -104,8 +109,8 @@ const floating = ref(false)
     src="https://varlet-varletjs.vercel.app/cat.jpg"
   >
     <template #extra>
-      <var-button text text-color="#ff9800">分享</var-button>
-      <var-button text text-color="#ff9800">浏览</var-button>
+      <var-button text text-color="#ff9800">操作 1</var-button>
+      <var-button text text-color="#ff9800">操作 2</var-button>
     </template>
 
     <template #content>
@@ -177,30 +182,29 @@ const floating = ref(false)
 | `--card-padding`                             | `0px 0 15px 0`       |
 | `--card-border-radius`                       | `4px`                |
 | `--card-image-width`                         | `100%`               |
-| `--card-row-image-width`                     | `120px`              |
+| `--card-row-image-width`                     | `150px`              |
 | `--card-image-height`                        | `200px`              |
-| `--card-row-image-height`                    | `120px`              |
+| `--card-row-image-height`                    | `150px`              |
 | `--card-title-color`                         | `#333`               |
 | `--card-title-font-size`                     | `20px`               |
 | `--card-title-padding`                       | `0 12px`             |
 | `--card-title-margin`                        | `15px 0 0 0`         |
-| `--card-title-row-margin`                    | `10px 0 0 0`         |
+| `--card-title-row-margin`                    | `12px 0`             |
 | `--card-subtitle-color`                      | `rgba(0, 0, 0, 0.6)` |
 | `--card-subtitle-font-size`                  | `14px`               |
-| `--card-subtitle-row-font-size`              | `12px`               |
 | `--card-subtitle-padding`                    | `0 13px`             |
 | `--card-subtitle-margin`                     | `10px 0 0 0`         |
-| `--card-subtitle-row-margin`                 | `4px 0 0 0`          |
+| `--card-subtitle-row-margin`                 | `-8px 0 0 0`         |
 | `--card-description-color`                   | `rgba(0, 0, 0, 0.6)` |
 | `--card-description-font-size`               | `14px`               |
 | `--card-description-margin`                  | `20px 0 0 0`         |
 | `--card-description-padding`                 | `0 13px`             |
 | `--card-footer-padding`                      | `0 12px`             |
 | `--card-footer-margin`                       | `30px 0 0px 0`       |
 | `--card-footer-right`                        | `13px`               |
-| `--card-footer-bottom`                       | `9px`               |
+| `--card-footer-bottom`                       | `9px`                |
 | `--card-line-height`                         | `22px`               |
-| `--card-row-line-height`                     | `1.4`                |
+| `--card-row-line-height`                     | `1.5`                |
 | `--card-floater-toolbar-bottom`              | `16px`               |
 | `--card-floater-toolbar-right`               | `16px`               |
 | `--card-floater-toolbar-color`               | `#fff`               |

packages/varlet-ui/src/card/example/index.vue

@@ -2,6 +2,8 @@
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import VarButton from '../../button'
 import VarDivider from '../../divider'
+import VarIcon from '../../icon'
+import VarSpace from '../../space'
 import VarCard from '..'
 import dark from '../../themes/dark'
 import { pack, use } from './locale'
@@ -34,8 +36,8 @@ watchDarkMode(dark)
     src="https://varlet-varletjs.vercel.app/cat.jpg"
   >
     <template #extra>
-      <var-button text text-color="#ff9800">{{ pack.share }}</var-button>
-      <var-button text text-color="#ff9800">{{ pack.explore }}</var-button>
+      <var-button text text-color="#ff9800">{{ pack.action1 }}</var-button>
+      <var-button text text-color="#ff9800">{{ pack.action2 }}</var-button>
     </template>
   </var-card>
 
@@ -47,16 +49,19 @@ watchDarkMode(dark)
     src="https://varlet-varletjs.vercel.app/cat.jpg"
   >
     <template #extra>
-      <var-button text text-color="#ff9800" size="small">
-        {{ pack.learnMore }}
+      <var-button text round>
+        <var-icon name="star" />
+      </var-button>
+      <var-button round text>
+        <var-icon name="heart" />
       </var-button>
     </template>
   </var-card>
 
   <app-type>{{ pack.showRipple }}</app-type>
   <var-card :title="pack.title" :subtitle="pack.subtitle" :description="pack.description" ripple />
 
-  <app-type>{{ pack.fullScreen }}</app-type>
+  <app-type>{{ pack.floating }}</app-type>
   <var-card
     v-model:floating="floating"
     @click="floating = true"
@@ -66,19 +71,14 @@ watchDarkMode(dark)
     src="https://varlet-varletjs.vercel.app/cat.jpg"
   >
     <template #extra>
-      <var-button text text-color="#ff9800">{{ pack.share }}</var-button>
-      <var-button text text-color="#ff9800">{{ pack.explore }}</var-button>
+      <var-button text text-color="#ff9800">{{ pack.action1 }}</var-button>
+      <var-button text text-color="#ff9800">{{ pack.action2 }}</var-button>
     </template>
 
     <template #content>
       <var-divider dashed></var-divider>
       <div class="card-example-text">
         {{ pack.description }}
-        {{ pack.description }}
-        {{ pack.description }}
-        {{ pack.description }}
-        {{ pack.description }}
-        {{ pack.description }}
       </div>
     </template>
   </var-card>

packages/varlet-ui/src/card/example/locale/en-US.ts

@@ -8,9 +8,8 @@ export default {
     'The way she came into the place I knew right then and there.There was something different about this girl.The way she moved her hair her face her lines.Divinity in motion as she stalked the room.I could feel the aura of her presence.Every head turned feeling passion and lust.The girl was persuasive the girl I could not trust.The girl was bad.The girl was dangerous.',
   showImage: 'Show Image',
   useSlot: 'Use Slot',
-  share: 'Share',
-  explore: 'Explore',
+  action1: 'ACTION 1',
+  action2: 'ACTION 2',
   showRipple: 'Ripple Effect',
-  fullScreen: 'Full Screen',
-  learnMore: 'Learn More',
+  floating: 'Floating',
 }