仿企查查搜索页布局

乞丐的项目
119 阅读6分钟

仿企查查搜索页布局

目标：

  • 模仿企查查的搜索页布局

原因：

  1. 最近要开发个办执照的系统，给别人办理赚点小钱嘛
  2. 企查查的布局工工整整，也挺简洁，也算还是可以的
  3. 企查查知名度高，还有他暴露我的手机号了！！！！
  4. 第四就是大家可以看看我的成果

开发语言：

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

关于我：

这里是不务正业的程序员

这是我的另一个号：用来发实际的开发项目，完整的实战项目

小于晏-CSDN博客

本文使用 文章同步助手 同步

avatar
文章
阅读
粉丝