update:步骤条样式修改

src/pages/Activity/releaseProduc/components/infoEditing.vue

@@ -2,13 +2,13 @@
   <div class="infoEditing">
     <el-form ref="infoEditForm" :model="infoEditForm" label-width="80px">
       <el-form-item label="标题：">
-        <el-input v-model="infoEditForm.title"></el-input>
+        <el-input v-model="infoEditForm.title" maxlength="30"></el-input>
       </el-form-item>
       <el-form-item label="介绍：">
-        <el-input type="textarea" v-model="infoEditForm.desc"></el-input>
+        <el-input type="textarea" v-model="infoEditForm.desc" maxlength="1000" rows="4"></el-input>
       </el-form-item>
       <el-form-item label="图片：">
-        <el-upload action="#" list-type="picture-card" :auto-upload="false">
+        <el-upload action="#" :class="{hide:hideUpload}" list-type="picture-card" :auto-upload="false" limit="9">
           <template #default>
             <i class="el-icon-plus"></i>
           </template>
@@ -17,27 +17,12 @@
               <img
                 class="el-upload-list__item-thumbnail"
                 :src="file.url"
-                alt=""
-              />
+                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)"
-                >
+                  @click="handleRemove(file)">
                   <i class="el-icon-delete"></i>
                 </span>
               </span>
@@ -63,19 +48,14 @@ export default {
       dialogImageUrl: "",
       dialogVisible: false,
       disabled: false,
+      hideUpload: false
     };
   },
   methods: {
+    // 图片删除
     handleRemove(file) {
       console.log(file);
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    handleDownload(file) {
-      console.log(file);
-    },
+    }
   },
 };
 </script>

src/pages/Activity/releaseProduc/index.vue

@@ -17,22 +17,11 @@
       <addProduc v-else-if="active === 2" />
       <spellOrderSet v-else />
     </div>
-    <div class="btn">
-      <el-button style="margin-top: 12px" @click="prev" v-show="active >= 2"
-        >上一步</el-button
-      >
-      <el-button style="margin-top: 12px" v-show="active < 3" @click="next"
-        >下一步</el-button
-      >
-      <el-button style="margin-top: 12px" v-show="active == 1" @click="cancel"
-        >取消</el-button
-      >
-      <el-button
-        style="margin-top: 12px"
-        v-show="active == 3"
-        @click="confirmRelease"
-        >确认发布</el-button
-      >
+    <div class="stepsBtn">
+      <el-button @click="prev" v-show="active >= 2" style="margin-right: 20px">上一步</el-button>
+      <el-button @click="next" v-show="active < 3" style="margin-right: 20px">下一步</el-button>
+      <el-button @click="cancel" v-show="active == 1">取消</el-button>
+      <el-button @click="confirmRelease" v-show="active == 3" type="primary">确认发布</el-button>
     </div>
   </div>
 </template>
@@ -49,18 +38,18 @@ export default {
   },
   data() {
     return {
-      active: 1,
+      active: 1, // 步骤条状态
     };
   },
 
   methods: {
     // 上一步
     prev() {
-      if (this.active-- <= 0) this.active = 0;
+      this.active--;
     },
     // 下一步
     next() {
-      if (this.active++ > 2) this.active = 0;
+      this.active++;
     },
     // 取消
     cancel() {
@@ -69,6 +58,7 @@ export default {
     // 确认发布
     confirmRelease() {},
   },
+  created() {},
 };
 </script>
 
@@ -78,12 +68,14 @@ export default {
   box-sizing: border-box;
 }
 .headTitle {
+  width: 75%;
   font-size: 18px;
-  margin-bottom:30px;
+  margin:0 auto 40px auto;
 }
 .steps {
   display: flex;
   justify-content: center;
+  margin-bottom: 50px;
 }
 .steps /deep/ .el-step__icon {
   width: 50px;
@@ -92,11 +84,12 @@ export default {
 .steps /deep/ .el-step.is-horizontal .el-step__line {
   top: 25px;
 }
-.content,.btn{
+.content,.stepsBtn {
   width: 64%;
   margin: 20px auto;
 }
-.btn {
+.stepsBtn {
   text-align: center;
+  margin-top: 50px;
 }
 </style>
\ No newline at end of file