refactor: 优化顶部多色模块的样式

Author: Light

src/css/nav.css

@@ -277,6 +277,7 @@ body.night .search-engine ul::before {
 }
 .colorful-card i {
   font-size: 18px;
+  margin-left: 5px;
 }
 
 .colorful-card span {
@@ -418,3 +419,29 @@ input#is-search-top[type=checkbox].iswitch:before {
 input#is-search-top[type=checkbox].iswitch:checked {
   padding-left: 14px;
 }
+
+zmki_top_main {
+  display: block;
+}
+.zmki_top_item {
+  width: 25%;
+  float: left;
+  position: relative;
+  height: 80px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+@media screen and (max-width: 768px) {
+  .zmki_top_item {
+    padding-left: 7px;
+    padding-right: 7px;
+  }
+}
+.zmki_top_item > a {
+  height: 60px;
+}
+.zmki_top_item .zmki_top_text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

src/index.php

@@ -51,33 +51,33 @@ class="fa fa-heart xiaotubiao"
         <?php endif; ?>
         <!--顶部新增模块开始	-->
         <?php if ($this->options->zmki_top_main == '1') : ?>
-            <div class="zmki_top_main" style="display: flex;">
-                <div class="col-lg-4">
+            <div class="zmki_top_main">
+                <div class="zmki_top_item">
                     <a class="colorful-card zmki_top_one" target="_blank"
                        href="<?php $this->options->zmki_top_main_one_url(); ?>">
                         <i class="<?php $this->options->zmki_top_main_one_icon(); ?>"></i>
-                        <span class="wapnone"><?php $this->options->zmki_top_main_one_name(); ?></span>
+                        <span class="zmki_top_text"><?php $this->options->zmki_top_main_one_name(); ?></span>
                     </a>
                 </div>
-                <div class="col-lg-4">
+                <div class="zmki_top_item">
                     <a class="colorful-card zmki_top_two" target="_blank"
                        href="<?php $this->options->zmki_top_main_two_url(); ?>">
                         <i class="<?php $this->options->zmki_top_main_two_icon(); ?>"></i>
-                        <span class="wapnone"><?php $this->options->zmki_top_main_two_name(); ?></span>
+                        <span class="zmki_top_text"><?php $this->options->zmki_top_main_two_name(); ?></span>
                     </a>
                 </div>
-                <div class="col-lg-4">
+                <div class="zmki_top_item">
                     <a class="colorful-card zmki_top_three" target="_blank"
                        href="<?php $this->options->zmki_top_main_three_url(); ?>">
                         <i class="<?php $this->options->zmki_top_main_three_icon(); ?>"></i>
-                        <span class="wapnone"><?php $this->options->zmki_top_main_three_name(); ?></span>
+                        <span class="zmki_top_text"><?php $this->options->zmki_top_main_three_name(); ?></span>
                     </a>
                 </div>
-                <div class="col-lg-4">
+                <div class="zmki_top_item">
                     <a class="colorful-card zmki_top_four" target="_blank"
                        href="<?php $this->options->zmki_top_main_four_url(); ?>">
                         <i class="<?php $this->options->zmki_top_main_four_icon(); ?>"></i>
-                        <span class="wapnone"><?php $this->options->zmki_top_main_four_name(); ?></span>
+                        <span class="zmki_top_text"><?php $this->options->zmki_top_main_four_name(); ?></span>
                     </a>
                 </div>
             </div>