From 4a88944b9c336de10937aedc839eef76410abb28 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 10 Mar 2023 17:31:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=A4=A7=E5=B1=8F=E5=85=9A?=
 =?UTF-8?q?=E5=BB=BA=E4=B8=BB=E9=A2=98=E7=9A=84=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AiDvSummary/components/Summary13.vue      | 69 +++++++++++++++----
 components/layout/AiRanking/AiRanking.vue     |  5 ++
 2 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/components/layout/AiDvSummary/components/Summary13.vue b/components/layout/AiDvSummary/components/Summary13.vue
index b29f64b8..95353155 100644
--- a/components/layout/AiDvSummary/components/Summary13.vue
+++ b/components/layout/AiDvSummary/components/Summary13.vue
@@ -3,6 +3,10 @@
     <div class="summary13-item" v-for="(item, index) in data" :key="index" v-if="index < 4">
       <h2>{{ item[keys] }}：</h2>
       <p>{{ item[value] }}</p>
+      <i class="lt"></i>
+      <i class="lb"></i>
+      <i class="rt"></i>
+      <i class="rb"></i>
     </div>
   </div>
 </template>
@@ -66,7 +70,8 @@
       text-align: center;
       color: #fff;
       font-size: 14px;
-      border: 1px solid #717171;
+      border-top: 1px solid #717171;
+      border-bottom: 1px solid #717171;
 
       h2 {
         color: #C4D8DB;
@@ -79,33 +84,71 @@
         font-size: 14px;
       }
 
-      &::after {
+      .lt {
         position: absolute;
-        left: -1px;
-        top: 50%;
+        left: 0;
+        top: 0;
         z-index: 11;
         width: 1px;
-        height: 10px;
-        transform: translateY(-50%);
-        background: #0c0c0c;
+        height: 14px;
+        background: #717171;
         content: ' ';
       }
 
-      &::before {
+      .lb {
         position: absolute;
-        right: - 1px;
-        top: 50%;
+        left: 0;
+        bottom: 0;
         z-index: 11;
         width: 1px;
-        height: 10px;
-        transform: translateY(-50%);
-        background: #0c0c0c;
+        height: 14px;
+        background: #717171;
+        content: ' ';
+      }
+      .rt {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 11;
+        width: 1px;
+        height: 14px;
+        background: #717171;
+        content: ' ';
+      }
+
+      .rb {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        z-index: 11;
+        width: 1px;
+        height: 14px;
+        background: #717171;
         content: ' ';
       }
     }
 
     &.summary13-1 {
+      .summary13-item {
+        border-top: 1px solid #9f6456;
+        border-bottom: 1px solid #9f6456;
 
+        .lt {
+          background: #9f6456;
+        }
+
+        .lb {
+          background: #9f6456;
+        }
+
+        .rt {
+          background: #9f6456;
+        }
+
+        .rb {
+          background: #9f6456;
+        }
+      }
     }
   }
 </style>
diff --git a/components/layout/AiRanking/AiRanking.vue b/components/layout/AiRanking/AiRanking.vue
index 7a202576..93b9f57c 100644
--- a/components/layout/AiRanking/AiRanking.vue
+++ b/components/layout/AiRanking/AiRanking.vue
@@ -187,6 +187,11 @@
           background: url(./asset/ranking3-dj.png) no-repeat;
           background-size: 100% 100%;
         }
+        .AiRanking-item__rate--wrapper {
+          flex: 1;
+          background: #928D7C;
+        }
+
         .AiRanking-item__rate {
           position: relative;