download.css 11.2 KB
.top-downloadbar {
  display: block;
  height: 2.39rem;
  background: rgba(255, 255, 255, .9);
  width: 100%;
  padding: .35rem 0;
  position: relative;
  box-sizing: content-box;
  font-family: "PingFang-SC-Regular", Helvetica, Arial, sans-serif;
}

.width750 .top-downloadbar {
  display: block;
  height: 2.8rem;
  background: rgba(255, 255, 255, .9);
  width: 100%;
  padding: .35rem 0;
  position: relative;
  box-sizing: content-box;
}

.top-downloadbar .download-close {
  margin-left: .665rem;
  width: .8rem;
  height: .8rem;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAAAilBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAATAggvAAAALXRSTlMABrZcohcR+u/WyUAqAp706t69rYF6Z2BTTkYwJSALnMTD9eDReG1rSTkbCop2jEB9AAADV0lEQVRo3rSXaXuqQAyFDx0WC7gviCCobV07///v3UtCEa9YJuI9n9QnzDuZ5JgBMlnuOjydwrVr4f9ovZzbfk9X6vn2fLl+KeKsBh+6UR8DdX4Nwz34+lf5B7crox9PPd0qbxr3O0As9a5rGm3z+T5arlbLaD/PtyNd07uynoUsxtf9bmaBe3ecwWxzzXW8eAoUVJkM7WOGB8qO9rDKKBBDHFuXmqiS8ZCkJrqU7cgo6sch0wQGSqY/blICyCXXrEEKQ6UDzcovMFRYVsVPIFDilxUKYaR4x/kv+kKPLfikdzEMFHlceQdiOdwLXoRWfWnS7Clb92ea9IUWfbPfAzypgP8bvk1yGad4Wum4PZ+IQj4ddJDzSYv8Up+Yqr9xO06ODfVB/NAvO8qFKJ04lM8ufOD9d6qLg85yxuTTC5o0oB5L8QKl1G8DNEjpQgFeooAWUw2J9siVeJHIp737AtB8mfTr4FUIgcJVfdH+hObPXZZ3dDX8G2YZT3Rb66G6O53gnyjqskU9jGbvm2VIeaNpXt/mgrqNnr/9za8f2Upr5hhSSKv6sfm883oYNXpyc9TakMMU1k0xE7Jh/XHV0OZ2xTGm2A1GVLX8qDJpw8PNHMPAlKpzrURMdxjDxwVhdN+Jb78mRguIgpKb7bte4UyDJcQhhUc9F6wDl0rOaQvg1jqA5RfOytqXkW8jKzzug3Que7GNI6VUrjhfMzvCgCMv3ZHqUbnIy2DAEVOQeZXvi7fXrcAYIlttivdgehPncSbgCCg83tYAljwXBBwBhefYEsC8+OBCwBFQ4BZB87LnRoCAY0hhjUq3+NQBAo6Igm1p0GJm55BwJBTkxR0DsPjwJBwJhUtvcY32kHAkFOypw9g2EQQcEQURGyfkxhZwRBS2ZYgTX3wEHBGFL2KnP9XawQ2AIBBE0Q5oQT3Tf38mHD2h4GOwAROD7Oz8j16DPho6AuhAo9/TXDbo6kSDAI01NKRd5GgB6vw1QKE4iMItiupm8UBrFFoKzYqLFnZUP5gyBVVDpuhCtZ0pIU2ligpiU3eT8v5AKMKAFYOJDPRaj/DmAckMvDoHFuegbwLy21PLdy2h1DTJYkAZyRRgnjrP1aPzJMtJ71SrHcSxHg1uN6lvXFG8AXBiYN0nZPBwAAAAAElFTkSuQmCC);
}

.width750 .top-downloadbar .download-close {
  margin-left: .78rem;
  width: .94rem;
  height: .94rem;
}

.top-downloadbar .download-close,
.top-downloadbar .download-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-size: contain;
  background-repeat: no-repeat;
}

.top-downloadbar .download-icon {
  width: 2.28rem;
  height: 2.28rem;
  left: 1.93rem;
  border-radius: 0.3rem;
  overflow: hidden;
  background-image: url(data:image/png;base64,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);
}

.width750 .top-downloadbar .download-icon {
  width: 2.675rem;
  height: 2.675rem;
  left: 2.26rem;
  border-radius: 0.3rem;
}

.top-downloadbar .download-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  left: 4.65rem;
  color: #555;
  font-size: .512rem;
}

.width750 .top-downloadbar .download-text {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  left: 5.45rem;
  color: #555;
  font-size: .6rem;
}

.top-downloadbar-wechat .download-text {
}

.top-downloadbar .download-text-desc {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  left: 4.65rem;
  color: #000;
  font-size: 0.6rem;
  font-weight: bold;
}

.width750 .top-downloadbar .download-text-desc {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  left: 5.45rem;
  color: #000;
  font-size: 0.7rem;
  font-weight: bold;
}

.top-downloadbar .download-go,
.top-downloadbar .download-go-wechat {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: .512rem;
  padding: 0 .21rem;
  /*height: 1.24rem;*/
  line-height: 1.24rem;
  border-radius: .125rem;
  color: #fff;
  text-decoration: none;
}

.width750 .top-downloadbar .download-go,
.width750 .top-downloadbar .download-go-wechat {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: .6rem;
  padding: 0 .25rem;
  /*height: 1.45rem;*/
  line-height: 1.45rem;
  border-radius: .125rem;
  color: #fff;
  text-decoration: none;
}

.top-downloadbar .download-go {
  right: 0.34rem;
  padding: 0 0.32rem;
  background: #d0021b;
  -webkit-animation: animateDownloadButton 1s linear infinite;
  animation: animateDownloadButton 1s linear infinite;
}

.width750 .top-downloadbar .download-go {
  right: 0.4rem;
  padding: 0 0.375rem;
  background: #d0021b;
  -webkit-animation: animateDownloadButton 1s linear infinite;
  animation: animateDownloadButton 1s linear infinite;
}

.top-downloadbar .download-go-wechat {
  right: 3.456rem;
  background: #d0021b;
  -webkit-animation: animateDownloadButton 1s linear infinite;
  animation: animateDownloadButton 1s linear infinite;
}

.width750 .top-downloadbar .download-go-wechat {
  right: 4.05rem;
  background: #d0021b;
  -webkit-animation: animateDownloadButton 1s linear infinite;
  animation: animateDownloadButton 1s linear infinite;
}

.top-downloadbar .download-wechat,
.top-downloadbar .mini-app-open {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.34rem;
  font-size: .512rem;
  padding: 0 .21rem;
  /*height: 1.24rem;*/
  line-height: 1.24rem;
  border-radius: .125rem;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.width750 .top-downloadbar .download-wechat,
.width750 .top-downloadbar .mini-app-open {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.4rem;
  font-size: .6rem;
  padding: 0 .25rem;
  /*height: 1.45rem;*/
  line-height: 1.45rem;
  border-radius: .125rem;
  background: #000;
  color: #fff;
  text-decoration: none;
}

@-webkit-keyframes animateDownloadButton {
  0% {
    -webkit-transform: translateY(-50%) rotateZ(0deg);
  }
  10% {
    -webkit-transform: translateY(-50%) rotateZ(5deg);
  }
  20% {
    -webkit-transform: translateY(-50%) rotateZ(-5deg);
  }
  30% {
    -webkit-transform: translateY(-50%) rotateZ(5deg);
  }
  40% {
    -webkit-transform: translateY(-50%) rotateZ(0deg);
  }
  100% {
    -webkit-transform: translateY(-50%) rotateZ(0deg);
  }
}

@keyframes animateDownloadButton {
  0% {
    transform: translateY(-50%) rotateZ(0deg);
  }
  10% {
    transform: translateY(-50%) rotateZ(5deg);
  }
  20% {
    transform: translateY(-50%) rotateZ(-5deg);
  }
  30% {
    transform: translateY(-50%) rotateZ(5deg);
  }
  40% {
    transform: translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateY(-50%) rotateZ(0deg);
  }
}