Bläddra i källkod

修改特炫宣传页样式

promise 5 år sedan
förälder
incheckning
51e80a1b19

BIN
2019专题/特炫宣传页/src/img/code-wrap.png


+ 0 - 0
2019专题/特炫宣传页/src/img/h5/Android.png → 2019专题/特炫宣传页/src/img/h5/Android-logo.png


BIN
2019专题/特炫宣传页/src/img/h5/header-qrcode.png


+ 0 - 0
2019专题/特炫宣传页/src/img/h5/iPhone.png → 2019专题/特炫宣传页/src/img/h5/iPhone-logo.png


BIN
2019专题/特炫宣传页/src/img/pc/background-pc.png


BIN
2019专题/特炫宣传页/src/img/pc/caption.png


BIN
2019专题/特炫宣传页/src/img/pc/easy.png


BIN
2019专题/特炫宣传页/src/img/pc/game.png


BIN
2019专题/特炫宣传页/src/img/pc/img10.png


BIN
2019专题/特炫宣传页/src/img/pc/img11.png


BIN
2019专题/特炫宣传页/src/img/pc/img12.png


BIN
2019专题/特炫宣传页/src/img/pc/img13.png


BIN
2019专题/特炫宣传页/src/img/pc/img6.png


BIN
2019专题/特炫宣传页/src/img/pc/img7.png


BIN
2019专题/特炫宣传页/src/img/pc/img8.png


BIN
2019专题/特炫宣传页/src/img/pc/img9.png


BIN
2019专题/特炫宣传页/src/img/pc/quality.png


BIN
2019专题/特炫宣传页/src/img/qrcode.png


+ 1 - 3
2019专题/特炫宣传页/src/index-h5.html

@@ -19,9 +19,7 @@
     <div class="page-index">
         <header></header>
         <div class="mod-code">
-            <div class="code-wrap">
-                <img src="./img/h5/header-qrcode.png" alt="">
-            </div>
+            <div class="code-wrap"><img src="./img/qrcode.png" alt=""></div>
             <div class="btn-wrap">
                 <a href="" class="ios"></a>
                 <a href="" class="anr"></a>

+ 42 - 20
2019专题/特炫宣传页/src/index-pc.html

@@ -16,38 +16,60 @@
 </head>
 
 <body>
-    <div class="mod-hd"></div>
     <div class="page-index">
-        
-        <div class="mod-primary">
-            <div class="cont-box">
-                <h3 class="title"></h3>
-                <div class="download-wrap">
-                    <div class="code-wrap"><img src="https://w5.dwstatic.com/cdn/ka/static/img/header-qrcode.jpg?0941e374cfd5e657" alt=""></div>
-                    <div class="btn-wrap">
-                        <a href="" class="anr"></a>
-                        <a href="" class="ios"></a>
+       <div class="mod-bg"> 
+            <div class="mod-hd"></div>
+            <div class="mod-primary">
+                <div class="cont-box">
+                    <h3 class="title"></h3>
+                    <div class="download-wrap">
+                        <div class="code-wrap"><img src="./img/qrcode.png" alt=""></div>
+                        <div class="btn-wrap">
+                            <a href="" class="ios"></a>
+                            <a href="" class="anr"></a>
+                        </div>
                     </div>
                 </div>
+                <div class="cover"><img src="./img/h5/img-1.jpg" alt=""></div>
             </div>
-            <div class="cover"><img src="./img/h5/img-1.jpg" alt=""></div>
-        </div>
-        <div class="mod-quality">
-            <div class="common-title">
-                <h3 class="title">优质视频模板</h3>
-                <p>只生产有质量的模板</p>
+        </div> 
+        <div class="mod-quality-container">
+            <div class="mod-quality">
+                <div class="common-title">
+                    <h3 class="title">优质视频模板</h3>
+                    <p>只生产有质量的模板</p>
+                </div>
+                <div class="eg-img"><img src="./img/pc/img7.png" alt=""></div>
+                <div class="eg-img"><img src="./img/pc/img6.png" alt=""></div>
             </div>
-            <div class="eg-img"><img src="./img/h5/img-6.png" alt=""></div>
-            <div class="eg-img"><img src="./img/h5/img-7.jpg" alt=""></div>
         </div>
         <div class="mod-cool">
             <div class="common-title">
                 <h3 class="title">创意一键生成</h3>
                 <p>精美模板一秒变大片</p>
             </div>
-            <div class="eg-img"><img src="./img/h5/img-8.jpg" alt=""></div>
-            <div class="eg-img"><img src="./img/h5/img-9.png" alt=""></div>
+            <div class="eg-img"><img src="./img/pc/img8.png" alt=""></div>
+            <div class="eg-img"><img src="./img/pc/img9.png" alt=""></div>
+        </div>
+        <div class="mod-caption-container">
+            <div class="mod-caption">
+                <div class="common-title">
+                    <h3 class="title">AI语音转字幕</h3>
+                    <p>视频字幕一键生成</p>
+                </div>
+                <div class="eg-img"><img src="./img/pc/img10.png" alt=""></div>
+                <div class="eg-img"><img src="./img/pc/img11.png" alt=""></div>
+            </div>
         </div>
+        <div class="mod-game">
+            <div class="common-title">
+                <h3 class="title">用脸玩游戏</h3>
+                <p>体验创意人脸交互小游戏</p>
+            </div>
+            <div class="eg-img"><img src="./img/pc/img12.png" alt=""></div>
+            <div class="eg-img"><img src="./img/pc/img13.png" alt=""></div>
+        </div>
+
         <div class="mod-ft">广州市偶家科技有限公司 © 2019-2029 Duowan.com 版权所有</div>  
     </div>
     

+ 3 - 3
2019专题/特炫宣传页/src/sass/index-h5.scss

@@ -43,7 +43,7 @@ body {
         position: absolute;
         left: 0;
         top: 0;
-        background: url(../img/h5/code-bg.png) 0 / 100% no-repeat;
+        background: url(../img/code-wrap.png) 0 / 100% no-repeat;
         overflow: hidden;
         z-index: 5;
         img {
@@ -65,12 +65,12 @@ body {
             height: px2rem(131);
         }
         .anr {
-            background: url(../img/h5/Android.png)  0 / 100% no-repeat;
+            background: url(../img/h5/Android-logo.png)  0 / 100% no-repeat;
             // margin-left: px2rem(15);
             margin-top: px2rem(38);
         }
         .ios {
-            background: url(../img/h5/iPhone.png) 0 / 100% no-repeat;
+            background: url(../img/h5/iPhone-logo.png) 0 / 100% no-repeat;
             
         }
     }

+ 88 - 23
2019专题/特炫宣传页/src/sass/index-pc.scss

@@ -24,8 +24,8 @@ body {
     position: relative;
     font-size: $baseFontSize;
     font-family: $pingfan, $yahei, Helvetica, Arial, sans-serif;
-    color: #333333;
-    background: url(../img/h5/bg.jpg);
+    color: #333333;  
+    background: url(../img/pc/background-pc.png); 
 }
 
 a {
@@ -55,14 +55,17 @@ a {
     left: 70px;
 }
 .page-index {
-    width: 1200px;
-    margin: 0 auto;
     position: relative;
-    padding-top: 187px;
     
+    .mod-bg{
+        padding-top: 187px;
+        background: url(../img/h5/bg.jpg);
+    }
     .mod-primary {
         height: 780px;
         position: relative;
+        width: 1200px;
+        margin: 0 auto;
         .cover {
             width: 372px;
             height: 745px;
@@ -93,17 +96,17 @@ a {
 
         }
         .code-wrap {
-            width: 227px;
-            height: 227px;
+            width: 222px;
+            height: 222px;
             position: relative;
-            background: url(../img/pc/code-bg.png?__sprite) no-repeat;
+            background: url(../img/code-wrap.png?__sprite) no-repeat;
             z-index: 5;
             img {
                 width: 213px;
                 height: 213px;
                 position: absolute;
-                left: 7px;
-                top:7px;
+                left: 4px;
+                top: 5px;
                 border-radius: 14px;
             }
         }
@@ -118,21 +121,32 @@ a {
             }
             .anr {
                 background: url(../img/pc/Android1.png?__sprite) no-repeat;
-                margin-top: -2px;
+                margin-top: -21px;
             }
             .ios {
                 background: url(../img/pc/iPhone1.png?__sprite) no-repeat;
-                margin-top: -21px;
+                margin-top: -2px;
             }
         }
     }
+    .mod-quality-container{
+        padding:98px 0; 
+        background-color: #1c1c27;
+    }
+    .mod-caption-container{
+        margin-top:214px; 
+        padding:98px 0; 
+        background-color: #1c1c27;
+    }
     .mod-quality {
-        margin-top: 214px;
-        background: url(../img/pc/quality.png) no-repeat 0 0;
+        // margin-top: 214px;
+        width: 1200px;
+        margin: 0 auto;
+        background: url(../img/pc/quality.png) no-repeat 0 32px;
         overflow: hidden;
         position: relative;
         .eg-img {
-            margin-left: 72px;
+            // margin-left: 72px;
             float: right;
         }
         .common-title {
@@ -149,7 +163,7 @@ a {
     }
     .common-title {
         position: absolute ;
-        top: 0;
+        top: 32px;
         .title {
             font-size: 48px;
             color: #ff1e50;
@@ -181,20 +195,70 @@ a {
         }
     }
     .eg-img {
-        width: 352px;
-        height: 704px;
-        box-shadow: 0px 0px 20px 10px #232133;
+        width: 444px;
+        height: 796px;
         img {
-            width:100%;height:100%;
+            width:100%;
+            height:100%;
+        }
+    }
+    .mod-cool {       
+        width: 1200px;
+        margin: 0 auto;
+        margin-top: 214px;
+        background: url(../img/pc/easy.png) no-repeat right 32px;
+        overflow: hidden;
+        position: relative;
+        .eg-img {
+            // margin-right: 72px;
+            float: left;
+        }
+        .common-title {
+            right: 0;
+            p {
+                text-align: right;
+            }
+        }
+        .title {
+            &:after {
+                right: 55px;
+            }
+            &:before {
+                right: 0;
+            }
+        }
+    }
+    .mod-caption {
+        width: 1200px;
+        margin: 0 auto;  
+        background: url(../img/pc/caption.png) no-repeat 0 32px;
+        overflow: hidden;
+        position: relative;
+        .eg-img {
+            // margin-left: 72px;
+            float: right;
+        }
+        .common-title {
+            left: 0;
+        }
+        .title {
+            &:after {
+                left: 55px;
+            }
+            &:before {
+                left: 0;
+            }
         }
     }
-    .mod-cool {
+    .mod-game {
+        width: 1200px;
+        margin: 0 auto;
         margin-top: 214px;
-        background: url(../img/pc/desc_07.png) no-repeat top right;
+        background: url(../img/pc/game.png) no-repeat  right 32px;
         overflow: hidden;
         position: relative;
         .eg-img {
-            margin-right: 72px;
+            // margin-right: 72px;
             float: left;
         }
         .common-title {
@@ -204,6 +268,7 @@ a {
             }
         }
         .title {
+            padding-left: 46px;
             &:after {
                 right: 55px;
             }