煜龙时空项目实例--职教板块_煜龙时空的轮播图-CSDN博客

本文链接：https://blog.csdn.net/m0_65742870/article/details/124588919

项目介绍：

这是一个应用技术人才报考的项目，由多个页面多个功能行程。

项目中具体使用了前端技术有：Vue+Element-ui、Vue-Router、Vue-Axios、Flex布局等...

项目使用了一个引导页，划分了两个模块，留学与职教，在这里，我讲解一下我负责的职教板块中首页的头部和一些路由跳转的思路和实现步骤，以及在写当中遇到的问题解答

一、项目展示：

引导页：

职教板块首页：

等等很多个页面，具体我就不展示了，大家可以去 http://shxw114.com/去查看

二、项目首页思路：

1、头部：

这里用的是Flex布局，我们可以看到，它是需要跳转的，因此我们应该先配置路由，先让首页动起来，可以去到每一个页面

ps：路由安装：npm install vue-router@4

路由展示：

ps：这只是一部分

2.轮播图：

我们可以看到，轮播图在很多个页面都用到了，因此呢，我们就可以给他封装成一个单独的组件，在想要显示的地方引入就好啦，这样会让代码更简介更方便一点

ps：我这里是向后端请求的数据图片

3.字体轮播：

这里呢，我是通过c3动画来完成的

1）我们先通过html和css把静态的效果实现出来

<div class="zhu">
		
		<div class="h_h" style="width:1200px;height:80px; margin:auto; display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;border-top:2px solid #fff;margin-top:20px;">
		
		    <div class="demo-list">
				<div class="zi">
					<img src="@/assets/images/content1img1.png" >
				</div>
		        <div class="rowup" v-for="item,index in acquire" :key="index">
		            <div class="item_txt">
		                <p class="item_txtOne">{{item.name}}</p>
		            </div>
		        </div>
		                       
		     </div>
		</div>

	</div>

 .zhu{
		  background: #fff;
	  }
	.demo-list{
	    width: 100%;
	    position: relative;
	    height: 50%;
	    overflow: hidden;
	}
	     
	.demo-list .rowup{
	    -webkit-animation: 2s rowup linear infinite normal;
	    animation: 2s rowup linear infinite normal;
	    position: relative;
	}
	
	.item_txt{
	    width:70%;
	    height:60px;
	    /* border-bottom:1px solid #ccc; */
	    display:flex;
	    flex-direction:column;
	    margin:0 auto;
	    justify-content: center;
	}
	.item_txtOne{
	    font-size:20px;
	}
	.zi{
		width: 100px;
		height: 60px;
		background: red;
	}

2）我们要让后面的字体动起来，那我们就可以通过c3动画来实现，我们先找到字体的父类类名，然后给他添加c3动画，通过@keyframes

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

@keyframes rowup {
	    0% {
	        -webkit-transform: translate3d(0, -64px, 0);
	        transform: translate3d(0, -64px, 0);
	    }
	    100% {
	        -webkit-transform: translate3d(0, -124px, 0);
	        transform: translate3d(0, -124px, 0);
	    }
	}

4.路由调转

这里采用的Flex布局，它的实现思路是通过router-link来实现跳转（路由配置好页面）

5.跳转后的页面：

跳转后，都是单一的页面，我们就可以在页面实现我们想要的效果来进行展示

6.这里同样也是进行跳转，跳转的也是单一的页面，和我们的第四部操作一样，通过router-link来进行跳转

ps:首页暂时就到这里

三、首页中的招生简章

1.

1）这里的轮播图，是我们之前写好的轮播图组件，我们引入进来，放到这里就好

2）接下来我们可以看到，他类似于一个表单，要提交，我们可以通过html，css，input以及flex布局实现上面的效果，然后它是要提交的，我们可以给input绑定一个v-model，双向数据绑定，在我们点击按钮的时候，把内容返回给后台

2.

这一个模块，我们都是通过html，css和flex布局来实现效果，这里我就不多介绍了

3.

这里我们可以先用flex布局，让它成为左边一块，右边一块

1）左边：

我们通过html+css来完成一个静态的效果

然后我们看到，当点击按钮的时候就可以添加颜色，然后我们就可以绑定一个点击事件

然后，我们写一个方法为点击事件，接收我们传的值，在点击的时候，在或许到点击的类名，进行循环，最后把颜色加入就好了

myxueli_cz(id) {
				let cz = document.getElementsByClassName('xueli_cz');
				for (let i = 0; i < cz.length; i++) {
					cz[i].style.backgroundColor = "#efefef";
				}
				cz[id].style.backgroundColor = "#1aa3ee";
			},

2）右边的话是一张图片，我们直接通过img添加，设置大小即可