设置-启动页

src/views/platform/config/launch_page.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="app-container">
+    <el-form>
+      <el-form-item label="启动页" class="title">
+        <upload-img @file:change="launch" :limit="1"></upload-img>
+      </el-form-item>
+      <el-form-item label="我要入驻" class="title">
+        <upload-img @file:change="join" :limit="1"></upload-img>
+      </el-form-item>
+    </el-form>
+    <div class="text-center">
+      <el-button type="primary">保存</el-button>
+      <el-button>重置</el-button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadImg from '@/views/platform/public/upload_img'
+
+export default {
+  name: 'launch_page',
+  components: { UploadImg },
+  data() {
+    return {
+      form: {
+        launchImg: undefined,
+        joinImg: undefined
+      }
+    }
+  },
+  methods: {
+    launch(file, fileList) {
+      this.form.launchImg = file
+    },
+    join(file, fileList) {
+      this.form.joinImg = file
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  color: rgba(16, 16, 16, 1);
+  font-size: 14px;
+  text-align: left;
+  font-family: SourceHanSansSC-regular;
+}
+</style>

src/views/platform/public/upload_img.vue

@@ -0,0 +1,33 @@
+<template>
+  <el-upload :on-remove="onChange" :file-list="imgList" :on-change="onChange"
+             list-type="picture" action="#" :auto-upload="false" :limit="limit">
+    <i class="el-icon-plus" v-if="imgList.length <limit"></i>
+  </el-upload>
+</template>
+
+<script>
+export default {
+  name: 'upload_img',
+  props: {
+    /* 限制上传文件数 */
+    limit: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      imgList: []
+    }
+  },
+  methods: {
+    onChange(file, fileList) {
+      this.imgList = fileList
+      this.$emit('file:change', file, fileList)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>