z-index层级顺序 opacity透明度 display: none 模态框实现

最新推荐文章于 2022-12-21 15:11:18 发布
转载 最新推荐文章于 2022-12-21 15:11:18 发布 · 290 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/my-love-is-python/p/9291320.html

本文介绍了一个使用HTML进行页面布局的例子，展示了如何通过设置div元素的样式实现特定的页面布局效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <div style=" display: none; z-index: 10; position: fixed; top: 50%; left:50%; margin-top:-200px; margin-left: -250px; background-color: white;height: 400px; width: 500px;

     "></div>
    <div style=" display: none; z-index:9; position: fixed; background-color: black;
     top:0;
     left:0;
     bottom:0;
     right:0;
     opacity: 0.5; "></div>
    <div style="height: 5000px; background-color: greenyellow">
        sdada
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/my-love-is-python/p/9291320.html

Bootstrap 模态框(Modal)深度解析：7种高级用法
AI架构全栈开发实战笔记
05-24 1054
Bootstrap模态框的基础用法（如通过触发、基础样式配置）在官方文档中已有详细说明，但实际开发中我们常遇到更复杂的需求：动态生成模态内容、多层嵌套模态、与表单验证深度集成、自定义动画效果等。本文将聚焦这些「官方文档没说透」的场景，结合源码级解析和实战案例，帮你掌握模态框的「进阶生存技能」。本文将按照「原理拆解→高级用法→实战案例→避坑指南」的逻辑展开：首先用「快递柜取件」的生活案例类比模态框工作原理；然后通过7个具体场景（动态创建、嵌套模态等）讲解高级用法，每个场景包含代码示例和底层逻辑分析；
CSS中 opacity的设置影响了index（层数）的改变的问题总结（推荐）
09-27
主要介绍了CSS中 opacity的设置影响了index（层数）的改变的问题，通过各种情况出现的问题进行了总结并附上了代码，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
层级 z-index 透明opacity
weixin_30814329的博客
04-18 249
在正常情况下，层级的大小由顺序决定，后面的元素要比前面的元素的层级要高 有定位元素的层级要比没有定位元素层级要高 在都有定位的情况下，层级还是取决于书写顺序 z-index 层级(仅能在定位元素上奏效，就是该元素的定位值为relative、absolute、或者fixed)， z-index在父元素定位为relative(改成absolute)，或者本身还有浮动(去掉浮动...
利用Z-index，position，opacity实现双重显示界面
任天柳
03-06 470
知识储备 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远.Z-index 仅能在定位元素中生效。 position的属性值应该设为fixed; absolute 生成绝对定位的元素，相对于 sta...
2022.2.10 z-inde与opacity
weixin_43316867的博客
02-10 259
z-index:可以设置元素的叠加顺序，但依赖定位属性。 z-index大的元素会覆盖z-index小的元素 z-index为auto的元素不参与层级比较 z-index为负值，元素被普通流中的元素覆盖 z-index支持负值； z-index支持CSS3 animation动画； z-index：auto；默认值，如果不对z-index设置，默认为auto； z-index：；整数值，z-index：1，z-index：2等 z-index：inherit；继承 7阶层叠水平（stacking le
图层的优先级z-index 和 透明度opacity
qq_45326705的博客
10-31 294
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{ padding: 0px; font-size: 12px; } #img1{ p.
<style> /* 使用唯一前缀避免样式冲突 */ .fp-carousel-module { position: relative; width: 100%; max-width: 80%; height: 500px; overflow: hidden; margin: 20px auto; perspective: 1200px; box-sizing: border-box; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .fp-carousel-module .fp-carousel-container { position: relative; width: 100%; height: 100%; isolation: isolate; /* 创建新的层叠上下文 */ } .fp-carousel-module .fp-carousel-item { position: absolute; top: 50%; left: 50%; width: 60%; height: 80%; transform: translate(-50%, -50%); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.7s ease, opacity 0.7s ease; z-index: 1; overflow: hidden; background: #fff; will-change: transform; cursor: pointer; } .fp-carousel-module .fp-carousel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .fp-carousel-module .fp-description { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white; padding: 20px 15px 15px; transform: translateY(100%); transition: transform 0.5s ease-out; text-align: center; font-size: 16px; font-weight: 500; pointer-events: none; } /* 当前激活项样式 */ .fp-carousel-module .fp-carousel-item.fp-active { transform: translate(-50%, -50%) scale(1.15); z-index: 100; box-shadow: 0 25px 50px rgba(0,0,0,0.3); cursor: default; } .fp-carousel-module .fp-carousel-item.fp-active .fp-description { transform: translateY(0); } /* 堆叠项样式 */ .fp-carousel-module .fp-carousel-item.fp-prev { transform: translate(calc(-150% - 30px), -50%) scale(0.85); z-index: 20; opacity: 0.85; filter: blur(1px); } .fp-carousel-module .fp-carousel-item.fp-next { transform: translate(calc(50% + 30px), -50%) scale(0.85); z-index: 20; opacity: 0.85; filter: blur(1px); } .fp-carousel-module .fp-carousel-item.fp-prev-far { transform: translate(calc(-250% - 60px), -50%) scale(0.7); z-index: 15; opacity: 0.7; filter: blur(2px); } .fp-carousel-module .fp-carousel-item.fp-next-far { transform: translate(calc(150% + 60px), -50%) scale(0.7); z-index: 15; opacity: 0.7; filter: blur(2px); } .fp-carousel-module .fp-carousel-item.fp-hidden { opacity: 0; z-index: 0; transform: translate(calc(-50% + 300px), -50%) scale(0.5); } /* 悬停效果 */ .fp-carousel-module .fp-carousel-item.fp-prev::after, .fp-carousel-module .fp-carousel-item.fp-next::after, .fp-carousel-module .fp-carousel-item.fp-prev-far::after, .fp-carousel-module .fp-carousel-item.fp-next-far::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); transition: background 0.3s ease; } .fp-carousel-module .fp-carousel-item.fp-prev:hover::after, .fp-carousel-module .fp-carousel-item.fp-next:hover::after, .fp-carousel-module .fp-carousel-item.fp-prev-far:hover::after, .fp-carousel-module .fp-carousel-item.fp-next-far:hover::after { background: rgba(255,255,255,0.3); } /* 导航按钮 */ .fp-carousel-module .fp-nav-btn { position: absolute; top: 0; height: 100%; width: 15%; z-index: 200; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease; } .fp-carousel-module .fp-nav-btn::before { content: ''; position: absolute; top: 0; bottom: 0; width: 100%; z-index: -1; } .fp-carousel-module .fp-nav-btn:hover { opacity: 1; } .fp-carousel-module .fp-nav-btn.fp-prev-btn { left: 0; } .fp-carousel-module .fp-nav-btn.fp-prev-btn::before { background: linear-gradient(90deg, rgba(0,0,0,0.4), transparent); } .fp-carousel-module .fp-nav-btn.fp-prev-btn .fp-arrow { transform: rotate(180deg); margin-left: -20px; } .fp-carousel-module .fp-nav-btn.fp-next-btn { right: 0; } .fp-carousel-module .fp-nav-btn.fp-next-btn::before { background: linear-gradient(270deg, rgba(0,0,0,0.4), transparent); } .fp-carousel-module .fp-arrow { display: block; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.2); pointer-events: auto; transition: transform 0.2s ease, background 0.2s ease; } .fp-carousel-module .fp-arrow:hover { background: rgba(255,255,255,1); transform: scale(1.1); } /* 响应式设计 */ @media (max-width: 768px) { .fp-carousel-module { height: 400px; } .fp-carousel-module .fp-carousel-item { width: 70%; height: 85%; } .fp-carousel-module .fp-nav-btn { width: 20%; } } @media (max-width: 480px) { .fp-carousel-module { height: 300px; } .fp-carousel-module .fp-carousel-item { width: 85%; height: 90%; } .fp-carousel-module .fp-description { font-size: 14px; padding: 15px 10px 10px; } } </style> <div class="fp-carousel-module"> <div class="fp-carousel-container"> <div class="fp-carousel-item fp-active" data-index="0"> <img src="https://picsum.photos/id/1015/1000/750" alt="Mountain View"> <div class="fp-description">Majestic mountain range at sunrise</div> </div> <div class="fp-carousel-item fp-next" data-index="1"> <img src="https://picsum.photos/id/1035/1000/750" alt="Ocean Waves"> <div class="fp-description">Turquoise ocean waves crashing on rocks</div> </div> <div class="fp-carousel-item fp-next-far" data-index="2"> <img src="https://picsum.photos/id/1040/1000/750" alt="Forest Path"> <div class="fp-description">Mystical forest path covered in moss</div> </div> <div class="fp-carousel-item fp-prev" data-index="3"> <img src="https://picsum.photos/id/1031/1000/750" alt="Desert Dunes"> <div class="fp-description">Golden desert dunes at sunset</div> </div> <div class="fp-carousel-item fp-prev-far" data-index="4"> <img src="https://picsum.photos/id/1018/1000/750" alt="City Skyline"> <div class="fp-description">Urban city skyline at twilight</div> </div> <div class="fp-nav-btn fp-prev-btn"> <div class="fp-arrow">❮</div> </div> <div class="fp-nav-btn fp-next-btn"> <div class="fp-arrow">❯</div> </div> </div> </div> <script> (function() { // 封装整个轮播逻辑避免全局污染 const initCarousel = function(module) { const container = module.querySelector('.fp-carousel-container'); const items = Array.from(module.querySelectorAll('.fp-carousel-item')); const prevBtn = module.querySelector('.fp-prev-btn'); const nextBtn = module.querySelector('.fp-next-btn'); let currentIndex = 0; // 初始化位置 updatePositions(); // 事件绑定函数 const bindEvents = function() { // 图片点击事件 items.forEach(item => { item.addEventListener('click', function(e) { e.stopPropagation(); if (this.classList.contains('fp-next') || this.classList.contains('fp-next-far')) { navigate(1); } else if (this.classList.contains('fp-prev') || this.classList.contains('fp-prev-far')) { navigate(-1); } }); }); // 容器区域点击 container.addEventListener('click', function(e) { const rect = container.getBoundingClientRect(); const clickX = e.clientX - rect.left; if (clickX > rect.width * 3/4) { navigate(1); } else if (clickX < rect.width * 1/4) { navigate(-1); } }); // 导航按钮 prevBtn.addEventListener('click', function(e) { e.stopPropagation(); navigate(-1); }); nextBtn.addEventListener('click', function(e) { e.stopPropagation(); navigate(1); }); // 键盘导航 - 仅在当前轮播激活时响应 document.addEventListener('keydown', function(e) { // 检查事件是否发生在当前轮播模块内 if (document.activeElement.closest('.fp-carousel-module') !== module) return; if (e.key === 'ArrowLeft') { navigate(-1); } else if (e.key === 'ArrowRight') { navigate(1); } }); // 响应式调整 window.addEventListener('resize', function() { updatePositions(); }); }; // 导航函数 function navigate(direction) { currentIndex = (currentIndex + direction + items.length) % items.length; updatePositions(); } // 更新位置 function updatePositions() { items.forEach((item, index) => { item.classList.remove('fp-active', 'fp-prev', 'fp-next', 'fp-prev-far', 'fp-next-far', 'fp-hidden'); const position = (index - currentIndex + items.length) % items.length; if (position === 0) { item.classList.add('fp-active'); } else if (position === 1) { item.classList.add('fp-next'); } else if (position === 2) { item.classList.add('fp-next-far'); } else if (position === items.length - 1) { item.classList.add('fp-prev'); } else if (position === items.length - 2) { item.classList.add('fp-prev-far'); } else { item.classList.add('fp-hidden'); } }); } // 初始化事件绑定 bindEvents(); }; // 初始化页面上的所有轮播模块 document.querySelectorAll('.fp-carousel-module').forEach(initCarousel); })(); </script> 这段代码表现出的容器右边上下两个圆角出现闪烁问题怎么修改？左边的箭头方向错了
06-15
右边上下两个圆角出现闪烁问题：可能是由于在轮播过程中，相邻的轮播项在切换时，由于层级（z-index）的变化或者变换（transform）过程中，圆角部分被相邻项覆盖导致的。观察代码，每个轮播项都有圆角样式（border-...
请帮助我把每一行代码写上注释：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link href="./1321.css" type="text/css"/> --> <title>导航栏</title> <style> *{ margin: 0; padding: 0; box-sizing:border-box; font-family:"Poppins",sans-serif; } .cantainer{ width:100%; height:100vh; background-color: #e092a1; background-size: 100% 100%; display:flex; align-items: center; justify-content: center; } nav{ background: #fff; border-radius: 50px; padding: 10px; box-shadow: 0 25px 20ox -20px rgba(0 , 0, 0, 0.4); } nav ul li{ list-style: none; display: inline-block; padding: 13px 35px; margin: 10px; font-size: 18px; font-weight: 500; color: #777; cursor: pointer; position: relative; z-index: 2; transform: color 0.5s; } nav ul li::after{ content:''; background:#f44566; width: 100%; height: 100%; border-radius: 30px; position: absolute; top: 100%; left: 50%; transform: translate(-50% ,-50%); z-index: -1; opacity: 0; transition:top 0.5s,opacity 0.5s; } nav ul li:hover{ color: #fff; } nav ul li:hover:after{ top:50%; opacity: 1; } a{ text-decoration: none; color: #706363; text-decoration: none; } .enen{ width: 10%; height: 10%; } </style> </head> <body> <div class="cantainer"> <nav> <ul> <li ><a href="">1</a></li> <li ><a href="">2</a></li> <li ><a href="">3</a></li> <li ><a href="">4</a></li> <li ><a href="">5</a></li> <li ><a href="" >6</a></li> </ul> </nav> </div> </body> </html>
05-30
after，背景色为 #f44566，宽度与高度为 100%，圆角为 30px，定位方式为绝对定位，距离顶部为 100%，距离左侧为 50%，通过 translate 偏移自身宽高的一半，层级为 -1，不透明度为 0，设置 top 与 opacity 变化过渡...
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; overflow: hidden; font-family: sans-serif; cursor: ew-resize; /* 添加左右箭头光标 */ } header { position: fixed; width: 100%; background: rgba(0,0,0,0.3); z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 15px 40px; } .logo { color: white; font-size: 1.8rem; font-weight: bold; text-decoration: none; } nav { display: flex; gap: 30px; background: transparent; } nav a { color: white; font-size: 1.1rem; text-decoration: none; padding: 8px 12px; transition: all 0.3s ease; } nav a:hover { background: rgba(255,255,255,0.1); border-radius: 4px; cursor: pointer; } .image-container { position: relative; width: 100vw; height: 100vh; overflow: hidden; /* 添加拖动提示效果 */ background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%); background-size: 200% 100%; animation: dragHint 3s infinite; } .image-container img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); transform: translateX(0); z-index: 1; } .image-container img.active { z-index: 3; /* 当前图片在顶层 */ } .image-container img.prev { z-index: 2; /* 前一张在中间层 */ transform: translateX(-100%); } .image-container img.next { z-index: 2; /* 后一张在中间层 */ transform: translateX(100%); } .title-container { position: absolute; top: 140px; left: 40px; z-index: 4; /* 标题在最顶层 */ max-width: 60%; } .main-title { font-size: 2.4rem; color: white; font-weight: bold; margin-bottom: 10px; text-shadow: 1px 1px 4px rgba(0,0,0,0.5); transition: transform 0.8s ease, opacity 0.8s ease; } .sub-title { font-size: 1.2rem; color: rgba(255,255,255,0.9); font-style: italic; transition: transform 0.8s ease, opacity 0.8s ease; } /* 拖动提示动画 */ @keyframes dragHint { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } } /* 光标提示区域 */ .drag-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 5; background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: 30px; color: white; font-size: 1rem; display: flex; align-items: center; gap: 10px; } .drag-indicator::after { content: "← 移动鼠标 · 查看更多 →"; } @media (max-width: 768px) { .main-title { font-size: 1.8rem; } .sub-title { font-size: 1rem; } .title-container { top: 140px; } header { padding: 15px 20px; } .drag-indicator { font-size: 0.8rem; } } </style> </head> <body> <div class="image-container"> <div class="title-container"> <div class="main-title" id="mainTitle">标题1</div> <div class="sub-title" id="subTitle">副标题1</div> </div> <div class="drag-indicator"></div> </div> <script> // 10张图片数据 const images = [ { src: 'img/1.jpg', title: '', subtitle: '' }, { src: 'img/2.jpg', title: '', subtitle: '' }, { src: 'img/3.jpg', title: '', subtitle: '' }, { src: 'img/4.jpg', title: '', subtitle: '' }, { src: 'img/5.jpg', title: '', subtitle: '' }, { src: 'img/6.jpg', title: '', subtitle: '' }, { src: 'img/7.jpg', title: '', subtitle: '' }, { src: 'img/8.jpg', title: '', subtitle: '' } ]; let currentIndex = 0; let isAnimating = false; let lastX = null; // 记录上次鼠标位置 const container = document.querySelector('.image-container'); const mainTitle = document.getElementById('mainTitle'); const subTitle = document.getElementById('subTitle'); // 动态生成图片元素 images.forEach((img, index) => { const imgElement = document.createElement('img'); imgElement.src = img.src; imgElement.dataset.index = index; container.appendChild(imgElement); }); const imgElements = document.querySelectorAll('.image-container img'); // 初始化层级状态 function initSlider() { imgElements.forEach((img, i) => { img.classList.remove('active', 'prev', 'next'); if (i === currentIndex) { img.classList.add('active'); } else if (i === (currentIndex - 1 + images.length) % images.length) { img.classList.add('prev'); } else if (i === (currentIndex + 1) % images.length) { img.classList.add('next'); } }); updateTitles(); } function updateTitles() { mainTitle.textContent = images[currentIndex].title; subTitle.textContent = images[currentIndex].subtitle; } function changeSlide(direction) { if (isAnimating) return; isAnimating = true; // 添加标题动画效果 mainTitle.style.transform = 'translateY(-20px)'; mainTitle.style.opacity = '0'; subTitle.style.transform = 'translateY(20px)'; subTitle.style.opacity = '0'; // 计算新索引 const prevIndex = currentIndex; if (direction === 'right') { currentIndex = (currentIndex - 1 + images.length) % images.length; } else { currentIndex = (currentIndex + 1) % images.length; } // 获取新旧图片元素 const currentImg = imgElements[prevIndex]; const nextImg = imgElements[currentIndex]; // 设置层级关系 currentImg.style.zIndex = '2'; nextImg.style.zIndex = '3'; // 设置动画方向 if (direction === 'right') { currentImg.style.transform = 'translateX(100%)'; nextImg.style.transform = 'translateX(0)'; } else { currentImg.style.transform = 'translateX(-100%)'; nextImg.style.transform = 'translateX(0)'; } // 动画结束后重置状态 setTimeout(() => { // 重置所有图片状态 imgElements.forEach(img => { img.classList.remove('active', 'prev', 'next'); img.style.transform = ''; img.style.zIndex = ''; }); // 设置新层级状态 currentImg.classList.add(direction === 'right' ? 'next' : 'prev'); nextImg.classList.add('active'); // 设置相邻图片 const prevIndex = (currentIndex - 1 + images.length) % images.length; const nextIndex = (currentIndex + 1) % images.length; imgElements[prevIndex].classList.add('prev'); imgElements[nextIndex].classList.add('next'); // 重置标题状态 mainTitle.style.transform = ''; mainTitle.style.opacity = ''; subTitle.style.transform = ''; subTitle.style.opacity = ''; updateTitles(); isAnimating = false; }, 800); // 动画时间改为0.8秒 } // 鼠标移动事件处理函数 function handleMouseMove(e) { if (!lastX) { lastX = e.clientX; // 第一次移动时记录起点 return; } const dragDistance = e.clientX - lastX; // 拖动超过50px时切换图片 if (Math.abs(dragDistance) > 30) { const direction = dragDistance > 0 ? 'right' : 'left'; changeSlide(direction); lastX = e.clientX; // 重置起点 } } // 添加鼠标移动监听 container.addEventListener('mousemove', handleMouseMove); // 初始化轮播 initSlider(); </script> </body> </html> 现在的图片切换效果是推出效果，我想改成覆盖效果，其他不变，不要图片标题了 去掉多余的代码；
06-25
然后通过改变z-index和透明度（或其他覆盖效果）来实现覆盖动画。3.简化代码：只保留必要的轮播功能，移除标题等无关元素。覆盖动画实现方式：我们可以使用CSS关键帧动画，当切换图片时，新图片以某种方式（例如从...
<template> <view class="container"> <!-- 顶部用户信息区域 --> <view class="user-info-section"> <view class="avatar-container"> <image src="/static/workbanch/banner/workbench/4.jpg" class="avatar-image" mode="aspectFill" /> <view class="avatar-frame"></view> </view> <!-- 用户信息 --> <view class="user-details"> <text class="welcome-text">您好，</text> <text class="username">{{ userName || '加载中...' }}</text> <view class="user-meta"> <text class="user-role">{{ userRole }}</text> <text class="user-dept">{{ userDept }}</text> <text class="user-phone" v-if="userPhone">电话：{{ userPhone }}</text> </view> </view> </view> <!-- 功能板块区域 --> <view class="function-section"> <!-- 重置密码按钮 --> <view class="function-item" @click="handleResetPassword" @touchstart="handleTouchStart('reset')" @touchend="handleTouchEnd('reset')" > <view class="item-left"> <image src="/static/workbanch/icons/reset-password.png" class="item-icon" /> <text class="item-text">重置密码</text> </view> <view class="arrow-icon">›</view> </view> <!-- 分隔线 --> <view class="divider"></view> <!-- 退出登录按钮 --> <view class="function-item logout-item" @click="handleLogout" @touchstart="handleTouchStart('logout')" @touchend="handleTouchEnd('logout')" > <view class="item-left"> <image src="/static/workbanch/icons/logout.png" class="item-icon" /> <text class="item-text">退出登录</text> </view> <view class="arrow-icon">›</view> </view> </view> <!-- 这里添加了function-section的结束标签 --> <!-- 重置密码弹窗 (优化后的布局) --> <view v-if="showResetModal" class="modal-overlay" @click.self="closeResetModal"> <view class="modal-content"> <view class="modal-header"> <text class="modal-title">重置密码</text> <text class="modal-close" @click="closeResetModal">×</text> </view> <view class="input-group"> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="oldPassword" type="password" placeholder="请输入旧密码" class="password-input" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @click="togglePasswordVisibility('old')"> <image :src="showOldPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="newPassword" type="password" placeholder="请输入新密码（6-20位）" class="password-input" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @click="togglePasswordVisibility('new')"> <image :src="showNewPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> <view class="input-item"> <image src="/static/workbanch/icons/lock.png" class="input-icon" /> <input v-model="confirmPassword" type="password" placeholder="请确认新密码" class="password-input" placeholder-style="color: #aaa;" /> <view class="eye-icon-wrapper" @click="togglePasswordVisibility('confirm')"> <image :src="showConfirmPassword ? '/static/workbanch/icons/eye-open.png' : '/static/workbanch/icons/eye-close.png'" class="eye-icon" /> </view> </view> </view> <view class="modal-buttons"> <button class="cancel-btn" @click="closeResetModal">取消</button> <button class="confirm-btn" @click="submitResetPassword">确定</button> </view> </view> </view> </view> </template> <script setup> import { ref } from 'vue'; import { onShow, onTabItemTap } from '@dcloudio/uni-app'; // 用户信息相关 const userName = ref(''); const userRole = ref(''); const userDept = ref(''); const userPhone = ref(''); // 重置密码 const showResetModal = ref(false); const oldPassword = ref(''); const newPassword = ref(''); const confirmPassword = ref(''); // 密码可见性状态 const showOldPassword = ref(false); const showNewPassword = ref(false); const showConfirmPassword = ref(false); // 触摸状态 const touchState = ref({ reset: false, logout: false }); // 页面显示时加载数据 onShow(() => { // console.log('onShow 被触发'); loadUserInfo(); // 加载用户信息 }); // tabbar 页面被点击时触发 onTabItemTap(() => { // console.log('tabbar 页面被点击'); loadUserInfo(); // 强制刷新数据 }); const forceRefresh = true; // 加载用户信息 const loadUserInfo = async () => { try { const userInfo = uni.getStorageSync('userInfo'); // console.log('本地缓存 userInfo:', userInfo); if (!forceRefresh && userInfo && userInfo.userName) { // 使用缓存 userName.value = userInfo.nickName || userInfo.userName || '未知用户'; userRole.value = userInfo.roles?.[0]?.roleName || '普通用户'; userDept.value = userInfo.dept?.deptName || '未分配部门'; userPhone.value = userInfo.phonenumber || '暂无电话'; } else { // console.log('开始请求用户信息...'); const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile', method: 'GET', header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') } }); // console.log('接口返回结果:', res); if (res.statusCode === 200 && res.data.code === 200) { const userData = res.data.data; uni.setStorageSync('userInfo', userData); userName.value = userData.nickName || userData.userName || '未知用户'; userRole.value = userData.roles?.[0]?.roleName || '普通用户'; userDept.value = userData.dept?.deptName || '未分配部门'; userPhone.value = userData.phonenumber || '暂无电话'; } else { uni.showToast({ title: '获取用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } } } catch (error) { console.error('加载用户信息失败:', error); uni.showToast({ title: '加载用户信息失败', icon: 'none' }); uni.redirectTo({ url: '/pages/login/login' }); } }; // 处理触摸开始 const handleTouchStart = (type) => { touchState.value[type] = true; }; // 处理触摸结束 const handleTouchEnd = (type) => { touchState.value[type] = false; }; // 切换密码可见性 const togglePasswordVisibility = (type) => { switch (type) { case 'old': showOldPassword.value = !showOldPassword.value; break; case 'new': showNewPassword.value = !showNewPassword.value; break; case 'confirm': showConfirmPassword.value = !showConfirmPassword.value; break; } // 确保图标状态更新后UI重新渲染 setTimeout(() => {}, 0); }; // 显示弹窗 const handleResetPassword = () => { uni.vibrateShort(); // 震动反馈 showResetModal.value = true; }; // 关闭弹窗 const closeResetModal = () => { showResetModal.value = false; }; // 提交重置密码 const submitResetPassword = async () => { const { oldPassword: oldPass, newPassword: newPass, confirmPassword: confirmPass } = { oldPassword: oldPassword.value, newPassword: newPassword.value, confirmPassword: confirmPassword.value }; if (!oldPass || !newPass || !confirmPass) { uni.showToast({ title: '所有密码都必须填写', icon: 'none' }); return; } if (newPass !== confirmPass) { uni.showToast({ title: '新密码与确认密码不一致', icon: 'none' }); return; } uni.showLoading({ title: '提交中...' }); try { const res = await uni.request({ url: 'http://172.26.26.43/dev-api/system/user/profile/updatePwd', method: 'POST', header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token'), 'Content-Type': 'application/json' }, data: { oldPassword: oldPass, newPassword: newPass } }); uni.hideLoading(); if (res.statusCode === 200 && res.data.code === 200) { uni.showToast({ title: '密码修改成功', icon: 'success' }); uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); } else { uni.showToast({ title: '密码修改失败', icon: 'none' }); } } catch (error) { uni.hideLoading(); uni.showToast({ title: '网络请求失败', icon: 'none' }); console.error('请求失败:', error); } closeResetModal(); }; // 处理退出登录 const handleLogout = () => { uni.vibrateShort(); // 添加震动反馈 uni.showModal({ title: '确认退出', content: '您确定要退出当前账号吗？', confirmText: '退出登录', confirmColor: '#e74c3c', success: (res) => { if (res.confirm) { // 清除用户相关数据 uni.removeStorageSync('token'); uni.removeStorageSync('userInfo'); uni.removeStorageSync('savedUsername'); // 显示退出提示 uni.showToast({ title: '已退出登录', icon: 'success', duration: 1500 }); // 跳转到登录页 setTimeout(() => { uni.reLaunch({ url: '/pages/login/login' }); }, 1500); } } }); }; </script> <style lang="scss" scoped> .container { padding: 20rpx; background-color: #f5f7fa; min-height: 100vh; } /* 用户信息区域样式 */ .user-info-section { display: flex; align-items: center; padding: 30rpx; margin: 20rpx 0; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; position: relative; overflow: hidden; border-radius: 24rpx; &::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%); pointer-events: none; } } .user-phone { display: block; font-size: 24rpx; // margin-top: 10rpx; color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } .avatar-container { position: relative; width: 120rpx; height: 120rpx; margin-right: 30rpx; } .avatar-image { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; } .avatar-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 4rpx solid rgba(255, 255, 255, 0.3); border-radius: 50%; box-sizing: border-box; } .user-details { flex: 1; } .welcome-text { font-size: 28rpx; opacity: 0.9; } .username { display: block; font-size: 40rpx; font-weight: bold; margin: 8rpx 0; text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); } .user-meta { display: flex; flex-wrap: wrap; gap: 15rpx; margin-top: 15rpx; } .user-role, .user-dept { font-size: 24rpx; background: rgba(255, 255, 255, 0.2); padding: 4rpx 12rpx; border-radius: 20rpx; backdrop-filter: blur(10px); } /* 功能板块区域 */ .function-section { background-color: #fff; border-radius: 24rpx; margin: 30rpx 40rpx; /* 左右边距增加 */ box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); overflow: hidden; } .function-item { display: flex; align-items: center; justify-content: space-between; padding: 30rpx 35rpx; /* 增加左右内边距 */ position: relative; transition: all 0.2s ease; /* 点击效果 - 缩放 */ &:active { transform: scale(0.98); background-color: #f8f8f8; } /* 触摸效果 - 高亮 */ &.touch-active { background-color: #f0f9ff; transform: scale(0.98); .item-text { font-weight: bold; } } } .logout-item { .item-text { color: #e74c3c; } &.touch-active { background-color: #fff0f0; } } .item-left { display: flex; align-items: center; } .item-icon { width: 44rpx; height: 44rpx; margin-right: 20rpx; transition: transform 0.2s ease; .touch-active & { transform: scale(1.1); } } .item-text { font-size: 32rpx; color: #333; transition: all 0.2s ease; .touch-active & { transform: translateX(5px); } } .arrow-icon { font-size: 40rpx; color: #999; transform: scale(1.5, 1.5); transition: all 0.2s ease; .touch-active & { transform: scale(1.5, 1.5) translateX(-5px); } } .divider { height: 1rpx; background-color: #f0f0f0; margin: 0 35rpx; /* 与内边距一致 */ } /* 动画效果 */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 0.3s ease; } /* 重置密码弹窗*/ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal-content { background-color: #fff; width: 80%; max-width: 600rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2); animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(100rpx); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 30rpx; background-color: #f8f8f8; border-bottom: 1rpx solid #eee; } .modal-title { font-size: 34rpx; font-weight: bold; color: #333; } .modal-close { font-size: 40rpx; color: #999; padding: 10rpx 20rpx; } .input-group { padding: 30rpx; } .input-item { display: flex; align-items: center; margin-bottom: 30rpx; padding-bottom: 15rpx; border-bottom: 1rpx solid #eee; position: relative; &:last-child { margin-bottom: 0; } } .input-icon { width: 36rpx; height: 36rpx; margin-right: 20rpx; opacity: 0.7; } .eye-icon-wrapper { position: absolute; right: 10rpx; top: 50%; transform: translateY(-50%); width: 50rpx; height: 50rpx; display: flex; align-items: center; justify-content: center; z-index: 10; touch-action: manipulation; &:active { opacity: 0.8; transform: translateY(-50%) scale(0.95); } } .eye-icon { width: 40rpx; height: 40rpx; opacity: 0.7; transition: opacity 0.2s; } .password-input { flex: 1; height: 60rpx; font-size: 30rpx; color: #333; padding-right: 60rpx; } .modal-buttons { display: flex; border-top: 1rpx solid #eee; } .cancel-btn, .confirm-btn { flex: 1; height: 90rpx; line-height: 90rpx; font-size: 32rpx; border-radius: 0; background: none; position: relative; &::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1rpx; background-color: #eee; } } .cancel-btn { color: #666; &:active { background-color: #f8f8f8; } } .confirm-btn { color: #3498db; font-weight: bold; &:active { background-color: #f0f9ff; } } .confirm-btn::after { left: 0; } .cancel-btn::after { display: none; } </style> 重置密码弹窗小眼睛看输入内容还是有问题，当我依次输入旧密码时能点击小眼睛能看输入的内容，但是我点击其他输入框后旧密码的小眼睛就消失了然后看不了输入的具体内容了，在输入过程中点击其他地方也是小眼睛会消失。
最新发布
08-07
但是，根据代码，小眼睛图标是绝对定位，并且z-index设置为10，应该不会被覆盖。 另一个可能的原因：在移动端，当键盘弹出时，页面布局可能会发生变化，导致小眼睛图标位置偏移甚至不可见。但描述中是在浏览器中...
CSS中<div>透明度(opacity)与叠放层级(z-index)
xiaokangmiclong的博客
11-18 5153
当我们做前台Web的时候，为了达到预期的效果，经常需要设置div的透明度或者是叠放层级，下面我们就分别来看看如何很好的来使用filter和z-index。 filter 主要语法为:filter: alpha(opacity=80); opacity:0.8; 其中opacity的中文意思为不透明性; 费解; 难懂; 模糊，可想它的值越大越不透明，最小为0，最大为1。值得注意的是，现在许多浏
DIV+CSS制作网页之如何设置z-index position:relative
kingisking1的专栏
12-08 850
网页制作Webjx文章简介：貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ][操作系统：Windows]貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上
HTML——隐藏标签+z-index
piduocheng0577的博客
03-16 449
目录 隐藏标签 z-index 隐藏标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>隐藏标签</title> <style> body{ background-color: palegold...
css隐藏元素display：none，opacity:0;filter：alpha(opacity=0-100;，visibility：hidden的区别
劲枫的博客
05-10 619
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。我们一般有三种方式：display:none, opacity:0;filter：alpha(opacity=0-100;, visibility:hidden。但这三种方式有何区别？一、三种隐藏方式的区别1、display:none（1）、浏览器不会生成属性为displa...
关于opacity属性的探究
baidu_39068138的博客
12-16 1475
关于opacity属性的探究 上问题！！ 在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下： 代码如下清重点关注opcaity <!-- css样式 --> <style> .boxfather { width: 500px; height: 500px; background-color: blue; text-align: cen
css透明的及z-index
m0_71088505的博客
12-21 216
【代码】css透明的及z-index。
HTML&CSS;实战教程
03-20
创建标准网页的初学者指南，也适合深入学习Html，CSS的同学，后面课程有深入的讲解，本课程会初级介绍Html和CSS，让你从入门到精通轻松掌握Web开发语言，从元素标签到CSS样式每个部分都详细进行了介绍和讲解，讲解了经常遇见的一些兼容性问题。本教程会结合实际案例，一步一步带你走进Html和CSS的世界，创建让你心动的Web页面
CSS z-index 属性
君只见独不见的专栏
12-13 681
定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ 说明 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 用法
z-index及透明度
XYzuiyou的博客
05-12 388
z-index 我们在html里面输入一个代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"></link> </head> <body> <div&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值