devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp使用Canvas给图片加水印把临时文件上传到服务器

作者：2023面试高手 | 2024-03-21 10:13:34

赞

踩

uniapp使用Canvas给图片加水印把临时文件上传到服务器

生成的临时路径是没有完整的路径没办法上传到服务器

  1. 16:37:40.993 添加水印后的路径,  _doc/uniapp_temp_1710923708347/canvas/17109238597881.png 
  2. 16:37:41.041 添加水印后的完整路径,  file://storage/emulated/0/Android/data/com.jingruan.zjd/apps/__UNI__BE4B000/doc/uniapp_temp_1710923708347/canvas/17109238597881.png

使用以下代码得到完整的路径

let path = 'file:/' + plus.io.convertLocalFileSystemURL(tempFilePath);


 

完整代码如下 使用的插件市场的hpy-watermark组件   一共2个

效果是

其他页面调用方式

  1. <!-- 
  2. 增加水印上传villageReviewForm.preciseAddr 是通过高德获取的定位地址 
  3. -->
  4. <hpy-watermark ref="uploadImage" :address="villageReviewForm.preciseAddr" @waterMark="waterMark"></hpy-watermark>

高德获取定位

  1. 		uni.getLocation({
  2. 					type: 'gcj02',
  3. 					geocode: true,
  4. 					isHighAccuracy: true,
  5. 					success: res => { 
  6. 						const {
  7. 							province,
  8. 							city,
  9. 							district,
  10. 							street,
  11. 							streetNum,
  12. 							poiName
  13. 						} = res.address;
  14. 						this.villageReviewForm.preciseAddr =
  15. 							`${district}${street}${streetNum}${poiName}${res.longitude},${res.latitude}`;
  16. 						console.log("经纬度地点",this.villageReviewForm.preciseAddr)
  17. 						// 数据渲染
  18. 						this.$forceUpdate();
  19. 					}
  20. 				});

获取上传数据结果

const fileList = this.$refs.uploadImage.fileList

组件样式

hpy-watermark.vue

  1. <template>
  2. 	<view>
  3. 	<view class="watermark-content">
  4. 		<canvas canvas-id="watermarkCanvas" id="watermarkCanvas" :style="{width:canvasWidth + 'px', height:canvasHeight + 'px'}"></canvas>
  5. 	</view>
  6. 	<upload-image   v-model="fileList" style="margin-left: 15rpx"   :image-styles="imageStyles" :files-list="filesList"   :delIcon="delIcon"   @choose="chooseImage" @delFile="delFile">
  7. 		<slot>
  8. 			<view class="is-add">
  9. 				<view class="icon-add"></view>
  10. 				<view class="icon-add rotate"></view>
  11. 			</view>
  12. 		</slot>
  13. 	</upload-image>
  14. 	</view>
  15. </template>
  16.  
  17. <script>
  18. 	import {
  19. 		fileServerIp
  20. 	} from "@/common/utils/config.js"
  21. 	import Session from "@/common/Session";
  22. 	import uploadImage from './upload-image.vue'
  23. 	export default {
  24. 		components: {
  25. 			uploadImage, 
  26. 		},
  27. 		name:'hpy-watermark',
  28. 		props:{
  29. 			address:{
  30. 				type:String,
  31. 				default:''
  32. 			},
  33. 			delIcon: {
  34. 				type: Boolean,
  35. 				default: true
  36. 			},
  37. 		 
  38. 			listStyles: {
  39. 				type: Object,
  40. 				default () {
  41. 					return {
  42. 						// 是否显示边框
  43. 						border: true,
  44. 						// 是否显示分隔线
  45. 						dividline: true,
  46. 						// 线条样式
  47. 						borderStyle: {}
  48. 					}
  49. 				}
  50. 			},
  51. 			imageStyles: {
  52. 				type: Object,
  53. 				default () {
  54. 					return {
  55. 						width: 'auto',
  56. 						height: 'auto'
  57. 					}
  58. 				}
  59. 			},
  60. 			/**
  61. 			 * 文字文字位置（默认：左下角）可选值：左上角：topLeft、右上角：topRight、左下角：bottomLeft、右下角：bottomRight
  62. 			 */
  63. 			markAlign:{
  64. 				type:String,
  65. 				default:function(){
  66. 					return 'bottomLeft'
  67. 				}
  68. 			},
  69. 			/**
  70. 			 * 设置文本的水平对齐方式，默认：start，文本在指定的位置开始。
  71. 			 * end	文本在指定的位置结束。
  72. 			 * center 文本的中心被放置在指定的位置。
  73. 			 * left	文本左对齐。
  74. 			 * right	文本右对齐。
  75. 			 */
  76. 			textAlign:{
  77. 				type:String,
  78. 				default:function(){
  79. 					return 'start';
  80. 				}
  81. 			},
  82. 			/**
  83. 			 * 设置文本的垂直对齐方式，默认：alphabetic文本基线是普通的字母基线。
  84. 			 * top	文本基线是 em 方框的顶端。
  85. 			 * hanging	文本基线是悬挂基线。
  86. 			 * middle	文本基线是 em 方框的正中。
  87. 			 * ideographic	文本基线是表意基线。
  88. 			 * bottom	文本基线是 em 方框的底端。
  89. 			 */
  90. 			textBaseline:{
  91. 				type:String,
  92. 				default:function(){
  93. 					return 'alphabetic';
  94. 				}
  95. 			},
  96. 			/**
  97. 			 * 文字大小
  98. 			 */
  99. 			fontSize:{
  100. 				type:[Number, String],
  101. 				default:30
  102. 			},
  103. 			/**
  104. 			 * 文字颜色
  105. 			 */
  106. 			fontColor:{
  107. 				type:String,
  108. 				default:function(){
  109. 					return 'red'
  110. 				}
  111. 			},
  112. 			/**
  113. 			 * 阴影颜色
  114. 			 */
  115. 			shadowColor:{
  116. 				type:String,
  117. 				default:function(){
  118. 					return 'rgba(0, 0, 0, 1.0)';
  119. 				}
  120. 			},
  121. 			/**
  122. 			 * 阴影边框大小
  123. 			 */
  124. 			shadowWidth:{
  125. 				type:[Number, String],
  126. 				default:2
  127. 			},
  128. 			/**
  129. 			 * 图片的质量，取值范围为 (0, 1]，不在范围内时当作1处理
  130. 			 */
  131. 			quality:{
  132. 				type:[Number, String],
  133. 				default:1
  134. 			},
  135. 			/**
  136. 			 * 目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'
  137. 			 */
  138. 			fileType:{
  139. 				type:String,
  140. 				default:function(){
  141. 					return 'png'
  142. 				}
  143. 			}
  144. 		},
  145. 		data() {
  146. 			return {
  147. 				fileList: [],
  148. 				files: [],
  149. 				filesList:[],
  150. 				canvasWidth:0,
  151. 				canvasHeight:0
  152. 			};
  153. 		},
  154. 		watch: { 
  155. 			fileList: {
  156. 				handler(newVal, oldVal) { 
  157. 					this.filesList=newVal;
  158. 				},
  159. 				immediate: true
  160. 			},
  161. 		 
  162. 		},
  163. 		methods: {
  164. 			
  165. 			// 选择图片
  166. 				chooseImage() {
  167. 					if(this.isEmpty(this.address)){
  168. 						uni.showToast({
  169. 							icon:'none',
  170. 							title:'请打开定位或者重新获取'
  171. 						});
  172. 						return;
  173. 					}
  174. 					uni.chooseImage({
  175. 						count: this.limit,              // 限制的图片数量
  176. 						sizeType: ['compressed'],       // original 原图，compressed 压缩图，默认二者都有 
  177. 						sourceType: [ 'camera'],// album 从相册选图，camera 使用相机，默认二者都有
  178. 						success: (res) => {
  179. 							var imgPathList = res.tempFilePaths;
  180. 							if(imgPathList.length > 0){
  181. 								this.addImages(imgPathList);
  182. 							}
  183. 						},
  184. 						fail: (err) => {
  185. 							console.log('chooseImage fail', err)
  186. 							if("chooseImage:fail cancel" == err.errMsg){
  187. 								uni.showToast({
  188. 									icon:'none',
  189. 									title:'取消了选择'
  190. 								});
  191. 							}else{
  192. 						
  193. 							}
  194. 						}
  195. 					});
  196. 				},
  197. 				// 添加图片
  198. 				addImages(filePaths){
  199. 					
  200. 					if(filePaths.length > 0){
  201. 						var fillTexts = ["地址:"+this.address];
  202. 						fillTexts.push("时间：" + this.getNowTime());
  203. 						// 添加水印
  204. 						this.addWaterMark({
  205. 							filePaths,
  206. 							fillTexts
  207. 						});
  208. 					}
  209. 				},
  210. 				/**
  211. 				 * 水印添加回调，在H5平台下，filePath 为 base64
  212. 				 */
  213. 				waterMark(filePath){
  214. 					this.imageList.push(filePath);
  215. 				},
  216. 				/**
  217. 				 * 获取当前时间
  218. 				 */
  219. 				getNowTime(){
  220. 					var date = new Date(),
  221. 					year = date.getFullYear(),
  222. 					month = date.getMonth() + 1,
  223. 					day = date.getDate(),
  224. 					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
  225. 					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
  226. 					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  227. 					month >= 1 && month <= 9 ? (month = "0" + month) : "";
  228. 					day >= 0 && day <= 9 ? (day = "0" + day) : "";
  229. 					return (year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
  230. 				},
  231. 			 
  232. 			/**
  233. 			 * 删除文件
  234. 			 * @param {Object} index
  235. 			 */
  236. 			delFile(index) {
  237. 				this.$emit('delete', {
  238. 					tempFile: this.filesList[index],
  239. 					tempFilePath: this.filesList[index].url
  240. 				})
  241. 				this.filesList.splice(index, 1) 
  242. 			 	
  243. 				 
  244. 			},
  245. 			/**
  246. 			 * 增加水印
  247. 			 * @param {Object} {filePaths:['图片地址1', '图片地址2'], fillTexts:['水印1', '水印2']}
  248. 			 */
  249. 			async addWaterMark({ filePaths = [], fillTexts = [] }) {
  250. 				
  251. 				try{
  252. 					for (const filePath of filePaths) {
  253. 						await this.drawImage(filePath, fillTexts.reverse());
  254. 					}
  255. 				}catch(e){
  256. 					// TODO handle the exception
  257. 				}finally{
  258. 					// uni.hideLoading();
  259. 				}
  260. 			},
  261. 			/**
  262. 			 * 绘制单个图片
  263. 			 */
  264. 			async drawImage(filePath, fillTexts){
  265. 				uni.showLoading({title:'图片处理中···'});
  266. 				const ctx = uni.createCanvasContext('watermarkCanvas', this);
  267. 				return new Promise(resolve => {
  268. 					uni.getImageInfo({
  269. 						src: filePath,
  270. 						success: (image) => {
  271. 							this.canvasWidth = image.width;
  272. 							this.canvasHeight = image.height;
  273. 							ctx.clearRect(0, 0, image.width, image.height);
  274. 							setTimeout(()=>{
  275. 								ctx.drawImage(image.path, 0, 0, image.width, image.height);
  276. 								ctx.setFontSize(this.fontSize);
  277. 								ctx.setFillStyle(this.fontColor);
  278. 								// 设置阴影
  279. 								let shadowWidth = Number(this.shadowWidth + "");
  280. 								if(shadowWidth > 0){
  281. 									ctx.shadowColor = this.shadowColor;
  282. 									ctx.shadowOffsetX = shadowWidth;
  283. 									ctx.shadowOffsetY = shadowWidth;
  284. 								}
  285. 								// 设置水平对齐方式
  286. 								ctx.textAlign = this.textAlign;
  287. 								// 设置垂直对齐方式
  288. 								ctx.textBaseline = this.textBaseline;
  289. 								const maxText = fillTexts.reduce((text, val) => {
  290. 									return text.length >= val.length ? text : val;
  291. 								});
  292. 								fillTexts.forEach((mark, index) => {
  293. 									if(this.markAlign == "bottomRight"){
  294. 										ctx.fillText(mark, image.width - (ctx.measureText(maxText).width+60), image.height - (index*60+60));
  295. 									}else if(this.markAlign == "topLeft"){
  296. 										ctx.fillText(mark, 20, (index*60+60));
  297. 									}else if(this.markAlign == "topRight"){
  298. 										ctx.fillText(mark, image.width - (ctx.measureText(maxText).width+60), (index*60+60));
  299. 									}else{
  300. 										ctx.fillText(mark, 20, image.height - (index*60+60));
  301. 									}
  302. 								});
  303. 								ctx.draw(false, (() => {
  304. 									setTimeout(()=>{
  305. 										uni.canvasToTempFilePath({
  306. 											canvasId: 'watermarkCanvas',
  307. 											fileType:this.fileType,
  308. 											quality:Number(this.quality + "" || "1"),
  309. 											success: (res) => { 
  310. 												console.log("添加水印后的路径",res.tempFilePath )
  311. 												this.saveUploadImage(res.tempFilePath )
  312. 											},
  313. 											fail:(err) => {
  314. 												uni.hideLoading();
  315. 												console.log(err)
  316. 											},
  317. 											complete: () => {
  318. 												resolve();
  319. 											}
  320. 										}, this);
  321. 									}, 300);
  322. 								})());
  323. 							}, 200);
  324. 						},
  325. 						fail: (e) => {
  326. 							resolve();
  327. 						}
  328. 					});
  329. 				});
  330. 			},
  331. 			saveUploadImage(tempFilePath){
  332. 				uni.showLoading({title:'图片上传中···'});
  333. 				// #ifdef APP-PLUS
  334. 				var p = plus.io.convertLocalFileSystemURL(tempFilePath);
  335. 				this.url = 'file:/' + p
  336. 				console.log("添加水印后的完整路径",this.url )
  337. 				// #endif
  338. 				uni.uploadFile({
  339. 					url: fileServerIp + 'common/upload',
  340. 					name: "file",
  341. 					// #ifdef H5
  342. 					filePath: tempFilePath,
  343. 					// #endif
  344. 					// #ifdef APP-PLUS
  345. 					filePath: this.url,
  346. 					// #endif
  347. 					header: {
  348. 						Authorization: "Bearer " + Session.getValue('token')
  349. 					},
  350. 					success: uploadFileRes => {
  351. 						uni.hideLoading();
  352. 						const {
  353. 							data
  354. 						} = JSON.parse(uploadFileRes.data)
  355. 						this.filesList.push({
  356. 							url: data.url,
  357. 							name: data.fileName,
  358. 							extname: 'png'
  359. 						}) 
  360. 							this.$emit('waterMark',{
  361. 							url: data.url,
  362. 							name: data.fileName,
  363. 							extname: 'png'
  364. 						});
  365. 					},
  366. 					fail: error => {
  367. 						uni.hideLoading();
  368. 						uni.showToast({
  369. 							title: '上传失败！',
  370. 							icon: 'error',
  371. 							duration: 2000
  372. 						});
  373. 					}
  374. 				})
  375. 			}
  376. 		}
  377. 	}
  378. </script>
  379.  
  380. <style scoped>
  381. 	.watermark-content{width: 0;height: 0;overflow: hidden;}
  382. 	.uni-file-picker__container {
  383. 		/* #ifndef APP-NVUE */
  384. 		display: flex;
  385. 		box-sizing: border-box;
  386. 		/* #endif */
  387. 		flex-wrap: wrap;
  388. 		margin: -5px;
  389. 	}
  390. 	.rotate {
  391. 		position: absolute;
  392. 		transform: rotate(90deg);
  393. 	}
  394. 	
  395. 	.icon-add {
  396. 		width: 50px;
  397. 		height: 5px;
  398. 		background-color: #f1f1f1;
  399. 		border-radius: 2px;
  400. 	}
  401. </style>

upload-image.vue

  1. <template>
  2. 	<view class="uni-file-picker__container">
  3. 		<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
  4. 			<view class="file-picker__box-content" :style="borderStyle">
  5. 				<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
  6. 				<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
  7. 					<view class="icon-del"></view>
  8. 					<view class="icon-del rotate"></view>
  9. 				</view>
  10. 				<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
  11. 					<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
  12. 					 :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
  13. 				</view>
  14. 				<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
  15. 					点击重试
  16. 				</view>
  17. 			</view>
  18. 		</view>
  19. 		<view v-if="filesList.length < limit && !readonly" class="file-picker__box" :style="boxStyle">
  20. 			<view class="file-picker__box-content is-add" :style="borderStyle" @click="choose">
  21. 				<slot>
  22. 					<view class="icon-add"></view>
  23. 					<view class="icon-add rotate"></view>
  24. 				</slot>
  25. 			</view>
  26. 		</view>
  27. 	</view>
  28. </template>
  29.  
  30. <script>
  31. 	export default {
  32. 		name: "uploadImage",
  33. 		emits:['uploadFiles','choose','delFile'],
  34. 		props: {
  35. 			filesList: {
  36. 				type: Array,
  37. 				default () {
  38. 					return []
  39. 				}
  40. 			},
  41. 			disabled:{
  42. 				type: Boolean,
  43. 				default: false
  44. 			},
  45. 			disablePreview: {
  46. 				type: Boolean,
  47. 				default: false
  48. 			},
  49. 			limit: {
  50. 				type: [Number, String],
  51. 				default: 9
  52. 			},
  53. 			imageStyles: {
  54. 				type: Object,
  55. 				default () {
  56. 					return {
  57. 						width: 'auto',
  58. 						height: 'auto',
  59. 						border: {}
  60. 					}
  61. 				}
  62. 			},
  63. 			delIcon: {
  64. 				type: Boolean,
  65. 				default: true
  66. 			},
  67. 			readonly:{
  68. 				type:Boolean,
  69. 				default:false
  70. 			}
  71. 		},
  72. 		computed: {
  73. 			styles() {
  74. 				let styles = {
  75. 					width: 'auto',
  76. 					height: 'auto',
  77. 					border: {}
  78. 				}
  79. 				return Object.assign(styles, this.imageStyles)
  80. 			},
  81. 			boxStyle() {
  82. 				const {
  83. 					width = 'auto',
  84. 						height = 'auto'
  85. 				} = this.styles
  86. 				let obj = {}
  87. 				if (height === 'auto') {
  88. 					if (width !== 'auto') {
  89. 						obj.height = this.value2px(width)
  90. 						obj['padding-top'] = 0
  91. 					} else {
  92. 						obj.height = 0
  93. 					}
  94. 				} else {
  95. 					obj.height = this.value2px(height)
  96. 					obj['padding-top'] = 0
  97. 				}
  98.  
  99. 				if (width === 'auto') {
  100. 					if (height !== 'auto') {
  101. 						obj.width = this.value2px(height)
  102. 					} else {
  103. 						obj.width = '33.3%'
  104. 					}
  105. 				} else {
  106. 					obj.width = this.value2px(width)
  107. 				}
  108.  
  109. 				let classles = ''
  110. 				for(let i in obj){
  111. 					classles+= `${i}:${obj[i]};`
  112. 				}
  113. 				return classles
  114. 			},
  115. 			borderStyle() {
  116. 				let {
  117. 					border
  118. 				} = this.styles
  119. 				let obj = {}
  120. 				const widthDefaultValue = 1
  121. 				const radiusDefaultValue = 3
  122. 				if (typeof border === 'boolean') {
  123. 					obj.border = border ? '1px #eee solid' : 'none'
  124. 				} else {
  125. 					let width = (border && border.width) || widthDefaultValue
  126. 					width = this.value2px(width)
  127. 					let radius = (border && border.radius) || radiusDefaultValue
  128. 					radius = this.value2px(radius)
  129. 					obj = {
  130. 						'border-width': width,
  131. 						'border-style': (border && border.style) || 'solid',
  132. 						'border-color': (border && border.color) || '#eee',
  133. 						'border-radius': radius
  134. 					}
  135. 				}
  136. 				let classles = ''
  137. 				for(let i in obj){
  138. 					classles+= `${i}:${obj[i]};`
  139. 				}
  140. 				return classles
  141. 			}
  142. 		},
  143. 		methods: {
  144. 			uploadFiles(item, index) {
  145. 				this.$emit("uploadFiles", item)
  146. 			},
  147. 			choose() {
  148. 				this.$emit("choose")
  149. 			},
  150. 			delFile(index) {
  151. 				this.$emit('delFile', index)
  152. 			},
  153. 			prviewImage(img, index) {
  154. 				let urls = []
  155. 				if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
  156. 					this.$emit("choose")
  157. 				}
  158. 				if(this.disablePreview) return
  159. 				this.filesList.forEach(i => {
  160. 					urls.push(i.url)
  161. 				})
  162.  
  163. 				uni.previewImage({
  164. 					urls: urls,
  165. 					current: index
  166. 				});
  167. 			},
  168. 			value2px(value) {
  169. 				if (typeof value === 'number') {
  170. 					value += 'px'
  171. 				} else {
  172. 					if (value.indexOf('%') === -1) {
  173. 						value = value.indexOf('px') !== -1 ? value : value + 'px'
  174. 					}
  175. 				}
  176. 				return value
  177. 			}
  178. 		}
  179. 	}
  180. </script>
  181.  
  182. <style lang="scss">
  183. 	.uni-file-picker__container {
  184. 		/* #ifndef APP-NVUE */
  185. 		display: flex;
  186. 		box-sizing: border-box;
  187. 		/* #endif */
  188. 		flex-wrap: wrap;
  189. 		margin: -5px;
  190. 	}
  191.  
  192. 	.file-picker__box {
  193. 		position: relative;
  194. 		// flex: 0 0 33.3%;
  195. 		width: 33.3%;
  196. 		height: 0;
  197. 		padding-top: 33.33%;
  198. 		/* #ifndef APP-NVUE */
  199. 		box-sizing: border-box;
  200. 		/* #endif */
  201. 	}
  202.  
  203. 	.file-picker__box-content {
  204. 		position: absolute;
  205. 		top: 0;
  206. 		right: 0;
  207. 		bottom: 0;
  208. 		left: 0;
  209. 		margin: 5px;
  210. 		border: 1px #eee solid;
  211. 		border-radius: 5px;
  212. 		overflow: hidden;
  213. 	}
  214.  
  215. 	.file-picker__progress {
  216. 		position: absolute;
  217. 		bottom: 0;
  218. 		left: 0;
  219. 		right: 0;
  220. 		/* border: 1px red solid; */
  221. 		z-index: 2;
  222. 	}
  223.  
  224. 	.file-picker__progress-item {
  225. 		width: 100%;
  226. 	}
  227.  
  228. 	.file-picker__mask {
  229. 		/* #ifndef APP-NVUE */
  230. 		display: flex;
  231. 		/* #endif */
  232. 		justify-content: center;
  233. 		align-items: center;
  234. 		position: absolute;
  235. 		right: 0;
  236. 		top: 0;
  237. 		bottom: 0;
  238. 		left: 0;
  239. 		color: #fff;
  240. 		font-size: 12px;
  241. 		background-color: rgba(0, 0, 0, 0.4);
  242. 	}
  243.  
  244. 	.file-image {
  245. 		width: 100%;
  246. 		height: 100%;
  247. 	}
  248.  
  249. 	.is-add {
  250. 		/* #ifndef APP-NVUE */
  251. 		display: flex;
  252. 		/* #endif */
  253. 		align-items: center;
  254. 		justify-content: center;
  255. 	}
  256.  
  257. 	.icon-add {
  258. 		width: 50px;
  259. 		height: 5px;
  260. 		background-color: #f1f1f1;
  261. 		border-radius: 2px;
  262. 	}
  263.  
  264. 	.rotate {
  265. 		position: absolute;
  266. 		transform: rotate(90deg);
  267. 	}
  268.  
  269. 	.icon-del-box {
  270. 		/* #ifndef APP-NVUE */
  271. 		display: flex;
  272. 		/* #endif */
  273. 		align-items: center;
  274. 		justify-content: center;
  275. 		position: absolute;
  276. 		top: 3px;
  277. 		right: 3px;
  278. 		height: 26px;
  279. 		width: 26px;
  280. 		border-radius: 50%;
  281. 		background-color: rgba(0, 0, 0, 0.5);
  282. 		z-index: 2;
  283. 		transform: rotate(-45deg);
  284. 	}
  285.  
  286. 	.icon-del {
  287. 		width: 15px;
  288. 		height: 2px;
  289. 		background-color: #fff;
  290. 		border-radius: 2px;
  291. 	}
  292. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/280343
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号