min-project/component/rent-pop/rent-pop.wxss

/* template/rent-pop/rent-pop.wxss */
view {
  box-sizing: border-box;
}
/* 公共的 css 样式 */
.flexflex {
  display: flex;
}
.flexcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexjcenter {
  display: flex;
  justify-content: center;
}
.flexacenter {
  display: flex;
  align-items: center;
}
.flex1 {
  flex: 1;
}
.flexcolumn {
  display: flex;
  flex-direction: column;
}
.pop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.71764706);
  z-index: 100;
}
.box {
  width: 630rpx;
  height: 990rpx;
  position: relative;
  z-index: 1;
  margin-bottom: 49.5rpx;
  transform-style: preserve-3d;
}
@keyframes rotateAnimation {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
.box .star {
  position: absolute;
}
.box .star1 {
  width: 60rpx;
  height: 60rpx;
  top: 649.5rpx;
  left: -60rpx;
}
.box .star2 {
  width: 72rpx;
  height: 72rpx;
  top: -85.5rpx;
  right: 66rpx;
}
.box .star3 {
  width: 78rpx;
  height: 78rpx;
  right: -30rpx;
  bottom: -76.5rpx;
}
.box .bj {
  width: 630rpx;
  height: 990rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.box .city-bj {
  width: 630rpx;
  height: 517.5rpx;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.box .head {
  position: relative;
  margin: 0 auto;
  width: 300rpx;
  display: flex;
}
.box .head .head-bj {
  position: absolute;
  left: -7.5rpx;
  top: -7.5rpx;
  width: 315rpx;
  height: 228rpx;
  transform: rotate(180deg);
  z-index: -1;
}
.box .head .head-box {
  height: 84rpx;
  position: relative;
  z-index: 1;
  width: 300rpx;
}
.box .head .head-box .icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 6rpx;
}
.box .head .head-box .xg {
  width: 67.5rpx;
  height: 43.5rpx;
}
.box .main {
  width: 561rpx;
  height: 843rpx;
  background: linear-gradient(180deg, #f7f7f7 1%, #f2f2f2 100%);
  border: 1rpx solid #333333;
  margin-left: 40.5rpx;
  position: relative;
  z-index: 1;
}
.box .main .main-bj {
  position: absolute;
  top: 10.5rpx;
  left: -10.5rpx;
  width: 561rpx;
  height: 843rpx;
  background: linear-gradient(180deg, #f7f7f7 1%, #f2f2f2 100%);
  border: 1rpx solid #333333;
  z-index: -10;
  padding-top: 24rpx;
}
.box .main .main-bj .title {
  width: 487.5rpx;
  height: 75rpx;
  margin-bottom: 18rpx;
}
.box .main .main-bj .title-line {
  width: 481.5rpx;
  height: 3rpx;
  margin-bottom: 22.5rpx;
}
.box .main .main-bj .hint {
  width: 387rpx;
  height: 54rpx;
  margin-bottom: 28.5rpx;
}
.box .main .main-bj .data {
  position: relative;
  width: 480rpx;
  height: 136rpx;
  z-index: 1;
  margin-bottom: 35rpx;
}
.box .main .main-bj .data .data-bj {
  width: 480rpx;
  height: 136rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.box .main .main-bj .data .item {
  text-align: center;
}
.box .main .main-bj .data .item .value {
  font-family: 'Arial-Black', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 42rpx;
  color: #000000;
  text-align: center;
}
.box .main .main-bj .data .item .text {
  color: #333333;
  font-size: 27rpx;
}
.box .main .main-bj .data .line {
  width: 1rpx;
  height: 94.5rpx;
  border-right: 1rpx dotted #797979;
  margin: 0 52.5rpx;
}
.box .main .main-bj .img-box {
  width: 480rpx;
  height: 376.5rpx;
  position: relative;
  z-index: 1;
  margin-bottom: 10rpx;
}
.box .main .main-bj .img-box .img {
  position: absolute;
  left: -10.5rpx;
  top: -10.5rpx;
  width: 501rpx;
  height: 397.5rpx;
  z-index: -1;
}
.box .main .main-bj .img-box .text {
  font-weight: 400;
  font-style: normal;
  font-size: 22.5rpx;
  color: #555555;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 20rpx;
}
.box .main .main-bj .arrows .icon {
  width: 45rpx;
  height: 45rpx;
}
.box .main .main-bj .arrows .icon:nth-child(2) {
  margin: 0 15rpx;
}
.btn {
  position: relative;
  width: 450rpx;
  height: 96rpx;
  background: -webkit-linear-gradient(270deg, #fcfdce 0%, #d2d51d 52%, #fbfccb 100%);
  background: -moz-linear-gradient(180deg, #fcfdce 0%, #d2d51d 52%, #fbfccb 100%);
  background: linear-gradient(180deg, #fcfdce 0%, #d2d51d 52%, #fbfccb 100%);
  border: none;
  border-radius: 225rpx;
}
.btn .img {
  width: 199.5rpx;
  height: 70.5rpx;
  margin-right: 18rpx;
}
.btn .arrows {
  width: 45rpx;
  height: 45rpx;
}
.close {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  bottom: -100rpx;
}
.imgimg {
  width: 100vw;
  height: 500rpx;
}