/* nova-tourism/components/collect/index.wxss */ .all { width: 100vw; overflow-y: scroll; padding-bottom: 30rpx; color: #382E2E; font-weight: 400; font-family: "Microsoft JhengHei", "PingFang SC", "Helvetica Neue", sans-serif; } .all .img2 { width: 100%; height: 442rpx; } .all .box { width: 100%; display: flex; align-items: center; flex-direction: column; padding-left: 20rpx; padding-right: 20rpx; padding-top: 20rpx; } .all .box .taps { width: 100%; height: 180rpx; display: flex; justify-content: space-around; border-bottom: solid 4rpx #99B6A0; margin-top: 26rpx; } .all .box .taps .tap { display: flex; align-items: center; flex-direction: column; } .all .box .taps .tap image { width: 104rpx; height: 102rpx; border-radius: 50%; } .all .box .taps .tap .tap-tex { font-size: 22rpx; margin-top: 22rpx; font-weight: 400; color: #969696; height: 32rpx; } .all .box .box-tex { width: 100%; padding-left: 30rpx; font-size: 32rpx; color: #67806A; margin-top: 16rpx; margin-bottom: 12rpx; } .all .box .picturebox { width: 700rpx; height: 908rpx; position: relative; } .all .box .picturebox .img { width: 100%; height: 908rpx; } .all .box .picturebox .img image { width: 100%; height: 100%; } .all .box .picturebox .numberbox { position: absolute; bottom: 40rpx; right: 20rpx; border-radius: 45%; z-index: 10; color: white; width: 70rpx; height: 45rpx; font-size: 24rpx; display: flex; justify-content: center; align-items: center; background-color: rgba(12, 12, 12, 0.5); } .all .box .picturebox2 { width: 702rpx; height: 420rpx; position: relative; } .all .box .picturebox2 .img { width: 100%; height: 420rpx; } .all .box .picturebox2 .img image { width: 100%; height: 100%; } .all .box .picturebox2 .numberbox { position: absolute; bottom: 40rpx; right: 20rpx; border-radius: 45%; z-index: 10; color: white; width: 70rpx; height: 45rpx; font-size: 24rpx; display: flex; justify-content: center; align-items: center; background-color: rgba(12, 12, 12, 0.5); } .all .box .wangbox { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 60rpx; margin-bottom: 28rpx; } .all .box .wangbox .wang { width: 206rpx; height: 46rpx; font-size: 32rpx; color: #67806A; background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/dm1jj2032446503.png?imageView2/1/w/200/h/200); background-position: center; /* 背景图片居中 */ background-repeat: no-repeat; /* 不重复背景图片 */ display: flex; justify-content: center; align-items: center; } .all .box .wangbox .wang2 { font-size: 24rpx; color: #969696; } .all .box .wang-cardbox { margin-top: 40rpx; width: 100%; background-color: white; overflow-y: hidden; padding-bottom: 40rpx; column-count: 2; /* 设置列数 */ column-gap: 16rpx; /* 设置列间距 */ } .all .box .wang-cardbox .wang-card { break-inside: avoid; /* 防止卡片在列之间断裂 */ margin-bottom: 20rpx; /* 设置卡片底部间距 */ width: 100%; /* 确保卡片宽度为100% */ } .all .box .wang-cardbox .wang-card image { width: 100%; height: 204rpx; border-radius: 10rpx; } .all .box .wang-cardbox .wang-card .wang-catex { font-size: 26rpx; font-weight: 400; height: 76rpx; } .all .box .wang-cardbox .wang-card .wang-numbox { width: 100%; display: flex; align-items: center; } .all .box .wang-cardbox .wang-card .wang-numbox .wang-num { display: flex; justify-content: flex-end; align-items: flex-end; color: #C5262Ced; font-size: 30rpx; } .all .box .wang-cardbox .wang-card .wang-numbox .wang-num .wang-num1 { font-size: 32rpx; } .all .box .wang-cardbox .wang-card .wang-numbox .wang-num .wang-num2 { font-size: 40rpx; } .all .box .wang-cardbox .wang-card .wang-numbox .wang-submit { width: 102rpx; height: 48rpx; font-size: 28rpx; color: white; background-color: #F8DA7F; border-radius: 15rpx; display: flex; justify-content: center; align-items: center; margin-left: auto; } .all .box .more { width: 100%; display: flex; align-items: center; justify-content: center; } .all .box .more .more-tex { font-size: 28rpx; color: #969696; } .all .Legendary-Information { margin-top: 44rpx; width: 100%; background-color: white; overflow-y: hidden; padding-left: 3%; padding-right: 3%; padding-bottom: 40rpx; column-count: 2; /* 设置列数 */ column-gap: 10rpx; /* 设置列间距 */ } .all .Legendary-Information .cardbox { break-inside: avoid; /* 防止卡片在列之间断裂 */ margin-bottom: 20rpx; /* 设置卡片底部间距 */ width: 346rpx; height: 398rpx; /* 确保卡片宽度为100% */ background-color: #F9F9F9; display: flex; align-items: center; flex-direction: column; } .all .Legendary-Information .cardbox .pic { width: 336rpx; height: 198rpx; border-radius: 10rpx; } .all .Legendary-Information .cardbox .textobx { width: 302; height: 152rpx; margin-bottom: 20rpx; } .all .Legendary-Information .cardbox .textobx .title { width: 100%; height: 50rpx; margin-top: 4rpx; display: flex; align-items: center; } .all .Legendary-Information .cardbox .textobx .title .til { font-size: 28rpx; font-weight: 700; } .all .Legendary-Information .cardbox .textobx .title .collect { width: 46rpx; height: 46rpx; margin-left: auto; } .all .Legendary-Information .cardbox .textobx .miaosu { width: 284rpx; height: 70rpx; font-size: 26rpx; font-weight: 400; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; } .all .Legendary-Information .cardbox .textobx .bottom { width: 100%; height: 46rpx; margin-top: 4rpx; display: flex; } .all .Legendary-Information .cardbox .textobx .bottom .qian { font-size: 28; font-weight: 400; color: #C5262Ced; display: flex; } .all .Legendary-Information .cardbox .textobx .bottom .qian .numbox { margin-left: 6rpx; } .all .Legendary-Information .cardbox .textobx .bottom .soucang { width: 118rpx; height: 46rpx; font-size: 24rpx; font-weight: 700; background-color: #343027; border-radius: 40rpx; color: white; margin-left: auto; display: flex; justify-content: center; align-items: center; } @font-face { font-family: 'NotoSans-Bold-5'; src: url('https://file-cloud.fmode.cn//tmp/5iLLGbrCKubyce219ad4b2ae30ae432fe9a88f8261b1.ttf') format('truetype'); /* 字体文件路径 */ } @font-face { font-family: 'NotoSans-Regular-2'; src: url('https://file-cloud.fmode.cn//tmp/5iLLGbrCKubyce219ad4b2ae30ae432fe9a88f8261b1.ttf') format('truetype'); /* 字体文件路径 */ } .all .tab-bar { display: flex; margin-top: 28rpx; font-family: 'NotoSans-Regular-2', sans-serif; } .all .tab-item { padding: 10rpx 0; text-align: center; position: relative; color: #969696; font-size: 28rpx; font-weight: 400; } .all .tab-item.active { position: relative; color: #67806A; font-size: 32rpx; font-weight: 500; font-family: 'NotoSans-Bold-5', sans-serif; } .all .tab-item.active::after { content: ""; width: 64rpx; position: absolute; left: calc(50% - 32rpx); right: calc(50% - 32rpx); bottom: 0; height: 2rpx; background-color: #67806A; border-radius: 4rpx; }