认证通页面合作伙伴样式调整

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

@@ -115,11 +115,14 @@ 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 .section_content{width: 100%;box-sizing: border-box;}
-    .section_main.nine .section_content .section_li{width: 280px;height: 126px;float: left;box-sizing: border-box;margin-right: 25px;margin-bottom: 24px;padding: 0 73px;background-color: #FFFFFF;}
-    .section_main.nine .section_content .section_li:nth-child(4n){margin-right: 0;}
-    .section_main.nine .section_content .section_li img{width: 126px;height: 126px;display: block;-webkit-transform: scale(.9);-moz-transform: scale(.9);-ms-transform: scale(.9);-o-transform: scale(.9);transform: scale(.9);-o-transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;}
-    .section_main.nine .section_content .section_li:hover img{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
-    .section_main.nine .section_content .section_li:hover{-webkit-box-shadow: 0 1px 8px 3px rgb(0 0 0 / 10%);-moz-box-shadow: 0 1px 8px 3px rgba(0, 0, 0, .1);box-shadow: 0 1px 8px 3px rgb(0 0 0 / 10%);cursor: pointer}
+    .section_main.nine .section_content .section_li{position: relative; width: 390px;height: 160px;float: left;box-sizing: border-box;margin-right: 15px;margin-bottom: 15px;background-color: #FFFFFF;padding: 20px;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;}
+    .section_main.nine .section_content .section_li .name{font-size: 16px;color: #333;line-height: 1.6em;margin-top: 20px; width: 100%; word-break: break-all; text-align: left; transition: color .2s}
+    .section_main.nine .section_content .section_li:hover { transform: translateY(-15px);border-bottom-color: #BC1724}
+    .section_main.nine .section_content .section_li:hover .name{color: #BC1724}
     /*侧边栏-联系我们*/
     .section-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
     .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}
@@ -246,9 +249,13 @@ li{list-style:none}
     .section_main.nine .title{width: 100%;margin-bottom: 8vw;}
     .section_main.nine .title h1{line-height: 4.9vw;text-align: center;font-size: 4.8vw;color: #333333;font-weight: normal;}
     .section_main.nine .section_content{width: 100%;box-sizing: border-box;padding: 0 6.4vw;}
-    .section_main.nine .section_content .section_li{width: 27.2vw;height: 12.6vw;float: left;box-sizing: border-box;margin-right: 2.7vw;margin-bottom:2.4vw;padding: 0 7.2vw;background-color: #FFFFFF;}
-    .section_main.nine .section_content .section_li:nth-child(3n){margin-right: 0;}
-    .section_main.nine .section_content .section_li img{width: 12.6vw;height: 12.6vw;display: block;}
+    .section_main.nine .section_content .section_li{width: 42.2vw;height: 18.6vw;float: left;box-sizing: border-box;margin-right: 2.7vw;margin-bottom:2.4vw;padding:2.4vw;background-color: #FFFFFF;}
+    .section_main.nine .section_content .section_li:nth-child(2n){margin-right: 0;}
+    .section_main.nine .section_content .section_li img{float: left; width: 10vw;height: 10vw; margin-top: 1.6vw; display: block;border: 1px solid #F5F5F5;border-radius: 50%;}
+    .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-tel{width: 52px;height: 92px;position: fixed;right: 0;top: 50%;z-index: 99;border-radius: 2px;box-shadow: 0px 2px 12px 0px rgba(43, 43, 43, 0.1);}
     .section-tel .box{width: 52px;height: 46px;background: #FFFFFF;box-sizing: border-box;padding: 9px 12px;cursor: pointer;position: relative;}

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

@@ -21,9 +21,9 @@ var orderPage = new Vue({
             }
         ],
         suppileData:[
-            {   logo:'/img/activity/attestation/1.jpg' , appId: 'shanghaipinhuiyiliao', name: '上海品辉医疗科技有限公司官方授权'},
-            {   logo:'/img/activity/attestation/2.jpg' , appId: '', name: '认证通'},
-            {   logo:'/img/activity/attestation/3.jpg' , appId: '', name: '认证通'},
+            {   logo:'/img/activity/attestation/1.jpg' , appId: 'shanghaipinhuiyiliao', name: '上海品辉医疗科技有限公司官方授权', title: '上海品辉医疗科技有限公司'},
+            {   logo:'/img/activity/attestation/2.jpg' , appId: '', name: '认证通', title: '科医人医疗激光设备贸易公司'},
+            {   logo:'/img/activity/attestation/3.jpg' , appId: '', name: '认证通', title: '广州埃墨莉素生物科技有限公司'},
         ]
     },
     computed: {

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

@@ -2,7 +2,7 @@
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
-    <title>采美365网-认证通-一款专业的正品认证Saas软件系统</title>
+    <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">
     <template th:replace="components/analysis"></template>
@@ -233,6 +233,10 @@
                 <div class="section_content clear">
                     <div class="section_li" 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.title"></div>
+                        </div>
                     </div>
                 </div>
             </div>