房屋信息详情页页面实现过程(house_detail)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
房屋信息详情页实现过程
house_detail.html页面实现过程
目标效果：
功能描述：该页主要用来展示房源页面信息的详情。
通过本页可以点开微信分享、地图定位、聊天、打电话、房源预定等相关功能。
实现过程：
一、创建house_detail页面（使用模板：简洁布局+空页面）
●头部栏
一、修改头部栏标题，改成“经纪人房源”
二、将头部栏的字体改成微软雅黑的样式
<body class="um-vp" ontouchstart style="font-family:微软雅黑">
</body>
三、将头部栏的底色改成“酸橙绿”
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head2">
下面是酸橙绿颜色参数的定义（ui-color.css中定义）：
.bc-head{
background-color:#32CD32;/*酸橙绿*/
}
四、修改头部栏右图标，使之符合需求，如下代码：
<div class ="nav-btn nav-bt" id ="nav-right">
<div class ="ub-img icon-disk umw2 umh4"></div >
</div >
改成：
<div class ="nav-btn" id ="share">
<div class ='fa fa-share-square-o'></div >
</div >
● 底部栏
一、布局底部栏的UI 、颜色设置等相关参数，并指定对应按钮的id 号，如下代码所示：
二、创建chengxin.css 文件，并在内部定义背景颜色，用于支撑在上面代码中所引用的bc-bgf 颜色参数。
● 功能实现
一、对应ui 界面中所涉及到的按钮进行js 代码功能实现[微信分享、打电话、聊天]：
house_detail_content.html 页面实现过程 目标效果：
功能描述：该页主要用来展示房源页面信息的详情。
通过本页可以点开微信分享、地图定位、聊天、打电话、房源预定等相关功能。
实现过程：
一、UI布局
其中，在分割线中的umhdetails参数、在上方大图标中的img-w-h参数定义在chengxin.css 文件中，定义参数如下：
/*分割线高度参数*/
.umhdetails{
min-height:.6em;
}
/*定义大图标的宽高*/
.img-w-h{
width:20em;
height:14.8em;
}
注意不要忘记引用chegnxin.css文件：<link rel="stylesheet"
href="css/chengxin.css">
二、数据动态获取
三、引用yangyan.js文件，目的是判断是否为空和日期格式的转换：
<script src="js/yangyan.js"></script>
四、效果测试。