更新

src/layout/class/studentList.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="studentList">
+    <el-row>
+      <el-col :span="24" class="list" v-for="(item, index) in studentList" :key="index">
+        <el-col :span="20" class="name">
+          <p>{{ item.name }}</p>
+          <p>{{ item.faculty }}&nbsp;{{ item.major }}</p>
+        </el-col>
+        <el-col :span="3" class="gender">
+          <p>{{ item.gender }}</p>
+          <p v-if="item.job">{{ item.job }}</p>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'studentList',
+  props: {
+    studentList: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  background: #fff;
+  margin: 0 5px 5px 5px;
+  width: 97%;
+  padding: 0 10px;
+  border-radius: 15px;
+}
+.name {
+  padding: 10px 0 0 0;
+}
+.name p {
+  padding: 0 0 10px 0;
+}
+.gender {
+  padding: 10px 0 0 0;
+}
+.gender p {
+  padding: 0 0 10px 0;
+}
+</style>

src/layout/class/teaStudentList.vue

@@ -0,0 +1,87 @@
+<template>
+  <div id="teaStudentList">
+    <el-row>
+      <el-col :span="24" class="list" v-for="(item, index) in studentList" :key="index">
+        <el-col :span="18" class="name">
+          <p>{{ item.name }}</p>
+          <p>{{ item.faculty }}&nbsp;{{ item.major }}</p>
+        </el-col>
+        <el-col :span="3" class="gender">
+          <p>{{ item.gender }}</p>
+          <p v-if="item.job">{{ item.job }}</p>
+        </el-col>
+        <el-col :span="3" class="btn">
+          <el-link :underline="false" @click="onClick()">指派</el-link>
+        </el-col>
+      </el-col>
+      <van-dialog v-model="show" title="指派学生职务" :showConfirmButton="false">
+        <van-form @submit="onSubmit">
+          <van-field v-model="form.name" name="学生名称" disabled />
+          <van-field v-model="form.job" placeholder="请输入职务" />
+          <div style="margin: 16px;">
+            <van-button round block type="info" native-type="submit">
+              提交
+            </van-button>
+          </div>
+        </van-form>
+      </van-dialog>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'teaStudentList',
+  props: {
+    studentList: null,
+    show: null,
+    form: null,
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    onClick() {
+      this.$emit('clickUpdate');
+    },
+    onSubmit() {
+      this.$emit('submit', { data: this.form });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  background: #fff;
+  margin: 0 5px 5px 5px;
+  width: 97%;
+  padding: 0 10px;
+  border-radius: 15px;
+}
+.name {
+  padding: 10px 0 0 0;
+}
+.name p {
+  padding: 0 0 10px 0;
+}
+.gender {
+  padding: 10px 0 0 0;
+}
+.gender p {
+  padding: 0 0 10px 0;
+}
+.btn {
+  padding: 22px 0;
+  text-align: center;
+}
+/deep/.btn .el-link {
+  color: #1e90ff;
+  font-size: 18px;
+}
+</style>

src/views/class/index.vue

@@ -1,19 +1,123 @@
 <template>
   <div id="index">
-    <p>index</p>
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="top">
+          <el-col :span="15" class="title">
+            班级学生名单
+          </el-col>
+          <el-col :span="9" class="btn">
+            <el-button type="primary" @click="$router.push({ path: '/' })">上成绩</el-button>
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="main">
+          <span v-if="role === '学生'">
+            <studentList :studentList="studentList"></studentList>
+          </span>
+          <span v-if="role === '班主任'">
+            <teaStudentList :studentList="studentList" :show="show" :form="form" @clickUpdate="clickDialog" @submit="submitUpdate"></teaStudentList>
+          </span>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
+import footInfo from '@/layout/index/footInfo.vue';
+import studentList from '@/layout/class/studentList.vue';
+import teaStudentList from '@/layout/class/teaStudentList.vue';
+
 export default {
   name: 'index',
   props: {},
-  components: {},
-  data: () => ({}),
+  components: {
+    studentList, //学生列表
+    teaStudentList, //班主任学生列表
+    footInfo, //底部信息
+  },
+  data: () => ({
+    studentList: [
+      {
+        name: '刘裕',
+        gender: '男',
+        faculty: '计算机学院',
+        major: '应用软件技术专业',
+        job: '班長',
+      },
+      {
+        name: '刘裕',
+        gender: '男',
+        faculty: '计算机学院',
+        major: '应用软件技术专业',
+        job: '學委',
+      },
+      {
+        name: '刘裕',
+        gender: '男',
+        faculty: '计算机学院',
+        major: '应用软件技术专业',
+      },
+    ],
+    role: '班主任',
+    show: false,
+    form: {
+      name: '流域',
+      job: '',
+    },
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    clickDialog() {
+      this.show = true;
+    },
+    submitUpdate(form) {
+      console.log(form);
+      this.show = false;
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.info {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #edeae8;
+}
+.top {
+  height: 50px;
+  line-height: 50px;
+  margin: 0 0 10px 0;
+  background: #fff;
+}
+.top .title {
+  padding: 0 15px;
+  font-size: 20px;
+}
+.top .btn {
+  text-align: right;
+  padding: 0 30px;
+}
+.main {
+  margin: 0 0 50px 0;
+}
+.list {
+  height: 100px;
+  background-color: #fff;
+  margin: 0 0 5px 0;
+}
+.foot {
+  width: 100%;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  border-top: 1px solid #ccc;
+  background-color: #fff;
+}
+</style>