From caf80caeffc467a237900c464204e8f426e3e6e6 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Tue, 19 Jul 2022 09:42:37 +0800
Subject: [PATCH] bug630

---
 .../newHome/components/PopularAbility.vue     | 321 +++++++++---------
 1 file changed, 161 insertions(+), 160 deletions(-)

diff --git a/front/src/views/newHome/components/PopularAbility.vue b/front/src/views/newHome/components/PopularAbility.vue
index ee733fcf..ebdda9b2 100644
--- a/front/src/views/newHome/components/PopularAbility.vue
+++ b/front/src/views/newHome/components/PopularAbility.vue
@@ -153,195 +153,196 @@
   }
 </script>
 <style lang="less" scoped>
-.popular-ability {
-  height: 6.8rem;
-  background: url('~@/assets/newHome/popular-bg.png') no-repeat;
-  background-size: 100%;
-  display: flex;
-  justify-content: center;
-  .main {
-    width: 13rem;
-    margin-top: 0.78rem;
+  .popular-ability {
+    height: 6.8rem;
+    background: url('~@/assets/newHome/popular-bg.png') no-repeat;
+    background-size: 100%;
     display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    .top {
-      font-size: 0.3rem;
-      color: #fff;
-      text-align: center;
+    justify-content: center;
+    .main {
+      width: 13rem;
+      margin-top: 0.78rem;
       display: flex;
       flex-direction: column;
       flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      .line {
-        width: 0.34rem;
-        height: 0.03rem;
-        background-color: #fff;
-        margin-top: 0.08rem;
-      }
-    }
-    .bottom {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 0.52rem;
-      .left {
+      .top {
+        font-size: 0.3rem;
+        color: #fff;
+        text-align: center;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        .select {
-          cursor: pointer;
+        justify-content: center;
+        align-items: center;
+        .line {
+          width: 0.34rem;
+          height: 0.03rem;
+          background-color: #fff;
+          margin-top: 0.08rem;
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 0.52rem;
+        .left {
           display: flex;
           flex-direction: column;
           flex-wrap: wrap;
-          align-items: center;
-          justify-content: center;
-          width: 1.05rem;
-          height: 1.39rem;
-          background: rgba(255, 255, 255, 0.08);
-          margin-bottom: 0.01rem;
-          border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
-          .img {
-            width: 0.36rem;
-            height: 0.36rem;
-            background-size: 100%;
-          }
-          .fwl {
-            background: url('~@/assets/newHome/fwl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .sgl {
-            background: url('~@/assets/newHome/sgl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .scl {
-            background: url('~@/assets/newHome/scl-no.png') no-repeat;
-            background-size: contain;
-          }
-          .text {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.14rem;
-            margin-top: 0.08rem;
-          }
-        }
-        .select:hover {
-          background: rgba(255, 255, 255, 0.12);
-        }
-        .checked {
-          background: rgba(255, 255, 255, 0.18) !important;
-          border-right: 0.02rem solid #fff;
-        }
-      }
-      .right {
-        cursor: pointer;
-        display: flex;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-left: 0.2rem;
-        .item {
-          width: 3.78rem;
-          height: 2rem;
-          display: flex;
-          .item-left {
-            width: 0.83rem;
-            height: 100%;
+          .select {
+            cursor: pointer;
             display: flex;
-            justify-content: center;
+            flex-direction: column;
+            flex-wrap: wrap;
             align-items: center;
-            background: #eef1f8;
+            justify-content: center;
+            width: 1.05rem;
+            height: 1.39rem;
+            background: rgba(255, 255, 255, 0.08);
+            margin-bottom: 0.01rem;
+            border-right: 0.02rem solid rgba(233, 233, 233, 0.3);
             .img {
-              width: 0.56rem;
-              height: 0.56rem;
+              width: 0.36rem;
+              height: 0.36rem;
               background-size: 100%;
             }
-            .zj {
-              background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+            .fwl {
+              background: url('~@/assets/newHome/fwl-no.png') no-repeat;
               background-size: contain;
             }
-            .yy {
-              background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+            .sgl {
+              background: url('~@/assets/newHome/sgl-no.png') no-repeat;
               background-size: contain;
             }
-            .jc {
-              background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+            .scl {
+              background: url('~@/assets/newHome/scl-no.png') no-repeat;
               background-size: contain;
             }
-            .sj {
-              background: url('~@/assets/newHome/popular-sj.png') no-repeat;
-              background-size: contain;
-            }
-            .zs {
-              background: url('~@/assets/newHome/popular-zs.png') no-repeat;
-              background-size: contain;
-            }
-          }
-          .item-right {
-            width: 100%;
-            height: 100%;
-            background: #fff;
-            .fw {
-              width: 100%;
-              padding-right: 0.1rem;
-              padding-top: 0.03rem;
-              text-align: right;
-              color: 666;
-              font-size: 0.14rem;
-              color: #666;
-            }
-            .name {
-              font-size: 0.18rem;
-              color: #212121;
-              text-align: center;
-              margin-top: 0.05rem;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              display: -webkit-box;
-              -webkit-line-clamp: 1;
-              -webkit-box-orient: vertical;
-            }
             .text {
-              width: 100%;
-              padding: 0.24rem 0.3rem;
+              color: rgba(255, 255, 255, 0.6);
               font-size: 0.14rem;
-              color: #212121;
-              line-height: 0.24rem;
-              height: 1rem;
-              overflow: hidden;
+              margin-top: 0.08rem;
             }
           }
+          .select:hover {
+            background: rgba(255, 255, 255, 0.12);
+          }
+          .checked {
+            background: rgba(255, 255, 255, 0.18) !important;
+            border-right: 0.02rem solid #fff;
+          }
         }
-        .item:nth-of-type(4),
-        .item:nth-of-type(5),
-        .item:nth-of-type(6) {
-          margin-top: 0.2rem;
-        }
-        .item:hover {
-          border-radius: 0.02rem;
-          border: 0.01rem solid #0058e1;
-          box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+        .right {
+          cursor: pointer;
+          display: flex;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          margin-left: 0.2rem;
+          .item {
+            width: 3.78rem;
+            height: 2rem;
+            display: flex;
+            .item-left {
+              width: 0.83rem;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              background: #eef1f8;
+              .img {
+                width: 0.56rem;
+                height: 0.56rem;
+                background-size: 100%;
+              }
+              .zj {
+                background: url('~@/assets/newHome/popular-zj.png') no-repeat;
+                background-size: contain;
+              }
+              .yy {
+                background: url('~@/assets/newHome/popular-yy.png') no-repeat;
+                background-size: contain;
+              }
+              .jc {
+                background: url('~@/assets/newHome/popular-jc.png') no-repeat;
+                background-size: contain;
+              }
+              .sj {
+                background: url('~@/assets/newHome/popular-sj.png') no-repeat;
+                background-size: contain;
+              }
+              .zs {
+                background: url('~@/assets/newHome/popular-zs.png') no-repeat;
+                background-size: contain;
+              }
+            }
+            .item-right {
+              width: 100%;
+              height: 100%;
+              background: #fff;
+              .fw {
+                width: 100%;
+                padding-right: 0.1rem;
+                padding-top: 0.03rem;
+                text-align: right;
+                color: 666;
+                font-size: 0.14rem;
+                color: #666;
+              }
+              .name {
+                font-size: 0.18rem;
+                color: #212121;
+                text-align: center;
+                margin-top: 0.05rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
+              }
+              .text {
+                width: 100%;
+                padding: 0.24rem 0.3rem;
+                font-size: 0.14rem;
+                color: #212121;
+                line-height: 0.24rem;
+                height: 1rem;
+                word-break: break-all;
+                overflow: hidden;
+              }
+            }
+          }
+          .item:nth-of-type(4),
+          .item:nth-of-type(5),
+          .item:nth-of-type(6) {
+            margin-top: 0.2rem;
+          }
+          .item:hover {
+            border-radius: 0.02rem;
+            border: 0.01rem solid #0058e1;
+            box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
+          }
         }
       }
-    }
-    .bottom-btn {
-      cursor: pointer;
-      text-align: center;
-      margin-top: 0.24rem;
-      color: #fff;
-      width: 1rem;
-      height: 0.24rem;
-      line-height: 0.24rem;
-      margin-left: 6rem;
-      span {
-        display: inline-block;
-        width: 0.1rem;
-        height: 0.1rem;
-        background: url('~@/assets/newHome/gd.png') no-repeat;
-        background-size: contain;
+      .bottom-btn {
+        cursor: pointer;
+        text-align: center;
+        margin-top: 0.24rem;
+        color: #fff;
+        width: 1rem;
+        height: 0.24rem;
+        line-height: 0.24rem;
+        margin-left: 6rem;
+        span {
+          display: inline-block;
+          width: 0.1rem;
+          height: 0.1rem;
+          background: url('~@/assets/newHome/gd.png') no-repeat;
+          background-size: contain;
+        }
+      }
+      .bottom-btn:hover {
+        background: rgba(0, 88, 225, 0.1);
       }
-    }
-    .bottom-btn:hover {
-      background: rgba(0, 88, 225, 0.1);
     }
   }
-}
 </style>