/* pages/minePages/bsrl/bsrl.wxss */ page { width: 100%; height: 100vh; background: linear-gradient(to bottom, #4794FF 260rpx, #F6F9FD 260rpx); } .link-box { position: absolute; top: 0; left: 0; z-index: 5; padding: 0 184rpx; width: 100%; height: 72rpx; box-sizing: border-box; display: flex; justify-content: space-between; } .link { width: 22rpx; height: 100%; border-radius: 11rpx; border: 1px solid #4794ff; background: #ffffff; box-sizing: border-box; } .bsrl-container { margin: 50rpx 32rpx; width: calc(100% - 64rpx); height: calc(100% - 100rpx); background: #ffffff; border-radius: 30rpx; box-shadow: 0px 0px 28rpx 0px rgba(0, 0, 0, 0.12); } .date-box { padding-top: 52rpx; padding-bottom: 30rpx; margin: 0 25rpx; width: calc(100% - 50rpx); border-bottom: 1px solid #c8c8c8; } .date-title { padding: 0 20rpx; width: 100%; height: 45rpx; display: flex; justify-content: space-between; box-sizing: border-box; } .date-title-left, .date-title-right { width: 45rpx; height: 45rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .date-title-left>image, .date-title-right>image { width: 100%; height: auto; } .date-title-left>image { rotate: 180deg; } .date-title-center { position: relative; width: 0; flex: 1; height: 100%; } .date-title-center-text { width: 100%; height: 100%; font-size: 32rpx; line-height: 45rpx; font-family: "苹方M"; color: #3B3B3B; display: flex; align-items: center; justify-content: center; } .date-title-center-back { position: absolute; top: 2.5rpx; z-index: 5; right: 50rpx; width: 100rpx; height: 40rpx; font-size: 20rpx; font-family: "苹方R"; color: #989898; display: flex; align-items: center; justify-content: center; border-radius: 20rpx; border: 0.7px solid #989898; } .date-title-hover { opacity: 0.6; } .date-week { padding: 0 10rpx; margin: 10rpx 0; width: 100%; height: 70rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .week { min-width: 70rpx; max-width: 70rpx; height: 70rpx; line-height: 70rpx; font-size: 26rpx; color: #8E99A4; font-family: "苹方R"; text-align: center; } .date-day { padding: 0 10rpx; margin: 10rpx 0; width: 100%; height: 70rpx; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; } .day { min-width: 70rpx; max-width: 70rpx; height: 70rpx; font-size: 26rpx; color: #3B3B3B; font-family: "苹方M"; border-radius: 50%; box-sizing: border-box; transition: all 0.35s; border: 2px solid #ffffff00; display: flex; align-items: center; justify-content: center; } .day-not { color: #C8C8C8; } .day-selected { color: #4794FF; border: 2px solid #4794FF; box-shadow: 0px 6rpx 12rpx 0px #b8d6ff; } .day-now { position: relative; color: #FFFFFF; background: #4794FF; } .day-now::before { content: ""; position: absolute; bottom: 2rpx; left: calc(50% - 6rpx); width: 12rpx; height: 12rpx; background: #00EF9E; border-radius: 50%; } .tabbar { margin: 0 40rpx; padding-top: 20rpx; padding-bottom: 16rpx; width: calc(100% - 80rpx); height: 48rpx; display: flex; align-items: center; justify-content: space-between; } .tab { position: relative; width: 40%; height: 100%; font-size: 26rpx; color: #8E99A4; font-family: "苹方M"; display: flex; align-items: center; justify-content: center; transition: 0.35s; } .tab-active::before { content: ""; position: absolute; bottom: 0; left: calc(50% - 13rpx); width: 26rpx; height: 6rpx; border-radius: 3rpx; background: #336FE900; transition: 0.35s; } .tab-active { color: #336FE9; } .tab-active::before { background: #336FE9; } .detail { margin: 0 25rpx; width: calc(100% - 50rpx); height: calc(100% - 791rpx); background: #f4f7ff; border-radius: 30rpx; } .dayDetail-box, .monthDetail-box { padding: 30rpx 50rpx; box-sizing: border-box; } .dayDetail { position: relative; padding-left: 20rpx; font-size: 26rpx; color: #3B3B3B; font-family: "苹方R"; line-height: 39rpx; box-sizing: border-box; } .dayDetail::before { position: absolute; left: 0; top: 14.5rpx; content: ""; width: 10rpx; height: 10rpx; border-radius: 50%; background: #4794FF; } .monthDetail { display: flex; align-items: flex-start; } .monthDetail-date { width: 150rpx; font-size: 26rpx; line-height: 39rpx; text-align: left; color: #3B3B3B; font-family: "苹方R"; } .monthDetail-content { position: relative; padding-left: 30rpx; width: 0; flex: 1; font-size: 26rpx; line-height: 39rpx; color: #3B3B3B; font-family: "苹方R"; border-left: 1px solid #4794ff; } .monthDetail-content::before { position: absolute; left: -6.5rpx; top: 13.5rpx; content: ""; width: 12rpx; height: 12rpx; border-radius: 50%; background: #4794FF; }