测试圈相亲平台开发流程(8):详情页择偶部分-前端开发

·  阅读 47

本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。

今天继续开始做这个平台的三大页之一:详情页的择偶部分

上节课后我又对前面页面进行了细微的调整和优化。

Part1清理出右侧页面的战场:

图片结果如下:图片效果如下:图片

Part2如法炮制,创建择偶要求组件:

还是去src/components文件夹下新建一个组件:Selection.vue图片

然后仿照我们Detail.vue的内容写出择偶标准,一般择偶标准没有过多字段。用户最好不要过多的要求对方条件,否则结果大概率为空。图片

暂时就这么多字段吧...

然后去Home.vue引入。图片

效果如下:图片

现在看着这个页面,总觉的少点什么...

哦对了!是保存/删除/匹配 按钮....

这三个按钮我觉得放在右侧底部就可以了... 而按钮所在可以放在Home.vue上也可以...其实,并不一定非要放在子组件中。

图片

最后效果如下:

图片

分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改