pbl-student-table/src/components/noticeDetail.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="../assets/tx.png" alt="" /></div>
						<div class="right_box">
							<div class="right_box_title">张子林</div>
							<div class="people">
								<div>
									<span>班级：</span><span style="color: #999">六年3班</span>
								</div>
								<div style="margin-left: 50px">
									<span>所属学校：</span
									><span style="color: #999">罗浮名剑中学</span>
								</div>
							</div>
							<div>
								<span>手机号码：</span
								><span style="color: #999">13751117529</span>
							</div>
						</div>
					</div>
				</div> -->
        <div class="student_body">
          <div class="project_box">
            <div class="detail_content_top">
              <div class="detail_title">{{ newDetailMessage.title }}</div>
              <div class="detail_time">{{ newDetailMessage.creatTime }}</div>
            </div>
            <div
              class="detail_content"
              v-html="newDetailMessage.newscontent"
            ></div>
          </div>
          <div class="returnPage" @click="goTo('/notice?userid=' + userid)">
            返回
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentMessage: [],
      newDetailMessage: [],
      tx: require("../assets/tx.png"),
      newsid: this.$route.query.newsid,
      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);
        });
    },
    selectNewDetail() {
      let params = {
        nid: this.newsid,
      };
      this.ajax
        .get(this.$store.state.api + "selectNewDetail", params)
        .then((res) => {
          this.newDetailMessage = res.data[0][0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.selectSDetail();
    this.selectNewDetail();
    document.scrollingElement.scrollTop = 0;
  },
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 80%;
  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%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  min-height: 800px;
  position: relative;
}
.project {
  width: 165px;
}
.project_box {
  padding: 0 30px 10px 30px;
}
.detail_content_top {
  width: 100%;
  padding: 25px 0 25px 0;
  border-bottom: 1px solid #ccc;
}
.detail_title {
  text-align: center;
  font-size: 24px;
}
.detail_time {
  font-size: 13px;
  padding: 15px 0 0 40px;
}
.detail_content {
  width: 90%;
  line-height: 2pc;
  margin: 0 auto;
  padding-top: 30px;
  text-indent: 30px;
}

.returnPage {
  position: absolute;
  bottom: 30px;
  right: 10%;
  background: #41cda6;
  width: 100px;
  color: #fff;
  height: 25px;
  border-radius: 3px;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  cursor: pointer;
}
</style>