更新

src/layout/index/topInfo.vue

@@ -2,7 +2,7 @@
   <div id="topInfo">
     <el-row>
       <el-col :span="24" class="topInfos">
-        <el-image :src="logoPic" style="width:100%;height:200px;"></el-image>
+        <van-nav-bar title="日程安排" left-text="返回" left-arrow @click-left="onClickLeft" />
       </el-col>
     </el-row>
   </div>
@@ -11,15 +11,30 @@
 <script>
 export default {
   name: 'topInfo',
-  props: {
-    logoPic: null,
-  },
+  props: {},
   components: {},
   data: () => ({}),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    onClickLeft() {
+      Toast('返回');
+    },
+  },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+/deep/.van-nav-bar {
+  background: #2c69fe;
+}
+/deep/.van-nav-bar__title {
+  color: #fff;
+}
+/deep/.van-nav-bar__text {
+  color: #fff;
+}
+/deep/.van-nav-bar .van-icon {
+  color: #fff;
+}
+</style>

src/layout/user/checkList.vue

@@ -1,31 +1,13 @@
 <template>
   <div id="checkList">
-    <el-row>
-      <el-col :span="24" class="top">
-        <el-col :span="18" class="title textOver"> {{ info.classid }}考勤管理 </el-col>
-        <el-col :span="6" class="btn">
-          <el-button type="primary" @click="$router.push({ path: '/user/checkDetail' })">考勤</el-button>
-        </el-col>
-      </el-col>
-      <el-col :span="24" class="list" v-for="(item, index) in info.attend" :key="index">
-        <el-col :span="20" class="picker">
-          <p>{{ item.date }}</p>
-          <p>{{ item.time }}</p>
-        </el-col>
-        <el-col :span="4" class="status">
-          {{ item.status === '0' ? '未签到' : item.status === '1' ? '签到' : item.status === '2' ? '迟到' : '缺勤' }}
-        </el-col>
-      </el-col>
-    </el-row>
+    <p>checkList</p>
   </div>
 </template>
 
 <script>
 export default {
   name: 'checkList',
-  props: {
-    info: null,
-  },
+  props: {},
   components: {},
   data: () => ({}),
   created() {},
@@ -34,36 +16,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-p {
-  padding: 0;
-  margin: 0;
-}
-.top {
-  height: 50px;
-  line-height: 50px;
-  background-color: #fff;
-  margin: 0 0 10px 0;
-  border-bottom: 1px solid #ccc;
-}
-.top .title {
-  padding: 0 15px;
-  font-size: 20px;
-}
-.top .btn {
-  text-align: center;
-}
-.list {
-  width: 97%;
-  padding: 15px;
-  background-color: #fff;
-  border-radius: 15px;
-  margin: 0 5px 5px 5px;
-}
-.picker p {
-  padding: 2px 0;
-}
-.status {
-  padding: 15px 0;
-}
-</style>
+<style lang="less" scoped></style>

src/layout/user/messageInfo.vue

@@ -0,0 +1,187 @@
+<template>
+  <div id="messageInfo">
+    <el-row>
+      <el-col :span="24" class="messageInfo">
+        <el-col :span="24" class="images">
+          <div class="demo-basic--circle">
+            <div class="block"><el-avatar :size="163" :src="circleUrl"></el-avatar></div>
+          </div>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">姓名</p>
+            <p class="name">{{ messInfo.name }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">身份证号</p>
+            <p class="name">{{ messInfo.id_number }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">性别</p>
+            <p class="name">{{ messInfo.gender }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">民族</p>
+            <p class="name">{{ messInfo.nation }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">手机号</p>
+            <p class="name">{{ messInfo.phone }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">QQ</p>
+            <p class="name">{{ messInfo.qq }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">学校</p>
+            <p class="name">{{ messInfo.school_name }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">所在院系</p>
+            <p class="name">{{ messInfo.faculty }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">所在专业</p>
+            <p class="name">{{ messInfo.major }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">入学年份</p>
+            <p class="name">{{ messInfo.entry_year }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">毕业年份</p>
+            <p class="name">{{ messInfo.finish_year }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">在校所担当职务</p>
+            <p class="name">{{ messInfo.school_job }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">e-mail</p>
+            <p class="name">{{ messInfo.email }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="mess">
+          <el-col :span="22" class="info">
+            <p class="title">户口所在地</p>
+            <p class="name">{{ messInfo.family_place }}</p>
+          </el-col>
+          <el-col :span="2" class="icon">
+            <van-icon name="arrow" />
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'messageInfo',
+  props: {
+    messInfo: null,
+  },
+  components: {},
+  data: () => ({
+    circleUrl: require('@/assets/circle.png'),
+  }),
+  created() {},
+  computed: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.images {
+  text-align: center;
+  padding: 15px 0;
+}
+.mess {
+  min-height: 50px;
+  border-bottom: 1px solid #efeff4;
+}
+.info {
+  padding: 0 15px;
+}
+.info .title {
+  font-size: 14px;
+  color: #92a1b1;
+  padding: 4px 0;
+}
+.info .name {
+  font-size: 16px;
+  color: #000;
+}
+.icon {
+  padding: 11px 0;
+  font-size: 20px;
+  color: #ccc;
+}
+</style>

src/layout/user/topInfo.vue

@@ -8,7 +8,7 @@
         <el-col :span="18" class="mess">
           <p>{{ info.school_name }}</p>
           <p>{{ info.faculty }}&nbsp;&nbsp;{{ info.major }}</p>
-          <p>民族:{{ info.nation }}&nbsp;性别:{{ info.gender }}&nbsp;QQ:{{ info.qq }}</p>
+          <p>民族:{{ info.nation }}&nbsp;性别:{{ info.gender }}</p>
         </el-col>
       </el-col>
     </el-row>

src/views/index.vue

@@ -2,7 +2,7 @@
   <div id="index">
     <el-row class="info">
       <el-col :span="24" class="top">
-        <topInfo :logoPic="logoPic"></topInfo>
+        <topInfo></topInfo>
       </el-col>
       <el-col :span="24" class="main">
         <tableData :timeTable="timeTable"></tableData>
@@ -27,7 +27,6 @@ export default {
     footInfo, //底部信息
   },
   data: () => ({
-    logoPic: require('@/assets/1.jpg'),
     timeTable: {
       term: '1',
       class: '一班',
@@ -76,7 +75,7 @@ export default {
 }
 .top {
   width: 100%;
-  height: 200px;
+  height: 46px;
   overflow: hidden;
 }
 .main {

src/views/user/checkWork.vue

@@ -2,8 +2,19 @@
   <div id="checkWork">
     <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="checkClick()">考勤</el-button>
+          </el-col>
+        </el-col>
         <el-col :span="24" class="main">
-          <checkList :info="info"></checkList>
+          <checkList></checkList>
+        </el-col>
+        <el-col :span="24" class="foot">
+          <footInfo></footInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -12,26 +23,17 @@
 
 <script>
 import checkList from '@/layout/user/checkList.vue';
+import footInfo from '@/layout/index/footInfo.vue';
 import { createNamespacedHelpers, mapGetters } from 'vuex';
 const { mapActions: mapCheck } = createNamespacedHelpers('attendance');
 export default {
   name: 'checkWork',
   props: {},
   components: {
-    checkList,
+    checkList, //考勤列表
+    footInfo, //底部信息
   },
-  data: () => ({
-    info: {
-      classid: '1234560',
-      attend: [
-        {
-          date: '2020-02-19',
-          time: '8:30',
-          status: '0',
-        },
-      ],
-    },
-  }),
+  data: () => ({}),
   created() {
     this.searchInfo();
   },
@@ -43,6 +45,9 @@ export default {
       console.log(res.data);
       // this.$set(this, `leaveList`, res.data);
     },
+    checkClick() {
+      console.log('考勤管理');
+    },
   },
 };
 </script>
@@ -54,4 +59,21 @@ export default {
   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;
+}
 </style>

src/views/user/index.vue

@@ -2,6 +2,9 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="info">
+        <el-col :span="24" class="native">
+          <topNative></topNative>
+        </el-col>
         <el-col :span="24" class="top">
           <topInfo :info="info"></topInfo>
         </el-col>
@@ -17,6 +20,7 @@
 </template>
 
 <script>
+import topNative from '@/layout/index/topInfo.vue';
 import topInfo from '@/layout/user/topInfo.vue';
 import clickBtn from '@/layout/user/clickBtn.vue';
 import footInfo from '@/layout/index/footInfo.vue';
@@ -24,6 +28,7 @@ export default {
   name: 'index',
   props: {},
   components: {
+    topNative, //头部导航
     topInfo, //个人信息
     clickBtn, //功能按钮
     footInfo, //底部信息

src/views/user/personalDetail.vue

@@ -3,66 +3,10 @@
     <el-row>
       <el-col :span="24" class="info">
         <el-col :span="24" class="top">
-          学生个人信息
+          <topNative></topNative>
         </el-col>
         <el-col :span="24" class="message">
-          <p>
-            <span class="title">姓名:</span><span class="content">{{ messInfo.name }}</span>
-          </p>
-          <p>
-            <span class="title">身份证号:</span><span class="content">{{ messInfo.id_number }}</span>
-          </p>
-          <p>
-            <span class="title">性别:</span><span class="content">{{ messInfo.gender }}</span>
-          </p>
-          <p>
-            <span class="title">民族:</span><span class="content">{{ messInfo.nation }}</span>
-          </p>
-          <p>
-            <span class="title">手机号:</span><span class="content">{{ messInfo.phone }}</span>
-          </p>
-          <p>
-            <span class="title">学校名称:</span><span class="content">{{ messInfo.school_name }}</span>
-          </p>
-          <p>
-            <span class="title">院系:</span><span class="content">{{ messInfo.faculty }}</span>
-          </p>
-          <p>
-            <span class="title">专业:</span><span class="content">{{ messInfo.major }}</span>
-          </p>
-          <p>
-            <span class="title">入学年份:</span><span class="content">{{ messInfo.entry_year }}</span>
-          </p>
-          <p>
-            <span class="title">毕业年份:</span><span class="content">{{ messInfo.finish_year }}</span>
-          </p>
-          <p>
-            <span class="title">在校担任职务:</span><span class="content">{{ messInfo.school_job }}</span>
-          </p>
-          <p>
-            <span class="title">QQ:</span><span class="content">{{ messInfo.qq }}</span>
-          </p>
-          <p>
-            <span class="title">E-mail:</span><span class="content">{{ messInfo.email }}</span>
-          </p>
-          <p>
-            <span class="title" style="position: relative;top: -20px;">家庭所在地:</span><span class="content">{{ messInfo.family_place }}</span>
-          </p>
-          <p>
-            <span class="title">职务:</span><span class="content">{{ messInfo.job }}</span>
-          </p>
-          <p>
-            <span class="title">所在期数:</span><span class="content">{{ messInfo.termid }}</span>
-          </p>
-          <p>
-            <span class="title">所在批次:</span><span class="content">{{ messInfo.batchid }}</span>
-          </p>
-          <p>
-            <span class="title">所在班级:</span><span class="content">{{ messInfo.classid }}</span>
-          </p>
-          <p>
-            <span class="title">所在寝室:</span><span class="content">{{ messInfo.bedroomid }}</span>
-          </p>
+          <messageInfo :messInfo="messInfo"></messageInfo>
         </el-col>
       </el-col>
     </el-row>
@@ -70,10 +14,16 @@
 </template>
 
 <script>
+import topNative from '@/layout/index/topInfo.vue';
+import messageInfo from '@/layout/user/messageInfo.vue';
+
 export default {
   name: 'personalDetail',
   props: {},
-  components: {},
+  components: {
+    topNative, //头部导航
+    messageInfo, //学生信息
+  },
   data: () => ({
     messInfo: {
       name: '刘裕',
@@ -111,27 +61,27 @@ p {
 .info {
   width: 100%;
   height: 100%;
-  background-color: #edeae8;
+  background-color: #f9fafc;
 }
-.info .top {
-  text-align: center;
-  padding: 15px 0;
-  font-size: 30px;
+.top {
+  height: 46px;
+  background-color: #fff;
+  overflow: hidden;
 }
 .message {
-  padding: 0 0 10px 15px;
-}
-.message p {
-  padding: 5px 0;
-}
-.message p .title {
-  display: inline-block;
-  text-align: left;
-  width: 110px;
-}
-.message p .content {
-  display: inline-block;
-  text-align: left;
-  width: 235px;
+  min-height: 667px;
 }
+// .message p {
+//   padding: 5px 0;
+// }
+// .message p .title {
+//   display: inline-block;
+//   text-align: left;
+//   width: 110px;
+// }
+// .message p .content {
+//   display: inline-block;
+//   text-align: left;
+//   width: 235px;
+// }
 </style>