pbl-student-table/src/components/notice.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <!-- <div class="student_head">
					<div class="box_course">
						<div class="wheel">
							<img
								:src="
									studentMessage.headportrait != null
										? studentMessage.headportrait
										: tx
								"
								alt=""
							/>
						</div>
						<div class="right_box">
							<div class="right_box_title">{{ studentMessage.name }}</div>
							<div class="people">
								<div>
									<span>班级：</span
									><span style="color: #999">{{ studentMessage.cname }}</span>
								</div>
								<div style="margin-left: 50px">
									<span>所属学校：</span
									><span style="color: #999">{{ studentMessage.sname }}</span>
								</div>
							</div>
							<div>
								<span>手机号码：</span
								><span style="color: #999">{{
									studentMessage.phonenumber
								}}</span>
							</div>
						</div>
					</div>
				</div> -->
        <div class="student_body">
          <div class="noticeTitle">通知内容</div>
          <div class="project_box">
            <div class="notice_box">
              <div
                class="notice_message"
                v-for="(item, index) in newMessage"
                :key="index"
              >
                <div
                  class="notice_title"
                  @click="
                    goTo(
                      '/noticeDetail?newsid=' +
                        item.newsid +
                        '&userid=' +
                        userid
                    )
                  "
                >
                  {{ item.title }}
                </div>
                <div class="notice_time">{{ item.creatTime }}</div>
              </div>
              <!-- <div class="notice_message">
								<div class="notice_title" @click="goTo('/noticeDetail')">
									关于'一校一案'劳动有关通知
								</div>
								<div class="notice_time">2021-09-08 10:01</div>
							</div>
							<div class="notice_message">
								<div class="notice_title" @click="goTo('/noticeDetail')">
									实践出真知，最光荣
								</div>
								<div class="notice_time">2021-09-08 10:01</div>
							</div>
							<div class="notice_message">
								<div class="notice_title" @click="goTo('/noticeDetail')">
									基于项目学习Shine相关通知
								</div>
								<div class="notice_time">2021-09-08 10:01</div>
							</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentMessage: [],
      newMessage: [],
      tx: require("../assets/tx.png"),
      page: 1,
      userid: this.$route.query.userid,
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectSDetail() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSDetail", params)
        .then((res) => {
          this.studentMessage = res.data[0][0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getNews() {
      let params = {
        uid: this.userid,
        page: this.page,
      };
      this.ajax
        .get(this.$store.state.api + "getNewsTeacher", params)
        .then((res) => {
          this.newMessage = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.selectSDetail();
    this.getNews();
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
.body_student {
  margin: 20px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  height: 30%;
}
.wheel > img,
.project > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 20px 0px;
}
.student_body {
  width: 100%;
  background: #fff;
  min-height: 1000px;
  position: relative;
}
.project {
  width: 165px;
}
.project_box {
  margin: 0 0 10px 30px;
  padding-top: 40px;
}
.notice_message {
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
}
.notice_time {
  font-size: 14px;
  margin-top: 15px;
}
.notice_title {
  cursor: pointer;
}

.noticeTitle {
  background: #eeeeee;
  width: 95%;
  position: absolute;
  top: 15px;
  left: 20px;
  font-weight: 600;
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
}
</style>