目 录
摘 要 I
Abstract II
1 前言 1
2 流浪动物救助系统 2
2.1 流浪动物救助系统简介 2
2.2 系统组织结构 2
2.3 系统角色划分 3
3 系统设计要求 7
3.1 设计原则 7
3.1.1 技术平台选型 7
3.1.2 系统扩展性 8
3.1.3 系统性能 8
3.2 系统概念结构设计 8
3.2.1 系统 ER 图 8
3.2.2 关系模型 9
3.2.3 数据库设计需求 10
4 系统实现 14
4.1 系统架构 14
4.2 前台门户系统 15
4.2.1 登录模块 17
4.2.2 首页简介 23
4.2.3 咨询模块 25
4.3.4 救助模块 26
4.2.5 领养模块 29
4.2.6 寻宠模块 32
4.2.7 帮助模块 35
4.3 后台管理系统 36
4.3.1 登录模块 37
4.3.2 首页简介 37
4.3.3 用户模块 38
4.3.4 领养模块 40
4.3.5 新闻通知模块 41
4.3.6 设置模块 42
5 结论 44
5.1 总结 44
5.2 系统不足 47
5.3 系统展望 47
致 谢 49
参考文献 50
前端主要架构为：Vue.js、Node.js、axios、jQuery、Bootstrap、Element UI。
后端主要架构为：Spring、Spring Boot、MyBatis Plus、Nginx、JWT、Redis。
项目运行环境：JDK 1.8、Tomcat 9、Maven 3.6.1、MySQL 5.6.
开发工具：Idea 2018.3.3、Navicat for MySQL。
2 流浪动物救助系统
2.1 流浪动物救助系统简介
流浪动物救助系统主要是为了解决城市中流浪动物的信息管理问题的平台。该平台主要分为三种用户操作，普通游客端：可以浏览页面发布的公告及流浪动物信息、也可注册成为一名爱心人士；注册用户端：用户的注册、登录、修改个人信息等功能，既可以登记自己发现的流浪动物信息，也可以查询、申请领养救助平台上的流浪动物，并发布其被领养救助动物的日常生活状态；管理员端：管理员端的用户注册、登录、修改密码等功能；管理员可以发布公告、对注册用户及被救助动物进行管理、登记、审核相关信息以及查询统计等功能。
2.2 系统组织结构
开发流浪动物救助系统，游客可以在页面浏览救助、寻宠、领养、咨询等各种信息，也可以注册成为平台用户。注册用户具备信息发布和评论留言的功能，可以发布寻宠、领养、救助等信息，通过管理员的后台审核之后，就可以展示在页面 上。而管理员端则可以对所有的注册用户进行增、删、改、查、修改密码等基础操作。同时对于注册用户发布的信息、评论留言等可以进行审核、修改、删除等操 作。平台的主要意义是为流浪动物的救助信息、丢失宠物的寻找信息等进行发布共享，让更多的爱心人士参与到救助中来。
<!DOCTYPE html>
<html xmlns:javascript="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 引入 Bootstrap -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入导航栏样式 -->
<link rel="stylesheet" href="css/navigation.css">
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
<!-- 模态窗口的打开需要依赖此文件 -->
<script src="js/modal.js"></script>
<!-- 引入搜索样式 -->
<link rel="stylesheet" type="text/css" href="css/search_css/normalize.css"/>
<link rel="stylesheet" href="css/search_css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/search_css/demo.css">
<link rel="stylesheet" href="css/search_css/style.css">
<!-- 引入自己写的样式 -->
<link rel="stylesheet" href="css/index_style.css">
<link rel="stylesheet" href="css/login_style.css">
<link rel="stylesheet" href="css/adopt_style.css">
<!-- 引入公用的js-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<!--element-->
<link rel="stylesheet" href="static/element-2.12.0/index.css">
<script src="static/element-2.12.0/index.js"></script>
<!-- 引入自己写的js文件 -->
<script src="js/my_js/index.js"></script>
</head>
<body>
<div class="header" id="header-top"> <!--line-height: 30px 将文字宽度与div一致 让文字居中 -->
<shotcut2/> <!--组件化头部-->
</div>
<script type="text/javascript">
var indexVm = new Vue({
el: "#header-top",
components: {
shotcut2: () => import('./js/pages/shotcut2.js'),
}
});
</script>
<div class="container">
<!--logo图片-->
<div>
<img src="img/sa_logo.png">
</div>
<!--导航条-->
<div id="nav-1">
<ul class="nav">
<li class="slide1"></li>
<li class="slide2"></li>
<li><a class="active" href="index.html">首页</a></li>
<li><a href="news.html">资讯</a></li>
<li><a href="rescue.html">救助</a></li>
<li><a href="adopt.html">领养</a></li>
<li><a href="search.html">寻宠</a></li>
<li><a href="help.html">帮助</a></li>
<li><a href="about-us.html">关于我们</a></li>
<!-- 搜索框 -->
<p>
</p>
<li>
<div class="search d7">
<form>
<input type="text" placeholder="搜索从这里开始...">
<button type="submit"></button>
</form>
</div>
</li>
</ul>
</div>
<br> <!--换行-->
<br> <!--换行-->
<div class="news">
<!----=================新闻左侧部================---------->
<div class="news-left">
<!--左上轮播-->
<div class="news-left-photo">
<div style="width: 94%;margin: 0 auto">
<div style="height: 10px"></div>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<a href="news-details.html?id=15">
<img src="img/movie/movie01.jpg" alt="First slide">
<div class="carousel-caption">主人养了一条狗，后来嫌弃狗老了，便抛弃了。后来狗竟然... ... ... ... ... ...
</div>
</a>
</div>
<div class="item">
<a href="news-details.html?id=14" style="color: black">
<img src="img/movie/movie02.jpg" alt="Second slide">
<div class="carousel-caption">猫咪中毒输狗血续命 原来猫狗之间也有爱!</div>
</a>
</div>
<div class="item">
<a href="news-details.html?id=12" style="color: black">
<img src="img/movie/movie03.jpg" alt="Third slide">
<div class="carousel-caption">小区内流浪猫叼着猫皮，路人嫌弃远离，保安说出原由所有人哭了 ...</div>
</a>
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--右上热点新闻-->
<div style="width: 96%;margin: 0 auto">
<div style="height: 10px"></div>
<div class="news-left-hot">
<!--第一条-->
<div style="height: 50px;width: 100%; text-decoration:none">
<a href="javascript:void(0);" style="text-decoration:none">
<span style="color: red">[热点]</span>
<strong style="font-size: large;color: black">杭州一妈妈自曝被小区内不牵狗绳男主人骑身上打至骨折！</strong>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=12" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">小区内流浪猫叼着猫皮，路人嫌弃远离......</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=14" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">猫咪中毒输狗血续命 原来猫狗之间也有爱!</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=13" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px"> 有了这份《全国小动物保护组织通讯......</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=15" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">主人养了一条狗，后来嫌弃狗老了，便抛弃了。后来狗竟然......</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=7" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">罗志祥妈妈低调行善 为受虐待狗狗捐一月医药费......</span>
</a>
</div>
</div>
</div>
<!--左下 养宠必学部分-->
<div class="news-left-knowledge">
<div style="width: 94%;height: 160px;margin: 0 auto">
<div style="height: 12px"></div>
<div style="height: 40px;width: 100%">
<span style="line-height: 40px;font-size: 20px;color: #a5ce6d"><strong>养宠必学</strong></span>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=6" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">最全狗狗智商排名，你家汪排第几？......</span>
</a>
</div>
<!--普通新闻 五种中华血统的「汪星人」-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=16" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">宠物狗狗怀孕期间护理正确方法......</span>
</a>
</div>
<!--普通新闻 五种中华血统的「汪星人」-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=17" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">五种中华血统的「汪星人」......</span>
</a>
</div>
<!--普通新闻 五种中华血统的「汪星人」-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="news-details.html?id=18" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">你永远不知道能在狗狗的胃里找到什么......</span>
</a>
</div>
</div>
</div>
<!--右下 救助部分-->
<div class="news-left-help">
<div style="width: 98%;height: 160px">
<div style="height: 10px"></div>
<!--第一条-->
<div style="height: 50px;width: 100%; text-decoration:none">
<a href="rescue-details.html?id=16" style="text-decoration:none">
<span style="color: red">[救助]</span>
<strong style="font-size: large;color: black">通州区果园有一只狗狗伤的很厉害，附近人有能去救救它吗？！</strong>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="rescue-details.html?id=17" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">求助：海淀凤凰岭一只剃了毛的阿拉斯加被人当疯狗抓......</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="rescue-details.html?id=18" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">转发北京求助......</span>
</a>
</div>
<!--普通新闻-->
<div style="height: 30px;width: 100%; text-decoration:none">
<a href="rescue-details.html?id=19" style="color: black;text-decoration:none">
<span style="font-size: 20px">·</span> <span style="line-height: 30px">北京昌平区西二旗天巢园小区门口有四只可怜的狗娃需要帮助！......</span>
</a>
</div>
</div>
</div>
</div>
<!----=================新闻右侧部分==========-=====-------->
<div class="login-right">
<!--签到部分-->
<div style="width: 100%;height: 60px;background-color: #e5ffc8;border-radius: 5px">
<div style="height: 10px"></div>
<div style="width: 94%;height: 40px;margin: 0 auto">
<a href="rescue.html#publishArea">
<div style="float: left;background-color: #77ce78;height: 40px;width: 31%;border-radius: 5px;text-align: center">
<span style="line-height: 40px;color: white"><strong>快速发帖</strong></span>
</div>
</a>
<div style="float: left; width: 10px;height: 40px"></div>
<a href="javascript:void (0)">
<div style="float: left;background-color: #DCAC6C;height: 40px;width: 31%;border-radius: 5px;text-align: center">
<span style="line-height: 40px;color: white"><strong>每日签到</strong></span>
</div>
</a>
<div style="float: left; width: 10px;height: 40px"></div>
<a href="javascript:void (0)">
<div style="float: left;background-color: #dd6161;height: 40px;width: 31%;border-radius: 5px;text-align: center">
<span style="line-height: 40px;color: white"><strong>我的空间</strong></span>
</div>
</a>
<div style="float: left; width: 10px"></div>
</div>
</div>
<div style="height: 15px"></div>
<div style="border-radius: 5px;background-color: white; width: 100%;height: 325px">
<div style="width: 92%;height: 325px;margin: 0 auto">
<div style="height: 10px"></div>
<div style="height: 40px;width: 100%">
<span style="line-height: 40px;font-size: 20px;color: #a5ce6d"><strong>宠物趣闻</strong></span>
</div>
<div style="height: 5px"></div>
<div style="height: 85px;width: 100%">
<a href="news-details.html?id=19" style="color: black">
<div style="float: left;height: 75px;width: 30%">
<img src="img/news/news005.jpg" width="75px" height="75px">
</div>
<div style="height: 75px;width: 70%;float: right">
好想生个女儿并养只小狗
</div>
</a>
<div style="height: 10px"></div>
</div>
<div style="height: 85px;width: 100%">
<a href="news-details.html?id=20" style="color: black">
<div style="float: left;height: 75px;width: 30%">
<img src="img/news/news006.jpg" width="75px" height="75px">
</div>
<div style="height: 75px;width: 70%;float: right">
一天24小时，狗狗都在干嘛？
</div>
</a>
<div style="height: 10px"></div>
</div>
<div style="height: 85px;width: 100%">
<a href="news-details.html?id=21" style="color: black">
<div style="float: left;height: 75px;width: 30%">
<img src="img/news/news007.jpg" width="75px" height="75px">
</div>
<div style="height: 75px;width: 70%;float: right">
见证我16年幸福的狗狗
</div>
</a>
<div style="height: 10px"></div>
</div>
</div>
</div>
</div>
</div>
<br> <!--换行-->
<!-- ；领养区域 -->
<div class="adopt-area">
<br>
<!--标题-->
<h4><strong style="color: goldenrod" style="color: goldenrod"> 我要</strong><strong
style="color: #7fb06a">领养</strong></h4>
<!--margin:auto 可以使得div中的div居中显示-->
<!--这里设置一个div为了让整体内容和左右有边距-->
<div style="width: 94%;height: 600px;margin:auto">
<!------================ 狗狗领养 ===============-->
<!--分割线-->
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<strong style="font-size: large"> 狗狗领养 </strong>
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<!--展示狗狗-->
<div style="width: 100%;height: 170px">
<!--狗狗领养第一个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=41">
<!--展示图片-->
<img width="200px" height="150px" src="img/dog/dog01.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
被遗弃的小狗急需一个家 </strong>
</div>
</a>
</div>
<!--狗狗领养第2个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=42">
<!--展示图片-->
<img width="200px" height="150px" src="img/dog/dog02.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
长得像边牧的小型狗领养 </strong>
</div>
</a>
</div>
<!--狗狗领养第3个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=43">
<!--展示图片-->
<img width="200px" height="150px" src="img/dog/dog03.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
可爱小黄狗找领养 </strong>
</div>
</a>
</div>
<!--狗狗领养第4个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=44">
<!--展示图片-->
<img width="200px" height="150px" src="img/dog/dog04.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
蝴蝶串串有喜欢的吗？ </strong>
</div>
</a>
</div>
<!--狗狗领养第5个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<!--展示图片-->
<a href="http://www.sa.com/adopt-details.html?id=45">
<img width="200px" height="150px" src="img/dog/dog05.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
可爱小田园犬找家了！ </strong>
</div>
</a>
</div>
</div>
<!--==================猫咪领养======================-->
<br>
<!--分割线-->
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<strong style="font-size: large"> 猫咪领养 </strong>
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<!--展示猫咪-->
<div style="width: 100%;height: 170px">
<!--猫咪领养第一个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=46">
<img width="190px" height="150px" src="img/cat/cat01.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
橘哥两寻善主 </strong>
</div>
</a>
</div>
<!--猫咪领养第2个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=47">
<img width="190px" height="150px" src="img/cat/cat02.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
温顺流浪猫求收养 </strong>
</div>
</a>
</div>
<!--猫咪领养第3个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=48">
<img width="190px" height="150px" src="img/cat/cat03.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
四个月加菲串串求带走 </strong>
</div>
</a>
</div>
<!--猫咪领养第4个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=49">
<img width="190px" height="150px" src="img/cat/cat04.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
可爱猫咪找新家 </strong>
</div>
</a>
</div>
<!--猫咪领养第5个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=50">
<img width="190px" height="150px" src="img/cat/cat05.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
五个月橘猫找个家 </strong>
</div>
</a>
</div>
</div>
<!------======================小宠领养=========----->
<br>
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<strong style="font-size: large"> 小宠领养 </strong>
<hr color="goldenrod" class="hrLine" style="width:43%;"/>
<!--展示小宠-->
<div style="width: 100%;height: 170px">
<!--小宠领养第一个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=51">
<img width="190px" height="150px" src="img/pet/pet01.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
灰色斑鸠免费领养 </strong>
</div>
</a>
</div>
<!--小宠领养第2个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=52">
<img width="190px" height="150px" src="img/pet/pet02.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
小巴西龟找新家 </strong>
</div>
</a>
</div>
<!--小宠领养第3个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=53">
<img width="190px" height="150px" src="img/pet/pet03.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
萌萌哒小兔子免费领养 </strong>
</div>
</a>
</div>
<!--小宠领养第4个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=54">
<img width="190px" height="150px" src="img/pet/pet04.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
道奇兔免费赠送 </strong>
</div>
</a>
</div>
<!--小宠领养第5个div 图片-->
<div style="width: 20%;height: 165px; float: left">
<a href="http://www.sa.com/adopt-details.html?id=55">
<img width="190px" height="150px" src="img/pet/pet05.jpg">
<!--文字描述-->
<div style="width: 95%;height: 25px;background-color: #727272;text-align: center;line-height: 25px">
<strong style="color: white;">
豚鼠宝宝求包养 </strong>
</div>
</a>
</div>
</div>
</div>
</div>
<br> <!--换行-->
<!-- ---============================寻宠区域===========================-------- -->
<div class="publish-area">
<br>
<!--标题-->
<h4><strong style="color: goldenrod" style="color: goldenrod"> 寻宠</strong><strong
style="color: #7fb06a">启示</strong></h4>
<!--margin:auto 可以使得div中的div居中显示-->
<!--这里设置一个div为了让整体内容和左右有边距-->
<div style="width: 96%;height: 600px;margin:auto">
<!--左侧第一张照片-->
<div style="height: 450px; width: 20%; float: left">
<a href="http://www.sa.com/search-details.html?id=45">
<img width="180px" height="330px" src="img/publish/publish01.jpg">
<!--文字描述-->
<div style="width: 180px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 寻找走失一个月的萨摩 </span>
</div>
</a>
</div>
<!--=============右上图片======-->
<!--右上---第一张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="http://www.sa.com/search-details.html?id=46">
<img width="150px" height="130px" src="img/publish/publish02.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第二张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="http://www.sa.com/search-details.html?id=47">
<img width="150px" height="130px" src="img/publish/publish03.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第3张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="http://www.sa.com/search-details.html?id=48">
<img width="150px" height="130px" src="img/publish/publish04.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第4张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="http://www.sa.com/search-details.html?id=49">
<img width="150px" height="130px" src="img/publish/publish05.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第5张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="http://www.sa.com/search-details.html?id=50">
<img width="150px" height="130px" src="img/publish/publish06.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱猫于2019年11月19 </span>
</div>
</a>
</div>
<!--=============右下图片======-->
<!--右上---第一张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="javascript:void(0);">
<img width="150px" height="130px" src="img/publish/publish07.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第二张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="javascript:void(0);">
<img width="150px" height="130px" src="img/publish/publish08.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第3张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="javascript:void(0);">
<img width="150px" height="130px" src="img/publish/publish09.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第4张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="javascript:void(0);">
<img width="150px" height="130px" src="img/publish/publish10.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
<!--右上---第5张照片-->
<div style="height: 200px; width: 16%;float: left">
<a href="javascript:void(0);">
<img width="150px" height="130px" src="img/publish/publish11.jpg">
<!--文字描述-->
<div style="width: 150px;height: 25px;background-color: #d9d9d9;text-align: center;line-height: 25px">
<span style="color: black"> 爱犬于2019年12月4号 </span>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- 设置底部布局 -->
<hr>
<div class="footer">
<script type="text/javascript">$(".footer").load("/src/public/footer.html");</script>
</div>
<!-- 引入导航栏js,注意和引入顺序有关 必须放在后面 -->
<script src='js/jquery.min.js'></script>
<script src="js/my_js/script.js"></script>
<script type="application/javascript">
// el: "#Vue-app"
</script>
</body>
</html>
