|
|
@@ -0,0 +1,188 @@
|
|
|
+<template>
|
|
|
+ <div id="colleges">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <el-col :span="12" class="select">
|
|
|
+ <el-select v-model="region" placeholder="请选择搜索条件">
|
|
|
+ <el-option label="全部产品" value="zhengwu"></el-option>
|
|
|
+ <el-option label="研发服务" value="zhongben"></el-option>
|
|
|
+ <el-option label="技术成果" value="erji"></el-option>
|
|
|
+ <el-option label="创新产品" value="sanji"></el-option>
|
|
|
+ <el-option label="咨询服务" value="zhuanke"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="left">
|
|
|
+ <el-col :span="19" class="input"><el-input v-model="inputs" placeholder="请输入名称"></el-input></el-col>
|
|
|
+ <el-col :span="5" class="btn">
|
|
|
+ <i class="el-icon-search"></i>
|
|
|
+ <span>搜索</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="infoTop">
|
|
|
+ {{ columnTitle }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <ul>
|
|
|
+ <li class="schoolList" v-for="(item, index) in serviceList" :key="index">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image style="width:219px;height:170px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="title textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="yen textOver"> ¥{{ item.yen }} </el-col>
|
|
|
+ <el-col :span="12" class="type"> {{ item.type }}</el-col>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'colleges',
|
|
|
+ props: {
|
|
|
+ serviceList: null,
|
|
|
+ columnTitle: null,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ region: '',
|
|
|
+ inputs: '',
|
|
|
+ title: '高校院所',
|
|
|
+ currentPage: 1,
|
|
|
+ total: 1,
|
|
|
+ }),
|
|
|
+ created() {},
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ul {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+li {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ list-style: none;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+.search .left {
|
|
|
+ background: #fff;
|
|
|
+ height: 60px;
|
|
|
+ padding: 10px;
|
|
|
+ width: 470px;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ border-radius: 0px;
|
|
|
+}
|
|
|
+.search .left:last-child {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.search .btn {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+/deep/.search .btn .el-icon-search {
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: blue;
|
|
|
+ padding: 0 10px;
|
|
|
+ float: left;
|
|
|
+ margin: 7px 0 0 0;
|
|
|
+}
|
|
|
+.search .btn span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #215199;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+/deep/.el-input__inner {
|
|
|
+ background: #f3f3f3;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
+}
|
|
|
+.search .select {
|
|
|
+ background: #fff;
|
|
|
+ height: 60px;
|
|
|
+ padding: 10px;
|
|
|
+ width: 470px;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+}
|
|
|
+.el-select {
|
|
|
+ width: 450px;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ min-height: 530px;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+.infoTop {
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #215299;
|
|
|
+}
|
|
|
+.schoolList {
|
|
|
+ float: left;
|
|
|
+ width: 219px;
|
|
|
+ height: 219px;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.schoolList:nth-child(4n) {
|
|
|
+ width: 215px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+.schoolList .image {
|
|
|
+ height: 170px;
|
|
|
+}
|
|
|
+.schoolList .title {
|
|
|
+ padding: 3px 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #63636d;
|
|
|
+}
|
|
|
+.schoolList .yen {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0 0 0 10px;
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.schoolList .type {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ color: #63636d;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ padding: 34px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
