发表于： 2020-04-15 23:39:24
1 1505
今日完成
页面一拆解重构完成
页面二pc页面完成
明日计划
完成页面二移动端适配
完成页面三拆解重构
提取的模块
/* ================ css手动轮播图组件 =====================*/
// 轮播容器
.carousel {
position: relative;
overflow: hidden;
// 轮播内容容器
.carousel-main {
position: relative;
display: flex;
flex-direction: row;
transition: left 0.6s ease-in-out;
}
// 指示器
&-indicators {
display: flex;
align-items: center;
position: absolute;
bottom: 0.05rem;
left: 50%;
height: 0.3rem;
transform: translatex(-50%);
z-index: 999;
.pointer {
display: block;
width: 0.15rem;
height: 0.15rem;
margin: 0 0.05rem;
background-color: #999;
border-radius: 50%;
opacity: 0.5;
transition: all 0.6s;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
}
}
// 左右切换
&-control {
height: 100%;
label {
display: none;
position: absolute;
top: 50%;
width: 0.3rem;
height: 0.3rem;
border-top: 0.05rem solid #999;
border-right: 0.05rem solid #999;
transform-origin: center center;
transform: translateY(-50%);
opacity: 0.4;
z-index: 999;
&:hover {
opacity: 1;
}
&::after {
content: "";
position: absolute;
top: 50%;
width: 200%;
height: 1000%;
transform-origin: center;
transform: translateY(-50%) rotate(-45deg);
z-index: -1;
}
}
& .btn-next {
right: 0.4rem;
transform: rotate(45deg);
}
& .btn-pre {
left: 0.4rem;
transform: rotate(-135deg);
}
}
}
/*============== nav ================*/
.nav {
display: flex;
justify-content: space-between;
align-items: center;
&-link {
height: 100%;
}
}
// 面包屑导航
.breadcrumb {
display: flex;
flex-wrap: wrap;
font-size: 0.2rem;
&-item + .breadcrumb-item::before {
display: inline-block;
color: #333;
content: ">";
padding: 0 0.1rem;
}
}
// 菜单按钮
.menu-btn {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 0.6rem;
height: 0.6rem;
border-radius: 0.05rem;
background-color: rgb(71, 209, 151);
&::before,
&::after {
content: "";
display: block;
}
span {
width: 60%;
height: 9%;
background-color: rgb(48, 136, 99);
border-radius: 0.05rem;
}
&:hover {
opacity: 0.6;
}
}
返回列表
评论