vue

recruit/recruit/dist/css/app.71d45a95.css

@@ -0,0 +1 @@
+h3[data-v-ea5ee638]{margin:40px 0 0}ul[data-v-ea5ee638]{list-style-type:none;padding:0}li[data-v-ea5ee638]{display:inline-block;margin:0 10px}a[data-v-ea5ee638]{color:#42b983}body{padding:0;margin:0}

recruit/recruit/src/assets/css/base.css

@@ -0,0 +1,4 @@
+body{
+	padding: 0;
+	margin: 0;
+}

recruit/recruit/src/components/common/login/login.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

recruit/recruit/src/components/common/navbar/navbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+	<navbar-item>
+		<span slot="index" class="index">首页</span>
+		<span slot="worker" class="worker">找人才</span>
+		<span slot="work" class="work">找工作</span>
+		<span slot="company" class="company">找公司</span>
+	</navbar-item>
+  </div>
+</template>
+
+<script>
+	import navbarItem from './navbarItem.vue'
+	export default {
+	  name: 'navbar',
+		components:{
+			navbarItem
+		}
+	}
+</script>
+
+<style>
+.index{
+	 position: relative;
+	 top: 10px;
+	 font-size: 17px;
+	 left: 332px;
+	}
+	.worker{
+		position: relative;
+		top: 10px;
+		font-size: 17px;
+		left: 518px;
+	}
+	.work{
+		position: relative;
+		top: 10px;
+		font-size: 17px;
+		left: 703px;
+	}
+	.company{
+		position: relative;
+		top: 10px;
+		font-size: 17px;
+		left: 886px;
+	}
+</style>

recruit/recruit/src/components/common/navbar/navbarItem.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+		<div class="nav_bg">
+			<slot name="index"></slot>
+		  <slot name="worker"></slot>
+			<slot name="work"></slot>
+			<slot name="company"></slot>
+		</div>
+  </div>
+</template>
+
+<script>
+	export default {
+	  name: 'navbar',
+		}
+</script>
+
+<style>
+	.nav_bg{
+		background-color: #4297e8;
+		height: 45px;
+		width:  auto;
+	}
+
+</style>

recruit/recruit/src/components/common/search/search.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="search_bg">
+    <input type="text" class="inputsearch" v-model="name" placeholder="请输入你要搜索的内容" v-on:input="changetext">
+		<button class="sea-btn" >搜索</button>
+    <ul v-show="flag" class="item-ul">
+      <li class="item-ul-li" v-for="item in nlist"  @click="getclick(item)">
+        <span class="">{{item}}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'search',
+  components: {
+
+  },
+data() {
+      return {
+        flag: false,
+        name: '',
+        nlist: [],
+        userList: [
+          {
+            name: '张三',
+            age: 18,
+            address: '中国',
+            phone: 18450994726
+          },
+          {
+            name: '张三',
+            age: 20,
+            address: '中国',
+            phone: 14585459455
+          },
+          {
+            name: '王五',
+            age: 11,
+            address: '中国',
+            phone: 12345678910
+          },
+          {
+            name: '李四',
+            age: 15,
+            address: '中国',
+            phone: 123456
+          },
+          {
+            name: '小红',
+            age: 12,
+            address: '中国',
+            phone: '暂无'
+          }
+        ]
+      }
+    },
+		computed:{
+			
+		},
+		methods:{
+			changetext () {
+				for(let i = 0;i < this.userList.length;i++ )
+					{
+						this.nlist[i]=this.userList[i].name
+	        }
+					console.log(this.nlist)
+			        this.flag = true       
+			      },
+						getclick(name){
+							this.name=name
+							this.flag= false	
+						},		
+		},
+	  created() {
+	  }
+  }
+</script>
+
+
+ <style scoped>
+	 .search_bg{
+		 background-color: #eaebef;
+		 height: 125px;
+	 }
+   .inputsearch{
+		 position: absolute;
+		 left: 800px;
+		 top: 85px;
+     border: 1px solid #c4bebe;
+     height: 30px;
+     width: 400px;
+     font-size: 16px;
+		 padding-left: 10px;
+     }
+     input:focus{
+       border: 1px solid #c4bebe;
+			 outline:none;
+     }
+   
+   .item-ul {
+		 border: 1px solid #c4bebe;
+		 width: 392px;
+		 position: absolute;
+		 top: 102px;
+		 left: 800px;
+		 list-style: none;
+		 padding: 10px;
+     background-color: white;
+		 z-index: 1;
+     }
+     .item-ul-li:hover{
+       background-color: #F1F3F4;
+		 	 cursor: pointer;
+     }
+   .sea-btn{
+		 position: absolute;
+		 left: 1212px;
+		 top: 85px;
+		 background-color: #4297E8;
+		 outline:none;
+		 border: 0px;
+		 width: 88px;
+		 height: 34px;
+		 color: white;
+		 font-size: 17px;
+		 cursor: pointer;
+	 }
+ </style>
+

recruit/recruit/src/views/topbar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+		<div class="grey_top">
+			<span class="iphone">热线电话：400-8884-XXXX</span>
+			<span class="web">欢迎来到XXX人才招聘网</span>
+		</div>
+  </div>
+</template>
+
+<script>
+	export default {
+	  name: 'topbar',
+		}
+</script>
+
+<style>
+	.grey_top{
+		background-color: #e0dada;
+		height: 37px;
+		width:  auto;
+		
+	}
+	span{
+		color: #0b0100;
+		font-size: 14px;
+	}
+	.iphone{
+		position: absolute;
+		top: 8px;
+		left: 244px;
+	}
+	.web{
+		position: absolute;
+		top: 8px;
+		left: 800px;
+	}
+</style>