今天继续开始做这个平台,我们要这个平台的首页进行设计!
去jquery之家找个初版首页
如图找到了个不错的,有动画展开收缩等效果,非常不错。
一开始就像一个信封,我们可以在这上面输入需要匹配人的微信号
点击展开后会有展开动画
然后分为三页,我的设计是左边显示这人的基本信息,并且可编辑/删除。中间显示这个人的择偶要求,并且有匹配按钮,点击按钮后。右侧显示匹配结果列表名单。
地址我放这了:http://www.htmleaf.com/jQuery/Menu-Navigation/20141123572.html
下载
解压后:
改个可爱的名字:home_css
展开看看:其中的index.html就是装着我们想要的信封的页面了,一会我们进去给它大卸八块!
先给这个文件夹移动到我们v_love项目的pubilc下的static文件夹内,这里放的都是我们的静态资源哦~
打开home_css内的index.html,我们先确定下它是不是我们要的东西,可以点击内部右上角的浏览器谷歌按钮来预览:
这里面有个外部链接特别卡,直接删掉这行再打开就可以看到了:(这种情况很常见,一些需要科学上网才能访问的样式随便删)
然后发现是我要的:
然后我们找到vue自动给我们创建的首页组件:Home.vue 。这是我们之前预览看到的那个页面。
我们只需要在这个Home.vue页面内直接改动成我们制作的首页即可。(.vue文件,就是vue的组件/页面后缀。它在实际打包和调试中是会自动被解析成.html来插入到默认的pubilc下的index.html内的,所以我们django才只需要进入这个index.html就可以访问使用所有组件。这个过程我们无需研究,只需要正常写.vue组件并组装到Home.vue即可)