/* nova-caipu/pages/new-app/index.wxss */ .all{ width: 100vw; height: 100vh; color: #382E2E; position:relative; font-family: "Microsoft JhengHei", "PingFang SC", "Helvetica Neue", sans-serif; font-weight: 400; .picturebox{ width: 100%; height: 442rpx; .img{ width: 100%; height: 442rpx; image{ width: 100%; height: 100%; } } } .Inforbox{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: -62rpx; z-index: 100; .infobox{ width: 686rpx; height: 222rpx; background-color: white; display: flex; justify-content: center; flex-direction: column; align-items: center; border-radius: 20rpx; z-index: 100; border: solid #e5e5e5 2rpx; box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2); .seach{ width: 80%; height: 96rpx; background-color: white; display: flex; justify-content: center; align-items: center; .input{ width: 358rpx; height: 60rpx; margin-left: 31rpx; } } .datebox{ width: 90%; height: 132rpx; display: flex; align-items: center; font-size: 32rpx; border-top: solid #e5e5e5 2rpx; .today{ font-size: 28rpx; color: #707070; margin-left: 10rpx; display: flex; justify-content: flex-end; } .start{ display: flex; justify-content: flex-end; color: #000000; } .day{ display: flex; justify-content: center; align-items: center; margin-left: auto; width: 90rpx; height: 42rpx; background-color: #D9D9D980; font-size: 22rpx; color: black; } .end{ margin-left: auto; color: #000000; } } } } .Legendary-Information{ width: 100%; background-color: white; overflow-y: hidden; padding-left: 3%; padding-right: 3%; padding-bottom: 40rpx; display: flex; justify-content: center; flex-wrap: wrap; /* 允许换行 */ gap: 10rpx; /* 设置间距 */ margin-top: 12rpx; .container { display: flex; /* 使用 Flexbox 布局 */ flex-direction: column; /* 垂直排列 */ width: 346rpx; /* 计算宽度,考虑间距 */ margin-bottom: 20rpx; /* 设置底部间距 */ .picbox { height: 274rpx; width: 330rpx; /* 根据需要调整宽度 */ background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png?imageView2/1/w/200/h/200'); margin-bottom: 18rpx; break-inside: avoid; float: left; background-size: cover; /* 使背景图按比例缩放,覆盖整个盒子 */ background-position: center; /* 背景图位置居中 */ .pic-2{ width: 100%; height: 56rpx; } .pic-1{ width: 100%; height: 66rpx; padding-left: 126rpx; margin-top: 6rpx; .pic-1tex{ font-size: 28rpx; } .pic-1tex2{ font-size: 14rpx; } } } .cardbox { width:100%; /* 计算宽度,考虑间距 */ background-color: #F9F9F9; box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */ margin-bottom: 10rpx; /* 设置卡片底部间距 */ // width: 49%; /* 确保卡片宽度为100% */ height: 398rpx; background-color: #F9F9F9; display: flex; align-items: center; flex-direction: column; // float: left; .pic{ width: 336rpx; height: 198rpx; border-radius: 10rpx; } .textobx{ width: 302rpx; height: 152rpx; margin-bottom: 20rpx; // padding-top: 6rpx; .title{ width: 100%; height: 50rpx; margin-top: 4rpx; display: flex; align-items: center; .til{ font-size: 28rpx; font-weight: 700; color: #000000; } .collect{ width: 46rpx; height: 46rpx; margin-left: auto; } } .miaosu{ width: 284rpx; height: 70rpx; /* 设置固定高度 */ font-size: 26rpx; font-weight: 400; overflow: hidden; /* 隐藏超出部分 */ display: -webkit-box; /* 使用弹性盒子布局 */ -webkit-box-orient: vertical; /* 垂直排列 */ -webkit-line-clamp: 2; /* 限制显示的行数,这里设置为3行 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } .miaosu2{ width: 100%; height: 80rpx; } .bottom{ width: 100%; height: 46rpx; margin-top: 4rpx; display: flex; .qian{ font-size: 28; font-weight: 400; color: #C5262C; display: flex; .numbox{ margin-left: 6rpx; } } .soucang{ width: 118rpx; height: 46rpx; font-size: 24rpx; font-weight: 700; background-color: #343027; border-radius: 12rpx; color: white; margin-left: auto; display: flex; justify-content: center; align-items: center; } } } } } } .bottom2{ width: 100%; font-size: 26rpx; margin-bottom: 40rpx; display: flex; align-items: center; justify-content: center; } .Legendary-Information2{ margin-top: 204rpx; width: 100%; background-color: white; overflow-y: hidden; padding-left: 3%; padding-right: 3%; padding-bottom: 40rpx; } }