煜龙时空项目

该项目是由我们4人以小组形式分工完成最后使用git合并！整体运用vue框架写的

首先创建一个git仓库 创建好初始项目提交到仓库 然后开始

我负责的是索引页的留学板块中的内容

索引页：

留学的首页里：

        头部导航栏运用的是公共组件是由小组里其他成员完成的

导航栏以下就是我说负责完成的内容

        导航栏下面的轮播运用了element-ui 走马灯完成

<div id="lun">
  <el-carousel class="lun_r" :interval="2000" arrow="never">
     <el-carousel-item id="lun_x" v-for="item in imgs" :key="item.ban_id">
        <img
          :src="'http://www.shxw114.com:9527/' + item.ban_logo"
          alt=""
          style="width: 100%; height: 100%"
        />
     </el-carousel-item>
  </el-carousel>
</div>

.el-carousel__item {
  text-align: center;
  line-height: 420px;
}

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

#lun {
  width: 100%;
  height: 420px;
}

.lun_r {
  height: 420px;
}

#lun_x {
  width: 100%;
  height: 420px;
}

#lun_x > img {
  z-index: 1;
}

下方的大部分是由数据接口完成：

如左侧列表获取数据遍历渲染， 中间和右侧都是由上下两部分组成的 ，中间上部分也

是用element-ui写的请参考上面轮播部分，下面部分是有数据写的方法如上；右侧上方

是用简单的标签完成的如input ，button 。下方的话也是获取数据 外加入了点CSS3动

画效果实现滚动

 中间下部分axios获取数据遍历渲染如下：

<div class="ccbom-boot">
    <div class="ccbo1" v-for="item in xiaoxi" :key="item.hot_id">
        <div class="ccleft">
            <img
               src="http://www.guojiyuke.net/images/index/lx_index_42.png"
               alt=""
            />
            </div>
            <div class="ccent">
              <router-link :to="{name:'academyPage',query:{id:item.hot_id}}">
                <p><a href="/academyPage">{{item.hot_name}}|{{item.hot_title}}</a></p>
            </router-link>
         </div>
         <div class="ccright">
        <p>咨询</p>
   </div>
</div>

.ccbom-boot {
  width: 100%;
  height: 320px;
}
.ccbo1 {
  width: 100%;
  height: 35px;
  display: flex;
}
.ccbo2 {
  width: 100%;
  height: 35px;
  display: flex;
}
.ccenter {
  width: 90%;
  height: 20px;
}
.ccenter > p {
  margin-left: 57px;
}
.ccenter > p > a {
  color: #0bc19d;
}

.ccrighter {
  width: 10%;
  height: 20px;
}
.ccleft {
  width: 10%;
  height: 40px;
}
.ccleft > img {
  margin-top: 4px;
  margin-left: 8px;
}
.ccrighter {
  width: 50px;
  height: 20px;
  background: red;
  border-radius: 20%;
  margin-top: 5px;
  margin-left: 10px;
  text-align: center;
  line-height: 18px;
}

再往下就是全是axios数据接口

 

 中间那个左右滚动运用的也是CSS3动画实现的效果