• uni app 打肉肉（打飞机）小游戏

    都给老婆和孩子写了 合十  钓鱼了，给自己写个打飞机吧。没找飞机怪兽的图片。就用馒头和肉肉代替了。有问题不要私信我。自己改哈

    1. <template>
    2. 	<view class="page_main">
    3.  
    4.  
    5. 		<view class="contentone">
    6. 			<canvas class="canvas_cla" style="z-index: 1;" canvas-id="myCanvas" id="myCanvas"></canvas>
    7.  
    8. 		</view>
    9. 		<view class="contentone">
    10. 			<canvas class="canvas_cla" style="z-index: 2;" canvas-id="myCanvasb" id="myCanvasb"></canvas>
    11.  
    12. 		</view>
    13.  
    14. 		<view class="contenttwo">
    15. 			<canvas class="canvas_cla" style="z-index: 9;" canvas-id="myCanvasa" id="myCanvasa" @touchstart="touchstart"
    16. 				@touchend="touchend" @touchmove="touchmove"></canvas>
    17.  
    18. 		</view>
    19.  
    20.  
    21. 		<view class="zhezhao" v-if="isshowstart">
    22. 			<view class="dialog_back">
    23. 				<cover-view class="add_button_ef" style=" color: #07a5a6;" @tap.stop.prevent="start_zhezhao">
    24. 					开始
    25. 				</cover-view>
    26. 				<cover-view class="add_button_ef" style="color: #07a5a6;" @tap.stop.prevent="back_zhezhao">
    27. 					返回
    28. 				</cover-view>
    29. 			</view>
    30. 		</view>
    31.  
    32.  
    33.  
    34.  
    35.  
    36.  
    37.  
    38. 	</view>
    39. </template>
    40.  
    41. <script>
    42. 	export default {
    43. 		data() {
    44. 			return {
    45. 				isshowstart: true,
    46. 				canvaswidth: 0,
    47. 				canvasheight: 0,
    48.  
    49. 				ctx: null, // canvas 上下文  
    50. 				ctxtwo: null, // canvas 上下文  
    51. 				ctxthree: null, // canvas 上下文  
    52.  
    53. 				background: {
    54. 					images: ['../static/fangzi1.png', '../static/fangzi1.png'], // 图片资源数组
    55.  
    56. 					speed: 2, // 滚动速度  
    57. 					position: 0, // 图片当前位置 
    58. 				},
    59.  
    60. 				zhujue: {
    61. 					x: 0,
    62. 					y: 0,
    63. 					image: '../static/addpeople.png',
    64. 					size: 50,
    65. 					speed: 2,
    66. 					ismoveing: false,
    67. 					value: 200,
    68. 					zdvalue: 20,
    69. 					fstime: 120,
    70. 					zdsize: 10,
    71. 					lives: 5,
    72. 					wdtime: 0,
    73. 					isdie: false,
    74.  
    75.  
    76.  
    77. 				},
    78. 				zhujpz: false,
    79. 				zjzdlist: [],
    80. 				gslist: [],
    81. 				bosslist: [],
    82.  
    83. 				guankadefen: 0,
    84. 				defen: 0,
    85. 				guanka: 1,
    86. 				isboos: false,
    87.  
    88.  
    89.  
    90. 				ytimerX: null, // requestAnimationFrame 的 ID 
    91. 				zjfszdtimer: '',
    92.  
    93. 				jspztimer: '',
    94.  
    95.  
    96. 			};
    97. 		},
    98. 		onLoad() {
    99.  
    100.  
    101. 		},
    102.  
    103. 		onReady() {
    104.  
    105.  
    106. 			this.init()
    107. 		},
    108.  
    109. 		/**
    110. 		 * 生命周期函数--监听页面卸载
    111. 		 */
    112. 		onUnload: function() {
    113. 			this.game_stop()
    114. 		},
    115. 		methods: {
    116. 			start_zhezhao: function() {
    117. 				this.isshowstart = false
    118.  
    119. 				this.game_start(); // 开始滚动  
    120.  
    121. 			},
    122. 			back_zhezhao: function() {
    123. 				uni.navigateBack({
    124. 					delta: 1
    125. 				})
    126. 			},
    127. 			init: function() {
    128.  
    129. 				this.ctx = uni.createCanvasContext('myCanvas');
    130. 				this.ctxtwo = uni.createCanvasContext('myCanvasa');
    131. 				this.ctxthree = uni.createCanvasContext('myCanvasb');
    132. 				let canvas = uni.createSelectorQuery().select('#myCanvas');
    133. 				canvas.boundingClientRect(rect => {
    134. 					this.canvaswidth = rect.width
    135. 					this.canvasheight = rect.height
    136. 					this.zhujue.x = (rect.width - this.zhujue.size) / 2
    137. 					this.zhujue.y = rect.height - this.zhujue.size - 50
    138. 					this.drawzj()
    139. 				}).exec();
    140. 				this.drawbackg();
    141.  
    142.  
    143. 			},
    144.  
    145. 			drawzj: function() {
    146.  
    147. 				if (this.zhujue.x < 0) {
    148. 					this.zhujue.x = 0
    149. 				}
    150. 				if (this.zhujue.x > this.canvaswidth - this.zhujue.size) {
    151. 					this.zhujue.x = this.canvaswidth - this.zhujue.size
    152. 				}
    153.  
    154. 				if (this.zhujue.y < 0) {
    155. 					this.zhujue.y = 0
    156. 				}
    157. 				if (this.zhujue.y > this.canvasheight - this.zhujue.size) {
    158. 					this.zhujue.y = this.canvasheight - this.zhujue.size
    159. 				}
    160. 				if (this.zhujpz) {
    161. 					this.ctxtwo.drawImage('../static/mantou.png', this.zhujue.x, this.zhujue.y - 30, this.zhujue.size -
    162. 						20, this.zhujue.size - 20); // 绘制图片  
    163. 					this.zjdrawbaopo()
    164. 				}
    165. 				this.ctxtwo.drawImage(this.zhujue.image, this.zhujue.x, this.zhujue.y, this.zhujue.size, this.zhujue
    166. 					.size); // 绘制图片  
    167.  
    168. 				this.ctxtwo.draw();
    169.  
    170. 			},
    171. 			drawzjzd: function() {
    172.  
    173.  
    174.  
    175. 				for (var i = 0; i < this.zjzdlist.length; i++) {
    176.  
    177. 					if (this.zjzdlist[i].isuse) {
    178. 						this.zjzdlist.splice(i, 1)
    179. 						i--
    180. 					} else {
    181. 						this.ctxthree.drawImage(this.zjzdlist[i].image, this.zjzdlist[i].x, this.zjzdlist[i].y,
    182. 							this.zhujue.zdsize, this.zhujue.zdsize); // 绘制图片  
    183. 					}
    184.  
    185.  
    186. 				}
    187. 				if (this.isboos) {
    188. 					this.drawboos()
    189. 				} else {
    190. 					this.drawgs()
    191. 				}
    192.  
    193. 				this.ctxthree.draw();
    194. 			},
    195.  
    196. 			zjfszd: function() {
    197. 				this.zjfszdtimer = setInterval(() => {
    198. 					var zd = {
    199. 						x: this.zhujue.x + this.zhujue.size / 2 - this.zhujue.zdsize / 2,
    200. 						y: this.zhujue.y,
    201. 						image: '../static/mantou.png',
    202. 						speed: 3,
    203. 						isuse: false
    204. 					}
    205. 					this.zjzdlist.push(zd)
    206. 				}, this.zhujue.fstime);
    207. 			},
    208.  
    209. 			scgs: function() {
    210.  
    211.  
    212. 				let gs = {
    213. 					x: this.getRandomInt(50, this.canvaswidth - 50),
    214. 					y: -45,
    215. 					size: 20 + this.guanka * 3,
    216. 					image: "../static/rou.png",
    217. 					value: 100 * this.guanka * 0.8,
    218. 					speed: 0.5 * this.guanka * 0.8,
    219. 					isfszd: this.getRandomInt(0, 1),
    220. 					isdj: this.getRandomInt(0, 2), // 怪兽携带道具 0 不带 1 子弹威力+0.1   2 发射速度-0.5
    221. 					zdspeed: 5 * this.guanka * 0.5,
    222. 					isover: false
    223. 				}
    224. 				this.gslist.push(gs)
    225.  
    226. 			},
    227. 			drawgs: function() {
    228. 				for (var i = 0; i < this.gslist.length; i++) {
    229. 					if (this.gslist[i].isover) {
    230. 						this.drawbaopo(this.gslist[i])
    231. 						this.gslist.splice(i, 1)
    232. 						i--
    233. 					} else {
    234. 						this.gslist[i].y += this.gslist[i].speed
    235. 						this.ctxthree.drawImage(this.gslist[i].image, this.gslist[i].x, this.gslist[i].y, this
    236. 							.gslist[i].size, this.gslist[i].size); // 绘制图片  	
    237. 					}
    238.  
    239. 				}
    240.  
    241. 			},
    242. 			drawboos: function() {
    243. 				var that = this
    244. 				// 计算物体A需要移动的距离和方向
    245. 				const dx = that.bosslist[0].x + that.bosslist[0].size / 2 - that.bosslist[0].mbx; // 水平移动距离  
    246. 				const dy = that.bosslist[0].y + that.bosslist[0].size / 2 - that.bosslist[0]
    247. 					.mby // 垂直移动距离为0，因为我们只想在水平方向上移动  
    248.  
    249.  
    250. 				if (dx > 10) {
    251. 					that.bosslist[0].x = that.bosslist[0].x - that.bosslist[0].speed
    252. 				} else if (dx < -10) {
    253. 					that.bosslist[0].x = that.bosslist[0].x + that.bosslist[0].speed
    254. 				}
    255. 				if (dy > 10) {
    256. 					that.bosslist[0].y = that.bosslist[0].y - that.bosslist[0].speed
    257. 				} else if (dy < -10) {
    258. 					that.bosslist[0].y = that.bosslist[0].y + that.bosslist[0].speed
    259. 				}
    260.  
    261.  
    262. 				that.ctxthree.drawImage(that.bosslist[0].image, that.bosslist[0].x, that.bosslist[0].y,
    263. 					that.bosslist[0].size, that.bosslist[0].size); // 绘制图片
    264.  
    265. 				if (dy <= 10 && dy >= -10 && dx <= 10 && dx >= -10) {
    266.  
    267. 					if (!that.bosslist[0].isover) {
    268. 						that.bosslist[0].mbx = that.getRandomInt(50, that.canvaswidth - 50)
    269. 						that.bosslist[0].mby = that.getRandomInt(50, that.canvasheight - 50)
    270. 						that.bosslist[0].speed = that.getRandomInt(1, 5)
    271.  
    272. 					}
    273.  
    274. 				}
    275.  
    276.  
    277.  
    278. 			},
    279. 			drawbaopo: function(bean) {
    280. 				var that = this
    281. 				let counter = 0; // 计数器，记录执行次数  
    282. 				const intervalId = setInterval(function() {
    283. 					// 这里是你的操作代码  
    284. 					that.ctxthree.drawImage("../static/mantou.png", bean.x, bean.y, bean.size, bean
    285. 						.size); // 绘制图片  
    286.  
    287. 					counter++; // 每次执行，计数器加1  
    288.  
    289. 					// 检查是否达到了执行三次的条件  
    290. 					if (counter >= 10) {
    291. 						clearInterval(intervalId); // 清除定时器  
    292.  
    293. 					}
    294. 				}, 100); // 每秒执行一次（1000毫秒）
    295.  
    296.  
    297. 			},
    298. 			zjdrawbaopo: function() {
    299. 				var that = this
    300. 				let counter = 0; // 计数器，记录执行次数  
    301. 				const intervalId = setInterval(function() {
    302. 					// 这里是你的操作代码  
    303.  
    304. 					counter++; // 每次执行，计数器加1  
    305.  
    306. 					// 检查是否达到了执行三次的条件  
    307. 					if (counter >= 10) {
    308. 						that.zhujpz = false
    309. 						clearInterval(intervalId); // 清除定时器  
    310.  
    311. 					}
    312. 				}, 100); // 每秒执行一次（1000毫秒）
    313.  
    314.  
    315. 			},
    316.  
    317.  
    318. 			/**
    319. 			 * 触摸屏幕开始 记录开始坐标
    320. 			 */
    321. 			touchstart: function(e) {
    322.  
    323. 				let startx = e.touches[0].x
    324. 				let starty = e.touches[0].y
    325.  
    326. 				if (startx > this.zhujue.x && startx < this.zhujue.x + this.zhujue.size && starty > this.zhujue.y &&
    327. 					starty < this.zhujue.y + this.zhujue.size) {
    328.  
    329. 					this.zhujue.x = startx - this.zhujue.size / 2
    330. 					this.zhujue.y = starty - this.zhujue.size / 2
    331. 					this.zhujue.ismoveing = true
    332.  
    333. 					this.drawzj()
    334. 				}
    335.  
    336.  
    337.  
    338. 			},
    339. 			/**
    340. 			 * 触摸屏幕结束 计算
    341. 			 */
    342. 			touchend: function(e) {
    343. 				let x = e.changedTouches[0].x
    344. 				let y = e.changedTouches[0].y
    345. 				this.zhujue.ismoveing = false
    346. 			},
    347. 			/**
    348. 			 * 触摸屏幕移动  画框
    349. 			 */
    350. 			touchmove: function(e) {
    351. 				let x = e.touches[0].x
    352. 				let y = e.touches[0].y
    353. 				if (this.zhujue.ismoveing) {
    354. 					this.zhujue.x = x - this.zhujue.size / 2
    355. 					this.zhujue.y = y - this.zhujue.size / 2
    356.  
    357.  
    358. 					this.drawzj()
    359. 				}
    360.  
    361. 			},
    362.  
    363. 			drawbackg: function() {
    364.  
    365.  
    366.  
    367.  
    368. 				this.background.position += this.background.speed; // 更新图片位置
    369. 				if (this.background.position > this.canvasheight) { // 如果图片完全移出视口  
    370. 					this.background.position = 0; // 将图片重新放置在视口的另一端  
    371. 				}
    372. 				this.ctx.clearRect(0, 0, this.canvaswidth, this.canvaswidth); // 清除画布  
    373. 				this.ctx.drawImage(this.background.images[0], 0, this.background.position, this.canvaswidth, this
    374. 					.canvasheight); // 绘制图片  
    375. 				this.ctx.drawImage(this.background.images[1], 0, this.background.position - this.canvasheight, this
    376. 					.canvaswidth, this
    377. 					.canvasheight); // 绘制图片 
    378.  
    379. 				this.ctx.setFontSize(14); // 设置字体大小  
    380. 				this.ctx.setFillStyle('white'); // 设置填充颜色为白色  
    381. 				this.ctx.setTextAlign('center'); // 设置文本水平对齐方式为居中  
    382. 				this.ctx.setTextBaseline('middle'); // 设置文本垂直对齐方式为中间  
    383. 				this.ctx.fillText('剩余' + this.zhujue.lives, 40, 30); // 在圆心位置绘制文本“按钮” 
    384.  
    385. 				this.ctx.setFontSize(14); // 设置字体大小  
    386. 				this.ctx.setFillStyle('white'); // 设置填充颜色为白色  
    387. 				this.ctx.setTextAlign('center'); // 设置文本水平对齐方式为居中  
    388. 				this.ctx.setTextBaseline('middle'); // 设置文本垂直对齐方式为中间  
    389. 				this.ctx.fillText('总得分' + this.defen, 120, 30); // 在圆心位置绘制文本“按钮” 
    390.  
    391. 				this.ctx.setFontSize(14); // 设置字体大小
    392. 				this.ctx.setFillStyle('white'); // 设置填充颜色为白色  
    393. 				this.ctx.setTextAlign('center'); // 设置文本水平对齐方式为居中  
    394. 				this.ctx.setTextBaseline('middle'); // 设置文本垂直对齐方式为中间  
    395. 				this.ctx.fillText('关卡' + this.guanka, 200, 30); // 在圆心位置绘制文本“按钮” 
    396.  
    397. 				this.ctx.setFontSize(14); // 设置字体大小
    398. 				this.ctx.setFillStyle('white'); // 设置填充颜色为白色  
    399. 				this.ctx.setTextAlign('center'); // 设置文本水平对齐方式为居中  
    400. 				this.ctx.setTextBaseline('middle'); // 设置文本垂直对齐方式为中间  
    401. 				this.ctx.fillText('关卡得分' + this.guankadefen, 280, 30); // 在圆心位置绘制文本“按钮” 
    402.  
    403. 				this.ctx.draw();
    404. 			},
    405.  
    406.  
    407.  
    408. 			game_start: function() {
    409.  
    410. 				this.zjfszd()
    411.  
    412. 				this.jisuanpz()
    413.  
    414. 				this.ytimerX = setInterval(() => {
    415.  
    416. 					for (var i = 0; i < this.zjzdlist.length; i++) {
    417. 						this.zjzdlist[i].y -= this.zjzdlist[i].speed
    418. 						if (this.zjzdlist[i].y < 0) {
    419. 							this.zjzdlist.splice(i, 1)
    420. 						}
    421. 					}
    422. 					if (this.isboos) {
    423. 						if (this.bosslist.length == 0) {
    424. 							this.bosslist = [{
    425. 								x: this.canvaswidth / 2,
    426. 								y: 0,
    427. 								size: 30 + this.guanka * 8,
    428. 								image: "../static/rou.png",
    429. 								value: 1000 * this.guanka * 0.8,
    430. 								speed: this.getRandomInt(1, 5),
    431. 								isfszd: this.getRandomInt(0, 1),
    432. 								zdspeed: 5,
    433. 								isover: false,
    434. 								mbx: this.getRandomInt(50, this.canvaswidth - 50),
    435. 								mby: this.getRandomInt(50, this.canvasheight - 50),
    436.  
    437. 							}]
    438. 						}
    439.  
    440. 					} else {
    441. 						if (this.gslist.length == 0) {
    442. 							this.scgs()
    443. 						}
    444. 						for (var i = 0; i < this.gslist.length; i++) {
    445. 							this.gslist[i].y += this.gslist[i].speed
    446. 							if (this.gslist.length < 12 && this.gslist[this.gslist.length - 1].y > 80) {
    447. 								this.scgs()
    448. 							}
    449. 							if (this.gslist[i].y > this.canvasheight) {
    450.  
    451. 								this.gslist[i].y = -45
    452. 							}
    453. 						}
    454. 					}
    455.  
    456.  
    457.  
    458. 					this.drawbackg();
    459. 					this.drawzjzd()
    460.  
    461. 				}, 16); // 每100毫秒更新一次位置 
    462. 			},
    463.  
    464.  
    465. 			jisuanpz: function() {
    466.  
    467.  
    468.  
    469. 				this.jspztimer = setInterval(() => {
    470.  
    471.  
    472. 					if (this.zhujue.wdtime > 0) {
    473. 						this.zhujue.wdtime -= 1
    474. 					}
    475. 					this.isCollidingbyzjzdAndGS()
    476. 					this.isCollidingbyzjAndGS()
    477.  
    478. 				}, 16); // 每100毫秒更新一次位置 
    479. 			},
    480.  
    481.  
    482. 			game_stop: function() {
    483.  
    484. 				clearInterval(this.ytimerX); // 停止动画  
    485. 				clearInterval(this.zjfszdtimer);
    486.  
    487. 				clearInterval(this.jspztimer);
    488.  
    489. 				this.isshowstart = true
    490.  
    491. 			},
    492.  
    493. 			/**
    494. 			 * 生成min 到 max 的随机数
    495. 			 */
    496. 			getRandomInt: function(min, max) {
    497. 				min = Math.ceil(min);
    498. 				max = Math.floor(max);
    499. 				return Math.floor(Math.random() * (max - min + 1)) + min;
    500. 			},
    501. 			isCollidingbyzjzdAndGS: function() {
    502. 				var arr
    503. 				if (this.isboos) {
    504. 					arr = this.bosslist
    505.  
    506. 				} else {
    507. 					arr = this.gslist
    508. 				}
    509.  
    510.  
    511. 				for (var j = 0; j < arr.length; j++) {
    512. 					let gsbean = arr[j]
    513. 					if (!gsbean.isover && gsbean.y > 0) {
    514. 						for (var i = 0; i < this.zjzdlist.length; i++) {
    515. 							let zjzdbean = this.zjzdlist[i]
    516. 							if (!zjzdbean.isuse) {
    517. 								let zdx = zjzdbean.x + this.zhujue.zdsize / 2
    518. 								let zdy = zjzdbean.y + this.zhujue.zdsize / 2
    519. 								if (zdx > gsbean.x && zdx < gsbean.x + gsbean.size && zdy > gsbean.y && zdy < gsbean
    520. 									.y + gsbean.size) {
    521. 									this.zjzdlist[i].isuse = true
    522. 									if (this.isboos) {
    523. 										this.defen += 10
    524. 										this.guankadefen += 10
    525. 										gsbean.value = gsbean.value - this.zhujue.zdvalue
    526. 										if (gsbean.value <= 0) {
    527. 											//消灭怪兽
    528. 											console.log(JSON.stringify(gsbean))
    529. 											if (gsbean.isdj == 1) {
    530. 												this.zhujue.zdvalue += 0.1
    531. 											}
    532. 											if (gsbean.isdj == 2) {
    533. 												this.zhujue.fstime -= 0.5
    534. 											}
    535. 											this.bosslist[j].isover = true
    536. 											this.defen += 100
    537. 											this.bosslist = []
    538. 											this.isboos = false
    539. 											this.guanka += 1
    540. 											this.guankadefen = 0
    541. 											this.zhujue.zdvalue += 5
    542. 											this.zhujue.fstime -= 1
    543. 											if (this.guanka % 2 == 0) {
    544. 												this.zhujue.lives += 1
    545. 											}
    546. 										}
    547.  
    548. 									} else {
    549. 										//产生碰撞
    550.  
    551. 										this.defen += 5
    552. 										this.guankadefen += 5
    553. 										gsbean.value = gsbean.value - this.zhujue.zdvalue
    554. 										if (gsbean.value <= 0) {
    555. 											//消灭怪兽
    556. 											console.log(JSON.stringify(gsbean))
    557. 											if (gsbean.isdj == 1) {
    558. 												this.zhujue.zdvalue += 0.1
    559. 											}
    560. 											if (gsbean.isdj == 2) {
    561. 												this.zhujue.fstime -= 0.5
    562. 											}
    563. 											this.gslist[j].isover = true
    564. 											this.defen += 5
    565. 											this.guankadefen += 5
    566. 										}
    567.  
    568. 									}
    569. 									if (this.guankadefen >= 1000 * this.guanka * 1) {
    570. 										this.isboos = true
    571. 										this.gslist = []
    572. 									}
    573. 								}
    574. 							}
    575. 						}
    576. 					}
    577. 				}
    578. 			},
    579. 			isCollidingbyzjAndGS: function() {
    580.  
    581.  
    582.  
    583. 				let zjx = this.zhujue.x + this.zhujue.size / 2
    584. 				let zjy = this.zhujue.y + this.zhujue.size / 2
    585.  
    586. 				var arr
    587. 				if (this.isboos) {
    588. 					arr = this.bosslist
    589. 				} else {
    590. 					arr = this.gslist
    591. 				}
    592.  
    593.  
    594. 				for (var j = 0; j < arr.length; j++) {
    595. 					let gsbean = arr[j]
    596.  
    597. 					if (!gsbean.isover) {
    598. 						let gsx = gsbean.x
    599. 						let gsy = gsbean.y
    600. 						let gssize = gsbean.size
    601.  
    602. 						if (zjx < gsx + gssize && zjx > gsx && zjy < gsy + gssize && zjy > gsy) {
    603. 							console.log("11111")
    604. 							console.log("主角发生碰撞", this.zhujue.wdtime)
    605. 							if (this.zhujue.wdtime <= 0) {
    606. 								if (this.isboos) {
    607.  
    608. 									this.zhujue.value -= gsbean.value
    609.  
    610. 								} else {
    611. 									this.gslist[j].isover = true
    612. 									this.zhujue.value -= gsbean.value
    613. 									this.zhujpz = true
    614. 								}
    615. 							}
    616.  
    617.  
    618.  
    619. 							if (this.zhujue.value <= 0) {
    620. 								console.log("主角死了。结束")
    621. 								this.zhujue.lives -= 1
    622. 								this.zhujue.wdtime = 300
    623. 								if (this.zhujue.lives < 0) {
    624. 									this.game_stop()
    625. 								} else {
    626. 									this.zhujue.value = 200
    627. 								}
    628.  
    629. 							}
    630.  
    631. 						}
    632.  
    633.  
    634. 					}
    635.  
    636. 				}
    637. 			},
    638.  
    639. 		}
    640. 	};
    641. </script>
    642.  
    643. <style scoped>
    644. 	.contentone {
    645. 		width: 100vw;
    646. 		height: 100vh;
    647. 		position: absolute;
    648.  
    649. 		display: flex;
    650. 		justify-content: center;
    651.  
    652. 	}
    653.  
    654. 	.contenttwo {
    655. 		width: 100vw;
    656. 		height: 100vh;
    657. 		position: absolute;
    658.  
    659. 		display: flex;
    660. 		justify-content: center;
    661.  
    662. 	}
    663.  
    664. 	.canvas_cla {
    665. 		width: 100vw;
    666. 		height: 100vh;
    667. 	}
    668.  
    669.  
    670. 	.top_linear {
    671. 		display: flex;
    672. 		flex-direction: row;
    673. 		justify-content: space-between;
    674. 		display: flex;
    675. 		flex-direction: row;
    676. 		height: 80rpx;
    677.  
    678. 	}
    679.  
    680. 	.top_mean_left {
    681. 		margin-left: 32rpx;
    682.  
    683. 	}
    684.  
    685. 	.top_mean_right {
    686. 		margin-right: 32rpx;
    687.  
    688. 	}
    689.  
    690. 	.top_mean_tv {
    691. 		color: #07a5a6;
    692. 	}
    693.  
    694.  
    695. 	.page_main {
    696. 		position: fixed;
    697. 		overflow: hidden;
    698. 		width: 100vw;
    699. 		height: 100vh;
    700. 		background-color: #efefef;
    701. 	}
    702.  
    703. 	.zhezhao {
    704. 		position: fixed;
    705. 		top: 0;
    706. 		bottom: 0;
    707. 		width: 100vw;
    708. 		height: 100vh;
    709. 		display: flex;
    710. 		justify-content: center;
    711. 		align-items: center;
    712. 		background-color: rgba(0, 0, 0, 0.4);
    713. 		z-index: 9999;
    714. 	}
    715.  
    716. 	.dialog_back {
    717. 		position: fixed;
    718. 		z-index: 12;
    719. 		top: 0;
    720. 		right: 0;
    721. 		left: 0;
    722. 		bottom: 0;
    723. 		background: rgba(0, 0, 0, 0.3);
    724. 		justify-content: center;
    725. 		align-items: center;
    726. 		display: flex;
    727. 	}
    728.  
    729. 	.add_button_ef {
    730. 		margin-left: 32rpx;
    731. 		margin-right: 32rpx;
    732. 		padding-top: 30rpx;
    733. 		padding-bottom: 30rpx;
    734. 		width: 300rpx;
    735.  
    736. 		border: solid 2rpx #efefef;
    737. 		color: #999;
    738. 		background: #efefef;
    739. 		font-size: 32rpx;
    740. 		border-radius: 10rpx;
    741. 		display: flex;
    742. 		align-items: center;
    743. 		justify-content: center;
    744. 		text-align: center;
    745. 		vertical-align: center;
    746.  
    747.  
    748. 	}
    749. </style>

  • 相关阅读:
    【Java-Web】利用Session和Filter进行权限管理
    NSS [鹤城杯 2021]EasyP
    docker-compose安装sonarqube
    分布式—大量热点数据打散分布的一致性哈希算法
    TCP/IP(十一)TCP的连接管理(八)socket网络编程
    LeetCode每日一题——891. 子序列宽度之和
    《算法图解》阅读笔记
    python 图片爬虫记录
    华为GAUSSDB集成
    云端智创 | 批量化生产，如何利用Timeline快速合成短视频？
  • 原文地址：https://blog.csdn.net/yuehua_zhang/article/details/136740930