|
@@ -0,0 +1,418 @@
|
|
|
+<template>
|
|
|
+ <div id="index">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main animate__animated animate__backInRight">
|
|
|
+ <el-col :span="24" class="iachievement">
|
|
|
+ <el-image class="image" :src="achievement" fit="fill" />
|
|
|
+ <div class="input">
|
|
|
+ <a-input v-model:value="searchValue" placeholder="请输入想要搜索的内容">
|
|
|
+ <template #suffix>
|
|
|
+ <SearchOutlined :style="{ fontSize: '30px', color: '#ffffff' }" />
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <div class="w_1200">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
|
|
|
+ <el-col :span="3" class="left">{{ val.title }}</el-col>
|
|
|
+ <el-col :span="21" class="right">
|
|
|
+ <a-button class="title" v-for="(item, index) in val.list" :key="index" type="link" size="samll">{{ item.label }}</a-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click="toView(item)">
|
|
|
+ <el-col :span="24" class="name">
|
|
|
+ <el-tooltip effect="dark" :content="item.name" placement="top">
|
|
|
+ {{ item.name || '暂无成果名称' }}
|
|
|
+ </el-tooltip>
|
|
|
+ </el-col>
|
|
|
+ <el-row class="other">
|
|
|
+ <el-col :span="8" class="other_1"><span>技术领域:</span>{{ item.area || '暂无技术领域' }}</el-col>
|
|
|
+ <el-col :span="8" class="other_1"><span>成果地区:</span>{{ item.city || '暂无成果地区' }}</el-col>
|
|
|
+ <el-col :span="8" class="other_1"><span>单位:</span>{{ item.unit || '暂无单位' }}</el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-col :span="24" class="brief textOver">{{ item.brief || '没有更多成果简介' }}</el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="thr">
|
|
|
+ <a-pagination v-model:page-size="limit" show-size-changer :page-size-options="pageSizeOptions" :total="total" @showSizeChange="onShowSizeChange" />
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import type { Ref } from 'vue';
|
|
|
+import { ref, onMounted, getCurrentInstance } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { SearchOutlined } from '@ant-design/icons-vue';
|
|
|
+// 路由
|
|
|
+const router = useRouter();
|
|
|
+const { proxy } = getCurrentInstance() as any;
|
|
|
+// 图片引入
|
|
|
+import achievement from '@/assets/achievement.png';
|
|
|
+// 加载中
|
|
|
+const loading: Ref<any> = ref(false);
|
|
|
+const searchValue = ref<string>('');
|
|
|
+// 列表
|
|
|
+const list: Ref<any> = ref([
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司',
|
|
|
+ brief:
|
|
|
+ '技术特点:专为电子商务行业设计,以自动化和流程化地管理订单、财务、仓库、物流和发货等业务为主。它的目标是提高商家的订单速度和出货速度,有效管理企业内部员工的工作能力和监管财务系统,以及改善企业业务流程、提高企业核心竞争力'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '拉力均衡强稳定性无焊口锚链',
|
|
|
+ area: '先进制造',
|
|
|
+ city: '舟山市',
|
|
|
+ unit: '浙江易丰安全科技有限公司'
|
|
|
+ }
|
|
|
+]);
|
|
|
+let total: Ref<number> = ref(12);
|
|
|
+let skip = 0;
|
|
|
+let limit: number = proxy.$limit;
|
|
|
+const pageSizeOptions = ref<string[]>(['12', '24', '60', '120']);
|
|
|
+const searchList: Ref<any> = ref([
|
|
|
+ {
|
|
|
+ title: '行业分市场',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '全部' },
|
|
|
+ { value: '1', label: '碳中和' },
|
|
|
+ { value: '2', label: '水利科技' },
|
|
|
+ { value: '3', label: '物联网' },
|
|
|
+ { value: '4', label: '产业计量' },
|
|
|
+ { value: '5', label: '卫生健康' },
|
|
|
+ { value: '6', label: '时尚轻纺' },
|
|
|
+ { value: '7', label: '农业科技' },
|
|
|
+ { value: '8', label: '智能化' },
|
|
|
+ { value: '9', label: '海洋科技' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '技术领域',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '全部' },
|
|
|
+ { value: '1', label: '先进制造' },
|
|
|
+ { value: '2', label: '地球、空间与海洋' },
|
|
|
+ { value: '3', label: '新材料' },
|
|
|
+ { value: '4', label: '新能源与节能' },
|
|
|
+ { value: '5', label: '核应用技术' },
|
|
|
+ { value: '6', label: '环境保护' },
|
|
|
+ { value: '7', label: '现代交通' },
|
|
|
+ { value: '8', label: '现代农业' },
|
|
|
+ { value: '9', label: '生物医药与医疗器械' },
|
|
|
+ { value: '10', label: '电子信息' },
|
|
|
+ { value: '11', label: '航空航天' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '成熟度',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '全部' },
|
|
|
+ { value: '1', label: '正在研发' },
|
|
|
+ { value: '2', label: '已有样品' },
|
|
|
+ { value: '3', label: '通过小试' },
|
|
|
+ { value: '4', label: '通过中试' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '出让方式',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '全部' },
|
|
|
+ { value: '1', label: '转让' },
|
|
|
+ { value: '2', label: '许可' },
|
|
|
+ { value: '3', label: '作价入股' },
|
|
|
+ { value: '4', label: '其他' },
|
|
|
+ { value: '4', label: '免费许可/先用后转' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '交易价格',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '全部' },
|
|
|
+ { value: '1', label: '面议' },
|
|
|
+ { value: '2', label: '1-10万元' },
|
|
|
+ { value: '3', label: '10-20万元' },
|
|
|
+ { value: '4', label: '20-100万元' },
|
|
|
+ { value: '5', label: '100-500万元' },
|
|
|
+ { value: '6', label: '500-1000万元' },
|
|
|
+ { value: '7', label: '1000万元以上' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '成果地区',
|
|
|
+ list: [
|
|
|
+ { value: '0', label: '北京市' },
|
|
|
+ { value: '1', label: '天津市' },
|
|
|
+ { value: '2', label: '河北省' },
|
|
|
+ { value: '3', label: '山西省' },
|
|
|
+ { value: '4', label: '内蒙古自治区' },
|
|
|
+ { value: '5', label: '辽宁省' },
|
|
|
+ { value: '6', label: '吉林省' },
|
|
|
+ { value: '7', label: '上海市' },
|
|
|
+ { value: '8', label: '江苏省' },
|
|
|
+ { value: '9', label: '浙江省' },
|
|
|
+ { value: '10', label: '安徽省' },
|
|
|
+ { value: '11', label: '福建省' },
|
|
|
+ { value: '0', label: '江西省' },
|
|
|
+ { value: '1', label: '山东省' },
|
|
|
+ { value: '2', label: '河南省' },
|
|
|
+ { value: '3', label: '湖北省' },
|
|
|
+ { value: '4', label: '湖南省' },
|
|
|
+ { value: '5', label: '广东省' },
|
|
|
+ { value: '6', label: '广西壮族自治区' },
|
|
|
+ { value: '7', label: '海南省' },
|
|
|
+ { value: '8', label: '重庆市' },
|
|
|
+ { value: '9', label: '四川省' },
|
|
|
+ { value: '10', label: '贵州省' },
|
|
|
+ { value: '11', label: '云南省' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+]);
|
|
|
+// 查看
|
|
|
+const toView = (item) => {
|
|
|
+ router.push({ path: '/achievement/detail', query: { id: item.id || item._id } });
|
|
|
+};
|
|
|
+const onShowSizeChange = (current: number, pageSize: number) => {
|
|
|
+ console.log(current, pageSize);
|
|
|
+ limit = pageSize;
|
|
|
+};
|
|
|
+// 请求
|
|
|
+onMounted(async () => {
|
|
|
+ loading.value = true;
|
|
|
+ await searchOther();
|
|
|
+ await search({ skip, limit });
|
|
|
+ loading.value = false;
|
|
|
+});
|
|
|
+const search = async (e: { skip: number; limit: number }) => {
|
|
|
+ const info = { skip: e.skip, limit: e.limit };
|
|
|
+ // const res: IQueryResult = await userCheckAxios.query(info);
|
|
|
+ // if (res.errcode == '0') {
|
|
|
+ // list.value = res.data;
|
|
|
+ // total.value = res.total;
|
|
|
+ // }
|
|
|
+};
|
|
|
+// 查询其他信息
|
|
|
+const searchOther = async () => {
|
|
|
+ // let res: IQueryResult;
|
|
|
+ // // 性别
|
|
|
+ // res = await dictAxios.query({ type: 'common_gender' });
|
|
|
+ // if (res.errcode == '0') genderList.value = res.data;
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.main {
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
+
|
|
|
+ .iachievement {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 800px;
|
|
|
+ position: absolute;
|
|
|
+ left: 25%;
|
|
|
+ bottom: 40%;
|
|
|
+
|
|
|
+ :deep(.ant-input-affix-wrapper) {
|
|
|
+ background-color: transparent;
|
|
|
+ border: 3px solid #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.ant-input) {
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-right: 24px;
|
|
|
+
|
|
|
+ border: none !important;
|
|
|
+ outline: none !important;
|
|
|
+ box-shadow: 0 0 0 0 !important;
|
|
|
+ text-shadow: 0 0 0 0 !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+
|
|
|
+ &::placeholder {
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .one {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+
|
|
|
+ .one_1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: #9d9898 1px dashed;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ background: #778cb3;
|
|
|
+ border-radius: 15px;
|
|
|
+ line-height: 26px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .title {
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 15px;
|
|
|
+ margin: 0 10px;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
+ padding-bottom: 10px;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #337ab7;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ padding: 5px 0;
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial, sans-serif;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_1:hover {
|
|
|
+ color: #2374ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brief {
|
|
|
+ line-height: 30px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thr {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|