index.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>耀荣康健</title>
  6. <link rel="stylesheet" type="text/css" href="/analysis/css/styles.css">
  7. <link rel="stylesheet" type="text/css" href="/analysis/js/layui/css/layui.css">
  8. <script src="/analysis/js/jquery-3.2.1.min.js"></script>
  9. <!-- <script src="/analysis/js/layer.js"></script>-->
  10. <script src="/analysis/js/layui/layui.js"></script>
  11. <style>
  12. .card {
  13. background: rgba(255, 255, 255, 0.1);
  14. /*border-radius: 15px;*/
  15. overflow: hidden;
  16. /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
  17. transition: transform 0.4s ease;
  18. /*height: 300px;*/
  19. position: relative;
  20. }
  21. .card:hover {
  22. transform: translateY(-10px);
  23. }
  24. .image-container {
  25. /*width: 100%;*/
  26. /*height: 100%;*/
  27. position: relative;
  28. overflow: hidden;
  29. }
  30. .image-container img {
  31. width: 100%;
  32. height: 100%;
  33. object-fit: cover;
  34. transition: all 0.5s ease;
  35. }
  36. .effect-title {
  37. color: white;
  38. position: absolute;
  39. bottom: 20px;
  40. left: 20px;
  41. font-size: 1.5rem;
  42. font-weight: 600;
  43. z-index: 2;
  44. text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
  45. transition: all 0.4s ease;
  46. }
  47. /* 效果1: 缩放 */
  48. .scale:hover img {
  49. transform: scale(1.1);
  50. }
  51. /* 效果2: 旋转 */
  52. .rotate:hover img {
  53. transform: scale(1.1) rotate(5deg);
  54. }
  55. /* 效果3: 灰度效果 */
  56. .grayscale img {
  57. filter: grayscale(70%);
  58. }
  59. .grayscale:hover img {
  60. filter: grayscale(0%);
  61. transform: scale(1.05);
  62. }
  63. /* 效果4: 文字叠加 */
  64. .overlay-text {
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. width: 100%;
  69. height: 100%;
  70. background: rgba(0, 68, 203, 0.6);
  71. /*background: #0044cb;*/
  72. display: flex;
  73. flex-direction: column;
  74. justify-content: center;
  75. align-items: center;
  76. /*padding: 20px;*/
  77. opacity: 0;
  78. transition: opacity 0.5s ease;
  79. }
  80. .overlay-text h3 {
  81. font-size: 1.8rem;
  82. margin-bottom: 15px;
  83. text-align: center;
  84. color: white;
  85. }
  86. .overlay-text p {
  87. text-align: center;
  88. line-height: 1.6;
  89. max-width: 80%;
  90. color: white;
  91. }
  92. .text-overlay:hover .overlay-text {
  93. opacity: 1;
  94. }
  95. .text-overlay:hover img {
  96. transform: scale(1.1);
  97. }
  98. /* 效果5: 模糊效果 */
  99. .blur:hover img {
  100. filter: blur(3px);
  101. transform: scale(1.1);
  102. }
  103. /* 效果6: 边框效果 */
  104. .border-effect {
  105. position: relative;
  106. }
  107. .border-effect::before {
  108. content: "";
  109. position: absolute;
  110. top: 20px;
  111. left: 20px;
  112. right: 20px;
  113. bottom: 20px;
  114. border: 3px solid rgba(255, 255, 255, 0.6);
  115. z-index: 2;
  116. opacity: 0;
  117. transform: scale(0.8);
  118. transition: all 0.5s ease;
  119. }
  120. .border-effect:hover::before {
  121. opacity: 1;
  122. transform: scale(1);
  123. }
  124. .border-effect:hover img {
  125. transform: scale(1.05);
  126. }
  127. .border-effect:hover .effect-title {
  128. transform: translateY(-30px);
  129. }
  130. </style>
  131. </head>
  132. <body>
  133. <div class="boxBody">
  134. <div style="" class="boxHeader">
  135. <div style="width: 60%; display: flex; height: 100%; align-items: center">
  136. <div style="width:50%; float: left; text-align: left"><img
  137. src="/analysis/img/756aa7fbd13664693c5b314e3e333463.png">
  138. </div>
  139. <div style="width:50%;float: right; text-align: right">
  140. <a href="/analysis/index.html"
  141. style="text-decoration: none; color: #333333; font-size: 24px"><span>主页</span></a>
  142. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  143. <a href="javascript:docheck()" style="text-decoration: none; color: #333333; font-size: 24px"> <span>认知测试</span></a>
  144. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  145. <a id="regist" href="javascript:doRegist()"
  146. style="text-decoration: none; color: #333333; font-size: 24px"> <span>免费注册</span></a>
  147. <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
  148. <a id="login" href="javascript:openLoginWind()"
  149. style="text-decoration: none; color: #333333; font-size: 24px"> <span>登录</span></a>
  150. <a id="logout" href="javascript:doLogout()"
  151. style="text-decoration: none; color: #333333; font-size: 24px"> <span>退出</span></a>
  152. </div>
  153. </div>
  154. </div>
  155. <div style="width: 100%; height: 860px; display: flex; align-items: flex-end;justify-content: center; color: white;
  156. background-image: url('/analysis/img/4d372d3aac86f3e0f0db2b2a7eae0cb7.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;">
  157. <div style="width: 55%"></div>
  158. <div style="display: flex; flex-direction: column">
  159. <a href="javascript:docheck()">
  160. <div style="width: 703px; height: 169px; display: flex; justify-content: center; align-items: center; color: #3F3F3F; font-size: 30px; font-weight: bold;
  161. background-image: url('/analysis/img/e3c68b0de8e4d2956c42c89a4499506a.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;
  162. ">开始免费测试
  163. </div>
  164. </a>
  165. <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
  166. <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span
  167. style="color: #87b6f2; font-size: 18px;">非医疗设备 本工具仅辅助记录数据,结果需由专业医护人员解读。</span><span>&nbsp;</span><span>&nbsp;</span>
  168. </div>
  169. </div>
  170. <!-- <div class="layui-carousel" id="test1">-->
  171. <!-- <div carousel-item>-->
  172. <!-- <a href="javascript:docheck()" ><img src="/analysis/img/4d372d3aac86f3e0f0db2b2a7eae0cb7.png"/></a>-->
  173. <!-- <a href="javascript:alert('aa')" ><img src="/analysis/img/bigTitle02.png"/></a>-->
  174. <!-- </div>-->
  175. <!-- </div>-->
  176. <div>&nbsp;</div>
  177. <div>&nbsp;</div>
  178. <div>&nbsp;</div>
  179. <div>&nbsp;</div>
  180. <div style="width: 100%; height: 100px; display: flex; align-items: center; justify-content: center">
  181. <span class="title3">认知状态评估监测</span>
  182. </div>
  183. <div style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column">
  184. <div style="width:60%; display: flex; display: flex; align-items: center; justify-content: space-around">
  185. <div style="display: flex; align-items: center; flex-direction: column">
  186. <div style="width: 150px; height: 150px;
  187. background-image: url('/analysis/img/dc067b8d3af88cc149a272591cd1e5ec.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;
  188. "></div>
  189. <div>
  190. <div>&nbsp;</div>
  191. <div class="title6">早期检测脑部问题</div>
  192. <div>&nbsp;</div>
  193. <div style="" class="title9">开展针对自身认知状态的全面检查,并获取能直观反映认知状态随时间动态变化的监测图像。</div>
  194. </div>
  195. </div>
  196. <div style="display: flex; align-items: center; flex-direction: column">
  197. <div style="width: 150px; height: 150px;
  198. background-image: url('/analysis/img/527d2f780092b2f2c6dce99fe47256ab.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;
  199. "></div>
  200. <div>
  201. <div>&nbsp;</div>
  202. <div class="title6">跟踪认知状态</div>
  203. <div>&nbsp;</div>
  204. <div style="" class="title9">
  205. 早期发现对于早期干预和护理非常重要,可以有效延缓大脑认知功能衰退。
  206. </div>
  207. <!-- <div>&nbsp;</div>-->
  208. <!-- <div>&nbsp;</div>-->
  209. </div>
  210. </div>
  211. <div style="display: flex; align-items: center; flex-direction: column">
  212. <div style="width: 150px; height: 150px;
  213. background-image: url('/analysis/img/a2850fbd4e28d1ea8aaa864fb11ae33d.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;
  214. "></div>
  215. <div>
  216. <div>&nbsp;</div>
  217. <div class="title6">无局限评估</div>
  218. <div>&nbsp;</div>
  219. <div style="" class="title9">无需等待,随时可进行的、兼具整体与针对性的认知评估服务,可快速了解自己的认知状态。</div>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. <div style="width: 100%; height: 800px; display: flex; align-items: center; justify-content: center; flex-direction: column">
  225. <div class="title3">精准认知评估工具</div>
  226. <div>&nbsp;</div>
  227. <div>&nbsp;</div>
  228. <div class="title9" style="width: 50%">
  229. 许多与认知功能相关的疾病,如阿尔茨海默病、血管性痴呆等,在早期阶段症状可能并不明显,但此时大脑内已开始发生病理改变。通过早期筛查,能够在疾病尚处于可干预阶段时发现异常,及时采取治疗措施,这比疾病发展到中晚期再进行治疗效果要好得多。
  230. <br/><br/>此工具旨在作为医生的认知功能障碍早期筛查辅助工具,能够帮助医生精准确定患者的认知功能水平,并持续监控每位患者的干预措施效果与认知康复进程。
  231. 定期进行认知功能障碍早期筛查,能够动态监测认知功能的变化趋势。根据监测结果,及时调整健康管理方案和干预措施,确保干预措施始终具有针对性和有效性。
  232. <br/><br/>无论您是医院或机构的专业人员,还是想要了解自身认知状态的个人,我们的数字工具都能为您提供准确性与可靠性。请放心,您的认知功能评估将以科学严谨的方式进行。
  233. </div>
  234. <div>&nbsp;</div>
  235. <div>&nbsp;</div>
  236. <div>&nbsp;</div>
  237. <div>&nbsp;</div>
  238. <div class="title3">评估记录</div>
  239. <div>&nbsp;</div>
  240. <div>&nbsp;</div>
  241. <div style="width: 70%; display: flex; justify-content: space-around">
  242. <a href="javascript:doReportSingle()">
  243. <div class="card text-overlay">
  244. <div class="image-container">
  245. <img src="/analysis/img/report1.png">
  246. <div class="overlay-text">
  247. <h3>评估得分</h3>
  248. <p>点击查看评估得分</p>
  249. </div>
  250. <!-- <div class="effect-title">测试成绩</div>-->
  251. </div>
  252. </div>
  253. </a>
  254. <a href="javascript:doReport()">
  255. <div class="card text-overlay">
  256. <div class="image-container">
  257. <img src="/analysis/img/report2.png">
  258. <div class="overlay-text">
  259. <h3>评估趋势图</h3>
  260. <p>点击查看评估趋势图</p>
  261. </div>
  262. <!-- <div class="effect-title">测试成绩</div>-->
  263. </div>
  264. </div>
  265. </a>
  266. <a href="javascript:doReportTabel()">
  267. <div class="card text-overlay">
  268. <div class="image-container">
  269. <img src="/analysis/img/report3.png">
  270. <div class="overlay-text">
  271. <h3>评估历史</h3>
  272. <p>点击查看评估历史</p>
  273. </div>
  274. <!-- <div class="effect-title">测试成绩</div>-->
  275. </div>
  276. </div>
  277. </a>
  278. <!-- <a href="javascript:doReportSingle()">-->
  279. <!-- <div style="width: 340px; height: 220px;-->
  280. <!--background-image: url('/analysis/img/report1.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;-->
  281. <!--"></div>-->
  282. <!-- </a>-->
  283. <!-- <a href="javascript:doReport()">-->
  284. <!-- <div style="width: 340px; height: 220px;-->
  285. <!--background-image: url('/analysis/img/report2.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;-->
  286. <!--"></div>-->
  287. <!-- </a>-->
  288. <!-- <a href="javascript:doReportTabel()">-->
  289. <!-- <div style="width: 340px; height: 220px;-->
  290. <!--background-image: url('/analysis/img/report3.png');background-repeat: no-repeat;background-size: cover;background-position: center;background-size: 100% 100%;-->
  291. <!--"></div>-->
  292. <!-- </a>-->
  293. </div>
  294. </div>
  295. <div style="" class="boxBottom">
  296. 地址:&nbsp;北京市朝阳区东四环中路41号嘉泰国际A座16层1619室&nbsp;&nbsp;&nbsp;&nbsp;联系电话:400-086-1638<br/>
  297. 湘ICP备2024059687号-3
  298. </div>
  299. </div>
  300. <script>
  301. function doReport() {
  302. if (isLogin) {
  303. window.open("/analysis/report/reportLine.html")
  304. } else {
  305. openLoginWind()
  306. }
  307. }
  308. function doReportTabel() {
  309. if (isLogin) {
  310. window.open("/analysis/report/reportTable.html")
  311. } else {
  312. openLoginWind()
  313. }
  314. }
  315. function doReportSingle() {
  316. if (isLogin) {
  317. window.open("/analysis/report/reportSingle.html")
  318. } else {
  319. openLoginWind()
  320. }
  321. }
  322. function checkLogin() {
  323. $.ajax({
  324. url: '/analysis/login/checkLogin',
  325. type: 'POST',
  326. dataType: 'json',
  327. success: function (res) {
  328. // alert(JSON.stringify(res))
  329. if (res.code == 0) {
  330. isLogin = true
  331. $("#report").show()
  332. $("#login").hide()
  333. $("#logout").show()
  334. } else {
  335. isLogin = false
  336. $("#report").hide()
  337. $("#login").show()
  338. $("#logout").hide()
  339. }
  340. },
  341. error: function (xhr, status, error) {
  342. // console.error('错误:', error);
  343. }
  344. });
  345. }
  346. function doLogout() {
  347. LAYER_ID = layer.confirm('您确定要退出登录吗?', {icon: 3, title: '提示'}, function (index) {
  348. $.ajax({
  349. url: '/analysis/login/logout',
  350. type: 'POST',
  351. contentType: "application/json",
  352. dataType: 'json',
  353. success: function (res) {
  354. // layer.close(LAYER_LOAD_ID)
  355. if (res.code == 0) {
  356. isLogin = false
  357. } else {
  358. layer.alert(res.message, {icon: 2});
  359. }
  360. },
  361. error: function (xhr, status, error) {
  362. console.error('访问服务器错误:', error);
  363. layer.alert("服务器繁忙,请稍后重试!", {icon: 2});
  364. },
  365. complete: function (XHR, TS) {
  366. $("#login").show()
  367. $("#logout").hide()
  368. layer.close(LAYER_ID)
  369. }
  370. });
  371. });
  372. }
  373. function openLoginWind() {
  374. LAYER_ID = layer.open({
  375. // icon: 2,
  376. type: 2,
  377. title: ["请先登录", "font-size:18px"],
  378. // title: false,
  379. content: '/analysis/login.html',
  380. // scrollbar: false,
  381. area: ['800px', '500px'],
  382. // offset:'100px',
  383. anim: 0
  384. });
  385. }
  386. function docheck(data) {
  387. // const param = encodeURIComponent("view=web&phone="+data.phone)
  388. if (isLogin) {
  389. window.open("/analysis/analysis.html")
  390. } else {
  391. openLoginWind()
  392. }
  393. // window.open("/game/index.html")
  394. }
  395. var LAYER_ID = -1
  396. var isLogin = false
  397. function doRegist() {
  398. LAYER_ID = layer.open({
  399. // icon: 2,
  400. type: 2,
  401. title: ["免费注册", "font-size:18px"],
  402. // title: false,
  403. content: '/analysis/regist.html',
  404. // scrollbar: false,
  405. area: ['800px', '800px'],
  406. // offset:'100px',
  407. anim: 0
  408. });
  409. }
  410. function afterLogin(data) {
  411. // $("#report").show()
  412. $("#login").hide()
  413. $("#logout").show()
  414. }
  415. $(function () {
  416. //轮播插件设置
  417. // layui.use('carousel', function(){
  418. // var carousel = layui.carousel;
  419. // //建造实例
  420. // carousel.render({
  421. // elem: '#test1'
  422. // ,width: '100%' //设置容器宽度
  423. // ,height: '800px'
  424. // ,arrow: 'always' //始终显示箭头
  425. // //,anim: 'updown' //切换动画方式
  426. // });
  427. // });
  428. // layui.use('dropdown', function () {
  429. // var dropdown = layui.dropdown
  430. // dropdown.render({
  431. // elem: '#demo1' //可绑定在任意元素中,此处以上述按钮为例
  432. // , data: [{
  433. // title: ['距离测试'],
  434. // id: 100,
  435. // templet: '<span style="font-size: 16px">{{d.title}}</span>'
  436. // }]
  437. // , id: 'demo1'
  438. // //菜单被点击的事件
  439. // , click: function (obj) {
  440. // // console.log(obj);
  441. // // layer.msg('回调返回的参数已显示再控制台');
  442. // docheck()
  443. // },
  444. // style: "width:200px;"
  445. // });
  446. // });
  447. $("#logout").hide()
  448. checkLogin()
  449. })
  450. </script>
  451. </body>
  452. </html>