q78kgblog 1.0.0

package/css/swiperstyle.css

@@ -0,0 +1,567 @@
+/* * {
+    -webkit-box-sizing:border-box;
+    -moz-box-sizing:border-box;
+    box-sizing:border-box
+}
+div#swiper_container {
+    background:rgba(255, 255, 255, 0)
+}
+.blog-slider {
+    width:100%;
+    position:relative;
+    border-radius:12px 8px 8px 12px;
+    margin:auto;
+    background:var(--global-bg);
+    padding:10px;
+    -webkit-transition:all .3s;
+    -moz-transition:all .3s;
+    -o-transition:all .3s;
+    -ms-transition:all .3s;
+    transition:all .3s
+}
+.blog-slider__item {
+    display:-webkit-box;
+    display:-moz-box;
+    display:-webkit-flex;
+    display:-ms-flexbox;
+    display:box;
+    display:flex;
+    -webkit-box-align:center;
+    -moz-box-align:center;
+    -o-box-align:center;
+    -ms-flex-align:center;
+    -webkit-align-items:center;
+    align-items:center
+}
+.blog-slider__item.swiper-slide-active .blog-slider__img img {
+    opacity:1;
+    -ms-filter:none;
+    filter:none;
+    -webkit-transition-delay:.3s;
+    -moz-transition-delay:.3s;
+    -o-transition-delay:.3s;
+    -ms-transition-delay:.3s;
+    transition-delay:.3s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>* {
+    opacity:1;
+    -ms-filter:none;
+    filter:none;
+    -webkit-transform:none;
+    -moz-transform:none;
+    -o-transform:none;
+    -ms-transform:none;
+    transform:none
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(1) {
+    -webkit-transition-delay:.3s;
+    -moz-transition-delay:.3s;
+    -o-transition-delay:.3s;
+    -ms-transition-delay:.3s;
+    transition-delay:.3s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(2) {
+    -webkit-transition-delay:.4s;
+    -moz-transition-delay:.4s;
+    -o-transition-delay:.4s;
+    -ms-transition-delay:.4s;
+    transition-delay:.4s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(3) {
+    -webkit-transition-delay:.5s;
+    -moz-transition-delay:.5s;
+    -o-transition-delay:.5s;
+    -ms-transition-delay:.5s;
+    transition-delay:.5s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(4) {
+    -webkit-transition-delay:.6s;
+    -moz-transition-delay:.6s;
+    -o-transition-delay:.6s;
+    -ms-transition-delay:.6s;
+    transition-delay:.6s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(5) {
+    -webkit-transition-delay:.7s;
+    -moz-transition-delay:.7s;
+    -o-transition-delay:.7s;
+    -ms-transition-delay:.7s;
+    transition-delay:.7s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(6) {
+    -webkit-transition-delay:.8s;
+    -moz-transition-delay:.8s;
+    -o-transition-delay:.8s;
+    -ms-transition-delay:.8s;
+    transition-delay:.8s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(7) {
+    -webkit-transition-delay:.9s;
+    -moz-transition-delay:.9s;
+    -o-transition-delay:.9s;
+    -ms-transition-delay:.9s;
+    transition-delay:.9s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(8) {
+    -webkit-transition-delay:1s;
+    -moz-transition-delay:1s;
+    -o-transition-delay:1s;
+    -ms-transition-delay:1s;
+    transition-delay:1s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(9) {
+    -webkit-transition-delay:1.1s;
+    -moz-transition-delay:1.1s;
+    -o-transition-delay:1.1s;
+    -ms-transition-delay:1.1s;
+    transition-delay:1.1s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(10) {
+    -webkit-transition-delay:1.2s;
+    -moz-transition-delay:1.2s;
+    -o-transition-delay:1.2s;
+    -ms-transition-delay:1.2s;
+    transition-delay:1.2s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(11) {
+    -webkit-transition-delay:1.3s;
+    -moz-transition-delay:1.3s;
+    -o-transition-delay:1.3s;
+    -ms-transition-delay:1.3s;
+    transition-delay:1.3s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(12) {
+    -webkit-transition-delay:1.4s;
+    -moz-transition-delay:1.4s;
+    -o-transition-delay:1.4s;
+    -ms-transition-delay:1.4s;
+    transition-delay:1.4s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(13) {
+    -webkit-transition-delay:1.5s;
+    -moz-transition-delay:1.5s;
+    -o-transition-delay:1.5s;
+    -ms-transition-delay:1.5s;
+    transition-delay:1.5s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(14) {
+    -webkit-transition-delay:1.6s;
+    -moz-transition-delay:1.6s;
+    -o-transition-delay:1.6s;
+    -ms-transition-delay:1.6s;
+    transition-delay:1.6s
+}
+.blog-slider__item.swiper-slide-active .blog-slider__content>:nth-child(15) {
+    -webkit-transition-delay:1.7s;
+    -moz-transition-delay:1.7s;
+    -o-transition-delay:1.7s;
+    -ms-transition-delay:1.7s;
+    transition-delay:1.7s
+}
+.blog-slider__img {
+    width:200px;
+    -webkit-flex-shrink:0;
+    flex-shrink:0;
+    height:200px;
+    padding:10px;
+    border-radius:5px;
+    -webkit-transform:translateX(0);
+    -moz-transform:translateX(0);
+    -o-transform:translateX(0);
+    -ms-transform:translateX(0);
+    transform:translateX(0);
+    overflow:hidden
+}
+.blog-slider__img:after {
+    content:'';
+    position:absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    border-radius:5px;
+    opacity:.8
+}
+.blog-slider__img img {
+    width:100%;
+    height:100%;
+    object-fit:cover;
+    display:block;
+    opacity:0;
+    border-radius:5px;
+    -webkit-transition:all .3s;
+    -moz-transition:all .3s;
+    -o-transition:all .3s;
+    -ms-transition:all .3s;
+    transition:all .3s
+}
+.blog-slider__content {
+    padding-right:50px;
+    padding-left:50px
+}
+.blog-slider__content>* {
+    opacity:0;
+    -webkit-transform:translateY(25px);
+    -moz-transform:translateY(25px);
+    -o-transform:translateY(25px);
+    -ms-transform:translateY(25px);
+    transform:translateY(25px);
+    -webkit-transition:all .4s;
+    -moz-transition:all .4s;
+    -o-transition:all .4s;
+    -ms-transition:all .4s;
+    transition:all .4s
+}
+.blog-slider__code {
+    color:var(--font-color);
+    margin-bottom:0;
+    display:block;
+    font-weight:500
+}
+.blog-slider__title {
+    font-size:18px;
+    font-weight:700;
+    color:var(--font-color);
+    margin-bottom:15px;
+    -webkit-line-clamp:1;
+    display:-webkit-box;
+    overflow:hidden;
+    -webkit-box-orient:vertical
+}
+.blog-slider__text {
+    color:var(--font-color);
+    -webkit-line-clamp:1;
+    display:-webkit-box;
+    overflow:hidden;
+    -webkit-box-orient:vertical;
+    margin-bottom:15px;
+    line-height:1.5em;
+    width:100%;
+    display:block;
+    word-break:break-all;
+    word-wrap:break-word
+}
+.blog-slider__button {
+    display:-webkit-inline-box;
+    display:-moz-inline-box;
+    display:-webkit-inline-flex;
+    display:-ms-inline-flexbox;
+    display:inline-box;
+    display:inline-flex;
+    background-color:var(--btn-bg);
+    padding:4px 14px;
+    border-radius:8px;
+    color:var(--btn-color);
+    text-decoration:none;
+    font-weight:500;
+    -webkit-box-pack:center;
+    -moz-box-pack:center;
+    -o-box-pack:center;
+    -ms-flex-pack:center;
+    -webkit-justify-content:center;
+    justify-content:center;
+    text-align:center;
+    letter-spacing:1px;
+    display:none
+}
+.blog-slider__button:hover {
+    background-color:var(--btn-hover-color);
+    color:var(--btn-color)
+}
+.blog-slider .swiper-container-horizontal>.swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
+    bottom:10px;
+    left:0;
+    width:100%
+}
+.blog-slider__pagination {
+    position:absolute;
+    z-index:21;
+    right:20px;
+    width:11px!important;
+    text-align:center;
+    left:auto!important;
+    top:50%;
+    bottom:auto!important;
+    -webkit-transform:translateY(-50%);
+    -moz-transform:translateY(-50%);
+    -o-transform:translateY(-50%);
+    -ms-transform:translateY(-50%);
+    transform:translateY(-50%)
+}
+.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin:8px 0
+}
+.blog-slider__pagination .swiper-pagination-bullet {
+    width:11px;
+    height:11px;
+    display:block;
+    border-radius:10px;
+    background:#858585;
+    opacity:.2;
+    -webkit-transition:all .3s;
+    -moz-transition:all .3s;
+    -o-transition:all .3s;
+    -ms-transition:all .3s;
+    transition:all .3s
+}
+.blog-slider__pagination .swiper-pagination-bullet-active {
+    opacity:1;
+    -ms-filter:none;
+    filter:none;
+    background:var(--btn-bg);
+    height:30px
+}
+@media screen and (max-width:600px) {
+    .blog-slider__pagination {
+        -webkit-transform:translateX(-50%);
+        -moz-transform:translateX(-50%);
+        -o-transform:translateX(-50%);
+        -ms-transform:translateX(-50%);
+        transform:translateX(-50%);
+        left:50%!important;
+        top:320px;
+        width:100%!important;
+        display:-webkit-box;
+        display:-moz-box;
+        display:-webkit-flex;
+        display:-ms-flexbox;
+        display:box;
+        display:flex;
+        -webkit-box-pack:center;
+        -moz-box-pack:center;
+        -o-box-pack:center;
+        -ms-flex-pack:center;
+        -webkit-justify-content:center;
+        justify-content:center;
+        -webkit-box-align:center;
+        -moz-box-align:center;
+        -o-box-align:center;
+        -ms-flex-align:center;
+        -webkit-align-items:center;
+        align-items:center
+    }
+    .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
+        margin:0 5px
+    }
+    .blog-slider__pagination .swiper-pagination-bullet-active {
+        height:11px;
+        width:30px
+    }
+    .blog-slider__button {
+        display:-webkit-inline-box;
+        display:-moz-inline-box;
+        display:-webkit-inline-flex;
+        display:-ms-inline-flexbox;
+        display:inline-box;
+        display:inline-flex;
+        width:100%
+    }
+    .blog-slider__text {
+        margin-bottom:40px
+    }
+    .blog-slider {
+        min-height:350px;
+        height:auto;
+        margin-top:110px;
+        margin-bottom:10px
+    }
+    .blog-slider__content {
+        margin-top:-80px;
+        text-align:center;
+        padding:0 30px
+    }
+    .blog-slider__item {
+        -webkit-box-orient:vertical;
+        -moz-box-orient:vertical;
+        -o-box-orient:vertical;
+        -webkit-flex-direction:column;
+        -ms-flex-direction:column;
+        flex-direction:column
+    }
+    .blog-slider__img {
+        -webkit-transform:translateY(-50%);
+        -moz-transform:translateY(-50%);
+        -o-transform:translateY(-50%);
+        -ms-transform:translateY(-50%);
+        transform:translateY(-50%);
+        width:90%
+    }
+    .blog-slider__content {
+        padding-left:10px;
+        padding-right:10px
+    }
+    .blog-slider__pagination.swiper-pagination-clickable.swiper-pagination-bullets {
+        top:110px
+    }
+}
+@media screen and (min-width:600px) {
+    .blog-slider {
+        height:200px
+    }
+    .blog-slider__img {
+        height:200px
+    }
+} */
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+#swiperBox {
+    padding: 0 !important
+}
+
+div#swiperBox:before {
+    content: '推荐';
+    position: absolute;
+    z-index: 2;
+    color: #fff;
+    background: linear-gradient(90deg, #ffb863, #ff7500);
+    top: 0;
+    letter-spacing: 3px;
+    left: 10px;
+    font-size: 15px;
+    width: 65px;
+    display: flex;
+    justify-content: center;
+    border-radius: 0 0 12px 12px;
+    -webkit-border-radius: 0 0 12px 12px;
+    -moz-border-radius: 0 0 12px 12px;
+    -ms-border-radius: 0 0 12px 12px;
+    -o-border-radius: 0 0 12px 12px;
+}
+
+div#swiper_container {
+    opacity: 1 !important;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition: all .3s
+}
+
+.blog-slider__pagination {
+    position: absolute;
+    bottom: 0 !important;
+    z-index: 21;
+    text-align: center
+}
+
+.blog-slider__pagination .swiper-pagination-bullet {
+    margin: 0 8px;
+    width: 11px;
+    height: 11px;
+    display: inline-block;
+    border-radius: 99px;
+    background: #fff;
+    opacity: .8;
+    transition: all .3s
+}
+
+.blog-slider__pagination .swiper-pagination-bullet-active {
+    opacity: 1;
+    background: var(--btn-bg);
+    width: 30px
+}
+
+.blog-slider__item {
+    background-size: cover !important;
+    background-position: center !important
+}
+
+.blog-slider__item::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .3);
+    z-index: -1;
+    left: 0;
+    top: 0;
+    border-radius: 12px;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    -ms-border-radius: 12px;
+    -o-border-radius: 12px;
+}
+
+.blog-slider__content {
+    padding: 0 50px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%
+}
+
+a.blog-slider__title {
+    font-size: 1.5rem
+}
+
+a.blog-slider__title:hover {
+    color: #fff
+}
+
+.blog-slider__code {
+    margin-bottom: 0;
+    display: block;
+    font-weight: 500
+}
+
+.blog-slider__text {
+    font-size: 18px
+}
+
+.blog-slider__content>* {
+    text-align: center;
+    line-height: 1.5;
+    margin: 2px 0;
+    color: #fff
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+    left: 2px;
+    transition: all .3s;
+    width: var(--swiper-navigation-size)
+}
+
+.swiper-button-next:hover,
+.swiper-button-prev:hover {
+    background: rgba(255, 255, 255, .3);
+    border-radius: 100%
+}
+
+.swiper-button-next:after,.swiper-button-prev:after {
+    font-size: 1.5rem;
+    color: var(--lyx-theme)
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+    right: 2px;
+    left: auto
+}
+
+@media screen and (max-width:768px) {
+    #swiperBox {
+        height: 12rem !important
+    }
+
+    a.blog-slider__title {
+        font-size: 1.3rem;
+        text-align: center
+    }
+
+    a.blog-slider__title:hover {
+        color: #fff
+    }
+
+    .blog-slider__content {
+        padding: 0 40px
+    }
+
+    .blog-slider__text {
+        display: none
+    }
+}