认证通页面改版

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

@@ -4,11 +4,6 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .el-carousel__item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
     .el-carousel__item h3 {
         color: #475669;
         font-size: 14px;
@@ -16,20 +11,13 @@ li{list-style:none}
         line-height: 200px;
         margin: 0;
     }
-    .el-carousel__indicator--horizontal .el-carousel__button {
-        width: 6px;
-        height: 6px;
-        background: transparent;
-        background: rgba(255, 111, 0, 0.45);
-        border-radius: 50%;
-        opacity: 1;
+
+    .el-carousel__item:nth-child(2n) {
+        background-color: #99a9bf;
     }
-    .el-carousel__indicator--horizontal.is-active .el-carousel__button{
-        width: 6px;
-        height: 6px;
-        background: #FF5B00;
-        border-radius: 50%;
-        opacity: 1;
+
+    .el-carousel__item:nth-child(2n+1) {
+        background-color: #d3dce6;
     }
     .section_banner{width: 100%;height: 420px;background: url("/img/activity/attestation/Authentication-new.png");background-size: cover;-webkit-box-sizing: border-box;box-sizing: border-box;padding-top: 140px;}
     .section_banner h1{font-size: 60px;line-height: 36px;margin-bottom: 30px;text-align: center;color: #FFFFFF;}
@@ -78,19 +66,16 @@ li{list-style:none}
     .section_main.three .section_content .text-right:hover .text-ti-a{border: 1px solid #FFFFFF;opacity: 1;}
     /*section_main 04*/
     .section_main.four{height: 838px;background-color: #FFFFFF;padding: 100px 0;position: relative}
-    .section_main.four .el-carousel__arrow{
-        display: none;
-    }
     .section_main.four .pageNoChangeLeft {
         position: absolute;
         width: 40px;
         height: 48px;
         background-color: rgb(255, 255, 255);
         border-radius: 2px;
-        color: rgb(178, 178, 178);
+        color: #FF5B00;
         top: 450px;
         left: 250px;
-        border: 1px solid #ccc;
+        border: 1px solid #FF5B00;
         text-align: center;
         line-height: 48px;
         font-size: 17px;
@@ -133,30 +118,30 @@ li{list-style:none}
         height: 8px;
         border-radius: 50%;
     }
-    .section_main.four .section_content .section_li{width: 288px;height: 380px;float: left;position: relative;margin-right: 15px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 4px;float: left; vertical-align: top;-webkit-perspective: 1000px;perspective: 1000px;}
+    .section_main.four .section_content .section_li{width: 285px;height: 460px;float: left;position: relative;margin-right: 15px;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 4px;float: left; vertical-align: top;-webkit-perspective: 1000px;perspective: 1000px;}
     .section_main.four .section_content .section_li:last-child{margin-right: 0;}
     .section_main.four .section_content .section_li .box{position: absolute;height: 100%;width: 100%;-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: ease-in-out 600ms;-o-transition: ease-in-out 600ms;transition: ease-in-out 600ms;}
-    .section_main.four .section_content .section_li .bg{width: 100%;height: 380px;background-size: 100% 100%;}
+    .section_main.four .section_content .section_li .bg{width: 100%;height: 460px;background-size: 100% 100%;}
     .section_main.four .section_content .section_li .front{-webkit-box-sizing: border-box;box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        justify-content: space-around;border:1px solid #D4D4D4;border-radius: 4px;padding: 32px 0;}
-    .section_main.four .section_content .section_li .front .icon{width: 100px;height: 100px;display: block;margin: 0 auto;border-radius: 50%;border: 1px solid #cccccc;}
-    .section_main.four .section_content .section_li .front h1{line-height: 20px;font-size: 20px;text-align: center;font-weight: normal;color: #333333;}
+        justify-content: space-around;border:1px solid #D4D4D4;border-radius: 4px;}
+    .section_main.four .section_content .section_li .front .icon{width: 100px;height: 100px;display: block;margin: 0 auto;margin-bottom: 43px;border-radius: 50%;border: 1px solid #cccccc;}
+    .section_main.four .section_content .section_li .front h1{line-height: 20px;font-size: 20px;text-align: center;margin-bottom: 56px;font-weight: normal;color: #333333;}
     .section_main.four .section_content .section_li .front p{text-align: center;font-size: 20px;line-height: 20px;color: #333333;}
     .section_main.four .section_content .section_li .front .isAuthH1 {
-        line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;font-weight: normal;
+        line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;margin-bottom: 56px;font-weight: normal;
     }
     .section_main.four .section_content .section_li .front .isAuthBtn {
         background: linear-gradient(-90deg, #FFBA63, #F3920D);border: 1px solid #fff;color: #fff;
     }
     .section_main.four .section_content .section_li .back{-webkit-transform: rotateY(-180deg);transform: rotateY(-180deg);}
-    .section_main.four .section_content .section_li .back .content-box{width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around;padding: 32px 0;}
-    .section_main.four .section_content .section_li .back .content-box h1{line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;font-weight: normal;}
-    .section_main.four .section_content .section_li .back .content-box .line{width: 32px;height: 2px;background: #FFFFFF;margin: 0 auto;}
-    .section_main.four .section_content .section_li .back .content-box p{line-height: 20px;font-size: 16px;text-align: center;color: #FFFFFF;}
+    .section_main.four .section_content .section_li .back .content-box{width: 100%;height: 100%;position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-around}
+    .section_main.four .section_content .section_li .back .content-box h1{line-height: 20px;font-size: 20px;text-align: center;color: #FFFFFF;margin-bottom: 56px;font-weight: normal;}
+    .section_main.four .section_content .section_li .back .content-box .line{width: 32px;height: 2px;background: #FFFFFF;margin: 0 auto;margin-bottom: 55px;}
+    .section_main.four .section_content .section_li .back .content-box p{line-height: 20px;font-size: 16px;text-align: center;color: #FFFFFF;margin-bottom: 16px;}
     .section_main.four .section_content .section_li .back .content-box .icon {
-        width: 100px;height: 100px;display: block;margin: 0 auto;border-radius: 50%;border: 1px solid #cccccc;
+        width: 100px;height: 100px;display: block;margin: 0 auto;margin-bottom: 43px;border-radius: 50%;border: 1px solid #cccccc;
     }
     .section_main.four .section_content .section_li .isAuthActive {
         background: linear-gradient(-90deg, #FFBA63, #F3920D);
@@ -165,13 +150,13 @@ li{list-style:none}
         background: linear-gradient(-90deg, #FFBA63, #F3920D);
     }
     .section_main.four .section_content .section_li .back .bg2{
-        background: linear-gradient(-90deg, #3bb5d2, #0160aa);
+        background: linear-gradient(-90deg, #FFBA63, #F3920D);
     }
     .section_main.four .section_content .section_li .back .bg3{
-        background: linear-gradient(-90deg, #1b3250, #0b1529);
+        background: linear-gradient(-90deg, #FFBA63, #F3920D);
     }
-    .section_main.four .section_content .section_li .back .bg4{background: linear-gradient(-90deg, #77b2d0, #4496c3);}
-    .section_main.four .section_content .section_li .back .bg5{background: linear-gradient(-90deg, #8395b3, #cddbef);}
+    .section_main.four .section_content .section_li .back .bg4{background: linear-gradient(-90deg, #FFBA63, #F3920D);}
+    .section_main.four .section_content .section_li .back .bg5{background: linear-gradient(-90deg, #FFBA63, #F3920D);}
 
     .section_main.four .section_content .section_li:hover .front{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);}
     .section_main.four .section_content .section_li:hover .back{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
@@ -361,8 +346,7 @@ li{list-style:none}
     .section_main.four .el-carousel__item .authlistH5{
         width: 48%;
         height: 48%;
-        box-shadow: 0px 6px 28px 0px rgba(51,51,51,0.1);
-        margin: 1%;
+        border: 1px solid #ccc;
         overflow: hidden;
         display: flex;
         justify-content: space-around;

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

@@ -62,7 +62,7 @@ new Vue({
                 id: 2,
                 logo: '/img/activity/logo-new/ph-new.jpg',
                 name: '品辉机构认证',
-                entryRoute: '/4/ph/approve/club',
+                entryRoute: '/4/ph',
                 secondRoute: '',
                 className: {
                     bg: true,
@@ -73,7 +73,7 @@ new Vue({
                 id: 3,
                 logo: '/img/activity/logo-new/ldm-new.png',
                 name: 'LDM机构认证',
-                entryRoute: '/10/ldm/approve/club',
+                entryRoute: '/10/ldm',
                 secondRoute: '',
                 redirect: '',
                 className: {
@@ -87,8 +87,7 @@ new Vue({
                 name: '禾雅堂机构认证',
                 entryRoute: '/15/hty',
                 secondRoute: '',
-                // redirect: 'http://zprz.hoyabeauty.com',
-                redirect: '',
+                redirect: 'http://zprz.hoyabeauty.com',
                 className: {
                     bg: true,
                     bg4: true,
@@ -98,7 +97,7 @@ new Vue({
                 id: 5,
                 logo: '/img/activity/logo-new/wm-new.png',
                 name: '唯美概念机构认证',
-                entryRoute: '/21/app',
+                entryRoute: '',
                 secondRoute: '',
                 redirect: '',
                 className: {
@@ -113,9 +112,7 @@ new Vue({
         startY: '',
         moveY: '',
         moveX: '',
-        startTime: '',
-        isActivePageLeft: false,
-        isActivePageRight: true
+        startTime: ''
     },
     mounted() {
         this.initPageList = this.firstEntryList.map((item, index) => {
@@ -139,33 +136,27 @@ new Vue({
         },
     },
     methods: {
-        changePageNoLeft() {
-            this.isActivePageRight = false
-            this.isActivePageLeft = true
-            this.$refs.pcSwiper.prev()
-            // console.log(bool)
-            // if (bool) {
-            //     if (this.initPageList[3].id === 5) {
-            //         this.initPageList = this.firstEntryList.filter((item, index) => index!==4)
-            //         console.log(this.initPageList)
-            //     } else {
-            //         this.isAuthActiveNum--
-            //     }
-            //     console.log(this.isAuthActiveNum)
-            // }
+        changePageNoLeft(bool) {
+            console.log(bool)
+            if (bool) {
+                if (this.initPageList[3].id === 5) {
+                    this.initPageList = this.firstEntryList.filter((item, index) => index!==4)
+                    console.log(this.initPageList)
+                } else {
+                    this.isAuthActiveNum--
+                }
+                console.log(this.isAuthActiveNum)
+            }
         },
-        changePageNoRight() {
-            this.isActivePageRight = true
-            this.isActivePageLeft = false
-            this.$refs.pcSwiper.next()
-            // if (bool) {
-            //     if (this.initPageList[3].id === 4 && this.isAuthActiveNum === 3) {
-            //         this.initPageList = this.firstEntryList.filter((item, index) => index!==0)
-            //         console.log(this.initPageList)
-            //     } else {
-            //         this.isAuthActiveNum++
-            //     }
-            // }
+        changePageNoRight(bool) {
+            if (bool) {
+                if (this.initPageList[3].id === 4 && this.isAuthActiveNum === 3) {
+                    this.initPageList = this.firstEntryList.filter((item, index) => index!==0)
+                    console.log(this.initPageList)
+                } else {
+                    this.isAuthActiveNum++
+                }
+            }
         },
         start(e) {
             this.startX = e.touches[0].clientX;

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

@@ -24,95 +24,57 @@
             </div>
         </div>
         <div class="section_main four">
-<!--            <div class="pageNoChangeLeft isActivePage" @click="changePageNoLeft( firstEntryList[0].id!== 1 || isAuthActiveNum !== 0)" v-if="isPC"><</div>-->
-<!--            <div class="pageNoChangeRight isActivePage" @click="changePageNoRight(firstEntryList[0].id === 1)" v-if="isPC">></div>-->
-            <div class="pageNoChangeLeft" :class="isActivePageLeft ? 'isActivePage' : ''" @click="changePageNoLeft" v-if="isPC"><</div>
-            <div class="pageNoChangeRight" :class="isActivePageRight ? 'isActivePage' : ''" @click="changePageNoRight" v-if="isPC">></div>
+            <div class="pageNoChangeLeft isActivePage" @click="changePageNoLeft( initPageList[0].id!== 1 || isAuthActiveNum !== 0)" v-if="isPC"><</div>
+            <div class="pageNoChangeRight isActivePage" @click="changePageNoRight(initPageList[0].id === 1)" v-if="isPC">></div>
             <div class="inner">
                 <div class="title">
                     <h1>正品查询快捷入口</h1>
                 </div>
                 <div class="section_content clear" v-if="isPC">
-<!--                    <div class="section_li li1" v-for="(item, index) in initPageList" :key="index" v-if="index<4" @click="changePageNoLink(index, item)">-->
-<!--                        <div class="box front" :class="isAuthActiveNum === index ? 'isAuthActive' : ''">-->
-<!--                            <img :src="item.logo" alt="" class="icon">-->
-<!--                            <h1 :class="isAuthActiveNum === index ? 'isAuthH1' : ''">{{ item.name }}</h1>-->
-<!--                            <p><el-button :plain="true" :class="isAuthActiveNum === index ? 'isAuthBtn' : ''" @click="changePageNoLink(index, item)">立即查看</el-button></p>-->
-<!--                        </div>-->
-<!--                        <div class="box back">-->
-<!--                            <div :class="item.className"></div>-->
-<!--                            <div class="content-box">-->
-<!--                                <img :src="item.logo" alt="" class="icon">-->
-<!--                                <h1>{{ item.name }}</h1>-->
-<!--                                <p><el-button @click="changePageNoLink(index, item)" :plain="true" style="background: linear-gradient(-90deg, #FFBA63, #F3920D);border: 1px solid #fff;color: #fff;">立即查看</el-button></p>-->
-<!--                            </div>-->
-<!--                        </div>-->
-<!--                    </div>-->
-                    <el-carousel indicator-position="outside" height="500px" ref="pcSwiper" :autoplay="false">
-                        <el-carousel-item>
-                            <div class="section_li li1" v-for="(item, index) in firstEntryList" :key="index" v-if="index<4" @click="changePageNoLink(index, item)">
-                                <div class="box front">
-                                    <img :src="item.logo" alt="" class="icon">
-                                    <h1>{{ item.name }}</h1>
-                                    <p><el-button :plain="true" @click="changePageNoLink(index, item)">立即查看</el-button></p>
-                                </div>
-                                <div class="box back">
-                                    <div :class="item.className"></div>
-                                    <div class="content-box">
-                                        <img :src="item.logo" alt="" class="icon">
-                                        <h1>{{ item.name }}</h1>
-                                        <p><el-button @click="changePageNoLink(index, item)" :plain="true" style="border: 1px solid #fff;">立即查看</el-button></p>
-                                    </div>
-                                </div>
-                            </div>
-                        </el-carousel-item>
-                        <el-carousel-item>
-                            <div class="section_li li1" v-for="(item, index) in firstEntryList" :key="index" v-if="index>3" @click="changePageNoLink(index, item)">
-                                <div class="box front">
-                                    <img :src="item.logo" alt="" class="icon">
-                                    <h1 :class="isAuthActiveNum === index ? 'isAuthH1' : ''">{{ item.name }}</h1>
-                                    <p><el-button :plain="true" @click="changePageNoLink(index, item)">立即查看</el-button></p>
-                                </div>
-                                <div class="box back">
-                                    <div :class="item.className"></div>
-                                    <div class="content-box">
-                                        <img :src="item.logo" alt="" class="icon">
-                                        <h1>{{ item.name }}</h1>
-                                        <p><el-button @click="changePageNoLink(index, item)" :plain="true">立即查看</el-button></p>
-                                    </div>
-                                </div>
+                    <div class="section_li li1" v-for="(item, index) in initPageList" :key="index" v-if="index<4" @click="changePageNoLink(index, item)">
+                        <div class="box front" :class="isAuthActiveNum === index ? 'isAuthActive' : ''">
+                            <img :src="item.logo" alt="" class="icon">
+                            <h1 :class="isAuthActiveNum === index ? 'isAuthH1' : ''">{{ item.name }}</h1>
+                            <p><el-button :plain="true" :class="isAuthActiveNum === index ? 'isAuthBtn' : ''" @click="changePageNoLink(index, item)">立即查看</el-button></p>
+                        </div>
+                        <div class="box back">
+                            <div :class="item.className"></div>
+                            <div class="content-box">
+                                <img :src="item.logo" alt="" class="icon">
+                                <h1>{{ item.name }}</h1>
+                                <p><el-button @click="changePageNoLink(index, item)" :plain="true" style="background: linear-gradient(-90deg, #FFBA63, #F3920D);border: 1px solid #fff;color: #fff;">立即查看</el-button></p>
                             </div>
-                        </el-carousel-item>
-                    </el-carousel>
+                        </div>
+                    </div>
+                </div>
+                <div class="pageNum" style="height: 100px;display: flex;justify-content: center;align-items: center" v-if="isPC">
+                    <div class="pageNum-box" style="height: 10px;display: flex;justify-content: space-around;width: 100px;">
+                        <span @click="changePageNo(index)" @mouseover="changePageNo(index)" :style="{cursor: 'pointer',width: '8px',height: '8px',backgroundColor: isAuthActiveNum === index ? '#FF5B00' : '#FF990066',borderRadius: '50%',transition: '1s'}" v-if="index<4" v-for="(item, index) in initPageList" :key="index"></span>
+                    </div>
                 </div>
-<!--                <div class="pageNum" style="height: 100px;display: flex;justify-content: center;align-items: center" v-if="isPC">-->
-<!--                    <div class="pageNum-box" style="height: 10px;display: flex;justify-content: space-around;width: 100px;">-->
-<!--                        <span @click="changePageNo(index)" @mouseover="changePageNo(index)" :style="{cursor: 'pointer',width: '8px',height: '8px',backgroundColor: isAuthActiveNum === index ? '#FF5B00' : '#FF990066',borderRadius: '50%',transition: '1s'}" v-if="index<4" v-for="(item, index) in firstEntryList" :key="index"></span>-->
-<!--                    </div>-->
-<!--                </div>-->
                 <div class="section_content" v-if="!isPC">
                     <div>
                         <el-carousel indicator-position="outside" ref="nop" height="600px" :autoplay="false">
                             <div @touchmove="move($event)" @touchstart="start($event)">
                                 <el-carousel-item>
-                                    <div v-for="(item, index) in firstEntryList" :key="item.id" v-if="index < 4" class="authlistH5" @click="changePageNoLink(index, item)">
+                                    <div v-for="(item, index) in firstEntryList" :key="item.id" v-if="index < 4" class="authlistH5" :class="isAuthActiveNum === index ? 'isAuthActive' : ''" @click="changePageNoLink(index, item)">
                                         <div>
                                             <img :src="item.logo" alt="" class="icon">
                                         </div>
-                                        <div>{{item.name}}</div>
+                                        <div :class="isAuthActiveNum === index ? 'isAuthtext' : ''">{{item.name}}</div>
                                         <div>
-                                            <el-button @click="changePageNoLink(index, item)">立即查看</el-button>
+                                            <el-button @click="changePageNoLink(index, item)" :class="isAuthActiveNum === index ? 'isAuthBtn' : ''">立即查看</el-button>
                                         </div>
                                     </div>
                                 </el-carousel-item>
                                 <el-carousel-item>
-                                    <div v-for="(item, index) in firstEntryList" :key="item.id" v-if="index > 3" class="authlistH5" @click="changePageNoLink(index, item)">
+                                    <div v-for="(item, index) in firstEntryList" :key="item.id" v-if="index > 3" class="authlistH5" :class="isAuthActiveNum === index ? 'isAuthActive' : ''" @click="changePageNoLink(index, item)">
                                         <div>
                                             <img :src="item.logo" alt="" class="icon">
                                         </div>
-                                        <div>{{item.name}}</div>
+                                        <div :class="isAuthActiveNum === index ? 'isAuthtext' : ''">{{item.name}}</div>
                                         <div>
-                                            <el-button @click="changePageNoLink(index, item)">立即查看</el-button>
+                                            <el-button @click="changePageNoLink(index, item)" :class="isAuthActiveNum === index ? 'isAuthBtn' : ''">立即查看</el-button>
                                         </div>
                                     </div>
                                 </el-carousel-item>