index.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <template>
  2. <div class="commons-notice">
  3. <el-dialog
  4. title="系统公告"
  5. v-model="value"
  6. width="460px"
  7. :before-close="handleClose"
  8. >
  9. <div class="title">
  10. <!-- {{ data.length == 0 ? '暂无数据' : data[indexCopy].title}} -->
  11. </div>
  12. <div
  13. class="text-content"
  14. v-if="data.length > 0"
  15. style="margin-top: 10px"
  16. >
  17. {{ data[index].content }}
  18. </div>
  19. <template #footer>
  20. <span class="dialog-footer">
  21. <el-button
  22. size="small"
  23. @click="index--"
  24. :disabled="data.length < 2 || index == 0"
  25. >上一条</el-button
  26. >
  27. <el-button
  28. size="small"
  29. @click="index++"
  30. :disabled="data.length == index + 1"
  31. >下一条</el-button
  32. >
  33. <el-button
  34. type="primary"
  35. size="small"
  36. :disabled="data.length == 0"
  37. @click="confirm"
  38. >确认已读</el-button
  39. >
  40. <span class="more" @click="moreFn">查看更多 &gt;</span>
  41. </span>
  42. </template>
  43. </el-dialog>
  44. <div class="notice-table-warp" :class="noticeTableModal ? 'notice-table-warp-open' : ''" @click.stop="noticeTableModal = false">
  45. <div class="notice-table" @click.stop>
  46. <div class="tabs">
  47. <ul>
  48. <li style="padding-left: 0; border: none">
  49. 全部(99)
  50. </li>
  51. <li class="active">待办(99)</li>
  52. <li>通知(99)</li>
  53. </ul>
  54. <div class="more">查看更多&gt;</div>
  55. </div>
  56. <el-table :data="noticeData" style="width: 100%">
  57. <el-table-column prop="date" label="标题内容" width="250">
  58. </el-table-column>
  59. <el-table-column prop="name" label="类型" width="120">
  60. </el-table-column>
  61. <el-table-column prop="address" label="操作">
  62. <template #default="scope">
  63. <span style="cursor: pointer;">未读</span>
  64. </template>
  65. </el-table-column>
  66. </el-table>
  67. <div class="notice-btn-box" style="margin-top: 20px">
  68. <el-button plain>点击清空</el-button>
  69. <el-button type="primary">全部已读</el-button>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. </template>
  75. <script setup>
  76. import { ElMessageBox, ElNotification } from 'element-plus'
  77. let noticeTableModal = ref(false)
  78. let noticeData = ref([
  79. {
  80. date: '2016-05-02',
  81. name: '王小虎',
  82. address: '上海市普陀区金沙江路 1518 弄',
  83. },
  84. {
  85. date: '2016-05-04',
  86. name: '王小虎',
  87. address: '上海市普陀区金沙江路 1517 弄',
  88. },
  89. {
  90. date: '2016-05-01',
  91. name: '王小虎',
  92. address: '上海市普陀区金沙江路 1519 弄',
  93. },
  94. {
  95. date: '2016-05-03',
  96. name: '王小虎',
  97. address: '上海市普陀区金沙江路 1516 弄',
  98. },
  99. ])
  100. const index = ref(1)
  101. const data = ref([
  102. { title: '11', content: '11' },
  103. { title: '22', content: '22' },
  104. { title: '33', content: '33' },
  105. { title: '44', content: '44' },
  106. ])
  107. const value = ref(false)
  108. const moreFn = () => {
  109. noticeTableModal.value = true
  110. }
  111. const confirm = () => {
  112. value.value = false
  113. }
  114. const handleClose = () => {
  115. value.value = false
  116. }
  117. const openBottomBar = (type) => {
  118. if (type == 1) {
  119. ElNotification({
  120. message: '您有一封新的邮件,请注意查收。',
  121. type: 'warning',
  122. position: 'bottom-right',
  123. })
  124. } else if (type == 2) {
  125. value.value = true
  126. } else {
  127. noticeTableModal.value = true
  128. }
  129. }
  130. </script>
  131. <style lang="scss">
  132. .notice-table-warp{
  133. position: fixed;
  134. right: 0;
  135. top: 0;
  136. width: 100%;
  137. height: 100%;
  138. z-index: 1000;
  139. background: rgba(0, 0, 0, 0.1);
  140. transition: all 0.3s ease-in-out;
  141. opacity: 0;
  142. display: none;
  143. }
  144. .notice-table-warp-open{
  145. opacity: 1;
  146. display: block;
  147. }
  148. .notice-table {
  149. position: fixed;
  150. right: 2px;
  151. top: 52px;
  152. padding: 0 20px 20px;
  153. width: 500px;
  154. background: #fff;
  155. box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
  156. z-index: 20;
  157. .notice-btn-box {
  158. text-align: right;
  159. }
  160. .tabs {
  161. display: flex;
  162. justify-content: space-between;
  163. height: 60px;
  164. line-height: 60px;
  165. font-size: 14px;
  166. font-weight: 400;
  167. ul {
  168. display: flex;
  169. margin: 23px 0;
  170. padding: 0;
  171. li {
  172. list-style: none;
  173. padding: 0 20px;
  174. cursor: pointer;
  175. height: 14px;
  176. line-height: 14px;
  177. border-left: 1px solid #dcdcdc;
  178. }
  179. .active {
  180. color: #0084ff;
  181. }
  182. }
  183. .more {
  184. color: #0084ff;
  185. cursor: pointer;
  186. }
  187. }
  188. }
  189. </style>
  190. <style>
  191. .commons-notice .el-table__row {
  192. height: 50px;
  193. }
  194. .commons-notice .el-dialog__footer {
  195. text-align: left !important;
  196. margin-top: 24px;
  197. }
  198. .commons-notice .more {
  199. color: #0084ff;
  200. float: right;
  201. cursor: pointer;
  202. }
  203. .commons-notice .el-dialog__header {
  204. background: #eeeeee;
  205. }
  206. .commons-notice .el-dialog__title {
  207. position: relative;
  208. padding-left: 30px;
  209. color: #333333;
  210. font-weight: bold;
  211. }
  212. .commons-notice .el-dialog__title::before {
  213. content: ' ';
  214. position: absolute;
  215. left: 0;
  216. top: 0;
  217. width: 20px;
  218. height: 20px;
  219. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAftJREFUOE+tlT9MU1EUxr9zWwgBI/D6Boh/EnbCRiImMhBCGqNhcnDQrbgRAyxGBgYICzXYDbrB4OBENIaY4GAMrmqc3DQxMrxWNGkH0Hv83m0ptvS1EHqTm/fuO+f+zjn3nHueoGYoIFju7kGXGeTrJOd1qlwqq30HdJdzCwX7GY9+7QsX/yO4Ph66gHb0+EkiUzAyRklnrcHyugirb4jKYj/YlgUcHOlVgJrxLkLMHJVSEOmLAFV/Vt2j8SzUrsh0/ncodEDnmec9BswsYV1Vu1RD6+842zmvUR6vkRcAm0Y+vxR6Ku7MVv3bMFir65nVT/gZDNNgBw1+oM7ACe9DTy0e4GHwQnS5uxedbRs8s1t1w1S7I9O5cRfJU/8j9Ybq6ll9ieLhfdFM7w1IfDsyAacFAkXonySB3gokNhuZhNMDGcLfNIGJXWZ3pDVA+z4EfiXwaouA384GzDApEpEUlzXrgI1Dhn7B4cEITOwCYob1aK40iCYMuVlS1BLAY0GMz8ssWxMNdElpVjaaJ+RZCaJ3GbIXASyXTdPC1udAcK8E8TcJvNO4sJtePfsa/bmbDvIj8QrGTDS8ei6QsDkk/Hl2mpm6zUH0bSliGaU8bBLHQ7XA832CXLDomsORxLUvgDfGTJ2pfcGuc1+6qn1VoK1ssBXoOX8B/wDYqv5bje949AAAAABJRU5ErkJggg==);
  220. }
  221. </style>