样式调整

src/views/home/Index.vue

@@ -9,12 +9,7 @@
     <!-- 导航 -->
     <div class="nav">
       <ul class="nav-list">
-        <li
-          class="nav-item"
-          v-for="(item, index) in navList"
-          :key="index"
-          @click="handleNavClick(item)"
-        >
+        <li class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleNavClick(item)">
           <div class="pic">
             <img :src="item.src" />
           </div>
@@ -26,10 +21,7 @@
     <div class="top-bar">
       <ul class="top-bar-list">
         <li class="top-bar-item top-bar-item__group" @click="$router.push({ name: 'group' })">组织排行</li>
-        <li
-          class="top-bar-item top-bar-item__activity"
-          @click="$router.push({ name: 'activity' })"
-        >活动排行</li>
+        <li class="top-bar-item top-bar-item__activity" @click="$router.push({ name: 'activity' })">活动排行</li>
       </ul>
     </div>
     <card title="热门推荐">
@@ -39,7 +31,7 @@
             <div class="popular-item-pic">
               <img :src="item.src" />
             </div>
-            <div class="popular-item-main">{{item.title}}</div>
+            <div class="popular-item-main">{{ item.title }}</div>
           </a>
         </div>
       </div>
@@ -133,6 +125,8 @@ export default {
   }
 }
 .top-bar-list {
+  margin-left: -5px;
+  margin-right: -5px;
   margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
@@ -149,36 +143,38 @@ export default {
 }
 .top-bar-item__group {
   background: url('~@/assets/img/home_group_bg.png') no-repeat center;
-  background-size: cover;
+  background-size: contain;
 }
 .top-bar-item__activity {
   background: url('~@/assets/img/home_activity_bg.png') no-repeat center;
-  background-size: cover;
+  background-size: contain;
 }
 .popular-list {
   display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  margin-left: -15px;
-  margin-right: -15px;
-  -webkit-overflow-scrolling: touch;
+  justify-content: space-between;
+  // display: flex;
+  // overflow-x: auto;
+  // overflow-y: hidden;
+  // margin-left: -15px;
+  // margin-right: -15px;
+  // -webkit-overflow-scrolling: touch;
 }
 .popular-item {
   flex-shrink: 0;
-  margin-bottom: 18px;
-  margin-right: 15px;
-  width: 165px;
-  height: 140px;
+  margin-bottom: 0.18rem;
+  // margin-right: 0.15rem;
+  width: 1.65rem;
+  min-height: 1.4rem;
   background: #ffffff;
   box-shadow: 0px 2px 6px 0px rgba(74, 9, 25, 0.05);
   border-radius: 6px;
   overflow: hidden;
-  &:first-child {
-    margin-left: 15px;
-  }
+  // &:first-child {
+  //   margin-left: 15px;
+  // }
 }
 .popular-item-pic {
-  height: 95px;
+  height: 0.95rem;
   img {
     width: 100%;
     height: 100%;
@@ -189,6 +185,6 @@ export default {
   font-size: 13px;
   color: #1b1b1b;
   text-align: center;
-  padding: 8px 10px;
+  padding: 0.08rem 0.1rem;
 }
 </style>

vue.config.js

@@ -10,7 +10,7 @@ module.exports = {
     },
     proxy: {
       '/api': {
-        target: 'https://alumni2.ezijing.com'
+        target: 'https://alumni.ezijing.com'
       }
     }
   }