Files
2022-08-30 10:36:30 +08:00

173 lines
4.3 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>