tourism-wxapp/nova-tourism/components/homestay/index.wxss

/* 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;
}
.all .picturebox {
  width: 100%;
  height: 442rpx;
}
.all .picturebox .img {
  width: 100%;
  height: 442rpx;
}
.all .picturebox .img image {
  width: 100%;
  height: 100%;
}
.all .Inforbox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -62rpx;
  z-index: 100;
}
.all .Inforbox .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);
}
.all .Inforbox .infobox .seach {
  width: 80%;
  height: 96rpx;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.all .Inforbox .infobox .seach .input {
  width: 358rpx;
  height: 60rpx;
  margin-left: 31rpx;
  font-size: 26rpx;
}
.all .Inforbox .infobox .datebox {
  width: 90%;
  height: 132rpx;
  display: flex;
  align-items: center;
  font-size: 32rpx;
  border-top: solid #e5e5e5 2rpx;
}
.all .Inforbox .infobox .datebox .today {
  font-size: 28rpx;
  color: #707070;
  margin-left: 10rpx;
  display: flex;
  justify-content: flex-end;
}
.all .Inforbox .infobox .datebox .start {
  display: flex;
  justify-content: flex-end;
  color: #000000;
}
.all .Inforbox .infobox .datebox .day {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  width: 90rpx;
  height: 42rpx;
  background-color: #D9D9D980;
  font-size: 22rpx;
  color: black;
}
.all .Inforbox .infobox .datebox .end {
  margin-left: auto;
  color: #000000;
}
.all .Legendary-Information {
  width: 686rpx;
  margin: auto;
  margin-top: 20rpx;
  column-count: 2;
}
.all .Legendary-Information .picbox {
  margin-bottom: 20rpx;
  height: 274rpx;
  width: 330rpx;
  background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png');
  break-inside: avoid;
  float: left;
  background-size: cover;
  /* 使背景图按比例缩放，覆盖整个盒子 */
  background-position: center;
}
.all .Legendary-Information .picbox .pic {
  width: 100%;
  height: 66rpx;
  padding-left: 126rpx;
  padding-right: 10rpx;
  margin-top: 6rpx;
}
.all .Legendary-Information .picbox .pic .pic-1tex {
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.all .Legendary-Information .picbox .pic .pic-1tex2 {
  font-size: 14rpx;
}
.all .Legendary-Information .container {
  overflow: auto;
  float: left;
  height: 400rpx;
  flex-shrink: 0;
  width: 330rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.all .Legendary-Information .container .cardbox {
  width: 100%;
  background-color: whitesmoke;
  margin-bottom: 10rpx;
  height: 398rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.all .Legendary-Information .container .cardbox .pic {
  width: 330rpx;
  height: 198rpx;
  border-radius: 10rpx;
}
.all .Legendary-Information .container .cardbox .textobx {
  width: 302rpx;
  height: 152rpx;
  margin-bottom: 20rpx;
}
.all .Legendary-Information .container .cardbox .textobx .title {
  width: 100%;
  height: 50rpx;
  margin-top: 4rpx;
  display: flex;
  align-items: center;
}
.all .Legendary-Information .container .cardbox .textobx .title .til {
  font-size: 28rpx;
  font-weight: 700;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.all .Legendary-Information .container .cardbox .textobx .title .collect {
  width: 46rpx;
  height: 46rpx;
  margin-left: auto;
}
.all .Legendary-Information .container .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;
  /* 限制显示的行数，这里设置为3行 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
}
.all .Legendary-Information .container .cardbox .textobx .miaosu2 {
  width: 100%;
  height: 80rpx;
}
.all .Legendary-Information .container .cardbox .textobx .bottom {
  width: 100%;
  height: 46rpx;
  margin-top: 4rpx;
  display: flex;
}
.all .Legendary-Information .container .cardbox .textobx .bottom .qian {
  font-size: 28;
  font-weight: 400;
  color: #C5262C;
  display: flex;
}
.all .Legendary-Information .container .cardbox .textobx .bottom .qian .numbox {
  margin-left: 6rpx;
}
.all .Legendary-Information .container .cardbox .textobx .bottom .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;
}
.all .bottom2 {
  width: 100%;
  font-size: 26rpx;
  margin-bottom: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.all .Legendary-Information2 {
  margin-top: 204rpx;
  width: 100%;
  background-color: white;
  overflow-y: hidden;
  padding-left: 3%;
  padding-right: 3%;
  padding-bottom: 40rpx;
}