认证通页面修改

src/main/resources/static/css/activity/attestation.css

@@ -115,9 +115,9 @@ li{list-style:none}
     .section_main.nine .title{width: 100%;margin-bottom: 99px;}
     .section_main.nine .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
     .section_main.nine .title h1 span{ font-size: 24px;color: #999; }
-    .section_main.nine .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
-    .section_main.nine .section_content .section_li{position: relative; width: 390px;height: 160px;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 15px;margin-bottom: 15px;background-color: #FFFFFF;padding: 20px;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;border-bottom-width: 1px;border-bottom-color: #fff;border-bottom-style: solid; cursor: pointer;}
-    .section_main.nine .section_content .section_li:nth-child(3n){margin-right: 0;}
+    .section_main.nine .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;height: 160px;}
+    .section_main.nine .section_content .section_li{position: relative; width: 390px;height: 160px;-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 15px;margin-bottom: 15px;background-color: #FFFFFF;padding: 20px;-webkit-transition: all .4s;-o-transition: all .4s;transition: all .4s;border-bottom-width: 1px;border-bottom-color: #fff;border-bottom-style: solid; cursor: pointer;}
+    /*.section_main.nine .section_content .section_li:nth-child(3n){margin-right: 0;}*/
     .section_main.nine .section_content .section_li img{float: left; width: 120px;height: 120px;display: block;border-radius: 50%;border: 1px solid #F5F5F5;}
     .section_main.nine .section_content .section_li .content{ float: left ;margin-left: 18px; width: 208px;}
     .section_main.nine .section_content .section_li .icon-marks{display: block; width: 40px;height: 40px;background: url(/img/activity/attestation/icon-marks.png) no-repeat center;background-size: 40px;}
@@ -125,21 +125,21 @@ li{list-style:none}
     .section_main.nine .section_content .section_li:hover { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);border-bottom-color: #BC1724}
     .section_main.nine .section_content .section_li:hover .name{color: #BC1724}
     .section_main.nine .section_content .section_li:hover .icon-marks{ background-image: url("/img/activity/attestation/icon-marks-active.png")}
+    .section_main.nine .section_content.mobile{display: none !important;}
     /*section_main 10*/
     .section_main.ten{ background: #fff; padding: 79px 0; }
     .section_main.ten .title{width: 100%;margin-bottom: 99px;}
     .section_main.ten .title h1{line-height: 40px;text-align: center;font-size: 40px;color: #333333;font-weight: normal;}
     .section_main.ten .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
     .section_main.ten .section_content .section_li{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 288px; height: 218px; /*float: left ;margin:0 16px 16px 0;*/background-size: 288px;background-repeat: no-repeat; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;cursor: pointer}
-    .section_main.ten .section_content .section_li:nth-child(4n) { margin-right: 0}
     .section_main.ten .section_content .section_li .logo{ width: 98px;height: 98px;margin-bottom: 28px;border-radius: 50%; }
     .section_main.ten .section_content .section_li .name{ font-size: 20px; color: #fff }
     /*.section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_club_01.png");margin-right: 80px; }*/
-    .section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_device_01.png"); margin-right: 80px;}
-    /*.section_main.ten .section_content .section_li:nth-child(3){background-image: url("/img/activity/attestation/section_bg_club_02.png") }*/
-    .section_main.ten .section_content .section_li:nth-child(2){background-image: url("/img/activity/attestation/section_bg_device_02.png") }
+    .section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_device_01.png"); margin-right: 40px;}
+    .section_main.ten .section_content .section_li:nth-child(2){background-image: url("/img/activity/attestation/section_bg_device_02.png"); margin-right: 40px;}
+    .section_main.ten .section_content .section_li:nth-child(3){background-image: url("/img/activity/attestation/section_bg_device_03.png"); }
     .section_main.ten .section_content .section_li:hover { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px);border-bottom-color: #BC1724}
-
+    .section_main.ten .section_content.mobile{display: none !important; }
     /*侧边栏-联系我们*/
     .section-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
     .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}
@@ -280,21 +280,23 @@ li{list-style:none}
     .section_main.nine .section_content .section_li .content{float: left;margin-left: 2.4vw;width: 24vw;}
     .section_main.nine .section_content .section_li .content .name{font-size: 2.6vw;color: #333;line-height: 1.6em;margin-top: 1.2vw}
     .section_main.nine .section_content .section_li .icon-marks{display: block; width: 4vw;height: 4vw;background: url(/img/activity/attestation/icon-marks.png) no-repeat center;background-size: 4vw;}
-
+    .section_main.nine .section_content.pc{display: none !important;}
     /*section_main 10*/
     .section_main.ten{ background: #fff; padding:10vw 8.8vw;}
     .section_main.ten .title{width: 100%;margin-botgbtom:  8vw;}
     .section_main.ten .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
     .section_main.ten .section_content{width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;margin-top: 8.2vw;}
-    .section_main.ten .section_content .section_li{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 39vw; height: 29.6vw; float: left ;margin:0 4.4vw 4.4vw 0;background-size: 39vw; background-repeat: no-repeat;}
+    .section_main.ten .section_content .section_li{ display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 29.6vw; float: left ;margin:0 4.4vw 4.4vw 0;background-size: 39vw; background-repeat: no-repeat;}
     .section_main.ten .section_content .section_li:nth-child(2n) { margin-right: 0}
     .section_main.ten .section_content .section_li .logo{ width: 12.9vw;height: 12.9vw;margin-bottom: 3.3vw;border-radius: 50%; }
     .section_main.ten .section_content .section_li .name{ font-size: 3.6vw; color: #fff }
-    .section_main.ten .section_content .section_li:nth-child(1){background-image: url("/img/activity/attestation/section_bg_device_01.png") }
-    .section_main.ten .section_content .section_li:nth-child(2){background-image: url("/img/activity/attestation/section_bg_device_02.png") }
+    .section_main.ten .section_content .section_li {background-size: cover; background-position: center;}
+    .section_main.ten .section_content .section_li_0{background-image: url("/img/activity/attestation/section_bg_device_01.png") }
+    .section_main.ten .section_content .section_li_1{background-image: url("/img/activity/attestation/section_bg_device_02.png") }
+    .section_main.ten .section_content .section_li_2{background-image: url("/img/activity/attestation/section_bg_device_03.png") }
     /*.section_main.ten .section_content .section_li:nth-child(3){background-image: url("/img/activity/attestation/section_bg_club_02.png") }*/
     /*.section_main.ten .section_content .section_li:nth-child(4){background-image: url("/img/activity/attestation/section_bg_device_02.png") }*/
-
+    .section_main.ten .section_content.pc{display: none !important; }
     /*侧边栏-联系我们*/
     .section-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;-webkit-box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
     .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}

src/main/resources/static/js/activity/attestation.js

@@ -1,11 +1,11 @@
 new Vue({
     data: {
         popupVisiable: false,
-        twoData:[
-            { icon:'/img/activity/attestation/section_icon_1.png', text:'自主授权'  },
-            { icon:'/img/activity/attestation/section_icon_2.png', text:'自主认证'  },
-            { icon:'/img/activity/attestation/section_icon_3.png', text:'自主管理'  },
-            { icon:'/img/activity/attestation/section_icon_4.png', text:'更快更专业'  }
+        twoData: [
+            {icon: '/img/activity/attestation/section_icon_1.png', text: '自主授权'},
+            {icon: '/img/activity/attestation/section_icon_2.png', text: '自主认证'},
+            {icon: '/img/activity/attestation/section_icon_3.png', text: '自主管理'},
+            {icon: '/img/activity/attestation/section_icon_4.png', text: '更快更专业'}
         ],
         //认证通合作伙伴
         suppileData: [
@@ -28,6 +28,13 @@ new Vue({
                 secondRoute: '',
                 redirect: ''
             },
+            {
+                logo: '/img/activity/attestation/9.png',
+                name: 'Ross',
+                entryRoute: '/12/ross',
+                secondRoute: '',
+                redirect: ''
+            },
         ],
         // 认证通快捷入口
         firstEntryList: [
@@ -44,11 +51,56 @@ new Vue({
                 secondRoute: '',
                 redirect: ''
             },
+            {
+                logo: '/img/activity/attestation/9.png',
+                name: 'ROS\'S机构认证',
+                entryRoute: '/12/ross',
+                secondRoute: '',
+                redirect: ''
+            },
         ]
     },
+    mounted() {
+        this.initSwiper1()
+        this.initSwiper2()
+    },
     methods: {
+        initSwiper1() {
+            const swiper = new Swiper("#mySwiper1", {
+                slidesPerView: 2,
+                spaceBetween: 15,
+                loop: true,
+                autoplay: {
+                    delay: 2000,
+                },
+            });
+            swiper.el.onmouseover = function () {
+                swiper.autoplay.stop();
+            }
+            swiper.el.onmouseout = function () {
+                swiper.autoplay.start();
+            }
+        },
+
+        initSwiper2() {
+            const swiper = new Swiper("#mySwiper2", {
+                slidesPerView: 3,
+                spaceBetween: 15,
+                loop: true,
+                autoplay: {
+                    delay: 2000,
+                },
+            });
+            swiper.el.onmouseover = function () {
+                swiper.autoplay.stop();
+            }
+            swiper.el.onmouseout = function () {
+                swiper.autoplay.start();
+            }
+        },
+
         handleClick: function (data) {
-            if(data.redirect){
+            if (data.redirect) {
                 window.open(data.redirect, '_blank')
                 return
             }
@@ -62,3 +114,12 @@ new Vue({
         }
     }
 }).$mount('#attestation');
+
+// $(function(){
+//     var swiper = new Swiper("#mySwiper1", {
+//         slidesPerView: 3,
+//         spaceBetween: 15,
+//         freeMode: true,
+//         autoPlay: true,
+//     });
+// })

src/main/resources/templates/activity/attestation.html

@@ -5,7 +5,9 @@
     <title>采美365网-认证通-一款专业的正品认证SaaS软件系统</title>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/activity/attestation.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link type="text/css" rel="stylesheet" href="/lib/swiper.min.css">
     <template th:replace="components/analysis"></template>
+    <script charset="utf-8" type="text/javascript" src="/lib/swiper.min.js"></script>
 </head>
 <body>
 <input type="hidden" th:value="${zplmDomain}" id="zplmDomain">
@@ -13,8 +15,8 @@
 <template th:replace="components/header"></template>
 
 <!-- 商品列表 -->
-<div id="attestation" >
-<!-- banner   -->
+<div id="attestation">
+    <!-- banner   -->
     <div class="section_banner">
         <h1>认证通</h1>
         <p>一款专业的正品认证SaaS软件系统</p>
@@ -25,9 +27,20 @@
                 <div class="title">
                     <h1>认证通快捷入口</h1>
                 </div>
-                <div class="section_content clear">
+                <div class="swiper-container section_content mobile" id="mySwiper1">
+                    <div class="swiper-wrapper">
+                        <div class="section_li swiper-slide"
+                             :class="'section_li_' + index"
+                             v-for="(data , index) in firstEntryList"
+                             @click="handleClick(data)">
+                            <img class="logo" :src="data.logo">
+                            <div class="name" v-text="data.name"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="section_content clear pc">
                     <div class="section_li" v-for="(data , index) in firstEntryList" @click="handleClick(data)">
-                        <img class="logo" :src="data.logo" >
+                        <img class="logo" :src="data.logo">
                         <div class="name" v-text="data.name"></div>
                     </div>
                 </div>
@@ -38,18 +51,30 @@
                 <div class="title">
                     <h1>他们都在用认证通<span>（排名不分先后顺序）</span></h1>
                 </div>
-                <div class="section_content clear">
+                <div class="section_content clear mobile">
                     <div class="section_li" v-for="(data , index) in suppileData" @click="handleClick(data)">
-                        <img class="logo" :src="data.logo" >
+                        <img class="logo" :src="data.logo">
                         <div class="content">
                             <span class="icon-marks"></span>
                             <div class="name" v-text="data.name"></div>
                         </div>
                     </div>
                 </div>
+                <div class="swiper-container section_content pc" id="mySwiper2">
+                    <div class="swiper-wrapper">
+                        <div class="section_li swiper-slide" v-for="(data , index) in suppileData"
+                             @click="handleClick(data)">
+                            <img class="logo" :src="data.logo">
+                            <div class="content">
+                                <span class="icon-marks"></span>
+                                <div class="name" v-text="data.name"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-<!--        1-->
+        <!--        1-->
         <div class="section_main one">
             <div class="inner">
                 <div class="title">
@@ -285,8 +310,11 @@
 <!-- 引入底部 -->
 <template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/shopping.service.js(v=${version})}"></script>
+
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/shopping.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/activity/attestation.js(v=${version})}"></script>
 </body>
 </html>