accessedSystem.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div class="basic-inner">
  3. <div class="info-outer">
  4. <div class="info">底层接入系统</div>
  5. </div>
  6. <div class="center">
  7. <el-upload action="#" list-type="picture-card" :auto-upload="false">
  8. <i slot="default" class="el-icon-plus"></i>
  9. <div slot="file" slot-scope="{ file }">
  10. <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
  11. <span class="el-upload-list__item-actions">
  12. <span
  13. class="el-upload-list__item-preview"
  14. @click="handlePictureCardPreview(file)"
  15. >
  16. <i class="el-icon-zoom-in"></i>
  17. </span>
  18. <span
  19. v-if="!disabled"
  20. class="el-upload-list__item-delete"
  21. @click="handleDownload(file)"
  22. >
  23. <i class="el-icon-download"></i>
  24. </span>
  25. <span
  26. v-if="!disabled"
  27. class="el-upload-list__item-delete"
  28. @click="handleRemove(file)"
  29. >
  30. <i class="el-icon-delete"></i>
  31. </span>
  32. </span>
  33. </div>
  34. </el-upload>
  35. <el-dialog :visible.sync="dialogVisible">
  36. <img width="100%" :src="dialogImageUrl" alt="" />
  37. </el-dialog>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. dialogImageUrl: "",
  46. dialogVisible: false,
  47. disabled: false,
  48. };
  49. },
  50. methods: {
  51. handleRemove(file) {
  52. console.log(file);
  53. },
  54. handlePictureCardPreview(file) {
  55. this.dialogImageUrl = file.url;
  56. this.dialogVisible = true;
  57. },
  58. handleDownload(file) {
  59. console.log(file);
  60. },
  61. },
  62. };
  63. </script>
  64. <style lang="less" scoped>
  65. .basic-inner {
  66. width: 100%;
  67. height: 100%;
  68. .info-outer {
  69. width: 95%;
  70. margin: 0 auto;
  71. height: 80px;
  72. .info {
  73. font-size: 20px;
  74. width: 200px;
  75. height: 80px;
  76. display: flex;
  77. align-items: center;
  78. }
  79. }
  80. .center {
  81. width: 98%;
  82. margin: 0 auto;
  83. height: calc(100% - 80px);
  84. /deep/.el-upload--picture-card {
  85. width: 300px;
  86. height: 200px;
  87. border: 1px solid #c0ccda;
  88. // margin-right: 1000px;
  89. // margin-top: 20px;
  90. }
  91. /deep/.el-upload--picture-card i {
  92. display: flex;
  93. padding-right: 20px;
  94. font-size: 50px;
  95. padding: 75px 120px;
  96. }
  97. }
  98. }
  99. </style>