解析vue实现煜龙移动端

煜龙移动首页广告

上面出现了一个蓝色的广告图,这是我用固定定位
top:50%
left:50%;
tranfrom:tranlate(-50%,-50%)
让它定位于手机的正中心
然后就是点击之后让它关闭 我通过一个Boolean类型来决定它是否存在
如下:

//这里是点击按钮
<p @click=‘remote’>

图片是我用css背景样式添加的,所以看不到 img标签 这里v-show就是通过isDow变量来控制是否消失隐藏

点击之后让其取反就可以将其隐藏

让关闭掉的广告再次显示

这里我通过watch监听变量,在进行后续操作,如下

图里的s为变量的变化 这里通过判断s的状态如果为false就执行一次性定时器,让其状态再次变成true,这样广告就显示了

,
,
,
,
,

2+2本科页面(如下)

看见下面几个按钮点击之后不管跳转到那个页面它都是存在的,这是因为下面这些全部都是子路由 如下:

这里我通过redirect 重定向stuhome,这里代表就是页面初始是显示的页面,总不能页面打开只有下面几个按钮吧,不合理
代码页面如下:

**图片中router-view显示在上面,这个位置其实无所谓的,因为下面的div是我们通过固定定位 **

还有一个考验弹性盒子的地方

图中是完整的效果,如果我们将flex-wrap属性删除

所有的图片都在一行,所以我们使用flex-wrap让容器位置不够自动往下铺,这样我们的这个页面就完成了

本硕页面(如下)

这里也是本硕页面中比较考验弹性盒子的地方,图中的图片与文字上下对齐,看上去美观,但是我们将flex-direction:column删除就会变成这样

使用flex-direction:column;让其纵向对齐,这样就可以了