special.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /*手机端首页及专题页面编辑操作*/
  2. .mb-special-layout { font-size: 0; background: #EFFAFE url("../image/cms_edit_bg_line.png") repeat-y scroll -50px 0; *word-spacing:-1px/*IE6、7*/; padding-top: 20px; border-top: solid 1px #deeffb;}
  3. .mb-special-layout .mb-item-box,
  4. .mb-special-layout .module-list { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; *zoom:1/*IE7*/;}
  5. .mb-special-layout .mb-item-box { background: url(../image/mpat.png) no-repeat 0 0; width: 400px; height: 670px; margin: 0 50px 0 30px; }
  6. .mb-special-layout .item-list { width: 350px; height: 540px; margin: 51px 26px 79px 24px; overflow-x: hidden; overflow-y: scroll;}
  7. .mb-item-box .special-item { width: 320px; min-height: 60px; padding: 4px; border: dashed 1px #CCC; margin: 2px 2px 0 2px; position: relative; z-index: 1;}
  8. .mb-item-box .special-item:hover { background-color: #F3FBFE; border: solid 1px #19AEDE;}
  9. .mb-item-box .unusable { filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opacity:0.5; /*Firefox私有,透明度50%*/ opacity:0.5;/*其他,透明度50%*/}
  10. .mb-item-box .usable { filter:alpha(opacity=100); /*IE滤镜,透明度100%*/ -moz-opacity:1; /*Firefox私有,透明度100%*/ opacity:1;/*其他,透明度100%*/}
  11. .mb-item-box .special-item .item_type,
  12. .mb-item-box .special-item .handle { display: none; width: 312px; height: 20px; padding: 4px; position: absolute; z-index: 1; top: 4px; left: 4px;}
  13. .mb-item-box .special-item .item_type { color: #555; background-color: #EEE; display: block;}
  14. .mb-item-box .special-item .handle { text-align: right; top: auto; bottom: 4px;}
  15. .mb-item-box .special-item .handle a { color: #FFF; margin-right: 12px;}
  16. .mb-item-box .special-item .handle a i { font-size: 14px; margin-right: 2px;}
  17. .mb-item-box .special-item:hover .item_type,
  18. .mb-item-box .special-item:hover .handle { color: #FFF; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#D854C1EB', endColorstr='#D854C1EB');background:rgba(84,193,235,0.85); display: block;}
  19. .mb-item-box .item { line-height: 0; background-color: #FFF; text-align: center; vertical-align: middle; display: table-cell; *display: block; overflow: hidden;}
  20. /* 广告条版块、模型版块布局A-显示 */
  21. .mb-item-box .adv_list .item,
  22. .mb-item-box .home1 .item { width: 320px; height: 133px;}
  23. .mb-item-box .home1 img,
  24. .mb-item-box .adv_list img { max-width: 320px; max-height: 133px;}
  25. /* 模型版块布局B、D-显示 */
  26. .mb-item-box .home2 .content { font-size: 0; *word-spacing:-1px/*IE6、7*/; width: 320px;}
  27. .mb-item-box .home2 .content .home2_1,
  28. .mb-item-box .home2 .content .home2_2 { vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 160px; height: 174px; *zoom:1/*IE7*/;}
  29. .mb-item-box .home2 .content .home2_1 .item { width: 160px; height: 174px;}
  30. .mb-item-box .home2 .content .home2_1 img { max-width: 160px; max-height: 174px;}
  31. .mb-item-box .home2 .content .home2_2_1,
  32. .mb-item-box .home2 .content .home2_2_2 { display: block; height: 87px;}
  33. .mb-item-box .home2 .content .home2_2_1 .item,
  34. .mb-item-box .home2 .content .home2_2_2 .item { width: 160px; height: 87px;}
  35. .mb-item-box .home2 .content .home2_2_1 img,
  36. .mb-item-box .home2 .content .home2_2_2 img { max-width: 160px; max-height: 87px;}
  37. /* 模型版块布局C-显示 */
  38. .mb-item-box .home3 .content { font-size: 0; *word-spacing:-1px/*IE6、7*/; width: 320px;}
  39. .mb-item-box .home3 .item { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 160px; *zoom:1/*IE7*/;}
  40. .mb-item-box .home3 img { max-width: 160px;}
  41. /* 商品块模型-编辑*/
  42. .mb-item-box .goods-list { font-size: 0; *word-spacing:-1px/*IE6、7*/; width: 320px;}
  43. .mb-item-box .goods-list .item { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 145px; margin: 0 0 8px 8px; border: solid 1px #DDD; *zoom:1/*IE7*/;}
  44. .mb-item-box .goods-list .goods-pic { line-height: 0; background-color: #FFF; text-align: center; vertical-align: middle; display: table-cell; *display: block; width: 145px; height: 145px; overflow: hidden;}
  45. .mb-item-box .goods-list .goods-pic img { max-width: 145px; max-height: 145px; margin-top:expression(145-this.height/2);}
  46. .mb-item-box .goods-list .goods-name { line-height: 18px; color: #555; display: block; height: 36px; margin: 5px 5px 0 5px; border-bottom: dotted 1px #DDD; overflow: hidden;}
  47. .mb-item-box .goods-list .goods-price { font-size: 14px; line-height: 20px; color: #F30; text-align: left; display: block; height: 20px; padding: 5px;}
  48. .mb-special-layout .module-list { margin: 20px auto 0 50px;}
  49. .mb-special-layout .module-list div { background: url(../image/mpat.png) no-repeat; display: block; width: 304px; margin: 0 0 12px 0; position: relative; z-index: 1; filter:alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opacity:0.5; /*Firefox私有,透明度50%*/ opacity:0.5;/*其他,透明度50%*/}
  50. .mb-special-layout .module-list div:hover { filter:alpha(opacity=100); /*IE滤镜,透明度100%*/ -moz-opacity:1; /*Firefox私有,透明度100%*/ opacity:1;/*其他,透明度100%*/}
  51. .mb-special-layout .module-list a.add { color: #FFF; width: 24px; height: 40px; padding: 5px 6px; position: absolute; z-index: 1; top: 0; right: 0; }
  52. .mb-special-layout .module-list span { font: 600 14px/20px "microsoft yahei"; color: #FFF; text-align: center; width: 45px; position: absolute; z-index: 1; top: 5px; left: 5px;}
  53. .mb-special-layout .module-list .module_adv_list { background-position: -440px 0; height: 98px;}
  54. .mb-special-layout .module-list .module_home1 { background-position: -440px -100px; height: 98px;}
  55. .mb-special-layout .module-list .module_home2 { background-position: -440px -200px; height: 115px;}
  56. .mb-special-layout .module-list .module_home3 { background-position: -440px -320px; height: 102px;}
  57. .mb-special-layout .module-list .module_home4 { background-position: -440px -430px; height: 115px;}
  58. .mb-special-layout .module-list .module_goods { background-position: -440px -550px; height: 228px;}
  59. .mb-item-edit-content { vertical-align: top;}
  60. .mb-item-edit-content h3 { font: 700 14px/20px "microsoft yahei"; color: #333;}
  61. .mb-item-edit-content .title,
  62. .mb-item-edit-content .content { margin-bottom: 15px;}
  63. .mb-item-edit-content .title h5,
  64. .mb-item-edit-content .content h5,
  65. .mb-item-edit-content .search-goods h5 { font: 700 12px/20px "microsoft yahei"; color: #777; display: block; margin: 0 0 10px 0;}
  66. .mb-item-edit-content .item { background-color: #FFF; text-align: center; padding: 4px; border: dashed 1px #DDD; position: relative; z-index: 1;}
  67. .mb-item-edit-content .item:hover { border: solid 1px #19AEDE; box-shadow: 0 0 6px rgba(0,0,0,0.25);}
  68. .mb-item-edit-content .item a { color: #FFF; background-color: #19AEDE; display: none; padding: 4px 8px; position: absolute; z-index: 1; top: 4px; right: 4px; cursor: pointer;}
  69. .mb-item-edit-content .item a i { font-size: 14px; margin-right: 4px;}
  70. .mb-item-edit-content .item:hover a { display: block;}
  71. .mb-item-edit-content .btn-add { font-size: 12px; margin: 10px;}
  72. /* 广告条编辑、块模型布局A-编辑 */
  73. .mb-item-edit-content .adv_list,
  74. .mb-item-edit-content .home1 { width: 490px;}
  75. .mb-item-edit-content .adv_list item,
  76. .mb-item-edit-content .home1 item { width: 480px; height: 200px;}
  77. .mb-item-edit-content .adv_list img,
  78. .mb-item-edit-content .home1 img { max-width: 480px; max-height: 200px;}
  79. /* 块模型布局B、D-编辑 */
  80. .mb-item-edit-content .home2 { font-size: 0; *word-spacing:-1px/*IE6、7*/; width: 500px;}
  81. .mb-item-edit-content .home2_1,
  82. .mb-item-edit-content .home2_2 { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 250px; height: 270px; *zoom:1/*IE7*/;}
  83. .mb-item-edit-content .home2_1 .item { width: 240px; height: 260px;}
  84. .mb-item-edit-content .home2_1 img { max-width: 240px; max-height: 260px;}
  85. .mb-item-edit-content .home2_2_1,
  86. .mb-item-edit-content .home2_2_2 { display: block; height: 135px;}
  87. .mb-item-edit-content .home2_2_1 .item,
  88. .mb-item-edit-content .home2_2_2 .item { width: 240px; height: 125px;}
  89. .mb-item-edit-content .home2_2_1 img,
  90. .mb-item-edit-content .home2_2_2 img { max-width: 240px; max-height: 125px;}
  91. /* 块模型布局C-编辑 */
  92. .mb-item-edit-content .home3 { font-size: 0; *word-spacing:-1px/*IE6、7*/; width: 500px;}
  93. .mb-item-edit-content .home3 .item { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 240px; *zoom:1/*IE7*/;}
  94. .mb-item-edit-content .home3 img { max-width: 240px;}
  95. /* 商品块模型-编辑*/
  96. .mb-item-edit-content .goods-list { font-size: 0; *word-spacing: -1px/*IE6、7*/; display: inline-block; width: 500px;}
  97. .mb-item-edit-content .goods-list .item { font-size: 12px; vertical-align: top; letter-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 220px; margin: 0 0 14px 14px; *zoom:1/*IE7*/;}
  98. .mb-item-edit-content .goods-list .goods-pic { line-height: 0; background-color: #FFF; text-align: center; vertical-align: middle; display: table-cell; *display: block; width: 220px; height: 220px; overflow: hidden;}
  99. .mb-item-edit-content .goods-list .goods-pic img { max-width: 220px; max-height: 220px; margin-top:expression(220-this.height/2);}
  100. .mb-item-edit-content .goods-list .goods-name { line-height: 18px; color: #555; white-space: normal; height: 36px; padding: 5px 5px 10px 5px; border-bottom: dotted 1px #CCC; overflow: hidden;}
  101. .mb-item-edit-content .goods-list .goods-price { font-size: 16px; color: #F30; padding: 10px 5px 5px 5px;}
  102. .mb-item-edit-content .search-goods { vertical-align: top; display: inline-block; width: 400px; margin-left: 70px;}
  103. .mb-item-edit-content .search-goods-list { margin-top: 20px; }
  104. .mb-item-edit-content .search-goods-list li { background-color: #FFF; display: block; height: 60px; padding: 9px; margin-bottom: 10px; border: dashed 1px #BCE6F8; position: relative; z-index: 1;}
  105. .mb-item-edit-content .search-goods-list li:hover { border: solid 1px #54C1EB;}
  106. .mb-item-edit-content .search-goods-list .goods-pic { line-height: 0; background-color: #FFF; text-align: center; vertical-align: middle; display: table-cell; *display: block; width: 60px; height: 60px; overflow: hidden;}
  107. .mb-item-edit-content .search-goods-list .goods-pic img { max-width: 60px; max-height: 60px; margin-top:expression(60-this.height/2);}
  108. .mb-item-edit-content .search-goods-list .goods-name { line-height: 18px; color: #777; text-align: left; white-space: normal; width: 310px; height: 36px; float: right; clear: both;}
  109. .mb-item-edit-content .search-goods-list .goods-price { color: #F30; text-align: left; width: 310px; float: right; clear: both;}
  110. .mb-item-edit-content .search-goods-list a { background-color: #F9F9F9; padding: 4px 12px; border: solid 1px #CCC; border-radius: 4px; position: absolute; z-index: 1; bottom: 10px; right: 10px;}
  111. .dialog-image-desc { color: #999;}
  112. #dialog_item_image { max-width: 480px; max-height: 300px;}