2 Star 6 Fork 4

soldierlee / 抽奖助手小程序-大转盘抽奖

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
app.wxss 5.52 KB
一键复制 编辑 原始数据 按行查看 历史
soldierlee 提交于 2022-10-06 03:16 . init
/**app.wxss**/
/* .container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
} */
page {
color: #333333;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
}
.padding030 {
padding: 0 30rpx;
}
.padding30 {
padding: 30rpx;
}
.out-title {
margin: 30rpx 0 20rpx 0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.bottom-line {
border-bottom: 1px rgb(242, 242, 242) solid;
}
.between-center {
display: flex;
justify-content: space-between;
align-items: center;
}
.between {
display: flex;
justify-content: space-between;
}
.around {
display: flex;
justify-content: space-around;
align-items: center;
}
.radius {
border-radius: 16rpx;
}
.radius10 {
border-radius: 10rpx;
}
.right10 {
margin-right: 10rpx;
}
.item {
margin-bottom: 20rpx;
}
.icon {
width: 32rpx;
height: 32rpx;
}
.icon80 {
width: 80rpx;
height: 80rpx;
}
.icon110 {
width: 110rpx;
height: 110rpx;
}
.bottom-bar {
position: fixed;
bottom: 0;
z-index: 998;
background: #fff;
padding: 0 30rpx;
width: 100%;
border-top: 2px solid #EAEAEA;
padding: 16rpx 0;
font-size: 30rpx;
text-align: center;
line-height: 80rpx;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 16rpx 30rpx;
}
.bottom-bar .btn-text {
width: 100%;
color: #fff;
background: rgb(213, 90, 75);
font-weight: bold;
}
.big-btn {
background-color: #f3333e;
color: #fff;
text-align: center;
width: 90%;
padding: 20rpx 0;
border-radius: 8rpx;
margin-bottom: 30rpx;
letter-spacing: 0.2em;
}
.big-btn-out {
background-color: #fff;
/* border: 2rpx #f3333e solid; */
text-align: center;
width: 90%;
padding: 20rpx 0;
border-radius: 8rpx;
margin-bottom: 30rpx;
letter-spacing: 0.2em;
}
.small-btn {
background: rgb(227, 72, 66);
border: 2rpx rgba(227, 72, 66) solid;
padding: 8rpx 0;
width: 96rpx;
color: #fff;
border-radius: 30rpx;
font-size: 22rpx;
text-align: center;
}
.btn-go {
color: rgb(227, 72, 66);
background: #fff;
}
.btn-end {
background: rgba(227, 72, 66, 0.4);
border: 2rpx rgba(227, 72, 66, 0.4) solid;
}
.sponsor {
display: flex;
justify-content: space-between;
border-top: 2rpx solid #F6F6F6;
padding: 18rpx 0;
font-size: 30rpx;
}
.sponsor .sponsor-text {
display: flex;
align-items:center;/*垂直居中*/
}
.sponsor image {
width: 70rpx;
height: 70rpx;
border-radius: 100%;
}
.sponsor .sponsor-info {
display: flex;
justify-content: space-between;
}
.sponsor .sponsor-info .sponsor-name {
display: flex;
align-items:center;/*垂直居中*/
margin-left: 16rpx;
}
.small-font {
font-size: 28rpx!important;
}
/* 重写checkbox */
checkbox .wx-checkbox-input{
border-radius: 50%;/* 圆角 */
width: 32rpx; /* 背景的宽 */
height: 32rpx; /* 背景的高 */
}
/* 选中后的 背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
border: 1rpx solid #f3333e;
background: #f3333e;
}
/* 选中后的 对勾样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
border-radius: 50%;/* 圆角 */
width: 30rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
height: 30rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
line-height: 30rpx;
text-align: center;
font-size:28rpx; /* 对勾大小 30x */
color:#fff; /* 对勾颜色 白色 */
background: transparent;
transform:translate(-50%, -50%) scale(1);
-webkit-transform:translate(-50%, -50%) scale(1);
}
.no-btn {
border: none;
line-height: 1;
border-radius: 0rpx;
padding: 0rpx;
margin: 0rpx;
font-size: 90rpx;
font-weight: 100;
background-color: transparent;
}
.no-btn::after{
border: none;
}
.empty {
text-align: center;
padding: 16rpx 0;
color: #666;
}
.light-font {
font-size: 26rpx;
color: #777;
}
.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}
.placeholder {
color: #aaaaaa;
}
/* //弹出框 */
.content-box {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.content-box-mask {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 999;
position: fixed;
left: 0;
top: 0;
}
.content-box-wapper_ex {
background: #fff;
width: 80%;
padding: 30rpx;
top: 50%;
}
.content-box-wapper {
position: absolute;
left: 50%;
z-index: 1000;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
border-radius: 10rpx;
overflow: hidden;
}
/* 弹出框 */
/* .content-box-wapper_ex {
background: #fff;width: 80%;padding: 30rpx;top: 50%;
} */
.content-box-tip {
font-size: 26rpx;color: rgb(136,136,136);display: flex; justify-content: center;margin: 20rpx 30rpx;
}
.content-box-text {
font-size: 30rpx;font-weight: 600;
}
.content-box-ex {
font-size: 30rpx;color: rgb(136,136,136);margin: 30rpx 0 40rpx 0
}
.content-box-btn-wapper {
display: flex; justify-content: space-between; text-align:center;margin-top: 40rpx;
}
.content-box-btn-wapper .content-box-btn {
width:45%;font-size: 30rpx;border: 2rpx solid #eb2444;color: #eb2444;padding: 16rpx 0
}
.content-box-btn-wapper .btn-selected {
color: #fff;background: #eb2444;
}
.y-right-center{
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
}
1
https://gitee.com/soldier1024/lottery-public.git
git@gitee.com:soldier1024/lottery-public.git
soldier1024
lottery-public
抽奖助手小程序-大转盘抽奖
master

搜索帮助