Because I am from the back-end, I recently needed to write a page similar to the Baidu search data display, so I dragged me for ten years. The front-end brother helped me draw one, record it, so that I can learn from it in the future! ! !
Table of contents
Front-end style:
Front-end code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>baidu</title>
<style>
body {
margin: 0;
}
.result-list {
padding: 10px;
}
.result-item {
}
.result-item + .result-item {
margin-top: 10px;
}
.result-title {
font-size: 18px;
color: #2440b3;
text-decoration: underline;
line-height: 22px;
}
.result-title:hover {
color: #315efb;
}
.result-title:active {
color: #f73131;
}
.result-title:visited {
color: #771caa;
}
.result-main {
margin-top: 10px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.result-img {
width: 128px;
height: 85px;
border: 1px solid rgba(0, 0, 0, .05);
border-radius: 12px;
margin-right: 16px;
}
.result-content {
flex: 1;
}
.result-text {
font-size: 13px;
color: #333;
line-height: 21px;
word-wrap: break-word;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.result-date {
color: #9195A3;
margin-right: 4px;
}
.result-site {
margin-top: 4px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.result-site-logo {
width: 16px;
height: 16px;
margin-right: 4px;
}
.result-site-name {
font-size: 13px;
color: #626675;
line-height: 21px;
}
</style>
</head>
<body>
<div class="result-list">
<div class="result-item">
<a class="result-title" href="https://www.baidu.com/" target="_blank">vue-router 详解_vue router_七月J的博客-CSDN博客</a>
<div class="result-main">
<img class="result-img" src="https://t8.baidu.com/it/u=2103148169,968322442&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=14B07D32119EC5CE405191DB0300C0B3&sec=1680022800&t=500aab65ed24c2bc36c8a06583ae5ee1" alt="">
<div class="result-content">
<div class="result-text"><span class="result-date">2021年1月16日</span>vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和</div>
<div class="result-site">
<img class="result-site-logo" src="https://t14.baidu.com/it/u=3876177537,196264593&fm=195&app=88&size=r1,1&n=0&f=JPEG&fmt=auto?sec=1680022800&t=298f08c32b54a02c9413422b91e91141" alt="">
<div class="result-site-name">CSDN博客</div>
</div>
</div>
</div>
</div>
<div class="result-item">
<a class="result-title" href="https://www.baidu.com/abc" target="_blank">vue-router 详解_vue router_七月J的博客-CSDN博客</a>
<div class="result-main">
<img class="result-img" src="https://t8.baidu.com/it/u=2103148169,968322442&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=14B07D32119EC5CE405191DB0300C0B3&sec=1680022800&t=500aab65ed24c2bc36c8a06583ae5ee1" alt="">
<div class="result-content">
<div class="result-text"><span class="result-date">2021年1月16日</span>vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和</div>
<div class="result-site">
<img class="result-site-logo" src="https://t14.baidu.com/it/u=3876177537,196264593&fm=195&app=88&size=r1,1&n=0&f=JPEG&fmt=auto?sec=1680022800&t=298f08c32b54a02c9413422b91e91141" alt="">
<div class="result-site-name">CSDN博客</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Integrate into Vue
Direct loop traversal is displayed on the front end
<div class="result-list" >
<div class="result-item" v-for="(item,index) in dataListSucErr" :key="index" >
<!--获取当前行的数据id，然后去后端查询-->
target="_blank">{
{dataListSucErr[0].name}}</a>-->
<a class="result-title" @click="searchDetail(item.name)" target="_blank">{
{item.userName}}</a>
<div class="result-main">
<img class="result-img" src="https://t8.baidu.com/it/u=2103148169,968322442&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=14B07D32119EC5CE405191DB0300C0B3&sec=1680022800&t=500aab65ed24c2bc36c8a06583ae5ee1" alt="">
<div class="result-content">
<div class="result-text"><span class="result-date">2021年1月16日+{
{item.userId}}</span>vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/ vue-router是基于路由和</div>
<div class="result-site">
<img class="result-site-logo" src="https://t14.baidu.com/it/u=3876177537,196264593&fm=195&app=88&size=r1,1&n=0&f=JPEG&fmt=auto?sec=1680022800&t=298f08c32b54a02c9413422b91e91141" alt="">
<div class="result-site-name">CSDN博客+{
{item.userId}}</div>
</div>
</div>
</div>
</div>
</div>data model data
dataListSucErr:[
{
userId: 1,
userName: "数据集市",
nickName: "个人客户",
deptName: "余额",
phoneNumber: "存款",
errorInfo:"监管报送"
},{
userId: 2,
userName: "综合报表",
nickName: "个人客户",
deptName: "余额",
phoneNumber: "存款",
errorInfo:"报表系统"
}]final effect
