开发中...

SalmanZhao · Mar 16, 2017 · cb711ec · cb711ec
1 parent 5fe252e
commit cb711ec
Show file tree

Hide file tree

Showing 10 changed files with 285 additions and 196 deletions.
diff --git a/src/components/++skillCircle/cmpt.html b/src/components/++skillCircle/cmpt.html
diff --git a/src/components/++skillCircle/cmpt.js b/src/components/++skillCircle/cmpt.js
diff --git a/src/components/++skillCircle/cmpt.less b/src/components/++skillCircle/cmpt.less
diff --git a/src/components/+rExperience/cmpt.html b/src/components/+rExperience/cmpt.html
@@ -1,26 +1,24 @@
 <div class="-page -experience">
-    <div class="-content">
-        <div class="-banner" touch-three-d>
-            <div class="-left">
-                <div class="-img"></div>
-            </div>
-            <div class="-right">
-                <h4 class="-title">壹零陆文化传播有限责任公司</h4>
-                <p class="-time">2014年3月~2014年8月</p>
-                <p class="-post">职位：SEO</p>
-                <ul class="-list">
-                    <li class="-item">负责网站后台维护，微博、微信等新媒体创意撰写，营销和推广</li>
-                    <li class="-item">负责百度PPC后台调整</li>
-                    <li class="-item">获得最佳新人奖</li>
-                    <li class="-item">同期工作之余开始系统性的自学web前端各项技术</li>
-                </ul>
+    <div class="-contain">
+        <div class="-banner" touch-three-d >
+            <div class="-experience-content">
+                <div class="-left">
+                    <div class="-img" style="background-image: url({{$ctrl.exp.imgUrl}})"></div>
+                </div>
+                <div class="-right">
+                    <h4 class="-title">{{$ctrl.exp.title}}</h4>
+                    <p class="-time">{{$ctrl.exp.time}}</p>
+                    <p class="-post">{{$ctrl.exp.post}}</p>
+                    <p class="-tech">{{$ctrl.exp.tech}}</p>
+                    <ul class="-list">
+                        <li class="-item" ng-repeat="item in $ctrl.exp.contentList track by $index">{{item}}</li>
+                    </ul>
+                </div>
             </div>
         </div>
         <div class="-shout-cut">
-            <ul class="-cut-list">
-                <li class="-item"></li>
-                <li class="-item"></li>
-                <li class="-item"></li>
+            <ul class="-cut-list" switch-exp>
+                <li class="-item" data-index="{{$index}}" ng-repeat="item in $ctrl.cutList track by $index"></li>
             </ul>
         </div>
     </div>

diff --git a/src/components/+rExperience/cmpt.js b/src/components/+rExperience/cmpt.js
@@ -8,6 +8,46 @@ export default angular
 			pageIndex:"<"
 		}
 	})
+	.constant("expList",[
+		{
+			title:"壹零陆文化传播有限责任公司",
+			time:"2014年3月~2014年8月",
+			post:"职位：SEO",
+			imgUrl:"img/seo.png",
+			tech:"SEO,SEM,百度（360，搜狗）竞价，百度（360,搜狗）推广等",
+			contentList:[
+				"负责网站后台维护，微博、微信等新媒体创意撰写，营销和推广",
+				"负责百度PPC后台调整",
+				"获得最佳新人奖",
+				"同期工作之余开始系统性的自学web前端各项技术",
+			]
+		},
+		{
+			title:"卓煌企业管理有限公司",
+			time:"2014年8月~2015年6月",
+			post:"职位：网页开发兼SEO优化",
+			tech:"html5,css3,javascript,jquery,bootstrap,underscore等",
+			contentList:[
+				"负责企业站静态页开发",
+				"负责网站后台维护",
+				"负责百度竞价操作及seo优化",
+				"同期工作之余提升自己原生JS的编码能力",
+			]
+		},
+		{
+			title:"兰途网络科技有限公司",
+			time:"2015年6月~至今",
+			post:"职位：web前端研发工程师",
+			tech:"less gulp angular1.x cordova git 原生javascript及若干类库",
+			contentList:[
+				"负责快速构建高质量移动app页面",
+				"git版本控制，less预编译，gulp自动化构建，cordova打包",
+				"使用原生JS+angularJS进行前端开发",
+				"采用组件化,模块化，保证面向未来的单向数据流思想",
+				"同期开始学习ES6及当下热门的vue,react,ng2,并思索设计模式及函数式编程的思想"
+			]
+		}
+	])
 	.directive("touchThreeD",[
 		"$window",
 		function($window){
@@ -58,15 +98,52 @@ export default angular
 			}
 		}
 	])
+	.directive("switchExp",[
+		"expList",
+		function(expList){
+			function link($scope,ele){
+
+				let
+					vm = $scope.$ctrl,
+					index = 0,
+					contentNode = document.body.querySelectorAll(".-experience-content")[0];
+
+				ele[0].addEventListener("click",switchExpList);
+
+				function switchExpList(evt){
+					if(evt.target.nodeName != "LI"){
+						return;
+					}
+
+					if(evt.target.dataset.index !== index){
+						index = evt.target.dataset.index;
+						contentNode.style.opacity = "0";
+						contentNode.addEventListener("webkitTransitionEnd",transitionEndHandler);
+					}
+				}
+				function transitionEndHandler(){
+					contentNode.style.opacity = "1";
+					$scope.$apply(function(){
+						vm.exp = expList[index];
+					});
+					contentNode.removeEventListener("webkitTransitionEnd",transitionEndHandler);
+				}
+			}
+			return{
+				link:link
+			}
+		}
+	])
 	.name;
 
-ResumeExperienceCtrl.$inject = ["$scope"];
+ResumeExperienceCtrl.$inject = ["expList"];
 
-function ResumeExperienceCtrl($scope) {
-	console.log("footer");
+function ResumeExperienceCtrl(expList) {
 
 	var vm = this;
-	console.log(vm.pageIndex);
 
+	vm.cutList = new Array(3);
+
+	vm.exp = expList[0];
 
 }
diff --git a/src/components/+rExperience/cmpt.less b/src/components/+rExperience/cmpt.less
@@ -1,46 +1,53 @@
 .-experience{
-	.-content{
-		perspective:800px;
-	}
-	.-banner{
-		width: 900px;
-		height: 300px;
-		background: #FFF;
-		margin:0 auto;
-		border: 1px solid #eee;
-		border-radius: 10px;
-		color:#000;
-		transition: transform .3s linear;
-		overflow: hidden;
-		p{
-			transform: translateZ(20px);
-		}
-		.-left{
-			 float: left;
-			 height: 100%;
-			 position: relative;
-			 .-img{
-				 background: url("../img/seo.png") no-repeat center center;
-				 background-size: contain;
-				 width: 300px;
-				 height: 100%;
-			 }
-			 &:after{
-				 content: "";
-				 background: #eee;
-				 width: 1px;
-				 position: absolute;
-				 top: 10%;
-				 bottom: 10%;
-				 right: 0;
-			 }
-		 }
-		.-right{
-			padding-left: 5%;
-			float: left;
-			height: 100%;
+	.-contain{
+		perspective:900px;
+		.-banner{
+			width: 900px;
+			height: 400px;
+			background: #FFF;
+			margin:0 auto;
+			border: 1px solid #eee;
+			border-radius: 10px;
+			color:#000;
+			transition: transform .3s linear;
+			overflow: hidden;
+			.-experience-content{
+				transition: opacity 0.3s;
+				height: 100%;
+				.-left{
+					float: left;
+					height: 100%;
+					position: relative;
+					.-img{
+						background: no-repeat center center;
+						background-size: contain;
+						width: 300px;
+						height: 100%;
+					}
+					&:after{
+						content: "";
+						background: #eee;
+						width: 1px;
+						position: absolute;
+						top: 10%;
+						bottom: 10%;
+						right: 0;
+					}
+				}
+				.-right{
+					padding-left: 50px;
+					float: left;
+					height: 100%;
+					width: 550px;
+					p{
+						transform: translateZ(20px);
+					}
+				}
+			}
 		}
+
 	}
+
 	.-shout-cut{
 		width: 200px;
 		margin: 0 auto;