几天了,都弄不好,求大神教一教,PC端显示正常
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css"/>
<style type="text/css">
*{
list-style: none;
font-family: "微软雅黑";
}
html{
font-size: 10px;
}
.mui-content{
margin-top: 0.3rem;
}
.mui-btn-block{
font-family: "微软雅黑";
}
.mui-content-padded{
margin: -0.8rem;
}
.mui-popover {
height: 20rem;
width: 80%;
background-color: white;
}
.mui-table-view-cell{
background-color: white;
}
.mui-btn-block {
width: 96%;
margin-left: 0.7rem;
margin-top: 25rem;
}
span{
margin-left: 20px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background-color: white;">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></a>
<span class="mui-title">转交</span>
</header>
<div class="mui-content">
<div class="mui-control-content mui-active" style="text-align: left;">
<li class="mui-table-view-cell" style="text-align: left;">
<label style="margin-left: 3.3rem;">标题:</label>
<span id="title"></span>
</li>
<li class="mui-table-view-cell" style="text-align: left;">
<label style="margin-left: 1.7rem;">提交者:</label>
<span id="name"></span>
</li>
<li class="mui-table-view-cell" style="text-align: left;">
<label style="">问题描述:</label>
<span id="detail"></span>
</li>
<li class="mui-table-view-cell">
<label class="mui-pull-left">问题类型:</label>
<a class="mui-pull-right" href="#topPopover">
<label id="fen">请选择</label>
<label id="info"></label>
</a>
</li>
<li class="mui-table-view-cell">
<label class="mui-pull-left">负责部门:</label>
<a class="mui-pull-right" href="#department">
<label id="fu">请选择</label>
<label id="info2"></label>
</a>
</li>
</div>
<!--问题选择列表-->
<div id="topPopover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-radio" id="list"></ul>
</div>
</div>
</div>
<!--部门选择列表-->
<div id="department" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" style="height: 100%;overflow-y:scroll;-webkit-overflow-scrolling: touch">
<ul class="mui-table-view mui-table-view-radio" style="height:30rem;" id="list2"></ul>
</div>
</div>
</div>
<!--提交按钮-->
<button id="submit " class="mui-btn mui-btn-block mui-btn-primary ">转交</button>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/common.js"></script>
<script>
(function($,doc){
var id = getQueryString("id");
var title = document.getElementById("title");
var name = document.getElementById("name");
var detail = document.getElementById("detail");
var currentIssueType = null;
var currentIssueType2 = null;
var list = doc.getElementById("list");
var fen = doc.getElementById("fen");
var info = doc.getElementById("info");
var list2 = doc.getElementById("list2");
var fu = doc.getElementById("fu");
var info2 = doc.getElementById("info2");
var submitButton = doc.getElementById("submit");
var deliverUrl = baseServerUrl+"/m/biz/issue/get?id="+id;
var classifyUrl = baseServerUrl+"/m/sys/listData?type=issue_type";
var officeUrl = baseServerUrl+"/m/biz/issue/officelist";
mui.ajax({
dataType:'json',
type:'get',
url:deliverUrl,
success:function(data){
title.innerHTML = data.issueTitle;
name.innerHTML = localStorage.getItem("name");
detail.innerHTML = data.issueDesc;
}
})
// 问题分类
mui.ajax({
dataType:'json',
type:'get',
url:classifyUrl,
success:function (data) {
list.innerHTML = "";
var len = data.length;
for (var i =0; i < len; i++) {
var li = doc.createElement("li");
li.name=data[i].value;
li.id = data[i].id;
li.className = "mui-table-view-cell";
li.innerHTML += '<a class="mui-navigate-right">'+data[i].label+'</a>';
list.appendChild(li);
currentIssueType = data[i].value;
// 选择问题
doc.querySelector('#list').
addEventListener('selected',function(e){
currentIssueType = e.detail.el.name;
fen.innerHTML = "";
info.innerHTML = e.detail.el.innerText;
})
}
},
})
// 部门分类
mui.ajax({
type:'get',
dataType:'json',
url:officeUrl,
success:function(data){
var len = data.length;
for (var j = 1; j < len; j++) {
var li = doc.createElement("li");
li.name=data[j].name;
li.id = data[j].id;
li.className = "mui-table-view-cell";
li.innerHTML += '<a class="mui-navigate-right" onclick="fn()">'+data[j].name+'</a>';
list2.appendChild(li);
currentIssueType2 = data[j].name;
// 选择部门
doc.querySelector('#list2').
addEventListener('selected',function(e){
currentIssueType2 = e.detail.el.name;
fu.innerHTML = "";
info2.innerHTML = e.detail.el.innerText;
console.log(e.detail.el.innerText);
})
}
}
});
// 区分选择列表
mui('body').on('tap', '.mui-popover li>a', function() {
var a = this,
parent;
for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
if (parent.classList.contains('mui-popover')) {
break;
}
}
// 退出弹出框
mui('#' + parent.id).popover('toggle');
})
})(mui,document)
</script>
</html>
