From 52ece255f3fac5126d9e195520e63c4b06e50c9a Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Tue, 19 Jul 2022 09:45:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../newHome/components/PopularAbility.vue     | 329 +++++++++---------
 1 file changed, 163 insertions(+), 166 deletions(-)

diff --git a/front/src/views/newHome/components/PopularAbility.vue b/front/src/views/newHome/components/PopularAbility.vue
index 72f7144f..0ec931e8 100644
--- a/front/src/views/newHome/components/PopularAbility.vue
+++ b/front/src/views/newHome/components/PopularAbility.vue
@@ -153,200 +153,197 @@
   }
 </script>
 <style lang="less" scoped>
-    .popular-ability {
-      height: 6.8rem;
-      background: url('~@/assets/newHome/popular-bg.png') no-repeat;
-      background-size: 100%;
+  .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;
       display: flex;
-      justify-content: center;
-      .main {
-        width: 13rem;
-        margin-top: 0.78rem;
+      flex-direction: column;
+      flex-wrap: wrap;
+      .top {
+        font-size: 0.3rem;
+        color: #fff;
+        text-align: center;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
-        .top {
-          font-size: 0.3rem;
-          color: #fff;
-          text-align: center;
+        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;
-          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 {
+          .select {
+            cursor: pointer;
             display: flex;
             flex-direction: column;
             flex-wrap: wrap;
-            .select {
-              cursor: pointer;
+            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%;
               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);
+              align-items: center;
+              background: #eef1f8;
               .img {
-                width: 0.36rem;
-                height: 0.36rem;
+                width: 0.56rem;
+                height: 0.56rem;
                 background-size: 100%;
               }
-              .fwl {
-                background: url('~@/assets/newHome/fwl-no.png') no-repeat;
+              .zj {
+                background: url('~@/assets/newHome/popular-zj.png') no-repeat;
                 background-size: contain;
               }
-              .sgl {
-                background: url('~@/assets/newHome/sgl-no.png') no-repeat;
+              .yy {
+                background: url('~@/assets/newHome/popular-yy.png') no-repeat;
                 background-size: contain;
               }
-              .scl {
-                background: url('~@/assets/newHome/scl-no.png') no-repeat;
+              .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;
+                word-break: break-all;
+              }
               .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%;
-                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;
-                  word-break: break-all;
-                }
-                .text {
-                  width: 100%;
-                  padding: 0.24rem 0.3rem;
-                  font-size: 0.14rem;
-                  color: #212121;
-                  line-height: 0.24rem;
-                  height: 1rem;
-  <<<<<<< HEAD
-  =======
-                  word-break: break-all;
-  >>>>>>> caf80caeffc467a237900c464204e8f426e3e6e6
-                  overflow: hidden;
-                }
+                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;
+          .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:hover {
-          background: rgba(0, 88, 225, 0.1);
         }
       }
+      .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);
+      }
     }
+  }
 </style>