<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../../css/mui.min.css" rel="stylesheet" />
<link href="../../css/iconfont-notice.css" rel="stylesheet" />
<style>
.jays-notice-box {
position: relative;
}
.jays-fx-objects div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 40px;
border: 1px solid #ddd;
background-color: #fff;
float: left;
}
.jays-fx-objects div span {
color: #969696;
}
.jays-fx-objects:hover div {
border-color: #0086a7;
}
.jays-fx-objects:hover div span {
color: #0086a7;
}
.jays-fx-objects p {
font-size: 16px;
float: left;
line-height: 40px;
margin-left: 10px;
}
.mui-card {
margin: 10px 0 0 0;
}
.mui-card-content img {
width: 100%;
}
</style>
</head>
<body>
<script src="../../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<div class="mui-content" id="notice">
<div class="mui-scroll-wrapper">
<div class="mui-scroll" style="margin-top: -40px;">
<div class="jays-notice-box" style="height: 460px; background-color: #fff;
background-image: ;
background-repeat: no-repeat;
background-size: 100% 100%;">
<img style="width: 60px; height: auto; position: absolute; top: 60px; right: 5%;" src="../../images/jianai-logo_03.png" />
<div style="width: 220px; height: 220px; border-radius: 220px;
position: absolute; top: 150px; left: -60px; z-index: 1;
background: -webkit-linear-gradient(#d6d6d6, #f5f5f5); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(#d6d6d6, #f5f5f5); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(#d6d6d6, #f5f5f5); /* Firefox 3.6 - 15 */
background: linear-gradient(#d6d6d6, #f5f5f5); /* 标准的语法（必须放在最后） */ ">
</div>
<div style="width: 190px; height: 190px; border-radius: 190px; background-color: #d1d1d1;
position: absolute; top: 165px; left: -45px; z-index: 2;">
</div>
<a href="#">
<div id="jays-notice-ad" style="width: 160px; height: 160px; border-radius: 160px;
background-image: url(../../images/DNAjiance_02.png);
background-size:290px auto;
background-repeat: no-repeat;
background-position: 20px;
position: absolute; top: 180px; left: -30px;
z-index: 3; background-color: #646464;">
</div>
</a>
<!--
作者：bat
时间：2017-01-04
描述：show bgimg
-->
<div class="jays-fx-objects jyjc-btn" οnclick="changepic()" style="position: absolute; top: 100px; left: 110px;">
<div>
<span class="mui-icon iconfont icon-jiyinjianceke"></span>
</div>
<p>基因检测</p>
</div>
<div class="jays-fx-objects xbck-btn" οnclick="changepic2()" style="position: absolute; top: 160px; left: 170px;">
<div>
<span class="mui-icon iconfont icon-cangwei"></span>
</div>
<p>细胞仓库</p>
</div>
<div class="jays-fx-objects jwly-btn" οnclick="changepic3()" style="position: absolute; top: 240px; left: 190px;">
<div>
<span class="mui-icon iconfont icon-jingwaibaoxian"></span>
</div>
<p>境外医疗</p>
</div>
<div class="jays-fx-objects txzjfw-btn" οnclick="changepic4()" style="position: absolute; top: 320px; left: 170px;">
<div>
<span class="mui-icon iconfont icon-zhuanjia"></span>
</div>
<p>特需专家服务</p>
</div>
<div class="jays-fx-objects dmss-btn" οnclick="changepic5()" style="position: absolute; top: 380px; left: 110px;">
<div>
<span class="mui-icon iconfont icon-dianming1"></span>
</div>
<p>点名手术</p>
</div>
</div>
<script>
function changepic() {
x = document.getElementById("jays-notice-ad")
x.style.backgroundImage = "url(../../images/DNAjiance_02.png)";
}
function changepic2() {
x = document.getElementById("jays-notice-ad")
x.style.backgroundImage = "url(../../images/cellroom_02.png)";
}
function changepic3() {
x = document.getElementById("jays-notice-ad")
x.style.backgroundImage = "url(../../images/abroad_medical_02.png)";
}
function changepic4() {
x = document.getElementById("jays-notice-ad")
x.style.backgroundImage = "url(../../images/perfasional_serve_02.png)";
}
function changepic5() {
x = document.getElementById("jays-notice-ad")
x.style.backgroundImage = "url(../../images/call-operation_02.png)";
}
</script>
<div id="findlist">
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init(); //mui插件初始化
mui('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
//页面初始化
mui.plusReady(function() {
var access_token = plus.storage.getItem("login");
mui.ajax('http://', {
data: {
access_token: access_token
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
//console.log(JSON.stringify(data));
var findlen = data.data.length;
var findlist = document.getElementById('findlist');
for(var i = 0; i < findlen; i++) {
var card = document.createElement("div");
card.className = 'mui-card';
card.setAttribute('data-article-category-id',data.data[i].article_category_id);
card.setAttribute('data-contents',data.data[i].contents);
card.setAttribute('data-admin-id',data.data[i].admin_id);
card.setAttribute('data-updated-at',data.data[i].updated_at);
card.setAttribute('data-title',data.data[i].title);
card.setAttribute('data-upload-web',data.data[i].uploadWeb);
card.setAttribute('data-cover-upfile-path',data.data[i].cover_upfile_path);
var cardheader = document.createElement('div');
cardheader.className = 'mui-card-header';
cardheader.innerHTML = data.data[i].title;
var cardcontent = document.createElement('div');
cardcontent.className = 'mui-card-header';
cardcontent.innerHTML = '<img src="' + data.data[i].uploadWeb + data.data[i].cover_upfile_path + '" />';
card.appendChild(cardheader);
card.appendChild(cardcontent);
findlist.appendChild(card);
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
});
mui("body").on('tap','.mui-card',function(){
var articleId = this.getAttribute('data-article-category-id');
var dataContents = this.getAttribute('data-contents');
var dataAdminId = this.getAttribute('data-admin-id');
var dataUpdatedAt = this.getAttribute('data-updated-at');
var dataTitle = this.getAttribute('data-title');
var dataUploadWeb = this.getAttribute('data-upload-web');
var dataCoverUpfilePath = this.getAttribute('data-cover-upfile-path');
mui.openWindow({
url: '../article/notice.html',
id: 'article',
show: {
aniShow: 'slide-in-right',
duration: 200
},
extras:{
idss: {
articleId:articleId,
dataContents:dataContents,
dataAdminId:dataAdminId,
dataUpdatedAt:dataUpdatedAt,
dataTitle:dataTitle,
dataUploadWeb:dataUploadWeb,
dataCoverUpfilePath:dataCoverUpfilePath
}
},
waiting:{
autoShow: false
}
});
});
</script>
</body>
</html>
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
