diff --git a/web/src/assets/css/images-wall.css b/web/src/assets/css/images-wall.css index f6ea6bee..435bdd59 100644 --- a/web/src/assets/css/images-wall.css +++ b/web/src/assets/css/images-wall.css @@ -31,6 +31,52 @@ overflow-y: auto; overflow-x: hidden; } +.page-images-wall .inner .waterfall .list-item .image { + overflow: hidden; +} +.page-images-wall .inner .waterfall .list-item .image .el-image { + transition: transform 0.3s; +} +.page-images-wall .inner .waterfall .list-item .prompt { + display: none; + position: absolute; + bottom: 0; + color: #fff; + padding: 10px 10px 20px 10px; + line-height: 1.2; + background-color: rgba(10,10,10,0.7); +} +.page-images-wall .inner .waterfall .list-item .prompt .el-icon { + position: absolute; + bottom: 10px; + right: 10px; + cursor: pointer; + border: 1px solid #fff; + border-radius: 5px; + padding: 2px; + font-size: 12px; +} +.page-images-wall .inner .waterfall .list-item .prompt .el-icon:hover { + background-color: #999; +} +.page-images-wall .inner .waterfall .list-item:hover .prompt { + display: block; + animation: expandUp 0.3s ease-in-out forwards; + transform-origin: bottom center; + transform: scaleY(0); /* 初始状态，元素高度为0 */ +} +.page-images-wall .inner .waterfall .list-item:hover .image .el-image { + transform: scale(1.2); /* 放大图像到1.2倍大小 */ +} +.page-images-wall .inner .waterfall .footer { + display: flex; + padding: 20px; + align-items: center; + justify-content: center; +} +.page-images-wall .inner .waterfall .footer .iconfont { + margin-left: 6px; +} .page-images-wall .custom-scroll ::-webkit-scrollbar { width: 10px; /* 滚动条宽度 */ } @@ -44,3 +90,35 @@ .page-images-wall .custom-scroll ::-webkit-scrollbar-thumb:hover { background-color: #666; } +@-moz-keyframes expandUp { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} +@-webkit-keyframes expandUp { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} +@-o-keyframes expandUp { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} +@keyframes expandUp { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} diff --git a/web/src/assets/css/images-wall.styl b/web/src/assets/css/images-wall.styl index f89890d6..0b56ca91 100644 --- a/web/src/assets/css/images-wall.styl +++ b/web/src/assets/css/images-wall.styl @@ -1,3 +1,12 @@ +@keyframes expandUp { + 0% { + transform: scaleY(0); + } + 100% { + transform: scaleY(1); + } +} + .page-images-wall { display: flex; background-color: #282c34; @@ -36,6 +45,69 @@ margin: 0 auto; overflow-y auto overflow-x hidden + + .list-item { + + .image { + overflow hidden + + .el-image { + transition: transform 0.3s; + } + } + + .prompt { + display none + position absolute + bottom 0 + color #ffffff + padding 10px 10px 20px 10px + line-height 1.2 + background-color rgba(10, 10, 10, 0.7) + + .el-icon { + position absolute + bottom 10px + right 10px + cursor pointer + border 1px solid #ffffff + border-radius 5px + padding 2px + font-size 12px; + + &:hover { + background-color #999999 + } + } + } + + &:hover { + .prompt { + display block + animation: expandUp 0.3s ease-in-out forwards; + transform-origin: bottom center; + transform: scaleY(0); /* 初始状态，元素高度为0 */ + } + + .image { + .el-image { + transform: scale(1.2); /* 放大图像到1.2倍大小 */ + } + } + } + } + + + .footer { + display flex + padding 20px + align-items center + justify-content center + + .iconfont { + margin-left 6px + } + } } } diff --git a/web/src/assets/iconfont/iconfont.css b/web/src/assets/iconfont/iconfont.css index 4d28caa1..d1a46df2 100644 --- a/web/src/assets/iconfont/iconfont.css +++ b/web/src/assets/iconfont/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4125778 */ - src: url('iconfont.woff2?t=1694420182193') format('woff2'), - url('iconfont.woff?t=1694420182193') format('woff'), - url('iconfont.ttf?t=1694420182193') format('truetype'); + src: url('iconfont.woff2?t=1697164072791') format('woff2'), + url('iconfont.woff?t=1697164072791') format('woff'), + url('iconfont.ttf?t=1697164072791') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-face:before { + content: "\e64b"; +} + .icon-book:before { content: "\e622"; } diff --git a/web/src/assets/iconfont/iconfont.js b/web/src/assets/iconfont/iconfont.js index ac62274a..a2a5be82 100644 --- a/web/src/assets/iconfont/iconfont.js +++ b/web/src/assets/iconfont/iconfont.js @@ -1 +1 @@ -window._iconfont_svg_string_4125778='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,o,i,h,e,s=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}t=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_4125778,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?s(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),t()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=t,h=a.document,e=!1,z(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,m())})}function m(){e||(e=!0,i())}function z(){try{h.documentElement.doScroll("left")}catch(l){return void setTimeout(z,50)}m()}}(window); \ No newline at end of file +window._iconfont_svg_string_4125778='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,o,i,h,e,s=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}t=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_4125778,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?s(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(o=function(){document.removeEventListener("DOMContentLoaded",o,!1),t()},document.addEventListener("DOMContentLoaded",o,!1)):document.attachEvent&&(i=t,h=a.document,e=!1,z(),h.onreadystatechange=function(){"complete"==h.readyState&&(h.onreadystatechange=null,m())})}function m(){e||(e=!0,i())}function z(){try{h.documentElement.doScroll("left")}catch(l){return void setTimeout(z,50)}m()}}(window); \ No newline at end of file diff --git a/web/src/assets/iconfont/iconfont.json b/web/src/assets/iconfont/iconfont.json index fc030e12..951e07cf 100644 --- a/web/src/assets/iconfont/iconfont.json +++ b/web/src/assets/iconfont/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon-", "description": "", "glyphs": [ + { + "icon_id": "845789", + "name": "笑脸", + "font_class": "face", + "unicode": "e64b", + "unicode_decimal": 58955 + }, { "icon_id": "11836501", "name": "知识库", diff --git a/web/src/assets/iconfont/iconfont.ttf b/web/src/assets/iconfont/iconfont.ttf index cb76497b..4715297f 100644 Binary files a/web/src/assets/iconfont/iconfont.ttf and b/web/src/assets/iconfont/iconfont.ttf differ diff --git a/web/src/assets/iconfont/iconfont.woff b/web/src/assets/iconfont/iconfont.woff index 938a4790..5d590d04 100644 Binary files a/web/src/assets/iconfont/iconfont.woff and b/web/src/assets/iconfont/iconfont.woff differ diff --git a/web/src/assets/iconfont/iconfont.woff2 b/web/src/assets/iconfont/iconfont.woff2 index 48562411..4ec8bc72 100644 Binary files a/web/src/assets/iconfont/iconfont.woff2 and b/web/src/assets/iconfont/iconfont.woff2 differ diff --git a/web/src/views/ImagesWall.vue b/web/src/views/ImagesWall.vue index 6d4f51e2..32f7d547 100644 --- a/web/src/views/ImagesWall.vue +++ b/web/src/views/ImagesWall.vue @@ -12,29 +12,45 @@ + :distanceToScroll="200" :isLoading="loading" :isOver="over" @scrollReachBottom="getNext"> + + @@ -43,16 +59,17 @@