Home Explore Help
Register Sign In
FED
/
dwweb-pc
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

修改特炫宣传页样式

promise 5 years ago
parent
bb304ae5f3
commit
51e80a1b19
22 changed files with 134 additions and 49 deletions
Unified View Show Diff Stats
  1. BIN
      2019专题/特炫宣传页/src/img/code-wrap.png
  2. 0 0
      2019专题/特炫宣传页/src/img/h5/Android-logo.png
  3. BIN
      2019专题/特炫宣传页/src/img/h5/header-qrcode.png
  4. 0 0
      2019专题/特炫宣传页/src/img/h5/iPhone-logo.png
  5. BIN
      2019专题/特炫宣传页/src/img/pc/background-pc.png
  6. BIN
      2019专题/特炫宣传页/src/img/pc/caption.png
  7. BIN
      2019专题/特炫宣传页/src/img/pc/easy.png
  8. BIN
      2019专题/特炫宣传页/src/img/pc/game.png
  9. BIN
      2019专题/特炫宣传页/src/img/pc/img10.png
  10. BIN
      2019专题/特炫宣传页/src/img/pc/img11.png
  11. BIN
      2019专题/特炫宣传页/src/img/pc/img12.png
  12. BIN
      2019专题/特炫宣传页/src/img/pc/img13.png
  13. BIN
      2019专题/特炫宣传页/src/img/pc/img6.png
  14. BIN
      2019专题/特炫宣传页/src/img/pc/img7.png
  15. BIN
      2019专题/特炫宣传页/src/img/pc/img8.png
  16. BIN
      2019专题/特炫宣传页/src/img/pc/img9.png
  17. BIN
      2019专题/特炫宣传页/src/img/pc/quality.png
  18. BIN
      2019专题/特炫宣传页/src/img/qrcode.png
  19. 1 3
      2019专题/特炫宣传页/src/index-h5.html
  20. 42 20
      2019专题/特炫宣传页/src/index-pc.html
  21. 3 3
      2019专题/特炫宣传页/src/sass/index-h5.scss
  22. 88 23
      2019专题/特炫宣传页/src/sass/index-pc.scss

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

@@ -19,9 +19,7 @@
 
     <div class="page-index">
 
     <div class="page-index">
 
         <header></header>
 
         <header></header>
 
         <div class="mod-code">
 
         <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">
 
             <div class="btn-wrap">
 
                 <a href="" class="ios"></a>
 
                 <a href="" class="ios"></a>
 
                 <a href="" class="anr"></a>
 
                 <a href="" class="anr"></a>

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

@@ -16,38 +16,60 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-    <div class="mod-hd"></div>
 
     <div class="page-index">
 
     <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>
 
                 </div>
 
+                <div class="cover"><img src="./img/h5/img-1.jpg" alt=""></div>
 
             </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>
 
-            <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>
 
         <div class="mod-cool">
 
         <div class="mod-cool">
 
             <div class="common-title">
 
             <div class="common-title">
 
                 <h3 class="title">创意一键生成</h3>
 
                 <h3 class="title">创意一键生成</h3>
 
                 <p>精美模板一秒变大片</p>
 
                 <p>精美模板一秒变大片</p>
 
             </div>
 
             </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>
 
+        <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 class="mod-ft">广州市偶家科技有限公司 © 2019-2029 Duowan.com 版权所有</div>  
     </div>
 
     </div>

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

@@ -43,7 +43,7 @@ body {
 
         position: absolute;
 
         position: absolute;
 
         left: 0;
 
         left: 0;
 
         top: 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;
 
         overflow: hidden;
 
         z-index: 5;
 
         z-index: 5;
 
         img {
 
         img {
 
@@ -65,12 +65,12 @@ body {
 
             height: px2rem(131);
 
             height: px2rem(131);
 
         }
 
         }
 
         .anr {
 
         .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-left: px2rem(15);
 
             margin-top: px2rem(38);
 
             margin-top: px2rem(38);
 
         }
 
         }
 
         .ios {
 
         .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
View File 

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