news-with-title.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <!--App自定义的css-->
  12. <link rel="stylesheet" type="text/css" href="../css/app.css" />
  13. <style>
  14. .mui-card .mui-control-content {
  15. padding: 10px;
  16. }
  17. .mui-control-content {
  18. height: 500px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <header class="mui-bar mui-bar-nav">
  24. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  25. <h1 id="title" class="mui-title">咨询</h1>
  26. </header>
  27. <div class="mui-content">
  28. <div style="padding: 10px 10px;" id="slider" class="mui-slider">
  29. <div id="segmentedControl" class="mui-segmented-control">
  30. <a class="mui-control-item mui-active" href="#item1">
  31. 养老政策
  32. </a>
  33. <a class="mui-control-item" href="#item2">
  34. 保健知识
  35. </a>
  36. <a class="mui-control-item" href="#item3">
  37. 慢病管理
  38. </a>
  39. <a class="mui-control-item" href="#item4">
  40. 漫友分享
  41. </a>
  42. </div>
  43. </div>
  44. <div>
  45. <div id="item1" class="mui-control-content mui-active">
  46. <div id="scroll" class="mui-scroll-wrapper">
  47. <div class="mui-scroll">
  48. <ul class="mui-table-view">
  49. <li class="mui-table-view-cell mui-media">
  50. <a href="javascript:;">
  51. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.1.jpg">
  52. <div class="mui-media-body">
  53. 专家解读:国家对养老院的政策
  54. <p class='mui-ellipsis'>目前,我国老龄化进入快速发展阶段,“银发浪潮”引起了人们对养老问题的关注,</p>
  55. </div>
  56. </a>
  57. </li>
  58. </ul>
  59. <ul class="mui-table-view">
  60. <li class="mui-table-view-cell mui-media">
  61. <a href="javascript:;">
  62. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.2.jpg">
  63. <div class="mui-media-body">
  64. 以房养老政策的好处
  65. <p class='mui-ellipsis'>以房养老政策的好处包括有效补偿老年生活、它可以有效解除老年人对生活没有保障的担心</p>
  66. </div>
  67. </a>
  68. </li>
  69. </ul>
  70. <ul class="mui-table-view">
  71. <li class="mui-table-view-cell mui-media">
  72. <a href="javascript:;">
  73. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.3.png">
  74. <div class="mui-media-body">
  75. 养老服务,创出新天地
  76. <p class='mui-ellipsis'>养老服务,创出新天地。将"爱老助老"作为市年度60项重点工程之一,</p>
  77. </div>
  78. </a>
  79. </li>
  80. </ul>
  81. <ul class="mui-table-view">
  82. <li class="mui-table-view-cell mui-media">
  83. <a href="javascript:;">
  84. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.4.jpg">
  85. <div class="mui-media-body">
  86. 民办养老院:尚待成熟的投资蓝海
  87. <p class='mui-ellipsis'>护理则要建设多层次的养老护理机构,包括社区老年饭桌、日间照料中心、</p>
  88. </div>
  89. </a>
  90. </li>
  91. </ul>
  92. <ul class="mui-table-view">
  93. <li class="mui-table-view-cell mui-media">
  94. <a href="javascript:;">
  95. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.5.jpg">
  96. <div class="mui-media-body">
  97. 公办养老机构“乱象”治理
  98. <p class='mui-ellipsis'>公办养老机构“乱象”治理。建设中国特色的养老服务体系道路到底该怎样走?</p>
  99. </div>
  100. </a>
  101. </li>
  102. </ul>
  103. <ul class="mui-table-view">
  104. <li class="mui-table-view-cell mui-media">
  105. <a href="javascript:;">
  106. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.6.jpg">
  107. <div class="mui-media-body">
  108. 关于发展我省社会化养老的思考与建议
  109. <p class='mui-ellipsis'>关于发展我省社会化养老的思考与建议养老服务业是指为老年人提供生活照顾和护理服务,</p>
  110. </div>
  111. </a>
  112. </li>
  113. </ul>
  114. <ul class="mui-table-view">
  115. <li class="mui-table-view-cell mui-media">
  116. <a href="javascript:;">
  117. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.7.jpg">
  118. <div class="mui-media-body">
  119. 发展养老服务业
  120. <p class='mui-ellipsis'>在贯彻优先发展社会养老服务方针的"十二五"时期,我们应当以城市"三无"老人、农村"五保"老人和低收入失能、</p>
  121. </div>
  122. </a>
  123. </li>
  124. </ul>
  125. <ul class="mui-table-view">
  126. <li class="mui-table-view-cell mui-media">
  127. <a href="javascript:;">
  128. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.8.jpg">
  129. <div class="mui-media-body">
  130. 关于加快发展我省养老服务业的建议
  131. <p class='mui-ellipsis'>提案——关于加快发展我省养老服务业的建议提案——关于加快发展我省养老服务业的建议。</p>
  132. </div>
  133. </a>
  134. </li>
  135. </ul>
  136. <ul class="mui-table-view">
  137. <li class="mui-table-view-cell mui-media">
  138. <a href="javascript:;">
  139. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.9.jpg">
  140. <div class="mui-media-body">
  141. 2015养老新政策延迟退休年龄至65岁
  142. <p class='mui-ellipsis'>近日,有数据显示中国成全球最早退休国家,2015有关退休年龄最新规定发布,退休年龄延长,</p>
  143. </div>
  144. </a>
  145. </li>
  146. </ul>
  147. <ul class="mui-table-view">
  148. <li class="mui-table-view-cell mui-media">
  149. <a href="javascript:;">
  150. <img class="mui-media-object mui-pull-left" src="../images/newImg/1.10.jpg">
  151. <div class="mui-media-body">
  152. 社区养老基本介绍 相关新政策解读
  153. <p class='mui-ellipsis'>老龄化程度的加深,养老问题备受人们关注,“老有所养”成为今年两会代表委员讨论的焦点问题之一。</p>
  154. </div>
  155. </a>
  156. </li>
  157. </ul>
  158. </div>
  159. </div>
  160. </div>
  161. <div id="item2" class="mui-control-content">
  162. <ul class="mui-table-view">
  163. <li class="mui-table-view-cell mui-media">
  164. <a href="javascript:;">
  165. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.1.jpg">
  166. <div class="mui-media-body">
  167. 老年人为啥需要补钙
  168. <p class='mui-ellipsis'>50岁以后,骨丢失逐渐增多,钙摄入的推荐量跃至1000mg/d,钙的需求量更高。</p>
  169. </div>
  170. </a>
  171. </li>
  172. </ul>
  173. <ul class="mui-table-view">
  174. <li class="mui-table-view-cell mui-media">
  175. <a href="javascript:;">
  176. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.2.jpg">
  177. <div class="mui-media-body">
  178. 中医祖传的十个长寿秘方
  179. <p class='mui-ellipsis'>中医主张“天人合一”的整体观,生活习惯应该符合大自然规律。早晨5至7时是人体大肠经最旺盛的时候,</p>
  180. </div>
  181. </a>
  182. </li>
  183. </ul>
  184. <ul class="mui-table-view">
  185. <li class="mui-table-view-cell mui-media">
  186. <a href="javascript:;">
  187. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.3.jpg">
  188. <div class="mui-media-body">
  189. 高血压,血糖高怎么办?
  190. <p class='mui-ellipsis'>高血压要长期服药,药都是比较散的,长久了体质就差。血糖偏高很可能是高血压引起的,</p>
  191. </div>
  192. </a>
  193. </li>
  194. </ul>
  195. <ul class="mui-table-view">
  196. <li class="mui-table-view-cell mui-media">
  197. <a href="javascript:;">
  198. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.4.jpg">
  199. <div class="mui-media-body">
  200. 腰围多少最长寿 延缓衰老的6个数字密码
  201. <p class='mui-ellipsis'>每周锻炼的时间,至少2.5小时。如果坚持每周锻炼不少于2个小时,</p>
  202. </div>
  203. </a>
  204. </li>
  205. </ul>
  206. <ul class="mui-table-view">
  207. <li class="mui-table-view-cell mui-media">
  208. <a href="javascript:;">
  209. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.5.jpg">
  210. <div class="mui-media-body">
  211. 吃生姜可开胃抗衰祛除老人斑
  212. <p class='mui-ellipsis'>生姜是养生保健不可缺少的一部分。现带你认识生姜食用的6大功效。</p>
  213. </div>
  214. </a>
  215. </li>
  216. </ul>
  217. <ul class="mui-table-view">
  218. <li class="mui-table-view-cell mui-media">
  219. <a href="javascript:;">
  220. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.6.jpg">
  221. <div class="mui-media-body">
  222. 中药熏蒸治疗老人痰多有奇效
  223. <p class='mui-ellipsis'>“脾为生痰之源,肺为贮痰之器”,秋季则是痰湿体质患者调护脾、肺的最佳季节。</p>
  224. </div>
  225. </a>
  226. </li>
  227. </ul>
  228. <ul class="mui-table-view">
  229. <li class="mui-table-view-cell mui-media">
  230. <a href="javascript:;">
  231. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.7.jpg">
  232. <div class="mui-media-body">
  233. 打好太极拳关键要会“松”
  234. <p class='mui-ellipsis'>太极拳是最适合中老年健身养生的运动,‘太极天天走,活到九十九’,它会使人们的生活变得更加健康快乐。</p>
  235. </div>
  236. </a>
  237. </li>
  238. </ul>
  239. <ul class="mui-table-view">
  240. <li class="mui-table-view-cell mui-media">
  241. <a href="javascript:;">
  242. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.8.jpg">
  243. <div class="mui-media-body">
  244. 老人应该如何保护听力
  245. <p class='mui-ellipsis'>听力下降大约出现在40岁左右。最易察觉的细节就是:在看电视时听力变差的人会不自觉调大音量。</p>
  246. </div>
  247. </a>
  248. </li>
  249. </ul>
  250. <ul class="mui-table-view">
  251. <li class="mui-table-view-cell mui-media">
  252. <a href="javascript:;">
  253. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.9.jpg">
  254. <div class="mui-media-body">
  255. 人人手上都有个“不老穴”
  256. <p class='mui-ellipsis'>人人都想益寿延年,与其花钱费力保养,不如按揉一个“不老穴”。</p>
  257. </div>
  258. </a>
  259. </li>
  260. </ul>
  261. <ul class="mui-table-view">
  262. <li class="mui-table-view-cell mui-media">
  263. <a href="javascript:;">
  264. <img class="mui-media-object mui-pull-left" src="../images/newImg/2.10.jpg">
  265. <div class="mui-media-body">
  266. 好习惯养出好关节
  267. <p class='mui-ellipsis'>骨头是组成人的支架,而关节是骨头的连结点,如果没有关节,人就会非常僵硬,动弹不得。</p>
  268. </div>
  269. </a>
  270. </li>
  271. </ul>
  272. </div>
  273. <div id="item3" class="mui-control-content">
  274. <ul class="mui-table-view">
  275. <li class="mui-table-view-cell mui-media">
  276. <a href="javascript:;">
  277. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.1.jpg">
  278. <div class="mui-media-body">
  279. 糖尿病的病根在哪?
  280. <p class='mui-ellipsis'>1.不是血糖高,而是五脏六腑没糖!2.不是降糖,而是解决糖吸收问题!</p>
  281. </div>
  282. </a>
  283. </li>
  284. </ul>
  285. <ul class="mui-table-view">
  286. <li class="mui-table-view-cell mui-media">
  287. <a href="javascript:;">
  288. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.2.jpg">
  289. <div class="mui-media-body">
  290. 惊!十个慢性咽炎八个是老师
  291. <p class='mui-ellipsis'>中小学教师面临着来自学校和家长的升学率的压力,教学和教研的任务繁重,睡眠时间少,大脑经常处于高度紧张状态,</p>
  292. </div>
  293. </a>
  294. </li>
  295. </ul>
  296. <ul class="mui-table-view">
  297. <li class="mui-table-view-cell mui-media">
  298. <a href="javascript:;">
  299. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.3.jpg">
  300. <div class="mui-media-body">
  301. 10种慢性病包括哪些
  302. <p class='mui-ellipsis'> 最常见的10种慢性病。1.肝硬化:肝硬化(liver cirrhosis)是一种常见的慢性肝病,可由一种或多种原因引起肝脏损害</p>
  303. </div>
  304. </a>
  305. </li>
  306. </ul>
  307. <ul class="mui-table-view">
  308. <li class="mui-table-view-cell mui-media">
  309. <a href="javascript:;">
  310. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.4.jpg">
  311. <div class="mui-media-body">
  312. 慢性病的危害
  313. <p class='mui-ellipsis'>慢性病的危害主要是造成脑、心、肾等重要脏器的损害,易造成伤残,影响劳动能力和生活质量</p>
  314. </div>
  315. </a>
  316. </li>
  317. </ul>
  318. <ul class="mui-table-view">
  319. <li class="mui-table-view-cell mui-media">
  320. <a href="javascript:;">
  321. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.5.jpg">
  322. <div class="mui-media-body">
  323. 慢性病防治知识
  324. <p class='mui-ellipsis'>慢性病主要指以心脑血管疾病(高血压、冠心病、脑卒中等)、糖尿病、恶性肿瘤、慢性阻塞性肺部疾病(慢性气管炎、肺气肿等)精神异常和精神病等为代表的一组疾病</p>
  325. </div>
  326. </a>
  327. </li>
  328. </ul>
  329. <ul class="mui-table-view">
  330. <li class="mui-table-view-cell mui-media">
  331. <a href="javascript:;">
  332. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.6.jpg">
  333. <div class="mui-media-body">
  334. 是什么原因让我们染上了慢性病的恶疾?
  335. <p class='mui-ellipsis'>诱发慢性病的原因很多,抛开遗传原因之外还有:饮食的错误“民以食为天”,“病从口入”。这两句俗语道出“吃”的重要性与危害性。懂得吃的人,</p>
  336. </div>
  337. </a>
  338. </li>
  339. </ul>
  340. <ul class="mui-table-view">
  341. <li class="mui-table-view-cell mui-media">
  342. <a href="javascript:;">
  343. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.7.jpg">
  344. <div class="mui-media-body">
  345. 为什么有些人会得慢性病而有些人不会呢?
  346. <p class='mui-ellipsis'>在日常生活中,为什么有些人会得慢性病而有些人不会呢?我们知道,人是由无数细胞组成的,细胞有分裂和再生的能力</p>
  347. </div>
  348. </a>
  349. </li>
  350. </ul>
  351. <ul class="mui-table-view">
  352. <li class="mui-table-view-cell mui-media">
  353. <a href="javascript:;">
  354. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.8.jpg">
  355. <div class="mui-media-body">
  356. 为什么慢性病会反复发作难以根治?
  357. <p class='mui-ellipsis'>慢性病为什么难治?原因其实很简单,是因为没有找准导致慢性病的病因。</p>
  358. </div>
  359. </a>
  360. </li>
  361. </ul>
  362. <ul class="mui-table-view">
  363. <li class="mui-table-view-cell mui-media">
  364. <a href="javascript:;">
  365. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.9.jpg">
  366. <div class="mui-media-body">
  367. 儿童合理用药核心知识点
  368. <p class='mui-ellipsis'>1、儿童处于长期发育期,身体各个器官组织发育尚未成熟,功能也不完善,对药物的反应与成人不同,家长应重视合理用药。 </p>
  369. </div>
  370. </a>
  371. </li>
  372. </ul>
  373. <ul class="mui-table-view">
  374. <li class="mui-table-view-cell mui-media">
  375. <a href="javascript:;">
  376. <img class="mui-media-object mui-pull-left" src="../images/newImg/3.10.jpg">
  377. <div class="mui-media-body">
  378. 合理用药健康教育核心知识点
  379. <p class='mui-ellipsis'>1、合理用药是指安全、有效、经济地使用药物。优先使用基本药物是合理用药的重要措施。不合理用药会影响健康,甚至危及生命。</p>
  380. </div>
  381. </a>
  382. </li>
  383. </ul>
  384. </div>
  385. <div id="item4" class="mui-control-content">
  386. </div>
  387. </div>
  388. </div>
  389. <script src="../js/mui.min.js"></script>
  390. <script>
  391. mui.init({
  392. swipeBack: true //启用右滑关闭功能
  393. });
  394. (function($) {
  395. $('.mui-scroll-wrapper').scroll({
  396. indicators: true //是否显示滚动条
  397. });
  398. var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
  399. var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
  400. var item2 = document.getElementById('item2mobile');
  401. var item3 = document.getElementById('item3mobile');
  402. document.getElementById('slider').addEventListener('slide', function(e) {
  403. if (e.detail.slideNumber === 1) {
  404. if (item2.querySelector('.mui-loading')) {
  405. setTimeout(function() {
  406. item2.querySelector('.mui-scroll').innerHTML = html2;
  407. }, 500);
  408. }
  409. } else if (e.detail.slideNumber === 2) {
  410. if (item3.querySelector('.mui-loading')) {
  411. setTimeout(function() {
  412. item3.querySelector('.mui-scroll').innerHTML = html3;
  413. }, 500);
  414. }
  415. }
  416. });
  417. var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
  418. $('.mui-input-group').on('change', 'input', function() {
  419. if (this.checked) {
  420. sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
  421. //force repaint
  422. sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
  423. }
  424. });
  425. $('.mui-table-view-cell').on('tap', 'a', function() {
  426. $.openWindow({
  427. id: 'news-detial-win',
  428. url: 'news-detial.html'
  429. })
  430. })
  431. })(mui);
  432. </script>
  433. </body>
  434. </html>