/* packageI/warehouseFarm/warehouseFarmIndex/warehouseFarmIndex.wxss */ view { text-align: center; } #warehouse-farm-index { width: 100%; height: 100vh; overflow: hidden; position: relative; } #warehouse-farm-index .absolute-cell { position: absolute; z-index: 99; } #warehouse-farm-index .absolute-cell image { /* height: auto; */ } #warehouse-farm-index .absolute-cell .text { color: #fff; } .text { text-shadow: 0px 0px 2px #000000; line-height: 14px; font-size: 12px; } #warehouse-farm-index .flex-column { display: flex; flex-direction: column; } #warehouse-farm-index .main { position: relative; height: 100%; width: 100%; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/bg_1.png"); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom; background-color: #b5faff; } #warehouse-farm-index .main .member-info { left: 32rpx; top: 48rpx; height: 56rpx; background-color: rgba(0, 0, 0, 0.5); border-radius: 28rpx; color: #fff; display: flex; align-items: center; padding: 0 16rpx 0 8rpx; max-width: 320rpx; } #warehouse-farm-index .main .member-info image { width: 48rpx; height: 48rpx; border-radius: 50%; margin-right: 8rpx; } #warehouse-farm-index .main .member-info .nickname { flex: 1; overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-space: nowrap; /* 规定段落中的文本不进行换行 */ } #warehouse-farm-index .main .right-nav-list { right: 32rpx; top: 48rpx; } #warehouse-farm-index .main .right-nav-list .nav-item-img { margin-bottom: 16px; } #warehouse-farm-index .main .right-nav-list .nav-item-img image { width: 80rpx; } #warehouse-farm-index .main .left-nav-list { left: 32rpx; top: 140rpx; } #warehouse-farm-index .main .left-nav-list .nav-item-img { margin-bottom: 44rpx; } #warehouse-farm-index .main .left-nav-list .nav-item-img image { width: 80rpx; } #warehouse-farm-index .main .left-nav-list .nav-item-img .text { /* text-shadow: -1px 1px 0 #123904, 1px 1px 0 #123904, 1px -1px 0 #123904, -1px -1px 0 #123904; */ font-size: 12px; } #warehouse-farm-index .main .bottom-nav-list { position: fixed; left: 0; bottom: 0; width: 100%; bottom: 60rpx; display: flex; justify-content: space-around; color: #fff; } #warehouse-farm-index .main .bottom-nav-list image { width: 100rpx; } /* #warehouse-farm-index .main .bottom-nav-list .text-color-1 { text-shadow: -1px 1px 0 #3f8455, 1px 1px 0 #3f8455, 1px -1px 0 #3f8455, -1px -1px 0 #3f8455; } #warehouse-farm-index .main .bottom-nav-list .text-color-2 { text-shadow: -1px 1px 0 #278db0, 1px 1px 0 #278db0, 1px -1px 0 #278db0, -1px -1px 0 #278db0; } #warehouse-farm-index .main .bottom-nav-list .text-color-3 { text-shadow: -1px 1px 0 #c98103, 1px 1px 0 #c98103, 1px -1px 0 #c98103, -1px -1px 0 #c98103; } */ #warehouse-farm-index .main .railing-bg { background-size: 100% auto; background-repeat: no-repeat; z-index: 0; } #warehouse-farm-index .main .left-railing { width: 288rpx; height: 512rpx; left: 0; top: 448rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/railing.png"); } #warehouse-farm-index .main .right-railing { width: 384rpx; height: 384rpx; right: -6px; top: 320rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/home.png"); } #warehouse-farm-index .main .icon-box { position: absolute; } #warehouse-farm-index .main .icon-box image { height: auto; } #warehouse-farm-index .main .icon-box .text-box { position: absolute; display: flex; flex-direction: column; border-radius: 32rpx; color: #fff; background: rgba(18, 42, 13, 0.3); z-index: 99; right: 0; padding: 0 28rpx; font-size: 10px; } #warehouse-farm-index .announcement-box { width: 576rpx; min-height: 576rpx; max-height: 768rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/announcement-bg.png"); background-size: 100% auto; background-repeat: no-repeat; background-color: #fff; display: flex; flex-direction: column; padding: 32rpx; } #warehouse-farm-index .announcement-box .title { font-size: 20px; color: #fff; font-weight: 600; padding: 0 0 112rpx; } #warehouse-farm-index .announcement-box .content { flex: 1; padding-bottom: 32rpx; overflow-y: scroll; } #warehouse-farm-index .rank-box, #warehouse-farm-index .dynamic-box { background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/dynamic-bg.png"); background-size: 100% auto; background-repeat: no-repeat; display: flex; flex-direction: column; height: 100%; overflow: hidden; } #warehouse-farm-index .rank-box .title, #warehouse-farm-index .dynamic-box .title { height: 100rpx; line-height: 100rpx; font-size: 20px; color: #fff; font-weight: 600; } #warehouse-farm-index .rank-box .content, #warehouse-farm-index .dynamic-box .content { /* flex: 1; */ background-color: #fff; /* overflow: scroll; */ } #warehouse-farm-index .dynamic-box .content { padding: 64rpx 52rpx 0; } #warehouse-farm-index .dynamic-box .content .dynamic-list { background-color: #ececec; border-radius: 12rpx; padding: 28rpx 36rpx; margin-bottom: 24rpx; text-align: left; position: relative; } #warehouse-farm-index .dynamic-box .content .dynamic-list .time { font-size: 12px; color: #787878; text-align: left; } #warehouse-farm-index .dynamic-box .content .dynamic-list .text { padding-top: 28rpx; font-size: 14px; line-height: 14px; text-align: left; } #warehouse-farm-index .dynamic-box .content .dynamic-list .chip { position: absolute; left: -6px; display: inline-block; width: 0; height: 0; border-style: solid; transform: rotate(0deg); border-width: 6px 6px 6px 0; border-color: transparent #ececec transparent transparent; } #warehouse-farm-index .rank-box .rank-list { display: flex; align-items: center; } #warehouse-farm-index .rank-box .rank-list .rank-num { width: 116rpx; text-align: center; } #warehouse-farm-index .rank-box .rank-list .rank-num .medal { width: 40rpx; } #warehouse-farm-index .rank-box .rank-list .rank-conten { flex: 1; display: flex; align-items: center; overflow: hidden; border-bottom: 1rpx solid #f1f1f1; margin-right: 32rpx; } #warehouse-farm-index .rank-box .rank-list .img { width: 84rpx; height: 84rpx; background-color: #787878; border-radius: 50%; overflow: hidden; } #warehouse-farm-index .rank-box .rank-list .img image { width: 100%; height: 100%; } #warehouse-farm-index .rank-box .rank-list .member-info { flex: 1; height: 84rpx; text-align: left; overflow: hidden; margin: 30rpx 0 30rpx 24rpx; justify-content: space-between; } #warehouse-farm-index .rank-box .rank-list .member-info .nickname { text-align: left; font-size: 16px; overflow: hidden; /* 超出部分隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-space: nowrap; /* 规定段落中的文本不进行换行 */ } #warehouse-farm-index .rank-box .rank-list .member-info .total { text-align: left; color: #949494; font-size: 12px; } #warehouse-farm-index .self-bg-color { background-color: #f0ffe0; } /* 红包 */ .reward-box { width: 584rpx; height: 756rpx; background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/warehouse-farm/rewardbg.png"); background-size: 100% 100%; background-repeat: no-repeat; display: flex; flex-direction: column; } .reward-box .avatar { width: 92rpx; height: 92rpx; border-radius: 50%; margin: 107rpx auto 0; } .reward-box .nickname { color: #fefefe; text-shadow: 1px 1px 2px #333; padding: 0 28rpx; margin-top: 20rpx; } .reward-box .reward-text { color: #ffdb8d; margin-top: 40rpx; font-size: 16px; text-shadow: 2px 1px 2px #83070c; } .reward-box .open-reward { width: 196rpx; height: 196rpx; margin: 80rpx auto 0; } .van-popup-transparent { background-color: transparent; } .rollback { transition: transform 2s; transform-style: preserve-3d; animation: PacketRollback 0.5s 0.5s both linear; } @keyframes PacketRollback { 0% { transform: rotateY(0deg) scale(0); } 30% { transform: rotateY(90deg) scale(0.3); } 60% { transform: rotateY(180deg) scale(0.6); } 80% { transform: rotateY(270deg) scale(0.7); } to { transform: rotateY(360deg) scale(1); } } .circle-left { position: relative; padding-left: 48px; } .circle-left .data-circle { position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 12px; } .todayDynamic-box .data-circle { background-color: #92cf51; color: #fff; } .todayDynamic-box::before { position: absolute; content: ""; width: 1rpx; left: 15px; top: 40px; height: calc(100% - 40px); background: #d3d3d3; } .beforeDynamic-box .data-circle { background-color: #cdcbcb; color: #666; } .clone-reward-btn { color: #fff; width: 28px; height: 28px; line-height: 28px; font-size: 14px; border: 1px solid; margin: 12px auto; border-radius: 50%; }