前仨完成

明梦爽

2021-11-08 810010a617a5b24238726c28b1b0d4b16c8629f8

前仨完成

 src/assets/css/my_style.css

@@ -2,6 +2,9 @@
  padding: 0;
  margin: 0;
}
li{
  list-style: none;
}
.ft-20{
  font-size: 20px;
}
@@ -44,4 +47,12 @@
}
.liStylenone {
  list-style: none;
}
/* 链接去除下划线 */
.anone {
  text-decoration: none;
}
/* 蓝色标题 */
.color {
  color: #0f99e9;
}

 src/components/page/index.vue

@@ -2,21 +2,15 @@
  <div calss="box">
    <!-- 首页上半部分 -->
    <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 class="block marr10">
          <el-carousel height="460px"  arrow="always">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
              <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="">
                <img :src="item.path"  alt="" style="width:105%;">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-aside>
      <notice class="notice" />
    </el-row>
    <!-- 首页下半部分 -->
@@ -35,7 +29,16 @@

export default {
  components: { notice, work, school, other },
  name: 'index'
  name: 'index',
  data(){
    return{
      imgList:[
        { path:require('../../assets/boer.jpg'),index: 1},
        { path:require('../../assets/boer2.jpg'),index: 2},
        { path:require('../../assets/boer.jpg'),index: 3},
      ]
    }
  }
}
</script>
<style lang="less" scoped>
@@ -69,7 +72,7 @@
  }
}

.el-carousel__item h3 {
.el-carousel__item{
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
@@ -84,11 +87,14 @@
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.block {
  width: 50%;
}
.block div {
  img {
    width: 100%;
    height: 100%;
    object-fit:cover;
    // object-fit:cover;
  }
}
.notice{

 src/components/page/introduce.vue

@@ -55,10 +55,9 @@
<style lang="less" scoped>

ul {
  // background-color: rgb(242, 243, 245 );
  width: 200px;
  li {
    background-color: rgb(242, 243, 245 );
    background-color: rgb(242, 243, 245);
    height: 50px;
    line-height: 50px;
    text-align: center;

 src/components/page/zhengce.vue

@@ -2,21 +2,22 @@
  <div>
    <el-row>
      <globalTitle />
    </el-row> 
    <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>
    </el-row>
    <el-row class="mart10">
      <el-col :span="4" class="marr10">
        <ul>
          <li
            :key="index"
            v-for="(item, index) in menuList"
            class="liStylenone liPointer marb10"
            @click="changeMenu(item.name)"
          >
          <b :class="cont == item.name?'ft-blue':'ft-black'"> {{  item.name }} </b>
          </li>
        </ul>
      </el-col>
      <el-col :span="18"><div v-html="cont"></div></el-col>
    </el-row>
  </div>
</template>

@@ -24,12 +25,44 @@
import globalTitle from '../globalTitle.vue'
export default {
  name: 'zhengce',
  components:{
  components: {
    globalTitle
  },
  data() {
    return {
      cont:'',
      menuList: [
        { name: '中国科协政策法规' },
        { name: '地方科协政策法规' },
        { name: '社团管理文件' }
      ]
    }
  },
  mounted() {
    this.cont = this.menuList[0].name;
  },
  methods: {
    changeMenu(val) {
      this.cont = val;
    }
  }
}
</script>

<style lang="less" scoped>

ul {
  width: 200px;
  li {
    background-color: rgb(242, 243, 245);
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}
.ft-blue{
  color:rgb(9, 143, 252);
}
.ft-black{
  color: #000;
}
</style>

 src/views/notice.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-row type="flex" class="row-bg underline" justify="space-between">
      <span>通知公告</span>
      <span class="color"><b>通知公告</b></span>
      <span @click="goMore('通知公告')" class="liPointer">
        更多<i class="el-icon-d-arrow-right"></i>
      </span>

 src/views/other.vue

@@ -1,13 +1,22 @@
<template>
  <div>
    <div>
      <span>友情链接</span>
      <el-row class="underline marb10">
        <span class="color"><b>友情链接</b></span>
      </el-row>
      <div>
        <ul>
          <li class="lieBiao liPointer" :key="index" v-for="(item, index) in lianJieList">
            {{ item.name }}
          </li>
        </ul>
        <div class="aLianJ marb10">
          <a href="https://www.cast.org.cn/" class="anone" target="_block">中国科协</a>
        </div>
        <div class="aLianJ marb10">
          <a href="http://www.kepu.gov.cn/kejiweek/" class="anone" target="_block">中国科普网</a>
        </div>
        <div class="aLianJ marb10">
          <a href="https://www.hast.net.cn/" class="anone" target="_block">河南省科协</a>
        </div>
        <div class="aLianJ marb10">
          <a href="http://www.pdskx.cn/" class="anone" target="_block">平顶山市科协</a>
        </div>
      </div>
    </div>
    <div>
@@ -32,21 +41,17 @@
  name: 'other',
  data() {
    return {
      lianJieList: [{ name: '链接1' }, { name: '链接2' }, { name: '链接3' }]
      lianJieList: [{ name: '链接1' }, { name: '链接2' }]
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  padding-left: 0;
}
.lieBiao {
  width: 90%;
.aLianJ {
  height: 30px;
  background-color: rgb(39, 144, 214);
  list-style: none;
  margin-bottom: 2px;
  background-color: rgb(242, 243, 244);
  text-align: center;
  line-height: 30px;
}
.bg {
  background-color: rgb(1, 72, 153) !important;

 src/views/school.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-row type="flex" justify="space-between" class="underline">
      <span>学院动态</span>
      <span class="color"><b>学院动态</b></span>
      <span @click="goMore('学院动态')" class="liPointer">更多<i class="el-icon-d-arrow-right"></i> </span>
    </el-row>
    <div>

 src/views/work.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-row type="flex" justify="space-between" class="underline">
      <span>工作动态</span>
      <span class="color"><b>工作动态</b></span>
      <span @click="goMore('工作状态')" class="liPointer">更多<i class="el-icon-d-arrow-right"></i> </span>
    </el-row>
    <div>