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

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

作者：weixin_40725706 | 2024-03-16 07:32:50

赞

踩

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>

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

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

  

闽ICP备14008679号