update:优化图库加载
This commit is contained in:
jiewenhuang
parent
0df7af216c
commit
d6a4d45bb3
|
|
@ -72,6 +72,7 @@
|
|||
<th:block th:if="${htmlType == 'photos'}">
|
||||
<link rel="stylesheet" th:href="${source_link+'/assets/lib/justifiedGallery/justifiedGallery.min.css'}">
|
||||
<link rel="preload stylesheet" as="style" th:href="${source_link+'/assets/css/min/photos.min.css?v='+theme.spec.version}">
|
||||
|
||||
</th:block>
|
||||
<link rel="preload stylesheet" as="style" th:href="${source_link+'/assets/css/min/responsive.min.css?v='+theme.spec.version}">
|
||||
<link rel="stylesheet" th:href="${source_link+'/assets/lib/fancybox/jquery.fancybox.min.css'}">
|
||||
|
|
@ -88,199 +89,5 @@
|
|||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.sjs-default{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
transition: height .2s ease-out, opacity .2s ease-out .2s;
|
||||
}
|
||||
[data-sjsel]{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
.evan-friends .sub-text {
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.evan-friends .evan-f-left {
|
||||
width: 100px;
|
||||
min-width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.evan-friends .evan-f-left .f-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border: 2px solid #ffffff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.evan-f-left .f-avatar .avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.evan-friends .evan-f-right {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.evan-friends .joe_detail__friends-item .contain {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.evan-friends .joe_detail__friends-item .contain .title::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.evan-friends .title {
|
||||
max-width: 70%;
|
||||
min-width: 70%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.3em;
|
||||
color: var(--fcolor);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.evan-friends .title .icon {
|
||||
position: absolute;
|
||||
top: -1.6em;
|
||||
right: calc(50% - 1.5em);
|
||||
width: 1em;
|
||||
min-width: 1em;
|
||||
height: 1em;
|
||||
min-height: 1em;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #ffffff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.evan-friends .content {
|
||||
margin-top: 10px !important;
|
||||
font-size: 0.93em;
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
.evan-friends .joe_detail__friends-item .contain .content .desc {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.evan-friends .contain {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border: 1px solid var(--fcolor);
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
.evan-friends .contain:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
|
||||
}
|
||||
|
||||
.evan-friends .contain::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
background-color: var(--fcolor) !important;
|
||||
transform: scale(0);
|
||||
transition: all 0.5s ease-in-out;
|
||||
transform-origin: right bottom;
|
||||
border-bottom-left-radius: 12px;
|
||||
}
|
||||
|
||||
.evan-friends .contain:hover .f-avatar {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0px 2px 12px rgba(255,255,255,.5);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.evan-friends .contain {
|
||||
border-color:#ebeef5;
|
||||
}
|
||||
|
||||
.evan-friends .contain:hover {
|
||||
border-color: var(--fcolor);
|
||||
box-shadow: 0px 0px 20px -5px rgb(158 158 158 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.nav_login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 34px;
|
||||
/*background-color: var(--theme);*/
|
||||
/*margin-right: 10px;*/
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.nav_login a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background-color: #f2f2f2;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 24px;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.nav_login .login_before:hover {
|
||||
background-color: var(--theme);
|
||||
color: #f2f2f2;
|
||||
}
|
||||
.nav_login img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</th:block>
|
||||
</html>
|
||||
|
|
@ -43,6 +43,9 @@
|
|||
<!--相册-->
|
||||
<th:block th:if="${htmlType == 'photos'}">
|
||||
<script th:src="${source_link+'/assets/lib/justifiedGallery/justifiedGallery.min.js'}"></script>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
|
||||
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
|
||||
|
||||
</th:block>
|
||||
|
||||
|
|
@ -73,7 +76,6 @@
|
|||
<th:block th:if="${theme.config.beauty.enable_big_banner}">
|
||||
<script th:src="${source_link+'/assets/js/min/beauty.min.js'}"></script>
|
||||
</th:block>
|
||||
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
|
||||
|
||||
<!-- ===== 引入页面级js end ===== -->
|
||||
|
||||
|
|
@ -99,6 +101,7 @@
|
|||
<!-- vconsole -->
|
||||
<script th:src="${source_link+'/assets/lib/vconsole/vconsole.min.js'}"></script>
|
||||
</th:block>
|
||||
|
||||
<!--搜索点击-->
|
||||
<script>
|
||||
const searchButton = document.getElementById("halo-search");
|
||||
|
|
@ -129,9 +132,6 @@
|
|||
|
||||
</script>
|
||||
<th:block th:if="${htmlType == 'photos'}">
|
||||
<script type="text/javascript">
|
||||
document.querySelector('#sortable').sortablejs()
|
||||
</script>
|
||||
</th:block>
|
||||
<script type="text/javascript" th:if="${theme.config.home.enable_auto_ajax} and ${theme.config.home.enable_index_list_ajax}">
|
||||
const ob = new IntersectionObserver(entries => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue