|
|
@@ -0,0 +1,247 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head lang="en">
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>4DAGE</title>
|
|
|
+ <style type="text/css">
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:visited {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ a:active {
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .header {
|
|
|
+
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ background: url('./image/pc-header.png');
|
|
|
+ margin-bottom: 48px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 1920px 80px;
|
|
|
+ background-color: rgba(15, 15, 15, 1);
|
|
|
+ background-position: center center;
|
|
|
+ padding: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .pc .header img{
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ left: -549px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .list {
|
|
|
+ margin: 0 auto;
|
|
|
+ /* min-width: 1336px; */
|
|
|
+ width: 1200px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row wrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .list .item {
|
|
|
+ width: calc(33.333% - 20px);
|
|
|
+ background-color: #333;
|
|
|
+ height: 250px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ opacity: 1;
|
|
|
+ display: grid;
|
|
|
+ }
|
|
|
+ .pc .list .item img{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .list .item .name {
|
|
|
+ padding: 19px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 22px;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #E6E6E6;
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pc .list .item:not(:nth-child(3n)) {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile .header img{
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+ .mobile .header {
|
|
|
+ height: 30px;
|
|
|
+ padding: 16px;
|
|
|
+ width: 100%;
|
|
|
+ background: url('./image/mobile-header.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile .list .item {
|
|
|
+ padding: 16px;
|
|
|
+ height: 62px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ opacity: 1;
|
|
|
+ border-bottom: 1px solid #E6E6E6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile .list .item img {
|
|
|
+ float: left;
|
|
|
+ width: 120px;
|
|
|
+ height: 62px;
|
|
|
+ margin-right: 16px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile .list .item .name {
|
|
|
+ float: left;
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div class="container" id="container">
|
|
|
+ <div class="header">
|
|
|
+ <img src="./image/logo.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="list" id="list">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ inter()
|
|
|
+ window.addEventListener('resize', inter);
|
|
|
+ const list = [{
|
|
|
+ id: 1,
|
|
|
+ sceneName: 'Song 25.41',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spc.html?m=KK-eur-ZqPBmZYOD',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/images/imagesKK-eur-ZqPBmZYOD/thumbBigImg.jpg?_43',
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ sceneName: '체스터톤스 속초',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-DERS974172&lang=en',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-DERS974172/user/thumb-1k.jpg?_=100',
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ sceneName: '東京タワー',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-kdM29Ent5&lang=zh',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-kdM29Ent5/user/thumb-1k.jpg?_=17',
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ sceneName: 'TOKYO TOWER',
|
|
|
+ webSite: 'https://mega.4dkankan.jp/index.html?m=SS-jp-ywmQVbYrHte#/',
|
|
|
+ thumb: './image/bg_banner.png',
|
|
|
+ }, {
|
|
|
+ id: 5,
|
|
|
+ sceneName: 'MICHAIL GKINIS AOYAMA',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-vJ9xY22YD&lang=en',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-vJ9xY22YD/user/thumb-1k.jpg?_=141',
|
|
|
+ }, {
|
|
|
+ id: 6,
|
|
|
+ sceneName: '関ケ原古戦場記念館',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spc.html?m=KJ-eur-H7wnhZMo5&lang=zh',
|
|
|
+ thumb: './image/bg_banner.png',
|
|
|
+ }, {
|
|
|
+ id: 7,
|
|
|
+ sceneName: '星の王子さま',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-IHHn93a23e&lang=zh',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-IHHn93a23e/user/thumb-1k.jpg?_=30',
|
|
|
+ }, {
|
|
|
+ id: 8,
|
|
|
+ sceneName: 'Proj:0519.10.30',
|
|
|
+ webSite: 'https://laser.4dkankan.com/index.html?m=SS-jOlzSJE5jV',
|
|
|
+ thumb: './image/bg_banner.png',
|
|
|
+ }, {
|
|
|
+ id: 9,
|
|
|
+ sceneName: '프레리독',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KK-eur-w9UQ3SLMh',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KK-eur-w9UQ3SLMh/user/thumb-1k.jpg?_=145',
|
|
|
+ }, {
|
|
|
+ id: 10,
|
|
|
+ sceneName: 'TOKYO CITY VIEW | SKY DECK',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-rv0wF7eYh&lang=zh',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-rv0wF7eYh/user/thumb-1k.jpg?_=53',
|
|
|
+ }, {
|
|
|
+ id: 11,
|
|
|
+ sceneName: 'TOKYO CITY VIEW | SKY DECK',
|
|
|
+ webSite: 'https://eur.4dkankan.com/spg.html?m=KJ-eur-CFvI90bafc&lang=zh',
|
|
|
+ thumb: 'https://eurs3.4dkankan.com/scene_view_data/KJ-eur-CFvI90bafc/user/thumb-1k.jpg?_=127',
|
|
|
+ }, {
|
|
|
+ id: 12,
|
|
|
+ sceneName: '旭橋',
|
|
|
+ webSite: 'https://laser.4dkankan.com/index.html?m=SS-36imHa4Sl0&lang=zh#/',
|
|
|
+ thumb: './image/bg_banner.png',
|
|
|
+ }, {
|
|
|
+ id: 13,
|
|
|
+ sceneName: '星の王子さま（户外）',
|
|
|
+ webSite: 'https://l-prince.4dkankan.jp/spg/?m=SS-tIQYvzaLf8&lang=en ',
|
|
|
+ thumb: 'https://4dkk.4dage.com/scene_view_data/SS-tIQYvzaLf8/user/thumb-1k.jpg?_=127',
|
|
|
+ }]
|
|
|
+ var listDiv = document.getElementById('list');
|
|
|
+ for (var i = 0; i < list.length; i++) {
|
|
|
+ let item = list[i]
|
|
|
+ let divcontent = document.createElement("div");
|
|
|
+ var testa = document.createElement("a");
|
|
|
+ var testDv = document.createElement("div");
|
|
|
+ var divImg = document.createElement("img");
|
|
|
+ testDv.id = "t" + i;
|
|
|
+ testDv.className = "col-lg-4 name";
|
|
|
+ testDv.className += ' col-md-6';
|
|
|
+ testDv.innerHTML = item.sceneName
|
|
|
+ divcontent.className = 'item'
|
|
|
+ divImg.src = item.thumb;
|
|
|
+ testa.appendChild(divImg);
|
|
|
+ testa.appendChild(testDv);
|
|
|
+ testa.target = '_blank'
|
|
|
+ testa.href = item.webSite;
|
|
|
+ divcontent.appendChild(testa)
|
|
|
+ listDiv.appendChild(divcontent)
|
|
|
+ }
|
|
|
+ function inter() {
|
|
|
+ setTimeout(() => {
|
|
|
+ let myType = 'pc'
|
|
|
+ if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
|
|
|
+ // 当前设备是移动设备
|
|
|
+ myType = 'mobile'
|
|
|
+ }
|
|
|
+ console.log('inter', myType)
|
|
|
+ var div = document.getElementById('container');
|
|
|
+ div.setAttribute("class", myType);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
