feat:学情报告UI修改

components/common/common-swiper-item.vue

@@ -2,6 +2,49 @@
 <template>
   <section class="common-swiper-item">
     <article class="middle-warp">
+      <div class="middle-item">
+        <div class="title">
+          <img src="../../assets/images/what-icon-title.png" />
+          <span>完成率</span>
+        </div>
+        <div class="content">
+          <div class="box">
+            <div class="top">
+              <div >
+                <div class="text">
+                  <span>{{certFlag ? '获证率' : '项目完成率'}}</span>
+                  <img class="what" @click="tipsClick" src="../../assets/images/what.png" alt="">
+                </div>
+                <div class="proportion">{{percentData.certificateRate | fixedNum}}%</div>
+              </div>
+              <img src="../../assets/images/what-content-2.png" alt="">
+            </div>
+            <div class="bottom">
+              应参与人数 {{percentData.doctorCount | formatNum}}
+            </div>
+          </div>
+          <div class="box">
+            <div class="top">
+              <div>
+                <div class="text">
+                 <span>参与完成率</span> 
+                  <img class="what" @click="tipsClick2" src="../../assets/images/what.png" alt="">
+                </div>
+                <div class="proportion">{{ shouldDate | fixedNum}}%</div>
+              </div>
+              <img src="../../assets/images/what-content-1.png" alt="">
+            </div>
+            <div class="bottom">
+              应参与人数 {{percentData.doctorCount | formatNum}}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        已完成人数 {{percentData.finishCount | formatNum}}
+      </div>
+    </article>
+    <!-- <article class="middle-warp">
       <div class="middle">
         <div class="title">
         <span class="ratio">{{certFlag ? '获证率' : '项目完成率'}}
@@ -36,7 +79,7 @@
           <span>已参与人数 {{percentData.joinCount | formatNum}}</span>
         </div>
       </div>
-    </article>
+    </article> -->
     <article v-show="isSingleOrg" class="middle-org">
       <div class="title">
         <span>人员参与率</span>
@@ -219,6 +262,77 @@ export default {
       }
     }
   }
+  .middle-warp{
+    font-size: 14px;
+    color: #fff;
+    background: linear-gradient(136deg, #2FC6BA 0%, #36B6BF 100%);
+    box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 8px;
+    margin: 0 15px;
+    padding: 16px 12px;
+    .middle-item{
+      margin-bottom: 12px;
+      .title{
+        display: flex;
+        justify-content: normal;
+        align-items: center;
+        margin-bottom: 9px;
+        img{
+          width: 19px;
+          height: 19px;
+          margin-right: 4px;
+        }
+      }
+      .content{
+        display: flex;
+        color: #626262;
+        .box{
+          font-size: 12px;
+          background: #FEFFFE;
+          border-radius: 8px;
+          padding: 16px 14px;
+          width: 50%;
+          &:first-child{
+          margin-right: 11px;
+          }
+          .proportion{
+            font-size: 20px;
+            font-weight: 600;
+            color: #439284;
+            margin-bottom: 18px;
+            margin-top: 10px;
+          }
+          .top{
+            display: flex;
+            justify-content: space-between;
+            .text{
+              display: flex;
+              align-items: center;
+            }
+          }
+          .bottom{
+            color: #9A9A9C;
+          }
+          img{
+            width: 30px;
+            height: 30px;
+          }
+          .what{
+            width: 12px;
+            height: 12px;
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+    .footer{
+        background: #FEFFFE;
+        border-radius: 8px;
+        padding: 11px 13px;
+        color: #9A9A9C;
+        font-size: 12px;
+      }
+  }
   .middle-org {
     display: block;
     box-sizing: border-box;