diy.css 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949
  1. @charset "UTF-8";
  2. .row-content .widget {
  3. min-width: 1130px; }
  4. .row-content .widget-body {
  5. padding: 0; }
  6. .row-content .iconfont {
  7. font-size: inherit; }
  8. .row-content p {
  9. margin: 0; }
  10. .row-content .btn-resetColor {
  11. padding: .4em 1em;
  12. color: #444;
  13. background: #fdfdfd;
  14. border-color: #efefef;
  15. outline: none;
  16. margin-left: -4px; }
  17. .row-content .btn-resetColor:focus, .row-content .btn-resetColor:hover {
  18. background: #f9f9f9; }
  19. .work-diy {
  20. padding: 20px 0;
  21. align-items: flex-start; }
  22. .work-diy .diy-menu {
  23. width: 285px;
  24. height: auto;
  25. background: #fdfdfd;
  26. border: 1px solid #ddd;
  27. padding: 15px 10px;
  28. -webkit-transition: all 0.3s;
  29. transition: all 0.3s;
  30. user-select: none; }
  31. .work-diy .diy-menu .navs,
  32. .work-diy .diy-menu .action {
  33. height: auto; }
  34. .work-diy .diy-menu .menu-title {
  35. position: relative;
  36. padding: 0 22px;
  37. height: 30px;
  38. border-bottom: 1px solid #eef1f5; }
  39. .work-diy .diy-menu .menu-title span {
  40. font-size: 1.3rem; }
  41. .work-diy .diy-menu .menu-title::before {
  42. content: '';
  43. position: absolute;
  44. width: 4px;
  45. height: 13px;
  46. background: #00aeff;
  47. top: 8px;
  48. left: 9px; }
  49. .work-diy .diy-menu .navs {
  50. padding: 10px 5px;
  51. border-bottom: 1px dotted #ddd;
  52. position: relative;
  53. display: -webkit-box;
  54. display: -webkit-flex;
  55. display: -ms-flexbox;
  56. display: flex; }
  57. .work-diy .diy-menu .navs .title {
  58. font-size: 1.24rem;
  59. color: #999;
  60. margin: 10px 0; }
  61. .work-diy .diy-menu .navs .btns-global {
  62. width: 96px; }
  63. .work-diy .diy-menu .navs .btns-global nav {
  64. height: 40px;
  65. line-height: 38px; }
  66. .work-diy .diy-menu .navs nav {
  67. width: 74px;
  68. float: left;
  69. padding: 3px 0;
  70. margin: 5px;
  71. border: 1px solid #dddddd;
  72. text-align: center;
  73. font-size: 12px;
  74. cursor: pointer;
  75. -webkit-transition: All 0.3s ease-in-out;
  76. -moz-transition: All 0.3s ease-in-out;
  77. -o-transition: All 0.3s ease-in-out;
  78. transition: All 0.3s ease-in-out; }
  79. .work-diy .diy-menu .navs nav p {
  80. color: #424242; }
  81. .work-diy .diy-menu .navs nav p.item-icon .iconfont {
  82. font-size: 1.8rem; }
  83. .work-diy .diy-menu .navs nav.page-setup {
  84. width: auto;
  85. padding: 0;
  86. margin: 0;
  87. position: absolute;
  88. top: 12px;
  89. right: 12px;
  90. border-color: #fff;
  91. line-height: 12px; }
  92. .work-diy .diy-menu .navs nav.page-setup:hover {
  93. border-color: #fff; }
  94. .work-diy .diy-menu .navs nav.special {
  95. background: #f4f4f4; }
  96. .work-diy .diy-menu .navs nav:hover {
  97. background: #fff;
  98. border: 1px solid #00aeff;
  99. color: #00aeff;
  100. -webkit-transition: All 0.4s;
  101. -moz-transition: All 0.4s;
  102. -o-transition: All 0.4s;
  103. transition: All 0.4s; }
  104. .work-diy .diy-menu .navs nav:active {
  105. -webkit-box-shadow: inset 1px 3px 5px rgba(0, 0, 0, 0.2);
  106. box-shadow: inset 1px 3px 5px rgba(0, 0, 0, 0.2); }
  107. .work-diy .diy-menu .action {
  108. margin-top: 15px;
  109. text-align: right;
  110. position: relative; }
  111. .work-diy .diy-menu .action:before {
  112. content: "";
  113. position: absolute;
  114. top: 0;
  115. left: 0;
  116. height: 0;
  117. width: 100%; }
  118. .work-diy .diy-menu .action nav {
  119. margin-right: 5px; }
  120. .work-diy .diy-phone {
  121. width: 377px;
  122. border-radius: 3px;
  123. box-shadow: 0 3px 10px #dcdcdc;
  124. border: 1px solid #ddd; }
  125. .work-diy .diy-phone .phone-top {
  126. width: 100%;
  127. height: 66px;
  128. text-align: center; }
  129. .work-diy .diy-phone .phone-top h4 {
  130. margin: 0;
  131. font-size: 1.4rem;
  132. font-weight: normal;
  133. white-space: nowrap;
  134. line-height: 88px; }
  135. .work-diy .diy-phone .phone-main {
  136. position: relative;
  137. border-top: 0;
  138. user-select: none;
  139. line-height: normal; }
  140. .work-diy .diy-phone .phone-main .dragArea {
  141. overflow-y: auto;
  142. height: 580px; }
  143. .work-diy .diy-phone .phone-main .drag {
  144. display: block;
  145. overflow: hidden;
  146. font-size: 1.3rem; }
  147. .work-diy .diy-phone .phone-main .drag .btn-edit-del {
  148. height: 16px;
  149. position: absolute;
  150. right: 2px;
  151. bottom: 2px;
  152. display: none;
  153. z-index: 90; }
  154. .work-diy .diy-phone .phone-main .drag .btn-edit-del > div {
  155. width: 32px;
  156. height: 16px;
  157. line-height: 16px;
  158. display: inline-block;
  159. text-align: center;
  160. font-size: 10px;
  161. color: #fff;
  162. background: rgba(0, 0, 0, 0.4);
  163. margin-left: 2px;
  164. cursor: pointer;
  165. position: relative;
  166. z-index: 11; }
  167. .work-diy .diy-phone .phone-main .drag.selected .btn-edit-del, .work-diy .diy-phone .phone-main .drag:hover .btn-edit-del {
  168. display: block; }
  169. .work-diy .diy-phone .phone-main a {
  170. color: #337ab7; }
  171. .work-diy .diy-phone .phone-main .diy-search {
  172. background: #f1f1f2;
  173. padding: 10px 10px; }
  174. .work-diy .diy-phone .phone-main .diy-search .inner {
  175. height: 30px;
  176. background: #fff;
  177. overflow: hidden; }
  178. .work-diy .diy-phone .phone-main .diy-search .inner.radius {
  179. border-radius: 5px; }
  180. .work-diy .diy-phone .phone-main .diy-search .inner.round {
  181. border-radius: 30px; }
  182. .work-diy .diy-phone .phone-main .diy-search .inner .search-input {
  183. height: 30px;
  184. line-height: 30px;
  185. color: #999999;
  186. padding: 0 10px; }
  187. .work-diy .diy-phone .phone-main .diy-banner {
  188. display: block;
  189. margin: 0;
  190. padding: 0;
  191. height: auto;
  192. overflow: hidden; }
  193. .work-diy .diy-phone .phone-main .diy-banner img {
  194. display: none;
  195. width: 100%; }
  196. .work-diy .diy-phone .phone-main .diy-banner img:first-child {
  197. display: block; }
  198. .work-diy .diy-phone .phone-main .diy-banner .dots {
  199. height: 14px;
  200. padding: 0 10px;
  201. position: absolute;
  202. left: 0;
  203. right: 0;
  204. bottom: 10px;
  205. opacity: 0.8;
  206. text-align: center; }
  207. .work-diy .diy-phone .phone-main .diy-banner .dots span {
  208. display: inline-block;
  209. margin-left: 3px; }
  210. .work-diy .diy-phone .phone-main .diy-banner .dots.rectangle span {
  211. height: 10px;
  212. width: 16px; }
  213. .work-diy .diy-phone .phone-main .diy-banner .dots.square span {
  214. height: 10px;
  215. width: 10px; }
  216. .work-diy .diy-phone .phone-main .diy-banner .dots.round span {
  217. height: 10px;
  218. width: 10px;
  219. border-radius: 10px; }
  220. .work-diy .diy-phone .phone-main .diy-imageSingle {
  221. display: block;
  222. margin: 0;
  223. padding: 0;
  224. height: auto;
  225. overflow: hidden; }
  226. .work-diy .diy-phone .phone-main .diy-imageSingle img {
  227. display: block;
  228. width: 100%; }
  229. .work-diy .diy-phone .phone-main .diy-navBar li {
  230. margin: 10px 0; }
  231. .work-diy .diy-phone .phone-main .diy-navBar li .item-image {
  232. text-align: center;
  233. margin-bottom: 4px; }
  234. .work-diy .diy-phone .phone-main .diy-navBar li .item-image img {
  235. height: 44px;
  236. width: 44px; }
  237. .work-diy .diy-phone .phone-main .diy-navBar li .item-text {
  238. text-align: center; }
  239. .work-diy .diy-phone .phone-main .diy-guide .line {
  240. height: 0;
  241. width: 100%; }
  242. .work-diy .diy-phone .phone-main .diy-video video {
  243. display: block;
  244. width: 100%;
  245. height: 100%; }
  246. .work-diy .diy-phone .phone-main .diy-article {
  247. background: #f7f7f7; }
  248. .work-diy .diy-phone .phone-main .diy-article .article-item {
  249. margin-bottom: 10px;
  250. padding: 15px;
  251. background: #fff; }
  252. .work-diy .diy-phone .phone-main .diy-article .article-item:last-child {
  253. margin-bottom: 0; }
  254. .work-diy .diy-phone .phone-main .diy-article .article-item .article-item__image image {
  255. display: block; }
  256. .work-diy .diy-phone .phone-main .diy-article .article-item .article-item__footer {
  257. margin-top: 5px; }
  258. .work-diy .diy-phone .phone-main .diy-article .article-item .article-item__footer .article-views {
  259. font-size: 12px;
  260. color: #888; }
  261. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__10 {
  262. display: flex; }
  263. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__10 .article-item__left {
  264. padding-right: 10px; }
  265. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__10 .article-item__title {
  266. min-height: 36px; }
  267. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__10 .article-item__image img {
  268. display: block;
  269. width: 120px; }
  270. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__20 .article-item__image {
  271. margin-top: 12.5px; }
  272. .work-diy .diy-phone .phone-main .diy-article .article-item.show-type__20 .article-item__image img {
  273. display: block;
  274. width: 100%; }
  275. .work-diy .diy-phone .phone-main .diy-special {
  276. line-height: normal; }
  277. .work-diy .diy-phone .phone-main .diy-special .special-left {
  278. padding: 5px 10px; }
  279. .work-diy .diy-phone .phone-main .diy-special .special-left img {
  280. display: block;
  281. width: 70px; }
  282. .work-diy .diy-phone .phone-main .diy-special .special-content {
  283. overflow: hidden; }
  284. .work-diy .diy-phone .phone-main .diy-special .special-content .content-item {
  285. padding: 2px 0;
  286. font-size: 13px;
  287. color: #141414; }
  288. .work-diy .diy-phone .phone-main .diy-special .special-content.display_1 {
  289. height: 22px; }
  290. .work-diy .diy-phone .phone-main .diy-special .special-content.display_2 {
  291. height: 44px; }
  292. .work-diy .diy-phone .phone-main .diy-special .special-more {
  293. padding: 12px 10px;
  294. font-size: 12px; }
  295. .work-diy .diy-phone .phone-main .diy-window .item-image img {
  296. width: 100%; }
  297. .work-diy .diy-phone .phone-main .diy-window .display {
  298. height: 0;
  299. width: 100%;
  300. margin: 0;
  301. padding-bottom: 50%;
  302. position: relative; }
  303. .work-diy .diy-phone .phone-main .diy-window .display img {
  304. width: 100%;
  305. height: 100%; }
  306. .work-diy .diy-phone .phone-main .diy-window .display .display-left {
  307. width: 50%;
  308. height: 100%;
  309. position: absolute;
  310. top: 0;
  311. left: 0; }
  312. .work-diy .diy-phone .phone-main .diy-window .display .display-right {
  313. width: 50%;
  314. height: 100%;
  315. position: absolute;
  316. top: 0;
  317. left: 50%; }
  318. .work-diy .diy-phone .phone-main .diy-window .display .display-right1 {
  319. width: 100%;
  320. height: 50%;
  321. position: absolute;
  322. top: 0;
  323. left: 0; }
  324. .work-diy .diy-phone .phone-main .diy-window .display .display-right2 {
  325. width: 100%;
  326. height: 50%;
  327. position: absolute;
  328. top: 50%;
  329. left: 0; }
  330. .work-diy .diy-phone .phone-main .diy-window .display .display-right2 .left {
  331. width: 50%;
  332. height: 100%;
  333. position: absolute;
  334. top: 0;
  335. left: 0; }
  336. .work-diy .diy-phone .phone-main .diy-window .display .display-right2 .right {
  337. width: 50%;
  338. height: 100%;
  339. position: absolute;
  340. top: 0;
  341. left: 50%; }
  342. .work-diy .diy-phone .phone-main .diy-goods .goods-list {
  343. padding: 2px; }
  344. .work-diy .diy-phone .phone-main .diy-goods .goods-list.display__slide {
  345. overflow-x: hidden;
  346. white-space: nowrap;
  347. font-size: 0; }
  348. .work-diy .diy-phone .phone-main .diy-goods .goods-list.display__slide::-webkit-scrollbar {
  349. display: none; }
  350. .work-diy .diy-phone .phone-main .diy-goods .goods-list.display__slide .goods-item {
  351. display: inline-block; }
  352. .work-diy .diy-phone .phone-main .diy-goods .goods-list.display__list .goods-item {
  353. float: left; }
  354. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 {
  355. /* 商品图片 */
  356. /* 商品名称 */
  357. /* 商品卖点 */
  358. /* 商品价格 */ }
  359. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item {
  360. width: 100%;
  361. height: 140px;
  362. margin-bottom: 6px;
  363. padding: 10px;
  364. box-sizing: border-box;
  365. background: #fff; }
  366. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item:last-child {
  367. margin-bottom: 0; }
  368. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item_left {
  369. display: flex;
  370. width: 40%;
  371. background: #fff;
  372. align-items: center; }
  373. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item_left img {
  374. display: block;
  375. width: 120px;
  376. height: 120px; }
  377. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item_right {
  378. position: relative;
  379. width: 60%; }
  380. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item_right .goods-item_title {
  381. height: 36px;
  382. margin-top: 10px;
  383. font-size: 14px;
  384. line-height: 1.3;
  385. color: #333; }
  386. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .goods-item_desc {
  387. margin-top: 4px; }
  388. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .desc-selling_point {
  389. width: 200px;
  390. height: 20px;
  391. font-size: 12px;
  392. color: #ff495e; }
  393. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .desc-goods_sales {
  394. color: #999;
  395. font-size: 12px; }
  396. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .desc_footer {
  397. font-size: 12px; }
  398. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .desc_footer .price_x {
  399. margin-right: 8px;
  400. color: #f03c3c;
  401. font-size: 15px; }
  402. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__1 .desc_footer .price_y {
  403. text-decoration: line-through; }
  404. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__2 .goods-item {
  405. width: 50%; }
  406. .work-diy .diy-phone .phone-main .diy-goods .goods-list.column__3 .goods-item {
  407. width: 33.33333%; }
  408. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item {
  409. padding: 3px; }
  410. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .goods-image {
  411. position: relative;
  412. width: 100%;
  413. height: 0;
  414. padding-bottom: 100%;
  415. overflow: hidden;
  416. background: #fff; }
  417. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .goods-image:after {
  418. content: '';
  419. display: block;
  420. margin-top: 100%;
  421. /* margin 百分比相对父元素宽度计算 */ }
  422. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .goods-image img {
  423. position: absolute;
  424. width: 100%;
  425. height: 100%;
  426. top: 0;
  427. left: 0;
  428. -o-object-fit: cover;
  429. object-fit: cover; }
  430. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .detail {
  431. padding: 4px;
  432. background: #fff;
  433. font-size: 1.3rem; }
  434. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .detail .goods-name {
  435. height: 40px;
  436. overflow: hidden; }
  437. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .detail .goods-price {
  438. font-size: 15px; }
  439. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .detail .line-price {
  440. font-size: 12px;
  441. text-decoration: line-through;
  442. color: #999; }
  443. .work-diy .diy-phone .phone-main .diy-goods .goods-list .goods-item .detail .selling-point {
  444. font-size: 12px;
  445. color: #f20c59; }
  446. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top {
  447. /* 倒计时 */
  448. /* 更多 */ }
  449. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .sharp-modular {
  450. font-size: 15px;
  451. color: #fff;
  452. background: #FB571D;
  453. padding: 5px 15px 5px 12px;
  454. border-bottom-right-radius: 15px;
  455. border-top-right-radius: 15px; }
  456. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .sharp-modular .modular-name {
  457. margin-left: 5px; }
  458. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .sharp-active-status {
  459. color: #616161;
  460. font-size: 14px;
  461. margin-left: 10px; }
  462. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .active-count-down {
  463. font-size: 13px;
  464. height: 20px;
  465. margin-left: 8px; }
  466. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .active-count-down .clock-text {
  467. margin-right: 5px; }
  468. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .active-count-down .clock-time {
  469. background: #252525;
  470. color: #fff;
  471. padding: 0 3px;
  472. line-height: 20px;
  473. border-radius: 4px; }
  474. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .active-count-down .clock-symbol {
  475. padding: 0 4px; }
  476. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .sharp-more {
  477. padding-right: 12px;
  478. color: #616161;
  479. font-size: 14px; }
  480. .work-diy .diy-phone .phone-main .diy-sharpGoods .sharp-top .sharp-more .sharp-more-arrow {
  481. font-size: 12px; }
  482. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list {
  483. padding: 2px; }
  484. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list.display__list .goods-item {
  485. float: left; }
  486. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list.column__2 .goods-item {
  487. width: 50%; }
  488. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list.column__3 .goods-item {
  489. width: 33.33333%; }
  490. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item {
  491. padding: 3px; }
  492. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .goods-image {
  493. position: relative;
  494. width: 100%;
  495. height: 0;
  496. padding-bottom: 100%;
  497. overflow: hidden;
  498. background: #fff; }
  499. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .goods-image:after {
  500. content: '';
  501. display: block;
  502. margin-top: 100%;
  503. /* margin 百分比相对父元素宽度计算 */ }
  504. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .goods-image img {
  505. position: absolute;
  506. width: 100%;
  507. height: 100%;
  508. top: 0;
  509. left: 0;
  510. -o-object-fit: cover;
  511. object-fit: cover; }
  512. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .detail {
  513. padding: 2px;
  514. background: #fff; }
  515. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .detail .goods-name {
  516. font-size: 14px;
  517. height: 38px;
  518. line-height: 1.3;
  519. overflow: hidden; }
  520. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .detail .detail-price {
  521. line-height: 20px; }
  522. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .detail .detail-price .goods-price {
  523. font-size: 15px; }
  524. .work-diy .diy-phone .phone-main .diy-sharpGoods .goods-list .goods-item .detail .detail-price .line-price {
  525. font-size: 12px;
  526. text-decoration: line-through;
  527. color: #999; }
  528. .work-diy .diy-phone .phone-main .diy-coupon {
  529. padding: 10px 0; }
  530. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item {
  531. width: 150px;
  532. height: 60px;
  533. position: relative;
  534. color: #fff;
  535. overflow: hidden;
  536. box-sizing: border-box; }
  537. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item i.before {
  538. content: "";
  539. position: absolute;
  540. z-index: 1;
  541. width: 1.6rem;
  542. height: 1.6rem;
  543. top: 50%;
  544. left: -.8rem;
  545. -webkit-transform: translateY(-50%);
  546. transform: translateY(-50%);
  547. -webkit-border-radius: 80%;
  548. border-radius: 80%;
  549. background-color: #fff; }
  550. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content {
  551. position: relative;
  552. float: left;
  553. width: 70%;
  554. height: 100%;
  555. background-color: #E5004F;
  556. font-size: 12px; }
  557. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content .content-top .price {
  558. font-size: 2rem; }
  559. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content.color__blue {
  560. background: linear-gradient(-125deg, #57bdbf, #2f9de2); }
  561. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content.color__red {
  562. background: linear-gradient(-128deg, #ff6d6d, #ff3636); }
  563. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content.color__violet {
  564. background: linear-gradient(-113deg, #ef86ff, #b66ff5); }
  565. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .left-content.color__yellow {
  566. background: linear-gradient(-141deg, #f7d059, #fdb054); }
  567. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .right-receive {
  568. float: right;
  569. width: 30%;
  570. height: 100%;
  571. background-color: #4e4e4e;
  572. text-align: center; }
  573. .work-diy .diy-phone .phone-main .diy-coupon .coupon-item .right-receive span {
  574. font-size: 1.3rem; }
  575. .work-diy .diy-phone .phone-main .diy-sharingGoods {
  576. padding: 10px;
  577. /* 商品图片 */
  578. /* 商品名称 */
  579. /* 商品卖点 */
  580. /* 拼团信息 */
  581. /* 商品价格 */
  582. /* 去拼团按钮 */ }
  583. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item {
  584. height: 160px;
  585. margin-bottom: 10px;
  586. padding: 10px;
  587. box-sizing: border-box;
  588. background: #fff; }
  589. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item:last-child {
  590. margin-bottom: 0; }
  591. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item_left {
  592. display: flex;
  593. width: 40%;
  594. background: #fff;
  595. align-items: center; }
  596. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item_left img {
  597. display: block;
  598. width: 120px;
  599. height: 120px; }
  600. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item_right {
  601. position: relative;
  602. width: 60%; }
  603. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item_right .goods-item_title {
  604. height: 36px;
  605. margin-top: 10px;
  606. font-size: 14px;
  607. line-height: 1.3;
  608. color: #333; }
  609. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item_desc {
  610. margin-top: 8px; }
  611. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc-selling_point {
  612. width: 200px;
  613. height: 16px;
  614. font-size: 12px;
  615. line-height: 1.4;
  616. color: #ff495e; }
  617. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc-situation {
  618. margin-top: 6px;
  619. font-size: 12px;
  620. line-height: 1.3;
  621. color: #f03c3c; }
  622. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc-situation .people {
  623. margin: 0 3px; }
  624. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc_footer {
  625. margin-top: 6px;
  626. font-size: 12px; }
  627. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc_footer .price_x {
  628. margin-right: 8px;
  629. color: #f03c3c;
  630. font-size: 14px; }
  631. .work-diy .diy-phone .phone-main .diy-sharingGoods .desc_footer .price_y {
  632. text-decoration: line-through; }
  633. .work-diy .diy-phone .phone-main .diy-sharingGoods .goods-item .btn-settlement {
  634. position: absolute;
  635. right: 0;
  636. bottom: 0;
  637. padding: 0 14px;
  638. border-radius: 20px;
  639. background: linear-gradient(to right, #eb356b 0%, #f03c3c 100%);
  640. box-shadow: 0 2px 10px -2px #eb356b;
  641. font-size: 12px;
  642. line-height: 27px;
  643. text-align: center;
  644. color: #fff; }
  645. .work-diy .diy-phone .phone-main .diy-bargainGoods {
  646. /* 正在参与的用户 */
  647. /* 商品原价 */
  648. /* 砍价底价 */
  649. /* 立即参加按钮 */ }
  650. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item {
  651. margin-bottom: 10px;
  652. background: #fff;
  653. padding: 10px 8px; }
  654. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item:last-child {
  655. margin-bottom: 0; }
  656. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-image img {
  657. display: block;
  658. width: 110px;
  659. height: 110px; }
  660. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info {
  661. width: 249px;
  662. padding-top: 2px;
  663. margin-left: 7px;
  664. position: relative; }
  665. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .goods-name {
  666. font-size: 14px;
  667. min-height: 30px; }
  668. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples {
  669. margin-top: 7px; }
  670. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples .user-list {
  671. margin-right: 5px; }
  672. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples .user-list .user-item-avatar {
  673. margin-left: -4px; }
  674. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
  675. margin-left: 0; }
  676. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples .user-list .user-item-avatar img {
  677. display: block;
  678. width: 18px;
  679. height: 18px;
  680. border-radius: 50%; }
  681. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .peoples .people__text {
  682. font-size: 12px;
  683. color: #818181; }
  684. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .goods-price {
  685. margin-top: 7px;
  686. color: #818181;
  687. font-size: 12px;
  688. text-decoration: line-through; }
  689. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .floor-price {
  690. color: #fc1e56; }
  691. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .floor-price .small {
  692. font-size: 12px; }
  693. .work-diy .diy-phone .phone-main .diy-bargainGoods .goods-item .goods-info .floor-price .big {
  694. font-size: 16px; }
  695. .work-diy .diy-phone .phone-main .diy-bargainGoods .opt-touch {
  696. position: absolute;
  697. bottom: 0;
  698. right: 5px; }
  699. .work-diy .diy-phone .phone-main .diy-bargainGoods .touch-btn {
  700. color: #fff;
  701. font-size: 14px;
  702. background: #d3a975;
  703. border-radius: 15px;
  704. padding: 5px 14px; }
  705. .work-diy .diy-phone .phone-main .diy-notice {
  706. padding: 4px 10px;
  707. line-height: 26px; }
  708. .work-diy .diy-phone .phone-main .diy-notice .notice__icon {
  709. font-size: 0; }
  710. .work-diy .diy-phone .phone-main .diy-notice .notice__icon img {
  711. width: 16px;
  712. height: 16px; }
  713. .work-diy .diy-phone .phone-main .diy-notice .notice__text {
  714. padding-left: 5px; }
  715. .work-diy .diy-phone .phone-main .diy-richText {
  716. font-size: 14px;
  717. line-height: normal; }
  718. .work-diy .diy-phone .phone-main .diy-richText p {
  719. padding: 0 4px; }
  720. .work-diy .diy-phone .phone-main .diy-richText img {
  721. display: block;
  722. width: 375px;
  723. margin-left: -4px; }
  724. .work-diy .diy-phone .phone-main .diy-richText video {
  725. width: 100%; }
  726. .work-diy .diy-phone .phone-main .diy-richText hr {
  727. margin: 5px 0; }
  728. .work-diy .diy-phone .phone-main .diy-richText * + h1, .work-diy .diy-phone .phone-main .diy-richText * + h2, .work-diy .diy-phone .phone-main .diy-richText * + h3, .work-diy .diy-phone .phone-main .diy-richText * + h4, .work-diy .diy-phone .phone-main .diy-richText * + h5, .work-diy .diy-phone .phone-main .diy-richText * + h6 {
  729. margin: 1.6rem 0; }
  730. .work-diy .diy-phone .phone-main .diy-service {
  731. position: absolute;
  732. z-index: 999; }
  733. .work-diy .diy-phone .phone-main .diy-service .service-icon {
  734. padding: 5px; }
  735. .work-diy .diy-phone .phone-main .diy-service .service-icon img {
  736. display: block;
  737. width: 45px;
  738. height: 45px; }
  739. .work-diy .diy-phone .phone-main .diy-shop .shop-item {
  740. padding: 8px 15px;
  741. min-height: 90px;
  742. font-size: 13px;
  743. line-height: 1.5;
  744. border-bottom: 1px solid #eee; }
  745. .work-diy .diy-phone .phone-main .diy-shop .shop-item__logo {
  746. margin-right: 15px; }
  747. .work-diy .diy-phone .phone-main .diy-shop .shop-item__logo img {
  748. display: block;
  749. width: 65px;
  750. height: 65px;
  751. border-radius: 50%;
  752. border: 1px solid #ececec; }
  753. .work-diy .diy-phone .phone-main .diy-shop .shop-item__title {
  754. font-size: 14px;
  755. color: #fd4a5f;
  756. margin-bottom: 5px; }
  757. .work-diy .diy-phone .phone-main .diy-shop .shop-item__address, .work-diy .diy-phone .phone-main .diy-shop .shop-item__phone {
  758. color: #919396; }
  759. .work-diy .diy-phone .phone-main .diy-shop .shop-item__address {
  760. width: 260px; }
  761. .work-diy .diy-phone .phone-main .diy-shop .shop-item__distance {
  762. margin-top: 5px;
  763. color: #c1c1c1;
  764. height: 20px; }
  765. .work-diy .diy-phone .phone-main .diy-shop .shop-item__distance .iconfont {
  766. color: #81838e;
  767. margin-right: 3px; }
  768. .work-diy .diy-phone .phone-main .diy-officialAccount {
  769. width: 100%;
  770. height: 75px;
  771. padding: 0 8px; }
  772. .work-diy .diy-phone .phone-main .diy-officialAccount .item-top {
  773. padding: 5px 0;
  774. font-size: 12px;
  775. color: #c0bdc0; }
  776. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content {
  777. height: 46px; }
  778. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-avatar {
  779. margin-right: 10px; }
  780. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-avatar img {
  781. display: block;
  782. width: 42px;
  783. height: 42px; }
  784. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-public {
  785. width: 235px;
  786. margin-right: 15px; }
  787. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-public .public-name {
  788. font-size: 14px; }
  789. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-public .public-describe {
  790. margin-top: 2px;
  791. font-size: 12px;
  792. color: #9E9B9F; }
  793. .work-diy .diy-phone .phone-main .diy-officialAccount .item-content .item-cont-active .active-btn {
  794. width: 46px;
  795. height: 24px;
  796. line-height: 22px;
  797. border: 1px solid #1aad19;
  798. border-radius: 3px;
  799. font-size: 12px;
  800. color: #1aad19;
  801. text-align: center; }
  802. .work-diy .diy-phone .optional {
  803. position: relative; }
  804. .work-diy .diy-phone .optional:before {
  805. content: ""; }
  806. .work-diy .diy-phone .optional.__z10:before {
  807. z-index: 10; }
  808. .work-diy .diy-phone .optional.__no-move:before {
  809. cursor: pointer !important; }
  810. .work-diy .diy-phone .optional.selected:before, .work-diy .diy-phone .optional:hover:before {
  811. position: absolute;
  812. top: 0;
  813. left: 0;
  814. right: 0;
  815. bottom: 0;
  816. border: 2px dashed #00a0e9;
  817. cursor: move; }
  818. .work-diy .diy-editor {
  819. width: 400px;
  820. height: auto;
  821. min-height: 100px;
  822. padding: 15px 10px;
  823. border: 1px solid #ddd; }
  824. .work-diy .diy-editor .tpl-form-line-form {
  825. font-size: 1.3rem !important;
  826. color: #656565; }
  827. .work-diy .diy-editor .tpl-form-line-form .am-form-group {
  828. margin: 1rem 0; }
  829. .work-diy .diy-editor .tpl-form-line-form .am-form-label {
  830. padding-top: 0;
  831. line-height: 28px;
  832. font-size: 1.3rem; }
  833. .work-diy .diy-editor .tpl-form-line-form .am-radio-inline, .work-diy .diy-editor .tpl-form-line-form .am-checkbox-inline {
  834. padding-top: 0;
  835. font-size: 1.3rem;
  836. line-height: 28px;
  837. margin: 0 10px 0 0; }
  838. .work-diy .diy-editor .tpl-form-line-form .am-radio-inline .am-ucheck-icons, .work-diy .diy-editor .tpl-form-line-form .am-checkbox-inline .am-ucheck-icons {
  839. line-height: 28px; }
  840. .work-diy .diy-editor .tpl-form-line-form input[type=text] {
  841. line-height: 28px;
  842. font-size: 1.3rem;
  843. padding: 0 5px;
  844. color: #656565; }
  845. .work-diy .diy-editor .tpl-form-line-form input[type=color] {
  846. display: inline-block;
  847. -webkit-appearance: square-button;
  848. width: 65px;
  849. height: 26px;
  850. background-color: #ffffff;
  851. border: 1px solid #efefef;
  852. padding: 0 4px;
  853. margin: 1px 0;
  854. cursor: pointer; }
  855. .work-diy .diy-editor .data-image {
  856. display: inline-block;
  857. width: auto;
  858. min-width: 40px;
  859. max-width: 220px;
  860. text-align: center;
  861. cursor: pointer; }
  862. .work-diy .diy-editor .data-image img {
  863. display: block;
  864. max-width: 100%;
  865. height: 50px; }
  866. .work-diy .diy-editor .editor-title {
  867. position: relative;
  868. padding: 0 22px;
  869. height: 34px;
  870. border-bottom: 1px solid #eef1f5;
  871. margin-bottom: 20px; }
  872. .work-diy .diy-editor .editor-title::before {
  873. content: '';
  874. position: absolute;
  875. width: 4px;
  876. height: 13px;
  877. background: #00aeff;
  878. top: 8px;
  879. left: 9px; }
  880. .work-diy .diy-editor .editor-title span {
  881. font-size: 1.3rem; }
  882. .work-diy .diy-editor .editor-centent {
  883. padding: 0 22px;
  884. font-size: 13px; }
  885. .work-diy .diy-editor .editor-centent p {
  886. line-height: 24px; }
  887. .work-diy .diy-editor .form-items {
  888. height: auto;
  889. padding: 5px 6px; }
  890. .work-diy .diy-editor .form-items .form-item {
  891. background: #f7fafc;
  892. margin-bottom: .6rem;
  893. position: relative;
  894. border-radius: 3px;
  895. cursor: move; }
  896. .work-diy .diy-editor .form-items .form-item input {
  897. background: #f7fafc; }
  898. .work-diy .diy-editor .form-items .form-item .item-delete {
  899. position: absolute;
  900. top: -6px;
  901. right: -6px;
  902. height: 16px;
  903. width: 16px;
  904. line-height: 16px;
  905. background: rgba(153, 153, 153, 0.7);
  906. color: #fff;
  907. border-radius: 50%;
  908. text-align: center;
  909. cursor: pointer;
  910. font-size: 12px;
  911. -webkit-transition: background-color .3s ease-out, border-color .3s ease-out;
  912. transition: background-color .3s ease-out, border-color .3s ease-out; }
  913. .work-diy .diy-editor .form-items .form-item .item-delete:hover {
  914. background: #000; }
  915. .work-diy .diy-editor .form-items .form-item .item-inner {
  916. padding: 10px;
  917. background: #f7fafc; }
  918. .work-diy .diy-editor .form-items .form-item .item-inner .help-block {
  919. margin-top: 10px; }
  920. .work-diy .diy-editor .form-items.__goods .form-item {
  921. float: left;
  922. margin: 10px;
  923. height: 70px;
  924. width: 70px; }
  925. .work-diy .diy-editor .form-items.__goods .data-image {
  926. cursor: unset; }
  927. .work-diy .diy-editor .form-item-add {
  928. width: 100%;
  929. background: #fdfdfd;
  930. color: #6b6b6b;
  931. border: 1px solid #efefef;
  932. outline: none;
  933. padding: 10px 16px;
  934. border-radius: 2px;
  935. font-size: 12px;
  936. line-height: 1;
  937. text-align: center;
  938. vertical-align: middle;
  939. cursor: pointer;
  940. user-select: none;
  941. -webkit-transition: All 0.2s ease-in-out;
  942. -moz-transition: All 0.2s ease-in-out;
  943. -o-transition: All 0.2s ease-in-out;
  944. transition: All 0.2s ease-in-out; }
  945. .work-diy .diy-editor .form-item-add:hover {
  946. background: #f9f9f9; }
  947. /*# sourceMappingURL=diy.css.map */