1 Star 0 Fork 10

ruoshuisixue/lime-cllipper

forked from liangei/lime-clipper 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.styl 2.59 KB
一键复制 编辑 原始数据 按行查看 历史
liangei 提交于 2020-12-04 19:17 . first commit
$edge-border-width = 6rpx
.flex-auto
flex auto
.bg-transparent
background-color rgba(0, 0, 0, 0.9)
transition-duration 0.35s
.l-clipper
width 100vw
height calc( 100vh - var(--window-top))
background-color rgba(0, 0, 0, 0.9)
position fixed
top var(--window-top)
left 0
z-index 1
&-mask
position relative
z-index 2
pointer-events: none
&__content
pointer-events: none;
position absolute
border 1rpx solid rgba(255,255,255,.3)
box-sizing border-box
box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 80vh;
background: transparent;
&::before,&::after
content ''
position absolute
border 1rpx dashed rgba(255,255,255,.3)
&::before
width 100%
top 33.33%
height 33.33%
border-left none
border-right none
&::after
width 33.33%
left 33.33%
height 100%
border-top none
border-bottom none
&__edge
position absolute
// left 6rpx
width 34rpx
height 34rpx
border $edge-border-width solid #ffffff
pointer-events auto
&::before
content ''
position absolute
width 40rpx
height 40rpx
background-color transparent
&:nth-child(1)
left: - $edge-border-width
top: - $edge-border-width
border-bottom-width 0 !important
border-right-width 0 !important
&:before
top -50%
left -50%
&:nth-child(2)
right: - $edge-border-width
top: - $edge-border-width
border-bottom-width 0 !important
border-left-width 0 !important
&:before
top -50%
left 50%
&:nth-child(3)
left: - $edge-border-width
bottom: - $edge-border-width
border-top-width 0 !important
border-right-width 0 !important
&:before
bottom -50%
left -50%
&:nth-child(4)
right: - $edge-border-width
bottom: - $edge-border-width
border-top-width 0 !important
border-left-width 0 !important
&:before
bottom -50%
left 50%
&-image
width 100%
border-style none
position absolute
top 0
left 0
z-index 1
-webkit-backface-visibility hidden
backface-visibility hidden
transform-origin center
&-canvas
position fixed
z-index 10
left -200vw
top -200vw
pointer-events none
&-tools
position fixed
left 0
bottom 10px
width 100%
z-index 99
color #fff
&__btns
font-weight bold
display flex
align-items center
justify-content space-between
width 100%
padding 20rpx 40rpx
box-sizing border-box
.cancel
width 112rpx
height 60rpx
text-align center
line-height 60rpx
.confirm
width 112rpx
height 60rpx
line-height 60rpx
background-color #07c160
border-radius 6rpx
text-align center
image
display block
width 60rpx
height 60rpx
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/ruoshuisixue/lime-cllipper.git
[email protected]:ruoshuisixue/lime-cllipper.git
ruoshuisixue
lime-cllipper
lime-cllipper
master

搜索帮助