From 35770f4956a1c44109419333f0e03dab8b3ce493 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Wed, 15 Jun 2022 19:19:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E6=9E=B6=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Algorithm/AlgorithmTopDetails.vue         | 24 ++++++++++++++----
 .../Application/ApplicationTopDetails.vue     | 25 +++++++++++++++----
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
index fc4f026c..9407128a 100644
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
@@ -10,9 +10,13 @@
     <div class="left">
       <div class="top">
         <span class="name">{{ props.dataList.name }}</span>
-        <span class="label">{{ props.dataList.type }}</span>
-        <span class="label">{{ props.dataList.shareType }}</span>
-        <span class="label">{{ props.dataList.shareCondition }}</span>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">{{ props.dataList.shareType }}</span>
+            <span class="label">{{ props.dataList.shareCondition }}</span>
+          </p>
+        </div>
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
@@ -106,8 +110,9 @@
     display: flex;
     justify-content: center;
     .left {
-      width: 700px;
+      width: 7.2rem;
       color: #fff;
+      margin-right: 0.8rem;
       .top {
         display: flex;
         align-items: center;
@@ -118,10 +123,19 @@
           // max-width: 330px;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          // white-space: nowrap;
+          white-space: nowrap;
           font-size: 40px;
           margin-right: 20px;
         }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 2.5rem;
+          right: -2.5rem;
+          top: 0;
+        }
         .label {
           padding: 1px 10px;
           margin-right: 10px;
diff --git a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
index 4f366594..5026f8d8 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
@@ -10,9 +10,13 @@
     <div class="left">
       <div class="top">
         <span class="name">{{ props.dataList.name }}</span>
-        <span class="label">{{ props.dataList.type }}</span>
-        <span class="label">{{ props.dataList.shareType }}</span>
-        <span class="label">{{ props.dataList.shareCondition }}</span>
+        <div class="label-content">
+          <p class="lable-father">
+            <span class="label">{{ props.dataList.type }}</span>
+            <span class="label">{{ props.dataList.shareType }}</span>
+            <span class="label">{{ props.dataList.shareCondition }}</span>
+          </p>
+        </div>
         <!-- <span class="label">免费</span> -->
       </div>
       <div class="main">
@@ -106,8 +110,10 @@
     display: flex;
     justify-content: center;
     .left {
-      width: 7rem;
+      max-width: 7.2rem;
       color: #fff;
+      margin-right: 0.8rem;
+
       .top {
         display: flex;
         align-items: center;
@@ -118,10 +124,19 @@
           // max-width: 3.3rem;
           // overflow: hidden;
           // text-overflow: ellipsis;
-          // white-space: nowrap;
+          white-space: nowrap;
           font-size: 0.4rem;
           margin-right: 0.2rem;
         }
+        .label-content {
+          position: relative;
+        }
+        .lable-father {
+          position: absolute;
+          min-width: 2.5rem;
+          right: -2.5rem;
+          top: 0;
+        }
         .label {
           padding: 0.01rem 0.1rem;
           margin-right: 0.1rem;