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

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

@@ -49,45 +49,48 @@
49 49
         <FormItem label="服务案例" prop="scname">
50 50
           <Input v-model="add_form.scname" placeholder="请输入服务案例" />
51 51
         </FormItem>
52
-        <FormItem label="序号" prop="scorder">
52
+        <FormItem label="序号">
53 53
           <Input v-model="add_form.scorder" number placeholder="请输入序号" />
54 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 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 94
         </div>
92 95
       </Form>
93 96
       <div slot="footer" style="text-align: right">
@@ -276,6 +279,7 @@ export default {
276 279
               this.add_form.show = false;
277 280
               this.add_form.scname = "";
278 281
               this.add_form.scpic = "";
282
+              this.init();
279 283
             } else {
280 284
               this.$Message.error(res.msg);
281 285
             }
@@ -315,11 +319,13 @@ export default {
315 319
             that.init();
316 320
           } else {
317 321
             that.$Message.error("图片上传失败");
322
+            console.log(1);
318 323
           }
319 324
         })
320 325
         .catch(() => {
321 326
           that.showLoading = false;
322 327
           that.$Message.error("图片上传失败");
328
+          console.log(2);
323 329
         });
324 330
     },
325 331
     changePage(page) {
@@ -348,7 +354,6 @@ export default {
348 354
   margin-top: 5px;
349 355
 }
350 356
 .upload {
351
-  margin-left: 90px;
352 357
   width: 200px;
353 358
   height: 100px;
354 359
   border: 1px solid #dcdee2;
@@ -369,4 +374,12 @@ export default {
369 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 385
 </style>

Loading…
Cancel
Save