本平台并非真实运营和使用,仅在于学习研究平台前后端研发技术使用。
今天继续开始做这个平台的三大页之一:详情页的择偶部分
上节课后我又对前面页面进行了细微的调整和优化。
清理出右侧页面的战场:
结果如下:
效果如下:
如法炮制,创建择偶要求组件:
还是去src/components文件夹下新建一个组件:Selection.vue
然后仿照我们Detail.vue的内容写出择偶标准,一般择偶标准没有过多字段。用户最好不要过多的要求对方条件,否则结果大概率为空。
暂时就这么多字段吧...
然后去Home.vue引入。
效果如下:
现在看着这个页面,总觉的少点什么...
哦对了!是保存/删除/匹配 按钮....
这三个按钮我觉得放在右侧底部就可以了... 而按钮所在可以放在Home.vue上也可以...其实,并不一定非要放在子组件中。
最后效果如下:
下节课预告,匹配结果弹层页面。
(如果觉得这个系列讲的过快可以私聊作者哦~ 话说作者培训班讲的可是非常细致的,每一句代码每一个操作都实际的展现在你面前,想报名的也私聊~)