前：
后;
<div class="basic-contain-box"><div class="basic-contain"><div class="basic-left-img"><img :src="editUserName" class="drawer-contain-img first"><img :src="editUserName1" class="drawer-contain-img hidden second"></div><div class="basic-left-title">用户昵称</div><div class="basic-center-content">内容</div><div class="basic-right-button">修改</div></div></div>
import editUserName from "../../assets/png/editUserName.png";
import editUserName1 from "../../assets/png/editUserName1.png";export default {data() {return {editUserName: editUserName,editUserName1: editUserName1,};},}
.basic-contain-box {width: 100%;height: 80%;padding-left: 3rem;.basic-contain{height: 100%;width: 100%;display: flex;font-size: 1rem;.basic-left-img{width: 1vw;display: flex;justify-content: flex-start;position: relative;align-items: center;margin-right: 1rem;.drawer-contain-img {height: 1rem;width: 1rem;position: absolute;transition: opacity 0.3s ease; // 添加过渡效果&.first {z-index: 2;}&.hidden {opacity: 0; // 初始隐藏，但仍在DOM中占据空间z-index: 1;}}}.basic-left-title{width: 10%;display: flex;align-items: center;}.basic-center-content{width: 10%;display: flex;align-items: center;}.basic-right-button{width: 10%;display: flex;align-items: center;}}.basic-contain:hover {color: #3a63b3;cursor: pointer;&:hover .drawer-contain-img {&.first {opacity: 0; // 悬浮时隐藏第一张}&.hidden {opacity: 1; // 悬浮时显示第二张}}}}
