|
@@ -7,31 +7,41 @@
|
|
|
</el-row>
|
|
|
</template>
|
|
|
<template #functionBar>
|
|
|
- <el-col :span="5" class="searchInput">
|
|
|
- <el-input v-model="input" placeholder="请输入学校名称"></el-input>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-input v-model="search" placeholder="请输入学校名称"></el-input>
|
|
|
</el-col>
|
|
|
- <el-col :span="2">
|
|
|
- <el-button type="info" circle icon="el-icon-search icons"></el-button>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-button type="primary" @click="Search">搜索</el-button>
|
|
|
</el-col>
|
|
|
</template>
|
|
|
<template #main>
|
|
|
<el-row>
|
|
|
- <el-col :span="12" v-for="(item, index) in schoolList" :key="index">
|
|
|
- <ul class="nameCon">
|
|
|
- <li>
|
|
|
- <el-col :span="24" class="nameConImg">
|
|
|
- <img src="../../../assets/schoolLogo.png" />
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="nameConTit">
|
|
|
- <el-link class="nameConTit-txt" @click="$router.push('/jobs/school/detail')">{{ item.name }}</el-link>
|
|
|
- <p class="nameConTit-pla">{{ item.place }}</p>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" class="nameConBtn">
|
|
|
- <el-button v-if="item.status === '未入驻'" @click="join(item.id)">入驻</el-button>
|
|
|
- </el-col>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-col>
|
|
|
+ <div v-if="searchData.length > 0">
|
|
|
+ <el-col :span="12" class="schoolList" v-for="(item, index) in searchData" :key="index">
|
|
|
+ <el-col :span="4" class="nameConImg">
|
|
|
+ <el-image style="width:64px;height:64px;" :src="schoolRul"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="nameConTit">
|
|
|
+ <el-link @click="$router.push('/jobs/school/detail')">{{ item.name }}</el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="nameConBtn">
|
|
|
+ <el-button type="primary" v-if="item.status === '未入驻'" @click="join(item.id)">入驻</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-col class="schoolList" :span="12" v-for="(item, index) in schoolList" :key="index">
|
|
|
+ <el-col :span="4" class="nameConImg">
|
|
|
+ <el-image style="width:64px;height:64px;" :src="schoolRul"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="15" class="nameConTit">
|
|
|
+ <el-link @click="$router.push('/jobs/school/detail')">{{ item.name }}</el-link>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="nameConBtn">
|
|
|
+ <el-button type="primary" v-if="item.status === '未入驻'" @click="join(item.id)">入驻</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
</el-row>
|
|
|
<!-- <el-row class="row_pagination">
|
|
|
<el-col :span="24">
|
|
@@ -65,7 +75,11 @@ export default {
|
|
|
totalRow: 60,
|
|
|
activeIndex: '1',
|
|
|
schoolList: [],
|
|
|
+ search: '',
|
|
|
+ // 搜索后的展示数据
|
|
|
+ searchData: [],
|
|
|
selfSch: {},
|
|
|
+ schoolRul: require('../../../assets/schoolLogo.png'),
|
|
|
}),
|
|
|
created() {
|
|
|
this.getInfo();
|
|
@@ -117,6 +131,24 @@ export default {
|
|
|
this.$set(this, `schoolList`, result.data);
|
|
|
}
|
|
|
},
|
|
|
+ Search() {
|
|
|
+ var search = this.search;
|
|
|
+ if (search) {
|
|
|
+ this.searchData = this.schoolList.filter(function(product) {
|
|
|
+ return Object.keys(product).some(function(key) {
|
|
|
+ return (
|
|
|
+ String(product[key])
|
|
|
+ .toLowerCase()
|
|
|
+ .indexOf(search) > -1
|
|
|
+ );
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else if (search.length === 0) {
|
|
|
+ this.searchData = this.schoolList;
|
|
|
+ } else {
|
|
|
+ return this.searchData;
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -191,54 +223,21 @@ p {
|
|
|
height: 19px;
|
|
|
line-height: 19px;
|
|
|
}
|
|
|
-.nameCon {
|
|
|
- float: left;
|
|
|
-}
|
|
|
-.nameCon li {
|
|
|
- float: left;
|
|
|
- width: 432px;
|
|
|
- padding: 20px 0;
|
|
|
- margin: 0 29px 0 0;
|
|
|
+.schoolList {
|
|
|
+ padding: 20px;
|
|
|
border-bottom: 1px solid #cccccc;
|
|
|
}
|
|
|
-.nameCon li .nameConImg {
|
|
|
- float: left;
|
|
|
- width: 64px;
|
|
|
+.nameConTit {
|
|
|
height: 64px;
|
|
|
+ line-height: 60px;
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
-.nameCon li .nameConTit {
|
|
|
- float: left;
|
|
|
- padding: 0 0 0 10px;
|
|
|
- width: 280px;
|
|
|
- height: 64px;
|
|
|
- line-height: 35px;
|
|
|
-}
|
|
|
-.nameCon li .nameConTit p {
|
|
|
- margin: 0 0 5px 0;
|
|
|
-}
|
|
|
-.nameConTit-txt {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- height: 25px;
|
|
|
- line-height: 25px;
|
|
|
+/deep/.nameConTit .el-link {
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
-.nameConTit-pla {
|
|
|
- font-size: 14px;
|
|
|
- color: #666;
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
-}
|
|
|
-.nameCon li .nameConBtn {
|
|
|
- float: right;
|
|
|
- width: 70px;
|
|
|
+.nameConBtn {
|
|
|
height: 64px;
|
|
|
- padding: 10px 0 0 5px;
|
|
|
-}
|
|
|
-.nameCon li .nameConBtn .el-button {
|
|
|
- padding: 10px 15px;
|
|
|
- background: #5cb85c;
|
|
|
- border-radius: 4px;
|
|
|
- color: #fff;
|
|
|
+ line-height: 64px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
</style>
|