代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" >
<meta http-equiv="x-dns-prefetch-control" content="on"/> <!--京东h5规范加速-->
<link rel="dns-prefetch" href="//wq.360buyimg.com">
<script type="text/javascript">
window.mobileUtil = (function(win, doc) {
var UA = navigator.userAgent,
isAndroid = /android|adr/gi.test(UA),
isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 据说某些国产机的UA会同时包含 android iphone 字符
isMobile = isAndroid || isIos; // 粗略的判断
return {
isAndroid: isAndroid,
isIos: isIos,
isMobile: isMobile,
isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
isWeixin: /MicroMessenger/gi.test(UA),
isQQ: /QQ\/\d/gi.test(UA),
isYixin: /YiXin/gi.test(UA),
isWeibo: /Weibo/gi.test(UA),
isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),
tapEvent: isMobile ? 'tap' : 'click',
/**
* 缩放页面
*/
fixScreen: function() {
var metaEl = doc.querySelector('meta[name="viewport"]'),
metaCtt = metaEl ? metaEl.content : '',
matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
matchWidth = metaCtt.match(/width=([^,\s]+)/);
if ( !metaEl ) { // REM
var docEl = doc.documentElement,
maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大页面宽度
dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
scale = 1 / dpr,
tid;
docEl.removeAttribute('data-mw');
docEl.dataset.dpr = dpr;
metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = fillScale(scale);
docEl.firstElementChild.appendChild(metaEl);
var refreshRem = function() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > maxwidth) {
width = maxwidth * dpr;
}
var rem = width / 16;
docEl.style.fontSize = rem + 'px';
};
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
} else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定宽
var width = parseInt(matchWidth[1]),
iw = win.innerWidth || width,
ow = win.outerWidth || iw,
sw = win.screen.width || iw,
saw = win.screen.availWidth || iw,
ih = win.innerHeight || width,
oh = win.outerHeight || ih,
ish = win.screen.height || ih,
sah = win.screen.availHeight || ih,
w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
scale = w / width;
if ( scale < 1 ) {
metaEl.content = metaCtt + ',' + fillScale(scale);
}
}
function fillScale(scale) {
return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
}
},
/**
* 转href参数成键值对
* @param href {string} 指定的href，默认为当前页href
* @returns {object} 键值对
*/
getSearch: function(href) {
href = href || win.location.search;
var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
href && href.replace(reg,function( $0, $1, $2, $3 ){
data[ $1 ] = $3;
});
return data;
}
};
})(window, document);
// 默认直接适配页面
mobileUtil.fixScreen();
</script>
<style>
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
a{
text-decoration: none;
color: #00a8ff;
}
html {
background-color: #f7f7f7;
}
ul, li, p {
padding: 0px;
margin: 0px;
list-style:none;
}
body {
width: 16rem;
margin: 0 auto;
background-color: #fff;
line-height:1.4;
font-family:"Microsoft YaHei";
}
/*header*/
#header{
width:16rem;
height:1.9rem;
background:#1c1c1c;
}
.header_l{
width:16rem;
height:1.9rem;
display:inline-block;
color:#fff;
}
#header a{
display:inline-block;
width:5rem;
height:1.9rem;
}
.header_l img{
width:0.512rem;
height:0.704rem;
margin:0.512rem 5rem 0 0.512rem;
}
/*banner*/
#banner{
width:16rem;
height:4.58rem;
}
#banner img{
width:16rem;
height:4.58rem;
}
/*content1*/
#container{
padding-top:0.46rem;
width:14.976rem;
height:32.2rem;
margin:0 auto;
}
.row1{
margin-top:0.32rem;
}
.row2{
margin-top:0.32rem;
}
.row1 img{
width:14.976rem;
height:15.744rem;
}
.row2 img{
width:14.976rem;
height:17.17rem;
}
/*footer part*/
#footer{
width:16rem;
height:3.84rem;
background:#252525;
margin-top:2.1rem;
}
.footer_img{
width:16rem;
height:3.2rem;
}
.footer_img img{
width:13.63rem;
height:2.96rem;
margin:0.5rem 0 0 1.17rem;
}
/*导航*/
.mobile {
width:16rem;
float: left; position: relative;
overflow: hidden;
}
/*Hiding the checkbox*/
#tm {display: none;}
/*Content area*/
.mobile section {
width: 16rem;
height: 45.04rem;
position: relative;
background:#f3f3f3;
transition: all 0.25s;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
-o-transition: all 0.25s;
}
.mobile section label {
color: #fff;
font: 0.8rem Montserrat;
text-align: center;
border: 2px solid #1c1c1c;
border-radius: 4px;
display: block;
width: 1.2rem;
height:1.28rem;
position: absolute;
left: 85%;
top:0.15rem;
cursor: pointer;
font-size:1rem;
background:#1c1c1c;
}
/*Nav styles*/
.sidenav {
width: 8rem;
position: absolute; right:0; top: 0; bottom: 0;
}
.sidenav li{
width:8rem;
list-style-type: none;
}
.sidenav li:nth-child(1){
height:3.02rem;
}
.sidenav li:nth-child(2){
height:1.7rem;
padding-top:0.8rem;
margin-left:0.43rem;
border-bottom:1px solid #999999;
}
.sidenav li:nth-child(3){
height:1.7rem;
padding-top:0.8rem;
margin-left:0.43rem;
border-bottom:1px solid #999999;
}
.sidenav li:nth-child(4){
height:1.7rem;
padding-top:0.8rem;
margin-left:0.43rem;
border-bottom:1px solid #999999;
}
.sidenav li:nth-child(5){
height:1.7rem;
padding-top:0.8rem;
margin-left:0.43rem;
border-bottom:1px solid #999999;
}
.sidenav li img{
width:8rem;
height:3.02rem;
}
.font_mall{
color:#999999;
font-size:0.5rem;
padding-left:2rem;
}
.sidenav a {
color: #000;
text-decoration: none;
font:0.68rem "Microsoft YaHei";
display:block;
transform: translateX(1.06rem);
opacity:0;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
}
.sidenav i {
display: block; width: 50px; float: left;
font-size: 0.576rem;
text-align: center;
}
/*Animation controls using checkbox hack*/
/*Animate content area to the right*/
#tm:checked ~section {transform: translateX(-8rem);}
#tm:checked ~section{background:#000;opacity:0.6;}
#tm:checked ~section label{background:#f30a0a;z-index:999;border:1px solid #f30a0a;}
/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav a {opacity: 1; transform: translateX(0);}
/*Adding delay to link animation - in multiples of .08s*/
/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
#tm:checked ~ .sidenav li:nth-child(1) a {transition-delay: 0.08s;}
#tm:checked ~ .sidenav li:nth-child(2) a {transition-delay: 0.16s;}
#tm:checked ~ .sidenav li:nth-child(3) a {transition-delay: 0.24s;}
#tm:checked ~ .sidenav li:nth-child(4) a{transition-delay: 0.32s;}
#tm:checked ~ .sidenav li:nth-child(5) a {transition-delay: 0.40s;}
#tm:checked ~ .sidenav li:nth-child(6) a {transition-delay: 0.48s;}
</style>
<title>装修造价审核</title>
</head>
<body>
<!--左侧导航-->
<div class="mobile">
<!-- Checkbox to toggle the menu -->
<input type="checkbox" id="tm" />
<!-- The menu -->
<ul class="sidenav">
<li class="li_img"><img src="../images/r_logo.png"></li>
<li><a href="../brand/brand.html"><i class="fa fa-check"></i>品牌介绍       <span class="font_mall">〉</span></a></li>
<li><a href="../service/service.html"><i class="fa fa-inbox"></i>服务内容       <span class="font_mall">〉</span></a></li>
<li><a href="../product/product.html"><i class="fa fa-pencil"></i>产品体系       <span class="font_mall">〉</span></a></li>
<li><a href="../case/case.html"><i class="fa fa-cog"></i>更多案例       <span class="font_mall">〉</span></a></li>
</ul>
<!-- Content area -->
<section>
<!-- Label for #tm checkbox -->
<!--banner-->
<!--header-->
<div id="header">
<div class="header_l">
<a href="../service/service.html"><img src="../images/icon.png"/></a>
装修造价审核
</div>
</div>
<!--banner-->
<div id="banner">
<img src="../images/shenhe_banner.png" alt=""/>
</div>
<!--content1-->
<div id="container">
<div class="row1"><img src="../images/shenhe_1.png" alt=""></div>
<div class="row2"><img src="../images/shenhe_2.png" alt=""></div>
</div>
<!--footer part-->
<div id="footer">
<div class="footer_img">
<img src="../images/footer.png" alt=""/>
</div>
</div>
<!--footer结束-->
<label for="tm">≡</label>
</section>
</div>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手