1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- @import "../variate.less";
- // UI中只涉及横向的轮播图 因此写样式时只考虑到了横向的情况
- .@{elNamespace}-carousel {
- // 指示器的宽、高
- --el-carousel-indicator-width: 10px;
- --el-carousel-indicator-height: 4px;
- // 切换按钮的宽高
- --el-carousel-arrow-size: 28px;
- // 切换按钮 hover时的背景色
- --el-carousel-arrow-hover-background: #000;
- // 切换按钮 正常时的背景色
- --el-carousel-arrow-background: #000;
- // 指示器外层li的padding
- --el-carousel-indicator-padding-horizontal: 3px;
- .@{elNamespace}-carousel__indicator.@{elNamespace}-carousel__indicator--horizontal {
- // 常规指示器的样式
- .@{elNamespace}-carousel__button {
- opacity: 0.6;
- border-radius: 2px;
- }
- // 激活时指示器的样式
- &.is-active {
- .@{elNamespace}-carousel__button {
- width: 20px;
- opacity: 1;
- }
- }
- }
- .@{elNamespace}-carousel__item {
- background-color: #C0C0C0;
- }
- // 切换按钮 hover
- .@{elNamespace}-carousel__arrow {
- background-color: var(--el-carousel-arrow-background);
- opacity: .12;
- &:hover {
- background-color: var(--el-carousel-arrow-hover-background);
- opacity: .4;
- }
- }
- // 带切换按钮的指示器的样式
- .@{elNamespace}-carousel__container:has(button) + .@{elNamespace}-carousel__indicators.@{elNamespace}-carousel__indicators--horizontal {
- .@{elNamespace}-carousel__indicator.@{elNamespace}-carousel__indicator--horizontal {
- .@{elNamespace}-carousel__button {
- width: 4px;
- height: 4px;
- opacity: 0.6;
- border-radius: 2px;
- }
- &.is-active {
- .@{elNamespace}-carousel__button {
- width: 10px;
- opacity: 1;
- }
- }
- }
- }
- }
|