charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
Files
7e7a096151a6725a4da903fd344cf3a84caeea66
frontend-app/unpackage/dist/dev/app-plus/pages/turntable/turntable.css
T

672 lines
1.3 MiB
CSS
Raw Normal View History

添加新文件
2025-05-07 10:09:55 +08:00
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/* uni.scss */
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
.u-empty[data-v-ac70166d],
.u-empty__wrap[data-v-ac70166d],
.u-tabs[data-v-ac70166d],
.u-tabs__wrapper[data-v-ac70166d],
.u-tabs__wrapper__scroll-view-wrapper[data-v-ac70166d],
.u-tabs__wrapper__scroll-view[data-v-ac70166d],
.u-tabs__wrapper__nav[data-v-ac70166d],
.u-tabs__wrapper__nav__line[data-v-ac70166d],
.up-empty[data-v-ac70166d],
.up-empty__wrap[data-v-ac70166d],
.up-tabs[data-v-ac70166d],
.up-tabs__wrapper[data-v-ac70166d],
.up-tabs__wrapper__scroll-view-wrapper[data-v-ac70166d],
.up-tabs__wrapper__scroll-view[data-v-ac70166d],
.up-tabs__wrapper__nav[data-v-ac70166d],
.up-tabs__wrapper__nav__line[data-v-ac70166d] {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
@font-face {
font-family: "uicon-iconfont";
src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf") format("truetype");
}
.u-icon[data-v-ac70166d] {
display: flex;
align-items: center;
}
.u-icon--left[data-v-ac70166d] {
flex-direction: row-reverse;
align-items: center;
}
.u-icon--right[data-v-ac70166d] {
flex-direction: row;
align-items: center;
}
.u-icon--top[data-v-ac70166d] {
flex-direction: column-reverse;
justify-content: center;
}
.u-icon--bottom[data-v-ac70166d] {
flex-direction: column;
justify-content: center;
}
.u-icon__icon[data-v-ac70166d] {
font-family: uicon-iconfont;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.u-icon__icon--primary[data-v-ac70166d] {
color: #3c9cff;
}
.u-icon__icon--success[data-v-ac70166d] {
color: #5ac725;
}
.u-icon__icon--error[data-v-ac70166d] {
color: #f56c6c;
}
.u-icon__icon--warning[data-v-ac70166d] {
color: #f9ae3d;
}
.u-icon__icon--info[data-v-ac70166d] {
color: #909399;
}
.u-icon__img[data-v-ac70166d] {
height: auto;
will-change: transform;
}
.u-icon__label[data-v-ac70166d] {
line-height: 1;
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/* uni.scss */
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
.u-empty[data-v-5cec8177],
.u-empty__wrap[data-v-5cec8177],
.u-tabs[data-v-5cec8177],
.u-tabs__wrapper[data-v-5cec8177],
.u-tabs__wrapper__scroll-view-wrapper[data-v-5cec8177],
.u-tabs__wrapper__scroll-view[data-v-5cec8177],
.u-tabs__wrapper__nav[data-v-5cec8177],
.u-tabs__wrapper__nav__line[data-v-5cec8177],
.up-empty[data-v-5cec8177],
.up-empty__wrap[data-v-5cec8177],
.up-tabs[data-v-5cec8177],
.up-tabs__wrapper[data-v-5cec8177],
.up-tabs__wrapper__scroll-view-wrapper[data-v-5cec8177],
.up-tabs__wrapper__scroll-view[data-v-5cec8177],
.up-tabs__wrapper__nav[data-v-5cec8177],
.up-tabs__wrapper__nav__line[data-v-5cec8177] {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
/**
* vue版本动画内置的动画模式有如下：
* fade：淡入
* zoom：缩放
* fade-zoom：缩放淡入
* fade-up：上滑淡入
* fade-down：下滑淡入
* fade-left：左滑淡入
* fade-right：右滑淡入
* slide-up：上滑进入
* slide-down：下滑进入
* slide-left：左滑进入
* slide-right：右滑进入
*/
.u-fade-enter-active[data-v-5cec8177],
.u-fade-leave-active[data-v-5cec8177] {
transition-property: opacity;
}
.u-fade-enter[data-v-5cec8177],
.u-fade-leave-to[data-v-5cec8177] {
opacity: 0;
}
.u-fade-zoom-enter[data-v-5cec8177],
.u-fade-zoom-leave-to[data-v-5cec8177] {
transform: scale(0.95);
opacity: 0;
}
.u-fade-zoom-enter-active[data-v-5cec8177],
.u-fade-zoom-leave-active[data-v-5cec8177] {
transition-property: transform, opacity;
}
.u-fade-down-enter-active[data-v-5cec8177],
.u-fade-down-leave-active[data-v-5cec8177],
.u-fade-left-enter-active[data-v-5cec8177],
.u-fade-left-leave-active[data-v-5cec8177],
.u-fade-right-enter-active[data-v-5cec8177],
.u-fade-right-leave-active[data-v-5cec8177],
.u-fade-up-enter-active[data-v-5cec8177],
.u-fade-up-leave-active[data-v-5cec8177] {
transition-property: opacity, transform;
}
.u-fade-up-enter[data-v-5cec8177],
.u-fade-up-leave-to[data-v-5cec8177] {
transform: translate3d(0, 100%, 0);
opacity: 0;
}
.u-fade-down-enter[data-v-5cec8177],
.u-fade-down-leave-to[data-v-5cec8177] {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
.u-fade-left-enter[data-v-5cec8177],
.u-fade-left-leave-to[data-v-5cec8177] {
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
.u-fade-right-enter[data-v-5cec8177],
.u-fade-right-leave-to[data-v-5cec8177] {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
.u-slide-down-enter-active[data-v-5cec8177],
.u-slide-down-leave-active[data-v-5cec8177],
.u-slide-left-enter-active[data-v-5cec8177],
.u-slide-left-leave-active[data-v-5cec8177],
.u-slide-right-enter-active[data-v-5cec8177],
.u-slide-right-leave-active[data-v-5cec8177],
.u-slide-up-enter-active[data-v-5cec8177],
.u-slide-up-leave-active[data-v-5cec8177] {
transition-property: transform;
}
.u-slide-up-enter[data-v-5cec8177],
.u-slide-up-leave-to[data-v-5cec8177] {
transform: translate3d(0, 100%, 0);
}
.u-slide-down-enter[data-v-5cec8177],
.u-slide-down-leave-to[data-v-5cec8177] {
transform: translate3d(0, -100%, 0);
}
.u-slide-left-enter[data-v-5cec8177],
.u-slide-left-leave-to[data-v-5cec8177] {
transform: translate3d(-100%, 0, 0);
}
.u-slide-right-enter[data-v-5cec8177],
.u-slide-right-leave-to[data-v-5cec8177] {
transform: translate3d(100%, 0, 0);
}
.u-zoom-enter-active[data-v-5cec8177],
.u-zoom-leave-active[data-v-5cec8177] {
transition-property: transform;
}
.u-zoom-enter[data-v-5cec8177],
.u-zoom-leave-to[data-v-5cec8177] {
transform: scale(0.95);
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/* uni.scss */
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
.u-empty[data-v-abebd402],
.u-empty__wrap[data-v-abebd402],
.u-tabs[data-v-abebd402],
.u-tabs__wrapper[data-v-abebd402],
.u-tabs__wrapper__scroll-view-wrapper[data-v-abebd402],
.u-tabs__wrapper__scroll-view[data-v-abebd402],
.u-tabs__wrapper__nav[data-v-abebd402],
.u-tabs__wrapper__nav__line[data-v-abebd402],
.up-empty[data-v-abebd402],
.up-empty__wrap[data-v-abebd402],
.up-tabs[data-v-abebd402],
.up-tabs__wrapper[data-v-abebd402],
.up-tabs__wrapper__scroll-view-wrapper[data-v-abebd402],
.up-tabs__wrapper__scroll-view[data-v-abebd402],
.up-tabs__wrapper__nav[data-v-abebd402],
.up-tabs__wrapper__nav__line[data-v-abebd402] {
display: flex;
flex-direction: column;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-items: stretch;
align-content: flex-start;
}
.u-image[data-v-abebd402] {
position: relative;
transition: opacity 0.5s ease-in-out;
}
.u-image__image[data-v-abebd402] {
width: 100%;
height: 100%;
}
.u-image__loading[data-v-abebd402], .u-image__error[data-v-abebd402] {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #f3f4f6;
color: #909193;
font-size: 1.4375rem;
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/* uni.scss */
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 轮盘容器样式 */
.lucky-wheel-container[data-v-a25e7602] {
position: relative;
display: flex;
}
.lucky-wheel-bg[data-v-a25e7602] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
.lucky-wheel-d[data-v-a25e7602] {
position: absolute;
width: 90%;
height: 90%;
top: 50%;
left: 50%;
z-index: 0;
transform: translate(-50%, -50%);
}
.wheel-image[data-v-a25e7602] {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
}
.wheel-image-1[data-v-a25e7602] {
animation: blink-1-a25e7602 1000ms infinite linear;
}
.wheel-image-2[data-v-a25e7602] {
animation: blink-2-a25e7602 1000ms infinite linear;
}
@keyframes blink-1-a25e7602 {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes blink-2-a25e7602 {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* 轮盘主体样式 */
.lucky-wheel[data-v-a25e7602] {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
margin: auto;
transition-property: transform;
transition-timing-function: cubic-bezier(0.25, 0.46, 0.455, 0.995);
}
.lucky-wheel-wrap[data-v-a25e7602] {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
}
/* 奖项扇形样式 */
.prize-item[data-v-a25e7602] {
overflow: hidden;
position: absolute;
top: -50%;
left: 50%;
width: 100%;
height: 100%;
transform-origin: 0 100%;
}
/* 奖项内容样式 */
.prize-content[data-v-a25e7602] {
position: absolute;
padding-top: 0.5rem;
box-sizing: border-box;
width: 100%;
height: 100%;
left: -50%;
bottom: -50%;
display: flex;
flex-direction: column;
align-items: center;
}
.prize-content-bg[data-v-a25e7602] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
}
/* 奖项图片样式 */
.prize-image[data-v-a25e7602] {
width: 40px;
height: 40px;
margin-bottom: 5px;
}
/* 奖项名称样式 */
.prize-name[data-v-a25e7602] {
font-size: 12px;
color: #333;
text-align: center;
position: relative;
z-index: 9;
font-weight: 400;
font-size: 0.875rem;
color: #DA402B;
}
.prize-pro[data-v-a25e7602] {
position: relative;
}
.prize-pro-txt[data-v-a25e7602] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: 400;
font-size: 0.4375rem;
color: #E26241;
white-space: nowrap;
}
/* 指针样式 */
.pointer[data-v-a25e7602] {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
cursor: pointer;
}
.pointer-triangle[data-v-a25e7602] {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #ff0000;
/* 红色三角形 */
/* 删除 transform: rotate(180deg); 这一行 */
}
.pointer-heart[data-v-a25e7602] {
animation: heart-a25e7602 1s infinite;
}
@keyframes heart-a25e7602 {
0% {
transform: scale(1);
}
25% {
transform: scale(1.03);
}
to {
transform: scale(1);
}
}
.lights-container[data-v-a25e7602] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
}
.light[data-v-a25e7602] {
position: absolute;
border-radius: 50%;
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/* uni.scss */
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
.turntable_warp {
height: 100vh;
}
.turntable_header_warp {
height: 38.4375rem;
background-image: url("data:image/png;base64,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
background-size: 100% 100%;
background-position: center;
/* 将图片居中显示 */
padding: 2.75rem 0 0;
}
.turntable_header_warp .header_title_warp {
display: flex;
align-items: center;
padding: 0 0.9375rem;
}
.turntable_header_warp .header_title_warp .title_ {
font-weight: 800;
font-size: 2.09375rem;
color: #FBFAFA;
line-height: 3.75rem;
text-shadow: 0 0.3125rem 0.03125rem rgba(190, 10, 1, 0.45);
background: linear-gradient(0deg, #FBFAFA 0%, #FFE5D4 100%);
-webkit-background-clip: text;
letter-spacing: 2px;
width: calc(100% - 2.5rem);
text-align: center;
}
.turntable_header_warp .turntable_content_warp .frequency_warp {
margin-top: 7rem;
background-image: url("data:image/png;base64,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
background-size: 100% 100%;
background-position: center;
/* 将图片居中显示 */
width: 100%;
height: 26.375rem;
position: relative;
}
.turntable_header_warp .turntable_content_warp .draws_warp {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 2.625rem;
position: absolute;
top: 19.5rem;
width: calc(100% - 5.25rem);
}
.turntable_header_warp .turntable_content_warp .draws_warp .draws_item_warp {
width: 40%;
text-align: center;
background: #FE2F32;
border-radius: 0.5rem;
border: 2px solid #FFC8C8;
margin-bottom: 0.625rem;
color: #ffffff;
padding: 0.625rem 0;
}
.turntable_header_warp .turntable_content_warp .draws_warp .draws_item_warp_no {
color: #ff5464;
background: #ff7d7d;
border: 0px solid #FFC8C8;
}
.turntable_header_warp .rule {
background: #FFFFFF;
border-radius: 1.5625rem 1.5625rem 0 0;
min-height: 15.625rem;
padding: 0.9375rem;
}
.turntable_header_warp .rule .rule_title {
display: flex;
justify-content: center;
margin-bottom: 0.9375rem;
}
.turntable_header_warp .rule .rule_title .title {
background: #FF2524;
border-radius: 0.9375rem 0 1.25rem 0;
color: #FFFFFF;
padding: 0.3125rem 0;
width: 8.75rem;
text-align: center;
font-size: 1.25rem;
}
.turntable_header_warp .rule .rule_content {
font-weight: 400;
font-size: 0.875rem;
color: #999999;
line-height: 1.1875rem;
}
.winning_record {
position: fixed;
right: 0;
top: 7rem;
background: rgba(92, 0, 1, 0.5);
border-radius: 0.9375rem 0 0 0.9375rem;
display: flex;
align-items: center;
color: #FFFFFF;
padding: 0.3125rem 0.625rem;
font-weight: 500;
font-size: 0.78125rem;
color: #FBFAFA;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
top: -9.125rem;
position: relative;
}
.lottery {
position: relative;
display: inline-block;
width: 19.5625rem;
height: 19.5625rem;
margin-top: 3.125rem;
}
.draws_number {
color: #FFFFFF;
margin-top: 4.25rem;
}
Reference in New Issue Copy Permalink