修改域名配置等文件
This commit is contained in:
130
uni_modules/lime-dialer/components/l-dialer/index.scss
Normal file
130
uni_modules/lime-dialer/components/l-dialer/index.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
|
||||
@mixin theme($property, $variable) {
|
||||
$theme: (
|
||||
'dialer_text_color': #ffb400,
|
||||
'dialer_prize_font_size': 12px,
|
||||
'dialer_prize_name_padding': 8px,
|
||||
'dialer_prize_inner_padding': 8px,
|
||||
'dialer_prize_image_size': 36px
|
||||
);
|
||||
|
||||
$value: map-get($theme, $variable);
|
||||
#{$property}: $value;
|
||||
|
||||
/* #ifndef APP-IOS || APP-ANDROID */
|
||||
$css-variable: var(--#{$variable}, #{$value});
|
||||
#{$property}: #{$css-variable};
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.l-dialer {
|
||||
position: relative;
|
||||
|
||||
&__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex:1;
|
||||
position: relative;
|
||||
@include theme('color', 'dialer_text_color');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
// transition: transform 3s ease;
|
||||
// transform-origin: 50% 50%;
|
||||
transition-property: transform;
|
||||
transition-timing-function: cubic-bezier(0.250, 0.460, 0.455, 0.995);
|
||||
&-border {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
// background: red;
|
||||
/* #ifndef APP-ANDROID */
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20rpx currentColor inset;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
&-item {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
@include theme('padding-top', 'dialer_prize_inner_padding');
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: -50%;
|
||||
bottom: -50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-name {
|
||||
@include theme('padding-top', 'dialer_prize_name_padding');
|
||||
@include theme('padding-bottom', 'dialer_prize_name_padding');
|
||||
@include theme('font-size', 'dialer_prize_font_size');
|
||||
@include theme('color', 'dialer_text_color');
|
||||
}
|
||||
|
||||
&-img {
|
||||
@include theme('width', 'dialer_prize_image_size');
|
||||
@include theme('height', 'dialer_prize_image_size');
|
||||
}
|
||||
}
|
||||
|
||||
&__pointer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* #ifndef APP-IOS || APP-ANDROID */
|
||||
.heart {
|
||||
animation: heart 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes heart {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
Reference in New Issue
Block a user