web-test/src/views/market/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <div class="w_1200">
            <el-col :span="12" class="left">
              <el-col :span="24" class="leftTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>技术成果</span>
                  <span>A</span>
                  <span>chieve</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '1', column_name: '技术成果' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="leftDown">
                <el-row :gutter="7">
                  <el-col
                    :span="6"
                    class="achieveList"
                    v-for="(item, index) in achieveList"
                    :key="index"
                    @click.native="$router.push({ path: '/market/marketlists', query: { type: '1', column_name: '技术成果', id: item.id } })"
                  >
                    <el-col :span="24" class="achieveImage">
                      <el-image v-if="item.image && item.image.length > 0" :src="item.image[0].url"></el-image>
                      <el-image v-else :src="achievezb"></el-image>
                    </el-col>
                    <el-col :span="24" class="name textOver">
                      {{ item.name }}
                    </el-col>
                  </el-col>
                </el-row>
              </el-col>
            </el-col>
            <el-col :span="12" class="right">
              <el-col :span="24" class="rightTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>科技需求</span>
                  <span>T</span>
                  <span>echnology</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '0', column_name: '科技需求' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="rightDown">
                <el-col
                  :span="24"
                  class="technologyList"
                  v-for="(item, index) in technologyList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '0', column_name: '科技需求', id: item.id } })"
                >
                  <el-col :span="20" class="name textOver">
                    {{ item.name }}
                  </el-col>
                  <el-col :span="4" class="date">
                    {{ item.meta | getDate }}
                  </el-col>
                  <el-col :span="12" class="field"> 所属领域：{{ item.field }} </el-col>
                  <el-col :span="12" class="field"> 合作方式：{{ item.cooperation }} </el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24" class="centerimage">
          <el-image :src="gongqiuImage"></el-image>
        </el-col>
        <el-col :span="24" class="down">
          <div class="w_1200">
            <el-col :span="12" class="left">
              <el-col :span="24" class="leftTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>商务信息</span>
                  <span>B</span>
                  <span>usiness</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '2', column_name: '商务信息' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="leftDown">
                <el-col
                  :span="24"
                  class="businessList"
                  v-for="(item, index) in businessList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '2', column_name: '商务信息', id: item.id } })"
                >
                  <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.meta | getDate }}
                  </el-col>
                  <el-col :span="24" class="info">
                    {{ item.informationdesc }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="12" class="right">
              <el-col :span="24" class="rightTop">
                <el-col :span="2" class="image">
                  <el-image :src="iconImage"></el-image>
                </el-col>
                <el-col :span="22" class="txt">
                  <span>专家服务</span>
                  <span>E</span>
                  <span>xpert</span>
                  <span @click="$router.push({ path: '/market/marketlists', query: { type: '3', column_name: '专家服务' } })">更多</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="rightDown">
                <el-col
                  :span="12"
                  class="expertList"
                  v-for="(item, index) in expertList"
                  :key="index"
                  @click.native="$router.push({ path: '/market/marketlists', query: { type: '3', column_name: '专家服务', id: item.id } })"
                >
                  <el-col :span="8" class="expertimage">
                    <el-image v-if="item.expertimage != ''" :src="item.expertimage"></el-image>
                    <el-image :src="expertimage" v-else></el-image>
                  </el-col>
                  <el-col :span="16" class="rightInfo">
                    <el-col :span="24" class="name textOver">
                      {{ item.name }}
                    </el-col>
                    <el-col :span="24" class="school textOver"> {{ item.zwzc }} </el-col>
                    <el-col :span="24" class="company textOver">{{ item.company }} </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <el-col :span="24" class="createpro" style="display:none">
      <el-button type="text" @click="dialog = true">我要<br />发布</el-button>
    </el-col>
    <el-dialog :visible.sync="dialog" class="releaseDialog" title="信息征集" @close="toClose" width="61%">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="技术需求" name="first">
          <el-col :span="24" class="first">
            <el-form ref="technologyForm" :model="technologyForm" :rules="technologyRules" label-width="140px">
              <el-col :span="24" class="company">
                <h1>企业信息</h1>
                <el-col :span="24" class="compnayInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业名称:" prop="company">
                      <el-input v-model="technologyForm.company" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册类型：">
                      <el-input v-model="technologyForm.companytype" placeholder="请输入注册类型"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="统一社会信用代码：">
                      <el-input v-model="technologyForm.companytype" placeholder="请输入统一社会信用代码"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册时间：">
                      <el-date-picker v-model="technologyForm.companydate" type="date" placeholder="请选择时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="注册资金：">
                      <el-input v-model="technologyForm.companycapital" placeholder="请输入注册资金"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业法人：">
                      <el-input v-model="technologyForm.companyperson" placeholder="请输入企业法人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业网址：">
                      <el-input v-model="technologyForm.companyweb" placeholder="请输入企业网址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系人：">
                      <el-input v-model="technologyForm.contacts" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系电话：" prop="phone">
                      <el-input v-model="technologyForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="QQ/微信：">
                      <el-input v-model="technologyForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="电子邮箱：">
                      <el-input v-model="technologyForm.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="上年度企业总收入：">
                      <el-input v-model="technologyForm.sndqyzsr" placeholder="请输入上年度企业总收入"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="上年度研发费用：">
                      <el-input v-model="technologyForm.sndyffy" placeholder="请输入上年度研发费用"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="企业总人数：">
                      <el-input v-model="technologyForm.companytotal" placeholder="请输入企业总人数"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="专(兼)职研发人数：">
                      <el-input v-model="technologyForm.zjzyfrs" placeholder="请输入专(兼)职研发人数"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业简介：">
                      <el-input
                        v-model="technologyForm.companybrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="主要产品：">
                      <el-input
                        v-model="technologyForm.mainproduct"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入主要产品"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业资质(荣誉)：">
                      <el-input
                        v-model="technologyForm.qualifications"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业资质(荣誉)"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="product">
                <h1>技术需求</h1>
                <el-col :span="24" class="productInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="名称：" prop="name">
                      <el-input v-model="technologyForm.name" placeholder="请输入需求名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="需求紧急程度：">
                      <el-select v-model="technologyForm.degreeurgency" placeholder="请选择需求紧急程度">
                        <el-option label="特急" value="特急"></el-option>
                        <el-option label="一般" value="一般"></el-option>
                        <el-option label="储备" value="储备"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="所属领域：">
                      <el-select v-model="technologyForm.field" filterable>
                        <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="投资预算：">
                      <el-input v-model="technologyForm.budget" placeholder="请输入投资预算"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="合作方式：">
                      <el-select v-model="technologyForm.cooperation" filterable>
                        <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术说明：">
                      <el-input
                        v-model="technologyForm.requirementdesc"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术难题/需求说明"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="预期目标：">
                      <el-input
                        v-model="technologyForm.expect"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入预期技术目标描述"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="需求现状：">
                      <el-input
                        v-model="technologyForm.present"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入需求现状及应对措施"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="合作条件及要求：">
                      <el-input
                        v-model="technologyForm.condition"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入合作条件及要求"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-form>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini" @click="technologyBtn">保存</el-button>
            </el-col>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="科技成果" name="second">
          <el-col :span="24" class="first">
            <el-form ref="achieveForm" :model="achieveForm" :rules="technologyRules" label-width="140px">
              <el-col :span="24" class="company">
                <h1>企业信息</h1>
                <el-col :span="24" class="compnayInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业名称:" prop="company">
                      <el-input v-model="achieveForm.company" placeholder="请输入企业名称"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="企业网址：">
                      <el-input v-model="achieveForm.companyweb" placeholder="请输入企业网址"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系人：">
                      <el-input v-model="achieveForm.contacts" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="联系电话：" prop="phone">
                      <el-input v-model="achieveForm.phone" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="QQ/微信：">
                      <el-input v-model="achieveForm.qqwx" placeholder="请输入QQ/微信"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="电子邮箱：">
                      <el-input v-model="achieveForm.email" placeholder="请输入电子邮箱"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="企业简介：">
                      <el-input
                        v-model="achieveForm.companybrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入企业简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="product">
                <h1>科技成果</h1>
                <el-col :span="24" class="productInfo">
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果名称：" prop="name">
                      <el-input v-model="achieveForm.name" placeholder="请输入注册类型"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="所属领域：">
                      <el-select v-model="achieveForm.field" filterable>
                        <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="合作方式：">
                      <el-select v-model="achieveForm.cooperation" filterable>
                        <el-option v-for="(item, index) in cooperationList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" class="txt">
                    <el-form-item label="成果状态：">
                      <el-select v-model="achieveForm.achievestatus" filterable>
                        <el-option v-for="(item, index) in achievestatusList" :key="index" :value="item.name" :label="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果权属：">
                      <el-input v-model="achieveForm.achieveown" placeholder="请输入成果权属"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="成果来源：">
                      <el-select v-model="achieveForm.achievesource" placeholder="请选择成果来源">
                        <el-option label="国家项目" value="国家项目"></el-option>
                        <el-option label="省级项目" value="省级项目"></el-option>
                        <el-option label="市级项目" value="市级项目"></el-option>
                        <el-option label="自选项目" value="自选项目"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="意向价格：">
                      <el-input v-model="achieveForm.intentionprice" placeholder="请输入意向价格"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="专利信息：">
                      <el-input v-model="achieveForm.patentinfo" placeholder="请输入专利信息"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="专利状态：">
                      <el-select v-model="achieveForm.patentstatus" placeholder="请选择专利状态">
                        <el-option label="已申请" value="已申请"></el-option>
                        <el-option label="已授权" value="已授权"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txt">
                    <el-form-item label="项目路演：">
                      <el-input v-model="achieveForm.roadshow" placeholder="请输入项目路演"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="成果简介：">
                      <el-input
                        v-model="achieveForm.achievebrief"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入成果简介"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术特点：">
                      <el-input
                        v-model="achieveForm.features"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术特点"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="技术团队：">
                      <el-input
                        v-model="achieveForm.team"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入技术团队"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="商业预期：">
                      <el-input
                        v-model="achieveForm.expectations"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入商业预期"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24" class="txtTwo">
                    <el-form-item label="合作条件及要求：">
                      <el-input
                        v-model="achieveForm.condition"
                        type="textarea"
                        maxlength="300"
                        show-word-limit
                        :autosize="{ minRows: 4, maxRows: 5 }"
                        placeholder="请输入合作条件及要求"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-col>
            </el-form>
            <el-col :span="24" class="btn">
              <el-button type="primary" size="mini" @click="achieveBtn">保存</el-button>
            </el-col>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: product } = createNamespacedHelpers('marketproduct');
const { mapActions: expertsuser } = createNamespacedHelpers('expertsuser');
const { mapActions: markettype } = createNamespacedHelpers('markettype');
var moment = require('moment');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      gongqiuImage: require('@/assets/live/main2.png'),
      iconImage: require('@/assets/live/square_big.png'),
      achievezb: require('@/assets/achievezb.jpg'),
      expertimage: require('@/assets/live/222.png'),
      // 成果
      achieveList: [
        // {
        //   achievebrief: '1',
        //   achieveown: '权属',
        //   achievesource: '国家项目',
        //   achievestatus: '原理样机',
        //   company: '高新技术企业',
        //   condition: '1',
        //   contacts: '高新技术企业',
        //   cooperation: '合作开发',
        //   expectations: '1',
        //   features: '1',
        //   field: '电子信息技术',
        //   id: '5f72a7f78ee21ce51c076da7',
        //   image: [
        //     {
        //       url: '/files/image/20200929112017.jpg',
        //       _id: '5f72a7f78ee21ce51c076dab',
        //     },
        //     {
        //       url: '/files/image/20200929112021.jpg',
        //       _id: '5f72a7f78ee21ce51c076daa',
        //     },
        //   ],
        //   intentionprice: '123',
        //   name: '测试专利信息',
        //   phone: '18000000008',
        //   qqwx: '12345678',
        //   roadshow: '/files/roadshow/20200929112010.xlsx',
        //   status: '1',
        //   team: '1',
        //   type: '1',
        //   userid: '5f7043b5114497e1d0bb452a',
        // },
      ],
      // 技术
      technologyList: [],
      // 商务信息
      businessList: [],
      // 专家信息
      expertList: [],
      // 未注册用户发布产品
      dialog: false,
      activeName: 'first',
      // 所属领域
      fieldList: [],
      // 成果状态
      achievestatusList: [],
      // 合作方式
      cooperationList: [],
      // 技术
      technologyForm: {},
      // 成果
      achieveForm: {},
      technologyRules: {
        company: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.search();
    this.searchtype();
  },
  methods: {
    ...markettype({ markettypeList: 'query' }),
    ...product({ newquery: 'newquery', productCreate: 'create' }),
    ...expertsuser({ expertQuery: 'query' }),
    async search() {
      let res = await this.newquery({ skip: 0, limit: 8, type: '1', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `achieveList`, res.data);
      res = await this.newquery({ skip: 0, limit: 6, type: '0', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `technologyList`, res.data);
      res = await this.newquery({ skip: 0, limit: 5, type: '2', status: '1' });
      if (this.$checkRes(res)) this.$set(this, `businessList`, res.data);
      res = await this.expertQuery({ skip: 0, limit: 6 });
      if (this.$checkRes(res)) this.$set(this, `expertList`, res.data);
    },
    // 未注册用户添加产品
    // 查询字典表
    async searchtype() {
      // 所属领域;
      let res = await this.markettypeList({ category: '01' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
      // 成果状态;
      res = await this.markettypeList({ category: '02' });
      if (this.$checkRes(res)) {
        this.$set(this, `achievestatusList`, res.data);
      }
      // 合作方式;
      res = await this.markettypeList({ category: '03' });
      if (this.$checkRes(res)) {
        this.$set(this, `cooperationList`, res.data);
      }
    },
    // 技术保存
    async technologyBtn() {
      let data = this.technologyForm;
      data.type = '0';
      data.status = '0';
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息创建成功',
          type: 'success',
        });
        this.toClose();
      } else {
        this.$message.error('信息创建失败');
      }
    },
    // 成果保存
    async achieveBtn() {
      let data = this.achieveForm;
      data.type = '0';
      data.status = '0';
      let res = await this.productCreate(data);
      if (this.$checkRes(res)) {
        this.$message({
          message: '信息创建成功',
          type: 'success',
        });
        this.toClose();
      } else {
        this.$message.error('信息创建失败');
      }
    },
    // 取消
    toClose() {
      this.technologyForm = {};
      this.achieveForm = {};
      this.dialog = false;
    },
  },
  // 过滤时间
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  // width: 80%;
  width: 1200px;
  margin: 0 auto;
}
.top {
  margin: 15px 0;
  height: 500px;
  overflow: hidden;
  .left {
    border-right: 1px dashed #ccc;
    .leftTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .leftDown {
      height: 450px;
      .achieveList {
        position: relative;
        overflow: hidden;
        height: 220px;
        margin-top: 5px;
        .achieveImage {
          .el-image {
            width: 100%;
            height: 220px;
            overflow: hidden;
            border-radius: 5px;
            transition: all 0.4s linear;
          }
        }
        .name {
          color: #fff;
          width: 100%;
          transform: translateY(-50%) scale(0);
          position: absolute;
          top: 50%;
          left: 0;
          height: 40px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          z-index: 200;
          transition: all 0.4s linear;
        }
      }
      .achieveList:hover {
        cursor: pointer;
        // .name {
        //   color: #0085d2;
        //   font-weight: bold;
        // }
      }
      .achieveList::before {
        content: '';
        // background: linear-gradient(to left top, #e6e6fa, #b0c4de);
        background: #ccc;
        height: 100%;
        width: 100%;
        opacity: 0;
        position: absolute;
        z-index: 100;
        left: 0;
        top: 0;
        transition: all 0.4s linear;
      }
      .achieveList:hover::before {
        opacity: 0.4;
      }
      .achieveList:hover {
        // box-shadow: 3px 12px 15px rgba(0, 0, 0, 0.4);
        box-shadow: 3px 5px 6px rgba(0, 0, 0, 0.5);
      }
      .achieveList:hover .achieveImage .el-image {
        transform: scale(1.2);
      }
      .achieveList:hover .name {
        transform: translateY(-50%) scale(1);
        font-weight: bolder;
      }
    }
  }
  .right {
    .rightTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .rightDown {
      padding: 0 10px;
      .technologyList {
        padding: 10px 0;
        border-bottom: 1px dashed #ccc;
        .name {
          font-size: 18px;
        }
        .date {
          text-align: center;
          font-size: 16px;
        }
        .field {
          padding: 10px 0 0 0;
          font-size: 15px;
        }
      }
      .technologyList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
}
.centerimage {
  text-align: center;
  .el-image {
    height: 140px;
  }
}
.down {
  height: 550px;
  padding: 50px 0 0 0;
  margin: 0 0 15px 0;
  background-color: #e9edf6;
  .left {
    border-right: 1px dashed #ccc;
    .leftTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .leftDown {
      height: 450px;
      padding: 0 10px;
      .businessList {
        padding: 10px 0;
        border-bottom: 1px dashed #044b79;
        .name {
          font-size: 18px;
        }
        .messbute {
          font-size: 16px;
        }
        .date {
          font-size: 16px;
          text-align: center;
        }
        .info {
          padding: 5px 0 0 0;
          height: 45px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .businessList:last-child {
        border-bottom: none;
      }
      .businessList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    .rightTop {
      height: 50px;
      .txt {
        height: 47px;
        line-height: 47px;
        border-bottom: 3px solid #044b79;
        span:first-child {
          color: #000000;
          font-size: 24px;
          font-weight: bold;
        }
        span:nth-child(2) {
          color: #92959a;
          font-size: 24px;
          font-weight: bold;
          margin: 0 0 0 10px;
        }
        span:nth-child(3) {
          color: #92959a;
          font-size: 18px;
          font-weight: bold;
        }
        span:last-child {
          float: right;
          padding: 0 15px;
          font-size: 16px;
          font-weight: bold;
          color: #044b79;
        }
        span:last-child:hover {
          cursor: pointer;
        }
      }
    }
    .rightDown {
      height: 450px;
      padding: 0 10px;
      .expertList {
        margin: 20px 0 10px 0;
        padding: 10px 0;
        border-bottom: 1px dashed #044b79;
        .expertimage {
          .el-image {
            width: 90px;
            height: 90px;
            border-radius: 90px;
          }
        }
        .rightInfo {
          padding: 0 10px;
          .name {
            font-size: 18px;
            padding: 7px 0 0 0;
          }
          .school {
            font-size: 16px;
            padding: 7px 0 0 0;
          }
          .edu {
            font-size: 16px;
            padding: 7px 0 0 0;
          }
          .company {
            font-size: 16px;
            padding: 7px 0 0 0;
          }
        }
      }
      .expertList:nth-child(5) {
        border-bottom: none;
      }
      .expertList:nth-child(6) {
        border-bottom: none;
      }
      .expertList:hover {
        cursor: pointer;
        .name {
          color: #0085d2;
          font-weight: bold;
        }
      }
    }
  }
}
.createpro {
  position: fixed;
  bottom: 100px;
  left: 100px;
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
  .el-button {
    font-size: 25px;
  }
}
.createpro:hover {
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
  -webkit-box-shadow: 0 0 6px #0085d2;
  box-shadow: 0 0 6px #0085d2;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  cursor: pointer;
  .el-button {
    font-weight: bold;
  }
}
.releaseDialog {
  margin: 15px 0;
  .first {
    .company {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .compnayInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .product {
      border: 1px solid #ccc;
      padding: 0 15px 15px 15px;
      h1 {
        margin: 10px 10px;
        border-bottom: 1px solid red;
        height: 40px;
        line-height: 40px;
      }
      .productInfo {
        .txt {
          margin: 0 0 5px 0;
          border-bottom: 1px dashed #ccc;
          padding: 10px 0;
          .left {
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
          }
        }
        .txtTwo {
          p {
            font-size: 15px;
            padding: 10px;
          }
        }
      }
    }
    .btn {
      text-align: center;
      margin: 15px 0;
    }
  }
}
</style>