yiliaoqiantai-web/src/views/doctorpolitical/review.vue

<template>
  <div class="review">
    <header-nav  :id="id"/>

    <div class="w sharonPic">
      <img src="../../assets/image/shalong.jpg">
    </div>
    <!-- 沙龙内容部分 -->
    <div class="w sharoncont">

      <div class="wthree shaIcon">
        <div style="margin: 0 auto;">
            <div style="margin-top: 35px; margin-left: 36%;">
              <a href="doctorpolitical">医政风采</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="concept" style="font-size: 12px;">概念与职责</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="ward" style="font-size: 12px;">病房质量管理</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="outpatientservice" style="font-size: 12px;">门诊质量管理</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="doctorskill" style="font-size: 12px;">医生技能管理</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="core" style="font-size: 12px;">核心制度</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="registered" style="font-size: 12px;">执业医生注册</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="farmers" style="font-size: 12px;">卫生支农</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="cases" style="font-size: 12px;">病例质量管理</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="education" style="font-size: 12px;">健康教育</a>
            </div>
            <div style="margin-top: 5px; margin-left: 36%;">
              <a href="review" style="font-size: 12px;">评审</a>
            </div>
        </div>
      </div>
      <img src="../../assets/image/sl.png" class="icon">

      <div class="wseven shamatter">
        <div class="shuIcon"></div>
        <span class="biaoti">评审</span>
        <div class="hengIcon"></div>
        <ul >
          <li v-for="(item, index) in DataList" :key="id" @click="Jump(item.id)">
            <div class="newcont">
              <div style="overflow: hidden;">
                <span class="round left"></span>
                <h5 class="left" style="margin-left: 15px;">{{item.title}}</h5>
                <span class="onlyTime">{{item.publishTime}}</span>
              </div>

              <div class="onlyHeight">
                <p>{{item.newsAbstract}}</p>
              </div>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="pagesize"
            background
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>

    <footer-nav/>
  </div>
</template>

<script type="text/javascript">
import headerNav from '@/components/header';
import footerNav from '@/components/footer';
export default {
  data() {
    return {
      id: 7,
      current: 1,
      pagesize: 10,
      routingName: '',
      // 总共有多少条数据
      total: 0,
      DataList: []
    };
  },
  components: {
    headerNav,
    footerNav
  },
  created() {
    this.loadData();
    this.getUrlsub();
  },
  methods: {
    async loadData() {
      const response = await this.$http.get(`biz/newsArticles/${28}?&current=${this.current}&size=${this.pagesize}`);
      if (response.data.code === 1) {
        this.DataList = response.data.responseData.records;
        this.total = response.data.responseData.total
        // console.log(response.data.responseData)
      }
    },
    //跳转
    Jump(id){
      window.open('/newsDetails/'+ id);
    },
    // 分页方法
    handleSizeChange(val) {
      this.pagesize = val;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
      console.log(`当前页: ${val}`);
    },
    getUrlsub() {
      var urlStr = location.pathname;
      var index = urlStr.lastIndexOf('\/');
      this.routingName = urlStr.substring(index + 1, urlStr.length);
      if(this.routingName == 'review') {
         sessionStorage.setItem('breadName', '评审');
         sessionStorage.setItem('breadRouting', 'review');
      }
    }
  }
};
</script>

<style type="text/css">
.review {

}
.review .sharonPic {
  overflow: hidden;
  margin-top: 20px;
  height: 300px;
}
.review .sharonPic img {
  height: 100%;
  width: 100%;
}
.review .sharoncont {

  position: relative;
}
.review .sharoncont .icon {
  position: absolute;
  left: -11px;
  top: 13px;

}
.review .shaIcon {
  position: relative;
  border: 1px solid #cccccc;
  height: 350px;
  margin-top: 20px;
}
.review .shaIcon a {
  color: #333333;
  cursor:pointer;
}
.review .shamatter {
  position: relative;
  border: 1px solid #cccccc;
  margin-top: 20px;
}
.review .shamatter .shuIcon {
  width: 4px;
  background-color: #79c71e;
  height: 15px;
  margin-top: 10px;
  margin-left: 8px;
}
.review .shamatter .hengIcon {
  width: 100%;
  background-color: #79c71e;
  height: 4px;
  margin-top: 10px;
}
.review .shamatter li {
  overflow: hidden;
  margin-top: 15px;
  cursor:pointer;
}
.review .shamatter li .pic {
  overflow: hidden;
  width: 100px;
  height: 80px;
  margin-left: 10px;
}
.review .shamatter li .pic img{
  width: 100%;
  height: 100%;
}
.review .shamatter li .newcont {
  overflow: hidden;
  padding-left: 10px;
}
.review .shamatter li .newcont h5{
  font-size: 14px;
  padding-top: 5px;
}
.review .shamatter .block {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>