目标：
- 模仿企查查的搜索页布局
原因：
- 最近要开发个办执照的系统，给别人办理赚点小钱嘛
- 企查查的布局工工整整，也挺简洁，也算还是可以的
- 企查查知名度高，还有他暴露我的手机号了！！！！
- 第四就是大家可以看看我的成果
开发语言：
- html、css作为开发基础
- bootstrap前端框架
- Jquery这个还没用到，下个优化的就开始用到了
正片开始：
最近下班有点早，然后也有干一些业务，帮别人办营业执照啥的一单成本50块收个150，每天能收个十单就可以赚很不错了，当然呢规模是不大的，想着说能不能写个系统，自助下单，每单收100收一些代理啥的让他们也可以自助下单啥的。他们也有利润点，准备收一百个代理，所以所以就有了这个想法。
那我这个搜索企业信息是做什么用的呢，其实吧不管是代理销售还是客户来下单的时候，他们也不知道这个营业执照名称（公司名称、工作室名称）有没有人注册注册过，但是把他们喊去某查查搜又麻烦了，所以还是自己来弄个系统，专门为客户服务嘛，数据也是自己构建个数据库。
还有吧就是为啥选择bootstrap、或者说为啥不用vue等某些其他框架，这里其实博主不是一个专业的前端，博主是做后端开发的，但是呢vue这些东西其实吧不是什么技术壁垒，大家都会的，相比于现在的无脑用vue，我还是觉得这种简单的东西，一个html文件能搞定，实在不喜欢用那一大坨的。
废话不多说直接展示吧
html：
<body class="bg-light">
<div class="container mt-4">
<div class="search-header">
<div>为您找到 <span style="color: #ff4d4f; font-weight: bold;">10000+</span> 条相关结果，已展示前<span style="color: #ff4d4f;">100</span>条</div>
<button class="download-btn">
<i class="bi bi-download"></i>
导出数据
</button>
</div>
<!-- 卡片结构 -->
<div class="company-card">
<div class="d-flex">
<div class="company-logo">
闽字<br>老号
</div>
<div class="ms-3 flex-grow-1">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0">福建闽字老号商业运营管理有限公司</h5>
<span class="status-tag">在营</span>
</div>
<div>
<span class="company-type">企业</span>
<span class="company-type">微型</span>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">法定代表人：</span>张宇
</div>
<div class="info-item">
<span class="info-label">注册资本：</span>5000.0万元人民币
</div>
<div class="info-item">
<span class="info-label">成立日期：</span>2018-10-22
</div>
<div class="info-item" style="grid-column: 1 / -1;">
<span class="info-label">统一社会信用代码：</span>91350104MA3269MA3G
</div>
</div>
<div class="info-item mb-2">
<span class="info-label">电话：</span>13609557967
<a href="#" class="more-link ms-2">更多</a>
</div>
<div class="info-item mb-2">
<span class="info-label">邮箱：</span>-
<span class="mx-3">|</span>
<span class="info-label">官网：</span>-
</div>
<div class="info-item">
<span class="info-label">地址：</span>福建省福州市仓山区建新镇金榕北路30号A5号楼整座自建厂房中第二层208室
</div>
</div>
</div>
</div>
<!-- 重复卡片结构 -->
<div class="company-card">
<div class="d-flex">
<div class="company-logo gold">
闽字<br>通
</div>
<div class="ms-3 flex-grow-1">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0">呼伦贝尔市闽字通科技发展有限公司</h5>
<span class="status-tag">在营</span>
</div>
<div>
<span class="company-type">企业</span>
<span class="company-type">小型</span>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">法定代表人：</span>鹏欣苑
</div>
<div class="info-item">
<span class="info-label">注册资本：</span>500.0万元人民币
</div>
<div class="info-item">
<span class="info-label">成立日期：</span>2021-06-07
</div>
<div class="info-item" style="grid-column: 1 / -1;">
<span class="info-label">统一社会信用代码：</span>91150702MA7YPB9T1E
</div>
</div>
<div class="info-item mb-2">
<span class="info-label">电话：</span>17678349731
</div>
<div class="info-item mb-2">
<span class="info-label">邮箱：</span>129929983@qq.com
<span class="mx-3">|</span>
<span class="info-label">官网：</span>-
</div>
<div class="info-item">
<span class="info-label">地址：</span>内蒙古自治区呼伦贝尔市海拉尔区正阳办朝阳佳园小区7号楼007号
</div>
</div>
</div>
</div>
</div>
</body>css：
<style>
.company-card {
border: 1px solid #e6e6e6;
padding: 20px;
margin-bottom: 15px;
background: #fff;
border-radius: 4px;
}
.company-logo {
width: 80px;
height: 80px;
background: #8e44ad;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 4px;
}
.company-logo.gold {
background: #c0a167;
}
.status-tag {
background: #e8f8f2;
color: #00b578;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
margin-left: 8px;
}
.company-type {
display: inline-block;
padding: 2px 10px;
background: #f5f5f5;
color: #666;
border-radius: 2px;
font-size: 12px;
margin-right: 8px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 15px 0;
}
.info-item {
color: #666;
font-size: 14px;
}
.info-label {
color: #999;
margin-right: 8px;
}
.more-link {
color: #1890ff;
text-decoration: none;
font-size: 14px;
}
.search-header {
margin-bottom: 20px;
padding: 15px;
background: white;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.download-btn {
background: #1890ff;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
}
</style>完整代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业信息查询</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.company-card {
border: 1px solid #e6e6e6;
padding: 20px;
margin-bottom: 15px;
background: #fff;
border-radius: 4px;
}
.company-logo {
width: 80px;
height: 80px;
background: #8e44ad;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border-radius: 4px;
}
.company-logo.gold {
background: #c0a167;
}
.status-tag {
background: #e8f8f2;
color: #00b578;
padding: 2px 8px;
border-radius: 2px;
font-size: 12px;
margin-left: 8px;
}
.company-type {
display: inline-block;
padding: 2px 10px;
background: #f5f5f5;
color: #666;
border-radius: 2px;
font-size: 12px;
margin-right: 8px;
}
.info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 15px 0;
}
.info-item {
color: #666;
font-size: 14px;
}
.info-label {
color: #999;
margin-right: 8px;
}
.more-link {
color: #1890ff;
text-decoration: none;
font-size: 14px;
}
.search-header {
margin-bottom: 20px;
padding: 15px;
background: white;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
.download-btn {
background: #1890ff;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
}
</style>
</head>
<body class="bg-light">
<div class="container mt-4">
<div class="search-header">
<div>为您找到 <span style="color: #ff4d4f; font-weight: bold;">10000+</span> 条相关结果，已展示前<span style="color: #ff4d4f;">100</span>条</div>
<button class="download-btn">
<i class="bi bi-download"></i>
导出数据
</button>
</div>
<!-- 卡片结构 -->
<div class="company-card">
<div class="d-flex">
<div class="company-logo">
闽字<br>老号
</div>
<div class="ms-3 flex-grow-1">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0">福建闽字老号商业运营管理有限公司</h5>
<span class="status-tag">在营</span>
</div>
<div>
<span class="company-type">企业</span>
<span class="company-type">微型</span>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">法定代表人：</span>张宇
</div>
<div class="info-item">
<span class="info-label">注册资本：</span>5000.0万元人民币
</div>
<div class="info-item">
<span class="info-label">成立日期：</span>2018-10-22
</div>
<div class="info-item" style="grid-column: 1 / -1;">
<span class="info-label">统一社会信用代码：</span>91350104MA3269MA3G
</div>
</div>
<div class="info-item mb-2">
<span class="info-label">电话：</span>13609557967
<a href="#" class="more-link ms-2">更多</a>
</div>
<div class="info-item mb-2">
<span class="info-label">邮箱：</span>-
<span class="mx-3">|</span>
<span class="info-label">官网：</span>-
</div>
<div class="info-item">
<span class="info-label">地址：</span>福建省福州市仓山区建新镇金榕北路30号A5号楼整座自建厂房中第二层208室
</div>
</div>
</div>
</div>
<!-- 重复卡片结构 -->
<div class="company-card">
<div class="d-flex">
<div class="company-logo gold">
闽字<br>通
</div>
<div class="ms-3 flex-grow-1">
<div class="d-flex align-items-center mb-2">
<h5 class="mb-0">呼伦贝尔市闽字通科技发展有限公司</h5>
<span class="status-tag">在营</span>
</div>
<div>
<span class="company-type">企业</span>
<span class="company-type">小型</span>
</div>
<div class="info-grid">
<div class="info-item">
<span class="info-label">法定代表人：</span>鹏欣苑
</div>
<div class="info-item">
<span class="info-label">注册资本：</span>500.0万元人民币
</div>
<div class="info-item">
<span class="info-label">成立日期：</span>2021-06-07
</div>
<div class="info-item" style="grid-column: 1 / -1;">
<span class="info-label">统一社会信用代码：</span>91150702MA7YPB9T1E
</div>
</div>
<div class="info-item mb-2">
<span class="info-label">电话：</span>17678349731
</div>
<div class="info-item mb-2">
<span class="info-label">邮箱：</span>129929983@qq.com
<span class="mx-3">|</span>
<span class="info-label">官网：</span>-
</div>
<div class="info-item">
<span class="info-label">地址：</span>内蒙古自治区呼伦贝尔市海拉尔区正阳办朝阳佳园小区7号楼007号
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于我：
这里是不务正业的程序员
这是我的另一个号：用来发实际的开发项目，完整的实战项目
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
