<template> <div class="container"> <div class="main"> <table> <tr> <td class="htmlColor">{{H.name}}</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="tableColor">{{He.name}}</td> </tr> <tr> <td class="headColor">{{Li.name}}</td> <td class="inlineColor">{{Be.name}}</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="formColor">{{B.name}}</td> <td class="formColor">{{C.name}}</td> <td class="titleColor">{{N.name}}</td> <td class="titleColor">{{O.name}}</td> <td class="titleColor">{{F.name}}</td> <td class="tableColor">{{Ne.name}}</td> </tr> <tr> <td class="headColor">{{Na.name}}</td> <td class="inlineColor">{{Mg.name}}</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td class="formColor">{{Al.name}}</td> <td class="formColor">{{Si.name}}</td> <td class="titleColor">{{Plin.name}}</td> <td class="titleColor">{{S.name}}</td> <td class="titleColor">{{ Cl.name }}</td> <td class="tableColor">{{ Ar.name }}</td> </tr> <tr> <td class="headColor">{{ K.name }}</td> <td class="inlineColor">{{ Ca.name }}</td> <td class="inlineColor">{{ Sc.name }}</td> <td class="inlineColor">{{ Ti.name}}</td> <td class="inlineColor">{{V.name}}</td> <td class="inlineColor">{{Cr.name}}</td> <td class="inlineColor">{{ Mn.name }}</td> <td class="inlineColor">{{ Fe.name }}</td> <td class="blockColor">{{Co.name}}</td> <td class="blockColor">{{Ni.name}}</td> <td class="blockColor">{{Cu.name }}</td> <td class="formColor">{{Zn.name }}</td> <td class="formColor">{{Ga.name}}</td> <td class="titleColor">{{Ge.name }}</td> <td class="titleColor">{{As.name }}</td> <td class="titleColor">{{Se.name}}</td> <td class="menuColor">{{Br.name}}</td> <td class="menuColor">{{Kr.name}}</td> </tr> <tr> <td class="headColor">{{Rb.name}}</td> <td class="inlineColor">{{Sr.name}}</td> <td class="inlineColor">{{Y.name}}</td> <td class="inlineColor">{{Zr.name}}</td> <td class="inlineColor">{{Nb.name}}</td> <td class="inlineColor">{{Mo.name}}</td> <td class="inlineColor">{{Tc.name}}</td> <td class="inlineColor">{{Ru.name}}</td> <td class="blockColor">{{Rh.name}}</td> <td class="blockColor">{{Pd.name}}</td> <td class="blockColor">{{Ag.name}}</td> <td class="formColor">{{Cd.name}}</td> <td class="formColor">{{In.name}}</td> <td class="formColor">{{Sn.name}}</td> <td class="titleColor">{{Sb.name}}</td> <td class="titleColor">{{Te.name}}</td> <td class="menuColor">{{I.name}}</td> <td class="menuColor">{{Xe.name}}</td> </tr> <tr> <td class="headColor">{{Cs.name}}</td> <td class="headColor">{{Ba.name}}</td> <td class="inlineColor">La-Lu</td> <td class="inlineColor">{{Hf.name}}</td> <td class="inlineColor">{{Ta.name}}</td> <td class="inlineColor">{{W.name}}</td> <td class="inlineColor">{{Re.name}}</td> <td class="inlineColor">{{Os.name}}</td> <td class="blockColor">{{Ir.name}}</td> <td class="blockColor">{{Pt.name}}</td> <td class="blockColor">{{Au.name}}</td> <td class="formColor">{{Hg.name}}</td> <td class="formColor">{{Tl.name}}</td> <td class="formColor">{{Pb.name}}</td> <td class="titleColor">{{Bi.name}}</td> <td class="titleColor">{{Po.name}}</td> <td class="menuColor">{{At.name}}</td> <td class="menuColor">{{Rn.name}}</td> </tr> <tr> <td class="headColor">{{Fr.name}}</td> <td class="headColor">{{Ra.name}}</td> <td class="inlineColor">Ac-Lr</td> <td class="inlineColor">{{Rf.name}}</td> <td class="inlineColor">{{Db.name}}</td> <td class="inlineColor">{{Sg.name}}</td> <td class="inlineColor">{{Bh.name}}</td> <td class="inlineColor">{{Hs.name}}</td> <td class="blockColor">{{Mt.name}}</td> <td class="blockColor">{{Ds.name}}</td> <td class="blockColor">{{Rg.name}}</td> <td class="formColor">{{Cn.name}}</td> <td class="formColor">{{Nh.name}}</td> <td class="formColor">{{Fl.name}}</td> <td class="titleColor">{{Mc.name}}</td> <td class="titleColor">{{Lv.name}}</td> <td class="menuColor">{{Ts.name}}</td> <td class="menuColor">{{Og.name}}</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td class="blueColor">{{La.name}}</td> <td class="blueColor">{{Ce.name}}</td> <td class="blueColor">{{Pr.name}}</td> <td class="blueColor">{{Nd.name}}</td> <td class="blueColor">{{Pm.name}}</td> <td class="blueColor">{{Sm.name}}</td> <td class="blueColor">{{Eu.name}}</td> <td class="blueColor">{{Gd.name}}</td> <td class="blueColor">{{Tb.name}}</td> <td class="blueColor">{{Dy.name}}</td> <td class="blueColor">{{Ho.name}}</td> <td class="blueColor">{{Er.name}}</td> <td class="blueColor">{{Tm.name}}</td> <td class="blueColor">{{Yb.name}}</td> <td class="blueColor">{{Lu.name}}</td> </tr> <tr> <td></td> <td class="blueColor">{{Ac.name}}</td> <td class="blueColor">{{Th.name}}</td> <td class="blueColor">{{Pa.name}}</td> <td class="blueColor">{{U.name}}</td> <td class="blueColor">{{Np.name}}</td> <td class="blueColor">{{Pu.name}}</td> <td class="blueColor">{{Am.name}}</td> <td class="blueColor">{{Cm.name}}</td> <td class="blueColor">{{Bk.name}}</td> <td class="blueColor">{{Cf.name}}</td> <td class="blueColor">{{Es.name}}</td> <td class="blueColor">{{Fm.name}}</td> <td class="blueColor">{{Md.name}}</td> <td class="blueColor">{{No.name}}</td> <td class="blueColor">{{Lr.name}}</td> </tr> </table> </div> <div class="info"> <h3></h3> <p></p> <a href="###">Mozilla,W3C Reference</a> </div> <div class="end"> <ul> <li><span class="htmlColor"></span>根元素</li> <li><span class="headColor"></span>元数据和脚本</li> <li><span class="inlineBlockColor"></span>嵌入式内容</li> </ul> <ul> <li><span class="inlineColor"></span>文本级别语义</li> <li><span class="blockColor"></span>组合内容</li> </ul> <ul> <li><span class="formColor"></span>表单</li> <li><span class="titleColor"></span>文档章节</li> </ul> <ul> <li><span class="tableColor"></span>表格数据</li> <li><span class="menuColor"></span>交互元素</li> </ul> </div> </div> </template> <script> export default { data() { return { H:{index:1,name:"氢",relativeAtomicMass:1.00794}, He:{index:2,name:"氦",relativeAtomicMass:4.002602}, Li:{index:3,name:"锂",relativeAtomicMass:6.941}, Be:{index:4,name:"铍",relativeAtomicMass:9.012182}, B:{index:5,name:"硼",relativeAtomicMass:10.811}, C:{index:6,name:"碳",relativeAtomicMass:12.011}, N:{index:7,name:"氮",relativeAtomicMass:14.007}, O:{index:8,name:"氧",relativeAtomicMass:15.999}, F:{index:9,name:"氟",relativeAtomicMass:18.998}, Ne:{index:10,name:"氖",relativeAtomicMass:20.17}, Na:{index:11,name:"钠",relativeAtomicMass:22.9898}, Mg:{index:12,name: "镁",relativeAtomicMass:24.305}, Al:{index:13,name:"铝",relativeAtomicMass:26.982}, Si:{index:14,name:"硅",relativeAtomicMass:28.085}, Plin:{index:15,name:"磷",relativeAtomicMass:30.974}, S:{index:16,name:"硫",relativeAtomicMass:32.06}, Cl:{index:17,name:"氯",relativeAtomicMass:35.453}, Ar:{index:18,name: "氩",relativeAtomicMass:39.94}, K:{index:19,name:"钾",relativeAtomicMass:39.098}, Ca:{index:20,name:"钙",relativeAtomicMass:40.08}, Sc:{index:21,name:"钪",relativeAtomicMass:44.956}, Ti:{index:22,name:"钛",relativeAtomicMass:47.9}, V:{index:23,name:"钒",relativeAtomicMass:50.94}, Cr:{index:24,name:"铬",relativeAtomicMass:51.996}, Mn:{index:25,name:"锰",relativeAtomicMass:54.938}, Fe:{index:26,name:"铁",relativeAtomicMass:55.845}, Co:{index:27,name:"钴",relativeAtomicMass:58.9332}, Ni:{index:28,name:"镍",relativeAtomicMass:58.69}, Cu:{index:29,name:"铜",relativeAtomicMass:63.54}, Zn:{index:30,name:"锌",relativeAtomicMass:65.38}, Ga:{index:31,name:"镓",relativeAtomicMass:69.72}, Ge:{index:32,name:"锗",relativeAtomicMass:72.5}, As:{index:33,name:"砷",relativeAtomicMass:74.922}, Se:{index:34,name:"硒",relativeAtomicMass:78.9}, Br:{index:35,name:"溴",relativeAtomicMass:79.904}, Kr:{index:36,name:"氪",relativeAtomicMass:83.8}, Rb:{index:37,name:"铷",relativeAtomicMass:85.467}, Sr:{index:38,name:"锶",relativeAtomicMass:87.62}, Y:{index:39,name:"钇",relativeAtomicMass:88.906}, Zr:{index:40,name:"锆",relativeAtomicMass:91.22}, Nb:{index:41,name:"铌",relativeAtomicMass:92.9064}, Mo:{index:42,name:"钼",relativeAtomicMass:95.94}, Tc:{index:43,name:"锝",relativeAtomicMass:97.907}, Ru:{index:44,name:"钌",relativeAtomicMass:101.1}, Rh:{index:45,name:"铑",relativeAtomicMass:102.906}, Pd:{index:46,name:"钯",relativeAtomicMass:106.42}, Ag:{index:47,name:"银",relativeAtomicMass:107.868}, Cd:{index:48,name:"镉",relativeAtomicMass:112.41}, In:{index:49,name:"铟",relativeAtomicMass:114.82}, Sn:{index:50,name:"锡",relativeAtomicMass:118.6}, Sb:{index:51,name:"锑",relativeAtomicMass:121.7}, Te:{index:52,name:"碲",relativeAtomicMass:127.6}, I:{index:53,name:"碘",relativeAtomicMass:126.905}, Xe:{index:54,name:"氙",relativeAtomicMass:131.3}, Cs:{index:55,name:"铯",relativeAtomicMass:132.905}, Ba:{index:56,name:"钡",relativeAtomicMass:137.33}, La:{index:57,name:"镧",relativeAtomicMass:138.9}, Ce:{index:58,name:"铈",relativeAtomicMass:140.1}, Pr:{index:59,name:"镨",relativeAtomicMass:140.9}, Nd:{index:60,name:"钕",relativeAtomicMass:144.2}, Pm:{index:61,name:"钷",relativeAtomicMass:147}, Sm:{index:62,name:"钐",relativeAtomicMass:150.3}, Eu:{index:63,name:"铕",relativeAtomicMass:151.96}, Gd:{index:64,name:"钆",relativeAtomicMass:157.25}, Tb:{index:65,name:"铽",relativeAtomicMass:158.9}, Dy:{index:66,name:"镝",relativeAtomicMass:162.5}, Ho:{index:67,name:"钬",relativeAtomicMass:164.9}, Er:{index:68,name:"铒",relativeAtomicMass:167.2}, Tm:{index:69,name:"铥",relativeAtomicMass:168.9}, Yb:{index:70,name:"镱",relativeAtomicMass:173.04}, Lu:{index:71,name:"镥",relativeAtomicMass:174.967}, Hf:{index:72,name:"铪",relativeAtomicMass:178.4}, Ta:{index:73,name:"钽",relativeAtomicMass:180.947 }, W:{index:74,name:"钨",relativeAtomicMass:183.8}, Re:{index:75,name:"铼",relativeAtomicMass:186.207}, Os:{index:76,name:"锇",relativeAtomicMass:190.2}, Ir:{index:77,name:"铱",relativeAtomicMass:192.2}, Pt:{index:78,name:"铂",relativeAtomicMass:195.08}, Au:{index:79,name:"金",relativeAtomicMass:196.967}, Hg:{index:80,name:"汞",relativeAtomicMass:200.5}, Tl:{index:81,name:"铊",relativeAtomicMass:204.3}, Pb:{index:82,name:"铅",relativeAtomicMass:207.2}, Bi:{index:83,name:"铋",relativeAtomicMass:208.98}, Po:{index:84,name:"钋",relativeAtomicMass:209}, At:{index:85,name:"砹",relativeAtomicMass:201}, Rn:{index:86,name:"氡",relativeAtomicMass:222}, Fr:{index:87,name:"钫",relativeAtomicMass:223}, Ra:{index:88,name:"镭",relativeAtomicMass:226.03}, Ac:{index:89,name:"锕",relativeAtomicMass:227}, Th:{index:90,name:"钍",relativeAtomicMass:232.0}, Pa:{index:91,name:"镤",relativeAtomicMass:231.03588}, U:{index:92,name:"铀",relativeAtomicMass:238.0}, Np:{index:93,name:"镎",relativeAtomicMass:237.05}, Pu:{index:94,name:"钚",relativeAtomicMass:244.06}, Am:{index:95,name:"镅",relativeAtomicMass:243}, Cm:{index:96,name:"锔",relativeAtomicMass:247}, Bk:{index:97,name:"锫",relativeAtomicMass:247}, Cf:{index:98,name:"锎",relativeAtomicMass:251}, Es:{index:99,name:"锿",relativeAtomicMass:252.08}, Fm:{index:100,name:"镄",relativeAtomicMass:257.10}, Md:{index:101,name:"钔",relativeAtomicMass:258.10}, No:{index:102,name:"锘",relativeAtomicMass:259.10}, Lr:{index:103,name:"铹",relativeAtomicMass:262}, Rf:{index:104,name:"𬬻",relativeAtomicMass:261.11}, Db:{index:105,name:"𬭊",relativeAtomicMass:262.11}, Sg:{index:106,name:"𬭳",relativeAtomicMass:263.12}, Bh:{index:107,name:"𬭛",relativeAtomicMass:264.12}, Hs:{index:108,name:"𬭶",relativeAtomicMass:273}, Mt:{index:109,name:"鿏",relativeAtomicMass:268}, Ds:{index:110,name:"𫟼",relativeAtomicMass:269}, Rg:{index:111,name:"𬬭",relativeAtomicMass:272}, Cn:{index:112,name:"鿔",relativeAtomicMass:277}, Nh:{index:113,name:"鿭",relativeAtomicMass:278}, Fl:{index:114,name:"𫓧",relativeAtomicMass:289}, Mc:{index:115,name:"镆",relativeAtomicMass:288}, Lv:{index:116,name:"𫟷",relativeAtomicMass:289}, Ts:{index:117,name:"鿬",relativeAtomicMass:291}, Og:{index:118,name:"鿫",relativeAtomicMass:294} } } } </script> <!-- <script> $(function(){ var $td = $("td"); var $info = $(".info"); var data; $.ajax({ type:"get", url:"@/views/js/elements.json", async:true, success:function(d){ data = d; } }); $td.mouseenter(function(e){ $(this).mousemove(function(e){ mousex = e.clientX; mousey = e.clientY; var $tdCont = $(this).text(); if($tdCont!= ""){ $(this).addClass("active"); } for(var attr in data){ var title = data[attr].name; if(title == $tdCont){ $info.css("display","block"); $info.find("h3").html("<"+title+">"); $info.find("p").html(data[attr].value); if(mousex > ($(window).width()- $info.width()-10)){ $info.offset({left:mousex - $info.width()-10,top:mousey+10}) }else{ $info.offset({left:mousex +10,top:mousey+10}) } } } }) }) $td.mouseleave(function(){ $(this).removeClass("active"); $info.hide(); }) }) </script> --> <style lang="less"> @labelWidth:60px; @fontSize:12px; @htmlColor:#81d183; @headColor:#6575d3; @inlineColor:#d1d157; @blockColor:#d17d47; @formColor:#55d157; @titleColor:#8591d3; @tableColor:#d17d57; @menuColor:#d1d1d3; @inlineBlockColor:#d17dd3; @blueColor:#bff6f9; html{ font-family: "microsoft yahei"; } body{ width: 100%; height:100%; overflow: hidden; background:#1C1D26; } .blueColor{ background-color:@blueColor; } li{list-style: none;color: #fff;} .main{ margin:50px 0; } .active{ opacity: 1; box-shadow: 1px 1px 5px #fff ; } a{ text-decoration: none; color:#FF8215 ; } .info{ background:#fff; box-shadow: 1px 1px 5px #000; width: auto; float: left; padding: 10px; border-radius: 10px; position: absolute; display: none; } table{ border: 0; margin: 0 auto; tr{ td{ width:@labelWidth; height:@labelWidth; border-radius: 10px; text-align: center; border:none; font-size: @fontSize; word-break: break-all; opacity: 0.7; position: relative; } } } .htmlColor{ background:@htmlColor; } .tableColor{ background:@tableColor; } .headColor{ background: @headColor; } .inlineColor{ background:@inlineColor; } .titleColor{ background:@titleColor; } .blockColor{ background: @blockColor; } .formColor{ background: @formColor; } .menuColor{ background: @menuColor; } .inlineBlockColor{ background: @inlineBlockColor; } .end{ margin-top:100px; ul{ float: left; margin-right: 100px; li{ height:30px; span{ display: block; width:20px; height:20px; border-radius: 2px; float:left; margin-right: 10px; } } } } </style> <!-- <style lang="less"> html{ font-family: "microsoft yahei"; } body{ width: 100%; height:100%; overflow: hidden; background:#1C1D26; } li{list-style: none;color: #fff;} .main{ margin:50px 0; } .active{ opacity: 1; box-shadow: 1px 1px 5px #fff ; } a{ text-decoration: none; color:#FF8215 ; } .info{ background:#fff; box-shadow: 1px 1px 5px #000; width: auto; float: left; padding: 10px; border-radius: 10px; position: absolute; display: none; } table{ border: 0; margin: 0 auto; tr{ td{ width:52px; height:52px; border-radius: 10px; text-align: center; border:none; font-size:12px; word-break: break-all; opacity: 0.7; position: relative; } } } .htmlColor{ background:#81d183; } .tableColor{ background:#d17d57; } .headColor{ background:#6575d3; } .inlineColor{ background:#d1d157; } .titleColor{ background:#8591d3; } .blockColor{ background: #d17d47; } .formColor{ background: #55d157; } .menuColor{ background: #d1d1d3; } .inlineBlockColor{ background:#d17dd3; } .end{ margin-top:100px; ul{ float: left; margin-right: 100px; li{ height:30px; span{ display: block; width:20px; height:20px; border-radius: 2px; float:left; margin-right: 10px; } } } } </style> -->