123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- <template>
- <div class="basic-inner">
- <div class="info-outer">
- <div class="info">底层接入系统</div>
- </div>
- <div class="center">
- <el-upload action="#" list-type="picture-card" :auto-upload="false">
- <i slot="default" class="el-icon-plus"></i>
- <div slot="file" slot-scope="{ file }">
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
- <span class="el-upload-list__item-actions">
- <span
- class="el-upload-list__item-preview"
- @click="handlePictureCardPreview(file)"
- >
- <i class="el-icon-zoom-in"></i>
- </span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleDownload(file)"
- >
- <i class="el-icon-download"></i>
- </span>
- <span
- v-if="!disabled"
- class="el-upload-list__item-delete"
- @click="handleRemove(file)"
- >
- <i class="el-icon-delete"></i>
- </span>
- </span>
- </div>
- </el-upload>
- <el-dialog :visible.sync="dialogVisible">
- <img width="100%" :src="dialogImageUrl" alt="" />
- </el-dialog>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- dialogImageUrl: "",
- dialogVisible: false,
- disabled: false,
- };
- },
- methods: {
- handleRemove(file) {
- console.log(file);
- },
- handlePictureCardPreview(file) {
- this.dialogImageUrl = file.url;
- this.dialogVisible = true;
- },
- handleDownload(file) {
- console.log(file);
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .basic-inner {
- width: 100%;
- height: 100%;
- .info-outer {
- width: 95%;
- margin: 0 auto;
- height: 80px;
- .info {
- font-size: 20px;
- width: 200px;
- height: 80px;
- display: flex;
- align-items: center;
- }
- }
- .center {
- width: 98%;
- margin: 0 auto;
- height: calc(100% - 80px);
- /deep/.el-upload--picture-card {
- width: 300px;
- height: 200px;
- border: 1px solid #c0ccda;
- // margin-right: 1000px;
- // margin-top: 20px;
- }
- /deep/.el-upload--picture-card i {
- display: flex;
- padding-right: 20px;
- font-size: 50px;
- padding: 75px 120px;
- }
- }
- }
- </style>
|