最终版本

src/router/index.js

@@ -71,6 +71,11 @@ const Nursingresearch = () => import('@/views/nursing/nursingresearch');
 const Healthfestival = () => import('@/views/healthfestival');
 //服务项目
 const Service = () => import('@/views/service');
+//服务项目下面的二级页面
+const MedicalAdmin = () => import('@/views/service/medicalAdmin');
+const Consulting = () => import('@/views/service/consulting');
+const Salonactivity = () => import('@/views/service/salonactivity');
+const Meeting = () => import('@/views/service/meeting');
 
 //新闻详情页面
 const NewsDetails = () => import('@/views/newsDetails');
@@ -158,6 +163,10 @@ export default new Router({
     { name: 'Healthfestival', path: '/healthfestival', component: Healthfestival},
     //服务项目
     { name: 'Service', path: '/service', component: Service},
+    { name: 'MedicalAdmin', path: '/medicalAdmin', component: MedicalAdmin},
+    { name: 'Consulting', path: '/consulting', component: Consulting},
+    { name: 'Salonactivity', path: '/salonactivity', component: Salonactivity},
+    { name: 'Meeting', path: '/meeting', component: Meeting},
 
     //新闻详情页面
     { name: 'NewsDetails', path: '/newsDetails/:id', component: NewsDetails},

src/views/newsDetails.vue

@@ -6,8 +6,10 @@
       <div>
         <my-breadcrumb level1="首页" :level2="level2" :level3="level3" style="height: 50px; line-height: 50px;"></my-breadcrumb>
       </div>
+      <div class="line"></div>
       <div class="newsOnly">
         <h1>{{this.formData.title}}</h1>
+        <div class="lineOnly"></div>
         <div class="content" v-html="this.formData.content"></div>
       </div>
 
@@ -66,12 +68,22 @@ export default {
   margin: 20px auto;
 
 }
+.newsDetails .line {
+  height: 2px;
+  width: 100%;
+  background-color: #e5e5e5;
+  margin-bottom: 20px;
+}
 .newsDetails .newscont .newsOnly {
   overflow: hidden;
-  border: 1px solid #333333;
-
+  border: 1px solid #e5e5e5;
   padding: 20px;
 }
+.newsDetails .newscont .lineOnly {
+  height: 2px;
+  width: 100%;
+  background-color: #e5e5e5;
+}
 .newsDetails .newscont h1{
   font-size: 30px;
   margin: 20px auto;

src/views/service.vue

@@ -9,9 +9,26 @@
     <div class="w sharoncont">
 
       <div class="wthree shaIcon">
-        服务项目
+        <div style="margin: 0 auto;">
+            <div style="margin-top: 35px; margin-left: 36%;">
+              <a href="service">服务项目</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="medicalAdmin" style="font-size: 12px;">医疗管理</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="consulting" style="font-size: 12px;">管理咨询</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="salonactivity" style="font-size: 12px;">沙龙活动</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="meeting" style="font-size: 12px;">研究会议</a>
+            </div>
+
+        </div>
       </div>
-      <img src="../assets/image/sl.png">
+      <img src="../assets/image/sl.png" class="icon">
 
       <div class="wseven shamatter">
         <div class="shuIcon"></div>
@@ -47,6 +64,7 @@
       </div>
     </div>
 
+
     <footer-nav/>
   </div>
 </template>
@@ -128,19 +146,21 @@ export default {
 
   position: relative;
 }
-.service .sharoncont img {
+.service .sharoncont .icon {
   position: absolute;
   left: -11px;
   top: 13px;
+
 }
 .service .shaIcon {
   position: relative;
   border: 1px solid #cccccc;
-  height: 120px;
-  line-height: 120px;
+  height: 190px;
   margin-top: 20px;
-  text-align: center;
-
+}
+.service .shaIcon a {
+  cursor:pointer;
+  color: #333333;
 }
 .service .shamatter {
   position: relative;
@@ -160,11 +180,32 @@ export default {
   height: 4px;
   margin-top: 10px;
 }
-.service .shamatter .health  {
+.service .shamatter li {
+  overflow: hidden;
   margin-top: 15px;
+  cursor:pointer;
+}
+.service .shamatter li .pic {
+  overflow: hidden;
+  width: 100px;
+  height: 80px;
+  margin-left: 10px;
+}
+.service .shamatter li .pic img{
+  width: 100%;
+  height: 100%;
 }
-.service .shamatter .health span {
-  margin-left: 25px;
+.service .shamatter li .newcont {
+  overflow: hidden;
+  padding-left: 10px;
+}
+.service .shamatter li .newcont h5{
   font-size: 14px;
+  padding-top: 5px;
+}
+.service .shamatter .block {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
 </style>

src/views/service/consulting.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="consulting">
+    <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="service">服务项目</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="medicalAdmin" style="font-size: 12px;">医疗管理</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="consulting" style="font-size: 12px;">管理咨询</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="salonactivity" style="font-size: 12px;">沙龙活动</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="meeting" 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: 10,
+      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/${34}?&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 == 'consulting') {
+         sessionStorage.setItem('breadName', '管理咨询');
+         sessionStorage.setItem('breadRouting', 'consulting');
+      }
+    }
+  }
+};
+</script>
+
+<style type="text/css">
+.consulting {
+
+}
+.consulting .sharonPic {
+  overflow: hidden;
+  margin-top: 20px;
+  height: 300px;
+}
+.consulting .sharonPic img {
+  height: 100%;
+  width: 100%;
+}
+.consulting .sharoncont {
+
+  position: relative;
+}
+.consulting .sharoncont .icon {
+  position: absolute;
+  left: -11px;
+  top: 13px;
+
+}
+.consulting .shaIcon {
+  position: relative;
+  border: 1px solid #cccccc;
+  height: 190px;
+  margin-top: 20px;
+}
+.consulting .shaIcon a {
+  cursor:pointer;
+  color: #333333;
+}
+.consulting .shamatter {
+  position: relative;
+  border: 1px solid #cccccc;
+  margin-top: 20px;
+}
+.consulting .shamatter .shuIcon {
+  width: 4px;
+  background-color: #79c71e;
+  height: 15px;
+  margin-top: 10px;
+  margin-left: 8px;
+}
+.consulting .shamatter .hengIcon {
+  width: 100%;
+  background-color: #79c71e;
+  height: 4px;
+  margin-top: 10px;
+}
+.consulting .shamatter li {
+  overflow: hidden;
+  margin-top: 15px;
+  cursor:pointer;
+}
+.consulting .shamatter li .pic {
+  overflow: hidden;
+  width: 100px;
+  height: 80px;
+  margin-left: 10px;
+}
+.consulting .shamatter li .pic img{
+  width: 100%;
+  height: 100%;
+}
+.consulting .shamatter li .newcont {
+  overflow: hidden;
+  padding-left: 10px;
+}
+.consulting .shamatter li .newcont h5{
+  font-size: 14px;
+  padding-top: 5px;
+}
+.consulting .shamatter .block {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>

src/views/service/medicalAdmin.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="medicalAdmin">
+    <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="service">服务项目</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="medicalAdmin" style="font-size: 12px;">医疗管理</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="consulting" style="font-size: 12px;">管理咨询</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="salonactivity" style="font-size: 12px;">沙龙活动</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="meeting" 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: 10,
+      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/${33}?&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 == 'medicalAdmin') {
+         sessionStorage.setItem('breadName', '医疗管理');
+         sessionStorage.setItem('breadRouting', 'medicalAdmin');
+      }
+    }
+  }
+};
+</script>
+
+<style type="text/css">
+.medicalAdmin {
+
+}
+.medicalAdmin .sharonPic {
+  overflow: hidden;
+  margin-top: 20px;
+  height: 300px;
+}
+.medicalAdmin .sharonPic img {
+  height: 100%;
+  width: 100%;
+}
+.medicalAdmin .sharoncont {
+  position: relative;
+}
+.medicalAdmin .sharoncont .icon {
+  position: absolute;
+  left: -11px;
+  top: 13px;
+}
+.medicalAdmin .shaIcon {
+  position: relative;
+  border: 1px solid #cccccc;
+  height: 170px;
+  margin-top: 20px;
+}
+.medicalAdmin .shaIcon a {
+  cursor:pointer;
+  color: #333333;
+}
+.medicalAdmin .shamatter {
+  position: relative;
+  border: 1px solid #cccccc;
+  margin-top: 20px;
+}
+.medicalAdmin .shamatter .shuIcon {
+  width: 4px;
+  background-color: #79c71e;
+  height: 15px;
+  margin-top: 10px;
+  margin-left: 8px;
+}
+.medicalAdmin .shamatter .hengIcon {
+  width: 100%;
+  background-color: #79c71e;
+  height: 4px;
+  margin-top: 10px;
+}
+.medicalAdmin .shamatter li {
+  overflow: hidden;
+  margin-top: 15px;
+  cursor:pointer;
+}
+.medicalAdmin .shamatter li .pic {
+  overflow: hidden;
+  width: 100px;
+  height: 80px;
+  margin-left: 10px;
+}
+.medicalAdmin .shamatter li .pic img{
+  width: 100%;
+  height: 100%;
+}
+.medicalAdmin .shamatter li .newcont {
+  overflow: hidden;
+  padding-left: 10px;
+}
+.medicalAdmin .shamatter li .newcont h5{
+  font-size: 14px;
+  padding-top: 5px;
+}
+.medicalAdmin .shamatter .block {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>

src/views/service/meeting.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="meeting">
+    <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="service">服务项目</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="medicalAdmin" style="font-size: 12px;">医疗管理</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="consulting" style="font-size: 12px;">管理咨询</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="salonactivity" style="font-size: 12px;">沙龙活动</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="meeting" 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: 10,
+      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/${36}?&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 == 'meeting') {
+         sessionStorage.setItem('breadName', '研究会议');
+         sessionStorage.setItem('breadRouting', 'meeting');
+      }
+    }
+  }
+};
+</script>
+
+<style type="text/css">
+.meeting {
+
+}
+.meeting .sharonPic {
+  overflow: hidden;
+  margin-top: 20px;
+  height: 300px;
+}
+.meeting .sharonPic img {
+  height: 100%;
+  width: 100%;
+}
+.meeting .sharoncont {
+
+  position: relative;
+}
+.meeting .sharoncont .icon {
+  position: absolute;
+  left: -11px;
+  top: 13px;
+
+}
+.meeting .shaIcon {
+  position: relative;
+  border: 1px solid #cccccc;
+  height: 350px;
+  margin-top: 20px;
+}
+.meeting .shaIcon a {
+  cursor:pointer;
+  color: #333333;
+}
+.meeting .shamatter {
+  position: relative;
+  border: 1px solid #cccccc;
+  margin-top: 20px;
+}
+.meeting .shamatter .shuIcon {
+  width: 4px;
+  background-color: #79c71e;
+  height: 15px;
+  margin-top: 10px;
+  margin-left: 8px;
+}
+.meeting .shamatter .hengIcon {
+  width: 100%;
+  background-color: #79c71e;
+  height: 4px;
+  margin-top: 10px;
+}
+.meeting .shamatter li {
+  overflow: hidden;
+  margin-top: 15px;
+  cursor:pointer;
+}
+.meeting .shamatter li .pic {
+  overflow: hidden;
+  width: 100px;
+  height: 80px;
+  margin-left: 10px;
+}
+.meeting .shamatter li .pic img{
+  width: 100%;
+  height: 100%;
+}
+.meeting .shamatter li .newcont {
+  overflow: hidden;
+  padding-left: 10px;
+}
+.meeting .shamatter li .newcont h5{
+  font-size: 14px;
+  padding-top: 5px;
+}
+.meeting .shamatter .block {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>

src/views/service/salonactivity.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="salonactivity">
+    <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="service">服务项目</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="medicalAdmin" style="font-size: 12px;">医疗管理</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="consulting" style="font-size: 12px;">管理咨询</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="salonactivity" style="font-size: 12px;">沙龙活动</a>
+            </div>
+            <div style="margin-top: 5px; margin-left: 36%;">
+              <a href="meeting" 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: 10,
+      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/${35}?&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 == 'salonactivity') {
+         sessionStorage.setItem('breadName', '沙龙活动');
+         sessionStorage.setItem('breadRouting', 'salonactivity');
+      }
+    }
+  }
+};
+</script>
+
+<style type="text/css">
+.salonactivity {
+
+}
+.salonactivity .sharonPic {
+  overflow: hidden;
+  margin-top: 20px;
+  height: 300px;
+}
+.salonactivity .sharonPic img {
+  height: 100%;
+  width: 100%;
+}
+.salonactivity .sharoncont {
+
+  position: relative;
+}
+.salonactivity .sharoncont .icon {
+  position: absolute;
+  left: -11px;
+  top: 13px;
+
+}
+.salonactivity .shaIcon {
+  position: relative;
+  border: 1px solid #cccccc;
+  height: 350px;
+  margin-top: 20px;
+}
+.salonactivity .shaIcon a {
+  cursor:pointer;
+  color: #333333;
+}
+.salonactivity .shamatter {
+  position: relative;
+  border: 1px solid #cccccc;
+  margin-top: 20px;
+}
+.salonactivity .shamatter .shuIcon {
+  width: 4px;
+  background-color: #79c71e;
+  height: 15px;
+  margin-top: 10px;
+  margin-left: 8px;
+}
+.salonactivity .shamatter .hengIcon {
+  width: 100%;
+  background-color: #79c71e;
+  height: 4px;
+  margin-top: 10px;
+}
+.salonactivity .shamatter li {
+  overflow: hidden;
+  margin-top: 15px;
+  cursor:pointer;
+}
+.salonactivity .shamatter li .pic {
+  overflow: hidden;
+  width: 100px;
+  height: 80px;
+  margin-left: 10px;
+}
+.salonactivity .shamatter li .pic img{
+  width: 100%;
+  height: 100%;
+}
+.salonactivity .shamatter li .newcont {
+  overflow: hidden;
+  padding-left: 10px;
+}
+.salonactivity .shamatter li .newcont h5{
+  font-size: 14px;
+  padding-top: 5px;
+}
+.salonactivity .shamatter .block {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+</style>