11

src/App.vue

@@ -31,11 +31,21 @@ export default {
   data() {
     return {
       iftop: false,
-      width: document.documentElement.clientWidth >=1200
+      timer : true,
+      width: document.documentElement.clientWidth >= 992
     }
   },
   mounted() { //监听scroll方法
     window.addEventListener('scroll', this.handleScroll)
+
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth>992
+      })()
+    }
   },
   beforeDestroy() { //及时释放
     window.removeEventListener('scroll', this.handleScroll)
@@ -66,7 +76,7 @@ export default {
 <style scoped>
 .headers {
   width: 100%;
-  z-index: 9999;
+  z-index: 999;
   position: absolute;
   /*top: 0;*/
   /*left: 0;*/

src/api/index.js

@@ -6,7 +6,7 @@
  */
 import request from '@/utils/request'
 
-// 查询测试列表
+// 获取统计数据
 export function getStatistic(data) {
   return request({
     url: '/web/statistic',
@@ -14,7 +14,7 @@ export function getStatistic(data) {
     data:data
   })
 }
-// 查询测试列表
+// 获取所有导航
 export function getNavigation(data) {
   return request({
     url: '/web/getnavall',
@@ -23,7 +23,7 @@ export function getNavigation(data) {
   })
 }
 
-// 查询测试列表
+// 获取节点信息(通用接口)
 export function getNode(data) {
   return request({
     url: '/web/node',
@@ -31,7 +31,7 @@ export function getNode(data) {
     data:data
   })
 }
-// 查询测试列表
+// 获取文章列表
 export function getArticleList(data) {
   return request({
     url: '/web/articlelist',
@@ -41,7 +41,7 @@ export function getArticleList(data) {
 }
 
 
-// 查询测试列表
+// 获取面包屑
 export function crumbs(id) {
   return request({
     url: '/web/crumbs',
@@ -53,7 +53,7 @@ export function crumbs(id) {
 }
 
 
-// 查询测试列表
+// 获取banner图
 export function banner(type) {
   return request({
     url: '/web/banner',
@@ -63,3 +63,25 @@ export function banner(type) {
     }
   })
 }
+
+// 获取文章详情
+export function article(id) {
+  return request({
+    url: '/web/article',
+    method: 'post',
+    data:{
+      id:id
+    }
+  })
+}
+
+// 获取文章详情
+export function info(id) {
+  return request({
+    url: '/web/info',
+    method: 'post',
+    data:{
+      id:id
+    }
+  })
+}

src/router/index.js

@@ -14,6 +14,16 @@ const routes = [
     name: 'TeachingStaff',
     component: () => import(/* webpackChunkName: "about" */ '../views/school_profile/index')
   },
+  {
+    path: '/mobile',
+    name: 'Mobile',
+    component: () => import(/* webpackChunkName: "about" */ '../views/mobile/index')
+  },
+  {
+    path: '/mobile/:secondId/:navId',
+    name: 'Mobile',
+    component: () => import(/* webpackChunkName: "about" */ '../views/mobile/index')
+  },
   {
     path: '/ts',
     name: 'TeachingStaff',
@@ -30,7 +40,12 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../components/HelloWorld')
   },
   {
-    path: '/:navId',
+    path: '/pc/:secondId/:navId',
+    name: 'content',
+    component: () => import(/* webpackChunkName: "about" */ '../views/content/index')
+  },
+  {
+    path: '/pc/:secondId',
     name: 'content',
     component: () => import(/* webpackChunkName: "about" */ '../views/content/index')
   },

src/utils/request.js

@@ -2,6 +2,8 @@ import axios from 'axios'
 import { Notification, Message } from 'element-ui'
 import errorCode from '@/utils/errorCode'
 
+
+//todo 显示消息处理
 axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
 // 创建axios实例
 const service = axios.create({
@@ -26,16 +28,16 @@ service.interceptors.response.use(res => {
     // 获取错误信息
     const msg = errorCode[code] || res.data.msg || errorCode['default']
     if (code === 500) {
-      Message({
+      //Message({
-        message: msg,
+      //  message: msg,
-        type: 'error'
+      //  type: 'error'
-      })
+      //})
       return Promise.reject(new Error(msg))
     }else if (code == 199){
-      Message({
+      //Message({
-        message: "查询结果为空!",
+      //  message: "查询结果为空!",
-        type: 'info'
+      //  type: 'info'
-      })
+      //})
       return res.data
     } else if (code !== 200) {
       Notification.error({
@@ -58,11 +60,11 @@ service.interceptors.response.use(res => {
     else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({
+    //Message({
-      message: message,
+    //  message: message,
-      type: 'error',
+    //  type: 'error',
-      duration: 5 * 1000
+    //  duration: 5 * 1000
-    })
+    //})
     return Promise.reject(error)
   }
 )

src/utils/sist.js

@@ -0,0 +1,36 @@
+/**
+ * @author: Clay
+ * @date: 2022/1/16 11:13
+ * @description：sist
+ * @email: clay@hchyun.com
+ */
+
+export function getParentNode(id){
+  let menuList = JSON.parse(sessionStorage.getItem("menu"));
+  for (let menu of menuList) {
+    for (let child of menu.children) {
+      if (id == item.encodeId){
+        menu.children=[]
+        child.children=[]
+        return {
+          stair:menu,
+          second:child,
+        }
+      }
+      for (let item of child.children) {
+        if (id == item.encodeId){
+          menu.children=[]
+          child.children=[]
+          item.children=[]
+          return {
+            stair:menu,
+            second:child,
+            three:item
+          }
+        }
+      }
+    }
+  }
+  return null
+}
+

src/views/content/components/details.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="details">
+    <el-row>
+      <el-col>
+        <div class="context">
+          <div class="title">{{ value.title }}</div>
+          <div class="details_title">测试</div>
+
+          <div class="text" v-html="value.content"></div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Introduction",
+  props: {
+    value: {
+      type: Object,
+      default: {
+        title: "12",
+        content: "12"
+      },
+    },
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.details {
+  width: 100%;
+}
+
+.details_title{
+  font-size: 1.2rem;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #B4B4B4;
+  line-height: 1.7rem;
+}
+
+
+
+.tab {
+  margin-left: 1.9rem;
+  margin-top: 1.5rem;
+  font-weight: 400;
+  font-size: 1.4rem !important;
+}
+
+.context {
+  margin: 3rem 4rem;
+
+  .title {
+    font-size: 2.4rem;
+    font-weight: 500;
+    color: #1956BC;
+    text-align: center;
+  }
+
+  .text {
+    width: 100%;
+    margin-top: 2rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+    color: #3C3C3C;
+    word-break: break-word; /* 文本行的任意字内断开 */
+    word-wrap: break-word; /* IE */
+    white-space: -moz-pre-wrap; /* Mozilla */
+    white-space: -hp-pre-wrap; /* HP printers */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: pre; /* CSS2 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+    pre {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/content/components/list.vue

@@ -1,50 +1,68 @@
 <template>
   <div class="list">
-<!--{{value}}-->
+    <!--{{value}}-->
-    <el-row>
+    <div>
-      <!--正文内容-->
+      <el-row>
-      <el-col class="context">
+        <!--正文内容-->
-        <div v-for="(item,index) in value.data" class="tw">
+        <el-col class="context">
-          <el-row>
+          <div v-for="(item,index) in value.data" class="tw">
-            <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
+            <el-row>
-              <div class="tw_time">
+              <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
-                <div class="tw_top">
+                <div class="tw_time">
-                  {{getDay(item.publishTime)}}
+                  <div class="tw_top">
+                    {{ getDay(item.publishTime) }}
+                  </div>
+                  <div class="tw_bottoms">
+                    {{ getTime(item.publishTime) }}
+                  </div>
                 </div>
-                <div class="tw_bottoms">
+              </el-col>
-                  {{getTime(item.publishTime)}}
+              <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
+                <div class="tw_context">
+                  <div class="tw_context_title" @click="getContext(item)">
+                    {{ item.title }}
+                  </div>
+                  <div class="tw_context_text" v-html="item.content"></div>
                 </div>
-              </div>
+              </el-col>
-            </el-col>
+              <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
-            <el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
+                <div class="tw_img">
-              <div class="tw_context">
+                  <img :src="item.imgurl" alt="">
-                <div class="tw_context_title">
-                  {{item.title}}
                 </div>
-                <div class="tw_context_text" v-html="item.content"></div>
+              </el-col>
-              </div>
+            </el-row>
-            </el-col>
+            <hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
-            <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+          </div>
-              <div class="tw_img">
+        </el-col>
-                <img :src="item.imgurl" alt="">
+      </el-row>
-              </div>
+      <el-row>
-            </el-col>
+
-          </el-row>
+        <el-col class="pagination_p">
-          <hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
+          <el-pagination class="pagination"
-        </div>
+            :small="small"
-      </el-col>
+            @size-change="handleSizeChange"
-    </el-row>
+            @current-change="handleCurrentChange"
+            :current-page.sync="value.pageNum"
+            :page-size="value.data.length"
+            layout="prev, pager, next, jumper"
+            :total="value.total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
   </div>
 </template>
 
 <script>
+import {getNode} from "@/api";
+
 export default {
   name: "list",
-  props:{
+  props: {
     value: {
-      type: Array,
+      type: Object,
       default: {
-        data:[{
+        data: [{
           content: "",
           title: "",
           publishTime: "2022-01-15 17:02:13",
@@ -55,17 +73,40 @@ export default {
   },
   data() {
     return {
-      width: document.documentElement.clientWidth
+      width: document.documentElement.clientWidth,
+      small:document.documentElement.clientWidth<=992
     }
   },
-  methods:{
+  methods: {
-    getDay(time){
+    getContext(context){
+      if (this.width <=992){
+        this.$router.push("/mobile/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
+      }else {
+        this.$router.push("/pc/" + this.value.secondId +"/" +this.value.navId+"?id="+context.id);
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      this.value.pageNum = val
+      let data = {
+        id: this.value.navId,
+        pageNum: val,
+        pageSize: 4
+      }
+      getNode(data).then(res => {
+        this.value.data = res.rows
+        this.value.total = res.total
+      })
+    },
+    getDay(time) {
       let day = new Date(time).getDate();
       return day
     },
-    getTime(time){
+    getTime(time) {
       let date = new Date(time);
-      return date.getFullYear() +"-" + date.getMonth()+1
+      return date.getFullYear() + "-" + date.getMonth() + 1
     }
   }
 }
@@ -83,13 +124,15 @@ export default {
     margin-top: 4rem;
   }
 
-  .tw_img{
+  .tw_img {
     width: 100%;
     text-align: left;
-    img{
+
+    img {
       width: 90%;
     }
   }
+
   .tw_time {
     border-right: .1rem solid #D5D5D5;
     height: 10rem;
@@ -112,15 +155,15 @@ export default {
   }
 
   .tw_context {
-
+    cursor: pointer;
     font-family: PingFangSC-Medium, PingFang SC;
     color: #161616;
 
 
     .tw_context_title {
-      overflow:hidden; //超出的文本隐藏
+      overflow: hidden; //超出的文本隐藏
-      text-overflow:ellipsis; //溢出用省略号显示
+      text-overflow: ellipsis; //溢出用省略号显示
-      white-space:nowrap; //溢出不换行
+      white-space: nowrap; //溢出不换行
       font-size: 2rem;
       font-weight: 600;
       padding-right: 2rem;
@@ -133,9 +176,9 @@ export default {
       font-weight: 400;
       overflow: hidden;
       text-overflow: ellipsis;
-      display:-webkit-box; //作为弹性伸缩盒子模型显示。
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
-      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-      -webkit-line-clamp:3; //显示的行
+      -webkit-line-clamp: 3; //显示的行
     }
   }
 
@@ -153,4 +196,13 @@ export default {
     color: #3C3C3C;
   }
 }
+.pagination_p{
+  text-align: center;
+  margin-bottom: 2rem;
+
+  .pagination{
+    display: inline-block;
+    float: none;
+  }
+}
 </style>

src/views/content/components/new_list.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: "new_list"
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/content/index.vue

@@ -4,10 +4,10 @@
       <el-col :span="24">
         <!--首页图片-->
         <div class="top">
-          <span v-if="bgImage != ''">
+          <span v-if="bgImage != null">
             <img :src="bgImage" alt="">
           </span>
-          <span v-else>
+          <span v-if="bgImage == null">
           <img src="@/assets/school_profile/bj123.png" alt="">
           </span>
         </div>
@@ -18,7 +18,7 @@
       <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
         <div class="grid-content"></div>
       </el-col>
-      <el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
+      <el-col v-show="width" :md="6" :lg="6" :xl="4">
         <div class="left_lab" ref="lab">
           <div class="lab">
             <div v-for="(nav,index) in navList" class="lab_div">
@@ -59,23 +59,25 @@
             <Introduction :value="contextData" v-if="type == 1"/>
             <List :value="contextData" v-if="type == 2"/>
             <DireData :value="contextData" v-if="type == 3"/>
+            <Details :value="detailsData" v-if="type == null"/>
           </el-col>
         </el-row>
-
-
       </el-col>
       <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
         <div class="grid-content"></div>
       </el-col>
     </el-row>
+
+
   </div>
 </template>
 
 <script>
-import {getNode,crumbs} from "@/api";
+import {getNode, crumbs, article} from "@/api";
 import Introduction from './components/Introduction.vue'
 import List from './components/list.vue'
 import DireData from './components/dire_data.vue'
+import Details from './components/details.vue'
 import {handleTree} from "@/utils/ebts";
 
 export default {
@@ -84,73 +86,150 @@ export default {
     Introduction,
     List,
     DireData,
+    Details
   },
   data() {
     return {
-      width: document.documentElement.clientWidth,
+      width: document.documentElement.clientWidth > 992,
+      secondId: null,
       navId: null,
       navList: [],
       showIndex: 0,
       contextData: {},
       type: 2,
-      bgImage:"",
+      bgImage: null,      crumbs: {
-      crumbs:{},
+        "two": {
+          "title": "学院领导",
+        },
+        "one": {
+          "title": "学院概况",
+        }
+      },
+      detailsData: {}
     }
   },
   watch: {
     $route(to, from) {
-      this.getNav()
+      console.log("触发了 $route")
+      let arcId = this.$route.params && this.$route.query.id
+      console.log(arcId)
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      }
+      let id = this.$route.params && this.$route.params.secondId
+      this.navId = this.$route.params && this.$route.params.navId;
+      try {
+        this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+      } catch (e) {
+      }
+      if (this.secondId == id) {
+        for (let i = 0; i < this.navList.length; i++) {
+          if (this.navId == this.navList[i].encodeId) {
+            this.showIndex = i
+            this.getContent(this.navList[i])
+          }
+        }
+      } else {
+        this.getNav()
+      }
     }
   },
   created() {
     this.getNav()
-    crumbs(this.navId).then(res=>{
+    crumbs(this.secondId).then(res => {
       this.crumbs = res.data
     })
   },
   methods: {
+    getContext(arcId) {
+      article(arcId).then(res => {
+        console.log(res);
+        this.detailsData = res.data.data
+        this.type = null
+      })
+    },
     getNav() {
+      console.log("触发了 getNav")
+      this.secondId = this.$route.params && this.$route.params.secondId;
       this.navId = this.$route.params && this.$route.params.navId;
       this.navList = []
-      getNode({id: this.navId}).then(res => {
+      getNode({id: this.secondId}).then(res => {
         this.navList = res.data
         try {
-          this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+          setTimeout(() => {
-        }catch (e) {
+            this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+          }, 100);
+        } catch (e) {
+          console.log(e)
         }
-        this.getContent(this.navList[0])
+        for (let i = 0; i < this.navList.length; i++) {
+          if (this.navId == this.navList[i].encodeId) {
+            this.showIndex = i
+          }
+        }
+        let arcId = this.$route.params && this.$route.query.id
+        if (arcId != undefined) {
+          this.getContext(arcId)
+        } else {
+          if (this.navId == undefined) {
+            this.getContent(this.navList[0])
+          } else {
+            this.getContent(this.navList[this.showIndex])
+          }
+        }
+
       })
     },
     getContent(menu) {
       this.type = menu.type
       this.contextData = null
       this.bgImage = menu.link
-
+      let data = null
-      getNode({id: menu.encodeId}).then(res => {
+      if (this.type == 2) {
-        if (this.type == 2){
+        data = {
+          id: menu.encodeId,
+          pageNum: 1,
+          pageSize: 4
+        }
+      } else {
+        data = {
+          id: menu.encodeId,
+        }
+      }
+      getNode(data).then(res => {
+        if (this.type == 2) {
           this.contextData = {
-            data:res.rows,
+            data: res.rows,
-            total:res.total
+            total: res.total,
+            pageNum: data.pageNum,
+            navId: this.navId,
+            secondId: this.secondId,
           }
-        }else if (this.type == 1){
+        } else if (this.type == 1) {
           this.contextData = res.data
-        }else if (this.type == 3){
+        } else if (this.type == 3) {
-          this.contextData = handleTree(res.data, "id", "pid",null,null)
+          this.contextData = handleTree(res.data, "id", "pid", null, null)
         }
       })
     },
     navClick(nav, index) {
-      if (index != this.showIndex) {
+      //if (index != this.showIndex) {
-        this.showIndex = index
+      this.showIndex = index
-        this.type = nav.type
+      this.type = nav.type
-        this.getContent(nav)
+      this.$router.push("/pc/" + this.secondId + "/" + nav.encodeId);
-      }
+      //this.getContent(nav)
+      //}
     }
   },
 }
 </script>
 
 <style scoped lang="scss">
+.top {
+  img {
+    width: 100%;
+  }
+}
 
 .left_lab {
   margin-left: 4rem;

src/views/edu_teach/index.vue

@@ -12,7 +12,7 @@
       <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
         <div class="grid-content"></div>
       </el-col>
-      <el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
+      <el-col v-show="width>992" :md="6" :lg="6" :xl="4">
         <div class="left_lab">
           <div class="lab">
             <div class="lab_list lab_select">
@@ -88,7 +88,7 @@
                     </div>
                   </div>
                 </el-col>
-                <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                   <div class="tw_img">
                     <img src="@/assets/index/teaching_student/tw1.png" alt="">
                   </div>
@@ -118,7 +118,7 @@
                     </div>
                   </div>
                 </el-col>
-                <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                   <div class="tw_img">
                     <img src="@/assets/index/teaching_student/tw1.png" alt="">
                   </div>
@@ -148,7 +148,7 @@
                     </div>
                   </div>
                 </el-col>
-                <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                   <div class="tw_img">
                     <img src="@/assets/index/teaching_student/tw1.png" alt="">
                   </div>
@@ -178,7 +178,7 @@
                     </div>
                   </div>
                 </el-col>
-                <el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
+                <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
                   <div class="tw_img">
                     <img src="@/assets/index/teaching_student/tw1.png" alt="">
                   </div>

src/views/header/index.vue

@@ -47,13 +47,13 @@
     <!--导航部分-->
     <div class="bottom">
       <el-row>
-        <el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
+        <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
           <div class="icon">
             <div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
             <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
           </div>
         </el-col>
-        <el-col v-show="width>=992" :span="1">
+        <el-col v-show="width" :span="1">
           <div class="grid-content"></div>
         </el-col>
         <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19">
@@ -65,7 +65,7 @@
               </div>
             </router-link>
 
-            <span  v-for="menu in menuData">
+            <span  v-for="(menu,index) in menuData" :key="index">
             <a>
               <div class="link_text">
                 <div class="border"></div>
@@ -73,7 +73,7 @@
                 <div v-show="english">{{ menu.englishTitle }}</div>
                 <div class="secondary">
                   <ul>
-                    <li v-for="item in menu.children" @click="menuCut(item)">
+                    <li v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
                       <span v-show="!english">{{ item.title }}</span>
                       <span v-show="english">{{ item.englishTitle }}</span>
                     </li>
@@ -151,18 +151,34 @@ export default {
   data() {
     return {
       english:false,
-      width: document.documentElement.clientWidth,
+      width: document.documentElement.clientWidth >=1200,
+      pc:document.documentElement.clientWidth >992,
       menuData:[],
     }
   },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth>=1200
+      })()
+    }
+  },
   created() {
-    getNavigation({}).then(res=>{
+    if (this.pc){
-      this.menuData = res.data
+      getNavigation({}).then(res=>{
-    })
+        this.menuData = res.data
+        sessionStorage.setItem("menu",JSON.stringify(res.data))
+      })
+    }
+      //this.$router.push("/" + menu.encodeId);
+    //}
   },
   methods: {
     menuCut(menu){
-      this.$router.push("/" + menu.encodeId);
+      this.$router.push("/pc/" + menu.encodeId);
     },
     switchLang() {
       let lang = ''
@@ -311,6 +327,12 @@ export default {
   }
 }
 
+@media screen and (min-width: 1200px){
+  .banner{
+    margin: 0 auto;
+  }
+}
+
 
 
 </style>

src/views/header/mobile_herder.vue

@@ -28,145 +28,20 @@
       <el-menu-item index="1">
         <span slot="title">学院首页</span>
       </el-menu-item>
-      <el-submenu index="2">
+      <el-submenu :index="menuIndex+2"  v-for="(menu,menuIndex) in menuData" :key="menuIndex">
         <template slot="title">
-          <span>党群工作</span>
+          <span v-show="!english">{{ menu.title }}</span>
+          <span v-show="english">{{ menu.title }}</span>
         </template>
-        <el-menu-item-group>
+        <el-submenu :index="menuIndex +'-'+itemIndex" v-for="(item,itemIndex) in menu.children" :key="itemIndex" >
-          <template slot="title">分组一</template>
+          <template v-show="!english" slot="title">{{item.title}}</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
+          <template v-show="english"  slot="title">{{item.englishTitle}}</template>
-          <el-menu-item index="1-2">选项2</el-menu-item>
+          <el-menu-item v-for="(chile ,chileIndex) in item.children" :key="chileIndex" :index="menuIndex +'-'+itemIndex +'-' +chileIndex" @click="clickMenu(chile,item)">
-        </el-menu-item-group>
+            <span v-show="!english">{{ chile.title }}</span>
-        <el-menu-item-group title="分组2">
+            <span v-show="english">{{ chile.title }}</span>
-          <el-menu-item index="1-3">选项3</el-menu-item>
+          </el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-submenu index="3">
-        <template slot="title">
-          <span>师资队伍</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="4">
-        <template slot="title">
-          <span>教育教学</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="5">
-        <template slot="title">
-          <span>科学研究</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="6">
-        <template slot="title">
-          <span>学科建设</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="7">
-        <template slot="title">
-          <span>学生工作</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="8">
-        <template slot="title">
-          <span>校友工作</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-submenu index="9">
-        <template slot="title">
-          <span>国际化</span>
-        </template>
-        <el-menu-item-group>
-          <template slot="title">分组一</template>
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
-        </el-menu-item-group>
-        <el-menu-item-group title="分组2">
-          <el-menu-item index="1-3">选项3</el-menu-item>
-        </el-menu-item-group>
-        <el-submenu index="1-4">
-          <template slot="title">选项4</template>
-          <el-menu-item index="1-4-1">选项1</el-menu-item>
-        </el-submenu>
-      </el-submenu>
-      <el-menu-item index="10">
-        <span slot="title">资料下载</span>
-      </el-menu-item>
     </el-menu>
   </el-drawer>
 </div>
@@ -174,20 +49,41 @@
 </template>
 
 <script>
+import {getNavigation, getNode} from "@/api";
+
+import {handleTree} from "@/utils/ebts";
+
 export default {
   name: "mobile_herder",
   data() {
     return {
       drawer: false,
       direction: 'ltr',
+      english : true,
+      mobile:document.documentElement.clientWidth <=992,
+      menuData:[],
     };
   },
+  created() {
+    if (this.mobile){
+      getNavigation({}).then(res=>{
+        this.menuData = res.data
+        sessionStorage.setItem("menu",JSON.stringify(res.data))
+      })
+    }
+  },
   methods: {
+    clickMenu(menu,parent){
+      this.drawer = false
+      this.$router.push("/mobile/" +parent.encodeId+"/"+menu.encodeId);
+    },
     switchLang() {
       let lang = ''
       if (this.$i18n.locale === 'en') {
         lang = 'cn'
+        this.english = false;
       } else {
+        this.english = true;
         lang = 'en'
       }
       this.$i18n.locale = lang;

src/views/index/components/news_center.vue

@@ -55,7 +55,7 @@
       <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
         <el-row class="news">
           <el-col v-for="(news,index) in newsDate" :key="index" :xs="12" :sm="12" :md="12" :lg="6" :xl="6" >
-            <div class="news_context">
+            <div class="news_context"  @click="getArticle(news)">
               <div class="news_context_img">
                 <img :src="news.imgurl" alt="">
               </div>
@@ -86,14 +86,16 @@
 </template>
 
 <script>
-import {banner, getArticleList} from "@/api";
+import {article, banner, getArticleList, info} from "@/api";
+import {getParentNode} from "@/utils/sist";
 
 export default {
   name: "news_center",
   data(){
     return{
       newsDate:[],
-      bannerDate:[]
+      bannerDate:[],
+      width: document.documentElement.clientWidth>992,
     }
   },
   created() {
@@ -110,6 +112,16 @@ export default {
         this.newsDate = res.rows
       })
     },
+    getArticle(news){
+      info(news.id).then(res=>{
+        let info = getParentNode(res.data.encodeId)
+        if (this.width){
+          this.$router.push("/pc/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
+        }else {
+          this.$router.push("/mobile/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
+        }
+      })
+    },
     getBanner(){
       banner("NEd5n92EMIpyyBslaNqsRgE").then(res=>{
         this.bannerDate = res.data

src/views/index/components/scientific_research_trends.vue

@@ -31,6 +31,7 @@
       <el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
         <el-row>
           <el-col v-for="(item,index) in scientificData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <div @click="getArticle(item)">
             <el-row class="scientific_context_text">
               <el-col :span="2" class="img">
                 <img v-if="index == 0" src="@/assets/index/scientific_research_trends/sy_icon_bh1.png" alt="">
@@ -54,6 +55,7 @@
               <hr v-if="index < 8" style="border: 0.1rem solid #E6E6E6;">
               <hr v-if="!width && index == 8" style="border: 0.1rem solid #E6E6E6;">
             </div>
+            </div>
           </el-col>
         </el-row>
       </el-col>
@@ -89,6 +91,7 @@
       <el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
         <el-row>
           <el-col v-for="(item,index) in academiaData" :key="index" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+            <div @click="getArticle(item)">
             <el-row class="academia_context_text">
               <el-col :span="2" class="img"><img src="@/assets/index/scientific_research_trends/sy_icon_b1.png" alt="">
               </el-col>
@@ -101,6 +104,7 @@
               <hr v-if="index < 4" style="border: 0.1rem solid #E6E6E6;">
               <hr v-if="!width && index == 4" style="border: 0.1rem solid #E6E6E6;">
             </div>
+            </div>
           </el-col>
         </el-row>
       </el-col>
@@ -124,14 +128,15 @@
 </template>
 
 <script>
-import {getArticleList} from "@/api";
+import {getArticleList, info} from "@/api";
 import {parseTime} from '@/utils/ebts'
+import {getParentNode} from "@/utils/sist";
 
 export default {
   name: "scientific_research_trends",
   data() {
     return {
-      width: document.documentElement.clientWidth>=992,
+      width: document.documentElement.clientWidth>992,
       scientificData: [],
       academiaData: [],
     }
@@ -150,6 +155,16 @@ export default {
         this.scientificData = res.rows
       })
     },
+    getArticle(news){
+      info(news.id).then(res=>{
+        let info = getParentNode(res.data.encodeId)
+        if (this.width){
+          this.$router.push("/pc/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
+        }else {
+          this.$router.push("/mobile/" + info.second.encodeId +"/" +info.three.encodeId+"?id="+news.id);
+        }
+      })
+    },
     getAcademiaList() {
       getArticleList({
         type: "KBwgShsEiDolV91qmaWdWJc",
@@ -206,6 +221,7 @@ export default {
     }
 
     .text {
+      cursor: pointer;
       margin-left: 1rem;
       font-size: 1.8rem;
       font-weight: 500;
@@ -258,6 +274,7 @@ export default {
     }
 
     .text {
+      cursor: pointer;
       margin-left: 1rem;
       font-size: 1.8rem;
       font-weight: 500;

src/views/index/components/teaching_student.vue

@@ -85,7 +85,7 @@ export default {
   name: "teaching_student",
   data(){
     return{
-      width:document.documentElement.clientWidth>=992,
+      width:document.documentElement.clientWidth>992,
       listData:[]
     }
   },

src/views/mobile/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <div class="mobile">
+    <el-row>
+      <el-col :span="24">
+        <!--首页图片-->
+        <div class="top">
+          <span v-if="bgImage != null">
+            <img :src="bgImage" alt="">
+          </span>
+          <span v-if="bgImage == null">
+            <img src="@/assets/school_profile/bj123.png" alt="">
+          </span>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row>
+      <!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
+      <!--  <div class="grid-content"></div>-->
+      <!--</el-col>-->
+      <el-col :span="22" :offset="1">
+        <el-row>
+          <el-col>
+            <div class="tab">
+              <router-link to="/">首页</router-link>
+              <span> > </span>
+              <router-link to="">{{ crumbs.one.title }}</router-link>
+              <span> > </span>
+              <span style="color: #1956BC;font-size: 1.4rem">{{ crumbs.two.title }}</span>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col>
+            <Introduction :value="contextData" v-if="type == 1"/>
+            <List :value="contextData" v-if="type == 2"/>
+            <DireData :value="contextData" v-if="type == 3"/>
+            <Details :value="detailsData" v-if="type == null"/>
+          </el-col>
+        </el-row>
+
+
+      </el-col>
+      <!--<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">-->
+      <!--  <div class="grid-content"></div>-->
+      <!--</el-col>-->
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getNode, crumbs, article} from "@/api";
+import Introduction from '@/views/content/components/Introduction.vue'
+import List from '@/views/content/components/list.vue'
+import DireData from '@/views/content/components/dire_data.vue'
+import Details from '@/views/content/components/details.vue'
+import {handleTree} from "@/utils/ebts";
+import {getParentNode} from "@/utils/sist";
+
+export default {
+  name: "index",
+  components: {
+    Introduction,
+    List,
+    DireData,
+    Details,
+  },
+  data() {
+    return {
+      width: document.documentElement.clientWidth,
+      navId: null,
+      navList: [],
+      showIndex: 0,
+      contextData: {},
+      type: 0,
+      bgImage: null,
+      crumbs: {
+        "two": {
+          "title": "学院领导",
+        },
+        "one": {
+          "title": "学院概况",
+        }
+      },
+      menuData: {},
+      detailsData: {}
+    }
+  },
+  watch: {
+    $route(to, from) {
+      let arcId = this.$route.params && this.$route.query.id
+      console.log(arcId)
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      } else {
+        this.secondId = this.$route.params && this.$route.params.secondId;
+        this.navId = this.$route.params && this.$route.params.navId;
+        this.menuData = getParentNode(this.navId)
+        this.getContent()
+      }
+    }
+  },
+  created() {
+    this.secondId = this.$route.params && this.$route.params.secondId;
+    this.navId = this.$route.params && this.$route.params.navId;
+    this.menuData = getParentNode(this.navId)
+    crumbs(this.secondId).then(res => {
+      this.crumbs = res.data
+    })
+    let arcId = this.$route.params && this.$route.query.id
+    if (arcId != undefined) {
+      this.getContext(arcId)
+    } else {
+      this.getContent()
+    }
+  },
+  methods: {
+    getContext(arcId) {
+      article(arcId).then(res => {
+        console.log(res);
+        this.detailsData = res.data.data
+        this.type = null
+      })
+    },
+    getContent() {
+      let menu = this.menuData.three
+      this.type = menu.type
+      this.contextData = null
+      this.bgImage = menu.link
+      let data = null
+      if (this.type == 2) {
+        data = {
+          id: menu.encodeId,
+          pageNum: 1,
+          pageSize: 4
+        }
+      } else {
+        data = {
+          id: menu.encodeId,
+        }
+      }
+      getNode(data).then(res => {
+        if (this.type == 2) {
+          this.contextData = {
+            data: res.rows,
+            total: res.total,
+            pageNum: data.pageNum,
+            navId: this.navId,
+            secondId: this.secondId,
+          }
+        } else if (this.type == 1) {
+          this.contextData = res.data
+        } else if (this.type == 3) {
+          this.contextData = handleTree(res.data, "id", "pid", null, null)
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.top {
+  img {
+    width: 100%;
+  }
+}
+
+.left_lab {
+  margin-left: 4rem;
+  width: 22rem;
+  height: 48rem;
+  background: #1956BC;
+  border-radius: 0rem 0rem 2rem 0rem;
+  position: relative;
+
+  .lab {
+    font-size: 1.6rem;
+    position: absolute;
+    left: 4.8rem;
+    top: 5rem;
+    width: 19rem;
+    margin-bottom: 3rem;
+    background: #FFFFFF;
+    box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
+    border-radius: 0rem 0rem 2.5rem 2rem;
+
+    .lab_list:last-child {
+      border: none;
+    }
+
+    .lab_div {
+      border-bottom: 0.1rem solid #94BCFF !important;
+      margin-left: 1rem;
+    }
+
+    .lab_div:last-child {
+      border-bottom: none !important;
+      padding-bottom: 1.5rem;
+    }
+
+    .lab_list {
+      cursor: pointer;
+      text-align: center;
+      width: 18rem;
+      height: 8rem;
+      clear: left;
+      line-height: 8rem;
+
+      .lab_img {
+        margin-top: .2rem;
+        float: left;
+        width: 1.4rem;
+        height: 1.4rem;
+        display: none;
+        margin-left: 4rem;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .lab_title {
+        color: #1956BC;
+        float: left;
+        margin-left: 6rem;
+      }
+    }
+
+    .lab_select {
+      background: #94BCFF;
+
+      .lab_img {
+        display: block;
+      }
+
+      .lab_title {
+        color: #FFFFFF;
+        margin-left: .4rem;
+      }
+    }
+  }
+}
+
+.tab {
+  margin-left: 1.9rem;
+  margin-top: 1.5rem;
+  font-weight: 400;
+
+  a {
+    text-decoration: none;
+    font-size: 1.4rem !important;
+    color: #3C3C3C;
+  }
+}
+
+@media screen and (max-width: 980px) {
+  .left_lab {
+    margin-left: 3rem;
+    width: 16.5rem;
+    height: 36rem;
+
+    border-radius: 0rem 0rem 1rem 0rem;
+
+    .lab {
+      left: 3.6rem;
+      top: 3.75rem;
+      width: 14.25rem;
+      margin-bottom: 2.25rem;
+      border-radius: 0rem 0rem 1.2rem 1rem;
+
+      .lab_list {
+        margin-left: .75rem;
+        width: 13.5rem;
+        height: 6rem;
+        line-height: 6rem;
+
+        .lab_img {
+          margin-top: .1rem;
+          width: 1.05rem;
+          height: 1.05rem;
+          display: none;
+          margin-left: 3rem;
+        }
+
+        .lab_title {
+          margin-left: 1.5rem;
+        }
+      }
+
+    }
+  }
+}
+</style>

src/views/school_profile/index.vue

@@ -13,7 +13,7 @@
       <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
         <div class="grid-content"></div>
       </el-col>
-      <el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
+      <el-col v-show="width>992" :md="6" :lg="6" :xl="4">
         <div class="left_lab">
           <div class="lab">
             <div class="lab_list lab_select">
@@ -131,7 +131,7 @@ export default {
     }
   },
   // created() {
-  //   alert(this.width>=992)
+  //   alert(this.width>992)
   // }
 }
 </script>

src/views/teaching_staff/index.vue

@@ -13,7 +13,7 @@
       <el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
         <div class="grid-content"></div>
       </el-col>
-      <el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
+      <el-col v-show="width>992" :md="6" :lg="6" :xl="4">
         <div class="left_lab">
           <div class="lab">
             <div class="lab_list lab_select">