Domovská stránka Prehľadávať Pomoc
Registrovať Prihlásiť sa
xionghaojie
/
H5_module
1
0
Fork 0
Súbory Issues 0 Pull requesty 0 Wiki
Branch: master
Branche Tagy
H5_module
/
martial
/
leaflet
/
index.css

index.css 8.9 KB
Permanentný odkaz História Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 
  1. page{background: #fff;}
    2. 

  2. .top-fixed{position: fixed;left: 0;top: 0;right: 0;z-index: 50;}
    3. 

  3. .bgcolor {background: #fff;position: absolute;top: 0;left: 0;right: 0;transition: .3s all ease;opacity: 0;}
    4. 

  4. .opacity{opacity: 1;}
    5. 

  5. .top-fixed-c{position: relative;}
    6. 

  6. .back{position: absolute;top: 50%;transform: translateY(-50%);left: 0;padding-left: 30rpx;}
    7. 

  7. .back image{width: 24rpx;height: 39rpx;}
    8. 

  8. .top-title{font-size: 34rpx;color: #000;font-weight: bold;padding-left: 75rpx;max-width: 60%;}
    9. 

  9. .top{background: #fff;padding: 20rpx 30rpx;}
    10. 

  10. .logos{font-size: 22rpx;color: #666;}
    11. 

  11. .logo-img{width: 185rpx;height: 39rpx;margin-right: 15rpx;}
    12. 

  12. .logo-r{position: relative;padding-left: 10rpx;}
    13. 

  13. .logo-r:before{content: '';display: block;width: 1rpx;height: 39rpx;background-color: #D1D1D1;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
    14. 

  14. .logo-r .ddflex{font-size: 20rpx;color: #999;margin-bottom: 5rpx;}
    15. 

  15. .logo-r .ddflex image{width: 17rpx;height: 24rpx;margin-right: 5rpx;}
    16. 

  16. .tel{width: 210rpx;height: 70rpx;border: 1rpx solid #FA9350;border-radius: 8rpx;}
    17. 

  17. .tel-t{height: 32rpx;background-color: #FA9350;font-size: 20rpx;color: #fff;justify-content: center;}
    18. 

  18. .tel-t image{width: 20rpx;height: 20rpx;margin-right: 7rpx;}
    19. 

  19. .call{font-size: 26rpx;color: #FA9350;font-weight: bold;text-align: center;line-height: 38rpx;}
    20. 

  20. /* 轮播图 */
    21. 

  21. .ban{height: 400rpx;position: relative;background: #fff;}
    22. 

  22. .swiper{width: 100%;height: 400rpx;}
    23. 

  23. .swiper image{width: 100%;height: 100%;}
    24. 

  24. .swiper-img{width: 750rpx;height: 400rpx;}
    25. 

  25. .dots{position: absolute;left: 50%;transform: translateX(-50%);bottom: 30rpx;z-index: 3;justify-content: center;}
    26. 

  26. .dot{width: 12rpx;height: 12rpx;background: rgba(255,255,255,.4);margin: 0 3rpx;border-radius: 6rpx;}
    27. 

  27. .dot.active{background: #fff;width: 28rpx;}
    28. 

  28. /* 表单 */
    29. 

  29. .form{padding: 40rpx 30rpx;background: #fff;}
    30. 

  30. .form-title{font-size: 38rpx;color: #000;font-weight: bold;text-align: center;}
    31. 

  31. .form-list{margin-top: 40rpx;}
    32. 

  32. .form-list .li{margin-bottom: 30rpx;border-bottom: 1rpx solid #D1D1D1;}
    33. 

  33. .label{font-size: 28rpx;color: #666;}
    34. 

  34. .ipt{font-size: 28rpx;color: #333;padding: 25rpx 0;}
    35. 

  35. .textarea{font-size: 28rpx;color: #333;padding: 25rpx 0;height: 140rpx;width: 100%;box-sizing: border-box;}
    36. 

  36. .phone-ipt{font-size: 28rpx;color: #333;text-align: left;padding: 25rpx 0 !important;}
    37. 

  37. .placeholder{color: #ccc;}
    38. 

  38. .form-btn{margin-top: 60rpx;background: var(--mina);font-size: 30rpx;color: #fff;text-align: center;line-height: 90rpx;border-radius: 10rpx;}
    39. 

  39. /* 文本 */
    40. 

  40. .richText{background: #fff;padding: 40rpx 30rpx;font-size: 34rpx;color: #333;line-height: 1.7;margin: 20rpx 0;}
    41. 

  41. /* 商品 */
    42. 

  42. .product{margin: 20rpx 0;padding: 0 30rpx;background: #fff;}
    43. 

  43. .product .li{border-bottom: 1rpx solid #e9e9e9;padding: 30rpx 0;align-items: flex-start;}
    44. 

  44. .product .li:last-child{border-bottom: none;}
    45. 

  45. .pro-img{width: 200rpx;height: 200rpx;border-radius: 15rpx;margin-right: 20rpx;}
    46. 

  46. .pro-info{height: 200rpx;position: relative;}
    47. 

  47. .pro-name{font-size: 30rpx;color: #333;line-height: 40rpx;height: 85rpx;overflow: hidden;}
    48. 

  48. .pro-bri{font-size: 24rpx;color: #999;}
    49. 

  49. .pro-opt{justify-content: space-between;position: absolute;left: 0;right: 0;bottom: 0;}
    50. 

  50. .money{font-size: 36rpx;color: #C5020B;font-weight: bold;}
    51. 

  51. .money text{font-size: 22rpx;color: #252A3B;margin-left: 5rpx;font-weight: normal;}
    52. 

  52. .pro-btn{background: var(--mina);height: 50rpx;border-radius: 25rpx;padding: 0 20rpx;font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;}
    53. 

  53. .product2{margin: 20rpx 0;padding: 30rpx;}
    54. 

  54. .product2 .li{width: 330rpx;margin-right: 30rpx;background: #fff;border-radius: 15rpx;}
    55. 

  55. .product2 .li:nth-child(2n){margin-right: 0;}
    56. 

  56. .product2 .pro-img{width: 330rpx;height: 330rpx;border-radius: 15rpx 15rpx 0 0;}
    57. 

  57. .product2 .li .pro-info{padding: 20rpx;height: auto;}
    58. 

  58. .product2 .li .pro-opt{position: inherit;margin-top: 10rpx;}
    59. 

  59. .pro-cart image{width: 42rpx;height: 42rpx;}
    60. 

  60. .product3{margin: 20rpx 0;padding: 20rpx 0;background: none;height: 260rpx;overflow: hidden;}
    61. 

  61. .product3 scroll-view{white-space: nowrap;padding-bottom: 20rpx;}
    62. 

  62. .product3 .li{width: 600rpx;margin-right: 30rpx;border: none;display: inline-block;padding: 30rpx;background: #fff;border-radius: 20rpx;}
    63. 

  63. .product3 .li:first-child{margin-left: 30rpx;}
    64. 

  64. /* 图片 */
    65. 

  65. .images image{width: 100%;}
    66. 

  66. /* 客服 */
    67. 

  67. .contact{position: fixed;bottom: 20%;right: 30rpx;z-index: 50;background: rgba(255,255,255,.9);box-shadow: 0 0 10rpx rgba(0,0,0,.1);justify-content: center;font-size: 24rpx;color: #333;flex-direction: column;width: 100rpx;height: 100rpx;border-radius: 50%;}
    68. 

  68. .contact image{width: 40rpx;height: 34rpx;margin: 0 auto 5rpx;}
    69. 

  69. /* 分享 */
    70. 

  70. /* .share{position: fixed;bottom: 30%;right: 30rpx;z-index: 50;background: rgba(255,255,255,.9);box-shadow: 0 0 10rpx rgba(0,0,0,.1);justify-content: center;font-size: 24rpx;color: #333;flex-direction: column;width: 100rpx;height: 100rpx;border-radius: 50%;}
    71. 

  71. .share image{width: 34rpx;height: 34rpx;margin: 0 auto 5rpx;} */
    72. 

  72. 

  73. .title{font-size: 40rpx;color: #333;font-weight: bold;line-height: 60rpx;padding: 0 30rpx;}
    74. 

  74. .det-sta{padding: 0 30rpx;margin-top: 20rpx;font-size: 24rpx;line-height: 40rpx;}
    75. 

  75. .sort{font-size: 24rpx;color: #2A82FD;font-weight: 400;}
    76. 

  76. .sort-line{width: 1rpx;background-color: #EAEAEA;height: 21rpx;margin: 0 10rpx;}
    77. 

  77. .sitename{color: var(--mina);margin-right: 15rpx;}
    78. 

  78. .time{color: #999;}
    79. 

  79. .time text{font-size: 28rpx;color: #333;margin-right: 23rpx;}
    80. 

  80. 

  81. .view-more{width: 230rpx;height: 70rpx;font-size: 30rpx;color: #999;margin: 30rpx auto 0;text-align: center;line-height: 70rpx;}
    82. 

  82. .con-vheight{max-height: 120vh;position: relative;overflow: hidden;}
    83. 

  83. .con-vheight::after{content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;height: 15vh;background: linear-gradient(rgba(255, 255, 255, 0), #fff);z-index: 5;}
    84. 

  84. 

  85. 

  86. .guwen{margin: 70rpx 40rpx 0;box-shadow: 0 0 51rpx 0 rgba(152,137,136,0.2);border-radius: 20rpx;position: relative;padding: 34rpx 33rpx 34rpx 40rpx;}
    87. 

  87. .guwen-img{position: absolute;top: -24rpx;left: 0;width: 230rpx;height: 48rpx;}
    88. 

  88. .guwen-tit{font-size: 24rpx;color: #000;font-weight: bold;margin-bottom: 25rpx;}
    89. 

  89. .guwen-user{width: 120rpx;height: 120rpx;border-radius: 50%;margin-right: 20rpx;}
    90. 

  90. .guwen-name{font-size: 36rpx;color: #000;font-weight: bold;}
    91. 

  91. .guwen-tag{display: inline-block;height: 27rpx;border: 2rpx solid #2CCA73;border-radius: 14rpx;font-size: 16rpx;color: #06B252;font-weight: normal;padding: 0 9rpx;line-height: 27rpx;margin-top: 8rpx;}
    92. 

  92. .guwen-mobile{font-size: 28rpx;color: #000;font-weight: bold;margin-top: 10rpx;}
    93. 

  93. .guwen-ewm{font-size: 20rpx;color: #999;}
    94. 

  94. .guwen-ewm image{width: 135rpx;height: 135rpx;margin: 0 auto 10rpx;}
    95. 

  95. .guwen-edit{position: absolute;top: 0;right: 0;height: 40rpx;padding: 0 10rpx;background: var(--mina);border-radius: 0 20rpx 0 20rpx;font-size: 20rpx;color: #fff;z-index: 1;}
    96. 

  96. .guwen-edit image{width: 22rpx;height: 23rpx;margin-right: 7rpx;}
    97. 

  97. 

  98. 

  99. .bottom-info{
    100. 

  100. 	padding: 0 30rpx;
    101. 

  101. }
    102. 

  102. .bottom-info-browse{
    103. 

  103. 	font-size: 24rpx;
    104. 

  104. 	font-weight: 400;
    105. 

  105. 	color: #999999;
    106. 

  106. }
    107. 

  107. .bottom-info-logo{
    108. 

  108. 	width: 62rpx;
    109. 

  109. 	height: 62rpx;
    110. 

  110. 	border-radius: 40rpx 40rpx 40rpx 40rpx;
    111. 

  111. 	opacity: 1;
    112. 

  112. 	margin-right: 10rpx;
    113. 

  113. }
    114. 

  114. .bottom-info-option{
    115. 

  115. 	font-size: 24rpx;
    116. 

  116. 	font-weight: 400;
    117. 

  117. 	color: #5B698F;
    118. 

  118. 	text-align: center;
    119. 

  119. }
    120. 

  120. 

  121. 

  122. .bottom-option{
    123. 

  123. 	position: fixed;
    124. 

  124. 	bottom:50rpx;
    125. 

  125. 	left: 50rpx;
    126. 

  126. 	right: 50rpx;
    127. 

  127. 	background-color: #fff;
    128. 

  128. 	height: 86rpx;
    129. 

  129. 	background: linear-gradient(180deg, #FFFFFF 0%, #F9FCFF 36%, #FFFFFF 68%, #FFFFFF 100%);
    130. 

  130. 	box-shadow: 0rpx 0rpx 51rpx 1rpx rgba(152,137,136,0.2);
    131. 

  131. 	border-radius: 68rpx 68rpx 68rpx 68rpx;
    132. 

  132. 	opacity: 1;
    133. 

  133. 	justify-content: center;
    134. 

  134. 	font-size: 30rpx;
    135. 

  135. 	font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
    136. 

  136. 	font-weight: normal;
    137. 

  137. 	color: #2A82FD;
    138. 

  138. }
    139. 

  139. .bottom-option-line{
    140. 

  140. 	width: 1rpx;
    141. 

  141. 	height: 28rpx;
    142. 

  142. 	opacity: 1;
    143. 

  143. 	background-color: #E2E7F1;
    144. 

  144. 	margin: auto 60rpx;
    145. 

  145. }
    146. 

  146. 

  147. .contact-nav{position: fixed;right: 0;bottom: 250rpx;width: 84rpx;height: 149rpx;background: linear-gradient(180deg, rgba(0,104,255,.8) 0%, rgba(75,149,255,.8) 100%);box-shadow: 0 3rpx 24rpx 1rpx rgba(0,65,196,0.2);border-radius: 50rpx 50rpx 4rpx 55rpx;overflow: hidden;text-align: center;z-index: 50;box-sizing: border-box;flex-direction: column;justify-content: center;}
    148. 

  148. .contact-nav image{width: 61rpx;height: 61rpx;border-radius: 50%;background-color: #fff;margin-bottom: 5rpx;}
    149. 

  149. .contact-text{font-size: 20rpx;color: #fff;width: 100%;letter-spacing: 2px;padding-left: 2px;}
    150. 

  150. 

  151. .side{position: fixed;right: 20rpx;top: 20%;z-index: 51;}
    152. 

  152. .share image{width: 117rpx;height: 100rpx;}
    153. 

  153. .share-close{width: 24rpx;height: 24rpx;position: absolute;top: -24rpx;right: 0rpx;}
    154. 

  154. .show-side {animation: showLayers 0.2s linear both;}
    155. 

  155. .hide-side {animation: hideLayers 0.2s linear both;}
    156. 

  156. @keyframes showLayers {
    157. 

  157. 	0% {
    158. 

  158. 		transform: translateX(0%);
    159. 

  159. 		opacity: 1;
    160. 

  160. 	}
    161. 

  161. 	100% {
    162. 

  162. 		transform: translateX(129rpx);
    163. 

  163. 		opacity: .5;
    164. 

  164. 	}
    165. 

  165. }
    166. 

  166. @keyframes hideLayers {
    167. 

  167. 	0% {
    168. 

  168. 		transform: translateX(129rpx);
    169. 

  169. 		opacity: .5;
    170. 

  170. 	}
    171. 

  171. 	100% {
    172. 

  172. 		transform: translateX(0);
    173. 

  173. 		opacity: 1;
    174. 

  174. 	}
    175. 

  175. }
    176. 

  176. 

  177. 

  178. .share-pop{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.6);z-index: 100;}
    179. 

  179. .share-pop image{width: 575rpx;height: 359rpx;position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
    180.