634 lines
11 KiB
Plaintext
634 lines
11 KiB
Plaintext
/* pages/login/login.wxss */
|
||
page {
|
||
/* height: 100%; */
|
||
background-color: #f7f7f7;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 背景图容器 */
|
||
.login-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* background: radial-gradient(50.00% 50.00% at 50% 50%,rgb(59, 255, 235),rgba(38, 165, 246, 0) 100%); */
|
||
/* background-image: url("https://yuedong-wechatapplet.oss-cn-shanghai.aliyuncs.com/static/login-bg.png");
|
||
background-size: cover; */
|
||
background: linear-gradient(190deg, #49a5fc 0%, #f7f7f7 800rpx, #f7f7f7 100%);
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
position: relative;
|
||
}
|
||
|
||
.appbar{
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* margin-bottom: 80rpx; */
|
||
}
|
||
|
||
.gologin{
|
||
box-sizing: border-box;
|
||
padding: 0 40rpx;
|
||
}
|
||
|
||
.loginnBox{
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 180rpx;
|
||
box-shadow: 8rpx 8rpx 20rpx #b9b3b3;
|
||
}
|
||
|
||
.loginnBtn{
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
height: 88rpx;
|
||
background-color: #0084ffdc;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.logo-box{
|
||
margin-top: 80rpx;
|
||
padding: 0 30rpx 0 90rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: -68rpx;
|
||
min-height: 428rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.logo-play{
|
||
box-sizing: border-box;
|
||
margin-right: -12rpx;
|
||
width: 358rpx;
|
||
height: 428rpx;
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
.logo-img{
|
||
width: 132rpx;
|
||
height: 132rpx;
|
||
margin-bottom: 40rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.logo-text{
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* 背景遮罩层 */
|
||
/* .login-container::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
z-index: 1;
|
||
} */
|
||
|
||
/* 内容区域（在遮罩上层） */
|
||
.login-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0rpx 30rpx;
|
||
box-sizing: border-box;
|
||
padding-bottom: 400rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
|
||
}
|
||
|
||
/* Logo样式 */
|
||
.login-logo {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin: 0 auto 60rpx;
|
||
display: block;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* 角色选择标签样式 */
|
||
.role-tabs {
|
||
display: flex;
|
||
z-index: 3;
|
||
justify-content: space-around;
|
||
/* margin-bottom: 60rpx; */
|
||
background: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
/* padding: 16rpx 0; */
|
||
/* background: rgb(38, 165, 246); */
|
||
overflow: hidden;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.tab {
|
||
flex: 1;
|
||
/* padding: 20rpx 40rpx; */
|
||
height: 80rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
/* transition: all 0.3s; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.tab-box{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.tab-1{
|
||
border-radius: 28rpx 0 0 0;
|
||
}
|
||
|
||
.tab-3{
|
||
border-radius: 0 28rpx 0 0;
|
||
}
|
||
|
||
.tab-left-box{
|
||
width: 0rpx;
|
||
height: 24rpx;
|
||
border-radius: 6rpx;
|
||
/* background: #fff; */
|
||
}
|
||
|
||
.tab.active {
|
||
color: black;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-active-1{
|
||
border-radius: 24rpx 40rpx 0 0;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.bluebg{
|
||
background: rgb(38, 165, 246);
|
||
}
|
||
|
||
.fffbg{
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tab-active-1-2{
|
||
border-radius: 0rpx 0rpx 0 48rpx ;
|
||
}
|
||
|
||
.tab-active-2{
|
||
border-radius: 24rpx 48rpx 0 0;
|
||
}
|
||
|
||
.tab-active-2-1{
|
||
border-radius: 28rpx 0rpx 40rpx 0;
|
||
}
|
||
|
||
.tab-active-2-3{
|
||
border-radius: 0rpx 28rpx 0rpx 40rpx;
|
||
}
|
||
|
||
.tab-active-3{
|
||
border-radius: 44rpx 24rpx 0 0;
|
||
}
|
||
|
||
.tab-active-3-2{
|
||
border-radius: 0rpx 0rpx 40rpx 0;
|
||
}
|
||
|
||
.tab-left-box.box-active{
|
||
width: 6rpx;
|
||
margin-right: 16rpx;
|
||
background:linear-gradient(180.00deg, rgb(38, 165, 246),rgba(38, 165, 246, 0) 100%)
|
||
}
|
||
|
||
/* 表单卡片样式 */
|
||
.login-card {
|
||
background: #fff;
|
||
padding: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.weixin {
|
||
width: 100rpx; /* 调整图标大小 */
|
||
height: 100rpx; /* 调整图标大小 */
|
||
margin: 0 auto;
|
||
margin: 100rpx auto 50rpx; /* 调整图标与文字之间的间距 */
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.input-group {
|
||
margin-bottom: 40rpx;
|
||
box-shadow: 0 8rpx 16rpx rgba(39, 139, 235, 0.05);
|
||
}
|
||
|
||
.input-group input {
|
||
/* width: 100%; */
|
||
height: 100rpx;
|
||
padding: 0 30rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 12rpx;
|
||
font-size: 28rpx;
|
||
text-align: left;
|
||
/* border: 1rpx solid #eee; */
|
||
}
|
||
|
||
.input-group input:focus {
|
||
border-color: #08C160;
|
||
}
|
||
|
||
/* 记住密码样式 */
|
||
.remember-group {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 30rpx 0;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 登录按钮样式 */
|
||
/* 登录按钮基础样式 */
|
||
.login-btn {
|
||
/* width: 300rpx; */
|
||
height: 96rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 500;
|
||
margin: 60rpx 0 30rpx !important;
|
||
position: relative; /* 关键1：为内部元素定位做准备 */
|
||
display: flex; /* 关键2：启用flex布局 */
|
||
align-items: center; /* 垂直居中 */
|
||
justify-content: center; /* 水平居中 */
|
||
padding: 0; /* 关键3：清除默认padding */
|
||
background: linear-gradient(135deg, #0082FF, #00A0FF);
|
||
color: #fff;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 130, 255, 0.3);
|
||
}
|
||
|
||
/* 彻底去除微信按钮默认样式 */
|
||
.login-btn::after {
|
||
border: none !important; /* 关键4：完全移除边框 */
|
||
content: none !important;
|
||
}
|
||
|
||
/* 按钮内部文字容器 */
|
||
.login-btn .btn-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* 微信图标特殊调整 */
|
||
.login-btn .wechat-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 16rpx;
|
||
vertical-align: middle; /* 关键5：图标垂直对齐 */
|
||
}
|
||
|
||
/* 禁用状态 */
|
||
.login-btn[disabled] {
|
||
opacity: 0.7;
|
||
background: #cccccc;
|
||
}
|
||
/* 点击效果 */
|
||
.login-btn:not([disabled]):active {
|
||
transform: translateY(2rpx);
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 130, 255, 0.2);
|
||
}
|
||
.wechat-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
text-align: c;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
/* 注册链接样式 */
|
||
.register-link {
|
||
text-align: center;
|
||
color: #0082FF;
|
||
font-size: 28rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
/* 协议勾选样式 */
|
||
.agreement {
|
||
height: 40rpx;
|
||
margin-top: 30rpx;
|
||
font-size: 24rpx;
|
||
color: rgb(119, 119, 119);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.radio{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.bule-text{
|
||
color: rgb(62, 142, 220);
|
||
display: inline-block;
|
||
margin: 0 4rpx;
|
||
}
|
||
|
||
checkbox {
|
||
transform: scale(0.8);
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
|
||
.loadding{
|
||
margin-top: 100px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
.change-tab{
|
||
margin-top: 40rpx;
|
||
height: 70rpx;
|
||
width: 360rpx;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.change-tab-item{
|
||
flex: 1;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
.tab-click{
|
||
background: rgb(255, 194, 14);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
|
||
|
||
.base-box{
|
||
box-sizing: border-box;
|
||
padding: 2rpx;
|
||
border: 2rpx solid rgb(255, 255, 255);
|
||
border-radius: 20rpx;
|
||
background: linear-gradient(180deg, #e8f5fd 0%, #fff 100%);
|
||
/* height: 480rpx; */
|
||
padding: 29rpx;
|
||
}
|
||
|
||
.goal{
|
||
border-radius: 0 20rpx 20rpx 20rpx;
|
||
}
|
||
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-before{
|
||
height: 24rpx;
|
||
border-radius: 6rpx;
|
||
width: 6rpx;
|
||
margin-right: 16rpx;
|
||
background:linear-gradient(180.00deg, rgb(38, 165, 246),rgba(38, 165, 246, 0) 100%)
|
||
}
|
||
|
||
.goal-total{
|
||
/* 矩形 25 */
|
||
height: 110rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 30rpx;
|
||
background: linear-gradient(180.00deg, rgba(38, 165, 246, 0.07),rgba(231, 231, 231, 0) 100%);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 100rpx 0 100rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.goal-img{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.goal-total-item-top{
|
||
font-size: 22rpx;
|
||
color: #18394D;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.goal-total-item-num{
|
||
font-size: 36rpx;
|
||
color: #1D90FF;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.train{
|
||
margin-top: 30rpx;
|
||
background: linear-gradient(120deg, #e8f5fd 0%, #fff 100%);
|
||
|
||
}
|
||
|
||
.tongji{
|
||
margin-top: 30rpx;
|
||
background: linear-gradient(90deg, #e8f5fd 0%,#fff 60%, #fff 100%);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tongji-tit{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.plan{
|
||
border-radius: 30rpx;
|
||
background: rgb(237, 241, 255);
|
||
height: 30rpx;
|
||
padding: 8rpx 12rpx;
|
||
color: #287DF6;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.plan-img{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.img-box{
|
||
width: 110rpx;
|
||
height: 110rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 15px;
|
||
background: rgb(237, 241, 255);
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.tongji-content{
|
||
margin-top: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.img-box-img{
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
}
|
||
|
||
.miaoshu{
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.train-box{
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.toast{
|
||
text-align: center;
|
||
color: #8d9396;
|
||
font-size: 20rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.train-box-item{
|
||
/* width: 206rpx; */
|
||
flex: 1;
|
||
height: 209rpx;
|
||
}
|
||
|
||
.right-box{
|
||
background-color: #EDF1FF;
|
||
border-radius: 50%;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.miaoshu-text{
|
||
color: #999999;
|
||
font-weight: normal;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.team{
|
||
background-color: #fff;
|
||
/* height: 100rpx; */
|
||
min-height: 1000rpx;
|
||
padding: 54rpx 40rpx 60rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.team-tab{
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.team-tab-item{
|
||
box-sizing: border-box;
|
||
background: rgb(244, 246, 248);
|
||
border-radius: 100rpx;
|
||
width: 210rpx;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.team-tab-click{
|
||
border: 1px solid rgb(38, 165, 246);
|
||
background: rgba(38, 165, 246, 0.1);
|
||
color: #1D90FF;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.team-tab-item image{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.right-img{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.team-item{
|
||
padding: 40rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
background: rgb(246, 251, 255);
|
||
box-sizing: border-box;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.team-group{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.btn-creat{
|
||
margin-top:150rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 40rpx;
|
||
height: 80rpx;
|
||
background: rgba(38, 165, 246, 0.1);
|
||
color: #26A5F6;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ipt{
|
||
margin-top: 20rpx;
|
||
border-radius: 10px;
|
||
background: rgb(244, 246, 248);
|
||
height: 90rpx;
|
||
padding-left: 15rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 40rpx;
|
||
} |