1.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <div>
  3. <div :class="'mainTopBg' + skinId"></div>
  4. <div :class="'mainBox' + skinId">
  5. <div class="mainTitle">{{newsDetail.con_title}} <em></em></div>
  6. <div v-html="newsDetail.content" class="mainContent"></div>
  7. </div>
  8. <div :class="'mainBottomBg' + skinId"></div>
  9. </div>
  10. </template>
  11. <script setup>
  12. const props = defineProps({
  13. newsDetail: Object,//新闻详情
  14. skinId: Number,//皮肤id
  15. });
  16. </script>
  17. <style lang="less" scoped>
  18. //基本样式 start ---------------------------------------->
  19. .mainBox1 {
  20. box-sizing: border-box;
  21. padding:27px 80px;
  22. min-height: 600px;
  23. .mainTitle {
  24. font-size: 26px;
  25. color:#333;
  26. height: 65px;
  27. font-weight: bold;
  28. text-align: center;
  29. border-bottom: 1px solid #D9D9D9;
  30. margin-bottom: 40px;
  31. }
  32. div {
  33. text-indent: 2em;
  34. font-size: 20px;
  35. line-height: 36px;
  36. color:#333;
  37. }
  38. background:url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754885628516.png') repeat-y;
  39. }
  40. .mainTopBg1 {
  41. width: 1200px;
  42. height: 7px;
  43. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754872561241.png') no-repeat;
  44. margin-top: 28px;
  45. }
  46. .mainBottomBg1 {
  47. width: 1200px;
  48. height: 7px;
  49. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250624/1750754893326585.png') no-repeat center center;
  50. }
  51. .mainContent {
  52. min-height: 600px;
  53. }
  54. //基本样式 end ---------------------------------------->
  55. //样式2 start ---------------------------------------->
  56. //样式2
  57. .mainBox2 {
  58. box-sizing: border-box;
  59. padding:27px 80px;
  60. .mainTitle {
  61. font-size: 26px;
  62. color:#333;
  63. height: 65px;
  64. font-weight: bold;
  65. text-align: center;
  66. border-bottom: 1px solid #D9D9D9;
  67. margin-bottom: 40px;
  68. }
  69. div {
  70. text-indent: 2em;
  71. font-size: 20px;
  72. line-height: 36px;
  73. color:#333;
  74. }
  75. background:url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239637376332.png') repeat-y;
  76. }
  77. .mainTopBg2 {
  78. width: 1200px;
  79. height: 7px;
  80. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239184498080.png') no-repeat;
  81. margin-top: 28px;
  82. }
  83. .mainBottomBg2 {
  84. width: 1200px;
  85. height: 7px;
  86. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239195441541.png') no-repeat center center;
  87. }
  88. //样式2 end ---------------------------------------->
  89. // 样式3 start ---------------------------------------->
  90. .mainBox3 {
  91. box-sizing: border-box;
  92. padding:27px 80px;
  93. min-height: 600px;
  94. .mainTitle {
  95. font-size: 26px;
  96. color:#333;
  97. height: 65px;
  98. font-weight: bold;
  99. text-align: center;
  100. border-bottom: 1px solid #D9D9D9;
  101. margin-bottom: 40px;
  102. }
  103. div {
  104. text-indent: 2em;
  105. font-size: 20px;
  106. line-height: 36px;
  107. color:#333;
  108. }
  109. background:url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239637376332.png') repeat-y;
  110. }
  111. .mainTopBg3 {
  112. width: 1200px;
  113. height: 7px;
  114. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239184498080.png') no-repeat;
  115. margin-top: 28px;
  116. }
  117. .mainBottomBg3 {
  118. width: 1200px;
  119. height: 7px;
  120. background: url('http://img.bjzxtw.org.cn/pre/image/png/20250723/1753239195441541.png') no-repeat center center;
  121. }
  122. // 样式3 end ---------------------------------------->
  123. // 样式4 start ---------------------------------------->
  124. .mainBox4 {
  125. box-sizing: border-box;
  126. padding:27px 80px;
  127. min-height: 600px;
  128. .mainTitle {
  129. font-size: 26px;
  130. color:#333;
  131. height: 65px;
  132. font-weight: bold;
  133. text-align: center;
  134. border-bottom: 1px solid #D9D9D9;
  135. margin-bottom: 40px;
  136. }
  137. div {
  138. text-indent: 2em;
  139. font-size: 20px;
  140. line-height: 36px;
  141. color:#333;
  142. }
  143. background:url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187890917568.png') repeat-y;
  144. }
  145. .mainTopBg4 {
  146. width: 1200px;
  147. height: 7px;
  148. background: url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187834157945.png') no-repeat;
  149. margin-top: 28px;
  150. }
  151. .mainBottomBg4 {
  152. width: 1200px;
  153. height: 7px;
  154. background: url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187876795714.png') no-repeat center center;
  155. }
  156. // 样式4 end ---------------------------------------->
  157. // 样式5 start ---------------------------------------->
  158. .mainBox5 {
  159. box-sizing: border-box;
  160. padding:27px 80px;
  161. min-height: 600px;
  162. .mainTitle {
  163. font-size: 26px;
  164. color:#333;
  165. height: 65px;
  166. font-weight: bold;
  167. text-align: center;
  168. border-bottom: 1px solid #D9D9D9;
  169. margin-bottom: 40px;
  170. }
  171. div {
  172. text-indent: 2em;
  173. font-size: 20px;
  174. line-height: 36px;
  175. color:#333;
  176. }
  177. background:url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187890917568.png') repeat-y;
  178. }
  179. .mainTopBg5 {
  180. width: 1200px;
  181. height: 7px;
  182. background: url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187834157945.png') no-repeat;
  183. margin-top: 28px;
  184. }
  185. .mainBottomBg5 {
  186. width: 1200px;
  187. height: 7px;
  188. background: url('https://img.bjzxtw.org.cn/pre/image/png/20251023/1761187876795714.png') no-repeat center center;
  189. }
  190. // 样式5 end ---------------------------------------->
  191. // 样式6 start ---------------------------------------->
  192. .mainBox6 {
  193. box-sizing: border-box;
  194. padding:27px 80px;
  195. min-height: 600px;
  196. .mainTitle {
  197. font-size: 26px;
  198. color:#065395;
  199. height: 65px;
  200. font-weight: bold;
  201. text-align: left;
  202. border-bottom: 4px solid #adc6dc;
  203. margin-bottom: 40px;
  204. text-indent: 0em;
  205. position: relative;
  206. em{
  207. display: inline-block;
  208. width: 120px;
  209. height: 6px;
  210. background: #065395;
  211. position: absolute;
  212. bottom: -5px;
  213. left: 0;
  214. }
  215. }
  216. div {
  217. text-indent: 2em;
  218. font-size: 20px;
  219. line-height: 36px;
  220. color:#333;
  221. }
  222. background:url('http://192.168.1.234:19000/pre/image/jpeg/20251219/1766110585239040.jpg') repeat-y;
  223. }
  224. .mainTopBg6 {
  225. width: 1200px;
  226. height: 7px;
  227. background: url('http://192.168.1.234:19000/pre/image/jpeg/20251219/1766110564995569.jpg') no-repeat;
  228. margin-top: 28px;
  229. }
  230. .mainBottomBg6 {
  231. width: 1200px;
  232. height: 7px;
  233. background: url('http://192.168.1.234:19000/pre/image/jpeg/20251219/1766110601110548.jpg') no-repeat center center;
  234. }
  235. // 样式6 end ---------------------------------------->
  236. </style>