style.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. .qbox{min-height: 100vh;background: url(../images/pic_bg.png) no-repeat center;width: 100%;background-size: 100% 100%;padding-bottom: 1.5rem;position: relative;}
  2. .qup{width: 100%;}
  3. .qdown{width: 100%;position: absolute;left: 0;right: 0;bottom: 0;}
  4. .qbox .el-message{min-width: 4rem;}
  5. /* 扫码 */
  6. * {
  7. padding: 0;
  8. margin: 0;
  9. }
  10. #app .btnBox {
  11. display: flex;
  12. justify-content: space-around;
  13. padding: 0.2rem;
  14. }
  15. #app .btnBox a{
  16. padding: 0.4rem;
  17. color: aliceblue;
  18. background-color: #015cf2;
  19. display: block;
  20. }
  21. /* #mumuQrcode canvas{display: none;} */
  22. #mumuQrcode canvas{position: absolute;
  23. left: 0;
  24. top: 0;
  25. right: 0;
  26. bottom: 0;}
  27. /* 扫码 */
  28. #app{width: 100%;padding: 0 0.3rem;box-sizing: border-box;}
  29. .qtitimg{width: 5.39rem;margin: -0.16rem auto 0.36rem;}
  30. .qd_txtbox{width: 100%;height: 3.5rem;background: url(../images/txt_bg.png) no-repeat center top;background-size: 100% 100%;padding-top: 0.2rem;margin-bottom: 0.36rem;}
  31. .qd_txtt{font-weight: 500;font-style: italic;color: #FFFFFF;line-height: 0.42rem;opacity: 0.84;text-align: center;font-size: 0.32rem;}
  32. .qd_txtb{padding: 0 0.3rem 0 0.24rem;margin-top: 0.67rem;}
  33. .qd_txtbt{font-size: 0.24rem;font-family: PingFang SC;font-weight: bold;font-style: italic;color: #BD5626;
  34. background: linear-gradient(0deg, #B54A1D 0%, #FFB97D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom: 0.42rem;padding-left: 0.28rem;}
  35. .qd_txtbtn{font-size: 0.28rem;font-family: PingFang SC;font-weight: bold;color: #BD5626;
  36. background: linear-gradient(0deg, #B54A1D 0%, #FFB97D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align: center;}
  37. .qd_txtbti{font-size: 0.24rem;font-family: PingFang SC;font-weight: bold;font-style: italic;color: #BD5626;
  38. background: linear-gradient(0deg, #353535 0%, #797979 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom: 0.42rem;}
  39. .qd_txtbxa{width: 50%;display: flex;align-items: flex-end;justify-content: center;position: relative;}
  40. .qd_txtbxa::after{content: "";width: 0.01rem;
  41. height:0.4rem;
  42. background: #E5E5E5;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
  43. .qd_txtbxa:first-child::after{display: none;}
  44. .qd_txtbxa span{margin-right: 0.06rem;}
  45. .qd_txtbxal{width: 0.57rem;height: 0.57rem;margin-right: 0.1rem;flex: 0 0 auto;}
  46. .qd_txtbxal img{max-width: 100%;max-height: 100%;}
  47. .qd_fun a{width: 25%;margin-bottom: 0.52rem;}
  48. .qd_funimg{width: 1.17rem;height: 1.17rem;margin:0 auto 0.13rem;}
  49. .qd_funa{width: 6.56rem;margin: 0 auto;}
  50. .qd_wel{}
  51. .qd_weltit{position: relative;}
  52. .qd_weltita{font-size: 0.32rem;font-weight: bold;
  53. font-style: italic;
  54. color: #FFFFFF;
  55. text-shadow: 1px 5px 6px rgba(125, 9, 11, 0.21);position: absolute;left: 0;right: 0;text-align:
  56. center;top: 0.16rem;}
  57. .qd_weltit img{width: 5.15rem;margin: 0 auto;}
  58. .qd_weltxt{font-size: 0.26rem;font-family: PingFang SC;font-weight: 500;font-style: italic;color: #B3471A;}
  59. .qd_weltxt span{display: inline-block;width: 0.82rem;border-bottom: 0.01rem solid #E59A59;margin: 0 0.2rem;}
  60. .qd_welb{width: 100%;background: #F9EBDF;
  61. box-shadow: -1px 7px 9px 0px rgba(131, 46, 15, 0.36);border-radius:0.13rem;padding: 0.04rem 0.16rem;box-sizing: border-box;display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 0.22rem;position: relative;}
  62. .qd_welb a{background: #FFFFFF;
  63. box-shadow: -1px 7px 9px 0px rgba(131, 46, 15, 0.36);border-radius: 0.13rem;width: 2.96rem;
  64. min-height: 1.85rem;margin: 0.13rem 0;position: relative;padding: 0.22rem 0.36rem 0.2rem 0.32rem;box-sizing: border-box;}
  65. .qd_welb a::before{content: '';width: 0.13rem;
  66. height: 0.52rem;background: #F43637;position: absolute;left: 0;top: 0.67rem;}
  67. .qd_welbt{font-size: 0.28rem;
  68. font-family: PingFang SC;
  69. font-weight: bold;
  70. color: #B54D1F;background: linear-gradient(0deg, #B54A1D 21.58203125%, #F3A461 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 0.16rem;min-height: 0.37rem;}
  71. .qd_welbox{flex: 1;overflow: hidden;}
  72. .qd_welbtx{opacity: 0.89;font-size: 0.2rem;color: #2A2928;min-height: 0.52rem;}
  73. .qd_welimg{width: 0.68rem;flex: 0 0 auto;}
  74. .qd_welbm{font-size: 0.16rem;font-weight: 400;
  75. color: #AAAAAA;display: flex;justify-content: flex-end;align-items: center;margin-top: 0.18rem;}
  76. .qd_welbm img{width: 0.24rem;margin-left: 0.09rem;height: 0.18rem;}
  77. .qd_fixed{width: 100%;height: 0.93rem;
  78. background: #D17642;
  79. box-shadow: 0px 0px 0.18rem 0px #B1856C;position: fixed;left: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;font-size: 0.28rem;color: #FFFFFF;z-index: 2;}
  80. .qd_fixedi{width: 0.29rem;height: 0.3rem;margin-right: 0.2rem;}
  81. @media (max-width: 310px) {
  82. .qd_welb a{
  83. width: 100%;
  84. }
  85. }
  86. /* 使用记录 */
  87. .qduse{min-height: 100vh;background: #FFFFFF;box-sizing: border-box;padding-top:1rem;}
  88. .quset{font-size: 0.32rem;font-weight: bold;
  89. color: #000000;text-align: center;position: relative;padding: 0 0.4rem;overflow: hidden;white-space: normal;text-overflow: ellipsis;height: 0.8rem;line-height: 0.8rem;position: fixed;left: 0;top: 0;right: 0;background: #FFFFFF;z-index: 10;}
  90. .qsback{position: fixed;left: 0.32rem;top: 0.81rem;z-index: 1;}
  91. .qsback img{width: 0.39rem;height: 0.39rem;}
  92. .qusetimg{width: 0.8rem;height: 0.8rem;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;}
  93. .qusetimg img{width: 0.18rem;height: 0.32rem;}
  94. .quseup{width: 0.2rem;margin-left: 0.15rem;}
  95. .quse_txt{padding: 0 0.56rem;}
  96. .quse_icon{font-size: 0.26rem;font-weight: bold;
  97. color: #000000;display: flex;align-items: center;}
  98. .quse_icon span{width: 0.16rem;height:0.16rem;background: #DF0024;border-radius:0.08rem;margin-right: 0.26rem;display: block;}
  99. .quse_txt{display: none;}
  100. .quse_txt ul{padding: 0.24rem 0.43rem 0.36rem;position: relative;}
  101. .quse_txt ul li{font-size: 0.26rem;color: #666666;display:flex; padding:0.08rem 0;}
  102. .quse_txt ul:before{content: "";border-right: 0.01rem solid #CDCDCD;height: 100%;position: absolute;left:0.08rem;top: 0;}
  103. .qusetime.act .quse_txt{display: block;}
  104. .qusetime.act .quseup{transform: rotate(180deg);}
  105. .qusetime .quse_txt:last-child ul:before{display: none;}
  106. /* 详情 */
  107. .qd_medal{display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;left: 0.13rem;top: 0.46rem;width: 1rem;}
  108. .qd_medal img{width: 0.66rem;margin-bottom: 0.02rem;}
  109. .qd_medalt{color: #D37641;font-size: 0.16rem;font-style: italic;font-weight: bold;}
  110. .qd_medalx{color: #1b1b1b;font-size: 0.16rem;}
  111. .qd_medab{background: #FFFFFF;
  112. box-shadow: -1px 7px 9px 0px rgba(131, 46, 15, 0.36);
  113. border-radius: 0.13rem;position: relative;padding-bottom: 0.45rem;width: 100%;box-sizing: border-box;min-height: 2.2rem;}
  114. .qd_medab ul{padding-top: 0.46rem;margin-bottom: 0.1rem;}
  115. .qd_medab li{position: relative;padding: 0 0.4rem 0.3rem 1.27rem;}
  116. .qd_medab li:before{width: 0.13rem;
  117. height:0.52rem;
  118. background: #F43637;content: "";position: absolute;left: 0;top: 0;}
  119. .qd_medab li p{font-size: 0.24rem; color: #464545;line-height: 0.4rem;}
  120. .qd_medab ul li:last-child{padding-bottom: 0;}
  121. /* 扫码页面 */
  122. .qscan{height: 100vh;background: linear-gradient(60deg, #F4B271, #D57640);box-sizing: border-box;display: flex;flex-direction: column;
  123. }
  124. .qscan .qscant{flex: 0 0 auto; font-size: 0.32rem;font-weight: bold;color: #FFFFFF;text-align: center;position: relative;padding: 0 0.4rem;overflow: hidden;white-space: normal;text-overflow: ellipsis;height: 0.8rem; line-height: 0.8rem;}
  125. .qsmain{flex: 1;overflow: auto;padding-top: 0.85rem !important;display: flex;flex-direction: column;}
  126. .qsbox{background: #FFFFFF;border-radius: 0.13rem;position: relative;padding-top: 0.72rem;padding-bottom: 0.4rem;}
  127. .qsboxtimg{width: 1.03rem;height: 1.03rem;position: absolute;left: 50%;top: -0.42rem;transform: translateX(-50%);}
  128. .qsfoot{flex: 0 0 auto;display: flex;align-items: center;padding-bottom: 0.2rem;}
  129. .qsfoota{width: 50%;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0.2rem 0;}
  130. .qsfootb{width: 0.67rem;height: 0.67rem;margin-bottom: 0.13rem;}
  131. .qscode{width: 3.08rem;height: 3.08rem;margin: 0 auto 0.42rem;background: url(../images/scodebg.png) no-repeat center top;background-size: 100% 100%;display: flex;align-items: center;justify-content: center;position: relative;}
  132. .qscodeimg img{width: 2.67rem;height: 2.67rem;}
  133. .qscodeimg canvas{width: 2.67rem !important;height: 2.67rem !important;opacity: 0;}
  134. #myTime{min-height:0.62rem ;}
  135. .qscodetit{font-size: 0.3rem;color: #000000;position: absolute;left: 0;top: 0;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center;}
  136. .qslines{background: linear-gradient(60deg, #eea667, #dd864d);}
  137. .qsline{position: relative;justify-content: space-between;padding: 0 0.53rem;background: url(../images/picline.png) no-repeat center top;background-size: 100% 100%;width: 100%;box-sizing: border-box;min-height: 0.33rem;}
  138. /* .qsline::before{width: 0.4rem;height: 0.4rem;content: '';position: absolute;left: -0.2rem;top: 50%;background: #F4B271;border-radius: 50%;clip: rect(0px 0.4rem 0.4rem 0.2rem);margin-top: -0.2rem;}
  139. .qsline::after{width: 0.4rem;height: 0.4rem;content: '';position:absolute; right:-0.2rem;top: 50%;background: #D57640 ;border-radius: 50%;clip: rect(0px 0.2rem 0.4rem 0px);;margin-top: -0.2rem;} */
  140. .qslinea{width: 1.73rem;height: 0.01rem;background-color: #AAAAAA;}
  141. .qslooka{width: 0.32rem;height: 0.22rem;margin-right: 0.15rem;}
  142. .qslook{display: flex;justify-content: flex-end;padding-right: 0.58rem;align-items: center;margin-top: 0.2rem;}
  143. .nobox{padding-top: 1rem;}
  144. .noimg{width: 5rem;margin: 0 auto;}
  145. /* 政策指南 */
  146. .qpolicy{height: 100vh; background: #f5f5f5;box-sizing: border-box;overflow: scroll;}
  147. .policylist{background: #FFFFFF;border-bottom: 0.01rem solid #E5E5E5;padding: 0.32rem 0.4rem 0.3rem;}
  148. .poloding{font-size: 0.26rem;color: #666666;text-align: center;padding: 0.2rem 0;}
  149. .policylist p{font-size: 0.24rem;}
  150. .policyd p{font-size: 0.26rem;}
  151. /* 选择 类别 */
  152. .qdcate.qduse{background: #f5f5f5;}
  153. .qdcate #app{padding:0.16rem 0.32rem 0.2rem;}
  154. /* .qcate{} */
  155. .qcateli{width:100%;background: #FFFFFF;border-radius: 0.14rem;margin-bottom:0.24rem;}
  156. .qcatelit{padding: 0.2rem 0.3rem 0.24rem 0.28rem;border-bottom: 0.01rem solid #E5E5E5;}
  157. .qcatelitl{width: 0.26rem;height: 0.26rem;margin-left: 0.2rem;}
  158. .qcatelitr{width: 0.16rem;height: 0.26rem;margin-left: 0.2rem;}
  159. .qcatelif{padding: 0.24rem 0.3rem 0.24rem 0.22rem;}
  160. .qcatelif span{padding-right:0.1rem;}
  161. .qcatelif span:last-child{padding: 0 0 0 0.1rem;}
  162. .qcatelif .flex0{min-width:1.6rem ;}
  163. .bgbox{position: fixed;left: 0;right: 0;bottom: 0;top: 0;background: rgba(0, 0, 0, 0.5);z-index: 20;}
  164. .pawfixed{width:5.34rem;background: #FFFFFF;border-radius: 0.06rem;position: fixed;left: 50%;z-index: 22;top: 50%;margin-left: -2.67rem;box-sizing: border-box;padding-top: 0.24rem;top: 50%;margin-top: -1.8rem;}
  165. .pawfixedbtns{display: flex;align-items: center;border-top: 0.02rem solid #DDDDDD;}
  166. .pawfixedbtn{flex: 1;height: 0.8rem;display: flex;align-items: center;justify-content: center;font-size: 0.26rem;box-sizing: border-box;}
  167. .pawfixedbtn.btn1{color: #0074FF;}
  168. .pawfixedbtn.btn2{color: #E80000;border-left: 0.02rem solid #DDDDDD;}
  169. .pawfixedtit{font-size: 0.22rem;color: #666666;width: 3.56rem;margin:0 auto 0.4rem;}
  170. .pawfixedtit span{color: #DF0024;margin-right: 0.12rem;}
  171. .pawfixedin{margin-top: 0.4rem;display: flex;align-items: center;justify-content: center;margin-bottom: 0.36rem;}
  172. .pawfixedin input{width: 0.46rem;border: none;border-bottom: 0.01rem solid #E5E5E5;padding: 0.12rem 0;margin:0 0.08rem ;text-align: center;}
  173. .pawfixedin input.act{border-bottom: 0.01rem solid #DF0024;}
  174. /* .pawfixedin{margin-top: 0.4rem;margin-bottom: 0.36rem;position: relative;}
  175. .pawfixedin input{position: absolute;left: 0;right: 0;bottom: 0;top: 0;opacity: 0;}
  176. .pwd-wrap{display: flex;align-items: center;justify-content: center;}
  177. .pawfixedin li{width: 0.46rem;border: none;border-bottom: 0.01rem solid #E5E5E5;margin:0 0.08rem ;text-align: center;font-size: 0.34rem;font-weight: bold;
  178. color: #000000;height: 0.7rem;box-sizing: border-box;line-height: 0.7rem;}
  179. .pawfixedin li:focus{border-bottom: 0.01rem solid #DF0024;} */