简柏林 / thingskit-front · Commits

Commit f9018530c524c5024b4ac7143228b767babffe59

Authored by fengwotao
1 parent 7db047f5

pref:优化企业定制所有上传图片样式

Inline Side-by-side
Showing 4 changed files with 238 additions and 177 deletions
1 1 <template>
2 2 <div class="card">
3 3 <Card :bordered="false" class="card">
4   - <BasicForm @register="registerForm">
5   - <template #logoUpload>
6   - <ContentUploadText>
7   - <template #uploadImg>
8   - <Upload
9   - name="avatar"
10   - list-type="picture-card"
11   - class="avatar-uploader"
12   - :show-upload-list="false"
13   - @preview="handlePreview"
14   - :customRequest="customUploadLogoPic"
15   - :before-upload="beforeUploadLogoPic"
16   - >
17   - <img v-if="logoPic" :src="logoPic" alt="avatar" />
18   - <div v-else>
19   - <Spin v-if="loading" tip="正在上传中..." />
20   - <PlusOutlined v-else style="font-size: 2.5rem" /> </div
21   - ></Upload>
22   - </template>
23   - <template #uploadText>
24   - <div class="flex justify-center items-center">
25   - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
26   - </div>
27   - </template>
28   - </ContentUploadText>
29   - </template>
30   - <template #bgUpload>
31   - <ContentUploadText>
32   - <template #uploadImg>
33   - <Upload
34   - name="avatar"
35   - list-type="picture-card"
36   - class="avatar-uploader"
37   - :show-upload-list="false"
38   - :customRequest="customUploadBgPic"
39   - :before-upload="beforeUploadBgPic"
40   - >
41   - <img v-if="bgPic" :src="bgPic" alt="avatar" />
42   - <div v-else>
43   - <Spin v-if="loading1" tip="正在上传中..." />
44   - <PlusOutlined v-else style="font-size: 2.5rem" /> </div
45   - ></Upload>
46   - </template>
47   - <template #uploadText>
48   - <div class="flex justify-center items-center">
49   - 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
50   - </div>
51   - </template>
52   - </ContentUploadText>
53   - </template>
54   - <template #colorInput="{ model, field }"
55   - ><Input disabled v-model:value="model[field]">
56   - <template #prefix> <input type="color" v-model="model[field]" /> </template
57   - ></Input>
58   - </template>
  4 + <div style="margin-left: -40px">
  5 + <BasicForm @register="registerForm">
  6 + <template #logoUpload>
  7 + <ContentUploadText>
  8 + <template #uploadImg>
  9 + <Upload
  10 + name="avatar"
  11 + list-type="picture-card"
  12 + class="avatar-uploader"
  13 + :show-upload-list="false"
  14 + @preview="handlePreview"
  15 + :customRequest="customUploadLogoPic"
  16 + :before-upload="beforeUploadLogoPic"
  17 + >
  18 + <img v-if="logoPic" class="fill-img" :src="logoPic" alt="avatar" />
  19 + <div v-else>
  20 + <Spin v-if="loading" tip="正在上传中..." />
  21 + <PlusOutlined v-else />
  22 + <div class="ant-upload-text">上传</div>
  23 + </div>
  24 + </Upload>
  25 + </template>
  26 + <template #uploadText>
  27 + <div class="box-outline">
  28 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
  29 + </div>
  30 + </template>
  31 + </ContentUploadText>
  32 + </template>
  33 + <template #bgUpload>
  34 + <ContentUploadText>
  35 + <template #uploadImg>
  36 + <Upload
  37 + name="avatar"
  38 + list-type="picture-card"
  39 + class="avatar-uploader"
  40 + :show-upload-list="false"
  41 + :customRequest="customUploadBgPic"
  42 + :before-upload="beforeUploadBgPic"
  43 + >
  44 + <img v-if="bgPic" class="fill-img" :src="bgPic" alt="avatar" />
  45 + <div v-else>
  46 + <Spin v-if="loading1" tip="正在上传中..." />
  47 + <PlusOutlined v-else />
  48 + <div class="ant-upload-text">上传</div>
  49 + </div>
  50 + </Upload>
  51 + </template>
  52 + <template #uploadText>
  53 + <div class="box-outline">
  54 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px，大小不超过2M
  55 + </div>
  56 + </template>
  57 + </ContentUploadText>
  58 + </template>
  59 + <template #colorInput="{ model, field }"
  60 + ><Input disabled v-model:value="model[field]">
  61 + <template #prefix> <input type="color" v-model="model[field]" /> </template
  62 + ></Input>
  63 + </template>
59 64
60   - <template #homeSwiper>
61   - <ContentUploadText>
62   - <template #uploadImg>
63   - <Upload
64   - v-model:file-list="fileList"
65   - list-type="picture-card"
66   - @preview="handlePreview"
67   - :customRequest="customUploadHomeSwiper"
68   - :before-upload="beforeUploadHomeSwiper"
69   - @change="handleChange"
70   - >
71   - <div v-if="fileList.length < 5">
72   - <div>
73   - <PlusOutlined style="font-size: 2.5rem" />
74   - </div> </div
75   - ></Upload>
76   - </template>
77   - <template #uploadText>
78   - <div class="flex justify-center items-center">
79   - 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
80   - </div>
81   - </template>
82   - </ContentUploadText>
83   - <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
84   - <img alt="example" style="width: 100%" :src="previewImage" />
85   - </Modal>
86   - </template>
87   - </BasicForm>
  65 + <template #homeSwiper>
  66 + <ContentUploadText>
  67 + <template #uploadImg>
  68 + <Upload
  69 + v-model:file-list="fileList"
  70 + list-type="picture-card"
  71 + @preview="handlePreview"
  72 + :customRequest="customUploadHomeSwiper"
  73 + :before-upload="beforeUploadHomeSwiper"
  74 + @change="handleChange"
  75 + >
  76 + <div v-if="fileList.length < 5">
  77 + <div>
  78 + <PlusOutlined />
  79 + <div class="ant-upload-text">上传</div>
  80 + </div>
  81 + </div></Upload
  82 + >
  83 + </template>
  84 + <template #uploadText>
  85 + <div class="box-outline">
  86 + 支持.PNG、.JPG格式，建议尺寸为800*600px，大小不超过3M
  87 + </div>
  88 + </template>
  89 + </ContentUploadText>
  90 + <Modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
  91 + <img alt="example" style="width: 100%" :src="previewImage" />
  92 + </Modal>
  93 + </template>
  94 + </BasicForm>
  95 + </div>
88 96 </Card>
89 97 <Loading v-bind="compState" />
90 98 <Authority value="api:yt:appDesign:update:update">
... ... @@ -358,4 +366,14 @@
358 366 margin-top: 8px;
359 367 color: #666;
360 368 }
  369 +
  370 + .box-outline {
  371 + border: 1px dashed #d9d9d9;
  372 + text-align: left;
  373 + }
  374 +
  375 + .fill-img {
  376 + width: 100%;
  377 + height: 100%;
  378 + }
361 379 </style>
... ...
1 1 <template>
2 2 <div class="card">
3 3 <Card :bordered="false" class="card">
4   - <BasicForm @register="registerForm">
5   - <template #logoUpload>
6   - <ContentUploadText>
7   - <template #uploadImg>
8   - <Upload
9   - name="avatar"
10   - list-type="picture-card"
11   - class="avatar-uploader"
12   - :show-upload-list="false"
13   - :customRequest="customUploadLogoPic"
14   - :before-upload="beforeUploadLogoPic"
15   - >
16   - <img v-if="logoPic" :src="logoPic" alt="avatar" />
17   - <div v-else>
18   - <Spin v-if="loading" tip="正在上传中..." />
19   - <PlusOutlined v-else style="font-size: 2.5rem" /> </div
20   - ></Upload>
21   - </template>
22   - <template #uploadText>
23   - <div class="flex justify-center items-center">
24   - 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
25   - </div>
26   - </template>
27   - </ContentUploadText>
28   - </template>
29   - <template #iconUpload>
30   - <ContentUploadText>
31   - <template #uploadImg>
32   - <Upload
33   - name="avatar"
34   - list-type="picture-card"
35   - class="avatar-uploader"
36   - :show-upload-list="false"
37   - :customRequest="customUploadIconPic"
38   - :before-upload="beforeUploadIconPic"
39   - >
40   - <div v-if="iconPic">
41   - <img :src="iconPic" class="m-auto" />
42   - <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
  4 + <div style="margin-left: -40px">
  5 + <BasicForm @register="registerForm">
  6 + <template #logoUpload>
  7 + <ContentUploadText>
  8 + <template #uploadImg>
  9 + <Upload
  10 + name="avatar"
  11 + list-type="picture-card"
  12 + class="avatar-uploader"
  13 + :show-upload-list="false"
  14 + :customRequest="customUploadLogoPic"
  15 + :before-upload="beforeUploadLogoPic"
  16 + >
  17 + <img class="fill-img" v-if="logoPic" :src="logoPic" alt="avatar" />
  18 + <div v-else>
  19 + <Spin v-if="loading" tip="正在上传中..." />
  20 + <PlusOutlined v-else />
  21 + <div class="ant-upload-text">上传</div>
  22 + </div>
  23 + </Upload>
  24 + </template>
  25 + <template #uploadText>
  26 + <div class="box-outline">
  27 + 支持.PNG、.JPG格式，建议尺寸为32*32px，大小不超过500KB
43 28 </div>
44   - <div v-else>
45   - <div>
46   - <Spin v-if="loading1" tip="正在上传中..." />
47   - <PlusOutlined v-else style="font-size: 2.5rem" />
48   - </div> </div
49   - ></Upload>
50   - </template>
51   - <template #uploadText>
52   - <div class="flex justify-center items-center"> 支持.ICON格式，建议尺寸为16*16px </div>
53   - </template>
54   - </ContentUploadText>
55   - </template>
56   - <template #bgUpload>
57   - <ContentUploadText>
58   - <template #uploadImg>
59   - <Upload
60   - name="avatar"
61   - list-type="picture-card"
62   - class="avatar-uploader"
63   - :show-upload-list="false"
64   - :customRequest="customUploadBgPic"
65   - :before-upload="beforeUploadBgPic"
66   - >
67   - <img v-if="bgPic" :src="bgPic" alt="avatar" />
68   - <div v-else>
69   - <div>
70   - <Spin v-if="loading2" tip="正在上传中..." />
71   - <PlusOutlined v-else style="font-size: 2.5rem" />
72   - </div> </div
73   - ></Upload>
74   - </template>
75   - <template #uploadText>
76   - <div class="flex justify-center items-center">
77   - 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
78   - </div>
79   - </template>
80   - </ContentUploadText>
81   - </template>
82   - <template #colorInput="{ model, field }"
83   - ><Input disabled v-model:value="model[field]">
84   - <template #prefix> <input type="color" v-model="model[field]" /> </template
85   - ></Input>
86   - </template>
87   - </BasicForm>
  29 + </template>
  30 + </ContentUploadText>
  31 + </template>
  32 + <template #iconUpload>
  33 + <ContentUploadText>
  34 + <template #uploadImg>
  35 + <Upload
  36 + name="avatar"
  37 + list-type="picture-card"
  38 + class="avatar-uploader"
  39 + :show-upload-list="false"
  40 + :customRequest="customUploadIconPic"
  41 + :before-upload="beforeUploadIconPic"
  42 + >
  43 + <div v-if="iconPic">
  44 + <img :src="iconPic" class="m-auto fill-img" />
  45 + <div style="background-color: #ccc; margin-top: 20px">重新上传</div>
  46 + </div>
  47 + <div v-else>
  48 + <div>
  49 + <Spin v-if="loading1" tip="正在上传中..." />
  50 + <PlusOutlined v-else />
  51 + <div class="ant-upload-text">上传</div>
  52 + </div>
  53 + </div></Upload
  54 + >
  55 + </template>
  56 + <template #uploadText>
  57 + <div class="box-outline"> 支持.ICON格式，建议尺寸为16*16px </div>
  58 + </template>
  59 + </ContentUploadText>
  60 + </template>
  61 + <template #bgUpload>
  62 + <ContentUploadText>
  63 + <template #uploadImg>
  64 + <Upload
  65 + name="avatar"
  66 + list-type="picture-card"
  67 + class="avatar-uploader"
  68 + :show-upload-list="false"
  69 + :customRequest="customUploadBgPic"
  70 + :before-upload="beforeUploadBgPic"
  71 + >
  72 + <img class="fill-img" v-if="bgPic" :src="bgPic" alt="avatar" />
  73 + <div v-else>
  74 + <div>
  75 + <Spin v-if="loading2" tip="正在上传中..." />
  76 + <PlusOutlined v-else />
  77 + <div class="ant-upload-text">上传</div>
  78 + </div>
  79 + </div></Upload
  80 + >
  81 + </template>
  82 + <template #uploadText>
  83 + <div class="box-outline">
  84 + 支持.PNG、.JPG格式，建议尺寸为1920*1080px以上，大小不超过5M
  85 + </div>
  86 + </template>
  87 + </ContentUploadText>
  88 + </template>
  89 + <template #colorInput="{ model, field }"
  90 + ><Input disabled v-model:value="model[field]">
  91 + <template #prefix> <input type="color" v-model="model[field]" /> </template
  92 + ></Input>
  93 + </template>
  94 + </BasicForm>
  95 + </div>
88 96 </Card>
89 97 <Loading v-bind="compState" />
90 98 <Authority value="api:yt:platform:update:update">
... ... @@ -305,4 +313,23 @@
305 313 });
306 314 </script>
307 315
308   -<style lang="less" scoped></style>
  316 +<style lang="less" scoped>
  317 + .ant-upload-select-picture-card i {
  318 + font-size: 32px;
  319 + color: #999;
  320 + }
  321 +
  322 + .ant-upload-select-picture-card .ant-upload-text {
  323 + margin-top: 8px;
  324 + color: #666;
  325 + }
  326 +
  327 + .box-outline {
  328 + border: 1px dashed #d9d9d9;
  329 + }
  330 +
  331 + .fill-img {
  332 + width: 100%;
  333 + height: 100%;
  334 + }
  335 +</style>
... ...
1 1 <template>
2   - <a-row type="flex" align="middle" justify="start">
3   - <a-col :span="12">
  2 + <a-row align="bottom" :gutter="16">
  3 + <a-col :span="1">
4 4 <slot name="uploadImg"></slot>
5 5 </a-col>
6   - <a-col :span="12">
  6 + <a-col :span="5" />
  7 + <a-col :span="18" class="padd-top">
7 8 <slot name="uploadText"></slot>
8 9 </a-col>
9 10 </a-row>
... ... @@ -11,4 +12,8 @@
11 12
12 13 <script lang="ts" setup></script>
13 14
14   -<style lang="less" scoped></style>
  15 +<style lang="less" scoped>
  16 + .padd-top {
  17 + margin-bottom: 15px;
  18 + }
  19 +</style>
... ...
... ... @@ -13,16 +13,16 @@
13 13 :customRequest="customUploadqrcodePic"
14 14 :before-upload="beforeUploadqrcodePic"
15 15 >
16   - <img v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
  16 + <img class="fill-img" v-if="qrcodePic" :src="qrcodePic" alt="avatar" />
17 17 <div v-else>
18 18 <Spin v-if="loading" tip="正在上传中..." />
19   - <PlusOutlined v-else style="font-size: 2.5rem" /> </div
20   - ></Upload>
  19 + <PlusOutlined v-else />
  20 + <div class="ant-upload-text">上传</div>
  21 + </div></Upload
  22 + >
21 23 </template>
22 24 <template #uploadText>
23   - <div class="flex justify-center items-center">
24   - 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M
25   - </div>
  25 + <div class="box-outline"> 支持.PNG、.JPG格式，建议尺寸为300*300px，大小不超过5M </div>
26 26 </template>
27 27 </ContentUploadText>
28 28 </template>
... ... @@ -381,3 +381,14 @@
381 381 },
382 382 });
383 383 </script>
  384 +
  385 +<style lang="less" scoped>
  386 + .box-outline {
  387 + border: 1px dashed #d9d9d9;
  388 + }
  389 +
  390 + .fill-img {
  391 + width: 100%;
  392 + height: 100%;
  393 + }
  394 +</style>
... ...