代码拉取完成，页面将自动刷新
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>home</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="./css/font.css"/>
</head>
<style type="text/css">
.pan {
height: 80px;
box-shadow: 2px 2px 5px #ccc;
width: 100%;
border-radius: 8px;
}
.index-he {
background: url(img/bg.2f86eaa8.png) no-repeat;
background-size: 100%;
}
</style>
<body>
<div class="bui-page bui-box-vertical">
<header style="background-image: url(img/bg.2f86eaa8.png);">
<!-- <div class="bui-bar">
<div class="bui-bar-left">
<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
</div>
<div class="bui-bar-main">模板页</div>
<div class="bui-bar-right">
</div>
</div> -->
</header>
<main>
<div class="index-he">
<div class="bui-box-space">
<div class="span1" style="text-align: center;margin-top: 10px;color: #FFFFFF;">
<h1>HOME</h1>
</div>
</div>
<div class="span1" style="border-radius: 12px;">
<div id="slide" class="bui-slide " style="border-radius: 8px;margin-top: 25px;"></div>
</div>
</div>
<div class="bui-box-space example-box3" style="margin-top: 15px;">
<div class="span1" id="recharge">
<div class="pan"
style="padding: 15px; background: url(img/index-01.2337a944.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
<div style="size: 16sp;">
<h2 style="">recharge</h2>
</div>
<img src="img/right.png" height="30px" style="margin-left: 8px;">
</div>
</div>
</div>
<div class="bui-box-space example-box3" style="margin-top: 15px;">
<div class="span1" id="myDevice" href="myDevice.html">
<div class="pan"
style="padding: 15px; background: url(img/index-02.29c3e03b.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
<div style="size: 16sp;">
<h2 style="">my device</h2>
</div>
<img src="img/index-07.png" height="30px" style="margin-left: 8px;">
</div>
</div>
</div>
<div class="bui-box-space example-box3" style="margin-top: 15px;margin-bottom: 15px;">
<!-- <div class="span1" >
<div class="pan"
style="padding: 15px; background: url(img/index-03.b9b517de.png) no-repeat ;background-size:120%; background-position: -10px -10px;">
<div style="size: 16sp;">
<h2 style="">lottery</h2>
</div>
<div>
<img src="img/index-07.png" height="30px" style="margin-left: 0px;">
</div>
</div>
</div> -->
<div class="span1" id="income" href="myIncome.html">
<div class="pan"
style="padding: 15px; background: url(img/index-04.d43431f9.png) no-repeat ;background-size:100%; background-position: -12px -45px;">
<div style="size: 16sp;">
<h2 style="">income</h2>
</div>
<img src="img/index-07.png" height="30px" style="margin-left: 8px;">
</div>
</div>
</div>
<div id="slideNote" class="bui-slide bui-slide-notice" href="newsDetails.html"></div>
<ul class="bui-list bui-list-thumbnail">
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">03-08-2021 15:44:57</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/D2PV87LC6@H%60MYOE1J7_Z5M.png"
style="max-width: 100%;max-height: 100%;" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca in India</h3>
<p class="item-text">It is our purpose to push the boundaries of science to deliver life
changing medicines and walk the extra mile to nurture trust, transform the lives of
patients and the wider community we serve in. We are extremely honoured to be recognized
as a Great Pla</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/e40b92e93c4d1f361adc7ce147e377ef.png"
alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
<li class="bui-btn bui-box" href="newsDetails.html">
<div class="bui-thumbnail" data-sub=""><img src="img/1.png" alt=""></div>
<div class="span1">
<h3 class="item-title">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics
Across India</h3>
<p class="item-text">AstraZeneca’s Partners With DocOn to Digitise Healthcare Clinics Across
India</p>
<p class="item-text">15-07-2021 15:49:47</p>
</div>
</li>
</ul>
</main>
<footer>
<!-- 固定底部 -->
<ul class="bui-nav">
<li class="bui-btn bui-box-vertical active">
<!-- <span class="bui-badges"></span></i> -->
<img src="img/t-02.png" width="30px" style="margin: 0 auto;">
<div class="span1">home</div>
</li>
<li class="bui-btn bui-box-vertical" href="device.html">
<img src="img/t-03.png" width="30px" style="margin: 0 auto;">
<div class="span1">Device</div>
</li>
<li class="bui-btn bui-box-vertical" href="wallet.html">
<img src="img/t-05.png" width="30px" style="margin: 0 auto;">
<div class="span1">Wallet</div>
</li>
<li class="bui-btn bui-box-vertical bui-btn-more" href="team.html">
<img src="img/t-07.png" width="30px" style="margin: 0 auto;">
<div class="span1">Team</div>
</li>
<li class="bui-btn bui-box-vertical bui-btn-more" href="mine.html">
<img src="img/t-09.png" width="30px" style="margin: 0 auto;">
<div class="span1">Mine</div>
</li>
</ul>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/zepto.js"></script>
<script src="https://cdn.jsdelivr.net/npm/buijs/lib/latest/bui.js"></script>
<script>
bui.ready(function() {
bui.btn({
id: ".bui-page",
handle: ".bui-btn"
}).load();
// 所有控件及方法需要在这里执行
$("#recharge").on("click", function(e) {
bui.load({
url: "./rechargeCentre.html",
param: {
parameter: "parameter"
}
});
})
$("#myDevice").on("click", function(e) {
bui.load({
url: "./myDevice.html",
param: {
parameter: "parameter"
}
});
})
$("#income").on("click", function(e) {
bui.load({
url: "./myIncome.html",
param: {
parameter: "parameter"
}
});
})
$("#slideNote").on("click", function(e) {
bui.load({
url: "./newsDetails.html",
param: {
parameter: "parameter"
}
});
})
// 静态初始化
var uiSlide = bui.slide({
id: "#slide",
height: 300,
width: '95%',
autopage: true,
loop: true,
data: [{
title: "",
image: "img/3.png",
url: "",
}, {
title: "",
image: "img/2.png",
url: "",
}, {
title: "",
image: "img/4.png",
url: "",
}]
})
// 通知, 自定义模板
var uiSlide = bui.slide({
id: "#slideNote",
height: 100,
autoplay: true,
loop: true,
swipe: false,
data: [{
title: "User ****1395 successfully withdraws 2000RS",
url: ""
}, {
title: "User ****2645 successfully withdraws 200RS",
url: ""
}, {
title: "User****9174 activated the LV3 device",
url: "l"
}],
template: function(data) {
// 自定义模板时,需要自己渲染完整结构
var html = "";
html += `<div class="bui-slide-main"><ul>`
data.forEach(function(item, i) {
html += `<li href="${item.url}">
<div class="notice-item">
<div class="span1">${item.title||""}</div>
</div>
</li>`
})
html += `</ul></div>`
return html;
},
direction: "y",
// 示例跳转前去掉自动播放, 如果不需要自动播放, 模板直接给 href 属性就行, 不用 data-href
// callback: function(e) {
// var $item = $(e.target).parents("li"),
// href = $item.attr("data-href"),
// that = this;
// bui.load({
// url: href,
// beforeLoad: function() {
// // 跳转前去掉自动播放.
// that.stop();
// }
// })
// }
})
// 异步请求后, 利用 uiSlide.option "data" 的值
// 后退的时候,清除掉自动播放
function beforeBack(e) {
if (e.target.pid == "pages/ui_controls/bui.slide_note") {
// 禁止自动播放
uiSlide.stop();
// 去掉实例缓存
uiSlide = null;
}
}
// 示例后退以后清除掉实例, 每次进来都会增加
// if (router.handle["beforeback"]) {
// var hasHandle = false;
// router.handle["beforeback"].forEach(function(item) {
// // 如果 function 的名称相同,则不用再增加
// if (item.name === "beforeBack") {
// hasHandle = true;
// return hasHandle;
// }
// })
// // 第一次增加
// !hasHandle && router.on("beforeback", beforeBack)
// } else {
// // 第一次增加
// router.on("beforeback", beforeBack)
// }
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
