更新高校院所

src/components/colleges.vue

@@ -81,7 +81,7 @@ export default {
   overflow: hidden;
 }
 .main {
-  height: 1240px;
+  min-height: 600px;
   overflow: hidden;
   margin: 10px 0;
 }

src/layout/supermarket/colleges.vue

@@ -25,22 +25,33 @@
         </el-col>
         <el-col :span="24" class="list">
           <ul>
-            <li v-for="(item, index) in schoolList" :key="index">
+            <li class="schoolList" v-for="(item, index) in schoolList" :key="index">
               <el-link :underline="false">
-                <el-col :span="4">
+                <el-col :span="8" class="image">
                   <el-image style="width:130px;height:130px;" :src="item.pic"></el-image>
                 </el-col>
-                <el-col :span="20">
-                  <el-col :span="24">
+                <el-col :span="10" class="content">
+                  <el-col :span="18" class="title textOver">
                     {{ item.title }}
                   </el-col>
-                  <el-col :span="24"> 高校网站：{{ item.com }} </el-col>
-                  <el-col :span="24"> 高校类别：{{ item.type }} </el-col>
-                  <el-col :span="24"> 高校地址：{{ item.address }} </el-col>
+                  <el-col :span="16" class="com textOver"> 高校网站：{{ item.com }} </el-col>
+                  <el-col :span="20" class="type textOver"> 高校类别：{{ item.type }} </el-col>
+                  <el-col :span="20" class="address textOver"> 高校地址：{{ item.address }} </el-col>
                 </el-col>
               </el-link>
             </li>
           </ul>
+          <el-col :span="24" class="page">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage4"
+              :page-size="100"
+              layout="total, prev, pager, next, jumper"
+              :total="1"
+            >
+            </el-pagination>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
@@ -58,10 +69,21 @@ export default {
     region: '',
     inputs: '',
     title: '高校院所',
+    currentPage1: 5,
+    currentPage2: 5,
+    currentPage3: 5,
+    currentPage4: 4,
   }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+  },
 };
 </script>
 
@@ -123,7 +145,7 @@ li {
   width: 450px;
 }
 .info {
-  height: 1170px;
+  min-height: 530px;
   overflow: hidden;
   background-color: #fff;
   padding: 0 20px;
@@ -135,4 +157,46 @@ li {
   font-size: 22px;
   color: #215299;
 }
+.schoolList {
+  float: left;
+  height: 189px;
+  width: 50%;
+  border-bottom: 1px dashed #ccc;
+}
+.schoolList .image {
+  width: 130px;
+  margin: 20px;
+}
+.title {
+  width: 245px;
+  height: 66px;
+  line-height: 66px;
+  font-size: 20px;
+  color: #215299;
+  text-align: center;
+}
+
+.com {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+
+.type {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.address {
+  width: 245px;
+  height: 40px;
+  font-size: 16px;
+  color: #555555;
+}
+.page {
+  padding: 34px 0;
+  text-align: center;
+}
 </style>

src/views/supermarketColleges.vue

@@ -31,6 +31,41 @@ export default {
         type: '二级本科',
         address: '吉林省长春市力旺广场B座16楼',
       },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
+      {
+        pic: require('@/assets/fabu.jpg'),
+        title: '长春工业大学',
+        com: 'www.baidu.com',
+        type: '二级本科',
+        address: '吉林省长春市力旺广场B座16楼',
+      },
     ],
   }),
   created() {},