Browse Source

首页样式

gzb
guozhongbo 1 year ago
parent
commit
9889974fa3
2 changed files with 51 additions and 38 deletions
  1. 2
    2
      src/views/layout.vue
  2. 49
    36
      src/views/service/index.vue

+ 2
- 2
src/views/layout.vue View File

53
   justify-content: space-between;
53
   justify-content: space-between;
54
   align-items: center;
54
   align-items: center;
55
   margin: 0 auto;
55
   margin: 0 auto;
56
-  width: 1200px;
56
+  width: 80%;
57
   font-size: 16px;
57
   font-size: 16px;
58
   line-height: 50px;
58
   line-height: 50px;
59
   font-weight: bold;
59
   font-weight: bold;
75
 }
75
 }
76
 .layout_main {
76
 .layout_main {
77
   margin: 0 auto;
77
   margin: 0 auto;
78
-  width: 1200px;
78
+  width: 80%;
79
 }
79
 }
80
 </style>
80
 </style>

+ 49
- 36
src/views/service/index.vue View File

49
         <FormItem label="服务案例" prop="scname">
49
         <FormItem label="服务案例" prop="scname">
50
           <Input v-model="add_form.scname" placeholder="请输入服务案例" />
50
           <Input v-model="add_form.scname" placeholder="请输入服务案例" />
51
         </FormItem>
51
         </FormItem>
52
-        <FormItem label="序号" prop="scorder">
52
+        <FormItem label="序号">
53
           <Input v-model="add_form.scorder" number placeholder="请输入序号" />
53
           <Input v-model="add_form.scorder" number placeholder="请输入序号" />
54
         </FormItem>
54
         </FormItem>
55
-        <div class="upload">
56
-          <Upload
57
-            action
58
-            class="file_left_up"
59
-            accept=".jpg,.jpeg,.png"
60
-            :before-upload="
61
-              (file) => {
62
-                handleUpload(file);
63
-                return false;
64
-              }
65
-            "
66
-          >
67
-            <div
68
-              class="upload-img"
69
-              v-if="!this.add_form.scpic"
70
-              style="padding-top: 10px"
55
+        <div class="uploadimg">
56
+          <div class="uploadimg_title">图片</div>
57
+          <div class="upload">
58
+            <Upload
59
+              action
60
+              class="file_left_up"
61
+              accept=".jpg,.jpeg,.png"
62
+              :before-upload="
63
+                (file) => {
64
+                  handleUpload(file);
65
+                  return false;
66
+                }
67
+              "
71
             >
68
             >
72
-              <Icon
73
-                type="ivu-icon ivu-icon- iconfont icon-shangchuan"
74
-                size="42"
75
-                color="#e6e6e6"
76
-              />
77
-              <p
78
-                class="shangchuan_btn"
79
-                style="margin-top: 10px; font-size: 14px; text-align: center"
80
-              >
81
-                上传图片
82
-              </p>
83
-            </div>
84
-            <div v-else>
85
-              <img
69
+              <div
86
                 class="upload-img"
70
                 class="upload-img"
87
-                :src="$api.showImageUrl + add_form.scpic"
88
-              />
89
-            </div>
90
-          </Upload>
71
+                v-if="!this.add_form.scpic"
72
+                style="padding-top: 10px"
73
+              >
74
+                <Icon
75
+                  type="ivu-icon ivu-icon- iconfont icon-shangchuan"
76
+                  size="42"
77
+                  color="#e6e6e6"
78
+                />
79
+                <p
80
+                  class="shangchuan_btn"
81
+                  style="margin-top: 10px; font-size: 14px; text-align: center"
82
+                >
83
+                  上传图片
84
+                </p>
85
+              </div>
86
+              <div v-else>
87
+                <img
88
+                  class="upload-img"
89
+                  :src="$api.showImageUrl + add_form.scpic"
90
+                />
91
+              </div>
92
+            </Upload>
93
+          </div>
91
         </div>
94
         </div>
92
       </Form>
95
       </Form>
93
       <div slot="footer" style="text-align: right">
96
       <div slot="footer" style="text-align: right">
276
               this.add_form.show = false;
279
               this.add_form.show = false;
277
               this.add_form.scname = "";
280
               this.add_form.scname = "";
278
               this.add_form.scpic = "";
281
               this.add_form.scpic = "";
282
+              this.init();
279
             } else {
283
             } else {
280
               this.$Message.error(res.msg);
284
               this.$Message.error(res.msg);
281
             }
285
             }
315
             that.init();
319
             that.init();
316
           } else {
320
           } else {
317
             that.$Message.error("图片上传失败");
321
             that.$Message.error("图片上传失败");
322
+            console.log(1);
318
           }
323
           }
319
         })
324
         })
320
         .catch(() => {
325
         .catch(() => {
321
           that.showLoading = false;
326
           that.showLoading = false;
322
           that.$Message.error("图片上传失败");
327
           that.$Message.error("图片上传失败");
328
+          console.log(2);
323
         });
329
         });
324
     },
330
     },
325
     changePage(page) {
331
     changePage(page) {
348
   margin-top: 5px;
354
   margin-top: 5px;
349
 }
355
 }
350
 .upload {
356
 .upload {
351
-  margin-left: 90px;
352
   width: 200px;
357
   width: 200px;
353
   height: 100px;
358
   height: 100px;
354
   border: 1px solid #dcdee2;
359
   border: 1px solid #dcdee2;
369
     object-fit: cover;
374
     object-fit: cover;
370
   }
375
   }
371
 }
376
 }
377
+.uploadimg {
378
+  display: flex;
379
+  .uploadimg_title {
380
+    width: 90px;
381
+    text-align: right;
382
+    padding-right: 10px;
383
+  }
384
+}
372
 </style>
385
 </style>

Loading…
Cancel
Save