更新

src/main.js

@@ -10,6 +10,7 @@ import '@/plugins/meta';
 import '@/plugins/filters';
 import '@/plugins/loading';
 import '@/plugins/setting';
+import '@/iconfonts/iconfont.css';
 import InitStomp from '@/plugins/stomp';
 import moment from 'moment';
 Vue.prototype.$moment = moment;

src/views/home/classmenu.vue

@@ -5,13 +5,14 @@
         <van-col :span="24" class="top">
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </van-col>
+        <el-col :span="24">
+          <el-image :src="topImage"></el-image>
+        </el-col>
         <van-col :span="24">
-          <van-grid :border="false" :column-num="3" :gutter="20">
-            <van-grid-item v-for="(item, index) in menuList" :key="index" class="menuList" @click="turnTo(item.name)">
-              <van-image :src="item.image" />
-              <p>{{ item.name }}</p>
-            </van-grid-item>
-          </van-grid>
+          <el-col :span="8" class="list" v-for="(item, index) in menuList" :key="index" @click="turnTo(item.name)">
+            <i :class="item.icon"></i>
+            <p>{{ item.name }}</p>
+          </el-col>
         </van-col>
       </van-col>
     </van-row>
@@ -30,16 +31,17 @@ export default {
     isleftarrow: '',
     navShow: true,
     menuList: [
-      { name: '课程信息', image: require('@/assets/icon/icon_calendar.png') },
-      { name: '个人信息', image: require('@/assets/icon/icon_signal.png') },
-      { name: '问卷调查', image: require('@/assets/icon/icon_compile.png') },
-      { name: '班级信息', image: require('@/assets/icon/icon_subordinate.png') },
-      { name: '班级名单', image: require('@/assets/icon/icon_group.png') },
-      { name: '班级成绩', image: require('@/assets/icon/icon_work.png') },
-      { name: '请假管理', image: require('@/assets/icon/icon_square.png') },
-      { name: '考勤管理', image: require('@/assets/icon/icon_signin_line.png') },
-      { name: '学生评分', image: require('@/assets/icon/icon_index_line.png') },
+      { name: '课程信息', icon: 'iconfont iconkecheng' },
+      { name: '个人信息', icon: 'iconfont icongeren' },
+      { name: '问卷调查', icon: 'iconfont icondibudaohanglan-' },
+      { name: '班级信息', icon: 'iconfont iconbanjixinxi' },
+      { name: '班级名单', icon: 'iconfont iconmingdan' },
+      { name: '班级成绩', icon: 'iconfont iconchengji' },
+      { name: '请假管理', icon: 'iconfont iconqingjia' },
+      { name: '考勤管理', icon: 'iconfont iconkaoqin' },
+      { name: '学生评分', icon: 'iconfont iconpingfenqia' },
     ],
+    topImage: require('@/assets/logo.png'),
   }),
   created() {},
   computed: {
@@ -84,4 +86,92 @@ export default {
 .main {
   min-height: 570px;
 }
+.list {
+  text-align: center;
+  background-color: #fff;
+  margin: 15px 10px 0 10px;
+  width: 28%;
+  border-radius: 5px;
+  padding: 15px 0 0 0;
+  .iconfont {
+    font-size: 40px;
+  }
+  p {
+    font-size: 16px;
+    font-family: 楷体;
+    font-weight: bold;
+  }
+}
+.list:first-child {
+  .iconfont {
+    color: #f55467;
+  }
+  p {
+    color: #f55467;
+  }
+}
+.list:nth-child(2) {
+  .iconfont {
+    color: #f7b52c;
+  }
+  p {
+    color: #f7b52c;
+  }
+}
+.list:nth-child(3) {
+  .iconfont {
+    color: #6cd4f5;
+  }
+  p {
+    color: #6cd4f5;
+  }
+}
+.list:nth-child(4) {
+  .iconfont {
+    color: #40cc93;
+  }
+  p {
+    color: #40cc93;
+  }
+}
+.list:nth-child(5) {
+  .iconfont {
+    color: #3259ce;
+  }
+  p {
+    color: #3259ce;
+  }
+}
+.list:nth-child(6) {
+  .iconfont {
+    color: #a49273;
+  }
+  p {
+    color: #a49273;
+  }
+}
+.list:nth-child(7) {
+  .iconfont {
+    color: #ff8a65;
+  }
+  p {
+    color: #ff8a65;
+  }
+}
+.list:nth-child(8) {
+  .iconfont {
+    color: #ff5f7a;
+  }
+  p {
+    color: #ff5f7a;
+  }
+}
+.list:nth-child(9) {
+  .iconfont {
+    color: #0590df;
+  }
+  p {
+    color: #0590df;
+  }
+}
 </style>