|
|
@@ -0,0 +1,221 @@
|
|
|
+<template>
|
|
|
+ <div id="marketProduct">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-tabs v-model="marketTab" type="card">
|
|
|
+ <el-tab-pane label="技术成果" name="first">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-col :span="4" class="achieveList" v-for="(item, index) in achieveList" :key="index">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <p class="textOver">{{ item.name }}</p>
|
|
|
+ <p>{{ item.achievebrief }}</p>
|
|
|
+ <p class="textOver">领域：{{ item.field }}</p>
|
|
|
+ <p class="textOver">联系人{{ item.contacts }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="
|
|
|
+ $router.push({
|
|
|
+ path: '/live/hall/dock/dockDetail',
|
|
|
+ query: { id: item._id, dockid: dock_id, type: item.type },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >对接</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two" v-if="achieveList.length >= 10">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '技术成果', dockid: dock_id } })"
|
|
|
+ >查看更多项目</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="科技需求" name="second">
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
+ <el-col :span="4" class="techolList" v-for="(item, index) in techolList" :key="index">
|
|
|
+ <el-col :span="24" class="top">
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ <p>所属领域：{{ item.field }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="down">
|
|
|
+ <el-button size="mini" type="primary" @click="oneBtnDetail(item)">详情</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="success"
|
|
|
+ @click="
|
|
|
+ $router.push({
|
|
|
+ path: '/live/hall/dock/dockDetail',
|
|
|
+ query: { id: item._id, dockid: dock_id, type: item.type },
|
|
|
+ })
|
|
|
+ "
|
|
|
+ >对接</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two" v-if="techolList.length >= 10">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="$router.push({ path: '/hall/productList/technologyList', query: { column_name: '科技需求', dockid: dock_id } })"
|
|
|
+ >查看更多项目</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog title="信息详情" :visible.sync="dialogVisible" width="55%" :before-close="handleClose">
|
|
|
+ <directDetail :directInfo="directInfo"></directDetail>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import directDetail from '@/layout/direct/directDetail.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+export default {
|
|
|
+ name: 'marketProduct',
|
|
|
+ props: {
|
|
|
+ achieveList: { type: Array },
|
|
|
+ techolList: { type: Array },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ directDetail,
|
|
|
+ },
|
|
|
+ data: function() {
|
|
|
+ return {
|
|
|
+ marketTab: 'first',
|
|
|
+ dock_id: '',
|
|
|
+ dialogVisible: false,
|
|
|
+ directInfo: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$set(this, `dock_id`, this.$route.query.id);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 信息详情
|
|
|
+ oneBtnDetail(data) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$set(this, `directInfo`, data);
|
|
|
+ },
|
|
|
+ handleClose(done) {
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-tabs__item.is-active {
|
|
|
+ color: #fff;
|
|
|
+ background: #d4443e;
|
|
|
+}
|
|
|
+/deep/.el-tabs__item:hover {
|
|
|
+ color: #fff;
|
|
|
+ background: #d4443e;
|
|
|
+}
|
|
|
+/deep/.el-tabs__header {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.one {
|
|
|
+ padding: 10px 10px 0 10px;
|
|
|
+ height: 540px;
|
|
|
+ overflow: hidden;
|
|
|
+ .achieveList {
|
|
|
+ width: 19%;
|
|
|
+ height: 250px;
|
|
|
+ background: url('~@/assets/技术成果1.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin: 0 10px 15px 0;
|
|
|
+ padding: 22px 22px 8px 22px;
|
|
|
+ .top {
|
|
|
+ height: 190px;
|
|
|
+ overflow: hidden;
|
|
|
+ p:nth-child(1) {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ p:nth-child(2) {
|
|
|
+ font-size: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 6;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ padding: 0 5px;
|
|
|
+ height: 105px;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ p:nth-child(3) {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 4px 0 0 0;
|
|
|
+ }
|
|
|
+ p:nth-child(4) {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 4px 0 0 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .achieveList:nth-child(5n) {
|
|
|
+ margin: 0 0 15px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.two {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.thr {
|
|
|
+ padding: 10px 10px 0 10px;
|
|
|
+ height: 540px;
|
|
|
+ overflow: hidden;
|
|
|
+ .techolList {
|
|
|
+ width: 19%;
|
|
|
+ height: 250px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 10px 15px 0;
|
|
|
+ padding: 22px 22px 8px 22px;
|
|
|
+ .top {
|
|
|
+ height: 190px;
|
|
|
+ overflow: hidden;
|
|
|
+ p:nth-child(1) {
|
|
|
+ height: 145px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 6;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ p:nth-child(2) {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
