煜龙时空pc端以及移动端总结

pc端基本都是有对应的接口请求遍历 轮播图也是用elementui框架实现 页面总体来说没什么难度 无非是点击的效果 路由跳转 点击传参 轮播效果 遇到的问题也是盒子模型的不熟练 经过此次练习 熟悉了一遍盒子模型 基本掌握了盒子模型

移动端的效果也是轮播效果 移动端的适配 路由跳转 路由传参 遇到的问题则是计算px转换rem的问题 以及盒子模型的应用不太熟练 经过此次练习一样熟悉了盒子模型
下面为大家展示我实现的移动端
首页
这里的路由跳转是通过router-view来进行显示的

接下来是轮播图的实现代码,这里我把轮播图做成了公共组件，哪个组件里需要哪个组件里调用即可

<template>
<div class="lunbo" style="width: 100%; margin: 0 auto; overflow: hidden">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(item, index) in lunbo" :key="index">
        <img :src="'http://www.shxw114.com:9527/' + item.ad_logo" alt="" style="width: 100%;" />
      </el-carousel-item>
    </el-carousel>
  </div>
 </template>
 <script>
	export default {
  data(){
    return{
      lunbo: [],
    }
  },
  mounted() {
    axios.get("/api?mod=bran").then((data) => {
      this.lunbo = data.data;
    })
  },
}
 </script>

推荐院校
接下来是路由跳转传参的代码,其实就是利用query传参 把我们遍历的这个数组的id传到我们点击的页面 然后利用我们传过去的这个id 遍历id下的内容就完成了

<router-link :to="{ name: 'pole', query: { id: item.product_id } }">
   <button>参观院校</button>
</router-link>

推荐院校的详情页
这是遍历传过来的id下的内容，一个页面 单击不同的内容显示不同内容的详情

首页详情
首页详情也是和上面推荐院校一样的传参方式 非常的简单

以上是很简单的页面基本效果
pc端则是移动端改过来 我就不过多展示了 基本效果都是一样的
总价：通过此次练习 丰富了我对盒子模型的知识 以及熟练掌握路由跳转和路由传参跳转 熟练运用elementui框架