Showing
1 changed file
with
12 additions
and
4 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2024-08-27 10:06:30 | 2 | * @Date: 2024-08-27 10:06:30 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2024-10-24 16:34:09 | 4 | + * @LastEditTime: 2024-10-24 17:35:08 |
| 5 | * @FilePath: /hager/src/views/index.vue | 5 | * @FilePath: /hager/src/views/index.vue |
| 6 | * @Description: 首页 | 6 | * @Description: 首页 |
| 7 | --> | 7 | --> |
| ... | @@ -257,7 +257,8 @@ export default { | ... | @@ -257,7 +257,8 @@ export default { |
| 257 | // 高度监听 | 257 | // 高度监听 |
| 258 | this.$nextTick(() => { | 258 | this.$nextTick(() => { |
| 259 | this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px'; | 259 | this.product_box_height = $('.product-item').outerWidth() - $('.product-title').outerHeight() + 'px'; |
| 260 | - }) | 260 | + }); |
| 261 | + window.addEventListener('resize', this.handleHeightResize); | ||
| 261 | }, | 262 | }, |
| 262 | beforeDestroy() { | 263 | beforeDestroy() { |
| 263 | // 在组件销毁前移除监听器,防止内存泄漏 | 264 | // 在组件销毁前移除监听器,防止内存泄漏 |
| ... | @@ -564,10 +565,11 @@ export default { | ... | @@ -564,10 +565,11 @@ export default { |
| 564 | color: #333; | 565 | color: #333; |
| 565 | border-radius: 8px; | 566 | border-radius: 8px; |
| 566 | background-color: #f3f3f3; | 567 | background-color: #f3f3f3; |
| 567 | - transition: transform 0.3s ease-in-out; | 568 | + overflow: hidden; |
| 568 | &:hover { | 569 | &:hover { |
| 570 | + color: #F56400; | ||
| 569 | cursor: pointer; | 571 | cursor: pointer; |
| 570 | - transform: scale(1.05); | 572 | + // transform: scale(1.05); |
| 571 | // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | 573 | // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| 572 | } | 574 | } |
| 573 | &.xs { | 575 | &.xs { |
| ... | @@ -585,6 +587,12 @@ export default { | ... | @@ -585,6 +587,12 @@ export default { |
| 585 | background-repeat: no-repeat; | 587 | background-repeat: no-repeat; |
| 586 | border-top-left-radius: 5px; | 588 | border-top-left-radius: 5px; |
| 587 | border-top-right-radius: 5px; | 589 | border-top-right-radius: 5px; |
| 590 | + transition: transform 0.3s ease-in-out; | ||
| 591 | + &:hover { | ||
| 592 | + // cursor: pointer; | ||
| 593 | + transform: scale(1.05); | ||
| 594 | + // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| 595 | + } | ||
| 588 | } | 596 | } |
| 589 | } | 597 | } |
| 590 | 598 | ... | ... |
-
Please register or login to post a comment