|
|
@@ -0,0 +1,334 @@
|
|
|
+<template>
|
|
|
+ <div id="list">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24" class="one" v-if="type == '1'">
|
|
|
+ <el-col :span="8" class="oneList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="name textOver">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="brief">
|
|
|
+ {{ item.achievebrief }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <p class="textOver">领域:{{ item.field }}</p>
|
|
|
+ <p class="textOver">联系人:{{ item.contacts }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one two" v-else-if="type == '2'">
|
|
|
+ <el-col :span="8" class="twoList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-image :src="item.img_url" class="image">
|
|
|
+ <template #error>
|
|
|
+ <el-image :src="imgUrl"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ <el-col :span="24" class="name textOver">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one thr" v-else-if="type == '3'">
|
|
|
+ <el-col :span="8" class="thrList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="image">
|
|
|
+ <el-image :src="item.img_path">
|
|
|
+ <template #error>
|
|
|
+ <el-image :src="expetImg"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-image>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="other">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <p>{{ item.zwzc || '暂无' }}</p>
|
|
|
+ <p>{{ item.company || '暂无' }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one four" v-else-if="type == '4'">
|
|
|
+ <el-col :span="24" class="fourList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="19" class="title textOver">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="date">
|
|
|
+ <span>{{ item.publish_time || '暂无' }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down"> 简介:{{ item.titlejj }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one five" v-else-if="type == '5'">
|
|
|
+ <el-col :span="24" class="fiveList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <el-col :span="19" class="title textOver">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5" class="date">
|
|
|
+ <span>{{ item.create_time || '暂无' }}</span>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-col :span="12" class="textOver"> 所属领域:{{ item.filed }} </el-col>
|
|
|
+ <el-col :span="12" class="textOver"> 合作方式:{{ item.cooperation }} </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one six" v-else-if="type == '6'">
|
|
|
+ <el-col :span="24" class="sixList" v-for="(item, index) in list" :key="index">
|
|
|
+ <el-col :span="10" class="name textOver">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10" class="messbute"> 信息属性：{{ item.messattribute }} </el-col>
|
|
|
+ <el-col :span="4" class="date">
|
|
|
+ {{ item.create_time }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ {{ item.informationdesc }}
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'list',
|
|
|
+ props: {
|
|
|
+ type: { type: String },
|
|
|
+ list: { type: Array },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ imgUrl: require('@a/fmzl.jpg'),
|
|
|
+ expetImg: require('@a/expert.png'),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ test: {
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ handler(val) {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.main {
|
|
|
+ padding: 5px 0 0 0;
|
|
|
+ .one {
|
|
|
+ height: 435px;
|
|
|
+ overflow: hidden;
|
|
|
+ .oneList {
|
|
|
+ width: 32.1%;
|
|
|
+ height: 212px;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url('~@a/achieve.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ padding: 20px 18px;
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ }
|
|
|
+ .brief {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 6;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 3px 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .oneList:nth-child(3n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .twoList {
|
|
|
+ width: 32.1%;
|
|
|
+ height: 210px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ box-shadow: 0 0 5px #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ .el-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .twoList:nth-child(3n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .thrList {
|
|
|
+ width: 32.1%;
|
|
|
+ height: 210px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 0 10px 10px 0;
|
|
|
+ box-shadow: 0 0 5px #ccc;
|
|
|
+ .image {
|
|
|
+ padding: 15px 0;
|
|
|
+ text-align: center;
|
|
|
+ .el-image {
|
|
|
+ width: 90px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other {
|
|
|
+ padding: 0 5px;
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 4px 0 0 0;
|
|
|
+ }
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .thrList:nth-child(3n) {
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ .fourList {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ padding: 10px 0;
|
|
|
+ .top {
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ background: #044b79;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fiveList {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ padding: 12px 0;
|
|
|
+ .top {
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ background: #044b79;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ .fourList {
|
|
|
+ border-bottom: 1px dashed #ccc;
|
|
|
+ padding: 10px 0;
|
|
|
+ .top {
|
|
|
+ margin: 0 0 5px 0;
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ text-align: right;
|
|
|
+ span {
|
|
|
+ background: #044b79;
|
|
|
+ color: #fff;
|
|
|
+ padding: 0 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sixList {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px dashed #044b79;
|
|
|
+ .name {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .messbute {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ padding: 5px 0 0 0;
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .two {
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+ .thr {
|
|
|
+ padding: 2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
