简柏林 / 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 <template> 1 <template>
2 <div class="card"> 2 <div class="card">
3 <Card :bordered="false" class="card"> 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 </Card> 96 </Card>
89 <Loading v-bind="compState" /> 97 <Loading v-bind="compState" />
90 <Authority value="api:yt:appDesign:update:update"> 98 <Authority value="api:yt:appDesign:update:update">
@@ -358,4 +366,14 @@ @@ -358,4 +366,14 @@
358 margin-top: 8px; 366 margin-top: 8px;
359 color: #666; 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 </style> 379 </style>
1 <template> 1 <template>
2 <div class="card"> 2 <div class="card">
3 <Card :bordered="false" class="card"> 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 </div> 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 </Card> 96 </Card>
89 <Loading v-bind="compState" /> 97 <Loading v-bind="compState" />
90 <Authority value="api:yt:platform:update:update"> 98 <Authority value="api:yt:platform:update:update">
@@ -305,4 +313,23 @@ @@ -305,4 +313,23 @@
305 }); 313 });
306 </script> 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 <template> 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 <slot name="uploadImg"></slot> 4 <slot name="uploadImg"></slot>
5 </a-col> 5 </a-col>
6 - <a-col :span="12"> 6 + <a-col :span="5" />
  7 + <a-col :span="18" class="padd-top">
7 <slot name="uploadText"></slot> 8 <slot name="uploadText"></slot>
8 </a-col> 9 </a-col>
9 </a-row> 10 </a-row>
@@ -11,4 +12,8 @@ @@ -11,4 +12,8 @@
11 12
12 <script lang="ts" setup></script> 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,16 +13,16 @@
13 :customRequest="customUploadqrcodePic" 13 :customRequest="customUploadqrcodePic"
14 :before-upload="beforeUploadqrcodePic" 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 <div v-else> 17 <div v-else>
18 <Spin v-if="loading" tip="正在上传中..." /> 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 </template> 23 </template>
22 <template #uploadText> 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 </template> 26 </template>
27 </ContentUploadText> 27 </ContentUploadText>
28 </template> 28 </template>
@@ -381,3 +381,14 @@ @@ -381,3 +381,14 @@
381 }, 381 },
382 }); 382 });
383 </script> 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>