• uni-app：实现页面效果3

    效果

    代码

    1. <template>
    2. 	<view>
    3. 		
    4. 		<view class="content_position">
    5. 			<view class="content">
    6. 				<view class="SN">
    7. 					<view class="SN_title">设备1view>
    8. 					<view class="SN_input">
    9. 						SN：
    10. 						<input type="text">
    11. 					view>
    12. 				view>
    13. 				<view class="line1">
    14. 					<view class="line1_item3">
    15. 						<view class="item3_top">
    16. 							<view class="item3_top_title_position">
    17. 								<view class="wind_img">
    18. 									<image :src="wind" mode="" class="rotate-image" :style="rotateStyle">image>
    19. 								view>
    20. 							view>
    21. 							<view class="item3_top_canvas_position">
    22. 								<canvas style="width:100%; height: 20px;" canvas-id="firstCanvas"
    23. 									id="firstCanvas">canvas>
    24. 							view>
    25. 							<view class="item3_top_text_position">
    26. 								<view class="top_text1">
    27. 									<view>
    28. 										<view class="text_center">风速view>
    29. 										<view class="circle">
    30. 											<view>
    31. 												<view class="text_center">
    32. 													<text>{{rotationSpeed}}text>M/S
    33. 												view>
    34. 											view>
    35. 										view>
    36. 									view>
    37. 								view>
    38. 							view>
    39. 						view>
    40. 						<view class="item3_bottom">
    41. 							<view class="line1_item3_block2">
    42. 								<view class="block2">
    43. 									<view class="title">
    44. 										风速信号输入
    45. 									view>
    46. 									<view class="green_ring_select">
    47. 										<view>AI3view>
    48. 										<view>
    49. 											<image :src="down" mode="">image>
    50. 										view>
    51. 									view>
    52. 									<view class="block2_input">
    53. 										<view class="block2_input_title">
    54. 											量程
    55. 										view>
    56. 										<view class="block2_input_data">
    57. 											<view class="input_data">
    58. 												<input type="text" value="0M/S">
    59. 											view>
    60. 											<view class="input_data">
    61. 												<input type="text" value="40M/S">
    62. 											view>
    63. 										view>
    64. 									view>
    65. 								view>
    66. 							view>
    67. 							<view class="line1_item3_block2">
    68. 								<view class="block2">
    69. 									<view class="title">
    70. 										CO信号输入
    71. 									view>
    72. 									<view class="green_ring_select">
    73. 										<view>AI4view>
    74. 										<view>
    75. 											<image :src="down" mode="">image>
    76. 										view>
    77. 									view>
    78. 									<view class="block2_input">
    79. 										<view class="block2_input_data1">
    80. 											<view class="input_data">
    81. 												<view class="input_data_title">0°view>
    82. 												<input type="text" value="4mA">
    83. 											view>
    84. 											<view class="input_data">
    85. 												<view class="input_data_title">180°view>
    86. 												<input type="text" value="12mA">
    87. 											view>
    88. 										view>
    89. 									view>
    90. 								view>
    91. 							view>
    92. 						view>
    93. 					view>
    94. 				view>
    95.  
    96. 			view>
    97. 		view>
    98. 	view>
    99. template>
    100.  
    101. <script>
    102. 	export default {
    103. 		data() {
    104. 			return {
    105. 				wind: getApp().globalData.icon + 'look/wind.png',
    106. 				down: getApp().globalData.icon + 'look/down.png',
    107. 				rotationSpeed: 1, // 自定义的旋转速度，数值越大转的越快
    108. 			}
    109. 		},
    110. 		onReady: function(e) {
    111. 			//创建一个画布上下文对象，用于进行绘图操作。'firstCanvas'是一个指定的画布标识符，表示在页面上的哪个  元素上进行绘制。
    112. 			var context = uni.createCanvasContext('firstCanvas')
    113. 			var width = '';
    114. 			const query = uni.createSelectorQuery();
    115. 			//获取宽度
    116. 			query.select('#firstCanvas').fields({
    117. 				size: true
    118. 			}, (res) => {
    119. 				width = res.width;
    120. 				//获取到宽度之后进行绘制
    121. 				//绘制路径中的线条。
    122. 				context.setStrokeStyle("#aaaaff")
    123. 				// 设置线条的宽度为2个像素。
    124. 				context.setLineWidth(2)
    125. 				// 绘制横线
    126. 				context.beginPath(); // 开始路径绘制
    127. 				context.moveTo(width / 2, 0); // 将起点移动到 (0, 100)
    128. 				context.lineTo(width / 2, 20);
    129. 				context.stroke(); // 绘制线条
    130. 				// 将之前的绘图操作渲染到画布上。
    131. 				context.draw()			
    132. 			}).exec();
    133.  
    134. 			
    135. 		},
    136. 		computed: {
    137. 			rotateStyle() {
    138. 				const duration = 1 / this.rotationSpeed + "s"; // 根据旋转速度计算动画持续时间
    139. 				return {
    140. 					animationDuration: duration
    141. 				};
    142. 			}
    143. 		},
    144. 		methods: {}
    145. 	}
    146. script>
    147.  
    148. <style lang="scss">
    149. 	page {
    150. 		background-color: #f3f4f6;
    151. 	}
    152.  
    153. 	/* 总体样式 */
    154. 	.content_position {
    155. 		width: 100%;
    156. 		display: flex;
    157. 		align-items: center;
    158. 		justify-content: center;
    159. 	}
    160.  
    161. 	.content {
    162. 		width: 90%;
    163. 		padding: 2% 0;
    164.  
    165. 	}
    166.  
    167. 	/* SN 样式 */
    168. 	.SN {
    169. 		color: #6b6c6e;
    170. 		padding: 2%;
    171. 		display: flex;
    172. 		// border:1px solid black;
    173. 		justify-content: space-between;
    174.  
    175. 		/* 将左右视图分散对齐 */
    176. 		.SN_input {
    177. 			display: flex;
    178.  
    179. 			// border:1px solid black;
    180. 			input {
    181. 				border-bottom: 1px solid #a3a4a6;
    182. 				width: 200rpx;
    183. 			}
    184.  
    185. 			image {
    186. 				width: 48rpx;
    187. 				height: 48rpx;
    188. 			}
    189. 		}
    190. 	}
    191.  
    192. 	// 行1样式
    193. 	.line1 {
    194. 		// border: 1px solid black;
    195. 		background-color: #fff;
    196. 		border-radius: 15px;
    197. 		margin: 5% 0;
    198. 		padding: 3% 5%;
    199. 	}
    200.  
    201. 	.line1_item3 {
    202. 		// border: 1px solid black;
    203. 		margin-top: 5%;
    204. 	}
    205.  
    206. 	.wind_img {
    207. 		// border: 1px solid black;
    208. 		background-color: #edf1fc;
    209. 		width: 150rpx;
    210. 		height: 150rpx;
    211. 		display: flex;
    212. 		align-items: center;
    213. 		justify-content: center;
    214. 		border-radius: 50%;
    215.  
    216. 		image {
    217. 			width: 90rpx;
    218. 			height: 90rpx;
    219. 		}
    220. 	}
    221.  
    222. 	.text_center {
    223. 		display: flex;
    224. 		align-items: center;
    225. 		justify-content: center;
    226. 	}
    227.  
    228. 	//圆环图标
    229. 	.item3_top_title_position {
    230. 		display: flex;
    231. 		align-items: center;
    232. 		justify-content: center;
    233. 		// border: 1px solid black;
    234. 	}
    235.  
    236. 	//画布位置
    237. 	.item3_top_canvas_position {
    238. 		display: flex;
    239. 		align-items: center;
    240. 		justify-content: center;
    241. 	}
    242.  
    243. 	//文本位置
    244. 	.item3_top_text_position {
    245. 		position: relative;
    246. 		height: 400rpx;
    247. 	}
    248.  
    249. 	//圆环
    250. 	.circle {
    251. 		margin-top: 20%;
    252. 		width: 140rpx;
    253. 		height: 140rpx;
    254. 		border-radius: 50%;
    255. 		font-size: 95%;
    256. 		display: flex;
    257. 		align-items: center;
    258. 		justify-content: center;
    259. 		background-color: #e8e8e8;
    260. 	}
    261.  
    262. 	.top_text1 {
    263. 		position: absolute;
    264. 		left: 50%;
    265. 		transform: translateX(-50%);
    266. 		// border: 1px solid black;
    267. 		width: 220rpx;
    268. 		height: 300rpx;
    269. 		background-color: #edf1fc;
    270. 		border-radius: 10px;
    271. 		display: flex;
    272. 		align-items: center;
    273. 		justify-content: center;
    274. 	}
    275.  
    276. 	// 底部样式
    277. 	.item3_bottom {
    278. 		display: flex;
    279. 		justify-content: space-between; //分散排列
    280. 		// border: 1px solid black;
    281. 	}
    282.  
    283. 	//两列
    284. 	.line1_item3_block2 {
    285. 		display: flex;
    286. 		text-align: center;
    287. 		margin: 0 5%; //增加底部两个模块之间的距离
    288. 	}
    289.  
    290. 	//两个小块样式
    291. 	.block2_input {
    292. 		display: flex;
    293. 		width: 100%;
    294. 	}
    295.  
    296. 	// 底部两小块标题
    297. 	.block2_input_title {
    298. 		// border: 1px solid black;
    299. 		display: flex;
    300. 		align-items: center; //竖直居中
    301. 		justify-content: center; //水平居中
    302. 	}
    303.  
    304. 	// .input_data_title{
    305. 	// 	margin-right: 5%;
    306. 	// }
    307. 	.block2_input_data {
    308. 		width: 70%;
    309. 	}
    310.  
    311. 	.block2_input_data1 {
    312. 		width: 100%;
    313. 	}
    314.  
    315. 	.block2_input_data1 input {
    316. 		margin: 5rpx 0;
    317. 		border: 1px solid #808080;
    318. 		border-radius: 20px;
    319. 		padding: 2% 5%;
    320. 		color: #737373;
    321. 		text-align: right;
    322. 	}
    323.  
    324. 	.input_data {
    325. 		display: flex;
    326. 		align-items: center;
    327. 		height: 80rpx;
    328. 		// border: 1px solid black;
    329. 	}
    330.  
    331. 	.block2_input_data input {
    332. 		margin: 5rpx 0;
    333. 		border: 1px solid #808080;
    334. 		border-radius: 20px;
    335. 		padding: 2% 5%;
    336. 		color: #737373;
    337. 		text-align: right;
    338.  
    339. 	}
    340.  
    341. 	//绿环样式
    342. 	.green_ring_select {
    343. 		background-color: #6da54f;
    344. 		border-radius: 20px;
    345. 		color: #fff;
    346. 		font-size: 95%;
    347. 		display: flex;
    348. 		align-items: center;
    349. 		padding: 3% 0;
    350. 		margin: 5% 0;
    351.  
    352. 		// width:200rpx;
    353. 		view:nth-child(1) {
    354. 			width: 60%;
    355. 			display: flex;
    356. 			justify-content: center;
    357. 			align-items: center;
    358. 		}
    359.  
    360. 		view:nth-child(2) {
    361. 			width: 40%;
    362. 			display: flex;
    363. 			justify-content: center;
    364. 			align-items: center;
    365.  
    366. 			image {
    367. 				width: 30rpx;
    368. 				height: 30rpx;
    369. 			}
    370. 		}
    371. 	}
    372.  
    373. 	// 旋转风扇
    374. 	.rotate-image {
    375. 		animation: rotateAnimation linear infinite;
    376. 		transform-origin: center center;
    377. 		transform: translate3d(0, 0, 0);
    378. 	}
    379.  
    380. 	@keyframes rotateAnimation {
    381. 		from {
    382. 			transform: rotate(0deg);
    383. 		}
    384.  
    385. 		to {
    386. 			transform: rotate(360deg);
    387. 		}
    388. 	}
    389. style>

  • 相关阅读:
    PAT A1034 Head of a Gang
    Web前端开发技术课程大作业，期末考试HTML+CSS+JavaScript电竞游戏介绍网站
    软件测试: 测试用例
    Improved Baselines with Momentum Contrastive Learning 论文学习
    【MyBatis笔记10】Mybatis中几个动态SQL标签和内置参数
    day22每日一考
    VMware 虚拟机中 Linux 系统Centos7磁盘空间扩容
    YOLO目标检测——无人机航拍输电线路绝缘瓷瓶数据集下载分享【对应voc、coco和yolo三种格式标签】
    WeTab--颜值与实力并存的浏览器插件
    Linux学习6—文件的查找与压缩
  • 原文地址：https://blog.csdn.net/weixin_46001736/article/details/133359500