Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
43583cfd
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
43583cfd
编写于
9月 03, 2020
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: swiper pagination style
上级
b1852570
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
96 addition
and
96 deletion
+96
-96
src/packages/swiper/swiper.scss
src/packages/swiper/swiper.scss
+96
-96
未找到文件。
src/packages/swiper/swiper.scss
浏览文件 @
43583cfd
.nut-swiper
{
position
:
relative
;
overflow
:
hidden
;
height
:
200px
;
position
:
relative
;
overflow
:
hidden
;
height
:
200px
;
.nut-swiper-wrap
{
display
:
flex
;
display
:
-
webkit-flex
;
width
:
100%
;
height
:
100%
;
transition
:
all
0ms
ease
;
-webkit-transition
:
all
0ms
ease
;
}
.nut-swiper-wrap
{
display
:
flex
;
display
:
-
webkit-flex
;
width
:
100%
;
height
:
100%
;
transition
:
all
0ms
ease
;
-webkit-transition
:
all
0ms
ease
;
}
.nut-swiper-slide
{
overflow
:
hidden
;
flex-shrink
:
0
;
-webkit-flex-shrink
:
0
;
width
:
100%
;
height
:
100%
;
cursor
:
default
;
position
:
relative
;
.nut-swiper-slide
{
overflow
:
hidden
;
flex-shrink
:
0
;
-webkit-flex-shrink
:
0
;
width
:
100%
;
height
:
100%
;
cursor
:
default
;
position
:
relative
;
@keyframes
nut-preloader-spin
{
100
%
{
transform
:
rotate
(
360deg
);
}
}
@keyframes
nut-preloader-spin
{
100
%
{
transform
:
rotate
(
360deg
);
}
}
.nut-lazy
{
&
.img
{
width
:
100%
;
height
:
100%
;
background-repeat
:
no-repeat
;
background-size
:
100%
100%
;
}
.nut-lazy
{
&
.img
{
width
:
100%
;
height
:
100%
;
background-repeat
:
no-repeat
;
background-size
:
100%
100%
;
}
&
.preloader
{
width
:
42px
;
height
:
42px
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin-left
:
-21px
;
margin-top
:
-21px
;
z-index
:
10
;
transform-origin
:
50%
;
animation
:
nut-preloader-spin
1s
infinite
linear
;
box-sizing
:
border-box
;
border
:
4px
solid
#fff
;
border-radius
:
50%
;
border-top-color
:
transparent
;
}
}
}
&
.preloader
{
width
:
42px
;
height
:
42px
;
position
:
absolute
;
left
:
50%
;
top
:
50%
;
margin-left
:
-21px
;
margin-top
:
-21px
;
z-index
:
10
;
transform-origin
:
50%
;
animation
:
nut-preloader-spin
1s
infinite
linear
;
box-sizing
:
border-box
;
border
:
4px
solid
#fff
;
border-radius
:
50%
;
border-top-color
:
transparent
;
}
}
}
&
.horizontal
.nut-swiper-wrap
{
flex-direction
:
row
;
-webkit-flex-direction
:
row
;
}
&
.horizontal
.nut-swiper-wrap
{
flex-direction
:
row
;
-webkit-flex-direction
:
row
;
}
&
.vertical
.nut-swiper-wrap
{
flex-direction
:
column
;
-webkit-flex-direction
:
column
;
}
&
.vertical
.nut-swiper-wrap
{
flex-direction
:
column
;
-webkit-flex-direction
:
column
;
}
.nut-swiper-pagination
{
position
:
absolute
;
.nut-swiper-pagination
{
position
:
absolute
;
z-index
:
1
;
.swiper-pagination-bullet
{
width
:
8px
;
height
:
8px
;
border-radius
:
50%
;
background-color
:
#000
;
opacity
:
0
.2
;
transition
:
all
0
.5s
ease
;
-webkit-transition
:
all
0
.5s
ease
;
}
.swiper-pagination-bullet
{
width
:
8px
;
height
:
8px
;
border-radius
:
50%
;
background-color
:
#000
;
opacity
:
0
.2
;
transition
:
all
0
.5s
ease
;
-webkit-transition
:
all
0
.5s
ease
;
}
.swiper-pagination-bullet.active
{
background-color
:
#007aff
;
opacity
:
1
;
}
}
.swiper-pagination-bullet.active
{
background-color
:
#007aff
;
opacity
:
1
;
}
}
&
.vertical
.nut-swiper-pagination
{
right
:
10px
;
top
:
50%
;
transform
:
translate3d
(
0
,
-50%
,
0
);
-webkit-transform
:
translate3d
(
0
,
-50%
,
0
);
&
.vertical
.nut-swiper-pagination
{
right
:
10px
;
top
:
50%
;
transform
:
translate3d
(
0
,
-50%
,
0
);
-webkit-transform
:
translate3d
(
0
,
-50%
,
0
);
.swiper-pagination-bullet
{
display
:
block
;
margin
:
6px
0
;
}
}
.swiper-pagination-bullet
{
display
:
block
;
margin
:
6px
0
;
}
}
&
.horizontal
.nut-swiper-pagination
{
bottom
:
10px
;
width
:
100%
;
text-align
:
center
;
&
.horizontal
.nut-swiper-pagination
{
bottom
:
10px
;
width
:
100%
;
text-align
:
center
;
.swiper-pagination-bullet
{
display
:
inline-block
;
margin
:
0
3px
;
}
}
.swiper-pagination-bullet
{
display
:
inline-block
;
margin
:
0
3px
;
}
}
img
{
pointer-events
:
none
;
}
img
{
pointer-events
:
none
;
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录