mini-shop/webview/shop-container/css/style.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  font-size: 12px;
}
html, body, iframe {
  width: 100%;
  font-family: -apple-system;
  height: 100%;
  overflow: hidden;
}

.layer {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: scale(1);
}

.bgd {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
}

.bottom-dialog {
  position: fixed;
  top: 23%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  z-index: 2;
  font-size: 12px;
}

.bottom-dialog .title {
  flex: 0 0 auto;
  padding: 1.5rem 1.3rem;
  border-bottom: 1px solid rgb(236, 236, 236);
  position: relative;
}

.bottom-dialog .title .text {
  font-size: 1.5rem;
  color: #131D34;
  font-weight: bold;
}

.bottom-dialog .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  padding: 1.5rem;
  right: 0;
}

.bottom-dialog .icon img {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
}



.commodity-view {
  position: fixed;
  top: 23%;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: #fff;
  border-radius: 1.2rem 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  display: none;
}

.commodity-view .content {
  flex: 1;
  padding: 0 1.5rem;
  position: relative;
  /* display: flex;
  flex-direction: column; */
}

.commodity-view .scene-icon {
  --width: 14px;
  --height: 5px;
  padding: calc(var(--height) * 1) calc(var(--width) * 0.3);
  position: absolute;
  left: 8px;
  bottom: 5px;
  width: calc(--width);
  height: calc(--height);
  z-index: 3;
}


.commodity-view .tabs {
  flex: 0 0 auto;
  width: 100%;
  overflow-x: scroll;
  padding-bottom: 4px;
  position: relative;
}

#headers {
  display: flex;
}

.commodity-view .tabs .text {
  float: left;
  height: 3.1rem;
  line-height: 3.1rem;
  color: #131D34;
  font-size: 1.08rem;
  margin-right: 1.6rem;
  text-align: center;
  flex: 0 0 auto;
}

.commodity-view .tabs .text span {
  font-size: 0.8em;
}

.commodity-view .tabs .text.active {
  color: #ED5D18;
  font-size: 1.3rem;
  position: relative;
}

.commodity-view .tabs .text.active div {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #ED5D18;
  margin: 0 10px;
}

.commodity-view .current-tab {
  flex: 0 0 auto;
  height: 2.5rem;
  margin-left: -1.33rem;
  width: calc(100% + 2.66rem);
  background-color: #F8F8F8;
  padding: 0 1.33rem;
  line-height: 2.5rem;
  font-size: 1.1em;
  color: #999999;
}



.commoditys {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.16rem;
  bottom: 0;
  height: calc(100% - 4.16rem);
  overflow-y: scroll;
  padding: 0 1.5rem;
}

.commodity-item {
  margin-top: 12px;
  display: flex;
  align-items: center;
  position: relative;
}

.commodity-view .cover {
  flex: 0 0 auto;
  width: 7.5rem;
  height: 7.5rem;
}

.commodity-view .item-content {
  flex: 1;
  margin-left: 1.2rem;
}

.commodity-view .item-content .desc {
  font-size: 1.2rem;
  color: #131D34;
  line-height: 1.66rem;
  white-space: pre-wrap;
}

.commodity-view .item-info {
  margin-top: 1.33rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
}

.commodity-view .item-info>.money {
  flex: 0 0 auto;
}

.commodity-view .item-info>.oper {
  position: relative;
}



.oper .lack {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.33rem;
  height: 8.33rem;
}

.commodity-view .money .text {
  display: inline;
  color: #ED5D18;
}

.commodity-view .money .text:nth-child(1),
.money .text:nth-child(3) {
  font-size: 1rem;
  margin-right: 5px;
  vertical-align: baseline;
}

.commodity-view .money .text:nth-child(2) {
  font-size: 18px;
  vertical-align: baseline;
}

.oper-btn {
  display: inline-block;
  border-radius: 4px;
  height: 2.16rem;
  line-height: 2.16rem;
  padding: 0 8px !important;
  color: #fff;
  font-size: 1rem;
}

.commodity-view .oper {
  height: 2.25rem;
  display: flex;
}

.commodity-view .oper-btn:nth-child(1) {
  background-color: #FFCD3C;
  margin-right: 5px;
}

.commodity-view .oper-btn:nth-child(2) {
  background-color: #ED5D18;
}


@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
} 



.brick {
  text-align:center;
  position:relative;
  width: var(--width);
  height: var(--height);
  transform-style:preserve-3d;
  transform-origin: calc(var(--width) / 2) calc(var(--height) / 2);
  margin: 0 auto calc(var(--width) / 12);
}
.brick-1 {
  animation: rorate 2s 1s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(30px);
}
.brick-2 {
  animation: rorate 2s 0.75s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(20px);
}
.brick-3 {
  animation: rorate 2s 0.5s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(10px);
}
.face {
  width:var(--width);
  height: var(--height);
  overflow:hidden;
  position:absolute;
  background: rgba(255,255,255,0.4);
  opacity: 0;
}
.brick.enter {
  transition: 0.5s  all;
  transform: rotateX(-30deg) rotateY(45deg);
}
.brick.enter .face {
  transition: 0.5s  all;
  opacity: 1;
}
.brick-2 .face {
  background: rgba(255,255,255,0.3);
}
.brick-2 .brick-front, .brick-back {
  background: rgba(255,255,255,0.4);
}
.brick-3 .face {
    background: rgba(255,255,255,0.2);
}
.brick-3 .brick-front, .brick-back {
    background: rgba(255,255,255,0.1);
}
.brick-front {
  transform:translate3d(0,0, calc(var(--width) / 2));
  background: rgba(255,255,255,0.6);
}
.brick-top {
  width:var(--width);
  height:var(--width);
  transform:rotateX(90deg) translate3d(0,0, calc(var(--width) / 2));
  background-color: rgba(255,255,255,0.8);
}
.brick-bottom {
  width:var(--width);
  height:var(--width);
  transform: rotateX(-90deg) translate3d(0,0, calc(var(--height) / 2));
  background-color: rgba(255,255,255,0.8);
}
.brick-left {
  transform:rotateY(-90deg) translate3d(0,0,calc(var(--width) / 2));
  background: rgba(255,255,255,0.5);
}
.brick-right {
  transform:rotateY(90deg) translate3d(0,0,calc(var(--width) / 2));
  background: rgba(255,255,255,0.5);
}
.brick-back {
  transform:rotateY(180deg) translate3d(0,0,calc(var(--width) / 2));
  background: rgba(255,255,255,0.6);
}


.brick {
  width: var(--width);
  height: var(--height);
  transform-origin: calc(var(--width) / 2) calc(var(--height) / 2);
  margin: 0 auto calc(var(--width) / 12);
}
.brick.enter {
  transition: 0.5s all;
  transform: rotateX(-30deg) rotateY(45deg);
}
.brick.enter .face {
  transition: 0.5s all;
  opacity: 1;
}
.brick-1 {
  animation: rorate 2s 1s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(30px);
}
.brick-2 {
  animation: rorate 2s 0.75s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(20px);
}
.brick-3 {
  animation: rorate 2s 0.5s  infinite linear;
  transform: rotateX(-30deg) rotateY(45deg) translateZ(10px);
}
.face {
  width:var(--width);
  height: var(--height);
}
.brick-front {
  transform:translate3d(0,0, calc(var(--width) / 2));
}
.brick-top {
  width:var(--width);
  height:var(--width);
  transform:rotateX(90deg) translate3d(0,0, calc(var(--width) / 2));
}
.brick-bottom {
  width:var(--width);
  height:var(--width);
  transform: rotateX(-90deg) translate3d(0,0, calc(var(--height) / -2));
}
.brick-left {
  transform:rotateY(-90deg) translate3d(0,0,calc(var(--width) / 2));
}
.brick-right {
  transform:rotateY(90deg) translate3d(0,0,calc(var(--width) / 2));
}
.brick-back {
  transform:rotateY(180deg) translate3d(0,0,calc(var(--width) / 2));
}


@keyframes rorate {
  0% {
      transform:  rotateX(-30deg) rotateY(-45deg) ;
  }
  50% {
      transform:  rotateX(-30deg) rotateY(-315deg) ;
  }
  100%{
      transform:  rotateX(-30deg) rotateY(-315deg) ;
  }
}