|
|
@@ -83,7 +83,6 @@
|
|
|
action=""
|
|
|
:http-request="httpRequest"
|
|
|
:before-remove="beforeRemove"
|
|
|
- :on-preview="handleFileDownload"
|
|
|
accept=".doc,.docx"
|
|
|
multiple
|
|
|
:limit="1"
|
|
|
@@ -92,6 +91,14 @@
|
|
|
:auto-upload="false"
|
|
|
style="width:800px"
|
|
|
>
|
|
|
+ <!-- 设置缩略图模板 -->
|
|
|
+ <div slot="file" slot-scope="{file}" class="zap-contract-add__thumbnail" @click="handleFileDownload(file)">
|
|
|
+ <img
|
|
|
+ class="zap-contract-add__fileimg"
|
|
|
+ src="../../../assets/images/file_img.png" alt=""
|
|
|
+ >
|
|
|
+ <span class="zap-contractadd__filename">{{file.name}}</span>
|
|
|
+ </div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
@@ -454,4 +461,32 @@ export default {
|
|
|
justify-content: center;
|
|
|
margin-top: 38px;
|
|
|
}
|
|
|
+// 设置缩略图模版。
|
|
|
+::v-deep .el-upload-list,
|
|
|
+.zap-contract-add__thumbnail{
|
|
|
+ position: relative;
|
|
|
+ width: 110px;
|
|
|
+ height: 110px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.zap-contract-add__thumbnail{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.zap-contract-add__fileimg{
|
|
|
+ width: 56px;
|
|
|
+}
|
|
|
+.zap-contractadd__filename{
|
|
|
+ margin-top: 12px;
|
|
|
+ line-height: 19px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ overflow: hidden; // 超出的文本隐藏
|
|
|
+ text-overflow: ellipsis; // 溢出用省略号显示
|
|
|
+ display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
|
|
|
+ -webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
|
|
|
+ -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
|
|
|
+}
|
|
|
</style>
|
guolufei123