修改认证通首页效果

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

@@ -4,6 +4,11 @@ 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;
@@ -11,13 +16,20 @@ li{list-style:none}
         line-height: 200px;
         margin: 0;
     }
-
-    .el-carousel__item:nth-child(2n) {
-        background-color: #99a9bf;
+    .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+1) {
-        background-color: #d3dce6;
+    .el-carousel__indicator--horizontal.is-active .el-carousel__button{
+        width: 6px;
+        height: 6px;
+        background: #FF5B00;
+        border-radius: 50%;
+        opacity: 1;
     }
     .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;}
@@ -66,6 +78,9 @@ 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;

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

@@ -136,27 +136,29 @@ new Vue({
         },
     },
     methods: {
-        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)
-            }
+        changePageNoLeft() {
+            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)
+            // }
         },
-        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++
-                }
-            }
+        changePageNoRight() {
+            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++
+            //     }
+            // }
         },
         start(e) {
             this.startX = e.touches[0].clientX;

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

@@ -24,34 +24,72 @@
             </div>
         </div>
         <div class="section_main four">
-            <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="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 isActivePage" @click="changePageNoLeft" v-if="isPC"><</div>
+            <div class="pageNoChangeRight isActivePage" @click="changePageNoRight" 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 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" :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>
-                        </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>
+                        </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" :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-item>
+                    </el-carousel>
                 </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">