tv.css 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. body
  2. {
  3. width: 100%;
  4. height: 100%;
  5. margin: 0;
  6. }
  7. p{
  8. margin: 0;
  9. }
  10. *{
  11. box-sizing: border-box;
  12. }
  13. .main-color{
  14. color: #FF6666!important;
  15. }
  16. .color0{
  17. color:#fff!important
  18. }
  19. .color1{
  20. color:rgba(0,0,0,.8)!important;
  21. }
  22. .color2{
  23. color:rgba(0,0,0,.5)!important;
  24. }
  25. .color3{
  26. color:rgba(0,0,0,.3)!important;
  27. }
  28. .color4{
  29. color:rgba(0,0,0,.4)!important;
  30. }
  31. .color5{
  32. color:rgba(255,255,255,.5)!important;
  33. }
  34. .color6{
  35. color:rgba(0,0,0,1)!important;
  36. }
  37. .color-red {
  38. color: #f9413e!important;
  39. }
  40. .color-yellow{
  41. color: #ffcf4d!important;
  42. }
  43. .color-green {
  44. color: green!important;
  45. }
  46. .price-bgcolor{
  47. background-color: #ff9f19!important;
  48. }
  49. .main-bgcolor{
  50. background-color: #22b1ff!important;
  51. }
  52. .bgcolor1{
  53. background-color: #fff!important;
  54. }
  55. .bgcolor2{
  56. background-color: #f7f7f7!important;
  57. }
  58. .bgcolor3{
  59. background-color: #999!important;
  60. }
  61. .bgcolor4{
  62. background-color: #f44336!important;
  63. }
  64. .fs0{
  65. font-size: 0px!important;
  66. }
  67. .fs12{
  68. font-size: 12px!important;
  69. }
  70. .fs14{
  71. font-size: 14px!important;
  72. }
  73. .fs15{
  74. font-size: 15px!important;
  75. }
  76. .fs16 {
  77. font-size: 16px!important;
  78. }
  79. .fs18 {
  80. font-size: 18px!important;
  81. }
  82. .fs20{
  83. font-size: 20px!important;
  84. }
  85. .fs22{
  86. font-size: 22px!important;
  87. }
  88. .fs24{
  89. font-size: 24px!important;
  90. }
  91. .fs26{
  92. font-size: 26px!important;
  93. }
  94. .fs30{
  95. font-size: 30px!important;
  96. }
  97. .fs44{
  98. font-size: 44px!important;
  99. }
  100. .ml5{
  101. margin-left:5px!important;
  102. }
  103. .mt5{
  104. margin-top:5px!important;
  105. }
  106. .mt10{
  107. margin-top:10px!important;
  108. }
  109. .mb10{
  110. margin-bottom:10px!important;
  111. }
  112. .mr15{
  113. margin-right:15px!important;
  114. }
  115. .mr10{
  116. margin-right:10px!important;
  117. }
  118. .mr5{
  119. margin-right: 5px!important;
  120. }
  121. .mb10{
  122. margin-bottom: 10px!important;
  123. }
  124. .mb20{
  125. margin-bottom: 20px!important;
  126. }
  127. .mb5{
  128. margin-bottom: 5px!important;
  129. }
  130. .mb0{
  131. margin-bottom: 0!important;
  132. }
  133. .m20{
  134. margin:20px;
  135. }
  136. .pd0{
  137. padding: 0;
  138. }
  139. .pd5{
  140. padding: 5px;
  141. }
  142. .pd10{
  143. padding: 10px;
  144. }
  145. .pd15{
  146. padding: 15px;
  147. }
  148. .pd5-15{
  149. padding: 5px 15px;
  150. }
  151. .pl10{
  152. padding-left: 10px;
  153. }
  154. .pr10{
  155. padding-right: 10px;
  156. }
  157. .pt15{
  158. padding-top: 15px;
  159. }
  160. .pb0{
  161. padding-bottom: 0;
  162. }
  163. .pb15{
  164. padding-bottom: 15px;
  165. }
  166. .pl5{
  167. padding-left: 5px;
  168. }
  169. .pl15{
  170. padding-left: 15px;
  171. }
  172. .pr15{
  173. padding-right: 15px;
  174. }
  175. .pr20{
  176. padding-right: 20px;
  177. }
  178. .lh24{
  179. line-height: 24px;
  180. }
  181. .lh30{
  182. line-height: 30px;
  183. }
  184. .lh36{
  185. line-height: 36px;
  186. }
  187. .lh40{
  188. line-height: 40px;
  189. }
  190. .lh44{
  191. line-height: 44px;
  192. }
  193. .lh50{
  194. line-height: 50px;
  195. }
  196. .bold{
  197. font-weight: bold!important;
  198. }
  199. .items {
  200. display: -webkit-box;
  201. display: -webkit-flex;
  202. display: flex;
  203. align-items: center
  204. }
  205. .items-top{
  206. align-items:initial;
  207. }
  208. .item{
  209. -webkit-box-flex: 1;
  210. -webkit-flex: 1;
  211. flex: 1;
  212. }
  213. .item-cb{
  214. -webkit-box-pack: center;
  215. -moz-box-pack: center;
  216. -ms-box-pack: center;
  217. -o-box-pack: center;
  218. box-pack: center;
  219. -webkit-box-align: center;
  220. -moz-box-align: center;
  221. -ms-box-align: center;
  222. -o-box-align: center;
  223. box-align: center;
  224. display: -webkit-box;
  225. display: -moz-box;
  226. display: -ms-box;
  227. display: -o-box;
  228. display: box;
  229. }
  230. .center {
  231. position: fixed;
  232. width: 85%;
  233. top: 145px;
  234. left: 50%;
  235. -webkit-transform: translate(-50%,-50%);
  236. transform: translate(-50%,-50%);
  237. text-align: center;
  238. color:#999;
  239. z-index: 100;
  240. }
  241. .del-line{
  242. text-decoration: line-through;
  243. }
  244. .mui-btn {
  245. font-size: 18px;
  246. font-weight: 400;
  247. line-height: 1.42;
  248. position: relative;
  249. display: inline-block;
  250. margin-bottom: 0;
  251. padding: 6px 12px;
  252. cursor: pointer;
  253. -webkit-transition: all;
  254. transition: all;
  255. -webkit-transition-timing-function: linear;
  256. transition-timing-function: linear;
  257. -webkit-transition-duration: .2s;
  258. transition-duration: .2s;
  259. text-align: center;
  260. vertical-align: top;
  261. white-space: nowrap;
  262. color: #333;
  263. border: 1px solid #ccc;
  264. border-radius: 3px;
  265. border-top-left-radius: 3px;
  266. border-top-right-radius: 3px;
  267. border-bottom-right-radius: 3px;
  268. border-bottom-left-radius: 3px;
  269. background-color: #fff;
  270. background-clip: padding-box;
  271. }
  272. .mui-btn-primary{
  273. color: #fff;
  274. border: 1px solid #FF6666;
  275. background-color: #FF6666;
  276. }
  277. .mui-btn-grey
  278. {
  279. color: #fff;
  280. border: 1px solid #acacb4;
  281. background-color: #acacb4;
  282. }
  283. .mui-btn-block {
  284. font-size: 18px;
  285. display: block;
  286. width: 100%;
  287. margin-bottom: 10px;
  288. padding: 10px 0;
  289. }
  290. .mui-content-padded {
  291. margin: 10px;
  292. }
  293. .main{
  294. position: absolute;
  295. left: 0px;
  296. top: 0px;
  297. width: 1280px;
  298. height: 720px;
  299. overflow: hidden;
  300. }
  301. .head img {
  302. position: absolute;
  303. top: 20px;
  304. left: 50px;
  305. }
  306. .head .title{
  307. position: absolute;
  308. top: 26px;
  309. left: 310px;
  310. font-size: 34px;
  311. font-weight: bold;
  312. color: white;
  313. line-height: 43px;
  314. text-align: center;
  315. }
  316. .content{
  317. position: absolute;
  318. left: 30px;
  319. right: 30px;
  320. top: 83px;
  321. height: 620px;
  322. overflow: hidden;
  323. }
  324. .mui-card {
  325. border: 3px solid transparent;
  326. position: relative;
  327. overflow: hidden;
  328. margin: 8px;
  329. border-radius: 5px;
  330. background-color: white;
  331. background-clip: padding-box;
  332. }
  333. .col-xs-3.active .mui-card{
  334. border: 3px solid #fff;
  335. box-shadow: 0 0 30px #12a1eb;
  336. }
  337. .col-xs-3.active .mui-card{
  338. transform: scale(1.06);
  339. }
  340. .col-xs-4.active .mui-card{
  341. border: 3px solid #fff;
  342. box-shadow: 0 0 30px #12a1eb;
  343. }
  344. .col-xs-4.active .mui-card{
  345. transform: scale(1.06);
  346. }
  347. .mui-card-header{
  348. height: 200px;
  349. overflow: hidden;
  350. }
  351. .mui-card-content {
  352. padding: 10px;
  353. position: relative;
  354. font-size: 24px;
  355. }
  356. .mui-ellipsis
  357. {
  358. overflow: hidden;
  359. white-space: nowrap;
  360. text-overflow: ellipsis;
  361. }
  362. .mui-ellipsis-2
  363. {
  364. display: -webkit-box;
  365. overflow: hidden;
  366. white-space: normal !important;
  367. text-overflow: ellipsis;
  368. word-wrap: break-word;
  369. -webkit-line-clamp: 2;
  370. -webkit-box-orient: vertical;
  371. }
  372. .row {
  373. box-sizing: border-box;
  374. }
  375. .row:after, .row:before {
  376. display: table;
  377. content: " ";
  378. }
  379. .row:after {
  380. clear: both;
  381. }
  382. .col-xs-1, .col-xs-2, .col-xs-2_4, .col-xs-2_5, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
  383. .col-xs-7, .col-xs-8, .col-xs-9,.col-xs-9_5, .col-xs-10, .col-xs-11, .col-xs-12 {
  384. position: relative;
  385. min-height: 1px;
  386. float: left;
  387. box-sizing: border-box;
  388. }
  389. .col-xs-12 {
  390. width: 100%;
  391. }
  392. .col-xs-11 {
  393. width: 91.66666667%;
  394. }
  395. .col-xs-10 {
  396. width: 83.33333333%;
  397. }
  398. .col-xs-9_5 {
  399. width: 79.16666667%;
  400. }
  401. .col-xs-9 {
  402. width: 75%;
  403. }
  404. .col-xs-8 {
  405. width: 66.66666667%;
  406. }
  407. .col-xs-7 {
  408. width: 58.33333333%;
  409. }
  410. .col-xs-6 {
  411. width: 50%;
  412. }
  413. .col-xs-5 {
  414. width: 41.66666667%;
  415. }
  416. .col-xs-4 {
  417. width: 33.33333333%;
  418. }
  419. .col-xs-3 {
  420. width: 25%;
  421. }
  422. .col-xs-2_5 {
  423. width: 20.83333333%;
  424. }
  425. .col-xs-2_4 {
  426. width: 20%;
  427. }
  428. .col-xs-2 {
  429. width: 16.66666667%;
  430. }
  431. .col-xs-1 {
  432. width: 8.33333333%;
  433. }
  434. .col-xs-pull-12 {
  435. right: 100%;
  436. }
  437. .col-xs-pull-11 {
  438. right: 91.66666667%;
  439. }
  440. .col-xs-pull-10 {
  441. right: 83.33333333%;
  442. }
  443. .col-xs-pull-9 {
  444. right: 75%;
  445. }
  446. .col-xs-pull-8 {
  447. right: 66.66666667%;
  448. }
  449. .col-xs-pull-7 {
  450. right: 58.33333333%;
  451. }
  452. .col-xs-pull-6 {
  453. right: 50%;
  454. }
  455. .col-xs-pull-5 {
  456. right: 41.66666667%;
  457. }
  458. .col-xs-pull-4 {
  459. right: 33.33333333%;
  460. }
  461. .col-xs-pull-3 {
  462. right: 25%;
  463. }
  464. .col-xs-pull-2 {
  465. right: 16.66666667%;
  466. }
  467. .col-xs-pull-1 {
  468. right: 8.33333333%;
  469. }
  470. .col-xs-pull-0 {
  471. right: auto;
  472. }
  473. .col-xs-push-12 {
  474. left: 100%;
  475. }
  476. .col-xs-push-11 {
  477. left: 91.66666667%;
  478. }
  479. .col-xs-push-10 {
  480. left: 83.33333333%;
  481. }
  482. .col-xs-push-9 {
  483. left: 75%;
  484. }
  485. .col-xs-push-8 {
  486. left: 66.66666667%;
  487. }
  488. .col-xs-push-7 {
  489. left: 58.33333333%;
  490. }
  491. .col-xs-push-6 {
  492. left: 50%;
  493. }
  494. .col-xs-push-5 {
  495. left: 41.66666667%;
  496. }
  497. .col-xs-push-4 {
  498. left: 33.33333333%;
  499. }
  500. .col-xs-push-3 {
  501. left: 25%;
  502. }
  503. .col-xs-push-2 {
  504. left: 16.66666667%;
  505. }
  506. .col-xs-push-1 {
  507. left: 8.33333333%;
  508. }
  509. .col-xs-push-0 {
  510. left: auto;
  511. }
  512. .col-xs-offset-12 {
  513. margin-left: 100%;
  514. }
  515. .col-xs-offset-11 {
  516. margin-left: 91.66666667%;
  517. }
  518. .col-xs-offset-10 {
  519. margin-left: 83.33333333%;
  520. }
  521. .col-xs-offset-9 {
  522. margin-left: 75%;
  523. }
  524. .col-xs-offset-8 {
  525. margin-left: 66.66666667%;
  526. }
  527. .col-xs-offset-7 {
  528. margin-left: 58.33333333%;
  529. }
  530. .col-xs-offset-6 {
  531. margin-left: 50%;
  532. }
  533. .col-xs-offset-5 {
  534. margin-left: 41.66666667%;
  535. }
  536. .col-xs-offset-4 {
  537. margin-left: 33.33333333%;
  538. }
  539. .col-xs-offset-3 {
  540. margin-left: 25%;
  541. }
  542. .col-xs-offset-2 {
  543. margin-left: 16.66666667%;
  544. }
  545. .col-xs-offset-1 {
  546. margin-left: 8.33333333%;
  547. }
  548. .col-xs-offset-0 {
  549. margin-left: 0;
  550. }