173 lines
4.3 KiB
Vue
173 lines
4.3 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div v-loading="loading">
|
||
<div class="item" v-for="item in dataList" :key="item.id">
|
||
<div style="margin: 10px 0 10px 0">浏览时间：2022-02-02 22:00:00</div>
|
||
<el-row type="flex" style="justify-content: space-between">
|
||
<div style="display: flex">
|
||
<div class="img">
|
||
<img :src="item.image" alt />
|
||
</div>
|
||
<div class="content">
|
||
<div class="tit" @click="handleDetail(item.id)">
|
||
<div class="text" style="flex: 1">{{ item.name }}</div>
|
||
</div>
|
||
<div class="line">
|
||
企业规模：
|
||
<span>{{ item.kind_title || "后台暂没提供" }}</span>
|
||
</div>
|
||
<div class="line">
|
||
核心产品及应用场景： <span>{{ item.product }}</span>
|
||
</div>
|
||
<div class="line">
|
||
企业网站：
|
||
<a :href="item.url"
|
||
><span>{{ item.url || "后台暂没提供" }}</span></a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="keywords">
|
||
<wordcloud :data="createdData(item.keywords)"></wordcloud>
|
||
</div>
|
||
</el-row>
|
||
<el-divider border-style="dashed"></el-divider>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import wordcloud from "@/views/admin/components/wordcloud.vue";
|
||
|
||
const dataList = ref([]);
|
||
const loading = ref(true);
|
||
const total = ref(0);
|
||
|
||
const data = reactive({
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
postCode: undefined,
|
||
type: "1",
|
||
},
|
||
});
|
||
const { queryParams } = toRefs(data);
|
||
const router = useRouter();
|
||
|
||
/** 查询列表 */
|
||
function getList() {
|
||
loading.value = true;
|
||
dataList.value = [
|
||
{
|
||
id: "E8MnaAkwDj1X",
|
||
kind: 103,
|
||
name: "熊",
|
||
image:
|
||
"http://192.168.0.149:8000/upload/20220221/5b3fe85e89eea53535783ccbd7905c80.jpg",
|
||
product: "核心成果核心产品",
|
||
url: "",
|
||
industrys: ["农、林、牧、渔业/农业/测试名称", "采矿业/煤炭开采和洗选业"],
|
||
keywords: ["关键词1", "关键词2"],
|
||
},
|
||
{
|
||
id: "6bPKVW8aZzXo",
|
||
kind: 103,
|
||
name: "单位名称",
|
||
image:
|
||
"http://192.168.0.149:8000/upload/20220222/4bad3f051b8f08d651ff8835fb785e46.jpg",
|
||
product: "核心成果核心产品",
|
||
url: "",
|
||
industrys: [
|
||
"农、林、牧、渔业/农业/测试名称",
|
||
"采矿业/石油和天然气开采业",
|
||
],
|
||
keywords: ["关键词1", "关键词2"],
|
||
},
|
||
];
|
||
total.value = 15;
|
||
loading.value = false;
|
||
// loading.value = true;
|
||
// listPost(queryParams.value).then(
|
||
// (response) => {
|
||
// postList.value = response.rows;
|
||
// total.value = response.total;
|
||
// loading.value = false;
|
||
// }
|
||
// );
|
||
}
|
||
function createdData(arr) {
|
||
let l = [];
|
||
let snap = JSON.parse(JSON.stringify(arr));
|
||
snap.map((e) => {
|
||
l.push({ name: e, value: 30 });
|
||
return { name: e, value: 30 };
|
||
});
|
||
return l;
|
||
}
|
||
function handleDetail(id) {
|
||
let routeData = router.resolve({
|
||
path: `/searchList/0/detail/${id}`,
|
||
query: { keyword: null },
|
||
});
|
||
window.open(routeData.href, "_blank");
|
||
}
|
||
getList();
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.item {
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
// margin-bottom: 16px;
|
||
|
||
.img {
|
||
width: 90px;
|
||
margin-right: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
img {
|
||
width: 90px;
|
||
height: 90px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.content {
|
||
display: inline-block;
|
||
width: 390px;
|
||
.line {
|
||
font-size: 16px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin: 10px 0;
|
||
span {
|
||
font-size: 16px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
}
|
||
}
|
||
// .keywords {
|
||
// flex: 1;
|
||
// width: 129px;
|
||
// height: 129px;
|
||
// }
|
||
.tit {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
.text {
|
||
margin-right: 200px;
|
||
overflow: hidden;
|
||
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
font-size: 20px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |