style.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. /*
  2. <!--
  3. * 17素材vip建站专区模块代码
  4. * 详尽信息请看官网:http://www.17sucai.com/pins/vip
  5. *
  6. * Copyright , 温州易站网络科技有限公司版权所有
  7. *
  8. * 请尊重原创,未经允许请勿转载。
  9. * 在保留版权的前提下可应用于个人或商业用途
  10. -->
  11. */
  12. html,body {
  13. color: #333;
  14. margin: 0;
  15. height: 100%;
  16. font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. font-weight: normal;
  20. }
  21. * {
  22. -webkit-box-sizing: border-box;
  23. -moz-box-sizing: border-box;
  24. box-sizing: border-box;
  25. }
  26. a {
  27. text-decoration: none;
  28. color: #000;
  29. }
  30. a, label, button, input, select {
  31. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  32. }
  33. img {
  34. border: 0;
  35. }
  36. body {
  37. background: #fff;
  38. color: #666;
  39. }
  40. html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
  41. margin: 0;
  42. padding: 0;
  43. }
  44. a {
  45. text-decoration: none;
  46. color: #08acee;
  47. }
  48. button {
  49. outline: 0;
  50. }
  51. img {
  52. border: 0;
  53. }
  54. button,input,optgroup,select,textarea {
  55. margin: 0;
  56. font: inherit;
  57. color: inherit;
  58. outline: none;
  59. }
  60. li {
  61. list-style: none;
  62. }
  63. a {
  64. color: #666;
  65. }
  66. .clearfix::after {
  67. clear: both;
  68. content: ".";
  69. display: block;
  70. height: 0;
  71. visibility: hidden;
  72. }
  73. .clearfix {
  74. }
  75. .divHeight {
  76. width: 100%;
  77. height: 10px;
  78. background: #f5f5f5;
  79. position: relative;
  80. overflow: hidden;
  81. }
  82. .r-line {
  83. position: relative;
  84. }
  85. .r-line:after {
  86. content: '';
  87. position: absolute;
  88. z-index: 0;
  89. top: 0;
  90. right: 0;
  91. height: 100%;
  92. border-right: 1px solid #D9D9D9;
  93. -webkit-transform: scaleX(0.5);
  94. transform: scaleX(0.5);
  95. -webkit-transform-origin: 100% 0;
  96. transform-origin: 100% 0;
  97. }
  98. .b-line {
  99. position: relative;
  100. }
  101. .b-line:after {
  102. content: '';
  103. position: absolute;
  104. z-index: 2;
  105. bottom: 0;
  106. left: 0;
  107. width: 100%;
  108. height: 1px;
  109. border-bottom: 1px solid #e2e2e2;
  110. -webkit-transform: scaleY(0.5);
  111. transform: scaleY(0.5);
  112. -webkit-transform-origin: 0 100%;
  113. transform-origin: 0 100%;
  114. }
  115. .aui-flex {
  116. display: -webkit-box;
  117. display: -webkit-flex;
  118. display: flex;
  119. -webkit-box-align: center;
  120. -webkit-align-items: center;
  121. align-items: center;
  122. padding: 15px;
  123. position: relative;
  124. }
  125. .aui-flex-box {
  126. -webkit-box-flex: 1;
  127. -webkit-flex: 1;
  128. flex: 1;
  129. min-width: 0;
  130. font-size: 14px;
  131. color: #333;
  132. }
  133. /* 必要布局样式css */
  134. .aui-flexView {
  135. width: 100%;
  136. height: 100%;
  137. margin: 0 auto;
  138. display: -webkit-box;
  139. display: -webkit-flex;
  140. display: -ms-flexbox;
  141. display: flex;
  142. -webkit-box-orient: vertical;
  143. -webkit-box-direction: normal;
  144. -webkit-flex-direction: column;
  145. -ms-flex-direction: column;
  146. flex-direction: column;
  147. }
  148. .aui-scrollView {
  149. width: 100%;
  150. height: 100%;
  151. -webkit-box-flex: 1;
  152. -webkit-flex: 1;
  153. -ms-flex: 1;
  154. flex: 1;
  155. // overflow-y: scroll;
  156. // overflow-x: hidden;
  157. -webkit-overflow-scrolling: touch;
  158. position: relative;
  159. margin-top:0;
  160. }
  161. .aui-navBar {
  162. height: 44px;
  163. position: relative;
  164. display: -webkit-box;
  165. display: -webkit-flex;
  166. display: -ms-flexbox;
  167. display: flex;
  168. z-index: 1002;
  169. background: #ffffff;
  170. }
  171. .aui-navBar-item {
  172. height: 44px;
  173. min-width: 25%;
  174. -webkit-box-flex: 0;
  175. -webkit-flex: 0 0 25%;
  176. -ms-flex: 0 0 25%;
  177. flex: 0 0 25%;
  178. padding: 0 0.9rem;
  179. display: -webkit-box;
  180. display: -webkit-flex;
  181. display: -ms-flexbox;
  182. display: flex;
  183. -webkit-box-align: center;
  184. -webkit-align-items: center;
  185. -ms-flex-align: center;
  186. align-items: center;
  187. font-size: 0.7rem;
  188. white-space: nowrap;
  189. overflow: hidden;
  190. color: #808080;
  191. position: relative;
  192. }
  193. .aui-navBar-item:first-child {
  194. -webkit-box-ordinal-group: 2;
  195. -webkit-order: 1;
  196. -ms-flex-order: 1;
  197. order: 1;
  198. margin-right: -25%;
  199. font-size: 0.9rem;
  200. font-weight: bold;
  201. }
  202. .aui-navBar-item:last-child {
  203. -webkit-box-ordinal-group: 4;
  204. -webkit-order: 3;
  205. -ms-flex-order: 3;
  206. order: 3;
  207. -webkit-box-pack: end;
  208. -webkit-justify-content: flex-end;
  209. -ms-flex-pack: end;
  210. justify-content: flex-end;
  211. }
  212. .aui-center {
  213. -webkit-box-ordinal-group: 3;
  214. -webkit-order: 2;
  215. -ms-flex-order: 2;
  216. order: 2;
  217. display: -webkit-box;
  218. display: -webkit-flex;
  219. display: -ms-flexbox;
  220. display: flex;
  221. -webkit-box-pack: center;
  222. -webkit-justify-content: center;
  223. -ms-flex-pack: center;
  224. justify-content: center;
  225. -webkit-box-align: center;
  226. -webkit-align-items: center;
  227. -ms-flex-align: center;
  228. align-items: center;
  229. height: 44px;
  230. width: 50%;
  231. margin-left: 25%;
  232. }
  233. .aui-center-title {
  234. text-align: center;
  235. width: 100%;
  236. white-space: nowrap;
  237. overflow: hidden;
  238. display: block;
  239. text-overflow: ellipsis;
  240. font-size: 0.95rem;
  241. color: #101d37;
  242. }
  243. .icon {
  244. width: 20px;
  245. height: 20px;
  246. display: block;
  247. border: none;
  248. float: left;
  249. background-size: 20px;
  250. background-repeat: no-repeat;
  251. }
  252. .icon-return{
  253. background-image:url('data:image/drawable-xhdpi/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAACB0lEQVRoQ+3aQU7CUBAG4BlMdOOiB4CIJxASg9t6Ar2CN4Ab6A3wCJ6AI4A7hYU9ggtIXD4jKzDvmQKihNL29Q3QmdJ1O53vTdqmf4tQsA0L5oUDWPrEDxOmnrBXuboBY2rwXXpSHy/v1PVt621twp5X8+D0pAMI/rwpo2Baqu8bvRXwHHvcBcTaygSMeVDD/r3tVCj3JwdvxM6GLAwciwXzCV+TqlKBopyYbS2yCSditfHVaBDYNki9PwmYCzZcPGcwJ6wzmBvWCcwRmxnMFZsJzBlrDeaOtQJLwKYGS8GmAkvCJoKlYWPBErEbwVKxkWDJ2DWwdOwKuAjYJTgeG0Yz0ATQe395dwkD1HDw/AcuN97WAjeX6nk81phADft19MqXPuBRN489kvek9R16lcYtAHbIi+exoIYWLgLzABDO8tgjXU/z1HSWaS1uWj1AvIg8gYHH2ZcDztt40g4j4mWIF4s2JoDx5HrfmTLFeq+klkVAr8W00tGRubRk9MYgXio69suDRHTipxZp6ERw4nOa2SMrFVgSOjVYCtoKLAFtDeaOzgTmjM4M5op2AnNEO4O5oUnAnNBk4DToMDWkeIl3qUEKTkRraKnRa9ulYddjycGxaGn/Wv5f/ci3rCmei/x9+Be+QDcBoQratMX8a+l6Xe3y+K1cw7sE2J7rALZdMW77F27CPx0GsT6uUz1MAAAAAElFTkSuQmCC');
  254. }
  255. .m-slider {
  256. overflow-x: hidden;
  257. width: 94%;
  258. position: relative;
  259. margin:0 3% 3% 3%;
  260. border-radius:5px;
  261. }
  262. .slider-wrapper {
  263. display: -webkit-box;
  264. display: -webkit-flex;
  265. display: -ms-flexbox;
  266. display: flex;
  267. width: 100%;
  268. height: 100%;
  269. -webkit-transform: translate3d(0px, 0px, 0px);
  270. transform: translate3d(0px, 0px, 0px);
  271. position: relative;
  272. z-index: 1;
  273. -webkit-transition-property: -webkit-transform;
  274. transition-property: -webkit-transform;
  275. transition-property: transform;
  276. transition-property: transform, -webkit-transform;
  277. }
  278. .slider-item {
  279. width: 100%;
  280. height: 100%;
  281. -webkit-flex-shrink: 0;
  282. -ms-flex-negative: 0;
  283. flex-shrink: 0;
  284. background: #f6f6f6;
  285. }
  286. .slider-item img {
  287. width: 100%;
  288. height: auto;
  289. display: block;
  290. border: none;
  291. }
  292. .slider-pagination {
  293. text-align: right;
  294. position: absolute;
  295. width: 100%;
  296. z-index: 2;
  297. right: 0;
  298. bottom: 15px;
  299. pointer-events: none;
  300. display: -webkit-box;
  301. display: -webkit-flex;
  302. display: -ms-flexbox;
  303. display: flex;
  304. -webkit-box-align: end;
  305. -webkit-align-items: flex-end;
  306. -ms-flex-align: end;
  307. align-items: flex-end;
  308. -webkit-box-pack: center;
  309. -webkit-justify-content: center;
  310. -ms-flex-pack: center;
  311. justify-content: center;
  312. }
  313. .slider-pagination > .slider-pagination-item {
  314. margin: 0 .25rem;
  315. width: 8px;
  316. height: 8px;
  317. display: inline-block;
  318. border-radius: 100%;
  319. background-color:#3d4c59;
  320. }
  321. .slider-pagination > .slider-pagination-item.slider-pagination-item-active {
  322. background-color: #ffffff;
  323. border-radius: 100%;
  324. }
  325. .aui-grids {
  326. overflow: hidden;
  327. position: relative;
  328. padding-bottom: 10px;
  329. }
  330. .aui-grids-item {
  331. width: 25%;
  332. float: left;
  333. position: relative;
  334. z-index: 0;
  335. padding: 0.32rem 0;
  336. font-size: 0.85rem;
  337. text-align: center;
  338. color: #fff;
  339. }
  340. .aui-grids-item-icon {
  341. width: 55px;
  342. height: 55px;
  343. margin: 0 auto;
  344. }
  345. .aui-grids-item-icon img {
  346. width: 55px;
  347. height: 55px;
  348. display: block;
  349. border-radius: 100%;
  350. }
  351. .aui-grids-item-text {
  352. color: #101d37;
  353. font-size:0.85rem;
  354. padding-top:0.3rem;
  355. }
  356. .aui-list-head h2{
  357. font-size:1.3rem;
  358. color:#101d37;
  359. padding:15px;
  360. }
  361. .aui-list-cell{
  362. position:relative;
  363. overflow:hidden;
  364. }
  365. .aui-list-cell-item{
  366. width:50%;
  367. display:block;
  368. border:none;
  369. float:left;
  370. }
  371. .aui-list-cell-item-info-one {
  372. background-image:url("../image/drawable-xhdpi/02.png") !important;
  373. height:92px;
  374. background-size:cover;
  375. border-radius:10px;
  376. margin-left:15px;
  377. margin-right:15px;
  378. margin-bottom:15px;
  379. padding:20px;
  380. }
  381. .aui-list-cell-item-img{
  382. height: 200px !important;
  383. }
  384. .aui-list-cell-item-info{
  385. background-image:url("../image/drawable-xhdpi/01.png");
  386. height:92px;
  387. background-size:cover;
  388. border-radius:10px;
  389. margin-left:8px;
  390. margin-right:8px;
  391. margin-bottom:15px;
  392. padding:20px;
  393. background-position:center;
  394. }
  395. .aui-list-cell-item-info-two{
  396. background-image:url("../image/drawable-xhdpi/03.png");
  397. }
  398. .aui-list-cell-item-info h2{
  399. color:#fff;
  400. font-size:0.95rem;
  401. font-weight:bold;
  402. margin-bottom:0.4rem;
  403. }
  404. .aui-list-cell-item-info span em{
  405. display:block;
  406. border-radius:3px;
  407. color:#fff;
  408. font-size:0.7rem;
  409. float:left;
  410. font-style:normal;
  411. margin-right:0.2rem;
  412. }
  413. .aui-list-cell-item-img h2{
  414. color:#fff;
  415. font-size:0.95rem;
  416. font-weight:bold;
  417. margin-bottom:0.4rem;
  418. }
  419. .aui-list-cell-item-img p{
  420. color:#fff;
  421. font-size:0.85rem;
  422. margin-bottom:0.4rem;
  423. }
  424. .aui-list-cell-item-info-thr{
  425. background-image:url("../image/drawable-xhdpi/icon-bg-004.png");
  426. }
  427. .aui-list-cell-item-info-thr h2{
  428. color:#333;
  429. }
  430. .aui-list-cell-item-info-fou{
  431. background-image:url("../image/drawable-xhdpi/icon-bg-005.png");
  432. }
  433. .aui-list-cell-item-info-fou h2{
  434. color:#333;
  435. }
  436. .aui-badge {
  437. position : absolute;
  438. background-color: #f00;
  439. margin-left: 40px;
  440. color: #fff;
  441. width: 1.1rem;
  442. height: 1.1rem;
  443. border-radius: 50%;
  444. font-size : 0.7rem;
  445. line-height: 1.1rem;
  446. text-align: center;
  447. }