notice.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <div id="notice">
  3. <el-row>
  4. <el-col :span="24">
  5. <el-col :span="24" class="top">
  6. <el-col :span="24" class="english">{{noticeinfo.english}}</el-col>
  7. <el-col :span="24" class="title">{{noticeinfo.title}}</el-col>
  8. </el-col>
  9. <el-col :span="24" class="info">
  10. <el-col :span="24" class="infoBei">
  11. <span>{{title}}</span>
  12. </el-col>
  13. <el-col :span="24" class="infolist">
  14. <el-col :span="24" class="button">
  15. <el-button class="icon" style="margin: 0 43px 0 0;"><i class="el-icon-arrow-left"></i></el-button>
  16. <el-button class="icon" style="margin: 0 10px;"><i class="el-icon-arrow-right"></i></el-button>
  17. </el-col>
  18. <el-col :span="24" class="noticelist">
  19. <el-col :span="8" class="content" v-for="(item, index) in noticelist" :key="index">
  20. <el-link :underline="false">
  21. <el-col :span="24" class="image">
  22. <el-image style="width:100%;height:226px;" :src="item.url"></el-image>
  23. </el-col>
  24. <el-col :span="24" class="title">
  25. <p>{{item.title}}</p>
  26. </el-col>
  27. <el-col :span="24" class="text">
  28. <p>{{item.text}}</p>
  29. </el-col>
  30. <el-col :span="24" class="time">
  31. {{item.time}}
  32. </el-col>
  33. </el-link>
  34. </el-col>
  35. </el-col>
  36. </el-col>
  37. </el-col>
  38. </el-col>
  39. </el-row>
  40. </div>
  41. </template>
  42. <script>
  43. export default {
  44. name: 'notice',
  45. props: {
  46. noticeinfo: null,
  47. noticelist: null,
  48. },
  49. components: {},
  50. data: () => ({
  51. title: '最新公告',
  52. }),
  53. created() { },
  54. computed: {},
  55. methods: {},
  56. };
  57. </script>
  58. <style lang="less" scoped>
  59. p {
  60. margin: 0;
  61. padding: 0;
  62. }
  63. .top {
  64. height: 100px;
  65. text-align: center;
  66. margin-bottom: 42px;
  67. }
  68. .top .english {
  69. text-transform: uppercase;
  70. color: #5b5e66;
  71. font-family: 微软雅黑;
  72. font-size: 42px;
  73. }
  74. .top .title {
  75. color: #415285;
  76. font-size: 36px;
  77. font-family: 微软雅黑;
  78. }
  79. .info {
  80. height: 513px;
  81. }
  82. .info .infoBei {
  83. width: 294px;
  84. height: 512px;
  85. background-color: #415285;
  86. }
  87. .info .infoBei span {
  88. margin: 52px 0 0 69px;
  89. display: inline-block;
  90. font-size: 22px;
  91. font-family: 微软雅黑;
  92. color: #fff;
  93. }
  94. .infolist {
  95. width: 1130px;
  96. height: 470px;
  97. position: absolute;
  98. top: 166px;
  99. left: 72px;
  100. }
  101. .button {
  102. text-align: right;
  103. height: 40px;
  104. margin-bottom: 30px;
  105. }
  106. .button .icon {
  107. width: 40px;
  108. height: 40px;
  109. line-height: 40px;
  110. text-align: center;
  111. padding: 0;
  112. border-radius: 90px;
  113. border: 2px solid #ccc;
  114. }
  115. .button .icon .el-icon-arrow-left {
  116. font-size: 20px;
  117. font-weight: bold;
  118. color: #ccc;
  119. }
  120. .button .icon .el-icon-arrow-right {
  121. font-size: 20px;
  122. font-weight: bold;
  123. color: #ccc;
  124. }
  125. .noticelist {
  126. height: 400px;
  127. background: #fff;
  128. }
  129. .content {
  130. width: 346px;
  131. height: 400px;
  132. margin-right: 45px;
  133. box-shadow: 0 0 5px #ccc;
  134. }
  135. .content:last-child{
  136. margin-right:0;
  137. }
  138. .content .image {
  139. width: 346px;
  140. height: 226px;
  141. margin-bottom: 15px;
  142. }
  143. .content .title p {
  144. font-size: 24px;
  145. color: #5b5e66;
  146. font-family: 微软雅黑;
  147. margin-bottom: 12px;
  148. padding: 0 24px;
  149. overflow: hidden;
  150. text-overflow: ellipsis;
  151. -webkit-line-clamp: 2;
  152. word-break: break-all;
  153. display: -webkit-box;
  154. -webkit-box-orient: vertical;
  155. }
  156. .content .text p {
  157. font-size: 12px;
  158. color: #999999;
  159. font-family: 宋体;
  160. margin-bottom: 12px;
  161. padding: 0 24px;
  162. overflow: hidden;
  163. text-overflow: ellipsis;
  164. -webkit-line-clamp: 3;
  165. word-break: break-all;
  166. display: -webkit-box;
  167. -webkit-box-orient: vertical;
  168. }
  169. .content .time {
  170. font-size: 18px;
  171. color: #999999;
  172. font-family: 宋体;
  173. text-align: right;
  174. padding: 0 24px;
  175. }
  176. </style>