【mod】高校轮播一体机样式修改

gxlbytj/css/style.css

@@ -143,7 +143,7 @@ div.wall > div > a{
     background: #ffffff;
     border-radius: 50%;
     opacity: 1;
-    z-index: 19999999;
+    z-index: 29999999;
 }
 #btn_search > img{
     width:100%;

gxlbytj/css/swiper.css

@@ -0,0 +1,186 @@
+html,
+body,
+ul,
+ol,
+div {
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    text-decoration: none;
+}
+
+img {
+    border: 0;
+}
+body{background-color: #151515}
+.swiper {
+    width: 100%;
+    height: 100%;
+    /*margin: 50px auto;*/
+    position: relative;
+}
+
+.swiper .pic {
+    width: 100%;
+    display: flex;
+    padding-top: 2px;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    align-items: center;
+}
+
+
+
+.swiper .pic li {
+    -webkit-transition: all 0.8s;
+    -moz-transition: all 0.8s;
+    -o-transition: all 0.8s;
+    -ms-transition: all 0.8s;
+    transition: all 0.8s;
+    width: 77vh;
+    height:46vh;
+    position: absolute;
+    /*top: 30px;*/
+    /*left: 50%;*/
+    /*margin-left: -350px;*/
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
+}
+
+.swiper .pic li img {
+    width: 100%;
+    height: 100%;
+}
+
+.now {
+    z-index: 9;
+    -webkit-transform: scale(1.2);
+    -moz-transform: scale(1.2);
+    -o-transform: scale(1.2);
+    -ms-transform: scale(1.2);
+    transform: scale(1.2);
+}
+
+.next {
+    z-index: 6;
+    -webkit-transform: translateX(38vh);
+    -moz-transform: translateX(38vh);
+    -o-transform: translateX(38vh);
+    -ms-transform: translateX(38vh);
+    transform: translateX(38vh);
+}
+
+.prev {
+    z-index: 6;
+    -webkit-transform: translateX(-38vh);
+    -moz-transform: translateX(-38vh);
+    -o-transform: translateX(-38vh);
+    -ms-transform: translateX(-38vh);
+    transform: translateX(-38vh);
+}
+
+._bg {
+    background-color: red !important;
+}
+
+.swiper .cricle {
+    height: 16px;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    -o-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.swiper .cricle li {
+    float: left;
+    width: 14px;
+    height: 14px;
+    background-color: #cccccc;
+    margin-right: 6px;
+    border-radius: 50%;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
+}
+
+.swiper .btns {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 100%;
+    height: 38px;
+    z-index: 9;
+}
+
+.swiper .btns .leftbtn,
+.swiper .btns .rightbtn {
+    height: 100%;
+    width: 38px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+
+.swiper .btns .leftbtn::after,
+.swiper .btns .rightbtn::after {
+    content: "";
+    display: block;
+    width: 18px;
+    height: 18px;
+    border-left: 3px solid #ffffff;
+    border-top: 3px solid #ffffff;
+
+}
+
+.swiper .btns .leftbtn::after {
+    -webkit-transform: translate(12px, 8px) rotate(-45deg);
+    -moz-transform: translate(12px, 8px) rotate(-45deg);
+    -o-transform: translate(12px, 8px) rotate(-45deg);
+    -ms-transform: translate(12px, 8px) rotate(-45deg);
+    transform: translate(12px, 8px) rotate(-45deg);
+}
+
+.swiper .btns .rightbtn::after {
+    -webkit-transform: translate(4px, 8px) rotate(135deg);
+    -moz-transform: translate(4px, 8px) rotate(135deg);
+    -o-transform: translate(4px, 8px) rotate(135deg);
+    -ms-transform: translate(4px, 8px) rotate(135deg);
+    transform: translate(4px, 8px) rotate(135deg);
+}
+
+.leftBox,
+.rightBox {
+    height: 46vh;
+    position: absolute;
+    top:12vh;
+    z-index: 99;
+    cursor: pointer;
+}
+
+.leftBox {
+    width: 50vh;
+    left: 0;
+    cursor: pointer;
+}
+
+.rightBox {
+    width: 50vh;
+    right: 0;
+    cursor: pointer;
+}

gxlbytj/index.html

@@ -1017,6 +1017,7 @@
                         dataType: "json",
                         success: function (data) {
                             if (data.success) {
+                                console.log('dddddd')
                                 if (data.list.length === 0) {
                                     $('.modal-content').html('<div class="none"></div><span class="text">数据更新中，请下次再来了...</span>');
                                 } else if (data.list.length > 0) {
@@ -1364,10 +1365,10 @@
 
                 <div id="down" onclick="unfold()"
                      style="cursor:pointer;line-height: 2rem;text-align: center;margin-top: 1rem">展开 <img
-                        src="img/down.png" style="width: 20px"></div>
+                        src="img/down.png" style="width: 20px"/></div>
                 <div id="up" onclick="packUp()"
                      style="display:none;cursor:pointer;line-height: 2rem;text-align: center;margin-top: 1rem">收起 <img
-                        src="img/up.png" style="width: 20px"></div>
+                        src="img/up.png" style="width: 20px"/></div>
                 {{# }else{ }}
                 <span class="none">数据更新中，请下次再来了...</span>
 

gxlbytj/lib/pagination/pagination.html

@@ -0,0 +1,135 @@
+<template>
+    <div class="c-pagination" v-if="total>0">
+        <a v-if="hasPrev()" @click="nav(index-1)">上一页</a>
+        <a v-else class="c-disable" href="javascript:;" style="visibility:hidden;">上一页</a>
+        <a v-for="item in getPageList()" @click="nav(item)" :class="'c-item' + (item===index?' active':'')" :title="item">{{item}}</a>
+        <a href="javascript:;" v-if="hasNext()" @click="nav(index+1)">下一页</a>
+        <a v-else class="c-disable" href="javascript:;" style="visibility:hidden;">下一页</a>
+    </div>
+</template>
+<script>
+    export default {
+        props: {
+            index: {
+                type: Number,
+                default: 1
+            },
+            size: {
+                type: Number,
+                default: 20
+            },
+            total: {
+                type: Number,
+                default: 0
+            },
+            sizeList: {
+                type: Array,
+                default: () => [20, 50, 100]
+            },
+            callback: {
+                type: Function
+            }
+        },
+        data: function () {
+            return {
+                currentIndex: this.index,
+                currentSize: this.size
+            };
+        },
+        watch: {
+            currentIndex: function (val) {
+                this.$emit('update:index', val);
+                this.callback();
+            },
+            currentSize: function (val) {
+                this.currentIndex = 1;
+                this.$emit('update:size', val);
+                this.callback();
+            }
+        },
+        methods: {
+            nav: function (index) {
+                this.currentIndex = index;
+            },
+            getPageCount: function () {
+                return Math.ceil(this.total / this.size);
+            },
+            hasPrev: function () {
+                return this.index > 1;
+            },
+            hasNext: function () {
+                return this.index < this.getPageCount();
+            },
+            getPageList: function () {
+                var pageCount = this.getPageCount();
+                var maxLinks = 10;
+                var left = maxLinks / 2;
+                var start = this.index - left;
+                start = start > 1 ? start : 1;
+                var end = this.index + (maxLinks - left - 1);
+                end = end > pageCount ? pageCount : end;
+                if (start == 1 && end < pageCount) {
+                    while (end - start + 1 < maxLinks && end < pageCount) {
+                        end++;
+                    }
+                }
+                if (end == pageCount && start > 1) {
+                    while (end - start + 1 < maxLinks && start > 1) {
+                        start--;
+                    }
+                }
+                var list = [];
+                for (var i = start; i <= end; i++) {
+                    list.push(i);
+                }
+                return list;
+            }
+        }
+    };
+</script>
+<style>
+    .c-pagination {
+        box-sizing:border-box;
+        text-align: center;
+        padding: 1.5vh 0;
+        height: 10vh;
+        position:relative;
+    }
+        .c-pagination a {
+            display: inline-block;
+            line-height: 6vh;
+            height:6vh;
+            padding: 0 2vh;
+            margin: 2vh 0;
+            text-align: center;
+            text-decoration: none;
+            color: #fff;
+            cursor: pointer;
+            overflow: hidden;
+        }
+            .c-pagination a:hover {
+                color: #fff;
+            }
+        .c-pagination > a:first-child, .c-pagination > a:last-child {
+            background-color: #027EFB;
+        }
+        .c-pagination > a:first-child {
+            position: absolute;
+            left: 0;
+        }
+        .c-pagination > a:last-child {
+            position: absolute;
+            right: 0;
+        }
+        .c-pagination > a.c-item {
+            width: 2vh;
+            height: 2vh;
+            border-radius: 1vh;
+            padding: 0;
+            background-color: #ccc;
+            margin: 4vh .5vh;
+        }
+            .c-pagination > a.c-item.active {
+                background-color: #027EFB;
+            }
+</style>

xztszzy/views/school/item.html

@@ -45,8 +45,8 @@
                                 <div class="swiper-container gallery-top">
                                     <div class="swiper-wrapper">
                                         <div class="swiper-slide" v-for="item in getImages()"
-                                             @click="zoom('./../../gxytj/'+item.resource_address+'.webp')"
+                                             @click="zoom('./../../gxytj/'+item.resource_address)"
-                                             :style="'background-image:url(./../../gxytj/'+item.resource_address+'.webp)'"></div>
+                                             :style="'background-image:url(./../../gxytj/'+item.resource_address+')'"></div>
                                     </div>
 
                                     <div class="swiper-button-next swiper-button-white"></div>
@@ -55,7 +55,7 @@
                                 <div class="swiper-container gallery-thumbs">
                                     <div class="swiper-wrapper">
                                         <div class="swiper-slide" v-for="item in getImages()"
-                                             :style="'background-image:url(./../../gxytj/'+item.resource_address+'.thumb.webp)'"></div>
+                                             :style="'background-image:url(./../../gxytj/'+item.resource_address+')'"></div>
                                     </div>
                                 </div>
                             </div>
@@ -422,7 +422,7 @@
                 <div class="c-tab-content" v-show="tab.current===4">
 
                     <h3 style="margin:0;"><img src="./../../gxytj/xztszzy/images/gaoxiao/school.png"
-                                               style="width:2rem;vertical-align:bottom;margin-right: 1rem;"/>校园风光
+                                               style="width:2rem;vertical-align:bottom;margin-right: 1rem;"/>校园风采
                     </h3>
                     <div style="text-align: center" v-if="getImageList().length===0">
                         <img src="images/empty-data.png" style="width: 17vh;margin-top: 5vh;margin-bottom: 2vh"/>
@@ -431,10 +431,10 @@
                     <template v-else>
                         <div class="c-flex" style="justify-content:start;">
                             <div v-for="item in getImageList()"
-                                 @click="zoom('./../../gxytj/'+item.resource_address+'.webp')"
+                                 @click="zoom('./../../gxytj/'+item.resource_address)"
                                  style="width:20%;text-align:center;cursor:pointer;">
-                                <div class="c-item-cell"
+                                <img class="c-item-cell"
-                                     :style="'background-image:url(./../../gxytj/'+getThumb(item.resource_address)+');'"></div>
+                                     :src="'./../../gxytj'+getThumb(item.resource_address)" style="background-size:cover"/>
                                 <div>{{item.resource_title}}</div>
                             </div>
                         </div>
@@ -457,12 +457,12 @@
             </div>
         </div>
         <div v-show="layout.showOverlay" :close-on-click-overlay="false"
-             style="position:fixed;left:0;top:0;width:100%;height:100%;z-index:2000;background:#000;">
+             style="position:fixed;left:0;top:0;width:100%;height:100%;z-index:2000;background:rgba(0,0,0,.8);">
             <template v-if="src">
                 <template v-if="src">
                     <video controls muted autoplay playsinline controlsList="nodownload" disablepictureinpicture
                            style="width: 100%; height: 100%;" :src="src" v-if="isVideo(src)"></video>
-                    <div class="c-100x100" :style="'background-image:url('+src+');'" v-else></div>
+                    <div class="c-100x100" :style="'background-image:url('+src+');background-size:800px 500px'" v-else></div>
                 </template>
                 <img v-on:click="close()"
                      style="color:#fff;font-size:6vh;position:absolute;top:2vh;right:2vh;width: 3rem;cursor:pointer"
@@ -679,7 +679,7 @@
                         "university_id": this.$route.query.id,
                     });
                 }
-                var url = '/dsideal_yy/zygh/ytj/getResourceList';
+                var url = '/dsideal_yy/zygh/ytj/getResourceListNew';
                 var parent = this;
                 $.post(url, uri.query(), function (response) {
                     if (response.success && response.list.length !== 0) {
@@ -1145,7 +1145,7 @@
                 return src.endsWith('.mp4') || src.endsWith('.webm');
             },
             getThumb(src) {
-                return '/' + src + '.thumb.webp';
+                return '/' + src ;
             },
             getIcon(src) {
                 if (src.endsWith('.mp4') || src.endsWith('.webm')) {
@@ -1330,7 +1330,7 @@
         display: inline-block;
         box-sizing: border-box;
         width: 75%;
-        height: 50vh;
+        height: 35vh;
         overflow: hidden;
         background-position: center;
     }