Bladeren bron

补充加优化

ming 1 jaar geleden
bovenliggende
commit
e0ebf86ff5

+ 151 - 2
assets/css/home.css

@@ -269,11 +269,16 @@
 .menu ul li:hover,
 .menuactive,
 .menuactive2 {
-    border-bottom: 4px solid #1D2088;
+    border-bottom: 4px solid #639BFF;
+    font-weight: 700;
+}
+.menu ul li:hover {
+    border-bottom: 4px solid #639BFF;
     font-weight: 700;
 }
 
 
+
 /* .copyrigt-text {
     text-align: center;
     margin-top: 10px;
@@ -281,4 +286,148 @@
 
 .nav-widget a {
     color: #333;
-} */
+} */
+
+@-webkit-keyframes go {
+    form {
+        bottom: 10%;
+        opacity: 1;
+    }
+    to {
+        bottom: 7%;
+        opacity: 0.1;
+    }
+}
+
+@keyframes go {
+    form {
+        bottom: 10%;
+        opacity: 1;
+    }
+    to {
+        bottom: 7%;
+        opacity: 0.5;
+    }
+}
+
+/* 首页视频部分 */
+.video-section {
+    overflow: hidden;
+    width: 100%;
+    height: 100vh;
+    background:pink;
+    position: relative;
+    .video-des{
+        color:#fff;
+        font-family:AlibabaPuHuiTi-Medium;
+        .des1{
+            position:absolute;
+            top:25%;
+            width:100%;
+            text-align:center;
+            font-size:36px;
+            p{
+                width:95%;
+                margin:0 auto
+            }
+            span{
+                font-size:60px
+            }
+        }
+        .desCom{
+            text-align:center;
+            position:absolute;
+            
+            p{
+                font-size:30px;
+               
+            }
+            span{
+                font-size:24px;
+                border:1px solid #ccc;
+                border-radius:24px;
+                padding:0 20px;
+                margin-top:10px;
+            }
+
+        }
+
+    }
+    
+    .go_down {
+        display: block;
+        width: 60px;
+        height: 60px;
+        line-height: 40px;
+        background-image: url(../img/home/goDownArrow.png);
+        background-repeat: no-repeat;
+        background-position: 0 100%;
+        position: absolute;
+        left: 50%;
+        margin-left: -30px;
+        bottom: 8%;
+        z-index: 30;
+        width: 75px;
+        height: 80px;
+        -webkit-animation: go 0.5s linear 0s infinite alternate;
+        animation: go 0.5s linear 0s infinite alternate;
+        cursor: pointer;
+        transition: all .5s;
+    }
+    .go_down:hover {
+        -webkit-animation: none;
+        opacity: 1;
+    }
+}
+
+@media (max-width: 1500px) {
+    .video-section {
+        overflow: hidden;
+        width: 100%;
+        height: 100vh;
+        background:pink;
+        position: relative;
+        .video-des{
+            color:#fff;
+            font-family:AlibabaPuHuiTi-Medium;
+            .des1{
+                position:absolute;
+                top:25%;
+                width:100%;
+                text-align:center;
+                font-size:28px;
+                p{
+                    width:95%;
+                    margin:0 auto
+                }
+                span{
+                    font-size:40px
+                }
+            }
+            .desCom{
+                text-align:center;
+                position:absolute;
+                
+                p{
+                    font-size:20px;
+                   
+                }
+                span{
+                    font-size:18px;
+                    border:1px solid #ccc;
+                    border-radius:24px;
+                    padding:0 20px;
+                    margin-top:10px;
+                }
+    
+            }
+    
+        }
+    }
+
+
+
+    
+    
+}
+

+ 4 - 2
assets/css/style.css

@@ -838,7 +838,9 @@
                     left: -34px;
                 }
             }
-            
+            header .mainmenu-area .main-menu .menu-items ul li:hover{
+                border-bottom:4px solid #639BFF
+            }
             header .mainmenu-area .main-menu .menu-items ul li:hover a {
                 color: #639BFF;
             }
@@ -1247,7 +1249,7 @@
                 top: 0;
                 left: 0;
                 right: 0;
-                /* background: rgba(43, 47, 66, .9); */
+                background: rgba(43, 47, 66, .9);
                 -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
                 box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04);
                 z-index: 99;

BIN
assets/img/home/goDownArrow.png


BIN
assets/video/home-video.mp4


BIN
assets/video/home-video2.mp4


BIN
assets/video/home-video3.mp4


BIN
assets/video/home-video4.mp4


+ 6 - 2
headerNav.html

@@ -90,7 +90,7 @@
                 }
                 $(".menu-items ul li").hover(function() {
                   
-                    $(this).addClass("menuactive").siblings().removeClass("menuactive");
+                    // $(this).addClass("menuactive").siblings().removeClass("menuactive");
                     if ($(this).find(".submenu")) {
                         console.log(1)
                         $(".erMenu>div>.erMenuList").remove()
@@ -106,7 +106,11 @@
                         $(".erMenu").fadeOut()
                     }
                 });
-                $(".menu-items ul li").click(function() {})
+                $(".menu-items ul li").click(function() {
+                        // $(this).addClass("menuactive")
+                   
+                   
+                })
                 $(".erMenu").hover(function() {
 
                 }, function() {

+ 71 - 42
index.html

@@ -60,18 +60,43 @@
         </header>
         <!--====== HEADER END ======-->
 
+        <div class="video-section" >
+            <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;" poster="assets/img/banner/111.png">
+                <source src="assets/video/home-video4.mp4" type="video/mp4">
+            </video>
+            <div class="video-des">
+                <div class="des1">
+                    <p>围绕行业细分,累计服务超过 <span>5000</span> 家企业,近<span> 10万 </span>个用户,平台生态高效、健康</p>
+                </div>
+                <div class="des2 desCom" style="top:43%; left:0;width:100%;text-align:center">
+                    <p>核心价值观</p>
+                    <span>一起梦想,一起成长,一起分享</span>
+                    
+                </div>
+                <div class="des3 desCom" style="top:65%; left:20%;">
+                    <p>企业使命</p>
+                    <span>用数字化手段助力客户融入数智时代</span>
+                </div>
+                <div class="des4 desCom" style="top:65%; right:25%;">
+                    <p>企业愿景</p>
+                    <span>成为智慧数字产业的领跑者</span>
+                </div>
+            </div>
+            <span class="go_down"></span>
+        </div>
+
 
         <section v-for="(list,ind) in homeList">
+
+
+            
             <!-- 首页轮播 -->
             <!--====== BANNER SECTION START ======-->
-            <div class="banner-section">
+            <!-- <div class="banner-section">
                 <div id="shutter" class="shutter" v-if="list.title === '幻灯片'">
-                    <!-- <img style="min-width: 100%;" :src="homeList[0].content[0].picture" alt=""> -->
                     <div class="shutter-img">
                         <a href="#" v-for="con in homeList[0].content">
                             <div class="animate-img pc" style="background-size: cover;background-position: left top;background-image:url(assets/img/banner/111.png)">
-                            <!-- <div class="animate-img pc" :style="{backgroundImage:'url('+con.picture+')'}" style="background-size: cover;background-position: left top;"> -->
-                                <!-- <img style="min-width: 100%;" :src="con.picture" alt=""> -->
                             </div>
                             <div class="animate-img mobile">
                                 <img style="min-width: 100%;" :src="con.picture" alt="">
@@ -82,11 +107,8 @@
                         <li class="prev"></li>
                         <li class="next"></li>
                     </ul>
-                    <!-- <div id="videoDiv">
-                        <button id="videoBtn">点击观看视频</button>
-                    </div> -->
                 </div>
-            </div>
+            </div> -->
             <!--====== BANNER SECTION END ======-->
 
             <!--====== WHYUS SECTION START ======-->
@@ -255,20 +277,27 @@
     <script src="assets/summernote/plugin/jquery-blinds-player/js/shutter.js"></script>
 
     <script>
-        //百叶窗轮播
         $(function() {
-            setTimeout(() => {
-                    $('#shutter').shutter({
-                        // shutterW: 1000, // 容器宽度
-                        // shutterH: 358, // 容器高度
-                        isAutoPlay: true, // 是否自动播放
-                        playInterval: 3000, // 自动播放时间
-                        curDisplay: 3, // 当前显示页
-                        fullPage: false // 是否全屏展示
-                    })
-                }, 1000)
-                // $('#footer').load("./footer.html");
             $('#headerNav').load("./headerNav.html");
+
+           
+
+            var $wh=$(window).height();
+            $('.go_down').click(function(e) {
+                $('html,body').animate({scrollTop:$wh},700);
+            });
+
+            // setTimeout(() => {
+            //         $('#shutter').shutter({
+            //             // shutterW: 1000, // 容器宽度
+            //             // shutterH: 358, // 容器高度
+            //             isAutoPlay: true, // 是否自动播放
+            //             playInterval: 3000, // 自动播放时间
+            //             curDisplay: 3, // 当前显示页
+            //             fullPage: false // 是否全屏展示
+            //         })
+            //     }, 1000)
+                $('#footer').load("./footer.html");
         })
 
         var app = new Vue({
@@ -305,28 +334,28 @@
             methods: {
 
             },
-            watch: {
-                screenWidth(val) {
-                    var videoBtn = document.getElementById('videoBtn')
-                    var widthNum = val / 8;
-                    var heightNum = val / 32;
-                    var fontSizeNum = val / 96;
-                    var bottomNum = val / 47;
-
-                    if (widthNum >= 150) {
-                        videoBtn.style.left = (val / 2) - (widthNum / 2) + "px"
-                        videoBtn.style.width = widthNum + "px"
-                    } else {
-                        videoBtn.style.left = (val / 2) - (150 / 2) + "px"
-                        videoBtn.style.width = "150px"
-                    }
-
-                    heightNum >= 30 ? videoBtn.style.height = heightNum + "px" : videoBtn.style.height = "30px"; //按钮高度自适应
-                    fontSizeNum >= 13 ? videoBtn.style.fontSize = fontSizeNum + "px" : videoBtn.style.fontSize = "13px"; //按钮中字体自适应
-
-                    videoBtn.style.display = "inline"
-                }
-            },
+            // watch: {
+            //     screenWidth(val) {
+            //         var videoBtn = document.getElementById('videoBtn')
+            //         var widthNum = val / 8;
+            //         var heightNum = val / 32;
+            //         var fontSizeNum = val / 96;
+            //         var bottomNum = val / 47;
+
+            //         if (widthNum >= 150) {
+            //             videoBtn.style.left = (val / 2) - (widthNum / 2) + "px"
+            //             videoBtn.style.width = widthNum + "px"
+            //         } else {
+            //             videoBtn.style.left = (val / 2) - (150 / 2) + "px"
+            //             videoBtn.style.width = "150px"
+            //         }
+
+            //         heightNum >= 30 ? videoBtn.style.height = heightNum + "px" : videoBtn.style.height = "30px"; //按钮高度自适应
+            //         fontSizeNum >= 13 ? videoBtn.style.fontSize = fontSizeNum + "px" : videoBtn.style.fontSize = "13px"; //按钮中字体自适应
+
+            //         videoBtn.style.display = "inline"
+            //     }
+            // },
         });
     </script>
 </body>

+ 1 - 4
product/index.html

@@ -37,10 +37,7 @@
             margin: none;
         }
         
-        ul {
-            list-style-type: disc;
-            margin: 5px 0 5px 20px;
-        }
+     
         
         table {
             margin-top: 10px;