侧边栏圆角动画
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
This commit is contained in:
@@ -62,7 +62,7 @@
|
||||
{if condition="!empty($child.products)"}
|
||||
<div class="scroll-box">
|
||||
{volist name="$child.products" id="pro"}
|
||||
<a class="card" href="{:url('product/detail', ['id' => $pro.id])}">
|
||||
<a class="card" href="{:url('product/detail', ['id' => $pro.id])}" style="background: #fafafa;">
|
||||
<div class="card-img">
|
||||
<img src="{$pro.cover_image}" alt="">
|
||||
</div>
|
||||
@@ -116,5 +116,55 @@
|
||||
back.addEventListener('click',()=>{
|
||||
window.location.href = document.referrer;
|
||||
})
|
||||
// 更新侧边栏相邻元素的圆角
|
||||
function updateSidebarAdjacentRadius() {
|
||||
const sidebarItems = document.querySelectorAll('.sidebar li');
|
||||
|
||||
// 先移除所有相邻类名
|
||||
sidebarItems.forEach(item => {
|
||||
item.classList.remove('active-prev', 'active-next');
|
||||
});
|
||||
|
||||
// 找到当前激活的项
|
||||
let activeIndex = -1;
|
||||
sidebarItems.forEach((item, index) => {
|
||||
if (item.classList.contains('active')) {
|
||||
activeIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
// 添加上一个和下一个的类名（使用requestAnimationFrame确保DOM更新）
|
||||
requestAnimationFrame(() => {
|
||||
if (activeIndex > 0) {
|
||||
sidebarItems[activeIndex - 1].classList.add('active-prev');
|
||||
}
|
||||
if (activeIndex < sidebarItems.length - 1) {
|
||||
sidebarItems[activeIndex + 1].classList.add('active-next');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定点击事件
|
||||
document.querySelectorAll('.sidebar li').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
// 移除所有active
|
||||
document.querySelectorAll('.sidebar li').forEach(li => {
|
||||
li.classList.remove('active');
|
||||
});
|
||||
// 添加active
|
||||
this.classList.add('active');
|
||||
// 更新相邻圆角
|
||||
updateSidebarAdjacentRadius();
|
||||
|
||||
// 您的tab切换逻辑
|
||||
// const tabId = this.getAttribute('data-tab');
|
||||
// 切换内容...
|
||||
});
|
||||
});
|
||||
|
||||
// 页面初始化时调用
|
||||
if (document.querySelector('.sidebar li.active')) {
|
||||
updateSidebarAdjacentRadius();
|
||||
}
|
||||
</script>
|
||||
{/block}
|
||||
{/block}
|
||||
@@ -1,195 +1,223 @@
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
height: 100vh;
|
||||
overflow: hidden
|
||||
body {
|
||||
background: #f5f5f5;
|
||||
font-size: inherit !important;
|
||||
/* font-size:100% !important; */
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
max-width: 100vw !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.top-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 22px;
|
||||
background: #fff;
|
||||
margin-top: 46px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2);
|
||||
}
|
||||
.top-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 22px;
|
||||
background: #fff;
|
||||
margin-top: 46px;
|
||||
/* border-bottom: 1px solid #f0f0f0; */
|
||||
box-shadow: 0 2px 8px rgba(217, 217, 217, 0.2);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.82rem;
|
||||
background: #F1F2F5;
|
||||
justify-content: space-between;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.82rem;
|
||||
background: #F1F2F5;
|
||||
justify-content: space-between;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.back {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.back {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.back img {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 0.32rem !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 0.32rem !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 主体布局 */
|
||||
.main {
|
||||
display: flex;
|
||||
height: calc(100% - 46px);
|
||||
margin-top:0.018rem;
|
||||
}
|
||||
|
||||
/* 主体布局 */
|
||||
.main {
|
||||
display: flex;
|
||||
height: calc(100% - 46px);
|
||||
margin-top:0.018rem;
|
||||
}
|
||||
/* 左侧菜单 #FAFAFA;*/
|
||||
.sidebar {
|
||||
width: 114px;
|
||||
background: #fff;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 左侧菜单 */
|
||||
.sidebar {
|
||||
width: 114px;
|
||||
background: #FAFAFA;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sidebar li {
|
||||
list-style: none;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
font-size: 0.28rem !important;
|
||||
color:#686A70; /* #686A70;*/
|
||||
cursor: pointer;
|
||||
background:#FAFAFA;
|
||||
/* 分别控制上下圆角的过渡 */
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
transition: border-radius 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.sidebar li.active {
|
||||
color: #004BFA;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.sidebar li {
|
||||
list-style: none;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar li.active {
|
||||
color: #004BFA;
|
||||
background: #fff;
|
||||
border-top-right-radius: 0.17rem;
|
||||
border-bottom-right-radius:0.17rem ;
|
||||
}
|
||||
.sidebar li.active-prev {
|
||||
border-bottom-right-radius: 0.17rem !important;
|
||||
}
|
||||
|
||||
/* 右侧内容 */
|
||||
.right-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-left: 12px;
|
||||
background: #fff;
|
||||
margin-bottom: 80px;
|
||||
.sidebar li.active-next {
|
||||
border-top-right-radius: 0.17rem !important;
|
||||
}
|
||||
/* 右侧内容 */
|
||||
.right-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-left: 12px;
|
||||
background: #fff;
|
||||
margin-bottom: 80px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.sec-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding-top: 24px;
|
||||
padding-right: 17px;
|
||||
padding-bottom: 12px;
|
||||
padding-top: 24px;
|
||||
padding-right: 17px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.sec-title {
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
font-weight: 500
|
||||
}
|
||||
.sec-title {
|
||||
font-size: 0.28rem !important;
|
||||
color: #686A70;
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.sec-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sec-arrow {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #666;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sec-arrow img {
|
||||
width: 0.28rem;
|
||||
height: 0.28rem;
|
||||
}
|
||||
/* 横向滚动容器 */
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
/* 横向滚动容器 */
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.scroll-box::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
.scroll-box::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
.right-card {
|
||||
flex-shrink: 0;
|
||||
background: #FAFAFA;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 12px;
|
||||
padding-left: 19px;
|
||||
padding-right: 19px;
|
||||
|
||||
}
|
||||
.card-img {
|
||||
width: 1.52rem;
|
||||
background: #f1f1f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
flex-shrink: 0;
|
||||
background: #FAFAFA;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
|
||||
.card-img {
|
||||
width: 1.52rem;
|
||||
background: #f1f1f1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
width: 100%;
|
||||
}
|
||||
.card-info {
|
||||
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
padding: 8px;
|
||||
text-align: center
|
||||
}
|
||||
.card-name {
|
||||
font-size: 0.2rem !important;
|
||||
width: 1.52rem;
|
||||
height: auto;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 0.2rem !important;
|
||||
width: 1.52rem;
|
||||
height: auto;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-model {
|
||||
font-size: 0.16rem !important;
|
||||
color: #686A70;
|
||||
margin-top: 4px
|
||||
}
|
||||
|
||||
.card-model {
|
||||
font-size: 0.16rem !important;
|
||||
color: #686A70;
|
||||
margin-top: 4px
|
||||
}
|
||||
/* 内容区块默认隐藏 */
|
||||
.tab-pane {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* 内容区块默认隐藏 */
|
||||
.tab-pane {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* 激活时显示 */
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
|
||||
}
|
||||
/* 激活时显示 */
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user