clay commit : 小修改

Reviewed-on: http://git.hchyun.com/feashow/sist_web/pulls/41

.env.development

@@ -3,8 +3,8 @@ ENV = 'development'
 
 # EBTS/开发环境
 #VUE_APP_BASE_API = '/dev-api'
-VUE_APP_BASE_API = 'http://192.168.101.4:8085/dev-api'
-#VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
+#VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
+VUE_APP_BASE_API = '/dev-api'
 SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
 #VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'
 

.env.production

@@ -3,5 +3,4 @@ ENV = 'production'
 
 # EBTS/生产环境
 #VUE_APP_BASE_API = '/prod-api'
-#VUE_APP_BASE_API = 'http://192.168.190.67/dev-api'
-VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
+VUE_APP_BASE_API = '/dev-api'

README.md

@@ -29,4 +29,24 @@ npm install --registry=https://registry.npm.taobao.org
 ### 启动服务
 ```
 npm run dev
-```
+```
+
+
+
+
+
+1. title上间距太大,更紧凑一点
+2. 通知公告调整到4个, 第4个永远写死
+
+
+
+
+
+
+
+
+
+
+
+
+

package-lock.json

@@ -1786,12 +1786,50 @@
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
         "big.js": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
           "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
           "dev": true
         },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "css-select": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
@@ -1845,6 +1883,13 @@
           "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
           "dev": true
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "html-webpack-plugin": {
           "version": "3.2.0",
           "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz",
@@ -1928,6 +1973,16 @@
             "ansi-regex": "^2.0.0"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "util.promisify": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz",
@@ -1937,6 +1992,53 @@
             "define-properties": "^1.1.2",
             "object.getownpropertydescriptors": "^2.0.3"
           }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          },
+          "dependencies": {
+            "big.js": {
+              "version": "5.2.2",
+              "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+              "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+              "dev": true,
+              "optional": true
+            },
+            "emojis-list": {
+              "version": "3.0.0",
+              "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+              "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+              "dev": true,
+              "optional": true
+            },
+            "json5": {
+              "version": "2.2.1",
+              "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
+              "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+              "dev": true,
+              "optional": true
+            },
+            "loader-utils": {
+              "version": "2.0.2",
+              "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+              "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+              }
+            }
+          }
         }
       }
     },
@@ -12262,87 +12364,6 @@
         }
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

src/api/index.js

@@ -30,6 +30,13 @@ export function getNode(data) {
     data:data
   })
 }
+export function getNodeNav(data) {
+  return request({
+    url: '/web/nodeNav',
+    method: 'post',
+    data:data
+  })
+}
 // 获取文章列表
 export function getArticleList(data) {
   return request({

src/i18n/langs/cn.js

@@ -22,14 +22,20 @@ const cn = {
     'teaching_work': '教学工作',
 
     'data_information': '数据中的信息',
+    'notice': '通知公告',
+    'scientific': '科学研究',
+    'undergraduate_education': '本科教育',
+    'postgraduate_education': '研究生教育',
     'employees': '职工人数',
     'number_students': '在校学生人数',
     'graduate_tutor': '研究生导师',
     'research_team': '科研团队',
-    'high_level_talents': '高层次人才',
-    'major_projects': '重大项目',
+    'high_level_talents': '省部级以上高层次人才',
+    'major_projects': '国家级重大重点项目',
     'contact_us': '联系我们',
-    'adress': '犀浦校区地址:中国四川省成都市高新区西部园区西南交通大学信息科学与技术学院',
+    'person': '人',
+    'pics': '个',
+    'adress': '犀浦校区地址:中国四川省成都市郫都区犀安路 999 号西南交通大学信息科学与技术学院',
     'code': '邮政编码:611756',
     'tel': '电话:+86 28 66366709(行政)',
     'copyright': '版权所有◎2015西南交通大学信息科学与技术学院. All rights reserved.意见反馈',

src/i18n/langs/en.js

@@ -20,16 +20,22 @@ const en = {
     'teaching_work': 'Teaching work',
 
     'data_information': 'DATA INFORMATION',
-    'employees': 'Employees',
-    'number_students': 'Number of students',
-    'graduate_tutor': 'Graduate tutor',
-    'research_team': 'Research team',
-    'high_level_talents': 'High level talents',
+    'notice': 'Notice',
+    'scientific': 'Scientific',
+    'undergraduate_education': 'Undergraduate education',
+    'postgraduate_education': 'Postgraduate education',
+    'employees': 'Faculty Members',
+    'number_students': 'Internal Students',
+    'graduate_tutor': 'Tutors',
+    'research_team': 'Scientific Research Team',
+    'high_level_talents': 'Outstanding Talents',
     'major_projects': 'Major projects',
-    'contact_us': 'CONTACT US',
-    'adress': 'Add: 01606#, 01608#, 01614#, School of Information Science and Technology,Southwest Jiaotong University, No.111, Erhuanlu Beiyiduan Chengdu, 610031 P.R.China',
-    'code': 'E-mail: scce@home.swjtu.edu.cn',
-    'tel': 'Tel: +86 28 66366709; +86 28 66366741   |   Fax: +86 28 87600743',
+    'contact_us': '',
+    'person': '',
+    'pics': '',
+    'adress': '',
+    'code': '',
+    'tel': '',
     'copyright': 'Copyright © 2014 School of Information Science and Technology, SWJTU. All rights reserved.   Feedback',
     'chinese_site': 'Southwest Jiaotong University(中文)',
     'english_site': 'Southwest Jiaotong University(ENGLISH)',

src/main.js

@@ -9,6 +9,17 @@ import 'element-ui/lib/theme-chalk/display.css';
 import en from 'element-ui/lib/locale/lang/en'
 import cn from 'element-ui/lib/locale/lang/zh-CN'
 
+//要添加的代码
+router.beforeEach((to, from, next) => {
+  // chrome
+  document.body.scrollTop = 0
+  // firefox
+  document.documentElement.scrollTop = 0
+  // safari
+  window.pageYOffset = 0
+  next()
+})
+
 i18n.mergeLocaleMessage('en', en)
 i18n.mergeLocaleMessage('zh', cn)
 

src/router/index.js

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
+const originalPush = VueRouter.prototype.push
+
+VueRouter.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
 
 const routes = [
   // {

src/test.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <style>
+  </style>
+  <title>Document</title>
+</head>
+<body>
+</body>
+</html>
+

src/utils/sist.js

@@ -15,7 +15,6 @@ export function setThis(that) {
 export function getParentNode(id) {
   try {
     let menuList = JSON.parse(sessionStorage.getItem("menu"));
-    console.log(menuList,"menuList")
     for (let menu of menuList) {
       for (let child of menu.children) {
         if (id == child.encodeId) {
@@ -43,6 +42,25 @@ export function getParentNode(id) {
   }
 }
 
+
+export function getNodeMenu(id) {
+  try {
+    let menuList = JSON.parse(sessionStorage.getItem("menu"));
+    for (let menu of menuList) {
+      for (let child of menu.children) {
+        for (let item of child.children) {
+          if (id == item.encodeId) {
+            return item
+          }
+        }
+      }
+    }
+    return null
+  } catch (e) {
+    return null
+  }
+}
+
 export function setAppLanguage() {
   let lang = sessionStorage.getItem("lang");
   if (lang != null) {
@@ -80,22 +98,35 @@ export function toArticle(news, width) {
     if (info == null) {
       return
     }
+    let routeData = null;
     if (info.three == null) {
       if (width) {
-        vm.$router.push("/pc/" + info.second.encodeId + "?id=" + news.id + "&type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+        routeData = "/pc/" + info.second.encodeId + "?id=" + news.id + "&type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
       } else {
-        vm.$router.push("/mobile/" + info.second.encodeId + "?id=" + news.id + "&type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+        routeData = "/mobile/" + info.second.encodeId + "?id=" + news.id + "&type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
       }
     } else {
+      console.log(info.three, "toArticle,info.three")
       if (width) {
-        vm.$router.push("/pc/" + info.second.encodeId + "/" + info.three.encodeId + "&id=" + news.id + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+        routeData = "/pc/" + info.second.encodeId + "/" + info.three.encodeId + "?id=" + news.id + "&lang=" + sessionStorage.getItem("lang");
       } else {
-        vm.$router.push("/mobile/" + info.second.encodeId + "/" + info.three.encodeId + "&id=" + news.id + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+        routeData = "/mobile/" + info.second.encodeId + "/" + info.three.encodeId + "?id=" + news.id + "&lang=" + sessionStorage.getItem("lang");
       }
     }
+    linkTo(routeData)
   })
 }
 
+function linkTo(routeData) {
+  let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+  if (userAgent.indexOf("Safari") > -1) {
+    window.location.href = window.location.origin + routeData
+  } else {
+    window.open(routeData.href, "_blank")
+  }
+}
+
+
 export function lookMoreComment(item, width) {
   info(item.id).then(res => {
     let info = null
@@ -132,19 +163,23 @@ export function lookMoreFixedComment(id, width) {
   }
   if (info == null) {
     return
-  }
-  if (info.three == null) {
-    if (width) {
-      vm.$router.push("/pc/" + info.second.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+    let routeData = null;
+    if (info.three == null) {
+      if (width) {
+        routeData = "/pc/" + info.second.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
+      } else {
+        routeData = "/mobile/" + info.second.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
+      }
     } else {
-      vm.$router.push("/mobile/" + info.second.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
-    }
-  } else {
-    if (width) {
-      vm.$router.push("/pc/" + info.second.encodeId + "/" + info.three.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
-    } else {
-      vm.$router.push("/mobile/" + info.second.encodeId + "/" + info.three.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang"));
+      if (width) {
+        routeData = "/pc/" + info.second.encodeId + "/" + info.three.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
+      } else {
+        routeData = "/mobile/" + info.second.encodeId + "/" + info.three.encodeId + "?type=" + info.second.type + "&lang=" + sessionStorage.getItem("lang");
+      }
     }
+    linkTo(routeData)
+    // window.location.href = window.location.origin + routeData.href
+    // window.open(window.location.origin + routeData.href, "_blank")
   }
 }
 

src/views/anchor.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-  <Index v-model="change"></Index>
+  <Index/>
 </div>
 </template>
 
@@ -8,87 +8,88 @@
 import Index from '@/views/index/index'
 export default {
   name: "anchor",
-  components:{
+  components: {
     Index
   },
-  data() {
-    return {
-      screenWeight: 0,        // 屏幕宽度
-      screenHeight: 0,        // 屏幕高度
-      index: 1,               // 用于判断翻页
-      curIndex: 1,            // 当前页的index
-      startTime: 0,           // 翻屏起始时间
-      endTime: 0,             // 上一次翻屏结束时间
-      nowTop: 0,              // 翻屏后top的位置
-      pageNum: 2,             // 一共有多少页
-      main: Object,
-      obj: Object,
-      page2:Object,
-      change:0,
-    }
-  },
-  mounted() {
-    // 浏览器兼容
-    if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
-      document.addEventListener("DOMMouseScroll", this.scrollFun, false);
-    } else if (document.addEventListener) {
-      document.addEventListener("mousewheel", this.scrollFun, false);
-    } else if (document.attachEvent) {
-      document.attachEvent("onmousewheel", this.scrollFun);
-    } else {
-      document.onmousewheel = this.scrollFun;
-    }
-  },
-  beforeDestroy() { //及时释放
-    // 浏览器兼容
-    if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
-      document.removeEventListener("DOMMouseScroll", this.scrollFun, false);
-    } else if (document.addEventListener) {
-      document.removeEventListener("mousewheel", this.scrollFun, false);
-    } else if (document.attachEvent) {
-      document.removeEventListener("onmousewheel", this.scrollFun);
-    } else {
-      document.onmousewheel = this.scrollFun;
-    }
-  },
-  methods: {
-    scrollFun(event) {
-      //console.log(this.main,this.page2.offsetTop,this.screenHeight)
-      this.startTime = new Date().getTime();
-      // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
-      // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
-      let delta = event.detail || (-event.wheelDelta);
-      //console.log(delta)
-      // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
-      if ((this.startTime - this.endTime) > 1) {
-        if (delta > 0 && window.pageYOffset < window.innerHeight) {
-      //    // 向下滚动
-      //    this.index = 2;
-      //    this.toPage(this.index);
-          console.log(window.innerHeight + 20);
-          console.log(window.innerWidth/2)
-          window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',})
-        } else if (delta < 0 &&  window.pageYOffset <=  window.innerHeight+200) {
-      //    // 向上滚动
-          window.scrollTo({top: 0, behavior: 'smooth',})
-        }
-      //  // 本次翻页结束，记录结束时间，用于下次判断
-        this.endTime = new Date().getTime();
-      }
-    },
-    // 翻页
-    toPage(index) {
-      if (index<=0){
-        return
-      }
-      if (index != this.curIndex) {
-        let delta = index - this.curIndex;
-        this.nowTop = this.nowTop - delta * this.screenHeight;
-        this.curIndex = index;
-      }
-    }
-  }
 }
+//   data() {
+//     return {
+//       screenWeight: 0,        // 屏幕宽度
+//       screenHeight: 0,        // 屏幕高度
+//       index: 1,               // 用于判断翻页
+//       curIndex: 1,            // 当前页的index
+//       startTime: 0,           // 翻屏起始时间
+//       endTime: 0,             // 上一次翻屏结束时间
+//       nowTop: 0,              // 翻屏后top的位置
+//       pageNum: 2,             // 一共有多少页
+//       main: Object,
+//       obj: Object,
+//       page2:Object,
+//       change:0,
+//     }
+//   },
+//   mounted() {
+//     // 浏览器兼容
+//     if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
+//       document.addEventListener("DOMMouseScroll", this.scrollFun, false);
+//     } else if (document.addEventListener) {
+//       document.addEventListener("mousewheel", this.scrollFun, false);
+//     } else if (document.attachEvent) {
+//       document.attachEvent("onmousewheel", this.scrollFun);
+//     } else {
+//       document.onmousewheel = this.scrollFun;
+//     }
+//   },
+//   beforeDestroy() { //及时释放
+//     // 浏览器兼容
+//     if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
+//       document.removeEventListener("DOMMouseScroll", this.scrollFun, false);
+//     } else if (document.addEventListener) {
+//       document.removeEventListener("mousewheel", this.scrollFun, false);
+//     } else if (document.attachEvent) {
+//       document.removeEventListener("onmousewheel", this.scrollFun);
+//     } else {
+//       document.onmousewheel = this.scrollFun;
+//     }
+//   },
+//   methods: {
+//     scrollFun(event) {
+//       //console.log(this.main,this.page2.offsetTop,this.screenHeight)
+//       this.startTime = new Date().getTime();
+//       // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
+//       // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
+//       let delta = event.detail || (-event.wheelDelta);
+//       //console.log(delta)
+//       // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
+//       if ((this.startTime - this.endTime) > 1) {
+//         if (delta > 0 && window.pageYOffset < window.innerHeight) {
+//       //    // 向下滚动
+//       //    this.index = 2;
+//       //    this.toPage(this.index);
+//           console.log(window.innerHeight + 20);
+//           console.log(window.innerWidth/2)
+//           window.scrollTo({top: window.innerWidth/2, behavior: 'smooth',})
+//         } else if (delta < 0 &&  window.pageYOffset <=  window.innerHeight+200) {
+//       //    // 向上滚动
+//           window.scrollTo({top: 0, behavior: 'smooth',})
+//         }
+//       //  // 本次翻页结束，记录结束时间，用于下次判断
+//         this.endTime = new Date().getTime();
+//       }
+//     },
+//     // 翻页
+//     toPage(index) {
+//       if (index<=0){
+/*        return*/
+//       }
+//       if (index != this.curIndex) {
+//         let delta = index - this.curIndex;
+//         this.nowTop = this.nowTop - delta * this.screenHeight;
+//         this.curIndex = index;
+//       }
+//     }
+//   }
+// }
 </script>
 
 <style scoped>

src/views/content/components/Introduction.vue

@@ -3,8 +3,8 @@
     <el-row>
       <el-col>
         <div class="context">
-          <div class="title">{{value.title}}</div>
-          <div class="text" v-html="value.content"></div>
+          <div v-if="introductionData" class="title">{{ introductionData.title }}</div>
+          <div v-if="introductionData" class="text" v-html="introductionData.content"></div>
         </div>
       </el-col>
     </el-row>
@@ -15,30 +15,45 @@
 export default {
   name: "Introduction",
   props: {
-    value: {
+    introduction: {
       type: Object,
-      default: {
-        title:"12",
-        content:"12"
+      default() {
+        return {
+        }
       },
     },
   },
-  data(){
-    return{}
-  }
+  data() {
+    return {
+      introductionData : this.value
+    }
+  },
+  watch:{
+    introduction(val){
+      this.introductionData = val
+    }
+  },
+  created() {
+    this.value = {
+      title: "12",
+      content: "12"
+    }
+  },
 }
 </script>
 
 <style scoped lang="scss">
-.Introduction{
+.Introduction {
   width: 100%;
 }
+
 .tab {
   margin-left: 1.9rem;
   margin-top: 1.5rem;
   font-weight: 400;
   font-size: 1.4rem !important;
 }
+
 .context {
   margin: 3rem 4rem;
 
@@ -54,7 +69,8 @@ export default {
     margin-top: 2rem;
     font-size: 1.2rem;
     font-weight: 400;
-    color: #3C3C3C;word-break: break-word; /* 文本行的任意字内断开 */
+    color: #3C3C3C;
+    word-break: break-word; /* 文本行的任意字内断开 */
     word-wrap: break-word; /* IE */
     white-space: -moz-pre-wrap; /* Mozilla */
     white-space: -hp-pre-wrap; /* HP printers */
@@ -63,7 +79,7 @@ export default {
     white-space: pre; /* CSS2 */
     white-space: pre-wrap; /* CSS 2.1 */
     white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
-    pre{
+    pre {
       width: 100%;
     }
   }

src/views/content/components/details.vue

@@ -3,7 +3,7 @@
     <el-row>
       <el-col>
         <div class="context">
-          <div class="title">{{ value.title }}</div>
+          <div v-if="value.title !=null && value.title != ''" class="title">{{ value.title }}</div>
           <div class="details_title" v-if="value.isTop=='2'">
             <!--{{value}}-->
             <span>来源: {{getSource()}}</span>

src/views/content/components/dire_data.vue

@@ -1,35 +1,38 @@
 <template>
-<div class="dire_data"  style="background-color:#fff;  margin-top: 3rem;">
+  <div class="dire_data" style="background-color:#fff;  margin-top: 3rem;">
 
-  <el-row v-for="(dire,index) in value" :key="index">
-    <!--正文内容-->
-    <el-col class="context">
-      <el-row class="context_el-row">
-        <el-col :span="2" :offset="1">
+    <el-row v-for="(dire,index) in value" :key="index">
+      <!--正文内容-->
+
+
+      <el-col class="context" :span="23">
+        <!--      <el-row class="context_el-row">-->
+        <!--        <el-col :span="1" :offset="1">-->
+        <!--          <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt=""/>-->
+        <!--        </el-col>-->
+        <!--        <el-col :span="4" class="context_name">{{ dire.name }}</el-col>-->
+        <!--        <el-col :span="16">-->
+        <!--          <hr class="context_hr">-->
+        <!--        </el-col>-->
+        <!--      </el-row>-->
+        <el-row class="context_el-row">
           <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
-        </el-col>
-        <el-col :span="3" class="context_name">{{ dire.name }}</el-col>
-        <el-col :span="16">
-          <hr class="context_hr">
-        </el-col>
+          <div class="context_name">{{ dire.name }}</div>
+          <div class="context_hr"></div>
+        </el-row>
         <el-row v-for="(chile,index) in dire.children" :key="index">
           <el-col class="name" :offset="1" :span="23">
-            {{ chile.name }}<span v-if="chile.children.length>1">({{chile.children.length}}人)</span>
+            {{ chile.name }}
+          </el-col>
+          <el-col class="text" :offset="1" :span="23">
+            <div v-for="(item,index) in chile.children" :key="index" @click="linkClick(item)">
+              {{ item.name }}
+            </div>
           </el-col>
-          <el-row>
-            <el-col class="text" :offset="1" :span="23">
-              <div v-for="(item,index) in chile.children" :key="index">
-                <a style="text-decoration: none" :href="item.link">
-                  {{ item.name }}
-                </a>
-              </div>
-            </el-col>
-          </el-row>
         </el-row>
-      </el-row>
-    </el-col>
-  </el-row>
-</div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
@@ -38,9 +41,9 @@ export default {
   data() {
     return {
       width: document.documentElement.clientWidth
-    }
+    };
   },
-  props:{
+  props: {
     value: {
       type: Array,
       default: [{
@@ -52,43 +55,52 @@ export default {
               {
                 children: [],
                 name: "人员1"
-              },
-            ],
+              }
+            ]
           }
-        ],
-      }],
-    },
+        ]
+      }]
+    }
   },
-}
+  methods: {
+    linkClick(chile) {
+      if (chile.link!=null && chile.link != "" && chile.link != '""'){
+        window.open(chile.link);
+      }
+    }
+  }
+};
 </script>
 
 <style scoped lang="scss">
-
 .context {
   margin: 3rem 2rem;
   padding-bottom: 3rem;
-  //width: 84.3rem;
+  width: 92%;
   background: #FFFFFF;
 
   .context_el-row {
+    display: flex;
     margin-top: 2rem;
 
     .context_img {
       width: 2.2rem;
+      margin-left: 3%;
     }
 
     .context_name {
       font-size: 1.8rem;
-      font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #1956BC;
-      line-height: 2.2rem;
+      padding: 0 20px;
+      white-space:nowrap;
     }
 
     .context_hr {
-      line-height: 2.2rem;
       margin-top: 1.1rem;
-      border: #1956BC solid 0.1rem;
+      background-color: #1956BC;
+      width: 100%;
+      height: 2px;
     }
   }
 
@@ -96,18 +108,60 @@ export default {
     margin-top: 2rem;
     font-size: 1.6rem;
     font-weight: 600;
-    color: #1956BC;
+    //color: #1956BC;
   }
+
   .text {
     font-size: 1.4rem;
-    color: #3C3C3C;
+    //color: #3C3C3C;
     clear: left;
+
     div {
       float: left;
       margin-top: .4rem;
-      width: 7.4%;
+      cursor: pointer;
+      //width: 7.4%;
+      margin-right: 1.5rem;
+      color: #000000;
+    }
+
+    div:hover {
+      color: #1956BC;
     }
   }
 }
 
+
+//.context {
+//  margin: 3rem 2rem;
+//  padding-bottom: 3rem;
+//width: 84.3rem;
+//background: #FFFFFF;
+
+//.context_el-row {
+//  margin-top: 2rem;
+//
+//  .context_img {
+//    width: 2.2rem;
+//  }
+//
+//  .context_name {
+//    font-size: 1.8rem;
+//    font-family: PingFangSC-Medium, PingFang SC;
+//    font-weight: 500;
+//    color: #1956BC;
+//    line-height: 2.2rem;
+//  }
+//
+//  .context_hr {
+//    line-height: 2.2rem;
+//    margin-top: 1.1rem;
+//    border: #1956BC solid 0.1rem;
+//    background-color: #1956BC;
+//  }
+//}
+
+
+//}
+
 </style>

src/views/content/components/dire_data_tow.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="dire_data"  style="background-color:#fff;  margin-top: 3rem;">
+    <el-row v-for="(dire,index) in value" :key="index">
+      <!--正文内容-->
+      <el-col class="context" :span="23">
+        <el-row class="context_el-row">
+<!--          <el-col :span="1" :offset="1">-->
+<!--            <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">-->
+<!--          </el-col>-->
+<!--          <el-col :span="4" class="context_name">{{ dire.name }}</el-col>-->
+<!--          <el-col :span="16">-->
+<!--            <hr class="context_hr">-->
+<!--          </el-col>-->
+          <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
+          <div class="context_name">{{ dire.name }}</div>
+          <div class="context_hr"></div>
+        </el-row>
+        <el-row>
+          <el-col :offset="1" :span="22">
+            <div class="name" v-for="(chile,index) in dire.children" :key="index" @click="linkClick(chile)">
+              {{ chile.name }}
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dire_data_tow",
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
+  props:{
+    value: {
+      type: Array,
+      default: [{
+        name: "学院",
+        children: [
+          {
+            name: "办公室",
+            children: [
+              {
+                children: [],
+                name: "人员1"
+              },
+            ],
+          }
+        ],
+      }],
+    },
+  },
+  methods:{
+    linkClick(chile){
+      if (chile.link!=null && chile.link != "" && chile.link != '""'){
+        window.open(chile.link)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.context {
+  margin: 2rem 2rem;
+  padding-bottom: 3rem;
+  width: 92%;
+  background: #FFFFFF;
+  //padding-bottom: 3rem;
+  //width: 84.3rem;
+  //background: #FFFFFF;
+  .context_el-row {
+    display: flex;
+    margin-top: 2rem;
+
+    .context_img {
+      width: 2.2rem;
+      margin-left: 3%;
+    }
+
+    .context_name {
+      font-size: 1.8rem;
+      font-weight: 500;
+      color: #1956BC;
+      padding: 0 20px;
+      white-space:nowrap;
+    }
+
+    .context_hr {
+      margin-top: 1.1rem;
+      background-color: #1956BC;
+      width: 100%;
+      height: 2px;
+    }
+  }
+
+  //.context_el-row {
+  //  margin-top: 2rem;
+  //
+  //  .context_img {
+  //    width: 2.2rem;
+  //  }
+  //
+  //  .context_name {
+  //    font-size: 1.8rem;
+  //    font-family: PingFangSC-Medium, PingFang SC;
+  //    font-weight: 500;
+  //    color: #1956BC;
+  //    line-height: 2.2rem;
+  //  }
+  //
+  //  .context_hr {
+  //    line-height: 2.2rem;
+  //    margin-top: 1.1rem;
+  //    border: #1956BC solid 0.1rem;
+  //    background-color: #1956BC;
+  //  }
+  //}
+
+  .name {
+    margin-top: 2rem;
+    font-size: 1.6rem;
+    font-weight: 600;
+    display: inline-block;
+    margin-right: 1.5rem;
+    cursor: pointer;
+    color: #000000;
+  }
+  .name:hover {
+    color: #1956BC;
+  }
+}
+
+</style>

src/views/content/components/file_list.vue

@@ -20,15 +20,15 @@
     </div>
     <div class="list">
       <!--<el-row>-->
-      <div class="file" v-for="(file ,index) in value.data" :key="index">
-        <div class="file_name">
+      <div class="article" v-for="(file ,index) in value.data" :key="index">
+        <div class="article_name">
             <span class="span">
               <img class="def_img" src="@/assets/file_list/xz_icon_xz.png">
               <img class="hover_img" src="@/assets/file_list/xz_icon_xzls.png">
             </span>
           <a :href="file.fileAddr">{{ file.fileName }}</a>
         </div>
-        <div class="file_time">
+        <div class="article_time">
           {{ getDateTime(file.createTime) }}
         </div>
 
@@ -43,8 +43,8 @@
     </div>
     <el-row>
       <el-col class="pagination_p">
-        <el-pagination class="pagination"
-                       :small="small"
+        <el-pagination v-if="!smallType"
+                       :small="!smallType"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="value.pageNum"
@@ -52,6 +52,14 @@
                        layout="prev, pager,next,sizes,  jumper"
                        :total="value.total">
         </el-pagination>
+        <el-pagination v-if="smallType"
+                       :small="smallType"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="value.pageNum"
+                       layout="prev ,pager,next"
+                       :total="value.total">
+        </el-pagination>
       </el-col>
     </el-row>
   </div>
@@ -66,8 +74,8 @@ export default {
     value: {
       type: Object,
       default() {
-        return{
-          data:[],
+        return {
+          data: [],
           pageNum: 1,
           pageSize: 10,
         }
@@ -77,13 +85,19 @@ export default {
   data() {
     return {
       width: document.documentElement.clientWidth,
-      small: document.documentElement.clientWidth <= 992,
+      smallType: document.documentElement.clientWidth <= 992,
       query: '',
-      pageSize:value.pageSize
+      pageSize: value.pageSize
     }
   },
+  created() {
+    this.smallType = document.documentElement.clientWidth <= 992
+  },
   methods: {
     getDateTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
       let time = new Date(date);
       let year = time.getFullYear();
       let month = time.getMonth() + 1
@@ -125,7 +139,7 @@ export default {
       if (this.type != null && this.type != 0) {
         data.id = this.value.secondId
       }
-      console.log(data,"data")
+      console.log(data, "data")
       getNode(data).then(res => {
         this.value.data = res.rows
         this.value.total = res.total
@@ -150,13 +164,18 @@ export default {
   padding-top: 5rem;
   font-size: 1.6rem;
 
-  .file {
+  .article {
     color: #757575;
     clear: both;
     padding: 2rem 3rem;
 
-    .file_name {
+    .article_name {
       float: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 1; //显示的行
 
       .span {
         padding-right: 1rem;
@@ -175,7 +194,7 @@ export default {
       }
     }
 
-    .file_time {
+    .article_time {
       float: right;
     }
 
@@ -184,7 +203,7 @@ export default {
     }
   }
 
-  .file:hover {
+  .article:hover {
     //background-color: gray;
     color: #1956BC;
 
@@ -193,7 +212,7 @@ export default {
       font-weight: bold;
     }
 
-    .file_name {
+    .article_name {
       .def_img {
         display: none;
       }

src/views/content/components/list.vue

@@ -21,8 +21,8 @@
     </div>
     <div>
       <!--正文内容-->
-      <div class="context">
-        <div v-for="(item,index) in value.data" class="tw">
+      <div class="context" v-if="listData">
+        <div v-for="(item,index) in listData.data" class="tw">
           <el-row>
             <el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
               <div class="tw_time">
@@ -39,7 +39,8 @@
                 <div class="tw_context_title" @click="getContext(item)">
                   {{ item.title }}
                 </div>
-                <div class="tw_context_text" v-html="item.content"></div>
+                <div v-if="item.description" class="tw_context_text">{{ item.description }}</div>
+                <div v-if="!item.description" class="tw_context_text" v-html="item.content"></div>
               </div>
             </el-col>
             <el-col v-show="width>992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
@@ -48,21 +49,28 @@
               </div>
             </el-col>
           </el-row>
-          <hr v-if="index != value.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
+          <hr v-if="index != listData.data.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
         </div>
       </div>
 
       <el-row>
         <el-col class="pagination_p">
-          <el-pagination class="pagination"
-                         :small="small"
+          <el-pagination v-if="!small"
+                         :small="!small"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
-                         :current-page.sync="value.pageNum"
+                         :current-page.sync="listData.pageNum"
+                         :page-size="listData.pageSize"
                          :page-sizes="[5,10,20, 30, 50, 100]"
-                         :page-size="4"
-                         layout="prev, pager, next,sizes, jumper"
-                         :total="value.total">
+                         layout="prev, pager,next,sizes,  jumper"
+                         :total="listData.total">
+          </el-pagination>
+          <el-pagination v-if="small"
+                         :small="small"
+                         @current-change="handleCurrentChange"
+                         :current-page.sync="listData.pageNum"
+                         layout="prev ,pager,next"
+                         :total="listData.total">
           </el-pagination>
         </el-col>
       </el-row>
@@ -76,24 +84,30 @@ import {getNode} from "@/api";
 export default {
   name: "list",
   props: {
-    value: {
+    list: {
       type: Object,
       default() {
         return {
           data: [],
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 5,
         }
       },
     },
   },
   data() {
     return {
+      listData: this.list,
       width: document.documentElement.clientWidth,
       small: document.documentElement.clientWidth <= 992,
       query: '',
     }
   },
+  watch: {
+    list(val) {
+      this.listData = val
+    }
+  },
   methods: {
     getContext(context) {
       let type = this.$route.query && this.$route.query.type
@@ -101,48 +115,50 @@ export default {
       if (type != null) {
         router = "?id=" + context.id + '&type=' + type + "&lang=" + sessionStorage.getItem("lang")
       } else {
-        router = "/" + this.value.navId + "?id=" + context.id + "&lang=" + sessionStorage.getItem("lang")
+        router = "/" + this.listData.navId + "?id=" + context.id + "&lang=" + sessionStorage.getItem("lang")
       }
+      let routeData = null;
       if (this.width <= 992) {
-        this.$router.push("/mobile/" + this.value.secondId + router);
+        routeData = this.$router.resolve({path: "/mobile/" + this.listData.secondId + router});
       } else {
-        this.$router.push("/pc/" + this.value.secondId + router);
+        routeData = this.$router.resolve({path: "/pc/" + this.listData.secondId + router});
       }
+      window.open(routeData.href, "_blank")
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
       if (val === -1) {
-        this.value.pageSize = 1
+        this.listData.pageSize = 1
       } else {
-        this.value.pageSize = val
+        this.listData.pageSize = val
       }
       this.getData()
     },
     handleCurrentChange(val) {
       if (val === -1) {
-        this.value.pageNum = 1
+        this.listData.pageNum = 1
       } else {
-        this.value.pageNum = val
+        this.listData.pageNum = val
       }
       this.getData()
     },
     getData() {
       let data = {
         title: this.query,
-        id: this.value.navId,
-        pageNum: this.value.pageNum,
-        pageSize: this.value.pageSize
+        id: this.listData.navId,
+        pageNum: this.listData.pageNum,
+        pageSize: this.listData.pageSize
       }
       this.type = this.$route.query && this.$route.query.type
       if (this.type != null && this.type !== 0) {
-        data.id = this.value.secondId
+        data.id = this.listData.secondId
       } else {
-        console.log(this.value);
+        console.log(this.listData);
       }
-      console.log(data);
+      // console.log(data);
       getNode(data).then(res => {
-        this.value.data = res.rows
-        this.value.total = res.total
+        this.listData.data = res.rows
+        this.listData.total = res.total
       })
     },
     getDay(time) {
@@ -157,15 +173,6 @@ export default {
   }
 }
 </script>
-<style>
-.el-input__inner {
-
-  border-color: #1956BC !important;
-  border-radius: 0 !important;
-  /*line-height: 3.5rem !important;*/
-  /*height: 3.5rem !important;*/
-}
-</style>
 
 <style scoped lang="scss">
 
@@ -284,7 +291,7 @@ export default {
 
 .query {
   //margin: 1rem 0;
-  z-index: 999;
+  z-index: 50;
   width: 30%;
   position: absolute;
   right: 3rem;
@@ -304,7 +311,8 @@ export default {
     width: 80% !important;
   }
   .context {
-    margin-top: 6rem;
+    width: 80% !important;
+    margin-top: 4rem;
   }
 }
 </style>

src/views/content/components/organization.vue

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

src/views/content/components/simple_list.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="article_list" style="background-color:#fff; margin-top: 3rem;">
+    <div class="query">
+      <el-row>
+        <el-col :xs="14" :sm="14" :md="14" :lg="20" :xl="20">
+          <!--<div style="width: 95%;">-->
+          <div>
+            <!--<input class="query_input" v-model="query"/>-->
+            <el-input class="query_input" v-model="query" size="small"
+                      :placeholder="$t('message.placeholder')"></el-input>
+          </div>
+        </el-col>
+        <el-col :xs="10" :sm="10" :md="10" :lg="4" :xl="4" style="float: right">
+          <el-button class="query_button" type="primary" size="small" icon="el-icon-search"
+                     @click="handleCurrentChange(-1)">
+            {{ $t('message.search') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="list">
+      <!--<el-row>-->
+      <div class="article" v-for="(item ,index) in listData.data" :key="index">
+        <el-row>
+          <el-col :span="20">
+            <div class="article_name" @click="getContext(item)">
+              <span class="span">
+                <img class="def_img" src="@/assets/index/scientific_research_trends/huidian@2x.png">
+                <img class="hover_img" src="@/assets/index/scientific_research_trends/sy_icon_b1@2x.png">
+              </span>
+              <!--          <a :href="file.fileAddr">{{ file.fileName }}</a>-->
+              {{ item.title }}
+            </div>
+          </el-col>
+          <el-col :span="4">
+            <div class="article_time">
+              {{ getDateTime(item.publishTime) }}
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <el-row>
+      <el-col class="pagination_p">
+        <el-pagination  v-if="!small"
+                       :small="!small"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="listData.pageNum"
+                       :page-sizes="[10,20, 30, 50, 100]"
+                       layout="prev, pager,next,sizes,  jumper"
+                       :total="listData.total">
+        </el-pagination>
+        <el-pagination v-if="small"
+                       :small="small"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       :current-page.sync="listData.pageNum"
+                       layout="prev ,pager,next"
+                       :total="listData.total">
+        </el-pagination>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getNode} from "@/api";
+
+export default {
+  name: "list",
+  props: {
+    list: {
+      type: Object,
+      default() {
+        return {
+          data: [],
+          pageNum: 1,
+          pageSize: 10,
+        }
+      },
+    },
+  },
+  data() {
+    return {
+      listData : this.list,
+      width: document.documentElement.clientWidth,
+      small: document.documentElement.clientWidth <= 992,
+      query: '',
+    }
+  },
+  watch:{
+    list(val){
+      this.listData = val
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    getDateTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1
+      if (month < 10){
+        month = "0"+month
+      }
+      let day = time.getDate();
+      if (day<10){
+        day = "0"+ day
+      }
+      return year + "-" + month + "-" + day;
+    },
+    getContext(context) {
+      let type = this.$route.query && this.$route.query.type
+      let router = ''
+      if (type != null) {
+        router = "?id=" + context.id + '&type=' + type + "&lang=" + sessionStorage.getItem("lang")
+      } else {
+        router = "/" + this.listData.navId + "?id=" + context.id + "&lang=" + sessionStorage.getItem("lang")
+      }
+      let routeData = null;
+      if (this.width <= 992) {
+        routeData = this.$router.resolve({path: "/mobile/" + this.listData.secondId + router});
+      } else {
+        routeData = this.$router.resolve({path: "/pc/" + this.listData.secondId + router});
+      }
+      window.open(routeData.href,"_blank")
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      if (val === -1) {
+        this.listData.pageSize = 1
+      } else {
+        this.listData.pageSize = val
+      }
+      this.getData()
+    },
+    handleCurrentChange(val) {
+      if (val === -1) {
+        this.listData.pageNum = 1
+      } else {
+        this.listData.pageNum = val
+      }
+      this.getData()
+    },
+    getData() {
+      let data = {
+        title: this.query,
+        id: this.listData.navId,
+        pageNum: this.listData.pageNum,
+        pageSize: this.listData.pageSize
+      }
+      if (this.small){
+        data.pageSize = 20
+      }
+      this.type = this.$route.query && this.$route.query.type
+      if (this.type != null && this.type !== 0) {
+        data.id = this.listData.secondId
+      } else {
+        console.log(this.listData);
+      }
+      // console.log(data);
+      getNode(data).then(res => {
+        this.listData.data = res.rows
+        this.listData.total = res.total
+      })
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.list {
+  padding-top: 5rem;
+  font-size: 1.6rem;
+
+  .article {
+    color: #757575;
+    clear: both;
+    padding: 1rem 3rem;
+
+    .article_name {
+      float: left;
+      cursor: pointer;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 1; //显示的行
+
+      .span {
+        padding-right: 1rem;
+
+        .def_img, .hover_img {
+          width: 1.5rem;
+        }
+
+        .def_img {
+          display: inline-block;
+        }
+
+        .hover_img {
+          display: none;
+        }
+      }
+    }
+
+    .article_time {
+      float: right;
+    }
+
+    a {
+      color: #757575 !important;
+    }
+  }
+
+  .article:hover {
+    //background-color: gray;
+    color: #1956BC;
+
+    a {
+      color: #1956BC !important;
+      font-weight: bold;
+    }
+
+    .article_name {
+      .def_img {
+        display: none;
+      }
+
+      .hover_img {
+        display: inline-block;
+      }
+    }
+
+
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.pagination_p {
+  text-align: center;
+  margin-bottom: 2rem;
+  margin-top: 5rem;
+
+  .pagination {
+    display: inline-block;
+    float: none;
+  }
+}
+
+.query {
+  //margin: 1rem 0;
+  z-index: 999;
+  width: 30%;
+  position: absolute;
+  right: 3rem;
+  top: -2.4rem;
+  //float: right;
+
+  .query_input {
+    border-color: #1956BC !important;
+    border-radius: 0 !important;
+
+  }
+
+  .query_button {
+    //height: 3.5rem;
+    border-radius: 0rem 1rem 1rem 0rem;
+    background-color: #1956BC;
+    border-color: #1956BC !important;
+  }
+
+}
+
+@media screen and (min-width: 1100px) and (max-width: 1400px) {
+  .query {
+    width: 40% !important;
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .query {
+    height: 1rem;
+    width: 80% !important;
+    margin-top: 4rem;
+  }
+}
+
+</style>

src/views/content/index.vue

@@ -17,15 +17,14 @@
     <div style="background-color:#F8F8F8 ; padding-bottom: 19rem">
       <!--有三级菜单-->
       <el-row v-show="showSecond">
-
         <el-col v-if="$i18n.locale  === 'cn'" :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
           <div class="grid-content"></div>
         </el-col>
         <el-col v-if="$i18n.locale  === 'cn'" v-show="width" :md="6" :lg="6" :xl="4">
           <div class="left_lab" ref="lab">
-            <div class="lab">
+            <div class="lab" v-if="navList">
               <div v-for="(nav,index) in navList" class="lab_div">
-                <div v-if="index === showIndex" class="lab_list lab_select" @click="navClick(nav,index)">
+                <div v-if="index === showIndex&& nav" class="lab_list lab_select" @click="navClick(nav,index)">
                   <div class="lab_img">
                     <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                   </div>
@@ -33,7 +32,7 @@
                     {{ nav.title }}
                   </div>
                 </div>
-                <div v-if="index !== showIndex" class="lab_list" @click="navClick(nav,index)">
+                <div v-if="index !== showIndex&& nav" class="lab_list" @click="navClick(nav,index)">
                   <div class="lab_img">
                     <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
                   </div>
@@ -82,16 +81,16 @@
           <el-row>
             <el-col>
               <div class="tab">
-                <router-link to="/home">{{ $t('message.home') }}</router-link>
+                <router-link style="color: #1956BC; font-size: 16px;" to="/home">{{ $t('message.home') }}</router-link>
                 <span> > </span>
-                <!--<span style="color: #1956BC;font-size: 1.4rem">-->
+                <span>
                 <!--<router-link to="">-->
                 <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
                 <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
-                <!--</router-link>-->
-                <!--</span>-->
+                  <!--</router-link>-->
+                </span>
                 <span> > </span>
-                <span style="color: #1956BC;font-size: 1.4rem">
+                <span>
                   <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
                   <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
                 </span>
@@ -100,11 +99,12 @@
           </el-row>
           <el-row>
             <el-col>
-              <Introduction :value="contextData" v-if="type === 1"/>
-              <List :value="contextData" v-if="type === 2"/>
+              <Introduction :introduction="contextData" v-if="type === 1"/>
+              <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
+              <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
               <FileList :value="contextData" v-if="type === 4"/>
-              <DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
-              <Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
               <Details :value="detailsData" v-if="type == null"/>
             </el-col>
           </el-row>
@@ -119,28 +119,32 @@
           <el-row>
             <el-col>
               <div class="tab">
-                <router-link to="/">{{ $t('message.home') }}</router-link>
+                <router-link style="color: #1956BC; font-size: 16px;" to="/">{{ $t('message.home') }}</router-link>
                 <span> > </span>
-                <span style="color: #1956BC;font-size: 1.4rem">
+                <span>
                 <!--<router-link to="">-->
                   <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
                   <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
                   <!--</router-link>-->
                 </span>
-                <!--<span> > </span>-->
-                <!--  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>-->
-                <!--  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>-->
-                <!--  &lt;!&ndash;{{ crumbs.two.title }}&ndash;&gt;-->
+                <span> > </span>
+                <span>
+                <!--<router-link to="">-->
+                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
+                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
+                  <!--</router-link>-->
+                </span>
               </div>
             </el-col>
           </el-row>
           <el-row>
             <el-col>
-              <Introduction :value="contextData" v-if="type === 1"/>
-              <List :value="contextData" v-if="type === 2"/>
+              <Introduction :introduction="contextData" v-if="type === 1"/>
+              <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
+              <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
               <FileList :value="contextData" v-if="type === 4"/>
-              <DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
-              <Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
               <Details :value="detailsData" v-if="type == null"/>
             </el-col>
           </el-row>
@@ -159,11 +163,13 @@ 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 Organization from './components/organization.vue'
+import DireDataTow from './components/dire_data_tow.vue'
 import Details from './components/details.vue'
 import FileList from './components/file_list.vue'
+import SimpleList from './components/simple_list.vue'
 import {handleTree} from "@/utils/ebts";
 import {getParentNode, setLanguage} from "@/utils/sist";
+import {getNodeNav} from "../../api";
 
 export default {
   name: "index",
@@ -172,14 +178,17 @@ export default {
     List,
     DireData,
     Details,
-    FileList
+    FileList,
+    DireDataTow,
+    SimpleList
   },
   data() {
     return {
       width: document.documentElement.clientWidth > 992,
       secondId: null,
       navId: null,
-      organizationType:"",
+      dreDataType: "",
+      listDataType: 0,
       navList: [],
       showIndex: 0,
       showSecond: true,
@@ -199,14 +208,17 @@ export default {
   },
   watch: {
     $route(to, from) {
+      console.log("$route触发了")
+      this.showIndex = 0
+      this.rest()
       let arcId = this.$route.params && this.$route.query.id
       this.navId = this.$route.params && this.$route.params.navId;
       let id = this.$route.params && this.$route.params.secondId
       this.type = this.$route.query && this.$route.query.type
       if (this.type == 3 || this.type == 1 || this.type == 2) {
         this.secondId = id
-        this.getCrumbs();
         this.showSecond = false
+        this.getCrumbs();
         let info = getParentNode(this.secondId);
         console.log("获取到info", info)
         if (arcId != undefined) {
@@ -217,6 +229,14 @@ export default {
           this.getContent(info.second)
         }
         return
+      } else {
+        console.log(this.navId, "this.navId")
+        if (undefined == this.navId) {
+          console.log(this.navId, "this.navId1")
+          this.secondId = id
+          this.getNodes()
+          this.getCrumbs();
+        }
       }
       this.showSecond = true
       if (arcId != undefined) {
@@ -226,35 +246,52 @@ export default {
         this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
       } catch (e) {
       }
-      if (this.secondId == id) {
+      this.showIndex = 0
+      // if (this.secondId!=id){
+      //   this.getCrumbs();
+      // }
+      console.log("开始循环查找id信息",this.secondId == id && this.navList,this.secondId , id, this.navList)
+      if (this.secondId == id && this.navList) {
         for (let i = 0; i < this.navList.length; i++) {
           if (this.navId == this.navList[i].encodeId) {
+            console.log("找到了")
             this.showIndex = i
             this.getContent(this.navList[i])
           }
         }
       } else {
+        console.log("跳转的路由和以前不一样")
+        this.navList = []
         this.secondId = id
         this.getNav()
       }
     }
   },
   created() {
+    console.log("created触发了")
     setLanguage(this)
+    this.showIndex = 0
     this.secondId = this.$route.params && this.$route.params.secondId;
     this.navId = this.$route.params && this.$route.params.navId;
     this.type = this.$route.query && this.$route.query.type
+    console.log(this.type, "this.type")
     setTimeout(() => {
       this.getNav()
+      this.getNodes()
     }, 200);
     //this.getNav()
     this.getCrumbs();
   },
   methods: {
+    rest() {
+      this.showIndex = 0
+      this.navId = null
+      this.type = null
+    },
     /**
      * 获得面包屑导航
      */
-    getCrumbs() {
+    getCrumbs(id) {
       crumbs(this.secondId).then(res => {
         this.crumbs = res.data
       })
@@ -295,46 +332,87 @@ export default {
         return
       }
       this.showSecond = true
-      this.getNodes()
     },
 
     /**
      * 获得节点信息
      */
-    getNodes() {
+    async getNodes() {
+      console.log("getNodes被触发了")
       this.navList = []
-      getNode({id: this.secondId}).then(res => {
-        this.navList = res.data
-        try {
-          setTimeout(() => {
-            this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
-          }, 100);
-        } catch (e) {
-          console.log(e)
+      // await getNode({id: this.secondId}).then(res => {
+      //   this.navList = res.data
+      //   try {
+      //     setTimeout(() => {
+      //       this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+      //     }, 100);
+      //   } catch (e) {
+      //     console.log(e)
+      //   }
+      //   // if (!this.navList){
+      //   //   return
+      //   // }
+      //   for (let i = 0; i < this.navList.length; i++) {
+      //     if (this.navId == this.navList[i].encodeId) {
+      //       this.showIndex = i
+      //     }
+      //   }
+      //   let arcId = this.$route.query && this.$route.query.id
+      //   if (arcId != undefined) {
+      //     this.getContext(arcId)
+      //   } else {
+      //     console.log("测试,我被触发了!")
+      //     if (this.navId == undefined) {
+      //       this.getContent(this.navList[0])
+      //     } else {
+      //       this.getContent(this.navList[this.showIndex])
+      //     }
+      //   }
+      // })
+      let res = await getNodeNav({id: this.secondId})
+      // todo 延时异步问题
+      console.log(res, "2222")
+      if (res.data.length == 0) {
+        this.navList = []
+        this.showSecond = false
+        return
+      }
+      this.navList = res.data
+      // setTimeout(() => {
+      this.$refs.lab.style.height = res.data.length * 8 + 10 + 'rem'
+      console.log("qqq")
+      // }, 100);
+
+      // if (!this.navList){
+      //   return
+      // }
+      for (let i = 0; i < this.navList.length; i++) {
+        if (this.navId == this.navList[i].encodeId) {
+          this.showIndex = i
         }
-        for (let i = 0; i < this.navList.length; i++) {
-          if (this.navId == this.navList[i].encodeId) {
-            this.showIndex = i
-          }
-        }
-        let arcId = this.$route.query && this.$route.query.id
-        if (arcId != undefined) {
-          this.getContext(arcId)
+      }
+      let arcId = this.$route.query && this.$route.query.id
+      console.log("进入到arcId 的判断", arcId)
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      } else {
+        console.log("进入到this.navId 的判断", this.navId)
+        if (this.navId == undefined) {
+          this.getContent(this.navList[0])
         } else {
-          if (this.navId == undefined) {
-            this.getContent(this.navList[0])
-          } else {
-            this.getContent(this.navList[this.showIndex])
-          }
+          this.getContent(this.navList[this.showIndex])
         }
-      })
+      }
     },
     /**
      * 获取三级菜单
      * @param menu
      */
     getContent(menu) {
-      console.log("getContent内部,menu:", menu)
+      console.log("getContent被触发了", menu)
+      if (menu == undefined) {
+        return
+      }
       this.type = menu.type
       this.contextData = null
       this.bgImage = menu.link
@@ -345,8 +423,11 @@ export default {
           pageNum: 1,
           pageSize: 5
         }
-        if (this.type === 4){
+        this.listDataType = 0
+        console.log(menu.isSimple,"menu.isSimple")
+        if (this.type === 4 || menu.isSimple == 1) {
           data.pageSize = 10
+          this.listDataType = 1
         }
       } else {
         data = {
@@ -356,6 +437,12 @@ export default {
       getNode(data).then(res => {
         console.log(res, "res值")
         console.log(this.type);
+        if (null == res.data && null == res.rows) {
+          this.contextData = null
+          console.log("将值设为null", this.contextData)
+          this.type = 0
+          return
+        }
         if (this.type === 2 || this.type === 4) {
           this.contextData = {
             data: res.rows,
@@ -368,19 +455,19 @@ export default {
         } else if (this.type == 1) {
           this.contextData = res.data
         } else if (this.type == 3) {
-          if (res.additional == ""){
-            this.organizationType = "1"
-          }else {
-            this.organizationType = res.additional
+          if (res.additional == "") {
+            this.dreDataType = "1"
+          } else {
+            console.log(this.dreDataType, "this.organizationType")
+            this.dreDataType = res.additional
           }
           this.contextData = handleTree(res.data, "id", "pid", null, null)
-          console.log(this.contextData,"this.contextData")
+          console.log(this.contextData, "this.contextData")
         }
       })
     },
 
 
-
     /**
      * 菜单点击,路由切换
      * @param nav
@@ -451,7 +538,8 @@ export default {
 
     .lab_div {
       border-bottom: 0.1rem solid #94BCFF !important;
-      margin-left: 1rem;
+      //margin-left: 1rem;
+      width: 100%;
     }
 
     .lab_div:last-child {
@@ -462,7 +550,7 @@ export default {
     .lab_list {
       cursor: pointer;
       text-align: center;
-      width: 19rem;
+      //width: 19rem;
       height: 8rem;
       clear: left;
       line-height: 8rem;
@@ -473,7 +561,7 @@ export default {
         width: 1.4rem;
         height: 1.4rem;
         display: none;
-        margin-left: 3rem;
+        margin-left: 1rem;
 
         img {
           width: 100%;
@@ -483,7 +571,7 @@ export default {
       .lab_title {
         color: #1956BC;
         float: left;
-        margin-left: 5rem;
+        margin-left: 3rem;
       }
     }
 
@@ -506,10 +594,10 @@ export default {
   margin-left: 1.9rem;
   margin-top: 1.5rem;
   font-weight: 400;
+  font-size: 1.6rem;
 
   a {
     text-decoration: none;
-    font-size: 1.4rem !important;
     color: #3C3C3C;
   }
 }

src/views/content/index_back.vue

@@ -0,0 +1,614 @@
+<template>
+  <div class="content">
+    <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>
+
+    <div style="background-color:#F8F8F8 ; padding-bottom: 19rem">
+      <!--有三级菜单-->
+      <el-row v-show="showSecond">
+        <el-col v-if="$i18n.locale  === 'cn'" :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
+          <div class="grid-content"></div>
+        </el-col>
+        <el-col v-if="$i18n.locale  === 'cn'" v-show="width" :md="6" :lg="6" :xl="4">
+          <div class="left_lab" ref="lab">
+            <div class="lab" v-if="navList">
+              <div v-for="(nav,index) in navList" class="lab_div">
+                <div v-if="index === showIndex&& nav" class="lab_list lab_select" @click="navClick(nav,index)">
+                  <div class="lab_img">
+                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
+                  </div>
+                  <div class="lab_title">
+                    {{ nav.title }}
+                  </div>
+                </div>
+                <div v-if="index !== showIndex&& nav" class="lab_list" @click="navClick(nav,index)">
+                  <div class="lab_img">
+                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
+                  </div>
+                  <div class="lab_title">
+                    {{ nav.title }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+
+        <el-col v-if="$i18n.locale  === 'en'" :xs="2" :sm="2" :md="2" :lg="2" :xl="3">
+          <div class="grid-content"></div>
+        </el-col>
+
+        <el-col v-if="$i18n.locale  === 'en'" v-show="width" :md="6" :lg="6" :xl="5">
+          <div class="left_lab english" ref="lab">
+            <div class="lab">
+              <div v-for="(nav,index) in navList" class="lab_div">
+                <div v-if="index === showIndex" class="lab_list lab_select" @click="navClick(nav,index)">
+                  <div class="lab_img">
+                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
+                  </div>
+                  <div class="lab_title">
+                    {{ nav.englishTitle }}
+                  </div>
+                </div>
+                <div v-if="index !== showIndex" class="lab_list" @click="navClick(nav,index)">
+                  <div class="lab_img">
+                    <img src="@/assets/school_profile/eji_icon_xz.png" alt="">
+                  </div>
+                  <div class="lab_title">
+                    {{ nav.englishTitle }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+
+
+        <!--<el-col v-if="$i18n.locale  === 'cn'" :xs="20" :sm="20" :md="15" :lg="14" :xl="12">-->
+        <el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12">
+          <el-row>
+            <el-col>
+              <div class="tab">
+                <router-link style="color: #1956BC; font-size: 16px;" to="/home">{{ $t('message.home') }}</router-link>
+                <span> > </span>
+                <span>
+                <!--<router-link to="">-->
+                <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
+                <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
+                  <!--</router-link>-->
+                </span>
+                <span> > </span>
+                <span>
+                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
+                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
+                </span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <Introduction :introduction="contextData" v-if="type === 1"/>
+              <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
+              <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
+              <FileList :value="contextData" v-if="type === 4"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
+              <Details :value="detailsData" v-if="type == null"/>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+      <!--无三级菜单-->
+      <el-row v-show="!showSecond">
+        <el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="5">
+          <div class="grid-content"></div>
+        </el-col>
+        <el-col :xs="20" :sm="20" :md="20" :lg="16" :xl="14">
+          <el-row>
+            <el-col>
+              <div class="tab">
+                <router-link style="color: #1956BC; font-size: 16px;" to="/">{{ $t('message.home') }}</router-link>
+                <span> > </span>
+                <span>
+                <!--<router-link to="">-->
+                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.one.title }}</span>
+                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.one.englishTitle }}</span>
+                  <!--</router-link>-->
+                </span>
+                <span> > </span>
+                <span>
+                <!--<router-link to="">-->
+                  <span v-if="$i18n.locale  === 'cn'">{{ crumbs.two.title }}</span>
+                  <span v-if="$i18n.locale  === 'en'">{{ crumbs.two.englishTitle }}</span>
+                  <!--</router-link>-->
+                </span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col>
+              <Introduction :introduction="contextData" v-if="type === 1"/>
+              <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
+              <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
+              <FileList :value="contextData" v-if="type === 4"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
+              <Details :value="detailsData" v-if="type == null"/>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="5">
+          <div class="grid-content"></div>
+        </el-col>
+      </el-row>
+    </div>
+
+  </div>
+</template>
+
+<script>
+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 DireDataTow from './components/dire_data_tow.vue'
+import Details from './components/details.vue'
+import FileList from './components/file_list.vue'
+import SimpleList from './components/simple_list.vue'
+import {handleTree} from "@/utils/ebts";
+import {getParentNode, setLanguage} from "@/utils/sist";
+
+export default {
+  name: "index",
+  components: {
+    Introduction,
+    List,
+    DireData,
+    Details,
+    FileList,
+    DireDataTow,
+    SimpleList
+  },
+  data() {
+    return {
+      width: document.documentElement.clientWidth > 992,
+      secondId: null,
+      navId: null,
+      dreDataType: "",
+      listDataType: 0,
+      navList: [],
+      showIndex: 0,
+      showSecond: true,
+      contextData: {},
+      type: 2,
+      bgImage: null,
+      crumbs: {
+        "two": {
+          "title": "学院领导",
+        },
+        "one": {
+          "title": "学院概况",
+        }
+      },
+      detailsData: {}
+    }
+  },
+  watch: {
+    $route(to, from) {
+      console.log("我被触发了")
+      this.showIndex = 0
+      let arcId = this.$route.params && this.$route.query.id
+      this.navId = this.$route.params && this.$route.params.navId;
+      let id = this.$route.params && this.$route.params.secondId
+      this.type = this.$route.query && this.$route.query.type
+      if (this.type == 3 || this.type == 1 || this.type == 2) {
+        this.secondId = id
+        this.getCrumbs();
+        this.showSecond = false
+        let info = getParentNode(this.secondId);
+        console.log("获取到info", info)
+        if (arcId != undefined) {
+          console.log("getContext")
+          this.getContext(arcId)
+        } else {
+          console.log("getContent")
+          this.getContent(info.second)
+        }
+        return
+      } else {
+        console.log(this.navId, "this.navId")
+        if (undefined == this.navId) {
+          this.getNodes()
+        }
+      }
+      this.showSecond = true
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      }
+      try {
+        this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+      } catch (e) {
+      }
+      if (this.secondId == id && this.navList) {
+        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.navList = []
+        this.secondId = id
+        this.getNav()
+      }
+    }
+  },
+  created() {
+    setLanguage(this)
+    this.showIndex = 0
+    this.secondId = this.$route.params && this.$route.params.secondId;
+    this.navId = this.$route.params && this.$route.params.navId;
+    this.type = this.$route.query && this.$route.query.type
+    console.log(this.type, "this.type")
+    setTimeout(() => {
+      this.getNav()
+    }, 200);
+    //this.getNav()
+    this.getCrumbs();
+  },
+  methods: {
+    /**
+     * 获得面包屑导航
+     */
+    getCrumbs() {
+      crumbs(this.secondId).then(res => {
+        this.crumbs = res.data
+      })
+    },
+    /**
+     * 获得内容
+     * @param arcId
+     */
+    getContext(arcId) {
+      article(arcId).then(res => {
+        this.detailsData = res.data.data
+        this.type = null
+      })
+    },
+    /**
+     *  获得菜单下的信息
+     */
+    getNav() {
+      this.getCrumbs();
+      if (this.type == 3 || this.type == 1 || this.type == 2) {
+        console.log("进入二级")
+        this.showSecond = false
+        let info = null
+        info = getParentNode(this.secondId);
+        if (info == null) {
+          location.reload();
+        }
+        let arcId = null
+
+        arcId = this.$route.query && this.$route.query.id
+        console.log(arcId)
+        if (arcId != undefined) {
+          this.getContext(arcId)
+        } else {
+          console.log("获取二级列表")
+          this.getContent(info.second)
+        }
+        return
+      }
+      this.showSecond = true
+      this.getNodes()
+    },
+
+    /**
+     * 获得节点信息
+     */
+    async getNodes() {
+      this.navList = []
+      // await getNode({id: this.secondId}).then(res => {
+      //   this.navList = res.data
+      //   try {
+      //     setTimeout(() => {
+      //       this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+      //     }, 100);
+      //   } catch (e) {
+      //     console.log(e)
+      //   }
+      //   // if (!this.navList){
+      //   //   return
+      //   // }
+      //   for (let i = 0; i < this.navList.length; i++) {
+      //     if (this.navId == this.navList[i].encodeId) {
+      //       this.showIndex = i
+      //     }
+      //   }
+      //   let arcId = this.$route.query && this.$route.query.id
+      //   if (arcId != undefined) {
+      //     this.getContext(arcId)
+      //   } else {
+      //     console.log("测试,我被触发了!")
+      //     if (this.navId == undefined) {
+      //       this.getContent(this.navList[0])
+      //     } else {
+      //       this.getContent(this.navList[this.showIndex])
+      //     }
+      //   }
+      // })
+      let res = await getNode({id: this.secondId})
+      // todo 延时异步问题
+      setTimeout(() => {
+        this.$refs.lab.style.height = res.data.length * 8 + 10 + 'rem'
+      }, 100);
+      this.navList = res.data
+      // if (!this.navList){
+      //   return
+      // }
+      for (let i = 0; i < this.navList.length; i++) {
+        if (this.navId == this.navList[i].encodeId) {
+          this.showIndex = i
+        }
+      }
+      let arcId = this.$route.query && this.$route.query.id
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      } else {
+        console.log("测试,我被触发了!")
+        if (this.navId == undefined) {
+          this.getContent(this.navList[0])
+        } else {
+          this.getContent(this.navList[this.showIndex])
+        }
+      }
+    },
+    /**
+     * 获取三级菜单
+     * @param menu
+     */
+    getContent(menu) {
+      console.log("getContent内部,menu:", menu)
+      console.log(menu)
+      if (menu == undefined) {
+        return
+      }
+      this.type = menu.type
+      this.contextData = null
+      this.bgImage = menu.link
+      let data = null
+      if (this.type === 2 || this.type === 4) {
+        data = {
+          id: menu.encodeId,
+          pageNum: 1,
+          pageSize: 5
+        }
+        this.listDataType = 0
+        if (this.type === 4 || menu.isSimple == 1) {
+          data.pageSize = 10
+          this.listDataType = 1
+        }
+      } else {
+        data = {
+          id: menu.encodeId,
+        }
+      }
+      getNode(data).then(res => {
+        console.log(res, "res值")
+        console.log(this.type);
+        if (null == res.data && null == res.rows) {
+          this.contextData = null
+          console.log("将值设为null", this.contextData)
+          this.type = 0
+          return
+        }
+        if (this.type === 2 || this.type === 4) {
+          this.contextData = {
+            data: res.rows,
+            total: res.total,
+            pageNum: data.pageNum,
+            pageSize: data.pageSize,
+            navId: menu.encodeId,
+            secondId: this.secondId,
+          }
+        } else if (this.type == 1) {
+          this.contextData = res.data
+        } else if (this.type == 3) {
+          if (res.additional == "") {
+            this.dreDataType = "1"
+          } else {
+            console.log(this.dreDataType, "this.organizationType")
+            this.dreDataType = res.additional
+          }
+          this.contextData = handleTree(res.data, "id", "pid", null, null)
+          console.log(this.contextData, "this.contextData")
+        }
+      })
+    },
+
+
+    /**
+     * 菜单点击,路由切换
+     * @param nav
+     * @param index
+     */
+    navClick(nav, index) {
+      //if (index != this.showIndex) {
+      this.showIndex = index
+      this.type = nav.type
+      this.$router.push("/pc/" + this.secondId + "/" + nav.encodeId + "?lang=" + sessionStorage.getItem("lang"));
+      //this.getContent(nav)
+      //}
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+  background-color: #F8F8F8 !important;
+}
+
+.english {
+  margin: 0 !important;
+  width: 80% !important;
+
+  .lab {
+    width: 100% !important;
+  }
+
+  .lab_list {
+    width: 100% !important;
+  }
+}
+
+.context {
+  background-color: #ffffff;
+}
+
+.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: 20rem;
+    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;
+      width: 100%;
+    }
+
+    .lab_div:last-child {
+      border-bottom: none !important;
+      padding-bottom: 1.5rem;
+    }
+
+    .lab_list {
+      cursor: pointer;
+      text-align: center;
+      //width: 19rem;
+      height: 8rem;
+      clear: left;
+      line-height: 8rem;
+
+      .lab_img {
+        margin-top: .2rem;
+        float: left;
+        width: 1.4rem;
+        height: 1.4rem;
+        display: none;
+        margin-left: 1rem;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .lab_title {
+        color: #1956BC;
+        float: left;
+        margin-left: 3rem;
+      }
+    }
+
+    .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;
+  font-size: 1.6rem;
+
+  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/footer/index.vue

@@ -8,7 +8,8 @@
         <el-row>
           <el-col :span="12">
             <div class="fLeft" style="margin-top: 1rem">
-              <p style="font-family:Verdana, Geneva, sans-serif;font-weight:500;font-size:2rem; padding-bottom:6px; ">{{ $t('message.contact_us') }}
+              <p style="font-family:Verdana, Geneva, sans-serif;font-weight:500;font-size:2rem; padding-bottom:6px; ">
+                {{ $t('message.contact_us') }}
                 <!--CONTACT US-->
               </p>
               <p style="margin-top: 6px;">
@@ -31,8 +32,11 @@
           </el-col>
           <el-col :span="12">
             <table class="fRight" cellpadding="0" cellspacing="0" border="0">
-              <tbody><tr>
-                <td><img  style="width: 6.7rem;" src="http://sist.swjtu.edu.cn:80/zh/images/logo3.jpg"></td>
+              <tbody>
+              <tr>
+                <td>
+<!--                  <img style="width: 6.7rem;" src="http://sist.swjtu.edu.cn:80/zh/images/logo3.jpg">-->
+                </td>
                 <td><p><a href="http://www.swjtu.edu.cn/" target="_blank">
                   {{ $t('message.chinese_site') }}
                   <!--西南交通大学（中文）-->
@@ -63,7 +67,8 @@
                   </a></p>
                 </td>
               </tr>
-              </tbody></table>
+              </tbody>
+            </table>
           </el-col>
         </el-row>
       </el-col>
@@ -84,21 +89,25 @@ export default {
   background-color: rgb(107, 109, 108);
   color: #b2b2b2 !important;
   font-size: 1.2rem;
-  a{
+
+  a {
     color: #b2b2b2 !important;
-    text-decoration:none;
+    text-decoration: none;
   }
 
-  .fLeft{
+  .fLeft {
     text-decoration: none;
     margin-top: 1rem;
+
     p {
       margin-top: .5rem;
     }
   }
-  .fRight{
+
+  .fRight {
     margin-top: 1rem;
     text-decoration: red;
+
     p {
       margin-left: 1rem;
       margin-top: .5rem;

src/views/header/index.vue

@@ -1,95 +1,77 @@
 <template>
-  <div class="header">
-    <!--头部部分-->
-    <div class="top">
-      <el-row>
-<!--        <el-col :span="2">-->
-<!--          <div class="link">-->
-<!--            {{ $t('message.student') }}-->
-<!--          </div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="2">-->
-<!--          <div class="link">-->
-<!--            {{ $t('message.staff') }}-->
-<!--          </div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="2">-->
-<!--          <div class="link">-->
-<!--            {{ $t('message.alumni') }}-->
-<!--          </div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="2">-->
-<!--          <div class="link">-->
-<!--            {{ $t('message.examine') }}-->
-<!--          </div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="3">-->
-<!--          <div class="link">-->
-<!--            {{ $t('message.services_portal') }}-->
-<!--          </div>-->
-<!--        </el-col>-->
-        <el-col :span="11">
-          <div style="width: 10px;height: 10px;"></div>
-        </el-col>
-        <el-col :offset="11" :span="2">
-          <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
-        </el-col>
-      </el-row>
-    </div>
+  <div id="header_bgc" style="background: linear-gradient(180deg, #0A51AE 0%, rgba(25,84,167,0.9) 56%, rgba(21,82,167,0.7) 69%, rgba(16,80,168,0.4) 85%, rgba(11,81,173,0) 100%);">
+  <div class="header" id="header">
     <!--导航部分-->
     <div class="bottom">
       <el-row>
-        <!--        <el-col v-show="width" :span="1">-->
-        <!--          <div class="grid-content"></div>-->
-        <!--        </el-col>-->
         <div class="bottom-div" style="margin-left: 1rem;">
           <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5">
             <div class="icon">
-              <div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
+<!--              <div class="icont"><img src="@/assets/header/logo@2x.png" alt=""></div>-->
+              <div class="icont" v-show="login_blue" ><img src="@/assets/header/logob.png" alt=""></div>
+              <div class="icont" v-show="!login_blue"><img src="@/assets/header/logol.png" alt=""></div>
+
               <!--            <div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>-->
             </div>
           </el-col>
           <el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
             <div class="banner">
-              <router-link to="/home">
+              <router-link to="/home" v-bind:style="{color:link_color}">
                 <div class="link_text">
-                  <div v-show="$i18n.locale  === 'cn'" style="padding: 0 1.1rem;" class="link_text_title">学院首页</div>
-                  <div v-show="$i18n.locale  === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
+                  <div v-show="$i18n.locale  === 'cn'" class="link_text_title cn_title">首页</div>
+                  <div v-show="$i18n.locale  === 'en'" class="link_text_title en_title">Home</div>
                 </div>
               </router-link>
-
-              <span v-for="(menu,index) in menuData" :key="index"
-                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'cn'&& menu.displayType == 2)">
-            <a>
-              <div class="link_text">
-                <div class="link_text_title">
-                  <span style="padding: 0 1.1rem;" v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
-                  <span style="padding: 0 .9rem" v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
-                <div class="secondary">
-                  <ul style="text-align:left;">
+              <span v-for="(menu,index) in menuData" :key="index">
+<!--                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'en'&& menu.displayType == 2)">-->
+              <div class="link_text" id="link_text" v-if="menu.displayType != 4" v-bind:style="{color:link_color}">
+                <div class="link_text_title" >
+                  <span  class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
+                         v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+                  <span class="en_title"v-if="menu.displayType == 2 || menu.displayType == 1"
+                        v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
+                  <div class="secondary">
+                    <ul style="text-align:left;">
                     <span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
-                    <li class="menu_list" v-if="item.displayType != 4">
+                    <li class="menu_list"
+                        v-if="item.displayType != 4 && (item.displayType == 3 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'cn'">
                       <div class="menu_suffix">
                         <div>
-                          <span v-show="$i18n.locale  === 'cn'">{{ item.title }}</span>
-                          <span v-show="$i18n.locale  === 'en'">{{ item.englishTitle }}</span>
+                          <span>{{ item.title }}</span>
+                          <!--                          <span v-if="(item.displayType == 2 || item.displayType == 1)&&$i18n.locale  === 'en'" >{{ item.englishTitle }}</span>-->
+                        </div>
+                      </div>
+                    </li>
+                    <li class="menu_list"
+                        v-if="item.displayType != 4&&(item.displayType == 2 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'en'">
+                      <div class="menu_suffix" v-if="">
+                        <div>
+                          <span>{{ item.englishTitle }}</span>
                         </div>
                       </div>
                     </li>
                     </span>
                   </ul>
-                </div>
+                  </div>
                 </div>
                 <!--<div class="secondary" v-if="index == 5">-->
               </div>
-            </a>
             </span>
+              <div class="iconfont" @click="login" v-show="login_blue"><img src="@/assets/header/denglu.png" alt=""></div>
+              <div class="iconfont" @click="login" v-show="!login_blue"><img src="@/assets/header/denglu1.png" alt=""></div>
+              <div class="iconfont" @click="switchLang" v-if="login_blue && $i18n.locale  == 'cn'"><img src="@/assets/header/en.png" alt=""></div>
+              <div class="iconfont" @click="switchLang" v-if="!login_blue && $i18n.locale  == 'cn'"><img src="@/assets/header/en1.png" alt=""></div>
+              <div class="iconfont" @click="switchLang" v-if="login_blue && $i18n.locale  == 'en'"><img src="@/assets/header/enz.png" alt=""></div>
+              <div class="iconfont" @click="switchLang" v-if="!login_blue && $i18n.locale  == 'en'"><img src="@/assets/header/enzl.png" alt=""></div>
             </div>
           </el-col>
         </div>
       </el-row>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
@@ -103,9 +85,40 @@ export default {
       width: document.documentElement.clientWidth >= 1200,
       pc: document.documentElement.clientWidth > 992,
       menuData: [],
+      link_color:'#C5DCFE',
+      login_blue:true,
+      en_logo_blue:false,
+      en_login_white:false,
+      ch_logo_blue:true,
+      ch_logo_white:false
     }
   },
   mounted() {
+    let Head = document.getElementById('header')
+    let header_bgc = document.getElementById('header_bgc')
+    // let link_text = document.getElementById('link_text') 为啥不能更改
+
+    window.onscroll = ()=>{
+      // 获取滚动距离
+      let top = document.documentElement.scrollTop || document.body.scrollTop;
+      if (top !== 0) {
+        Head.style = "position: fixed;top: 0;background-color: #fff;"
+        header_bgc.style= "position: fixed;top: 0;background-color: #fff;box-shadow: 0px 1px 3px 0px rgba(8,57,122,0.18);"
+        this.link_color='#0A51AE'
+        this.login_blue=false
+        this.ch_logo_blue=false
+        this.ch_logo_white=true
+        // this.en_login_white=false
+      }else if(top === 0){
+        Head.style = "position: static;"
+        header_bgc.style= "position: static;background: linear-gradient(180deg, #0A51AE 0%, rgba(25,84,167,0.9) 56%, rgba(21,82,167,0.7) 69%, rgba(16,80,168,0.4) 85%, rgba(11,81,173,0) 100%);"
+        this.link_color='#C5DCFE'
+        this.login_blue=true
+        this.ch_logo_blue=true
+        this.ch_logo_white=false
+        // this.en_login_white=true
+      }
+    }
     const that = this
     window.onresize = () => {
       return (() => {
@@ -124,9 +137,12 @@ export default {
     }
   },
   methods: {
+    login() {
+      let routeData = this.$router.resolve("/admin");
+      window.open(routeData.href, "_blank")
+    },
     menuCut(menu) {
-      console.log(menu)
-      this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
+      window.open("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"))
     },
     switchLang() {
       let lang = ''
@@ -145,42 +161,45 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header {
-  //width: 100rem;
-  width: 130rem;
-  margin: 0 auto;
+.active{
+  color: red;
 
-  .top {
-    font-size: 1.2rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #FFFFFF;
-    text-align: center;
-    width: 100%;
-    height: 3rem;
-    background: #1956BC;
-
-    .switchLang {
-      cursor: pointer;
-      font-size: 1.6rem;
-    }
-
-    .link {
-      line-height: 2.2rem;
-      width: 80%;
-      margin: .4rem auto;
-      border-radius: 1.1rem;
-    }
-
-    .link:hover {
-      background: rgba(255, 255, 255, 0.7);
-    }
+}
+.cn_title{
+  padding: 0 0.7rem;
+}
+.en_title{
+  padding: 0 0.7rem;
+}
+.iconfont {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 7.6rem;
+  //line-height: 11rem;
+  padding-top: .7rem;
+  margin-left: .5rem;
 
+  img {
+    width: 2.5rem;
+    height: 2.6rem;
   }
+}
+#header_bgc{
+  width: 100%;
+  height: 7.6rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
 
+.header {
+  margin: 0 auto;
+  width: 124rem;
+  z-index: 9999;
   .bottom {
     height: 7.6rem;
-    background: rgba(25, 86, 188, 0.6);
+    //height: 11rem;
+    //background: rgba(25, 86, 188, 0.6);
     border-radius: 0rem 0rem 2rem 2rem;
 
     .icon {
@@ -188,11 +207,14 @@ export default {
 
       div {
         margin-top: 2.4rem;
+        //margin-top: 4.4rem;
       }
 
       .icont {
         img {
-          width: 23.3rem;
+          // todo logo有问题
+            width: 16rem;
+          //width: 15rem;
         }
       }
 
@@ -206,11 +228,13 @@ export default {
     .banner {
       a {
         text-decoration: none;
-        color: #ffffff;
+        //color: #ffffff;
+        //color: #C5DCFE;
       }
 
       width: 100%;
       height: 7.6rem;
+      //height: 11rem;
       clear: left;
       margin-left: 3rem;
 
@@ -221,20 +245,19 @@ export default {
         font-size: 1.6rem;
         font-family: "微软雅黑";
         font-weight: 400;
-        color: #FFFFFF;
+
+        //color: red!important;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         vertical-align: middle;
-
       }
 
-      .link_text_title {
+    .link_text_title {
         position: relative;
       }
 
-
       .secondary {
         display: none;
         width: 25rem;
@@ -336,5 +359,21 @@ export default {
   }
 }
 
+@media screen and (max-width: 1200px) {
+  .banner {
+    margin: 0 !important;
+  }
+  .header{
+    width: 90rem;
+  }
+}
 
+@media screen and (max-width: 992px) {
+  #header{
+    display: none!important;
+  }
+  #header_bgc{
+    display: none!important;
+  }
+}
 </style>

src/views/header/index_new.vue

@@ -0,0 +1,382 @@
+<template>
+  <div class="header">
+    <!--头部部分-->
+    <!--        <div class="top">-->
+    <!--          <el-row>-->
+    <!--        <el-col :span="2">-->
+    <!--          <div class="link">-->
+    <!--            {{ $t('message.student') }}-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="2">-->
+    <!--          <div class="link">-->
+    <!--            {{ $t('message.staff') }}-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="2">-->
+    <!--          <div class="link">-->
+    <!--            {{ $t('message.alumni') }}-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="2">-->
+    <!--          <div class="link">-->
+    <!--            {{ $t('message.examine') }}-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="3">-->
+    <!--          <div class="link">-->
+    <!--            {{ $t('message.services_portal') }}-->
+    <!--          </div>-->
+    <!--        </el-col>-->
+    <!--            <el-col :span="11">-->
+    <!--              <div style="width: 10px;height: 10px;"></div>-->
+    <!--            </el-col>-->
+    <!--            <el-col :offset="11" :span="2">-->
+    <!--              <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>-->
+    <!--            </el-col>-->
+    <!--          </el-row>-->
+    <!--        </div>-->
+    <!--    导航部分-->
+    <div class="bottom">
+      <el-row type="flex" justify="center">
+
+          <el-col :sm="24" :md="21" :lg="16" :xl="16">
+            <el-row type="flex" justify="center">
+              <el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="5" :xl="5">
+                <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 :xs="24" :sm="24" :md="21" :lg="19" :xl="19">
+                <div class="banner">
+                  <router-link to="/home">
+                    <div class="link_text">
+                      <div  v-show="$i18n.locale  === 'cn'" class="link_text_title cn_title">首页</div>
+                      <div v-show="$i18n.locale  === 'en'" class="link_text_title en_title">Home</div>
+                    </div>
+                  </router-link>
+                  <span v-for="(menu,index) in menuData" :key="index">
+<!--                    v-if="menu.displayType == 1 ||($i18n.locale  === 'cn'&& menu.displayType == 3)||($i18n.locale  === 'en'&& menu.displayType == 2)">-->
+              <div class="link_text" v-if="menu.displayType != 4">
+                <div class="link_text_title">
+                  <span  class="cn_title" v-if="menu.displayType == 3 || menu.displayType == 1"
+                         v-show="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+                  <span class="en_title"v-if="menu.displayType == 2 || menu.displayType == 1"
+                        v-show="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
+                  <div class="secondary">
+                    <ul style="text-align:left;">
+                    <span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
+                    <li class="menu_list"
+                        v-if="item.displayType != 4 && (item.displayType == 3 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'cn'">
+                      <div class="menu_suffix">
+                        <div>
+                          <span>{{ item.title }}</span>
+                          <!--                          <span v-if="(item.displayType == 2 || item.displayType == 1)&&$i18n.locale  === 'en'" >{{ item.englishTitle }}</span>-->
+                        </div>
+                      </div>
+                    </li>
+                    <li class="menu_list"
+                        v-if="item.displayType != 4&&(item.displayType == 2 || item.displayType == 1)"
+                        v-show="$i18n.locale  === 'en'">
+                      <div class="menu_suffix" v-if="">
+                        <div>
+                          <span>{{ item.englishTitle }}</span>
+                        </div>
+                      </div>
+                    </li>
+                    </span>
+                  </ul>
+                  </div>
+                </div>
+                <!--<div class="secondary" v-if="index == 5">-->
+              </div>
+            </span>
+                  <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>
+                  <div class="iconfont" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-col>
+<!--        <el-col :span="2">-->
+<!--          <div class="iconfont" @click="login"><img src="@/assets/header/denglu.png" alt=""></div>-->
+<!--          <div class="switchLang" @click="switchLang"><img src="@/assets/header/en.png" alt=""></div>-->
+<!--        </el-col>-->
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getNavigation} from "@/api";
+
+export default {
+  name: "index",
+  data() {
+    return {
+      english: false,
+      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() {
+    if (this.pc) {
+      getNavigation({}).then(res => {
+        this.menuData = res.data;
+        sessionStorage.setItem("menu", JSON.stringify(res.data));
+      });
+    }
+  },
+  methods: {
+    menuCut(menu) {
+      console.log(menu);
+      this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
+    },
+    login() {
+      let routeData = this.$router.resolve("/admin");
+      window.open(routeData.href, "_blank")
+    },
+    switchLang() {
+      let lang = "";
+      if (this.$i18n.locale === "en") {
+        lang = "cn";
+      } else {
+        lang = "en";
+      }
+      sessionStorage.setItem("lang", lang);
+      let fullPath = this.$route.fullPath;
+      debugger
+      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.cn_title{
+  padding: 0 0.7rem;
+}
+.en_title{
+  padding: 0 0.7rem;
+}
+.iconfont {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 11rem;
+  padding-top: .7rem;
+  margin-left: .5rem;
+
+  img {
+    width: 2.5rem;
+    height: 2.6rem;
+  }
+}
+
+//.switchLang {
+//  cursor: pointer;
+//  display: inline-block;
+//  line-height: 11rem;
+//  padding-top: .5rem;
+//
+//  img {
+//    width: 2.5rem;
+//    height: 2.6rem;
+//  }
+//}
+.grid-content {
+  height: 1px;
+}
+
+.header {
+  width: 100%;
+  margin: 0 auto;
+  background: linear-gradient(180deg, rgba(61, 96, 163, 0.91) 0%, rgba(61, 96, 163, 0.64) 35%, rgba(61, 96, 163, 0.42) 65%, rgba(73, 133, 234, 0.33) 77%, rgba(73, 133, 234, 0.02) 100%);
+
+
+  .top {
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    text-align: center;
+    width: 100%;
+    height: 3rem;
+    background: #1956BC;
+
+    .link {
+      line-height: 2.2rem;
+      width: 80%;
+      margin: .4rem auto;
+      border-radius: 1.1rem;
+    }
+    .link:hover {
+      background: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  .bottom {
+    margin: 0 auto;
+    //width: 70%;
+    height: 11rem;
+    .icon {
+      div {
+        margin-top: 4em;
+      }
+      .icont {
+        img {
+          width: 22.6rem;
+        }
+      }
+      .iconb {
+        img {
+          width: 8.9rem;
+        }
+      }
+    }
+    .banner {
+      a {
+        text-decoration: none;
+        color: #ffffff;
+      }
+
+      //width: 100%;
+      height: 11rem;
+      clear: left;
+      //margin-left: 3rem;
+      display: flex;
+
+      .link_text {
+        height: 100%;
+        text-align: center;
+        float: left;
+        font-size: 1.6rem;
+        font-family: "微软雅黑";
+        font-weight: 400;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+
+      }
+
+      .link_text_title {
+        position: relative;
+      }
+
+      .secondary {
+        display: none;
+        width: 25rem;
+        position: absolute;
+        //top: 6rem;
+        background-color: transparent;
+        text-align: left !important;
+        margin-top: 1rem;
+        //display: block;
+        //width: 100%;
+        //height: 5rem;
+        //background-color: #1956BC;
+
+
+        ul {
+          background-color: #ffffff;
+          display: inline-block;
+          border-radius: 0 0 .5rem .5rem;
+
+          li {
+            margin-top: 1.2rem;
+            height: 2rem;
+            list-style: none;
+            //border-bottom: .1rem solid gray;
+            color: #666666;
+            //display: flex;
+            //align-items: center;
+            //justify-content: center;
+            //clear: left;
+
+            //.menu_prefix{
+            //  width: 1.2rem;
+            //}
+            .menu_suffix {
+
+              margin-left: .6rem;
+              display: inline-block;
+              //width: 14.3rem;
+              border-left: .2rem solid #ffffff;
+              margin-right: .8rem;
+              padding-left: .8rem;
+
+              div {
+                padding: 0.2rem .4rem;
+              }
+            }
+
+            div {
+              float: left;
+            }
+          }
+
+          li:hover {
+            //background-color: rgba(25, 86, 188, 0.6);
+          }
+
+          li:last-child {
+            margin-bottom: 1.4rem;
+            //border-bottom: none;
+
+          }
+        }
+      }
+
+
+      .link_text:hover {
+        //.border{
+        //  background-color: #fff;
+        //}
+        .secondary {
+          display: block;
+        }
+
+        .link_text_title {
+          //font-weight: bolder !important;
+        }
+      }
+
+      .menu_list:hover {
+        .menu_suffix {
+
+          border-left: .2rem solid #1956BC;
+
+          div {
+            color: #0054B0;
+            background-color: #C3D7EC;
+            border-radius: 0.2rem;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .banner {
+    margin: 0 auto;
+  }
+}
+
+
+</style>

src/views/header/mobile_herder.vue

@@ -1,58 +1,73 @@
 <template>
-<div class="mobile_herder">
-  <div class="bottom">
-    <div @click="drawer = true">
-      <i class="el-icon-s-fold"></i>
+  <div id="mobile_herder" class="mobile_herder">
+    <div class="bottom" id="bottom">
+      <div @click="drawer = true">
+        <i class="el-icon-s-fold"></i>
+      </div>
+      <div class="img">
+        <img src="@/assets/header/sy_logo1@2x.png" alt="">
+      </div>
+      <!--    <div class="img">-->
+      <!--      <img src="@/assets/header/sy_logo2@2x.png" alt="">-->
+      <!--    </div>-->
+      <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
     </div>
-    <div class="img">
-      <img src="@/assets/header/sy_logo1@2x.png" alt="">
-    </div>
-    <div class="img">
-      <img src="@/assets/header/sy_logo2@2x.png" alt="">
-    </div>
-    <div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
-  </div>
-  <el-drawer
-    size="60%"
-    :append-to-body="true"
-    :withHeader="false"
-    :visible.sync="drawer"
-    :direction="direction"
-  >
-<!--    <div class="banner">导航</div>-->
-    <el-menu
-      default-active="2"
-      class="el-menu-vertical-demo"
-      @open="handleOpen"
-      @close="handleClose">
-      <el-menu-item index="1" @click="home">
-        <span slot="title">{{ $t('message.home') }}</span>
-      </el-menu-item>
-      <el-submenu :index="menuIndex+2"  v-for="(menu,menuIndex) in menuData" :key="menuIndex">
-        <template slot="title" >
-          <span v-if="$i18n.locale  === 'cn'">{{ menu.title }}</span>
-          <span v-if="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
-        </template>
-        <el-submenu :index="menuIndex +'-'+itemIndex" v-for="(item,itemIndex) in menu.children" :key="itemIndex" >
-
-          <template slot="title" v-if="item.children.length == 0 && $i18n.locale  === 'cn'">
-            <span  @click="clickSecondMenu(item)">{{item.title}}</span>
-          </template>
-          <template  slot="title" v-if="item.children.length == 0&& $i18n.locale  === 'en'">
-            <span  @click="clickSecondMenu(item)">{{item.englishTitle}}</span>
+    <el-drawer
+      size="60%"
+      :append-to-body="true"
+      :withHeader="false"
+      :visible.sync="drawer"
+      :direction="direction"
+    >
+      <!--    <div class="banner">导航</div>-->
+      <el-menu
+        default-active="2"
+        class="el-menu-vertical-demo"
+        @open="handleOpen"
+        @close="handleClose">
+        <el-menu-item index="1" @click="home">
+          <span slot="title">{{ $t('message.home') }}</span>
+        </el-menu-item>
+        <el-submenu v-for="(menu,menuIndex) in menuData" :index="menuIndex+2" :key="menuIndex">
+          <template slot="title">
+            <span v-if="$i18n.locale  === 'cn'">{{ menu.title }}</span>
+            <span v-if="$i18n.locale  === 'en'">{{ menu.englishTitle }}</span>
           </template>
 
-          <template slot="title" v-if="item.children.length > 0 &&$i18n.locale  === 'cn' " >{{item.title}}</template>
-          <template slot="title" v-if="item.children.length > 0 && $i18n.locale  === 'en'" >{{item.englishTitle}}</template>
-          <el-menu-item v-for="(chile ,chileIndex) in item.children" :key="chileIndex" :index="menuIndex +'-'+itemIndex +'-' +chileIndex" @click="clickMenu(chile,item)">
-            <span v-if="$i18n.locale  === 'cn'">{{ chile.title }}</span>
-            <span v-if="$i18n.locale  === 'en'">{{ chile.englishTitle }}</span>
-          </el-menu-item>
+          <span v-for="(item,itemIndex) in menu.children" :key="itemIndex">
+            <el-submenu :index="menuIndex +'-'+itemIndex" v-if="item.children.length > 0 && item.displayType != 4">
+              <template slot="title" v-if="item.children.length > 0 &&$i18n.locale  === 'cn' ">{{
+                  item.title
+                }}</template>
+              <template slot="title" v-if="item.children.length > 0 && $i18n.locale  === 'en'">{{
+                  item.englishTitle
+                }}</template>
+              <el-menu-item v-for="(chile ,chileIndex) in item.children" :key="chileIndex"
+                            v-if="chile.displayType != 4"
+                            :index="menuIndex + '-' +itemIndex + '-' +chileIndex" @click="clickMenu(chile,item)">
+                <span v-if="$i18n.locale  === 'cn'&&(chile.displayType == 1 || chile.displayType == 3)">{{
+                    chile.title
+                  }}</span>
+                <span v-if="$i18n.locale  === 'en'&&(chile.displayType == 1 || chile.displayType == 2)">{{
+                    chile.englishTitle
+                  }}</span>
+              </el-menu-item>
+            </el-submenu>
+            <el-menu-item v-if="!item.children.length>0 && (item.displayType != 4)" :key="itemIndex"
+                          :index="menuIndex +'-'+itemIndex"
+                          @click="clickSecondMenu(item)">
+              <span v-if="$i18n.locale  === 'cn'&&(item.displayType == 1 || item.displayType == 3)">{{
+                  item.title
+                }}</span>
+              <span v-if="$i18n.locale  === 'en'&&(item.displayType == 1 || item.displayType == 2)">{{
+                  item.englishTitle
+                }}</span>
+            </el-menu-item>
+          </span>
         </el-submenu>
-      </el-submenu>
-    </el-menu>
-  </el-drawer>
-</div>
+      </el-menu>
+    </el-drawer>
+  </div>
 
 </template>
 
@@ -67,30 +82,33 @@ export default {
     return {
       drawer: false,
       direction: 'ltr',
-      mobile:document.documentElement.clientWidth <=992,
-      menuData:[],
+      mobile: document.documentElement.clientWidth <= 992,
+      menuData: [],
     };
   },
   created() {
-    if (this.mobile){
-      getNavigation({}).then(res=>{
+    if (this.mobile) {
+      getNavigation({}).then(res => {
         this.menuData = res.data
-        sessionStorage.setItem("menu",JSON.stringify(res.data))
+        sessionStorage.setItem("menu", JSON.stringify(res.data))
       })
     }
   },
   methods: {
-    home(){
-      this.$router.push("/home?lang="+sessionStorage.getItem("lang"))
+    home() {
+      this.$router.push("/home?lang=" + sessionStorage.getItem("lang"))
     },
-    clickSecondMenu(menu){
+    // 二级菜单点击
+    clickSecondMenu(menu) {
       this.drawer = false
-      this.$router.push("/mobile/" +menu.encodeId+"?type="+menu.type+"&lang="+sessionStorage.getItem("lang"));
+      this.$router.push("/mobile/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
 
     },
-    clickMenu(menu,parent){
+    //三级菜单点击
+    clickMenu(menu, parent) {
+      console.log("三级菜单点击")
       this.drawer = false
-      this.$router.push("/mobile/" +parent.encodeId+"/"+menu.encodeId+"&lang="+sessionStorage.getItem("lang"));
+      this.$router.push("/mobile/" + parent.encodeId + "/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
     },
     switchLang() {
       let lang = ''
@@ -99,9 +117,9 @@ export default {
       } else {
         lang = 'en'
       }
-      sessionStorage.setItem("lang",lang)
+      sessionStorage.setItem("lang", lang)
       let fullPath = this.$route.fullPath
-      window.location.replace(fullPath.substr(0,fullPath.length-2)+lang)
+      window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
     },
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -113,60 +131,70 @@ export default {
 }
 </script>
 <style>
-.el-drawer__wrapper{
-  z-index: 9999!important;
+.el-drawer__wrapper {
+  z-index: 9999 !important;
 }
+
 /*#el-drawer__title{*/
 /*  display: none !important;*/
 /*}*/
 </style>
 
 <style scoped lang="scss">
-.banner{
+.banner {
   text-align: center;
   height: 4rem;
   font-size: 3rem;
-  margin-top: 3rem ;
+  margin-top: 3rem;
 }
-  .mobile_herder{
-    .top{
-      padding-left: 2rem;
-      height: 4rem;
-      background-color: #1956BC;
-      line-height: 4rem;
-      font-size: 1.6rem;
-      color: #ffffff;
-    }
-    .bottom{
-      background-color: #1956BC;
-      padding-left: 2rem;
-      font-size: 5rem;
-      height: 6.3rem;
-      line-height: 6rem;
-      cursor: pointer;
-      clear: left;
-      .el-icon-s-fold{
-        width: 6rem;
-        height: 6rem;
-        color: white;
-      }
-      div{
-        float: left;
-      }
-      .switchLang{
-        float: right;
-        font-size: 2rem;
-        color: #ffffff;
-        margin-right: 3rem;
-      }
-      img{
-        height: 3rem;
-        line-height: 6rem;
-      }
-      .img{
-        margin-left: 3rem;
-      }
-      //width: 100%;
-    }
+
+.mobile_herder {
+
+  .top {
+    padding-left: 2rem;
+    height: 4rem;
+    background-color: #1956BC;
+    line-height: 4rem;
+    font-size: 1.6rem;
+    color: #ffffff;
   }
+
+  .bottom {
+    background-color: #1956BC;
+    padding-left: 2rem;
+    font-size: 5rem;
+    height: 6.3rem;
+    line-height: 6rem;
+    cursor: pointer;
+    clear: left;
+
+    .el-icon-s-fold {
+      width: 6rem;
+      height: 6rem;
+      color: white;
+    }
+
+    div {
+      float: left;
+    }
+
+    .switchLang {
+      float: right;
+      font-size: 2rem;
+      color: #ffffff;
+      margin-right: 3rem;
+    }
+
+    img {
+      height: 3rem;
+      line-height: 6rem;
+    }
+
+    .img {
+      margin-left: 3rem;
+    }
+
+    //width: 100%;
+  }
+}
 </style>

src/views/index/components/academy_and_sciences.vue

@@ -0,0 +1,364 @@
+<template>
+  <div class="academy_and_sciences">
+    <el-row type="flex" justify="center">
+      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14" >
+        <el-row>
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="sciences_title">
+              {{ $t("message.scientific") }}
+            </div>
+            <div class="sciences_content" v-for="(item,index) in academyData" :key="index" @click="getArticle(item)">
+              <div class="sciences_content_time">
+                {{getMonthTime(item.publishTime)}}
+              </div>
+              <div class="sciences_content_text">
+                {{item.title}}
+              </div>
+            </div>
+            <div class="sciences_more more" @click="lookMore('b4Lm82Ct_eaF2u5XDABv0TM')">
+              <span class="more_text">更多</span>
+              <img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="academy_title">
+              {{ $t("message.academic") }}
+            </div>
+            <el-row>
+              <el-col :span="11">
+                <div class="academy_content" @click="getArticle(sciencesData[0])">
+                  <div class="academy_content_icontime">
+                    <div class="img"></div>
+                    <span>{{getDateTime(sciencesData[0].publishTime)}}</span>
+                  </div>
+                  <div class="academy_content_title">
+                    {{sciencesData[0].title}}
+                  </div>
+                  <div v-if="sciencesData[0].description" class="academy_content_text">{{sciencesData[0].description}}</div>
+                  <div v-if="!sciencesData[0].description" class="academy_content_text" v-html="sciencesData[0].content"></div>
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div class="grid-content"></div>
+              </el-col>
+              <el-col :span="11">
+                <div class="academy_content" @click="getArticle(sciencesData[1])">
+                  <div class="academy_content_icontime">
+                    <div class="img"></div>
+                    <span>{{getDateTime(sciencesData[1].publishTime)}}</span>
+                  </div>
+                  <div class="academy_content_title">
+                    {{sciencesData[1].title}}
+                  </div>
+                  <div v-if="sciencesData[1].description" class="academy_content_text">{{sciencesData[1].description}}</div>
+                  <div v-if="!sciencesData[1].description" class="academy_content_text" v-html="sciencesData[1].content"></div>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="11">
+                <div class="academy_content" @click="getArticle(sciencesData[2])">
+                  <div class="academy_content_icontime">
+                    <div class="img"></div>
+                    <span>{{getDateTime(sciencesData[2].publishTime)}}</span>
+                  </div>
+                  <div class="academy_content_title">
+                    {{sciencesData[2].title}}
+                  </div>
+                  <div v-if="sciencesData[2].description" class="academy_content_text">{{sciencesData[2].description}}</div>
+                  <div v-if="!sciencesData[2].description" class="academy_content_text" v-html="sciencesData[2].content"></div>
+                </div>
+              </el-col>
+              <el-col :span="2">
+                <div class="grid-content"></div>
+              </el-col>
+
+              <el-col :span="11">
+                <div class="academy_content" @click="getArticle(sciencesData[3])">
+                  <div class="academy_content_icontime">
+<!--                    <img :src="src" alt="">-->
+                    <div class="img"></div>
+                    <span>{{getDateTime(sciencesData[3].publishTime)}}</span>
+                  </div>
+                  <div class="academy_content_title">
+                    {{sciencesData[3].title}}
+                  </div>
+                  <div v-if="sciencesData[3].description" class="academy_content_text">{{sciencesData[3].description}}</div>
+                  <div v-if="!sciencesData[3].description" class="academy_content_text" v-html="sciencesData[3].content"></div>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="academy_more more" @click="lookMore('47sdOe8NQs0B4EHmM-wFWjQ')">
+              <span class="more_text">更多</span>
+              <img src="../../../assets/index/academy_and_sciences/gangduobai1.png" alt="">
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+
+import {getArticleList} from "@/api";
+import {toArticle} from "@/utils/sist";
+import {lookMoreFixedComment} from "../../../utils/sist";
+export default {
+  name: "academy_and_sciences",
+  data(){
+    return{
+      width: document.documentElement.clientWidth > 992,
+      academyData:[],
+      sciencesData:[],
+    }
+  },
+
+  created() {
+    this.getAcademyList();
+    this.getSciencesList();
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = window.location.origin + link; //当前标签页
+    },
+    getArticle(news) {
+      toArticle(news, this.width);
+    },
+    lookMore(str) {
+      lookMoreFixedComment(str, this.width);
+    },
+    getAcademyList() {
+      getArticleList({
+        navId: "b4Lm82Ct_eaF2u5XDABv0TM",
+        pageNum: 1,
+        pageSize: 9
+      }).then(res => {
+        console.log(res.rows);
+        this.academyData = res.rows;
+      });
+    },
+    getSciencesList() {
+      getArticleList({
+        navId: "47sdOe8NQs0B4EHmM-wFWjQ",
+        pageNum: 1,
+        pageSize: 4
+      }).then(res => {
+        this.sciencesData = res.rows;
+      });
+    },
+
+    getDateTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1
+      if (month < 10){
+        month = "0"+month
+      }
+      let day = time.getDate();
+      if (day<10){
+        day = "0"+ day
+      }
+      return year + "-" + month + "-" + day;
+    },
+
+    getMonthTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let month = time.getMonth() + 1
+      if (month < 10){
+        month = "0"+month
+      }
+      let day = time.getDate();
+      if (day<10){
+        day = "0"+ day
+      }
+      return month + "-" + day;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@media screen and (max-width: 960px) {
+  .more {
+    justify-content: center!important;
+  }
+}
+@media screen and (max-width: 768px) {
+  .more {
+    justify-content: center!important;
+  }
+}
+/deep/ .el-col-2 {
+  width: 8%;
+}
+
+.academy_and_sciences {
+  background-image: url("../../../assets/index/academy_and_sciences/bj.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  //height: 68.3rem;
+
+  .sciences_title, .academy_title {
+    display: flex;
+    width: 18rem;
+    height: 5.9rem;
+    line-height: 5.9rem;
+    border-radius: 1.3rem 0 0 1.3rem;
+    font-size: 3rem;
+    font-weight: 500;
+    letter-spacing: .1rem;
+    color: #FFFFFF;
+    text-align: left;
+    background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
+    padding-left: 1.9rem;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .sciences_content {
+    cursor: pointer;
+    display: flex;
+    margin-bottom: 1.6rem;
+
+    &_time {
+      //width: 38px;
+      //height: 18px;
+      font-size: 1.3rem;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 2.3rem;
+      margin-right: 1.4rem;
+    }
+
+    &_text {
+      width: 81%;
+      //height: 23px;
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 2.3rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 1; //显示的行
+    }
+  }
+   .sciences_more{
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+  .academy_more{
+    margin-top: 1.7rem;
+    margin-bottom: 3rem;
+  }
+  .more {
+    width: 100%;
+    display: flex;
+    height: 2.3rem;
+    //margin-top: 3rem;
+    //margin-bottom: 3rem;
+    cursor: pointer;
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #FFFFFF;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+
+  .academy_content:hover{
+    box-shadow: 0 8px 11px 0 rgba(0, 73, 174, 0.5);
+    background: #FFFFFF;
+    color: #0049AF;
+    .academy_content_text{
+      color: #575757;
+      font-size: 1.4rem !important;
+    }
+
+    .img {
+      background-image: url("../../../assets/index/academy_and_sciences/shijian2.png");
+    }
+  }
+
+  .academy_content {
+    cursor: pointer;
+    height: 10.5rem;
+    background-color: rgba(10, 81, 174, 0.89);
+    padding: 2.5rem 2.3rem;
+    border-radius: 16px;
+    margin-bottom: 1.9rem;
+    color: #FFFFFF;
+
+    &_icontime {
+      display: flex;
+      margin-bottom: 1.1rem;
+      .img {
+        background-image: url("../../../assets/index/academy_and_sciences/shijian3.png");
+        background-size: 1.5rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: .9rem;
+      }
+
+      span {
+        //width: 79px;
+        //height: 18px;
+        font-size: 1.3rem;
+        font-weight: 500;
+
+        line-height: 1.85rem;
+      }
+    }
+
+    &_title {
+      //width: 139px;
+      width: 100%;
+      //height: 38px;
+      font-size: 1.6rem;
+      font-weight: bold;
+      //color: #FFFFFF;
+      line-height: 1.9rem;
+      letter-spacing: .1rem;
+      margin-bottom: .6rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 1; //显示的行
+    }
+
+    &_text {
+      //width: 139px;
+      width: 100%;
+      //height: 41px;
+      font-size: 1rem;
+      font-weight: 500;
+      //color: #FFFFFF;
+      line-height: 1.4rem;
+      letter-spacing: .1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 3; //显示的行
+    }
+  }
+}
+</style>

src/views/index/components/announcements.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="announcements">
+    <div class="headline">
+      <div class="line_left">
+        <img src="../../../assets/index/announcements/gang1.png" alt="">
+      </div>
+      <div class="title">
+        {{ $t("message.notice") }}
+      </div>
+      <div class="line_right">
+        <img src="../../../assets/index/announcements/gang2.png" alt="">
+      </div>
+    </div>
+
+    <el-row type="flex" justify="center">
+      <el-col  :xs="23" :sm="20" :md="16" :lg="12" :xl="12">
+        <el-row type="flex" justify="space-between">
+          <el-col  :xs="7" :sm="7" :md="7" :lg="7" :xl="7" v-for="(item,index) in announcementsData" :key="index">
+            <div class="announcements_text" @click="getArticle(item)">
+              <div class="announcements_text_line_time">
+                <div class="announcements_text_line_time_btime">{{getDayTime(item.publishTime)}}</div>
+                <div class="announcements_text_line_time_stime">{{getDateTime(item.publishTime)}}</div>
+              </div>
+              <div class="announcements_text_line"></div>
+              <div class="announcements_text_title">{{item.title}}</div>
+              <div  v-if="item.description" class="announcements_text_content">{{item.description}}</div>
+              <div  v-if="!item.description"  class="announcements_text_content" v-html="item.content"></div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <div class="more" @click="lookMore">
+      <span class="more_text">更多</span>
+      <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+import {getArticleList} from "@/api";
+import {toArticle} from "@/utils/sist";
+import {lookMoreFixedComment} from "../../../utils/sist";
+
+export default {
+  name: "announcements",
+  data() {
+    return {
+      announcementsData: [],
+      width: document.documentElement.clientWidth > 992
+    };
+  },
+  created() {
+    this.getAnnouncementsList();
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getArticle(news) {
+      toArticle(news, this.width);
+    },
+    lookMore() {
+      lookMoreFixedComment("Ag_9Jx2oC93JQcGt0VS0d4I", this.width);
+    },
+    getAnnouncementsList() {
+      getArticleList({
+        navId: "Ag_9Jx2oC93JQcGt0VS0d4I",
+        pageNum: 1,
+        pageSize: 3
+      }).then(res => {
+        this.announcementsData = res.rows;
+      });
+    },
+    getDateTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1
+      return year + "-" + month;
+    },
+    getDayTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let day = time.getDate();
+      return day;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+/deep/ .el-col-1 {
+  width: 6%;
+}
+
+.announcements {
+  background-image: url("../../../assets/index/announcements/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+
+  .headline {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    .line_left {
+      line-height: 4.4rem;
+    }
+
+    .title {
+      width: 12.9rem;
+      height: 4.4rem;
+      font-size: 3.1rem;
+      font-weight: 500;
+      color: #0049AE;
+      letter-spacing: .1rem;
+      margin: 0 1.3rem;
+    }
+
+    .line_right {
+      line-height: 4.4rem;
+    }
+  }
+
+  .announcements_text {
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0px 8px 11px 0px rgba(0, 73, 174, 0.5);
+    }
+
+    //width: 30.4%;
+    //height: 26.3rem;
+    background: #FFFFFF;
+    border-radius: 1.3rem;
+    padding: 3.9rem 3.3rem;
+
+    &_line_time {
+      display: flex;
+
+      &_btime {
+        height: 4.1rem;
+        font-size: 3.1rem;
+        font-weight: bold;
+        color: #0049AE;
+        letter-spacing: .1rem;
+      }
+
+      &_stime {
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #0049AE;
+        margin-top: 1.5em;
+        line-height: 1.8rem;
+      }
+    }
+
+    &_line {
+      //width: 216px;
+      width: 100%;
+      height: .2rem;
+      background: linear-gradient(240deg, rgba(0, 77, 175, 0) 0%, rgba(0, 77, 174, 0.67) 47%, #004DAE 100%);
+      margin-bottom: 2.3rem;
+    }
+
+    &_title {
+      &:hover {
+        color: #0049AF;
+      }
+
+      width: 100%;
+      height: 3.8rem;
+      font-size: 1.6rem;
+      font-weight: bold;
+      color: #000000;
+      line-height: 1.9rem;
+      letter-spacing: .1rem;
+      margin-bottom: .6rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 2; //显示的行
+    }
+
+    &_content {
+      width: 100%;
+      height: 7rem;
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: #777777;
+      line-height: 1.8rem;
+      letter-spacing: .1rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp: 4; //显示的行
+    }
+  }
+
+  .more {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 2.3rem;
+    margin-top: 2.6rem;
+    padding-bottom: 2.6rem;
+    cursor: pointer;
+
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+}
+
+</style>

src/views/index/components/bottom.vue

@@ -21,7 +21,7 @@
               <td>
                 <div class="right one">
                   <div class="table_tr_left">{{ $t('message.employees') }}</div>
-                  <div class="table_tr_right">{{data.worker}}人</div>
+                  <div class="table_tr_right">{{data.worker}}{{$t('message.person')}}</div>
                 </div>
               </td>
             </tr>
@@ -29,7 +29,7 @@
               <td>
                 <div class="right tow">
                   <div class="table_tr_left">{{ $t('message.number_students') }}</div>
-                  <div class="table_tr_right">{{data.students}}人</div>
+                  <div class="table_tr_right">{{data.students}}{{$t('message.person')}}</div>
                 </div>
               </td>
             </tr>
@@ -37,7 +37,7 @@
               <td>
                 <div class="right three">
                   <div class="table_tr_left">{{ $t('message.graduate_tutor') }}</div>
-                  <div class="table_tr_right">{{data.postgraduateTutor}}人</div>
+                  <div class="table_tr_right">{{data.postgraduateTutor}}{{$t('message.person')}}</div>
                 </div>
               </td>
             </tr>
@@ -45,7 +45,7 @@
               <td>
                 <div class="right fourth">
                   <div class="table_tr_left">{{ $t('message.research_team') }}</div>
-                  <div class="table_tr_right">{{data.scientificTeam}}人</div>
+                  <div class="table_tr_right">{{data.scientificTeam}}{{$t('message.pics')}}</div>
                 </div>
               </td>
             </tr>
@@ -53,15 +53,15 @@
               <td>
                 <div class="right five">
                   <div class="table_tr_left">{{ $t('message.high_level_talents') }}</div>
-                  <div class="table_tr_right">{{data.highLevelTalents}}个</div>
+                  <div class="table_tr_right">{{data.highLevelTalents}}{{$t('message.person')}}</div>
                 </div>
               </td>
             </tr>
             <tr>
               <td>
-                <div class="right sex">
+                <div class="right six">
                   <div class="table_tr_left">{{ $t('message.major_projects') }}</div>
-                  <div class="table_tr_right">{{data.majorProjects}}个</div>
+                  <div class="table_tr_right">{{data.majorProjects}}{{$t('message.pics')}}</div>
                 </div>
               </td>
             </tr>
@@ -94,12 +94,12 @@ export default {
 <style scoped lang="scss">
 
 .bottom {
-  margin-top: 2rem;
+  //margin-top: 2rem;
   background-image: url('../../../assets/index/bottom/sy_bj4.png');
   padding-bottom: 4rem;
 
   .table {
-    margin: 4rem 0 0 0;
+    //margin: 4rem 0 0 0;
     width: 100%;
 
     tr {
@@ -145,7 +145,7 @@ export default {
       height: 6.8rem;
       clear: left;
       position: relative;
-      color: #FFFFFF;
+
 
       .table_tr_left {
         position: absolute;
@@ -167,34 +167,58 @@ export default {
     }
 
     .one {
-      background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
-    }
-
-    .tow {
-      margin-left: 6rem;
-      background-image: url("../../../assets/index/bottom/sy_icon_yjs.png");
-    }
-
-    .three {
-      margin-left: 12rem;
-      background-image: url("../../../assets/index/bottom/sy_icon_kytd.png");
-    }
-
-    .fourth {
-      margin-left: 18rem;
-      background-image: url("../../../assets/index/bottom/sy_icon_gccrc.png");
-    }
-
-    .five {
-      margin-left: 12rem;
+      color: #FFFFFF;
       background-image: url("../../../assets/index/bottom/sy_icon_gzrs.png");
     }
-
-    .sex {
+    .one:hover{
+      background-image: url("../../../assets/index/bottom/sy_icon_gzrs1.png");
+        color:#2E67C8;
+    }
+    .tow {
+      color: #FFFFFF;
       margin-left: 6rem;
       background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
     }
-
+    .tow:hover {
+      background-image: url("../../../assets/index/bottom/sy_icon_zxxs2.png");
+        color:#2E67C8;
+    }
+    .three {
+      color: #FFFFFF;
+      margin-left: 12rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_yjs.png");
+    }
+    .three:hover {
+      background-image: url("../../../assets/index/bottom/sy_icon_yjs3.png");
+        color:#2E67C8;
+    }
+    .fourth {
+      color: #FFFFFF;
+      margin-left: 18rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_kytd.png");
+    }
+    .fourth:hover {
+      background-image: url("../../../assets/index/bottom/sy_icon_kytd4.png");
+        color:#2E67C8;
+    }
+    .five {
+      color: #FFFFFF;
+      margin-left: 12rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_gccrc.png");
+    }
+    .five:hover {
+      background-image: url("../../../assets/index/bottom/sy_icon_gccrc5.png");
+        color:#2E67C8;
+    }
+    .six {
+      color: #FFFFFF;
+      margin-left: 6rem;
+      background-image: url("../../../assets/index/bottom/sy_icon_zdxm.png");
+    }
+    .six:hover{
+      background-image: url("../../../assets/index/bottom/sy_icon_zdxm6.png");
+        color:#2E67C8;
+    }
   }
 
 }

src/views/index/components/carousel.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-row>
+    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+      <div class="slideshow">
+        <el-carousel trigger="click" height="38vw">
+          <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
+            <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
+              <img :src="item.imgurl" alt="">
+<!--              <div class="bottom_title">-->
+<!--                <el-row>-->
+<!--                  <el-col :offset="2" :span="18">-->
+<!--                    {{ item.title }}-->
+<!--                  </el-col>-->
+<!--                </el-row>-->
+<!--              </div>-->
+            </div>
+            <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
+              <img :src="item.imgurl" alt="">
+<!--              <div class="bottom_title">-->
+<!--                <el-row>-->
+<!--                  <el-col :offset="2" :span="18">-->
+<!--                    {{ item.enTitle }}-->
+<!--                  </el-col>-->
+<!--                </el-row>-->
+<!--              </div>-->
+            </div>
+          </el-carousel-item>
+        </el-carousel>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {banner} from "@/api";
+
+export default {
+  name: "carousel",
+  data() {
+    return {
+      bannerDate: [],
+    }
+  },
+  created() {
+    this.getBanner()
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getBanner() {
+      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
+        this.bannerDate = res.data
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../css/comment.css';
+
+.slideshow {
+  width: 100%;
+
+  .el-carousel__arrow {
+    top: 93%;
+    display: block;
+  }
+
+  .bottom_title {
+    z-index: 99;
+    width: 100%;
+    height: 3.6vw;
+    background: #1956BC;
+    opacity: 0.89;
+    position: absolute;
+    bottom: 0;
+    line-height: 3.6vw;
+    font-size: 2rem;
+    font-family: "微软雅黑";
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+
+  img {
+    width: 100%;
+
+  }
+}
+
+</style>

src/views/index/components/news_center.vue

@@ -2,234 +2,343 @@
 <template>
   <div class="news_center">
     <div class="headline">
-      <div class="hr_div">
-        <div class="hr_line_left">
-        </div>
-        <div class="hr_dot_left">
-        </div>
-      </div>
       <div class="title">
-        {{ $t('message.news_ceter') }}
+        {{ $t("message.news_ceter") }}
+        <span class="vertica_line"></span>
+        <div class="news_center_english">
+          <span class="">NEWS</span>
+          <span class="">CENTER</span>
+        </div>
       </div>
-      <div class="hr_div">
-        <div class="hr_line_right">
-        </div>
-        <div class="hr_dot_right">
-        </div>
+      <div class="more" @click="lookMore()">
+        <span class="more_text">更多</span>
+        <img src="../../../assets/index/news_center/gd_icon.png" alt="">
       </div>
     </div>
 
-
-    <!--录播图-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
-        <div class="slideshow">
-          <el-carousel trigger="click" height="23.3vw">
-            <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
-              <div v-show="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
-                <img :src="item.imgurl" alt="">
-                <div class="bottom_title">
-                  <el-row>
-                    <el-col :offset="2" :span="18">
-                      {{ item.title }}
-                    </el-col>
-                  </el-row>
-                </div>
-              </div>
-              <div v-show="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
-                <img :src="item.imgurl" alt="">
-                <div class="bottom_title">
-                  <el-row>
-                    <el-col :offset="2" :span="18">
-                      {{ item.enTitle }}
-                    </el-col>
-                  </el-row>
-                </div>
-              </div>
-            </el-carousel-item>
-          </el-carousel>
-        </div>
-      </el-col>
-    </el-row>
     <!--轮播图下的新闻-->
-
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <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" @click="getArticle(news)">
-              <div class="news_context_img">
-                <img :src="news.imgurl" alt="">
-              </div>
-              <div class="news_context_text">
-                {{ news.title }}
+    <div class="news">
+      <el-row>
+        <el-col :span="6" v-for="(item,index) in newsData" :key="index" :class="'border_right-' + (index + 1)">
+          <div class="news_context" @click="getArticle(item)">
+            <div class="news_context_img">
+              <img v-if="item.imgurl" :src="item.imgurl" alt="">
+            </div>
+            <div class="news_context_text" >
+              <div class="news_context_text-title">{{ item.title }}</div>
+              <div v-if="item.description" class="news_context_text-content">{{item.description}}</div>
+              <div v-if="!item.description" class="news_context_text-content" v-html="item.content"></div>
+              <div class="news_context_time">
+                <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                <span class="time">{{ getDateTime(item.publishTime) }}</span>
               </div>
             </div>
-          </el-col>
-        </el-row>
-      </el-col>
-    </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
 
-    <!--更多-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div class="more" @click="lookMore(newsDate[0])">
-          {{ $t('message.more') }}
-        </div>
-<!--        <div class="more_img">-->
-<!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
-<!--        </div>-->
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-import {banner, getArticleList} from "@/api";
-import {toArticle,lookMoreComment} from "@/utils/sist";
+import {getArticleList} from "@/api";
+import {toArticle} from "@/utils/sist";
 import {lookMoreFixedComment} from "../../../utils/sist";
 
 export default {
   name: "news_center",
   data() {
     return {
-      newsDate: [],
-      bannerDate: [],
-      width: document.documentElement.clientWidth > 992,
-    }
+      newsData: [],
+      width: document.documentElement.clientWidth > 992
+    };
   },
   created() {
-    this.getList()
-    this.getBanner()
+    this.getList();
   },
   methods: {
     clickTo(link) {
       //console.log(link)
       window.location.href = link;//当前标签页
     },
-    getArticle(news){
-      toArticle(news,this.width)
+    getArticle(news) {
+      toArticle(news, this.width);
     },
-    lookMore(news) {
-      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w",this.width)
+    lookMore() {
+      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
     },
     getList() {
       getArticleList({
-        type: "NEd5n92EMIpyyBslaNqsRgE",
+        navId: "DpHktHeXJp3MX-FZoZdjz3w",
         pageNum: 1,
         pageSize: 4
       }).then(res => {
-        this.newsDate = res.rows
-      })
+        this.newsData = res.rows;
+      });
+    },
+    getDateTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1
+      if (month < 10){
+        month = "0"+month
+      }
+      let day = time.getDate();
+      if (day<10){
+        day = "0"+ day
+      }
+      return year + "-" + month + "-" + day;
     },
-    getBanner() {
-      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
-        this.bannerDate = res.data
-      })
-    }
   },
-}
+};
 </script>
+
 <style>
 .el-carousel__indicators {
   display: none;
 }
+
+.grid-content {
+  height: 1px !important;
+}
 </style>
 
 <style scoped lang="scss">
-@import '../css/comment.css';
+@media screen and (max-width: 1200px) {
+  .news {
+    width: 100rem !important;
+  }
+  .headline {
+    width: 100rem !important;
+  }
+}
+
+@media screen and (max-width: 1050px) {
+  .news {
+    width: 90rem !important;
+  }
+  .headline {
+    width: 90rem !important;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .news {
+    width: 80rem !important;
+  }
+  .headline {
+    width: 80rem !important;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .news {
+    width: 80rem !important;
+  }
+  .headline {
+    width: 80rem !important;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .news {
+    width: 70rem !important;
+  }
+  .headline {
+    width: 70rem !important;
+  }
+  .news_context {
+    padding-bottom: .5rem !important;
+  }
+}
 
 .news_center {
+  background-image: url("../../../assets/index/news_center/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  //width: 100%;
+  //height: 61rem;
   padding-bottom: 2rem;
-}
 
-.slideshow {
-  width: 100%;
+  .headline {
+    display: flex;
+    //width: 100%;
+    justify-content: space-between;
+    width: 115.4rem;
+    margin: 0 auto;
 
-  .el-carousel__arrow {
-    top: 93%;
-    display: block;
+    .title {
+      display: flex;
+      width: 24rem;
+      height: 5.9rem;
+      line-height: 5.9rem;
+      border-radius: 1.3rem 0 0 1.3rem;
+      font-size: 3rem;
+      font-weight: 500;
+      letter-spacing: .1rem;
+      color: #FFFFFF;
+      text-align: left;
+      background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
+      padding-left: 1.9rem;
+      margin-top: 2rem;
+
+      .vertica_line {
+        width: .1rem;
+        height: 2.5rem;
+        border: .1rem solid #FFFFFF;
+        margin: 1.7rem 1.4rem;
+      }
+
+      .news_center_english {
+        width: 5.3rem;
+        height: 2.8rem;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 1.4rem;
+        margin-top: 1.6rem;
+
+        span {
+          float: left;
+        }
+      }
+    }
   }
 
-  .bottom_title {
-    z-index: 99;
-    width: 100%;
-    height: 3.6vw;
-    background: #1956BC;
-    opacity: 0.89;
-    position: absolute;
-    bottom: 0;
-    line-height: 3.6vw;
-    font-size: 2rem;
-    font-family: "微软雅黑";
-    font-weight: 400;
-    color: #FFFFFF;
-  }
+  .more {
+    display: flex;
+    height: 3.7rem;
+    margin-top: 4rem;
+    cursor: pointer;
 
-  img {
-    width: 100%;
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      line-height: 2.3rem;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
   }
 }
 
+.border_right-4{
+  .news_context{
+    .news_context_text{
+      border-right: none!important;
+    }
+  }
+}
+
+
 .news {
+  margin: 4rem auto 0 auto;
+  width: 115.4rem;
+  //height: 60.4%;
+  background-color: #fff;
+  //margin-top: 4rem;
 
-  .news_context:hover {
-    box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
-  }
 
   .news_context {
     cursor: pointer;
-    width: 23rem;
-    height: 23rem;
-    margin: 3rem auto;
-    border-radius: 1.4rem;
-    border: 0.1rem solid #CAD9F3;
+    //width: 28rem;
+    width: 100%;
+    //height: 35.1rem;
+    padding-bottom: 2rem;
+
+    //&:hover {
+    //  box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
+    //}
 
     .news_context_img {
-      height: 62%;
+      height: 42.8%;
       width: 100%;
+      overflow: hidden;
 
       img {
+        &:hover {
+          transform: scale(1.3);
+        }
+
         width: 100%;
+        transition: all 1s;
       }
     }
 
+
     .news_context_text {
-      height: 24%;
-      width: 80%;
-      font-size: 1.6rem;
-      font-weight: 400;
-      text-align: center;
-      color: #262626;
-      margin: 0 auto;
-      padding: 1rem 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display:-webkit-box; //作为弹性伸缩盒子模型显示。
-      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-      -webkit-line-clamp:3; //显示的行
+      margin: 2rem 0 2rem 2rem;
+      padding-right: 2rem;
+      border-right: 1px solid #CCCCCC;
+      .news_context_text-title {
+        &:hover {
+          color: #0040A4;
+        }
+
+        width: 100%;
+        height: 2.1rem;
+        font-size: 1.6rem;
+        font-weight: bold;
+        color: #262626;
+        line-height: 2.1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 1; //显示的行
+      }
+
+      .news_context_text-content {
+        width: 100%;
+        height: 5.3rem;
+        font-size: 1.4rem;
+        font-weight: 500;
+        color: #777777;
+        line-height: 1.8rem;
+        letter-spacing: .1rem;
+        margin-top: 1.6rem;
+        margin-bottom: 2.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 3; //显示的行
+      }
+
+      .news_context_time {
+        display: flex;
+
+        .icon {
+          margin-right: .4rem;
+
+          img {
+            width: 1.1rem;
+            height: 1.1rem;
+          }
+        }
+
+        .time {
+          height: 1.4rem;
+          font-size: 1rem;
+          font-weight: 500;
+          color: #0040A4;
+          line-height: 1.4rem;
+        }
+      }
+
     }
   }
 }
 
-@media screen and (min-width: 1100px) and (max-width: 1400px) {
-  .news_context {
-    width: 20rem !important;
-    height: 20rem !important;
-
-    .news_context_img {
-      height: 12.5rem !important;
-    }
-  }
-}
 
 </style>

src/views/index/components/news_center_new.vue

@@ -0,0 +1,349 @@
+<script src="../../../utils/sist.js"></script>
+<template>
+  <div class="news_center">
+    <el-row>
+      <el-col :span="5">
+        <div class="grid-content"></div>
+      </el-col>
+      <el-col :span="14">
+        <div class="headline">
+          <div class="title">
+            <!--        {{ $t("message.news_ceter") }}-->
+            新闻中心
+            <span class="vertica_line"></span>
+            <div class="news_center_english">
+              <span class="">NEWS</span>
+              <span class="">CENTER</span>
+            </div>
+          </div>
+          <div class="more">
+            <span class="more_text">更多</span>
+            <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <!--轮播图下的新闻-->
+    <el-row type="flex" justify="center">
+      <el-col :xs="22" :sm="22" :md="18" :lg="14" :xl="14" class="news">
+        <el-row>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text" style="border-right: 1px solid #CCCCCC;">
+                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="news_context">
+              <div class="news_context_img">
+                <img src="../../../assets/index/news_center/t4.png" alt="">
+              </div>
+              <div class="news_context_text">
+                <div class="news_context_text-title">信息引领，勇于拼搏—信息搏…</div>
+                <div class="news_context_text-content">为促进学生学业发展学生学业学生学业学生学业、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展…
+                </div>
+                <div class="news_context_time">
+                  <div class="icon"><img src="../../../assets/index/news_center/shijian.png" alt=""></div>
+                  <span class="time">2022-10-2</span>
+                </div>
+                <div class="vline"></div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+
+  </div>
+</template>
+
+<script>
+import {banner, getArticleList} from "@/api";
+import {toArticle, lookMoreComment} from "@/utils/sist";
+import {lookMoreFixedComment} from "../../../utils/sist";
+
+export default {
+  name: "news_center",
+  data() {
+    return {
+      newsDate: [],
+      bannerDate: [],
+      width: document.documentElement.clientWidth > 992
+    };
+  },
+  created() {
+    this.getList();
+    this.getBanner();
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getArticle(news) {
+      toArticle(news, this.width);
+    },
+    lookMore(news) {
+      lookMoreFixedComment("DpHktHeXJp3MX-FZoZdjz3w", this.width);
+    },
+    getList() {
+      getArticleList({
+        type: "NEd5n92EMIpyyBslaNqsRgE",
+        pageNum: 1,
+        pageSize: 4
+      }).then(res => {
+        this.newsDate = res.rows;
+      });
+    },
+    getBanner() {
+      banner("NEd5n92EMIpyyBslaNqsRgE").then(res => {
+        this.bannerDate = res.data;
+      });
+    }
+  }
+};
+</script>
+
+<style>
+.el-carousel__indicators {
+  display: none;
+}
+
+.grid-content {
+  height: 1px !important;
+}
+</style>
+
+<style scoped lang="scss">
+.news_center {
+  background-image: url("../../../assets/index/news_center/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  //width: 100%;
+  height: 61rem;
+
+  .headline {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .title {
+      display: flex;
+      width: 24rem;
+      height: 5.9rem;
+      line-height: 5.9rem;
+      border-radius: 1.3rem 0 0 1.3rem;
+      font-size: 3rem;
+      font-weight: 500;
+      letter-spacing: .1rem;
+      color: #FFFFFF;
+      text-align: left;
+      background: linear-gradient(240deg, rgba(0, 75, 177, 0) 0%, rgba(6, 79, 175, 0.64) 44%, #0A51AE 100%);
+      padding-left: 1.9rem;
+      margin-top: 6.3rem;
+
+      .vertica_line {
+        width: .1rem;
+        height: 2.5rem;
+        border: .1rem solid #FFFFFF;
+        margin: 1.7rem 1.4rem;
+      }
+
+      .news_center_english {
+        width: 5.3rem;
+        height: 2.8rem;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 1.4rem;
+        margin-top: 1.6rem;
+
+        span {
+          float: left;
+        }
+      }
+    }
+  }
+
+  .more {
+    display: flex;
+    height: 3.7rem;
+    margin-top: 9.8rem;
+    cursor: pointer;
+
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      line-height: 2.3rem;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+}
+
+.news {
+  //width: 106.3rem;
+  height: 60.4%;
+  background-color: #fff;
+  margin-top: 4rem;
+
+
+  .news_context {
+    cursor: pointer;
+    //width: 28rem;
+    width: 100%;
+    height: 36.9rem;
+
+    &:hover {
+      box-shadow: 0 0 0.7rem 0 rgba(18, 69, 155, 0.59);
+    }
+
+    .news_context_img {
+
+      height: 42.8%;
+      width: 100%;
+      overflow: hidden;
+
+      img {
+        &:hover {
+          transform: scale(1.3);
+        }
+
+        width: 100%;
+        transition: all 1s;
+      }
+    }
+
+    //.news_context_text-title:last-child{
+    //  border-right: 1px solid red;
+    //}
+
+    .news_context_text {
+      margin: 4rem 0 4rem 2rem;
+      padding-right: 2rem;
+      //border-right: 1px solid #CCCCCC;
+      .news_context_text-title {
+        &:hover {
+          color: #0040A4;
+        }
+
+        width: 100%;
+        height: 2.1rem;
+        font-size: 1.5rem;
+        font-weight: 500;
+        color: #262626;
+        line-height: 2.1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 1; //显示的行
+      }
+
+      .news_context_text-content {
+
+        width: 100%;
+        height: 5.3rem;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #777777;
+        line-height: 1.8rem;
+        letter-spacing: .1rem;
+        margin-top: 1.6rem;
+        margin-bottom: 2.5rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 3; //显示的行
+      }
+
+      .news_context_time {
+        display: flex;
+
+        .icon {
+          margin-right: .4rem;
+
+          img {
+            width: 1.1rem;
+            height: 1.1rem;
+          }
+        }
+
+        .time {
+          width: 6rem;
+          height: 1.4rem;
+          font-size: 1rem;
+          font-weight: 500;
+          color: #0040A4;
+          line-height: 1.4rem;
+        }
+      }
+
+    }
+  }
+}
+
+//@media screen and (min-width: 1100px) and (max-width: 1400px) {
+//  .news_context {
+//    width: 20rem !important;
+//    height: 20rem !important;
+//
+//    .news_context_img {
+//      height: 12.5rem !important;
+//    }
+//  }
+//}
+
+</style>

src/views/index/components/party_building_activities.vue

@@ -1,50 +1,19 @@
 <template>
-  <div class="party_building_activities" v-bind:style="{backgroundImage:'url('+bgc+')'}">
-    <!--title-->
-
+  <div class="party_building_activities">
+    <!--  党群工作  -->
     <div class="headline">
-      <div class="hr_div">
-        <div class="hr_line_left">
-        </div>
-        <div class="hr_dot_left">
-        </div>
+      <div class="line_left">
+        <img src="../../../assets/index/party_building_activities/gangh.png" alt="">
       </div>
       <div class="title">
-        {{ $t('message.party') }}
-        <!--党群工作-->
+        党群工作
       </div>
-      <div class="hr_div">
-        <div class="hr_line_right">
-        </div>
-        <div class="hr_dot_right">
-        </div>
+      <div class="line_right">
+        <img src="../../../assets/index/party_building_activities/gangh3.png" alt="">
       </div>
     </div>
-    <!--<el-row>-->
-    <!--  <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">-->
-    <!--    <div class="grid-content"></div>-->
-    <!--  </el-col>-->
-    <!--  -->
-    <!--  <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">-->
-    <!--    <div class="title">-->
-    <!--      &lt;!&ndash;          {{ $t('message.news_center') }}&ndash;&gt;-->
-    <!--      党群工作-->
-    <!--    </div>-->
-    <!--    <el-row>-->
-    <!--      <el-col :span="8">-->
-    <!--        <hr class="hr">-->
-    <!--      </el-col>-->
-    <!--      <el-col :span="8">-->
-    <!--        <div class="divider_text">Party Building Activities</div>-->
-    <!--      </el-col>-->
-    <!--      <el-col :span="8">-->
-    <!--        <hr class="hr">-->
-    <!--      </el-col>-->
-    <!--    </el-row>-->
-    <!--  </el-col>-->
-    <!--</el-row>-->
-    <!--轮播图-->
 
+    <!--轮播图-->
     <el-row>
       <el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
         <div class="grid-content"></div>
@@ -53,82 +22,17 @@
         <SlideshowCard/>
       </el-col>
     </el-row>
-    <!--更多-->
 
-
-    <div class="headline">
-      <!--      <div style="background: #DA2D2D;color: #E6E6E6;" class="more">-->
-      <!--        {{ $t('message.more') }}-->
-      <!--      </div>-->
-      <!--<div class="more_img">-->
-      <!--  <img src="@/assets/index/party_building_activities/sy_icon_zhdh.png" alt="">-->
-      <!--</div>-->
-      <div class="hr_div">
-        <div class="hr_line_left">
-        </div>
-        <div class="hr_dot_left">
-        </div>
-      </div>
-      <div class="hr_text" style="color:#DA2D2D;">
-        {{ $t('message.party_education') }}
-        <!--党史教育-->
-      </div>
-      <div class="hr_div">
-        <div class="hr_line_right">
-        </div>
-        <div class="hr_dot_right">
-        </div>
-      </div>
+    <div class="more" @click="lookMore()">
+      <span class="more_text">更多</span>
+      <img src="../../../assets/index/party_building_activities/gangduohh.png" alt="">
     </div>
 
-
-    <!--党史教育内容-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
-        <div class="phe_row" v-for="(item,index) in listData" :key="index">
-          <el-row>
-            <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
-              <div class="phe_img">
-                <img :src="item.imgurl" alt="">
-              </div>
-            </el-col>
-            <el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17" :span="17">
-              <div class="phe_context" @click="getArticle(item)">
-                <div class="phe_context_title">{{ item.title }}</div>
-                <div class="phe_context_text" v-html="item.content">
-                </div>
-              </div>
-            </el-col>
-            <el-col :xs="22" :sm="22" :md="22" :lg="3" :xl="3">
-              <div class="phe_time">{{ getTime(item.publishTime) }}</div>
-            </el-col>
-          </el-row>
-          <hr v-if="index != listData.length-1" style="border: 0.1rem solid #E6E6E6;" class="hr">
-        </div>
-      </el-col>
-    </el-row>    <!--更多-->
-    <el-row>
-      <el-col :xs="1" :sm="2" :md="4" :lg="6" :xl="6">
-        <div class="grid-content"></div>
-      </el-col>
-      <el-col class="headline" :xs="22" :sm="20" :md="16" :lg="12" :xl="12">
-        <div style="background: #DA2D2D;color: #E6E6E6;" class="more" @click="lookMore(listData[0])">
-          {{ $t('message.more') }}
-        </div>
-        <!--        <div class="more_img">-->
-        <!--          <img src="@/assets/index/sy_icon_zhdl.png" alt="">-->
-        <!--        </div>-->
-      </el-col>
-    </el-row>
-
   </div>
 </template>
 
 <script>
-import SlideshowCard from './slideshow_card'
+import SlideshowCard from "./slideshow_card";
 import {getArticleList} from "@/api";
 import {toArticle, lookMoreComment} from "@/utils/sist";
 import {lookMoreFixedComment} from "../../../utils/sist";
@@ -141,20 +45,19 @@ export default {
   data() {
     return {
       width: document.documentElement.clientWidth > 992,
-      listData: [],
-      bgc: require("../../../assets/index/party_building_activities/sy_bj3.png")
-    }
+      listData: []
+    };
   },
   created() {
-    this.getListData()
+    this.getListData();
   },
   methods: {
     getArticle(item) {
-      toArticle(item, this.width)
+      toArticle(item, this.width);
     },
-    lookMore(item) {
+    lookMore() {
       // lookMoreComment(item,this.width)
-      lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width)
+      lookMoreFixedComment("N8YFxHPHwy6PyHt7J-gIDCU", this.width);
     },
 
     getListData() {
@@ -163,106 +66,78 @@ export default {
         pageNum: 1,
         pageSize: 6
       }).then(res => {
-        this.listData = res.rows
-      })
+        this.listData = res.rows;
+      });
     },
     getTime(date) {
       let time = new Date(date);
       let year = time.getFullYear();
-      let month = time.getMonth() + 1
+      let month = time.getMonth() + 1;
       let day = time.getDate();
       return year + "-" + month + "-" + day;
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
 .party_building_activities {
-  background-image: url("../../../assets/index/party_building_activities/sy_bj3.png");
-  padding-top: 4rem;
-  padding-bottom: 2rem;
-}
+  background-image: url("../../../assets/index/announcements/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  //height: 55.6rem;
 
-.headline {
+  .headline {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: 3rem;
+    padding-bottom: 2rem;
 
-  .hr_line_left, .hr_line_right {
-    border-color: #DA2D2D !important;
-  }
-
-  .hr_dot_left, .hr_dot_right {
-    background-color: #DA2D2D !important;
-  }
-
-  .title {
-    background: #DA2D2D;
-  }
-
-  .divider_text {
-    color: #DA2D2D;
-  }
-
-}
-
-.hr {
-  border: .1rem solid #D13C3C;
-}
-
-.phe_row {
-  margin: 4rem 0;
-}
-
-.phe {
-  font-family: PingFangSC-Medium, PingFang SC;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-
-  .phe_img {
-    img {
-      height: 10rem;
-    }
-  }
-
-
-  .phe_context {
-    .phe_context_title {
-      overflow: hidden; //超出的文本隐藏
-      text-overflow: ellipsis; //溢出用省略号显示
-      white-space: nowrap; //溢出不换行
-      cursor: pointer;
-      font-size: 2rem;
-      font-weight: 600;
-      color: #161616;
-      letter-spacing: 2px;
+    .line_left {
+      line-height: 4.4rem;
     }
 
-    .phe_context_title:hover {
+    .title {
+      width: 12.9rem;
+      height: 4.4rem;
+      font-size: 3.1rem;
+      font-weight: 500;
       color: #DA2D2D;
+      line-height: 4.4rem;
+      letter-spacing: .1rem;
+      margin: 0 1.3rem;
     }
 
-    .phe_context_text {
-      margin-top: 0.8rem;
-      font-size: 1.6rem;
-      height: 6rem;
-      color: #565656;
-      letter-spacing: 1px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: -webkit-box; //作为弹性伸缩盒子模型显示。
-      -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-      -webkit-line-clamp: 3; //显示的行
-      span {
-        color: #565656 !important;
-      }
+    .line_right {
+      line-height: 4.4rem;
     }
   }
 
-  .phe_time {
-    text-align: right;
-    font-size: 2rem;
-    font-weight: 500;
-    color: #565656;
-    letter-spacing: 2px;
+  .more {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    height: 2.3rem;
+    margin-top: 2rem;
+    padding-bottom: 2rem;
+    cursor: pointer;
+
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #DA2D2D;
+      line-height: 2.3rem;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
   }
 }
 

src/views/index/components/slideshow_card.vue

@@ -3,23 +3,23 @@
     <ul class="ul">
       <li v-for="(item,index) in bannerDate" :key="index">
         <div v-if="$i18n.locale  === 'cn'" @click="clickTo(item.link)">
-          <div class="card_img" >
+          <div class="card_img">
             <img
               :src="item.imgurl"
               alt=""/>
           </div>
           <div class="card_title">
-            {{item.title}}
+            {{ item.title }}
           </div>
         </div>
         <div v-if="$i18n.locale  === 'en'" @click="clickTo(item.enLink)">
-          <div class="card_img" >
+          <div class="card_img">
             <img
               :src="item.imgurl"
               alt=""/>
           </div>
           <div class="card_title">
-            {{item.enTitle}}
+            {{ item.enTitle }}
           </div>
         </div>
       </li>
@@ -46,7 +46,7 @@ export default {
 //默认值
         classArray: ["one", "two", "three", "four", "five", "six"],
         // classArray: ["one", "two", "three", "four", "five"],
-        leftSlider: true,
+        leftSlider: true
       },
       bannerWrap: null,
       time: null,
@@ -54,20 +54,25 @@ export default {
       classlist: null,
       leftBtn: null,
       rightBtn: null,
-      bannerDate:[]
+      bannerDate: []
     };
   },
   beforeCreate() {
-    banner("STCplDRCWAA3zcFE0EBTcQI").then(res=>{
-      this.bannerDate = res.data
-    })
+    banner("STCplDRCWAA3zcFE0EBTcQI").then(res => {
+      this.bannerDate = res.data;
+    });
   },
   created() {
   },
   methods: {
-    clickTo(link){
-      //console.log(link)
-      window.location.href=link;//当前标签页
+    clickTo(link) {
+      // let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+      window.location.href = link
+      // if (userAgent.indexOf("Safari") > -1) {
+      //   window.location.href = link
+      // } else {
+      //   window.open(link, "_blank")
+      // }
     },
     constructor() {
       this.bannerWrap = document.getElementsByClassName("banner-card")[0];
@@ -104,7 +109,7 @@ export default {
     },
 // 定时器自动切换
     timer() {
-      this.time = setInterval(this.leftMove.bind(this), 1000);
+      this.time = setInterval(this.leftMove.bind(this), 2000);
     },
 // 鼠标移入移出事件
     listenMouseEvent() {
@@ -127,13 +132,13 @@ export default {
       this.rightBtn.addEventListener("click", () => {
         this.rightMove();
       });
-    },
+    }
   },
   mounted() {
-    setTimeout(() =>{
+    setTimeout(() => {
       this.constructor();
-    },1000);
-  },
+    }, 1000);
+  }
 };
 
 </script>
@@ -141,7 +146,7 @@ export default {
 
 .banner-card {
   width: 100%;
-  height: 50rem;
+  height: 29.4rem;
   //background: #f5f5f5;
   position: relative;
 
@@ -156,8 +161,8 @@ export default {
 
   li {
     border-radius: 2rem;
-    width: 40rem;
-    height: 40rem;
+    width: 26.5rem;
+    height: 25.4rem;
     position: absolute;
     top: 2.5rem;
     list-style-type: none;
@@ -180,15 +185,16 @@ export default {
 
     .card_title {
       width: 90%;
-      font-size: 2rem;
+      font-size: 1.7rem;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #1C1C1C;
       text-align: left;
       //width: 36rem;
-      margin: 2rem auto;
-      overflow:hidden; //超出的文本隐藏
-      text-overflow:ellipsis; //溢出用省略号显示
+      //padding: 1rem 0;
+      margin: 0 auto;
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
       display: -webkit-box; //作为弹性伸缩盒子模型显示。
       -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
       -webkit-line-clamp: 2; //显示的行
@@ -197,39 +203,39 @@ export default {
   }
 }
 
-.one {
+.five {
   z-index: 98;
-  left: -6rem;
+  left: 1%;
   transform: scale(0.8);
 }
 
-.two {
+.six {
   z-index: 99;
-  left: 14rem;
+  left: 21%;
   transform: scale(0.9);
 }
 
-.three {
-  left: 30rem;
+.one {
+  left: 37%;
   z-index: 100;
   transform: scale(1);
   border: 1px solid #DA2D2D;
 }
 
-.four {
+.two {
   z-index: 99;
-  left: 48rem;
+  left: 53%;
   transform: scale(0.9);
 }
 
-.five {
-  left: 66rem;
+.three {
+  left: 73%;
   z-index: 98;
   transform: scale(0.8);
 }
 
-.six {
-  left: 74rem;
+.four {
+  left: 37%;
   z-index: 96;
   transform: scale(0.7);
 }
@@ -257,7 +263,7 @@ export default {
 
 @media screen and (min-width: 1100px) and (max-width: 1400px) {
   .banner-card {
-    height: 34rem;
+    height: 32rem;
 
     li {
       width: 28rem !important;
@@ -269,28 +275,29 @@ export default {
       }
     }
 
-    .one {
-      left: -2.8rem;
-    }
-
-    .two {
-      left: 10rem;
-    }
-
-    .three {
-      left: 24rem;
-    }
-
-    .four {
-      left: 38rem;
-    }
 
     .five {
-      left: 50.3rem;
+      left: -1%;
     }
 
     .six {
-      left: 80rem;
+      left: 15%;
+    }
+
+    .one {
+      left: 31%;
+    }
+
+    .two {
+      left: 47%;
+    }
+
+    .three {
+      left: 63%;
+    }
+
+    .four {
+      left: 31%;
     }
   }
 
@@ -299,43 +306,43 @@ export default {
 
 @media screen and (max-width: 1100px) {
   .banner-card {
-    height: 34rem;
+    height: 26rem;
 
     li {
       width: 22rem !important;
-      height: 22rem !important;
+      height: 23rem !important;
 
       .card_title {
         font-size: 1.6rem;
-        margin: 1rem 1rem;
+        margin: 0.6rem 1rem;
         display: -webkit-box; //作为弹性伸缩盒子模型显示。
         -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
         -webkit-line-clamp: 2; //显示的行
       }
     }
 
-    .one {
-      left: -2.6rem;
-    }
-
-    .two {
-      left: 6rem;
-    }
-
-    .three {
-      left: 16rem;
-    }
-
-    .four {
-      left: 26rem;
-    }
-
     .five {
-      left: 34rem;
+      left: 4%;
     }
 
     .six {
-      left: 80rem;
+      left: 17%;
+    }
+
+    .one {
+      left: 30%;
+    }
+
+    .two {
+      left: 43%;
+    }
+
+    .three {
+      left: 56%;
+    }
+
+    .four {
+      left: 10%;
     }
   }
 }

src/views/index/components/undergraduate_and_graduate.vue

@@ -0,0 +1,277 @@
+<template>
+  <div class="undergraduate_and_graduate">
+    <el-row type="flex" justify="center">
+      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="14">
+        <el-row class="undergraduate_and_graduate_bgc">
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="undergraduate headline">
+              <img class="undergraduate_img" src="../../../assets/index/undergraduate_and_graduate/benka.png" alt=""/>
+              <span>{{ $t("message.undergraduate_education") }}</span>
+            </div>
+            <div class="vline">
+              <div class="undergraduate_content" v-for="(item,index) in undergraduateData" :key="index"
+                   @click="getArticle(item)">
+                <div class="undergraduate_content_time">
+                  {{ getMonthTime(item.publishTime) }}
+                </div>
+                <div class="undergraduate_content_text">
+                  {{ item.title }}
+                </div>
+              </div>
+              <div class="more" @click="lookMore('KW_T7dJ2lt5sC-RJZSnPtk0')">
+                <span class="more_text">更多</span>
+                <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+              </div>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+            <div class="graduate headline">
+              <img class="graduate_img" src="../../../assets/index/undergraduate_and_graduate/boshimaobeifen.png"
+                   alt=""/>
+              <span>{{ $t("message.postgraduate_education") }}</span>
+            </div>
+            <div class="undergraduate_content" v-for="(item,index) in graduateData" :key="index"
+                 @click="getArticle(item)">
+              <div class="undergraduate_content_time">
+                {{ getMonthTime(item.publishTime) }}
+              </div>
+              <div class="undergraduate_content_text">
+                {{ item.title }}
+              </div>
+            </div>
+            <div class="more" @click="lookMore('1yaM_T4qiBsFULvLXHbMflQ')">
+              <span class="more_text">更多</span>
+              <img src="../../../assets/index/news_center/gd_icon.png" alt="">
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getArticleList} from "@/api";
+import {toArticle} from "@/utils/sist";
+import {lookMoreFixedComment} from "../../../utils/sist";
+
+export default {
+  name: "undergraduate_and_graduate",
+  data() {
+    return {
+      undergraduateData: [],
+      graduateData: [],
+      width: document.documentElement.clientWidth > 992
+    }
+  },
+
+  created() {
+    this.getUndergraduateList();
+    this.getGraduateList();
+  },
+  methods: {
+    clickTo(link) {
+      //console.log(link)
+      window.location.href = link;//当前标签页
+    },
+    getArticle(news) {
+      console.log(news)
+      toArticle(news, this.width);
+    },
+    lookMore(str) {
+      lookMoreFixedComment(str, this.width);
+    },
+    getUndergraduateList() {
+      getArticleList({
+        navId: "KW_T7dJ2lt5sC-RJZSnPtk0",
+        pageNum: 1,
+        pageSize: 5
+      }).then(res => {
+        this.undergraduateData = res.rows;
+      });
+    },
+    getGraduateList() {
+      getArticleList({
+        navId: "1yaM_T4qiBsFULvLXHbMflQ",
+        pageNum: 1,
+        pageSize: 5
+      }).then(res => {
+        this.graduateData = res.rows;
+      });
+    },
+
+    getMonthTime(date) {
+      if(typeof(date) == "string" &&  date.indexOf('-') != -1){
+        date = date.replace(/-/g,'/');
+      }
+      let time = new Date(date);
+      let month = time.getMonth() + 1
+      if (month < 10) {
+        month = "0" + month
+      }
+      let day = time.getDate();
+      if (day < 10) {
+        day = "0" + day
+      }
+      return month + "-" + day;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+
+.undergraduate_content {
+  cursor: pointer;
+}
+
+@media screen and (max-width: 960px) {
+  .undergraduate {
+    border-radius: 36px 36px 0 0 !important;
+  }
+  .graduate {
+    border-radius: 36px 36px 0 0 !important;
+  }
+  .more {
+    justify-content: center !important;
+  }
+  .vline {
+    border-right: none !important;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .undergraduate {
+    border-radius: 36px 36px 0 0 !important;
+  }
+  .graduate {
+    border-radius: 36px 36px 0 0 !important;
+  }
+  .more {
+    justify-content: center !important;
+  }
+
+  .vline {
+    border-right: none !important;
+  }
+}
+
+.undergraduate_and_graduate {
+  background-image: url("../../../assets/index/announcements/sy_bj3.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  //height: 54.2rem;
+
+  &_bgc {
+    background-color: #fff;
+    //height: 33.8rem;
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+    border-radius: 36px;
+  }
+
+  .headline {
+    display: flex;
+    background: #004AAF;
+    height: 5.6rem;
+    margin-bottom: 3.1rem;
+
+    img {
+      margin: 1.2rem 1.5rem 1.2rem 4.4rem;
+    }
+
+    span {
+      //width: 129px;
+      //height: 44px;
+      font-size: 3.1rem;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 5.4rem;
+      letter-spacing: .1rem;
+    }
+  }
+
+  .vline {
+    border-right: 1px solid #CCCCCC;
+  }
+
+  .undergraduate {
+    border-radius: 36px 0 0 0;
+
+    &_img {
+      width: 3.1rem;
+      height: 3.3rem;
+    }
+
+    &_content {
+      display: flex;
+      margin-bottom: 1.5rem;
+
+      &_time {
+        //width: 38px;
+        //height: 18px;
+        font-size: 1.3rem;
+        font-weight: 500;
+        color: #0D52B3;
+        line-height: 2.3rem;
+        margin-right: 1.5rem;
+        margin-left: 2.1rem;
+      }
+
+      &_text {
+        &:hover {
+          color: #0D52B3;
+        }
+
+        width: 83%;
+        //height: 23px;
+        font-size: 1.6rem;
+        font-weight: 500;
+        color: #000000;
+        line-height: 2.3rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 1; //显示的行
+      }
+    }
+
+  }
+
+  .more {
+    width: 100%;
+    display: flex;
+    height: 2.3rem;
+    margin-top: 3.1rem;
+    margin-left: 2.1rem;
+    cursor: pointer;
+    margin-bottom: 3rem;
+
+    .more_text {
+      font-size: 1.6rem;
+      font-weight: 500;
+      color: #8B8B8B;
+      letter-spacing: .2rem;
+    }
+
+    img {
+      width: 2.9rem;
+      height: 1.4rem;
+      margin-left: 0.8rem;
+      margin-top: .5rem;
+    }
+  }
+
+  .graduate {
+    border-radius: 0 36px 0 0;
+
+    &_img {
+      width: 4.3rem;
+      height: 3.3rem;
+    }
+  }
+}
+</style>

src/views/index/css/comment.css

@@ -4,10 +4,10 @@
 * @description：comment
 * @email: clay@hchyun.com
 */
-.headline{
-  text-align:center;
-  margin-bottom: 3rem;
-}
+/*.headline{*/
+/*  text-align:center;*/
+/*  margin-bottom: 3rem;*/
+/*}*/
 
 .hr_line_left{
   float: left;
@@ -56,15 +56,15 @@
   display: inline-block;
   width: 25rem;
 }
-.headline  .title {
-  display: inline-block;
-  padding: 1rem 3.3rem;
-  background: #1956BC;
-  border-radius: 2.95rem;
-  font-size: 2.6rem;
-  font-weight: 500;
-  color: #FFFFFF;
-}
+/*.headline  .title {*/
+/*  display: inline-block;*/
+/*  padding: 1rem 3.3rem;*/
+/*  background: #1956BC;*/
+/*  border-radius: 2.95rem;*/
+/*  font-size: 2.6rem;*/
+/*  font-weight: 500;*/
+/*  color: #FFFFFF;*/
+/*}*/
 
 .divider div {
   float: left;
@@ -77,30 +77,30 @@
   line-height: 5rem;
 }
 
-.more {
-  cursor: pointer !important;
-  width: 12.8rem;
-  height: 3.6rem;
-  background: #1956BC;
-  border-radius: 1.8rem;
-  font-size: 1.4rem;
-  font-family: "微软雅黑";
-  font-weight: 400;
-  text-align: center;
-  margin: 2rem auto;
-  line-height: 3.6rem;
-  color: #FFFFFF;
-}
+/*.more {*/
+/*  cursor: pointer !important;*/
+/*  width: 12.8rem;*/
+/*  height: 3.6rem;*/
+/*  background: #1956BC;*/
+/*  border-radius: 1.8rem;*/
+/*  font-size: 1.4rem;*/
+/*  font-family: "微软雅黑";*/
+/*  font-weight: 400;*/
+/*  text-align: center;*/
+/*  margin: 2rem auto;*/
+/*  line-height: 3.6rem;*/
+/*  color: #FFFFFF;*/
+/*}*/
 
-.more_img {
-  text-align: center;
-  margin-top: 2rem;
-  font-size: 2rem;
-}
+/*.more_img {*/
+/*  text-align: center;*/
+/*  margin-top: 2rem;*/
+/*  font-size: 2rem;*/
+/*}*/
 
-.more_img img {
-  font-size: small;
-}
+/*.more_img img {*/
+/*  font-size: small;*/
+/*}*/
 
 .hr {
   border: 0.1rem solid #E6E6E6;

src/views/index/index.vue

@@ -1,13 +1,28 @@
 <template>
   <div>
     <el-row>
-      <el-col class="interval">
+      <el-col>
+        <Carousel/>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
         <NewsCenter/>
       </el-col>
     </el-row>
     <el-row>
       <el-col>
-        <ResearchTrends/>
+        <Announcements/>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+        <AcademyAndSciences/>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col>
+        <UndergraduateAndGraduate/>
       </el-col>
     </el-row>
     <el-row v-if="$i18n.locale  === 'cn'">
@@ -15,80 +30,95 @@
         <PartyBuildingActivities/>
       </el-col>
     </el-row>
-    <el-row>
-      <el-col>
-        <TeachingStudent/>
-      </el-col>
-    </el-row>
-    <el-row v-show="width>=1100">
-      <el-col>
-        <Bottom/>
-      </el-col>
-    </el-row>
+    <!--    <el-row>-->
+    <!--      <el-col>-->
+    <!--        <ResearchTrends/>-->
+    <!--      </el-col>-->
+    <!--    </el-row>-->
+
+    <!--    <el-row>-->
+    <!--      <el-col>-->
+    <!--        <TeachingStudent/>-->
+    <!--      </el-col>-->
+    <!--    </el-row>-->
+        <el-row v-show="width>=1100">
+          <el-col>
+            <Bottom/>
+          </el-col>
+        </el-row>
   </div>
 </template>
 
 <script>
-import NewsCenter from './components/news_center'
-import PartyBuildingActivities from './components/party_building_activities.vue'
-import ResearchTrends from './components/scientific_research_trends.vue'
-import SlideshowCard from './components/slideshow_card.vue'
-import TeachingStudent from './components/teaching_student.vue'
-import Bottom from './components/bottom.vue'
+import NewsCenter from "./components/news_center";
+import Carousel from "./components/carousel";
+import Announcements from "./components/announcements";
+import AcademyAndSciences from "@/views/index/components/academy_and_sciences";
+import PartyBuildingActivities from "./components/party_building_activities.vue";
+import UndergraduateAndGraduate from "@/views/index/components/undergraduate_and_graduate";
+import ResearchTrends from "./components/scientific_research_trends.vue";
+import SlideshowCard from "./components/slideshow_card.vue";
+import TeachingStudent from "./components/teaching_student.vue";
+import Bottom from "./components/bottom.vue";
 import {getConfig} from "@/api";
 import {setAppLanguage, setLanguage} from "@/utils/sist";
 
+
 export default {
   name: "index",
   components: {
+    UndergraduateAndGraduate,
+    AcademyAndSciences,
+    Announcements,
     NewsCenter,
     PartyBuildingActivities,
     ResearchTrends,
     SlideshowCard,
     TeachingStudent,
-    Bottom
+    Bottom,
+    Carousel
   },
   data() {
     return {
       width: document.documentElement.clientWidth,
-      imageUrl:null,
+      imageUrl: null,
       iftop: false,
-      timer : true,
-    }
+      timer: true
+    };
   },
   beforeDestroy() { //及时释放
-    window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener("scroll", this.handleScroll);
   },
   created() {
-    setLanguage(this)
-    getConfig("sist_bg").then(res=>{
-      this.imageUrl = res.data
-    })
+    setLanguage(this);
+    getConfig("sist_bg").then(res => {
+      this.imageUrl = res.data;
+    });
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener("scroll", this.handleScroll);
 
-    const that = this
+    const that = this;
     window.onresize = () => {
       return (() => {
         //这里写要操作的函数
-        window.screenWidth = document.body.clientWidth
-        that.width = window.screenWidth>992
-      })()
-    }
+        window.screenWidth = document.body.clientWidth;
+        that.width = window.screenWidth > 992;
+      })();
+    };
 
 
   },
   methods: {
     handleScroll() {
-      this.iftop = window.pageYOffset > 400
-      this.$emit("input", window.pageYOffset)
+      this.iftop = window.pageYOffset > 400;
+      this.$emit("input", window.pageYOffset);
     },
     backTop() {
-      window.scrollTo({top: 0, behavior: 'smooth',})
+      window.scrollTo({top: 0, behavior: "smooth"});
     }
   }
-}
+};
 </script>
 
 <style scoped lang="scss">
@@ -109,7 +139,8 @@ export default {
     position: absolute;
     margin-left: -1.7vw;
     cursor: pointer;
-    img{
+
+    img {
       width: 100%;
     }
   }

src/views/mobile/index.vue

@@ -32,10 +32,12 @@
         </el-row>
         <el-row>
           <el-col>
-            <Introduction :value="contextData" v-if="type === 1"/>
-            <List :value="contextData" v-if="type === 2"/>
+            <Introduction :introduction="contextData" v-if="type === 1"/>
+            <List :list="contextData" v-if="type === 2 && listDataType == 0"/>
+            <SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
             <FileList :value="contextData" v-if="type === 4"/>
-            <DireData :value="contextData" v-if="type === 3"/>
+            <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
+            <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
             <Details :value="detailsData" v-if="type == null"/>
           </el-col>
         </el-row>
@@ -53,11 +55,13 @@
 import {getNode, crumbs, article} from "@/api";
 import Introduction from '@/views/content/components/Introduction.vue'
 import List from '@/views/content/components/list.vue'
+import SimpleList from '@/views/content/components/simple_list.vue'
 import DireData from '@/views/content/components/dire_data.vue'
+import DireDataTow from '@/views/content/components/dire_data_tow.vue'
 import Details from '@/views/content/components/details.vue'
 import FileList from '@/views/content/components/file_list.vue'
 import {handleTree} from "@/utils/ebts";
-import {getParentNode, setLanguage} from "@/utils/sist";
+import {getParentNode, setLanguage, getNodeMenu} from "@/utils/sist";
 
 export default {
   name: "index",
@@ -66,12 +70,16 @@ export default {
     List,
     DireData,
     Details,
-    FileList
+    FileList,
+    DireDataTow,
+    SimpleList,
   },
   data() {
     return {
       width: document.documentElement.clientWidth,
       navId: null,
+      dreDataType: "1",
+      listDataType: 0,
       navList: [],
       showIndex: 0,
       contextData: {},
@@ -90,27 +98,56 @@ export default {
     }
   },
   watch: {
+    // $route(to, from) {
+    //   console.log(to, "路由跳转")
+    //   this.secondId = this.$route.params && this.$route.params.secondId;
+    //   this.navId = this.$route.params && this.$route.params.navId;
+    //   let arcId = this.$route.query && this.$route.query.id
+    //   this.type = this.$route.query && this.$route.query.type
+    //   this.getCrumbs()
+    //   if (this.type != null&&this.type!=0){
+    //     console.log(111,this.navId)
+    //     let info = getNodeMenu(this.navId);
+    //     if (arcId != undefined) {
+    //       this.getContext(arcId)
+    //     } else {
+    //       this.getContent(info)
+    //     }
+    //     return
+    //   }
+    //   if (arcId != undefined) {
+    //     this.getContext(arcId)
+    //   } else {
+    //     this.menuData = getParentNode(this.navId)
+    //     console.log(this.menuData, "menuData")
+    //     this.getContent(this.menuData.three)
+    //   }
+    // }
     $route(to, from) {
-      console.log(to)
-
+      console.log(to, "路由跳转")
       this.secondId = this.$route.params && this.$route.params.secondId;
       this.navId = this.$route.params && this.$route.params.navId;
       let arcId = this.$route.query && this.$route.query.id
       this.type = this.$route.query && this.$route.query.type
-      if (this.type != null&&this.type!=0){
-        let info = getParentNode(this.secondId);
+      this.getCrumbs()
+      if (this.type != null && this.type != 0) {
+        //当三级菜单id没有是,使用二级
         if (arcId != undefined) {
+          console.log("getContext")
           this.getContext(arcId)
-        } else {
-          this.getContent(info.second)
+          return;
+        }
+        let info = null;
+        if (this.navId == null) {
+          console.log("1")
+          info = getParentNode(this.secondId);
+          this.getContent(info.second)
+
+        } else {
+          console.log("2")
+          info = getParentNode(this.navId)
+          this.getContent(info.three)
         }
-        return
-      }
-      if (arcId != undefined) {
-        this.getContext(arcId)
-      } else {
-        this.menuData = getParentNode(this.navId)
-        this.getContent(this.menuData.three)
       }
     }
   },
@@ -124,32 +161,55 @@ export default {
     }, 200);
   },
   methods: {
-    init(){
-      this.menuData = getParentNode(this.navId)
+    init() {
+      let arcId = this.$route.params && this.$route.query.id
+      this.getCrumbs()
+      if (this.type != null && this.type != 0) {
+        //当三级菜单id没有是,使用二级
+        if (arcId != undefined) {
+          console.log("getContext")
+          this.getContext(arcId)
+          return;
+        }
+        let info = null;
+        if (this.navId == null) {
+          console.log("1")
+          info = getParentNode(this.secondId);
+          this.getContent(info.second)
+        } else {
+          console.log("2")
+          info = getParentNode(this.navId)
+          this.getContent(info.three)
+        }
+        //this.showSecond = false
+        // let info = null
+        // info = getParentNode(this.secondId);
+        // if (info == null) {
+        //   location.reload();
+        // }
+        // let arcId = this.$route.query && this.$route.query.id
+        // if (arcId != undefined) {
+        //   this.getContext(arcId)
+        // } else {
+        //   this.getContent(this.menuData.three)
+        // }
+        // return
+      }
+      // let arcId = this.$route.params && this.$route.query.id
+      // if (arcId != undefined) {
+      //   this.getContext(arcId)
+      // } else {
+      //   console.log(this.menuData, "menuData")
+      //   this.getContent(this.menuData.three)
+      // }
+    },
+    /**
+     * 获得面包屑导航
+     */
+    getCrumbs() {
       crumbs(this.secondId).then(res => {
         this.crumbs = res.data
       })
-      if (this.type != null&&this.type!=0){
-        //this.showSecond = false
-        let info =null
-        info = getParentNode(this.secondId);
-        if (info == null){
-          location.reload();
-        }
-        let arcId = this.$route.query && this.$route.query.id
-        if (arcId != undefined) {
-          this.getContext(arcId)
-        } else {
-          this.getContent(info.second)
-        }
-        return
-      }
-      let arcId = this.$route.params && this.$route.query.id
-      if (arcId != undefined) {
-        this.getContext(arcId)
-      } else {
-        this.getContent(this.menuData.three)
-      }
     },
 
     getContext(arcId) {
@@ -161,19 +221,21 @@ export default {
     },
     getContent(menu) {
       console.log(menu)
-      //let menu = this.menuData.three
+      // let menu = this.menuData.three
       this.type = menu.type
       this.contextData = null
       this.bgImage = menu.link
       let data = null
-      if (this.type === 2||this.type === 4) {
+      if (this.type === 2 || this.type === 4) {
         data = {
           id: menu.encodeId,
           pageNum: 1,
           pageSize: 5
         }
-        if (this.type === 4){
-          data.pageSize=10
+        this.listDataType = 0
+        if (this.type === 4 || menu.isSimple == 1) {
+          data.pageSize = 20
+          this.listDataType = 1
         }
       } else {
         data = {
@@ -181,7 +243,7 @@ export default {
         }
       }
       getNode(data).then(res => {
-        if (this.type === 2||this.type === 4) {
+        if (this.type === 2 || this.type === 4) {
           this.contextData = {
             data: res.rows,
             total: res.total,
@@ -193,6 +255,11 @@ export default {
         } else if (this.type == 1) {
           this.contextData = res.data
         } else if (this.type == 3) {
+          if (res.additional == "") {
+            this.dreDataType = "1"
+          } else {
+            this.dreDataType = res.additional
+          }
           this.contextData = handleTree(res.data, "id", "pid", null, null)
         }
       })
@@ -233,7 +300,8 @@ export default {
 
     .lab_div {
       border-bottom: 0.1rem solid #94BCFF !important;
-      margin-left: 1rem;
+      //margin-left: 1rem;
+      width: 100%;
     }
 
     .lab_div:last-child {

vue.config.js

@@ -29,21 +29,21 @@ module.exports = {
   productionSourceMap: true,
   // webpack-dev-server 相关配置
   devServer: {
-  //   host: '0.0.0.0',
-  //   // port: port,
-  //   port: 8080,
-  //   open: true,
-  //   proxy: {
-  //     // detail: https://cli.vuejs.org/config/#devserver-proxy
-  //     [process.env.VUE_APP_BASE_API]: {
-  //       target: `http://localhost:8085`,
-  //       // target: `http://hchyunapi.tomey.live`,
-  //       changeOrigin: true,
-  //       pathRewrite: {
-  //         ['^' + process.env.VUE_APP_BASE_API]: ''
-  //       }
-  //     }
-  //   },
+    host: '0.0.0.0',
+    // port: port,
+    port: 8080,
+    open: true,
+    proxy: {
+      // detail: https://cli.vuejs.org/config/#devserver-proxy
+      [process.env.VUE_APP_BASE_API]: {
+        target: `https://sist.swjtu.edu.cn/`,
+        // target: `http://hchyunapi.tomey.live`,
+        changeOrigin: true,
+        pathRewrite: {
+          ['^' + process.env.VUE_APP_BASE_API]: '/dev-api'
+        }
+      }
+    },
     disableHostCheck: true
   },
   // 强制内联CSS