WordEditor.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <template>
  2. <div>
  3. <el-container>
  4. <el-main style="padding: 0;margin-top: 20px">
  5. <!-- 主要列表-->
  6. <el-row>
  7. <el-col :span="18" offset="3">
  8. <el-row>
  9. <el-col v-for="item in news_list" :key="item" >
  10. <el-row class="word_item" style="margin-bottom: 20px">
  11. <el-col :span="8">
  12. <div>
  13. <span class="type_flag" v-for="type in wordType" v-if="type.dictValue==item.newsInfoType">
  14. {{type.dictLabel}}
  15. </span>
  16. </div>
  17. <el-image
  18. style="width: 100%; height: 300px"
  19. lazy
  20. v-if="item.newsInfoUrl "
  21. :src="item.newsInfoUrl "
  22. ></el-image>
  23. </el-col>
  24. <el-col class="word_info" :span="16">
  25. <div >
  26. <h4>
  27. <nuxt-link :to="{name:'info-id',params:{id:item.newsInfoId,title:item.newsInfoTitle}}">
  28. {{item.newsInfoTitle.length>25?item.newsInfoTitle.substr(1,25)+"...":item.newsInfoTitle}}
  29. </nuxt-link>
  30. <!-- <n-link style="text-decoration: none; font-size: 1.3rem;font-weight: 400;color: black" :to="{name:'info-id'}"> {{item.newsInfoTitle}}</n-link>-->
  31. </h4>
  32. <div v-html="item.newsInfoContent.replace(/<[^>]+>/g,'').length>100?item.newsInfoContent.replace(/<[^>]+>/g,'').substr(1,
  33. 100)+'...':item.newsInfoContent.replace(/<[^>]+>/g,'')">
  34. </div>
  35. <span class="info_span"><i class="el-icon-s-custom"></i>{{item.newsInfoAuthor}} 时间:{{item.newsInfoTime}}</span>
  36. </div>
  37. <div></div>
  38. </el-col>
  39. </el-row>
  40. </el-col>
  41. </el-row>
  42. </el-col>
  43. </el-row>
  44. <!-- 分页-->
  45. <el-row>
  46. <el-col :span="18" offset="3">
  47. <el-row>
  48. <el-col :span="18" offset="7">
  49. <pagination
  50. v-show="total>0"
  51. :total="total"
  52. :page.sync="queryParams.pageNum"
  53. :limit.sync="queryParams.pageSize"
  54. @pagination="getSearchList"
  55. />
  56. </el-col>
  57. </el-row>
  58. </el-col>
  59. </el-row>
  60. </el-main>
  61. </el-container>
  62. </div>
  63. </template>
  64. <script>
  65. import {dictList, newsList} from "../static/js";
  66. export default {
  67. name: "WordEditor",
  68. head(){
  69. return{
  70. title:"中关村公共资源论坛|"+ this.type_name
  71. }
  72. },
  73. data(){
  74. return{
  75. check_type:1,
  76. type_name:"编辑精选",
  77. value1: '',
  78. value2: '',
  79. queryParams: {
  80. pageNum: 1,
  81. pageSize: 10,
  82. title: null,
  83. type: null,
  84. author: null,
  85. releaseTime: null,
  86. word: null,
  87. coverUrl: null
  88. },
  89. news_list:null,
  90. total:0,
  91. wordType:null,
  92. timer_picker:null,
  93. s_type:null,
  94. s_key:null
  95. }
  96. },
  97. created() {
  98. this.getSearchList()
  99. this.getDictType()
  100. },
  101. methods:{
  102. getDictType(){
  103. dictList({"dictType":"sys_info_word_type"}).then(response=>{
  104. this.wordType=response.rows;
  105. })
  106. },
  107. getSearchList(){
  108. newsList({"newsInfoRecommend": 1,"pageNum":this.queryParams.pageNum,"pageSize":this.queryParams.pageSize}).then(response=>{
  109. this.news_list=response.rows;
  110. this.total=response.total;
  111. })
  112. }
  113. }
  114. }
  115. </script>
  116. <style scoped>
  117. .nav_tap{
  118. background-color: #f0f0f0;
  119. text-align: center;
  120. margin-bottom: 30px;
  121. }
  122. .nav_tap span{
  123. background-color: #b11116;
  124. -webkit-text-size-adjust: 100%;
  125. letter-spacing: 1px;
  126. text-rendering: optimizeLegibility;
  127. font-family: "PingFang SC", "Microsoft YaHei", "STHeiti", "sans-serif";
  128. line-height: 38px;
  129. font-size: 22px;
  130. box-sizing: border-box;
  131. background-size: contain;
  132. background-position: center;
  133. background-repeat: no-repeat;
  134. vertical-align: middle;
  135. text-align: center;
  136. cursor: pointer;
  137. border-radius: 6px;
  138. padding: 0 20px;
  139. color: white;
  140. }
  141. .type_flag{
  142. position: absolute;
  143. z-index: 2;
  144. padding: 7px;
  145. margin: 10px;
  146. color: white;
  147. background-color: rgba(0,0,0,0.5);
  148. border-radius: 20px;
  149. }
  150. .word_item{
  151. background-color: #f0f0f0;
  152. }
  153. .word_info{
  154. padding: 0 20px;
  155. }
  156. .info_span{
  157. position: absolute;
  158. bottom: 10px;
  159. }
  160. </style>
  161. <style>
  162. /*带背景的分页按钮背景色begin*/
  163. .el-pagination.is-background .el-pager li:not(.disabled).active {
  164. background-color: #b11116;
  165. color: #FFF;
  166. }
  167. .el-pagination.is-background .el-pager li.active {
  168. color: #fff;
  169. cursor: default;
  170. }
  171. .el-pagination.is-background .el-pager li:hover {
  172. color: #b11116;
  173. }
  174. .el-pagination.is-background .el-pager li:not(.disabled):hover {
  175. color: #b11116;
  176. }
  177. .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  178. background-color: #b11116;
  179. color: #FFF;
  180. }
  181. /*带背景的分页按钮背景色end*/
  182. /*不带背景的分页按钮背景色begin*/
  183. .el-pager li.active {
  184. color: #b11116;
  185. cursor: default;
  186. }
  187. .el-pagination .el-pager li:hover {
  188. color: #b11116;
  189. }
  190. .el-pagination .el-pager li:not(.disabled):hover {
  191. color: #b11116;
  192. }
  193. /*不带背景的分页按钮背景色end*/
  194. </style>