产品介绍 sass

liuqimichale
1 parent 36e8ecf7
Showing 12 changed files with 87 additions and 11 deletions
css/portfollo.css
css/services.css
images/ortfolio-soft-mobile.gif
images/portfolio-rnt.png
images/portfolio-rnt1.png
images/portfolio-rnt2.png
images/portfolio-rnt3.png
images/portfolio-rnt4.png
index.html
js/main.js
js/portfollo.js
portfolio.html
@@ -67,8 +67,44 @@
     height: 500px;
 }
 .ortfolio-soft-bottom-1>li:nth-of-type(1){
-    background: url("../images/ortfolio-soft-mobile.gif") no-repeat center center;
-    background-size: 100% 100%;
+    width: 50%;
+    padding-left: 100px;
+}
+.ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{
+    height: 500px;
+}
+#portfolio-rnt-wrap{
+    width: 50%;
+    height: 500px;
+    float: left;
+    background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
+    overflow: hidden;
+}
+#portfolio-rnt{
+    width: 300px;
+    height: 500px;
+    margin-left: 215px;
+    margin-top: 23px;
+}
+#portfolio-rnt .portfolio-rnt1{
+    width:100%;
+    height: 500px;
+    background: url("../images/portfolio-rnt1.png") no-repeat ;
+}
+#portfolio-rnt .portfolio-rnt2{
+    width:100%;
+    height: 500px;
+    background: url("../images/portfolio-rnt2.png") no-repeat ;
+}
+#portfolio-rnt .portfolio-rnt3{
+    width:100%;
+    height: 500px;
+    background: url("../images/portfolio-rnt3.png") no-repeat ;
+}
+#portfolio-rnt .portfolio-rnt4{
+    width:100%;
+    height: 500px;
+    background: url("../images/portfolio-rnt4.png") no-repeat ;
 }
 .ortfolio-soft-bottom-1 li:nth-of-type(2){
     padding-left: 100px;
@@ -119,7 +155,7 @@
     border-radius:50%;
 }
 .padding20-0-70{
-    padding: 20px 0 70px;
+    padding: 70px 0 70px;
 }
 /*硬件sta-----*/
 .portfolio-hardware-top{
@@ -329,3 +329,4 @@
     transition:width .8s;
     -webkit-transition:width .8s;
 }*/
+
@@ -78,7 +78,7 @@
-<div class="swiper-container">
+<div class="swiper-container" id="swiper-container-index">
     <div class="swiper-wrapper">
         <div class="swiper-slide swiper-slide-3">
             <div class="swiper-slide-main swiper-slide-main-3">
@@ -179,7 +179,7 @@
 			});
 		});
-    var mySwiper = new Swiper ('.swiper-container', {
+    var mySwiper = new Swiper ('#swiper-container-index', {
       direction: 'horizontal',
       loop: true,
       speed: 500, //设置轮播时长 可以不设置 会有个默认值
@@ -14,3 +14,24 @@ $(&#39;#portfolio-hardware-wrap li&#39;).on(&#39;click&#39;,function () {
     $('#portfolio-hardware-wrap li').eq(_index).children('div').removeClass('displaynone');
     $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
 })
+
+
+
+var mySwiper = new Swiper ('#portfolio-rnt', {
+  direction: 'horizontal',
+  loop: true,
+  speed: 500, //设置轮播时长 可以不设置 会有个默认值
+  autoplay: true,//可选选项，自动滑动
+  // 如果需要分页器
+  pagination: {
+    el: '.swiper-pagination',
+    clickable:true
+  },
+  autoplay: {
+    disableOnInteraction: false,  //点击后继续轮播(这个很重要)
+    delay: 3000,                       //自动轮播的每次的时间 可以不设置 会有个默认值
+  },
+  // 如果需要前进后退按钮
+
+
+})
@@ -22,12 +22,13 @@
     <link rel="stylesheet" href="css/animate-text.css">
     <link rel="stylesheet" href="css/magnific-popup.css">
     <link rel="stylesheet" href="css/font-awesome.min.css">
+    <link type="text/css" rel="stylesheet" href="css/swiper.css">
     <!-- Ruby CSS -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="css/responsive.css">
-    <link rel="stylesheet" href="css/portfollo.css?a=2">
+    <link rel="stylesheet" href="css/portfollo.css?a=4">
     <!-- Color CSS -->
     <link rel="stylesheet" href="css/color/color7.css">
@@ -74,7 +75,7 @@
 </div>
 <!--/ End breadcrumb -->
 <!--软件平台 sta-->
-<section id="portfolio-soft-top" class="section">
+<section id="portfolio-soft-top" class="section"  id="portfoliobody">
     <div class="container">
         <div class="row">
             <div class="section-title-name">软件平台</div>
@@ -100,9 +101,26 @@
         <section class="padding20-0-70">
             <div class="container">
                 <ul class="row ortfolio-soft-bottom-1">
-                    <li class="text-center col-md-6">
+                    <div  id="portfolio-rnt-wrap">
+                        <li class="text-center col-md-6 swiper-container" id="portfolio-rnt">
+                                <div class="swiper-wrapper">
+                                    <div class="swiper-slide portfolio-rnt1">
+
+                                    </div>
+                                    <div class="swiper-slide portfolio-rnt2">
+
+                                    </div>
+                                    <div class="swiper-slide portfolio-rnt3">
+
+                                    </div>
+                                    <div class="swiper-slide portfolio-rnt4">
+
+                                    </div>
+                                </div>
+                        </li>
+                    </div>
+
-                    </li>
                     <li class="text-center col-md-6">
                         <div class="ortfolio-soft-bottom-title">
                             任你停APP
@@ -347,7 +365,7 @@
 <script type="text/javascript" src="js/swiper.js"></script>
 <script type="text/javascript" src="js/gmaps.min.js"></script>
 <script type="text/javascript" src="js/nav-footer.js"></script>
-<script src="js/main.js?a=1"></script>
-<script src="js/portfollo.js?a=1"></script>
+<script src="js/main.js?a=2"></script>
+<script src="js/portfollo.js?a=5"></script>
 </body>
 </html>