发表于： 2017-03-28 10:48:09
1 1060
完成的事情：
完成“找精英”的页面样式，为“找职业”页面搭建子路由。
计划的事情：
完成“找职业”下面的其他页面样式？
问题：
“找精英”页面相对“找职业”来说简单不少，稍微麻烦的地方是“萝卜多，服务流程”部分。
看到效果图，第一想法就是使流程图直接居中，而流程图侧的文字则使用绝对定位，脱离文档流，通过媒体查询不再占据位置，实际也是如此操作，当然，是使用媒体查询大于767px时候如此。
限定总宽度为640px，文字块宽度为240px，绝对定位，并根据要求left:0或right:0即可。
重现psd效果。
ui-router子路由的添加，
.state("profession", {
url: "/profession",
templateUrl: "page/profession.html",
resolve:{
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('js/lazyload/profession.js');
}]
}
})
.state("profession.page1", {
url: "/",
templateUrl: "page/profession1.html",
})
.state("profession.page2", {
url: "/searchCompany",
templateUrl: "page/profession2.html",
})
初始化处如此这般，通过profession添加后缀名.xxx则可，
profession页面简单的
<body>
<div ng-controller='professionCtrl'>
<div ui-view></div>
</div>
</body>
建立“找职业”的显示部分。
把首页中的链接“/profession”改成“/profession/”，直接链接第一个子路由的内容（懒加载依然可以调用），然后通过在页面中绑定按钮事件，
$scope.profession2 = function(){
$state.go("profession.page2");
console.log('asdfa');
}
实现点击跳转到第二个子路由
收获：
复盘项目进度，ui-router的子路由用法
返回列表
评论