123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 |
- <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"/>
- <meta name="format-detection" content="telephone=no,address=no,email=no" />
- <meta name="mobileOptimized" content="width" />
- <meta name="handheldFriendly" content="true" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <meta name="description" content="" />
- <meta name="keywords" content=""/>
- <script>
- ;(function() {
- var docEl = document.documentElement,
- resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
- clientWidth = docEl.clientWidth;
- s();
- window.addEventListener(resizeEvt, s, false);
- function s() {
- docEl.style.fontSize = 50.0 * (clientWidth / 375) + 'px';
- }
- })();
- </script>
- <script>
- var _ua = navigator.userAgent;
- if (!!_ua.match(/.*OS\s([\d_]+)/) || !!_ua.match(/(Android)\s+([\d.]+)/)) {
- document.write('<style>body{min-width:320px;min-height:320px;}</style>');
- }
- </script>
- <link rel="stylesheet" type="text/css" href="normalize.css">
- <style type="text/css" media="screen">
- body, html{ background-color: #f6f6f8; }
- h6,p,div,a,ul,li,h5{margin: 0;padding: 0;}
- h6,p,h5{ line-height: 1.5; }
- ul,li{ list-style: none; }
- a, a:hover{ text-decoration: none; color: #333; }
- .img-box{ width: 100%; }
- .elli{ overflow: hidden; white-space: nowrap; max-width: 100%; text-overflow: ellipsis }
- #bank-list{ margin: 4px; padding: 0; overflow: hidden; background-color: #fff; border-radius: 4px;}
- #bank-list li{ width: 33.3%; height: 115px; float: left; text-align: center;}
- #bank-list li a{ display: block; }
- #bank-list li .img-box{ width: 46px; height: 46px; margin: 16px auto 0;overflow: hidden;}
- #bank-list li h6{ font-size: 14px;font-weight: 500;}
- #bank-list li p{ font-size: 12px; color: #999;}
- #creditcard-list{ background-color: #fff; margin: 0 4px 10px; padding:0 10px; border-radius: 4px;}
- #creditcard-list>h6{ height: 36px; line-height: 36px; font-size: 16px;color:#333;font-weight: 500;border-bottom: 1px solid #ddd; }
- #creditcard-list ul li{overflow: hidden;line-height: 0; height: 90px; position: relative; border-bottom: 1px solid #ddd;}
- #creditcard-list ul li a{display: block; font-size: 0; margin-top: 10px;}
- #creditcard-list ul li .img-box{display: inline-block; vertical-align: top; width: 108px; height: 68px; overflow: hidden; border-radius: 4px; margin-right: 10px;}
- #creditcard-list ul li .intro{ display: inline-block; color: #333; margin-top: -2px; font-size: 14px;}
- #creditcard-list ul li h5{ font-size: 16px; color: #333; font-weight: 500; }
- #creditcard-list ul li p{ font-size: 12px; color: #666; }
- #creditcard-list ul li em{display: inline-block; width: auto; height: 18px; line-height: 18px; border: #3993ff solid 1px; color: #3993ff;padding: 0 10px; border-radius: 4px; margin-right: 10px; margin-top: 4px;}
- @media screen and (max-width: 415px) {#creditcard-list ul li .intro{ width: 68%; } }
- @media screen and (max-width: 375px) {#creditcard-list ul li .intro{ width: 64%; } }
- @media screen and (max-width: 320px) {#creditcard-list ul li .intro{ width: 58%; } }
- @media (-webkit-min-device-pixel-ratio: 2){ #creditcard-list>h6, #creditcard-list ul li{ border-width: 0.5px;}}
- </style>
- </head>
- <body>
- <ul id="bank-list"></ul>
- <div id="creditcard-list">
- <h6>热门卡片</h6>
- <ul></ul>
- </div>
- <script src="axios.min.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- var data = [], html = '', container = document.querySelector('#bank-list');
- axios.get('/api/product/hotcreditcardlist')
- .then(function (res) {
- if (res.data.errno === '0') {
- data = res.data.rst.data.list;
- if (data.length > 0) {
- for (var i = 0; i < data.length; i++) {
- html += '<li class="list-item"><a href="'+ data[i].url +'"> <div class="img-box"><img src="'+ data[i].icon +'"></div> <h6 class="elli">'+ data[i].name +'</h6> <p class="elli">'+ data[i].desc +'</p> </a></li>'
- }
- }
- container.innerHTML = html;
- }
- })
- .catch(function (error) {
- console.log(error);
- });
- var list = [], context = '', containerList = document.querySelector('#creditcard-list ul'), keyData = [], str = '';
- axios.get('/api/product/creditcardlist')
- .then(function (res) {
- if (res.data.errno === '0') {
- list = res.data.rst.data.list;
- if (list.length > 0) {
- for (var n = 0; n < list.length; n++) {
- keyData = list[n].keywords;
- console.log(keyData);
- if (keyData.length > 0) {
- str = "";
- for (var j = 0; j < keyData.length; j++) {
- str += '<em> '+ keyData[j] +' </em>'
- }
- }
- context += '<li><a href="'+ list[n].url +'"><div class="img-box"><img src="'+ list[n].card_icon +'"></div><div class="intro"><h5 class="elli">'+ list[n].name +'</h5><p class="elli">'+ list[n].desc +'</p><p class="elli">'+ str +'</p></div></a></li>'
- }
- }
- containerList.innerHTML = context;
- }
- })
- .catch(function (error) {
- console.log(error);
- });
- </script>
- </body>
- </html>
|