detail1.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <div style="background: #f0f0f0;padding-bottom:50px">
  3. <div class="banner">
  4. <img src="~@/assets/images/yqtz.jpg" alt="">
  5. </div>
  6. <div class="bread">
  7. <div>
  8. <span>当前位置:首页-园区通知-通知详情</span>
  9. </div>
  10. </div>
  11. <div class="smart-device">
  12. <div class="smart-title">
  13. <span v-if="detail.active==1" style="font-size: 0.7rem;"><span>园区通知</span>PARK NOTICE</span>
  14. <span v-else style="font-size: 0.7rem;"><span>物业通知</span>PROPERTY NOTICE</span>
  15. </div>
  16. <div class="smart-device-content">
  17. <div class="titles">
  18. <h3>{{ detail.name }}</h3>
  19. </div>
  20. <div class="list-content" v-html="detail.detail" />
  21. <div v-for="(item,index) in file" :key="index" style="color: orangered;cursor: pointer" @click="downLoad(item)">
  22. {{ item.name }}
  23. </div>
  24. <!-- <div v-else class="list-content">-->
  25. <!-- <div>{{ detail.detail }}</div>-->
  26. <!-- </div>-->
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. active: 1,
  36. file: '',
  37. zsList: [
  38. {
  39. img: 'zs1.png',
  40. name: '专项扶持政策',
  41. eventIndex: 1,
  42. detail: ''
  43. },
  44. {
  45. img: 'zs2.png',
  46. name: '税收优惠',
  47. eventIndex: 2,
  48. detail: ''
  49. },
  50. {
  51. img: 'zs3.png',
  52. name: '奖励措施',
  53. eventIndex: 3,
  54. detail: ''
  55. }
  56. ],
  57. detail: {}
  58. }
  59. },
  60. mounted() {
  61. document.documentElement.scrollTop = document.body.scrollTop = 0 // 回到顶部
  62. this.detail = this.$route.query
  63. this.getFile()
  64. },
  65. methods: {
  66. getFile() {
  67. this.file = JSON.parse(this.$route.query.noticeFileId)
  68. console.log('file', this.file)
  69. },
  70. detail1(index) {
  71. switch (index) {
  72. case 1:
  73. this.$router.push({ path: '/zhaoshang/detail1' })
  74. break
  75. }
  76. },
  77. downLoad(item) {
  78. window.location.href = item.url
  79. }
  80. }
  81. }
  82. </script>
  83. <style scoped>
  84. .banner img{
  85. width: 100% !important;
  86. }
  87. @media screen and (min-width: 1000px){
  88. .bread{
  89. background: #fff;
  90. }
  91. .bread div{
  92. width: 1200px;
  93. margin: 0 auto;
  94. text-align: left;
  95. padding: 0.8rem 0;
  96. font-size: 1rem;
  97. }
  98. .smart-title{
  99. margin-top:3rem;
  100. }
  101. .smart-device{
  102. width: 1200px;
  103. margin: 0 auto;
  104. text-align: left;
  105. font-size: 1rem;
  106. }
  107. .smart-device span span{
  108. font-size: 2rem;
  109. display: inline-block;
  110. position: relative;
  111. padding-right: 1rem;
  112. margin-right: 1rem;
  113. font-weight: 900;
  114. }
  115. .smart-device span span:after{
  116. content: '';
  117. width: 1px;
  118. height: 15px;
  119. background: #666;
  120. position: absolute;
  121. right: 0;
  122. bottom: 7px;
  123. }
  124. .device-title img{
  125. width: 80%;
  126. }
  127. .nav-list{
  128. display: flex;
  129. justify-content: center;
  130. flex-wrap: nowrap;
  131. margin: 2rem auto;
  132. width: 50%;
  133. }
  134. .nav-list li{
  135. min-width: 33.33%;
  136. max-width: 33.33%;
  137. text-align: center;
  138. color: #666;
  139. font-size: 0.8rem;
  140. cursor: pointer;
  141. }
  142. .nav-list li span{
  143. border-bottom: 2px solid #f0f0f0;
  144. padding-bottom: 0.8rem;
  145. }
  146. .active span{
  147. display: inline-block;
  148. border-bottom: 2px solid #FF6A00!important;
  149. color: #333;
  150. }
  151. }
  152. @media screen and (max-width: 1000px){
  153. .banner{
  154. display: none;
  155. }
  156. .bread{
  157. display: none;
  158. }
  159. .smart-title{
  160. margin-top:2rem;
  161. }
  162. .smart-device{
  163. width: 90%;
  164. margin: 0 auto;
  165. text-align: left;
  166. font-size: 1rem;
  167. overflow: hidden;
  168. }
  169. .smart-device span span{
  170. font-size: 1.5rem;
  171. display: inline-block;
  172. position: relative;
  173. padding-right: 1rem;
  174. margin-right: 1rem;
  175. font-weight: 900;
  176. }
  177. .smart-device span span:after{
  178. content: '';
  179. width: 1px;
  180. height: 15px;
  181. background: #666;
  182. position: absolute;
  183. right: 0;
  184. bottom: 7px;
  185. }
  186. .device-title img{
  187. width: 100%;
  188. }
  189. .nav-list{
  190. display: flex;
  191. justify-content: center;
  192. flex-wrap: nowrap;
  193. margin: 2rem;
  194. }
  195. .nav-list li{
  196. min-width: 33.33%;
  197. max-width: 33.33%;
  198. text-align: center;
  199. color: #666;
  200. font-size: 0.8rem;
  201. cursor: pointer;
  202. }
  203. .nav-list li span{
  204. border-bottom: 2px solid #f0f0f0;
  205. padding-bottom: 0.8rem;
  206. }
  207. .active span{
  208. display: inline-block;
  209. border-bottom: 2px solid #FF6A00!important;
  210. color: #333;
  211. font-weight:800!important;
  212. }
  213. }
  214. .titles{
  215. text-align: center;
  216. margin: 2rem 0;
  217. }
  218. .list-content{
  219. min-height: 10rem;
  220. }
  221. </style>