更新

src/layout/class/achieve.vue

@@ -6,7 +6,9 @@
           <van-tab title="平时成绩">
             <peaceAchieve :peaceAchieveList="peaceAchieveList"></peaceAchieve>
           </van-tab>
-          <van-tab title="作业成绩">作业成绩</van-tab>
+          <van-tab title="作业成绩">
+            <homeworkAchiece :achieveList="achieveList"></homeworkAchiece>
+          </van-tab>
         </van-tabs>
       </el-col>
     </el-row>
@@ -15,13 +17,16 @@
 
 <script>
 import peaceAchieve from '@/layout/class/achieveList/peaceAchieve.vue';
+import homeworkAchiece from '@/layout/class/achieveList/homeworkAchiece.vue';
 export default {
   name: 'achieve',
   props: {
     peaceAchieveList: null, //平时成绩
+    achieveList: null, //作业成绩
   },
   components: {
     peaceAchieve, //平時成績
+    homeworkAchiece, //作业成绩
   },
   data: () => ({
     active: 0,

src/layout/class/achieveList/homeworkAchiece.vue

@@ -0,0 +1,71 @@
+<template>
+  <div id="homeworkAchiece">
+    <el-row>
+      <el-col :span="24" class="list">
+        <van-collapse v-model="openCollapse">
+          <van-collapse-item :name="index" v-for="(item, index) in achieveList" :key="index">
+            <div slot="title" class="title">
+              <span class="name">{{ item.studentid }}</span>
+              <van-button type="primary" size="mini" @click="clickBtn()">上成绩</van-button>
+            </div>
+            <van-row v-for="(tag, index) in item.lesson" :key="index">
+              <van-col :span="14" class="score"> 课程名称：{{ tag.lessonid }} </van-col>
+              <van-col :span="10" class="score"> 作业分：{{ tag.score }} 分</van-col>
+            </van-row>
+          </van-collapse-item>
+        </van-collapse>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'homeworkAchiece',
+  props: {
+    achieveList: null,
+  },
+  components: {},
+  data: () => ({
+    openCollapse: [],
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.list {
+  margin: 5px;
+  width: 97%;
+  padding: 0 10px;
+  border-radius: 15px;
+}
+.list .title {
+  float: left;
+  width: 100%;
+}
+.list .name {
+  float: left;
+  width: 80%;
+  font-size: 20px;
+}
+/deep/.van-cell {
+  border-radius: 10px;
+}
+/deep/.van-collapse-item {
+  margin: 0 0 10px 0;
+}
+/deep/.el-collapse-item__content {
+  padding: 10px 0 10px 0;
+}
+.list .score {
+  padding: 10px 0;
+  font-size: 18px;
+}
+</style>

src/layout/class/achieveList/peaceAchieve.vue

@@ -1,12 +1,21 @@
 <template>
   <div id="peaceAchieve">
     <el-row>
-      <el-col :span="24">
+      <el-col :span="24" class="info">
         <el-col :span="24" class="list" v-for="(item, index) in peaceAchieveList" :key="index">
-          <p>{{ item.name }}</p>
+          <el-col :span="12" class="name">
+            {{ item.name }}
+          </el-col>
+          <el-col :span="12" class="score">
+            <span>分数：{{ item.score }}分</span>
+            <el-button type="primary" size="mini" @click="showPicker = true" round>选择</el-button>
+          </el-col>
         </el-col>
       </el-col>
     </el-row>
+    <van-popup v-model="showPicker" position="bottom">
+      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
+    </van-popup>
   </div>
 </template>
 
@@ -17,11 +26,40 @@ export default {
     peaceAchieveList: null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    value: '',
+    columns: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+    showPicker: false,
+  }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      console.log(value);
+      this.showPicker = false;
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.info {
+  padding: 0 30px;
+}
+.list {
+  border-bottom: 1px dashed #333;
+}
+// .list:nth-child(2n) {
+//   background-color: #ccc;
+// }
+.list .name {
+  padding: 15px 15px;
+}
+.list .score {
+  padding: 15px 0;
+}
+.list .score span {
+  padding: 0 7px 0 0;
+}
+</style>

src/views/class/achieve.vue

@@ -6,7 +6,7 @@
           <topInfo></topInfo>
         </el-col>
         <el-col :span="24" class="main">
-          <achieves :peaceAchieveList="peaceAchieveList"></achieves>
+          <achieves :peaceAchieveList="peaceAchieveList" :achieveList="achieveList"></achieves>
         </el-col>
       </el-col>
     </el-row>
@@ -26,8 +26,53 @@ export default {
   },
   data: () => ({
     peaceAchieveList: [
+      {
+        name: '流域你好',
+        score: '10',
+      },
+      {
+        name: '流域',
+        score: '2',
+      },
+      {
+        name: '流域好',
+        score: '3',
+      },
       {
         name: '流域',
+        score: '4',
+      },
+      {
+        name: '流域',
+        score: '5',
+      },
+    ],
+    achieveList: [
+      {
+        studentid: '刘裕',
+        lesson: [
+          {
+            lessonid: '拓展训练',
+            score: '20',
+          },
+          {
+            lessonid: '简历制作',
+            score: '20',
+          },
+        ],
+      },
+      {
+        studentid: '刘裕',
+        lesson: [
+          {
+            lessonid: '拓展训练',
+            score: '20',
+          },
+          {
+            lessonid: '简历制作',
+            score: '20',
+          },
+        ],
       },
     ],
   }),
@@ -42,7 +87,7 @@ export default {
   width: 100%;
   min-height: 667px;
   position: relative;
-  background-color: #f9fafc;
+  background-color: #eeeeee;
 }
 .top {
   height: 46px;