暂存

view/peko/home/css/index.css

@@ -1,4 +1,7 @@
 @media screen and (min-width: 769px) {
+  .h5 {
+    display: none;
+  }
   body,
   html {
     width: 100%;
@@ -8,11 +11,13 @@
   }
   body .pc,
   html .pc {
-    width: 100%;
+    width: 25.6rem;
     height: 100%;
     background: url(../images/pcBg.png) no-repeat center;
     background-size: 25.6rem 14.4rem;
     position: relative;
+    margin: 0 auto 0;
+    display: block;
   }
   body .pc .header,
   html .pc .header {
@@ -89,4 +94,156 @@
     height: 0.4rem;
     vertical-align: middle;
   }
+  body .pc .pcMarket1,
+  html .pc .pcMarket1 {
+    width: 9.32rem;
+    height: 9.10667rem;
+    position: absolute;
+    left: 4.61333rem;
+    top: 2.77333rem;
+  }
+  body .pc .pcText,
+  html .pc .pcText {
+    width: 5.30667rem;
+    height: 1.6rem;
+    position: absolute;
+    left: 14.56rem;
+    top: 5.38667rem;
+  }
+  body .pc .pcIos,
+  html .pc .pcIos {
+    width: 3.38667rem;
+    height: 0.77333rem;
+    position: absolute;
+    left: 14.54667rem;
+    top: 8.13333rem;
+  }
+  body .pc .pcAnd,
+  html .pc .pcAnd {
+    width: 3.38667rem;
+    height: 0.77333rem;
+    position: absolute;
+    left: 14.54667rem;
+    top: 9.30667rem;
+  }
+  body .pc .code,
+  html .pc .code {
+    width: 2.13333rem;
+    height: 2.21333rem;
+    position: absolute;
+    left: 18.30667rem;
+    top: 8rem;
+  }
+  body .pc .bottom,
+  html .pc .bottom {
+    text-align: center;
+    color: #B7B6BE;
+    font-size: 0.21333rem;
+    width: 100%;
+    padding: 0.38667rem 0;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    background: #0E0B24;
+    min-height: 1rem;
+  }
+  body .pc .bottom p,
+  html .pc .bottom p {
+    margin-bottom: 0.21333rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .pc {
+    display: none;
+  }
+  body,
+  html {
+    width: 100%;
+    height: 100%;
+    background: #0E0B24;
+  }
+  body .header,
+  html .header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1.2rem;
+    box-sizing: border-box;
+    padding: 0 0.53333rem;
+    margin: 0.26667rem auto 0;
+  }
+  body .header .line,
+  html .header .line {
+    width: 90%;
+    height: 0.02667rem;
+    background: #fff;
+    opacity: .3;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
+  body .header .logo,
+  html .header .logo {
+    display: block;
+    width: 0.85333rem;
+    height: 0.85333rem;
+    margin-right: 0.21333rem;
+    float: left;
+  }
+  body .header .name,
+  html .header .name {
+    font-size: 0.53333rem;
+    color: #FFFFFF;
+    font-weight: 800;
+    float: left;
+    margin-top: 0.08rem;
+  }
+  body .header .diamound,
+  html .header .diamound {
+    width: 1.86667rem;
+    height: 0.74667rem;
+    line-height: 0.74667rem;
+    box-sizing: border-box;
+    border: 1px solid #fff;
+    vertical-align: middle;
+    color: #fff;
+    font-size: 0.32rem;
+    float: right;
+    margin-top: 0.05333rem;
+    margin-right: 1.06667rem;
+    text-align: center;
+    border-radius: 0.74667rem;
+  }
+  body .header .diamound img,
+  html .header .diamound img {
+    vertical-align: middle;
+    width: 0.50667rem;
+    height: 0.42667rem;
+    display: inline-block;
+  }
+  body .header .more,
+  html .header .more {
+    float: right;
+    width: 0.53333rem;
+    height: 0.53333rem;
+    display: block;
+    margin-top: 0.16rem;
+  }
+  body .h5,
+  html .h5 {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  body .h5 .page1,
+  html .h5 .page1 {
+    width: 100%;
+    height: 100%;
+    background: url(../images/h51.png) no-repeat center;
+    background-size: 100% 21.65333rem;
+  }
 }

view/peko/home/css/index.scss

@@ -12,6 +12,10 @@
 // pc端
 @media screen and (min-width:769px) {
 
+    .h5 {
+        display: none;
+    }
+
     body,
     html {
         width: 100%;
@@ -20,11 +24,13 @@
         font-family: Avenir, Avenir;
 
         .pc {
-            width: 100%;
+            width: px2rem(1920);
             height: 100%;
             background: url(../images/pcBg.png) no-repeat center;
             background-size: px2rem(1920) px2rem(1080);
             position: relative;
+            margin: 0 auto 0;
+            display: block;
 
             .header {
                 width: 100%;
@@ -100,9 +106,160 @@
                     }
                 }
             }
+
+            .pcMarket1 {
+                width: px2rem(699);
+                height: px2rem(683);
+                position: absolute;
+                left: px2rem(346);
+                top: px2rem(208);
+            }
+
+            .pcText {
+                width: px2rem(398);
+                height: px2rem(120);
+                position: absolute;
+                left: px2rem(1092);
+                top: px2rem(404);
+            }
+
+            .pcIos {
+                width: px2rem(254);
+                height: px2rem(58);
+                position: absolute;
+                left: px2rem(1091);
+                top: px2rem(610);
+            }
+
+            .pcAnd {
+                width: px2rem(254);
+                height: px2rem(58);
+                position: absolute;
+                left: px2rem(1091);
+                top: px2rem(698);
+            }
+
+            .code {
+                width: px2rem(160);
+                height: px2rem(166);
+                position: absolute;
+                left: px2rem(1373);
+                top: px2rem(600);
+            }
+
+            .bottom {
+                text-align: center;
+                color: #B7B6BE;
+                font-size: px2rem(16);
+                width: 100%;
+                padding: px2rem(29) 0;
+                position: fixed;
+                left: 0;
+                bottom: 0;
+                background: #0E0B24;
+                min-height: 1rem;
+
+                p {
+                    margin-bottom: px2rem(16);
+                }
+            }
         }
     }
 }
 
 // 移动端
-@media screen and (max-width:768px) {}
+@media screen and (max-width:768px) {
+    .pc {
+        display: none;
+    }
+
+    body,
+    html {
+        width: 100%;
+        height: 100%;
+        background: #0E0B24;
+
+        .header {
+            position: fixed;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: px2rem(90);
+            box-sizing: border-box;
+            padding: 0 px2rem(40);
+            margin: px2rem(20) auto 0;
+            .line{
+                width: 90%;
+                height: px2rem(2);
+                background: #fff;
+                opacity: .3;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 0;
+            }
+
+            .logo {
+                display: block;
+                width: px2rem(64);
+                height: px2rem(64);
+                margin-right: px2rem(16);
+                float: left;
+            }
+
+            .name {
+                font-size: 0.53333rem;
+                color: #FFFFFF;
+                font-weight: 800;
+                float: left;
+                margin-top: px2rem(6);
+            }
+
+            .diamound {
+                width: px2rem(140);
+                height: px2rem(56);
+                line-height: px2rem(56);
+                box-sizing: border-box;
+                border: 1px solid #fff;
+                vertical-align: middle;
+                color: #fff;
+                font-size: px2rem(24);
+                float: right;
+                margin-top: px2rem(4);
+                margin-right: px2rem(80);
+                text-align: center;
+                border-radius: px2rem(56);
+
+                img {
+                    vertical-align: middle;
+                    width: px2rem(38);
+                    height: px2rem(32);
+                    display: inline-block;
+                }
+            }
+
+            .more {
+                float: right;
+                width: px2rem(40);
+                height: px2rem(40);
+                display: block;
+                margin-top: px2rem(12);
+            }
+        }
+
+        .h5 {
+            display: block;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+
+            .page1 {
+                width: 100%;
+                height: 100%;
+                background: url(../images/h51.png) no-repeat center;
+                background-size: 100% px2rem(1624);
+                
+            }
+        }
+    }
+}

view/peko/home/index.html

@@ -12,7 +12,7 @@
 </head>
 
 <body>
-    <!-- pc -->
+    <!-- pc端 -->
     <div class="pc">
         <!-- 头部 -->
         <div class="header">
@@ -26,6 +26,45 @@
                 <img src="./images/diamond.png" alt=""> 储值
             </div>
         </div>
+        <!-- 市场图 -->
+        <img src="./images/pcMarket1.png" alt="" class="pcMarket1">
+        <!-- 页面文案 -->
+        <img src="./images/pcText.png" alt="" class="pcText">
+        <!-- 苹果下载 -->
+        <img src="./images/pcIos.png" alt="" class="pcIos">
+        <!-- 安卓下载 -->
+        <img src="./images/pcAnd.png" alt="" class="pcAnd">
+        <!-- 二维码 -->
+        <img src="./images/pcCode.png" alt="" class="code">
+        <!-- 底部 -->
+        <div class="bottom">
+            <p>Hongkong Han Fei Technology Co.,Limited</p>
+            <p>CR No:3040005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN</p>
+        </div>
+    </div>
+    <!-- h5端 -->
+    <div class="h5">
+        <!-- 头部 -->
+        <div class="header">
+            <!-- logo -->
+            <img src="./images/logo.png" alt="" class="logo">
+            <!-- app -->
+            <div class="name">PIKO</div>
+            <!-- 更多 -->
+            <img src="./images/more.png" alt="" class="more">
+            <!-- 储值 -->
+            <div class="diamound">
+                <img src="./images/diamond.png" alt=""> 储值
+            </div>
+            <!-- 线 -->
+            <div class="line"></div>
+        </div>
+        <!-- 页面1 -->
+        <div class="page1">
+            <img src="./images/pageTxte1.png" alt="" class="pageTxte1">
+            <img src="./images/h5And.png" alt="" class="h5And">
+            <img src="./images/h5Ios.png" alt="" class="h5Ios">
+        </div>
     </div>
 
     <script src="../common/js/flexible.js"></script>