开发中....

guanyanan · Mar 16, 2017 · aa33f92 · aa33f92
1 parent cb711ec
commit aa33f92
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 71 deletions.
diff --git a/src/components/+rContact/cmpt.html b/src/components/+rContact/cmpt.html
@@ -1,3 +1,17 @@
 <div class="-page">
-    footer
+    <div>
+        <div id="contact_head">
+            <div id="contact_head1">灵感 代码 梦想 未来</div>
+            <div id="contact_head2">
+                <span>inspiration</span>
+                <span>code</span>
+                <span>dream</span>
+                <span>future</span>
+            </div>
+        </div>
+        <div id="contact_info" class="contact_scale">
+            <ul></ul>
+        </div>
+
+    </div>
 </div>
diff --git a/src/components/+rDefault/cmpt.html b/src/components/+rDefault/cmpt.html
@@ -4,11 +4,9 @@
             <div class="-photo"></div>
         </div>
         <div class="-des">
-            <p>生活是一种绵延不绝的渴望，渴望不断上升，变得更伟大而高贵。</p>
+            <p class="-quote">{{$ctrl.quote}}</p>
             <div>
-                <p>我叫赵柯宇</p>
-                <p>一名前端研发工程师</p>
-                <p>[email protected]</p>
+                <p ng-repeat="item in $ctrl.desList track by $index">{{item}}</p>
             </div>
         </div>
     </div>

diff --git a/src/components/+rDemo/cmpt.html b/src/components/+rDemo/cmpt.html
@@ -25,9 +25,7 @@
             </ul>
         </div>
         <div class="-project-des">
-            <p>more。。。</p>
-            <p>11111111111</p>
-            <p>11111111111</p>
+            <p>点击进入我的github Demo站！</p>
         </div>
     </div>
 </div>
diff --git a/src/components/+rInfo/cmpt.html b/src/components/+rInfo/cmpt.html
@@ -2,32 +2,16 @@
     <div>
         <div>
             <ul class="-info-list">
-                <li class="-info-item">
+                <li class="-info-item" ng-repeat="item in $ctrl.infoList track by $index">
                     <div>
-                        学历/本科
-                    </div>
-                </li>
-                <li class="-info-item">
-                    <div>
-                        坐标/成都
-                    </div>
-                </li>
-                <li class="-info-item">
-                    <div>
-                        状态/在职
-                    </div>
-                </li>
-                <li class="-info-item">
-                    <div>
-                        年龄/26岁
+                        <div></div>
+                        <div>{{item.key}}{{item.value}}</div>
                     </div>
                 </li>
             </ul>
         </div>
         <div class="-info-des">
-            <p>11111111111</p>
-            <p>11111111111</p>
-            <p>11111111111</p>
+            <p ng-repeat="item in $ctrl.desList track by $index">{{item}}</p>
         </div>
     </div>
 </div>
diff --git a/src/components/+rSkill/cmpt.html b/src/components/+rSkill/cmpt.html
@@ -3,29 +3,17 @@
         <div class="-skill-circle">
             <div>
                 <ul class="-outCircle">
-                    <li class="-out">git</li>
-                    <li class="-out">webpack</li>
-                    <li class="-out">gulp</li>
-                    <li class="-out">less</li>
-                    <li class="-out">cordova</li>
-                    <li class="-out">angular</li>
-                    <li class="-out">nodejs</li>
-                    <li class="-out">react</li>
+                    <li class="-out" ng-repeat="item in $ctrl.outCircleList track by $index">{{item}}</li>
                 </ul>
             </div>
             <div>
                 <ul class="-innerCircle">
-                    <li class="-inner">es6</li>
-                    <li class="-inner">vue</li>
-                    <li class="-inner">ng2</li>
-                    <li class="-inner">fp</li>
+                    <li class="-inner" ng-repeat="item in $ctrl.innerCircleList track by $index">{{item}}</li>
                 </ul>
             </div>
         </div>
         <div class="-des">
-            <p>123</p>
-            <p>123</p>
-            <p>123</p>
+            <p ng-repeat="item in $ctrl.desList track by $index">{{item}}</p>
         </div>
     </div>
 </div>
diff --git a/src/components/rHeader/cmpt.html b/src/components/rHeader/cmpt.html
@@ -5,21 +5,21 @@
             class="-title"
             ng-class="{'-rotate':$ctrl.isShowNav}"
             ng-click="$ctrl.isShowNav = !$ctrl.isShowNav">
-            首页
+            {{$ctrl.titleList[$ctrl.pageIndex]}}
         </div>
         <div class="-language">
-            <span>中</span>
-            <span>英</span>
+            <span ng-repeat="item in $ctrl.langList">{{item}}</span>
         </div>
     </div>
-    <div class="-nav" ng-class="{'-show-nav':$ctrl.isShowNav}">
-        <ul class="-list">
-            <li class="-item">首页</li>
-            <li class="-item">我的信息</li>
-            <li class="-item">我的技能</li>
-            <li class="-item">我的经历</li>
-            <li class="-item">我的作品</li>
-            <li class="-item">联系我</li>
+    <div class="-header-nav" ng-class="{'-show-nav':$ctrl.isShowNav}" opacity-callback>
+        <ul class="-list" selected-nav-item>
+            <li
+                class="-item"
+                data-index="{{$index}}"
+                ng-class="{'-cur-index':$ctrl.pageIndex == $index}"
+                ng-repeat="item in $ctrl.titleList track by $index">
+                {{item}}
+            </li>
         </ul>
     </div>
 </div>
diff --git a/src/components/rHeader/cmpt.js b/src/components/rHeader/cmpt.js
@@ -1,10 +1,64 @@
 export default angular
-	.module("rHeader", [])
-	.component("resumeHeader", {
-		templateUrl : "components/rHeader/cmpt.html",
-		controller  : ResumeHeaderCtrl
-	})
-	.name;
-
-function ResumeHeaderCtrl() {
+    .module("rHeader", [])
+    .component("resumeHeader", {
+        templateUrl: "components/rHeader/cmpt.html",
+        controller: ResumeHeaderCtrl,
+        bindings: {
+            pageIndex: "="
+        }
+    })
+    .directive("opacityCallback", [
+        function () {
+            function link($scope, ele) {
+                let vm = $scope.$ctrl;
+                ele[0].addEventListener("webkitTransitionEnd", transitionEndHandler);
+                function transitionEndHandler() {
+                    if (vm.isShowNav) {
+                        ele[0].style.display = vm.isShowNav ? "block" : "none";
+                    }
+                }
+            }
+            return {
+                restrict: "A",
+                link: link
+            }
+        }
+    ])
+    .directive("selectedNavItem", [
+        function () {
+
+            function link($scope, ele) {
+                let vm = $scope.$ctrl;
+
+                ele[0].addEventListener("click", clickHandler);
+                function clickHandler(evt) {
+                    if (evt.target.nodeName != "LI") {
+                        return;
+                    }
+                    (evt.target.dataset.index !== vm.pageIndex) && (vm.pageIndex = evt.target.dataset.index);
+                    vm.isShowNav = false;
+                    $scope.$apply();
+                }
+            }
+
+            return {
+                restrict: "A",
+                link: link
+            }
+        }
+    ])
+    .name;
+
+ResumeHeaderCtrl.$inject = ["resumeData","$scope"];
+
+function ResumeHeaderCtrl(resumeData) {
+
+    let vm = this;
+
+    console.log(vm);
+
+    resumeData.extend(vm, resumeData.data.cn.header);
+
+    vm.pageIndex = 0;
+
 }
diff --git a/src/components/rHeader/cmpt.less b/src/components/rHeader/cmpt.less
@@ -52,10 +52,10 @@
 			}
 		}
 	}
-	.-nav{
+	.-header-nav{
 		height: 50px;
 		position: absolute;
-		top: 50px;
+		top: 60px;
 		width: 100%;
 		font-size: 13px;
 		background-color: rgba(255, 255, 255, 0.8);
@@ -66,6 +66,9 @@
 			align-items: center;
 			display: flex;
 			height: 50px;
+			.-cur-index{
+				color:#38BCFF;
+			}
 		}
 	}
 	.-show-nav{

diff --git a/src/components/zkyResume/cmpt.html b/src/components/zkyResume/cmpt.html
@@ -1,5 +1,5 @@
 <div>
-    <resume-header></resume-header>
+    <resume-header page-index="zr.pageIndex"></resume-header>
 
     <resume-main page-index="zr.pageIndex">
 

diff --git a/src/components/zkyResume/cmpt.js b/src/components/zkyResume/cmpt.js
@@ -8,27 +8,61 @@ export default angular
 		rFooter,
 		rMain
 	])
-	.service(resumeData,[
+	.service("resumeData",[
 		function(){
-			var data = {
+            this.data = {
 				cn:{
 					header:{
 						langList:["中","英"],
 						titleList:["首页","我的信息","我的技能","我的经历","我的作品","联系我"]
 					},
 					footer:{},
-					default:{},
-					info:{},
-					skill:{},
+					default:{
+                    	quote:"生活是一种绵延不绝的渴望，渴望不断上升，变得更伟大而高贵。",
+						desList:[
+							"我叫赵柯宇",
+							"一名前端研发工程师",
+							"[email protected]"
+						]
+					},
+					info:{
+						infoList:[
+                            {icon:"1.png",key:"年龄",value:"26岁"},
+							{icon:"2.png",key:"学历",value:"本科"},
+							{icon:"3.png",key:"坐标",value:"成都"},
+							{icon:"4.png",key:"状态",value:"在职"}
+						],
+                        desList:[
+                            "三年互联网经验,两年半全职前端开发经验",
+                            "项目常用原生JS开发,深谙组件化,模块化开发之道",
+                            "高效的自学能力,独立分析解决问题能力,代码强迫症患者"
+                        ]
+					},
+					skill:{
+                        outCircleList:["git","webpack","gulp","less","cordova","angular","nodejs","react"],
+						innerCircleList:["es6","vue","ng2","fp"],
+						desList:[
+                            "三年互联网经验，两年半全职前端开发经验",
+                            "项目常用原生JS开发，深谙组件化，模块化开发之道",
+                            "高效的自学能力,独立分析解决问题能力，代码强迫症患者"
+                        ]
+					},
 					demo:{},
 					experience:{},
 					contact:{}
 				},
 				en:{
 
 				}
-
 			};
+            this.extend = function(destination,source){
+                for (let prop in source) {
+                    if (!source.hasOwnProperty(prop)) {
+                        continue;
+                    }
+                    destination[prop] = source[prop];
+                }
+			}
 		}
 	])