From a39fd4c8216a6a44ff032f6664688cdbf92784c3 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Mon, 16 Oct 2023 11:31:54 +0800
Subject: [PATCH] card

---
 src/components/Card.vue | 73 +++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 32 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index 65be661..777d172 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -9,12 +9,12 @@
       <p class="title">{{ item.title }}</p>
       <div class="img_box">
         <img :src="item.picUrl" class="img" />
-        <div class="bottom_text">
-          <p>工业设计</p>
-          <p>软硬件研发</p>
-          <p>样机制作</p>
-          <p>量产</p>
-        </div>
+      </div>
+      <div class="bottom_text">
+        <p>工业设计</p>
+        <p>软硬件研发</p>
+        <p>样机制作</p>
+        <p>量产</p>
       </div>
     </div>
   </div>
@@ -46,32 +46,30 @@ const toDetail = (productId, classify) => {
 <style lang="scss" scoped>
 .line_cards {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: repeat(5, 1fr);
+  grid-template-columns: repeat(1, 1fr);
+  grid-template-rows: repeat(10, 1fr);
   column-gap: 7px;
   padding: 0 7px;
   box-sizing: border-box;
   row-gap: 7px;
   .card {
     background: #ffffff;
-    border-radius: 3px;
+    border-radius: 16px;
     flex: 1;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    padding: 11px 7px 7px 7px;
+    padding: 14px;
     .title {
-      width: 150px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 8px;
-      height: 16px;
       font-family: Source Han Sans CN;
-      font-weight: 400;
-      color: #2f2f2f;
-      padding-left: 2px;
-      margin-bottom: 6px;
+      font-size: 16px;
+      font-weight: bold;
+      line-height: normal;
+      letter-spacing: 0em;
+      font-feature-settings: 'kern' on;
+      color: #191919;
+      padding-left: 8px;
+      margin-bottom: 12px;
     }
     .img_box {
       width: 100%;
@@ -80,23 +78,34 @@ const toDetail = (productId, classify) => {
       .img {
         width: 100%;
         height: 100%;
+        border-radius: 8px;
         object-fit: cover;
       }
-      .bottom_text {
-        position: absolute;
-        left: -50%;
-        bottom: -7px;
-        background: rgba(0, 0, 0, 0.2);
+    }
+    .bottom_text {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      align-items: center;
+      margin-top: 12px;
+      column-gap: 6px;
+      p {
+        width: 100%;
+        padding: 3px 6px;
+        white-space: nowrap;
+        border-radius: 555px;
+        opacity: 1;
+        box-sizing: border-box;
+        border: 2px solid #7c7c7c;
         display: flex;
-        padding: 5px 0;
         align-items: center;
-        justify-content: space-evenly;
-        font-size: 16px;
+        justify-content: center;
         font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #ffffff;
-        width: 200%;
-        transform: scale(0.5);
+        font-size: 11px;
+        font-weight: 500;
+        line-height: normal;
+        letter-spacing: 0.08em;
+        font-feature-settings: 'kern' on;
+        color: #5e5e5e;
       }
     }
   }