diff --git a/assets/css/joe.index.css b/assets/css/joe.index.css index 36fe01a..b806394 100644 --- a/assets/css/joe.index.css +++ b/assets/css/joe.index.css @@ -1 +1 @@ -.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:flex;margin:0 -5px}.joe_index__hot-list .item{width:25%;padding:0 5px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px} +.joe_index{border-radius:var(--radius-wrap);padding:0 15px;background:var(--background);box-shadow:var(--box-shadow)}.joe_index__banner{padding-top:15px;display:flex}.joe_index__banner-recommend{width:270px;margin-left:15px;display:flex;flex-direction:column}.joe_index__banner-recommend.noswiper{width:100%;flex-direction:row;margin-left:0}.joe_index__banner-recommend.noswiper .item:first-child{margin-bottom:0;margin-right:7.5px}.joe_index__banner-recommend.noswiper .item:last-child{margin-left:7.5px}.joe_index__banner-recommend .item{position:relative;width:100%;height:160px;margin-bottom:15px;border-radius:var(--radius-inner);overflow:hidden}.joe_index__banner-recommend .item:last-child{margin-bottom:0}.joe_index__banner-recommend .item .thumbnail{display:block;width:100%;height:100%;transition:opacity 0.35s}.joe_index__banner-recommend .item .thumbnail img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.joe_index__banner-recommend .item .thumbnail:hover{opacity:0.85}.joe_index__banner-recommend .item .information{display:flex;align-items:center;position:absolute;z-index:1;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));color:#fff;line-height:20px}.joe_index__banner-recommend .item .information_type{background-image:linear-gradient(to right, #fc712a, #f84c39);background-color:#f84c39;padding:0 5px;height:20px;border-radius:2px;margin-right:5px;font-size:12px}.joe_index__banner-recommend .item .information_title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:14px}.joe_index__hot{padding-top:15px}.joe_index__hot-list{display:flex;margin:0 -5px}.joe_index__hot-list .item{width:25%;padding:0 5px}.joe_index__hot-list .item .link{display:block}.joe_index__hot-list .item .link .inner{position:relative}.joe_index__hot-list .item .link .inner:hover .image{opacity:0.85}.joe_index__hot-list .item .link .inner:hover .title{background:var(--classC)}.joe_index__hot-list .item .link .inner .image{width:100%;height:125px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner) var(--radius-inner) 0 0;transition:opacity 0.35s}.joe_index__hot-list .item .link .inner .title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;padding:0 8px;line-height:32px;color:var(--minor);background:var(--classD);border-radius:0 0 5px 5px;transition:background 0.35s}.joe_index__hot-list .item .link .inner .views{display:flex;align-items:center;position:absolute;z-index:1;top:5px;right:5px;background-image:linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3);color:#fff;font-size:12px;height:18px;padding:0 8px;border-radius:2px;white-space:nowrap}.joe_index__ad{padding-top:15px}.joe_index__ad-link{display:block;position:relative}.joe_index__ad-link .image{width:100%;height:200px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-inner);transition:opacity 0.35s}.joe_index__ad-link .image:hover{opacity:0.85}.joe_index__ad-link .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}.joe_index__title{display:flex;align-items:center;border-bottom:1px solid var(--classC)}.joe_index__title-title{position:relative;display:flex;align-items:center;color:var(--routine);font-weight:500;height:40px;line-height:40px}.joe_index__title-title .item{cursor:pointer;margin-right:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:color 0.35s}.joe_index__title-title .item.active{color:var(--theme)}.joe_index__title-title .line{position:absolute;bottom:-1px;left:0;height:2px;border-radius:1px;background:var(--theme);transition:left 0.35s, width 0.35s}.joe_index__title-notice{display:flex;align-items:center;margin-left:auto;height:40px}.joe_index__title-notice svg{min-width:20px;min-height:20px;width:20px;height:20px;margin-right:5px}.joe_index__title-notice a{color:var(--minor);line-height:20px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color 0.35s}.joe_index__title-notice a:hover{color:var(--theme)}.swiper-container{min-width:0;flex:1;height:335px;--swiper-theme-color: #fff;border-radius:var(--radius-inner)}.swiper-container .item{display:block;height:335px;border-radius:var(--radius-inner)}.swiper-container .item .thumbnail{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:opacity 0.35s}.swiper-container .item .thumbnail:hover{opacity:0.85}.swiper-container .item .title{position:absolute;z-index:1;left:0;right:0;bottom:0;text-align:center;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-size:15px;padding:10px;font-weight:normal}.swiper-container .item .icon{position:absolute;z-index:1;top:10px;left:10px;width:18px;height:18px;fill:#fff;opacity:0.5}.swiper-container.swiper-container-horizontal .swiper-pagination-bullets{bottom:unset;left:unset;width:auto;right:10px;top:10px}.swiper-container.swiper-container-vertical .swiper-button-next,.swiper-container.swiper-container-vertical .swiper-button-prev{display:none}.swiper-container .swiper-button-next,.swiper-container .swiper-button-prev{background:rgba(0,0,0,0.1);transition:background 0.35s, right 0.35s, left 0.35s;border-radius:2px}.swiper-container .swiper-button-next:hover,.swiper-container .swiper-button-prev:hover{background:rgba(0,0,0,0.25)}.swiper-container .swiper-button-next::after,.swiper-container .swiper-button-prev::after{font-size:20px}.swiper-container .swiper-button-next{right:-27px}.swiper-container .swiper-button-prev{left:-27px}.swiper-container:hover .swiper-button-next{right:10px}.swiper-container:hover .swiper-button-prev{left:10px} diff --git a/assets/css/joe.index.scss b/assets/css/joe.index.scss index 82d07ae..1356565 100644 --- a/assets/css/joe.index.scss +++ b/assets/css/joe.index.scss @@ -283,4 +283,36 @@ top: 10px; } } + &.swiper-container-vertical { + .swiper-button-next, + .swiper-button-prev { + display: none; + } + } + .swiper-button-next, + .swiper-button-prev { + background: rgba(0, 0, 0, 0.1); + transition: background 0.35s, right 0.35s, left 0.35s; + border-radius: 2px; + &:hover { + background: rgba(0, 0, 0, 0.25); + } + &::after { + font-size: 20px; + } + } + .swiper-button-next { + right: -27px; + } + .swiper-button-prev { + left: -27px; + } + &:hover { + .swiper-button-next { + right: 10px; + } + .swiper-button-prev { + left: 10px; + } + } } diff --git a/assets/js/joe.global.js b/assets/js/joe.global.js index 913c3ac..42a7755 100644 --- a/assets/js/joe.global.js +++ b/assets/js/joe.global.js @@ -317,6 +317,20 @@ document.addEventListener('DOMContentLoaded', () => { }); } + /* 切换标签显示不同的标题 */ + { + if (Joe.DOCUMENT_TITLE) { + const TITLE = document.title; + document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'hidden') { + document.title = Joe.DOCUMENT_TITLE; + } else { + document.title = TITLE; + } + }); + } + } + /* 懒加载 */ new LazyLoad('.lazyload'); diff --git a/assets/js/joe.index.js b/assets/js/joe.index.js index b38410d..5c58cee 100644 --- a/assets/js/joe.index.js +++ b/assets/js/joe.index.js @@ -1,42 +1,53 @@ /* 首页需要用到的JS */ -console.time("Index.js执行时长") +console.time('Index.js执行时长'); document.addEventListener('DOMContentLoaded', () => { - /* 激活轮播图功能 */ - { - if ($('.joe_index__banner .swiper-container').length !== 0) { - let direction = 'horizontal' - if (!Joe.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical' - new Swiper('.swiper-container', { keyboard: true, direction, loop: true, autoplay: true, mousewheel: true, pagination: { el: '.swiper-pagination' } }) - } - } + /* 激活轮播图功能 */ + { + if ($('.joe_index__banner .swiper-container').length !== 0) { + let direction = 'horizontal'; + if (!Joe.IS_MOBILE && $('.joe_index__banner-recommend .item').length === 2) direction = 'vertical'; + new Swiper('.swiper-container', { + keyboard: true, + direction, + loop: true, + autoplay: true, + mousewheel: true, + pagination: { el: '.swiper-pagination' }, + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev' + } + }); + } + } - /* 初始化首页列表功能 */ - { - let queryData = { page: 1, pageSize: 12, type: 'created' } - const initDom = () => { - $('.joe_index__list .joe_list').html('') - let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]') - let activeLine = $('.joe_index__title-title .line') - activeItem.addClass('active').siblings().removeClass('active') - activeLine.css({ left: activeItem.position().left, width: activeItem.width() }) - } - const pushDom = () => { - return new Promise((reslove, reject) => { - $('.joe_load').attr('loading', true) - $('.joe_load').html('加载中') - $('.joe_index__list .joe_list__loading').show() - $.ajax({ - url: Joe.BASE_API, - type: 'POST', - data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, - success(res) { - if (res.data.length === 0) { - $('.joe_load').remove() - $('.joe_index__list .joe_list__loading').hide() - return - } - res.data.forEach(_ => { - $('.joe_index__list .joe_list').append(` + /* 初始化首页列表功能 */ + { + let queryData = { page: 1, pageSize: 12, type: 'created' }; + const initDom = () => { + $('.joe_index__list .joe_list').html(''); + let activeItem = $('.joe_index__title-title .item[data-type="' + queryData.type + '"]'); + let activeLine = $('.joe_index__title-title .line'); + activeItem.addClass('active').siblings().removeClass('active'); + activeLine.css({ left: activeItem.position().left, width: activeItem.width() }); + }; + const pushDom = () => { + return new Promise((reslove, reject) => { + $('.joe_load').attr('loading', true); + $('.joe_load').html('加载中'); + $('.joe_index__list .joe_list__loading').show(); + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + data: { routeType: 'publish_list', page: queryData.page, pageSize: queryData.pageSize, type: queryData.type }, + success(res) { + if (res.data.length === 0) { + $('.joe_load').remove(); + $('.joe_index__list .joe_list__loading').hide(); + return; + } + res.data.forEach(_ => { + $('.joe_index__list .joe_list').append(`