首页基本完善

明梦爽

2021-11-05 711d098689b220944d7f7f023daa5c0255605367

首页基本完善

 src/assets/boer.jpg

 src/assets/boer2.jpg

 src/assets/css/my_style.css

New file
@@ -0,0 +1,30 @@
.ft-20{
  font-size: 20px;
}
.mart5{
  margin-top: 5px !important;
}
.mart10{
  margin-top: 10px !important;
}
.mart15{
  margin-top: 15px !important;
}
.padt10{
  padding-top:10px !important;
}
.flex-v{
  display: flex;
}
.flex-conter{
  justify-content: center;
}
.flex-between{
  justify-content: space-between;
}
.fl{
  float: left;
}
.fr{
  float: right;
}

 src/assets/gongZhongHao.jpg

 src/assets/wbbg.png

 src/assets/weiBo.jpg

 src/assets/wxbg.png

 src/components/Home.vue

@@ -18,21 +18,19 @@
        :default-active="activeIndex"
        @select="handleSelect"
      >
        <el-menu-item index="index">首页</el-menu-item>
        <el-menu-item index="introduce">科协概况</el-menu-item>
        <el-menu-item index="zhengce">政策法规</el-menu-item>
        <el-menu-item index="keXieXiangMu">科协项目</el-menu-item>
        <el-menu-item index="xueShuJiaoLiu">学术交流</el-menu-item>
        <el-menu-item index="banShiZhiNan">办事指南</el-menu-item>
        <el-menu-item index="kePu">科普风采</el-menu-item>
        <el-menu-item index="xueXiaoShouYe">学校首页</el-menu-item>
        <el-menu-item index="telephone">联系我们</el-menu-item>
        <el-menu-item 
          :key="index"
          v-for="(item,index) in menuList"
          :index="item.index"
        >
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </el-row>
    <el-container>
      <!-- 更变的内容区域 -->
      <el-main class="main">
        <router-view></router-view>
        <router-view class="box"></router-view>
      </el-main>
    </el-container>
    <el-footer>@平顶山学院科学技术协会</el-footer>
@@ -44,14 +42,36 @@
  name: '',
  data() {
    return {
      activeIndex: 'index'
      activeIndex: 'index',
      menuList:[
        {index:'index',name:'首页'},
        {index:'introduce',name:'科协概况'},
        {index:'zhengce',name:'政策法规'},
        {index:'keXieXiangMu',name:'科协项目'},
        {index:'xueShuJiaoLiu',name:'学术交流'},
        {index:'banShiZhiNan',name:'办事指南'},
        {index:'kePu',name:'科普风采'},
        {index:'xueXiaoShouYe',name:'学校首页'},
        {index:'telephone',name:'联系我们'},
      ]
    }
  },
  created(){
  },
  mounted(){
    
  },
  watch:{

  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      // console.log(key, keyPath)
      this.$router.push({
        path: '/home/' + keyPath
        path: '/home/' + key,
        query:{
          title:key
        }
      })
    }
  }
@@ -106,4 +126,8 @@
  text-align: center;
  line-height: 60px;
}
.box{
  width: 1200px;
  margin: 0 auto;
}
</style>

 src/components/Login.vue

@@ -14,9 +14,9 @@
        class="login_form"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.username"
            v-model="loginForm.account"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
@@ -44,13 +44,13 @@
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        username: 'admin',
        account: 'admin',
        password: '123456'
      },
      // 这是表单的验证规则对象
      loginFormRules: {
        // 验证用户名是否合法
        username: [
        account: [
          { required: true, message: '请输入登录名称', trigger: 'blur' },
          {
            min: 3,

 src/components/globalTitle.vue

New file
@@ -0,0 +1,50 @@
<template>
  <div>
    <el-row>
      <div class="fl">
        <span>{{ getTitle(this.$route.query.title) }}</span>
      </div>
      <div class="fr">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ getTitle(this.$route.query.title) }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  name:'globalTitle',
  data(){
    return {
      title:'',
    }
  },
  created(){
  },
  methods:{
    getTitle(v){
      switch(v){
        case 'introduce':
          return '科协概况'
        case 'zhengce':
          return '政策法规'
        case 'keXieXiangMu':
          return '科协项目'
        case 'xueShuJiaoLiu':
          return '学术交流'
        case 'banShiZhiNan':
          return '办事指南'
        case 'kePu':
          return '科普风采'
        case 'xueXiaoShouYe':
          return '学校首页'
        case 'telephone':
          return '联系我们'
      }
    }
  }
}
</script>

 src/components/page/banShiZhiNan.vue

@@ -1,29 +1,14 @@
<template>
  <div>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <span>办事指南</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'banShiZhiNan'
}
</script>


 src/components/page/index.vue

@@ -1,35 +1,40 @@
<template>
  <el-container>
  <div calss="box">
    <!-- 首页上半部分 -->
    <el-header>
      <el-container>
        <el-aside width="600px">图片要闻</el-aside>
        <el-main>通知公告</el-main>
      </el-container>
    </el-header>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-aside width="600px">
        <div class="block">
          <el-carousel height="350px" type="card">
            <el-carousel-item v-for="item in 4" :key="item">
              <h3 class="small"></h3>
              <div>
                <img src="../../assets/boer.jpg" alt="">
                <img src="../../assets/boer2.jpg" alt="">
                <img src="../../assets/boer.jpg" alt="">
                <img src="../../assets/boer2.jpg" alt="">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-aside>
      <notice class="notice" />
    </el-row>
    <!-- 首页下半部分 -->
    <el-main class="xiaBian">
      <el-container>
          <!-- 下边左半部分 -->
        <el-aside width="1000px">
          <el-container>
            <el-aside width="500px">工作状态</el-aside>
            <el-main>学院动态</el-main>
          </el-container>
        </el-aside>
        <!-- 下边右半部分 -->
        <el-main class="youXiaJiao">
          <el-container>
            <el-header>友情链接</el-header>
            <el-main>联系我们</el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
    <el-row type="flex" class="row-bg" justify="space-between">
      <work class="work"/>
      <school class="school"/>
      <other class="other"/>
    </el-row>
  </div>
</template>
<script>
import notice from '../../views/notice.vue'
import work from '../../views/work.vue'
import school from '../../views/school.vue'
import other from '../../views/other.vue'

export default {
  components: { notice, work, school, other },
  name: 'index'
}
</script>
@@ -53,14 +58,51 @@
  }
}
.youXiaJiao {
    padding: 0;
    // height: 400px;
    .el-header {
        height: 200px !important;
    }
    .el-main {
        height: 200px;
        background-color: rgb(206, 44, 171);
    }
  padding: 0;
  // height: 400px;
  .el-header {
    height: 200px !important;
  }
  .el-main {
    height: 200px;
    background-color: rgb(206, 44, 171);
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.block div {
  img {
    width: 100%;
    height: 100%;
    object-fit:cover;
  }
}
.notice{
  width: 50%;
}
.work {
  width: 40%;
  margin-right: 10px;
}
.school {
  width: 40%;
}
.other {
  width: 20%;
  margin-left: 5px;
}
</style>

 src/components/page/introduce.vue

@@ -1,29 +1,44 @@
<template>
    <div>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
        <span>概况</span><br>
    </div>
  <div>
    <el-row>
      <globalTitle />
    </el-row> 
  </div>
</template>
<script>
export default {
    name:'introduce'
}

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'introduce',
  components:{
    globalTitle
  },
  data() {
      return{
          menuList: [
              {name: '简介'},
              {name: '章程'},
              {name: '组织机构'},
              {name: '工作职责'},
              {name: '专职人员'}
          ]
      }
  }
}
</script>
<style lang="less" scoped>
    
.el-header {
  display: flex;
  justify-content: space-between;
  background-color: rgb(85, 81, 82);
  font-size: 20px;
  line-height: 60px;
  padding: 0px 4px;
}
.el-aside {
  background-color: rgb(242, 243, 245);
  .el-menu {
    border-right: none;
  }
}
</style>

 src/components/page/kePu.vue

@@ -1,25 +1,14 @@
<template>
  <div>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <span>科普风采</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'kePu'
}
</script>


 src/components/page/keXieXiangMu.vue

@@ -1,28 +1,14 @@
<template>
  <div>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <span>科协项目</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'keXieXiangMu'
}
</script>


 src/components/page/telephone.vue

@@ -1,21 +1,14 @@
<template>
  <div>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <span>联系我们</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'telephone'
}
</script>


 src/components/page/xueShuJiaoLiu.vue

@@ -1,39 +1,14 @@
<template>
  <div>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <span>学术交流</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'xueShuJiaoLiu'
}
</script>


 src/components/page/xueXiaoShouYe.vue

@@ -1,53 +1,14 @@
<template>
  <div>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <span>学校首页</span><br>
    <globalTitle />
  </div>
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  components: { globalTitle},
  name: 'xueXiaoShouYe'
}
</script>


 src/components/page/zhengce.vue

@@ -1,5 +1,8 @@
<template>
  <div>
    <el-row>
      <globalTitle />
    </el-row> 
    <span>政策</span><br>
    <span>政策</span><br>
    <span>政策</span><br>
@@ -18,8 +21,12 @@
</template>

<script>
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce'
  name: 'zhengce',
  components:{
    globalTitle
  },
}
</script>


 src/main.js

@@ -6,10 +6,11 @@
import './assets/fonts/iconfont.css'
// 导入全局样式表
import './assets/css/global.css'
import './assets/css/my_style.css'

import axios from 'axios'
// 配置请求的跟路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'
axios.defaults.baseURL = 'http://10.2.41.131:8080'
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')

 src/router.js

@@ -11,13 +11,17 @@
import kePu from './components/page/kePu.vue'
import xueXiaoShouYe from './components/page/xueXiaoShouYe.vue'
import telephone from './components/page/telephone.vue'
import schoolMessage from './views/homePage/schoolMessage'
import noticeMessage from './views/homePage/noticeMessage'
import moreMessage from './views/homePage/moreMessage'
import workMessage from './views/homePage/workMessage'


Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/', redirect: '/home' },
    { path: '/login', component: Login },
    { 
      path: '/home', 
@@ -71,6 +75,26 @@
          name:'telephone',
          component:telephone
        },
        {
          path:'schoolMessage',
          name:'schoolMessage',
          component:schoolMessage
        },
        {
          path:'noticeMessage',
          name:'noticeMessage',
          component:noticeMessage
        },
        {
          path:'moreMessage',
          name:'moreMessage',
          component:moreMessage
        },
        {
          path:'workMessage',
          name:'workMessage',
          component:workMessage
        },
      ]
    }
  ]
@@ -86,7 +110,7 @@
  if (to.path === '/login') return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  // if (!tokenStr) return next('/login')
  next()
})


 src/views/homePage/moreMessage.vue

New file
@@ -0,0 +1,109 @@
<template>
  <div>
    <el-row class="underline">
      <h3 style="color: #0f99e9">{{ this.$route.query.type }}</h3>
    </el-row>
    <div class="mart15">
      <div v-if="this.$route.query.type == '通知公告'">
        <ul>
          <li
            class="lieBiao flex-v flex-conter padt10"
            :key="index"
            v-for="(item, index) in noticeList"
          >
            <div class="time">
              <span>{{ item.date }}</span>
              <span>{{ item.years }}</span>
            </div>
            <div class="title" @click="toNoticeMsg(item.title)">
              {{ item.title }}
            </div>
          </li>
        </ul>
      </div>
      <div v-if="this.$route.query.type == '学院动态'">
        <ul>
          <li :key="index" v-for="(item, index) in schoolList">
            <!-- <a href="item.path"> {{ item.title }} </a> -->
            <!-- <router-link :to="{name:'schoolMessage',params:{id:item.id}}" >{{ item.title }} </router-link> -->
            <div @click="toNoticeMsg(item.title)">{{ item.title }}</div>
          </li>
        </ul>
      </div>
      <div v-if="this.$route.query.type == '工作状态'">
        <ul>
          <li :key="index" v-for="(item, index) in workList">
            <!-- <a href="item.path"> {{ item.title }} </a> -->
            <!-- <router-link :to="{name:'schoolMessage',params:{id:item.id}}" >{{ item.title }} </router-link> -->
            <div @click="toNoticeMsg(item.title)">{{ item.title }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'moreMessage',
  data() {
    return {
      noticeList: [
        { years: '2021', date: '11-2', title: '我是标题1' },
        { years: '2021', date: '11-2', title: '我是标题2' },
        { years: '2021', date: '11-2', title: '我是标题3' },
        { years: '2021', date: '11-2', title: '我是标题4' },
        { years: '2021', date: '11-2', title: '我是标题5' }
      ],
      schoolList: [
        { id: '1', title: '学校状态1' },
        { id: '2', title: '学校状态2' },
        { id: '3', title: '学校状态3' },
        { id: '4', title: '学校状态4' },
        { id: '5', title: '学校状态5' },
        { id: '6', title: '学校状态6' }
      ],
      workList: [
        { id:'1', title: '工作状态1' },
        { id:'2', title: '工作状态2' },
        { id:'3', title: '工作状态3' },
        { id:'4', title: '工作状态4' },
        { id:'5', title: '工作状态5' },
        { id:'6', title: '工作状态6' },
      ]
    }
  },
  methods: {
    toNoticeMsg(t) {
      this.$router.push({
        path: '/home/noticeMessage',
        query: {
          title: t
        }
      })
    }
  }
}
</script>
<style >
.underline {
  border-bottom: 1px solid #0f99e9;
}
.lieBiao {
  width: 95%;
  height: 80px;
  background: rgb(202, 202, 202);
  overflow: hidden;
  margin-bottom: 10px;
}
.time {
  width: 100px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.title {
  width: 500px;
  height: 70px;
  overflow: hidden;
}
</style>

 src/views/homePage/noticeMessage.vue

New file
@@ -0,0 +1,29 @@
<template>
  <div>
    <span>noticeMessage</span>
    <p>{{ this.$route.query.title }}</p>
    <div v-html="message"></div>
  </div>
</template>
<script>
export default {
  name:'noticeMessage',
  data(){
    return {
      message:''
    }
  },
  created(){
    console.log(">>>>>>>>",this.$route.query.title);
    this.queryAll();
  },
  methods:{
    queryAll(){
      this.message = `<div class="detail_wbtext_4CRf9"><a href="//s.weibo.com/weibo?q=%23%E5%88%9B%E6%96%87%E5%BC%80%E5%B0%81%E5%85%A8%E6%B0%91%E6%80%BB%E5%8A%A8%E5%91%98%23" target="_blank">#创文开封全民总动员#</a>【 “创文”标识牌亮街头 传递文明正能量】11月3日，记者在街头看到，大梁路新增一处“创文”标识牌，新颖的造型和绚丽的色彩引人注目，让市民感受到文明风尚的热潮，并时刻提醒着大家要注重文明行为，文明就在你我身边。（全媒体记者：姜菡 ）<a href="//s.weibo.com/weibo?q=%23%E5%BC%80%E5%B0%81%E5%BC%80%E5%B0%81%E5%BC%80%E8%B7%AF%E5%85%88%E9%94%8B%23" target="_blank">#开封开封开路先锋#</a> ​​​</div>`
    }
  }
}
</script>
<style>

</style>

 src/views/homePage/schoolMessage.vue

New file
@@ -0,0 +1,22 @@
<template>
  <div>
    <span>schoolMessage</span>
    <p>{{ this.$route.query.title }}</p>
  </div>
</template> 
<script>
export default {
  name:'schoolMessage',
  data(){
    return {

    }
  },
  created(){
    console.log(">>>>>>>>",this.$route.params.id);
  }
}
</script>
<style>

</style>

 src/views/homePage/workMessage.vue

New file
@@ -0,0 +1,21 @@
<template>
  <div>
    <span>woekMessage</span>
    <p>{{ this.$route.query.title }}</p>
  </div>
</template>

<script>
export default {
  name : 'workMessage',
  data() {
    return{

    }
  }
}
</script>

<style>

</style>

 src/views/notice.vue

New file
@@ -0,0 +1,85 @@
<template>
  <div>
    <el-row type="flex" class="row-bg underline" justify="space-between">
      <span>通知公告</span>
      <span @click="goMore('通知公告')">
        更多<i class="el-icon-d-arrow-right"></i>
      </span>
    </el-row>
    <div>
      <ul>
        <li 
          class="lieBiao"
          :key="index"
          v-for="(item ,index) in noticeList"
        >
          <div class="time">
            <span>{{ item.date }}</span>
            <span>{{ item.years }}</span>
          </div>
          <div class="title" @click="toNoticeMsg(item.title)">{{ item.title }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name:'notice',
  data(){
    return{
      noticeList:[
        {years:'2021',date:'11-2',title:'我是标题1'},
        {years:'2021',date:'11-2',title:'我是标题2'},
        {years:'2021',date:'11-2',title:'我是标题3'},
        {years:'2021',date:'11-2',title:'我是标题4'},
        {years:'2021',date:'11-2',title:'我是标题5'},

      ]
    }
  },
  methods:{
    toNoticeMsg(t){
      this.$router.push({
        path:'/home/noticeMessage',
        query:{
          title:t
        }
      })
    },
    goMore(val){
      this.$router.push({
        path:'/home/moreMessage',
        query:{
          type:val,
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .underline{
    border-bottom: 1px solid #0f99e9;
  }
  .lieBiao{
    width: 95%;
    height: 80px;
    background: rgb(202, 202, 202);
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .time{
    width: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .title{
    width: 500px;
    height: 70px;
    overflow: hidden;
  }
</style>

 src/views/other.vue

New file
@@ -0,0 +1,74 @@
<template>
  <div>
    <div>
      <span>友情链接</span>
      <div>
        <ul>
          <li class="lieBiao" :key="index" v-for="(item, index) in lianJieList">
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div>
      <span>联系我们</span>
      <div>
        <div class="bg">
          <span>微信 ></span>
          <a href="https://www.pdsu.edu.cn/#"> <img src="../assets/gongZhongHao.jpg" alt="" /> </a>
        </div>
      </div>
      <div>
        <div class="bg bg2">
          <span>微博 ></span>
          <a href="https://www.pdsu.edu.cn/#"> <img src="../assets/weiBo.jpg" alt="" /> </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'other',
  data() {
    return {
      lianJieList: [{ name: '链接1' }, { name: '链接2' }, { name: '链接3' }]
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  padding-left: 0;
}
.lieBiao {
  width: 90%;
  height: 30px;
  background-color: rgb(39, 144, 214);
  list-style: none;
  margin-bottom: 2px;
}
.bg {
  background-color: rgb(1, 72, 153) !important;
  background: url('../assets/wxbg.png') no-repeat 20px 50px;
  width: 90%;
  color: white;
}
.bg2 {
  background: url('../assets/wbbg.png') no-repeat 20px 50px;
}
.bg,.bg2 {
  position: relative;
  height: 120px;
}
.bg img {
  position: absolute;
  top: 12px;
  right: 26px;
}
.bg span {
  position: absolute;
  top: 20px;
  left: 25px;
}
</style>

 src/views/school.vue

New file
@@ -0,0 +1,68 @@
<template>
  <div>
    <el-row type="flex" justify="space-between" class="underline">
      <span>学院动态</span>
      <span @click="goMore('学院动态')">更多<i class="el-icon-d-arrow-right"></i> </span>
    </el-row>
    <div>
      <ul>
        <li :key="index" v-for="(item, index) in schoolList">
          <!-- <a href="item.path"> {{ item.title }} </a> -->
          <!-- <router-link :to="{name:'schoolMessage',params:{id:item.id}}" >{{ item.title }} </router-link> -->
          <div @click="toSchoolMsg(item.title)"> {{ item.title }} </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'school',
  data() {
    return {
      schoolList: [
        { id: '1',title: '学校状态1' },
        { id: '2',title: '学校状态2' },
        { id: '3',title: '学校状态3' },
        { id: '4',title: '学校状态4' },
        { id: '5',title: '学校状态5' },
        { id: '6',title: '学校状态6' }
      ]
    }
  },
  methods:{
    goMore(val){
      this.$router.push({
        path:'moreMessage',
        query:{
          type:val,
        }
      })
    },
    toSchoolMsg(t) {
      this.$router.push({
        path: 'schoolMessage',
        query: {
          title:t
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.underline {
  border-bottom: 1px solid rgb(0, 110, 215);
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
  height: 60px;
  // background-color: salmon;
}
a {
  text-decoration: none;
}
</style>

 src/views/work.vue

New file
@@ -0,0 +1,66 @@
<template>
  <div>
    <el-row type="flex" justify="space-between" class="underline">
      <span>工作动态</span>
      <span @click="goMore('工作状态')">更多<i class="el-icon-d-arrow-right"></i> </span>
    </el-row>
    <div>
      <ul>
        <li :key="index" v-for="(item, index) in workList">
          <div @click="toWorkMsg(item.title)"> {{ item.title }} </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name:'work',
  data(){
    return{
      workList: [
        { id:'1', title: '工作状态1' },
        { id:'2', title: '工作状态2' },
        { id:'3', title: '工作状态3' },
        { id:'4', title: '工作状态4' },
        { id:'5', title: '工作状态5' },
        { id:'6', title: '工作状态6' },
      ]
    }
  },
  methods:{
    toWorkMsg(t) {
      this.$router.push({
        path:'/home/workMessage',
        query: {
          title:t
        }
      })
    },
    goMore(val) {
      this.$router.push({
        path:'moreMessage',
        query:{
          type:val,
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.underline {
  border-bottom: 1px solid rgb(0, 110, 215);
}
ul {
  padding-left: 0;
}
li {
  list-style: none;
  height: 60px;
  // background-color: salmon;
}
a {
  text-decoration: none;
}
</style>