1.已有电脑版页面,需要做一个或用已有页面适配个手机版,一个手机页面,时间自己安排,有兴趣呼下.
2.截图是X1的电脑页面,手机页面见下面网址.
3.就一个栏目模版页面,头底部不变。
4.当前是一个栏目模版。
5.参考目标站手机版http://www.wers.cn/price-index-id-89.html
选项卡也即tab 表格table
单个表格超宽其实就是通过css控制的,实在不懂,你直接套用那个页面样式不就行了
套用到这里即可,你要的不就是手机页面的效果么,用这个手机模板套用一份出来套用到相应的栏目即可(报价项目单独做成一个目录,就应用于这个目录下的wap详情页)
大神默认的手机版,让左右滑动是改哪个,我把默认手机版代码发上
{extend name="$index_style_layout" /}
<!--SEO相关-->
{block name="head_title"}{$info.title}{/block}
{block name="head_keword"}{$info.keywords?:$info.title} {$s_info.name} {/block}
{block name="head_description"}{:get_word(del_html($info['content']),300)}{/block}
{block name="body_content"}
<!--幻灯片开始---->
{qb:showpage name="shop_show_rollpic"}
<link rel="stylesheet" href="__STATIC__/index/default/slider.css">
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{:end($info['picurls'])['picurl']}"></a></div>
{volist name="info.picurls" id="rs"}
<div class="mui-slider-item"><a href="#"><img src="{$rs.picurl}"></a></div>
{/volist}
<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{$info.picurls.0.picurl}"></a></div>
</div>
<div class="mui-slider-indicator">
{volist name="info.picurls" id="pic"}
<div class="mui-indicator {eq name='i' value='1'}mui-active{/eq}"></div>
{/volist}
</div>
</div>
{/qb:showpage}
<!--幻灯片结束---->
<link rel="stylesheet" href="__STATIC__/index/default/show.css">
<div class="ShowContBox">
<div class="BaseInfos">
<div class="title">
<a href="#">工单</a>
<span>{$info.title}</span>
</div>
<dl class="others">
<dt>
<div> {$info.create_time|format_time}</div>
</dt>
{if $info.begin_time&&strtotime($info.begin_time)>time()}
<dd>距离开始:<em>{:intval(strtotime($info.begin_time)-time())}</em> <span></span></dd>
{elseif $info.end_time&&strtotime($info.end_time)>time()}
<dd>距离结束:<em>{:intval(strtotime($info.end_time)-time())}</em> <span></span></dd>
{elseif $info.end_time&&strtotime($info.end_time)<time()}
<dd><span><i>已结束</i></span></dd>
{else /}
<dd><span><i>进行中</i></span></dd>
{/if}
</dl>
{qb:showpage field="picurl,title,content,keywords,price,type1,type2,type3,num"}
<dl class="others">
<dt>
<div><em>{$rs.title}:</em>{$rs.value}</div>
</dt>
</dl>
{/qb:showpage}
<dl class="others">
<dt>
<div><em>已提交:</em>{$info.order_num} 人</div>
</dt>
</dl>
</div>
<div style="background: #FFF;margin-top: 15px;">
<div class="qb_ui_wap_select_shoptype" style="display:none;">
<dl>
<dt>参与人数</dt>
<dd class="chnageBuyNum">
<span class="fa fa-minus"></span>
<div><input type="text" value="1"/></div>
<em class="fa fa-plus"></em>
</dd>
</dl>
</div>
<!--表单开始-->
<script type="text/javascript">
$(function(){
$.get("{:urls('car/act')}?shopid={$id}&num=1&"+Math.random(),function(d){
if(d=='ok'){
//layer.msg('成功加入购物车');
}else{
if( d.msg.indexOf('登录')>-1 ){
layer.confirm("你还没登录,是否立即登录?",{btn:['立即登录','取消']},function(){
Qibo.login();
});
}else{
layer.alert(d.msg);
}
$(".PostOrder").hide();
}
});
});
</script>
<a name="post"></a>
<style type="text/css">
input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
height: auto;
margin-bottom: 0px;
padding: 0px 0px;
}
.mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
padding: 0px 0px;
}
.PostOrder{
background:#f3f3f3;
padding:10px 0;
}
.PostOrder ul{
background:#fff;
margin:8px 0;
padding: 0 15px;
}
.PostOrder ul ol{
line-height:45px;
height:45px;
font-weight:bold;
color:#6b6a6a;
}
.PostOrder ul li{
padding-bottom:15px;
}
.PostOrder button{
width: 90%;
background: #FFA800;
color: #FFF;
line-height: 45px;
border: 0px;
border-radius: 5px;
outline: none;
font-size:20px;
}
.PostOrder .btn_warp{
background: #FFF;
text-align:center;
padding:15px 0 ;
}
.PostOrder ul li input[type=text]{
line-height:30px;
height:30px;
width:98%;
padding:0 5px;
border:1px solid #ffe5a9;
border-radius: 5px;
}
.PostOrder ul li textarea{
width:98%;
padding:0 5px;
border:1px solid #ffe5a9;
border-radius: 5px;
}
</style>
<div class="PostOrder">
<form action="{:urls('order/add')}" method="post" onsubmit="return check_post();">
{qb:form name="xxx" field="linkman,telphone" mid="-1" f_array="$f_array"}
<ul class="{$rs.ifmust?'must-choose':''} {$rs.customize}" data-name="{$rs.name}" data-type="{$rs.type}" data-title="{$rs.title}">
<ol>{$rs.title} {$rs.ifmust?'(必填)':''}</ol>
<li>{$rs.value}</li>
</ul>
{/qb:form}
<div class="btn_warp">
<button type="submit">提交</button>
<input type="hidden" name="order_field" id="order_field">
</div>
</form>
</div>
<script type="text/javascript" src="__STATIC__/js/order.js"></script>
<!--表单结束-->
</div>
<div class="ChangeShowCont">
<div class="mui-slider">
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#mobileitem1">注意事项</a>
<a class="mui-control-item" href="#mobileitem2"></a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-6"></div>
<div class="mui-slider-group">
<div id="mobileitem1" class="mui-slider-item mui-control-content mui-active">
<div class="contentinfo">
{$info.content}
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="__STATIC__/index/default/showtime.js"></script>
<script type="text/javascript">
var checktime=0;
function show_time(){
checktime++;
var thetime=parseInt($('.BaseInfos .others dd em').html())-checktime;
if(thetime>0){
$('.BaseInfos .others dd span').html(format_time(thetime));
}else{
//$('.BaseInfos .others dd span').html('活动结束!');
}
}
setInterval("show_time()",1000);
function thisimg_over(imgobjs){
imgobjs.animate({"max-width":"150%","max-height":"150%"},300);
}
function thisimg_out(imgobjs){
imgobjs.animate({"max-width":"100%","max-height":"100%"},300);
}
</script>
<style type="text/css">
.apply{
text-align:center;
margin:10px;
}
.apply a{
color:blue;
}
</style>
<div class="apply"><a href="{:murl('content/add',['fid'=>$fid,'aid'=>$id])}">我也建一个</a></div>