|
|
@@ -0,0 +1,234 @@
|
|
|
+<template>
|
|
|
+ <div id="groupInfo">
|
|
|
+ <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 groupList" :key="index">
|
|
|
+ <el-col :span="8" class="image">
|
|
|
+ <el-image style="width:130px;height:130px;" :src="item.pic"></el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16" class="content">
|
|
|
+ <el-col :span="20" class="title textOver">{{ item.title }}</el-col>
|
|
|
+ <el-col :span="4" class="city">
|
|
|
+ <i class="el-icon-location"></i>
|
|
|
+ {{ item.city }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="guimo "> 机构规模：{{ item.guimo }} 机构等级：{{ item.dengji }}</el-col>
|
|
|
+ <el-col :span="24" class="lingyu"
|
|
|
+ >重点研究领域：<span>{{ item.lingyu }}</span></el-col
|
|
|
+ >
|
|
|
+ <el-col :span="24" class="jianjie"
|
|
|
+ ><span> 机构简介：</span>
|
|
|
+
|
|
|
+ <p>{{ item.jianjie }}</p></el-col
|
|
|
+ >
|
|
|
+ </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: 'groupInfo',
|
|
|
+ props: {
|
|
|
+ groupList: null,
|
|
|
+ columnTitle: null,
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ src: require('@/assets/address.png'),
|
|
|
+ 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;
|
|
|
+}
|
|
|
+p {
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #215299;
|
|
|
+}
|
|
|
+.schoolList {
|
|
|
+ float: left;
|
|
|
+ height: 149px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20px 0;
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+}
|
|
|
+.schoolList .image {
|
|
|
+ width: 130px;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin: 0 20px 0 0;
|
|
|
+}
|
|
|
+.schoolList .content {
|
|
|
+ width: 760px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+}
|
|
|
+.schoolList .title {
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #215299;
|
|
|
+ text-align: left;
|
|
|
+ height: 36px;
|
|
|
+}
|
|
|
+.schoolList .city {
|
|
|
+ line-height: 36px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.schoolList .guimo {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 26px;
|
|
|
+}
|
|
|
+.schoolList .lingyu {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 26px;
|
|
|
+}
|
|
|
+.schoolList .jianjie span {
|
|
|
+ float: left;
|
|
|
+ width: 80px;
|
|
|
+ height: 42px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+.schoolList .jianjie p {
|
|
|
+ width: 680px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-height: 25px;
|
|
|
+}
|
|
|
+.page {
|
|
|
+ padding: 34px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
