该项目是由我们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动画实现的效果