From 3c5a2eea4d759194c76c44a4f6db79b52d85dead Mon Sep 17 00:00:00 2001
From: "452061493@qq.com" <452061493@qq.com>
Date: Thu, 21 Mar 2024 17:18:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9E=8B=E5=8F=B7=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/base_css.css          |   6 +
 subpkg/complete/complete.vue | 657 ++++++++++++++++++-----------------
 2 files changed, 347 insertions(+), 316 deletions(-)

diff --git a/static/base_css.css b/static/base_css.css
index 236b406..38224b2 100644
--- a/static/base_css.css
+++ b/static/base_css.css
@@ -422,12 +422,18 @@ h3.contit span {
     font-weight: 600;
 }
 
+.myitem {
+	display: flex;
+	justify-content: center;	
+}
+
 .myitem span {
 	position: relative;
 	margin: 1% 10% 0 0;
 	padding-right: 0.6rem;
 	font-size: 0.9rem;
 	color: #666;
+	white-space: nowrap;
 }
 
 .myitem span b {
diff --git a/subpkg/complete/complete.vue b/subpkg/complete/complete.vue
index 5208758..d8f9f13 100644
--- a/subpkg/complete/complete.vue
+++ b/subpkg/complete/complete.vue
@@ -1,8 +1,8 @@
 <template>
 	<view class="wrap">
 		<view class="stabar"></view>
-		<view class="secbar"> 
-		<view class="title">恭喜完成演练！</view>
+		<view class="secbar">
+			<view class="title">恭喜完成演练！</view>
 		</view>
 		<view class="marsk" v-if="showLayer"></view>
 		<view class="popup-layer" v-if="showMedal">
@@ -10,114 +10,131 @@
 		</view>
 
 		<view class="mainwrap2">
-		<view class="question-wrap">
-		<view class="question-list">
-		  <view  :class="item.correct === 0 ? 'question-item erritem':'question-item'" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
-			 <span class="question-num">{{i+1}}</span>
-		  </view>
-		  <!-- <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
+			<view class="question-wrap">
+				<view class="question-list">
+					<view :class="item.correct === 0 ? 'question-item erritem':'question-item'"
+						v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
+						<span class="question-num">{{i+1}}</span>
+					</view>
+					<!-- <view class="question-item erritem" v-for="(item, i) in questionList" :key="i" @click="itemClickHandler(item)">
 			<span class="question-num">{{i+1}}</span>
 		  </view>  -->
-			  
-		</view>
-		<view class="answer-content">
-			<view class="qucont">{{ask}}</view>
-			<view class="youans"><label>您的答案：</label>{{answer}}</view>
-			<view class="corans"><label>正确答案：</label>{{correctAnswer}}</view>
-			<view v-if="analysis!=='' && analysis!==null">
-			    <view class="analys"><label>解析：</label>
-				<view>{{analysis}}</view>
+
+				</view>
+				<view class="answer-content">
+					<view class="qucont">{{ask}}</view>
+					<view class="youans"><label>您的答案：</label>{{answer}}</view>
+					<view class="corans"><label>正确答案：</label>{{correctAnswer}}</view>
+					<view v-if="analysis!=='' && analysis!==null">
+						<view class="analys"><label>解析：</label>
+							<view>{{analysis}}</view>
+						</view>
+					</view>
+				</view>
 			</view>
+			<view class="question-record">
+				<label>演练记录：</label>
+				<view class="list">
+					<view class="item" v-for="(item, i) in recordList" :key="i">
+						<span>{{item.createTime}}</span>
+					</view>
+				</view>
+			</view>
+			<view class="backIndex">
+				<button @click="backIndex()">返回首页</button>
+			</view>
+			<view class="perinfo">
+				<view class="myitem">
+					<!-- <label><button open-type="share"></button>炫耀一下</label> -->
+					<view @click="shareUser()"><label>
+							<image src="/static/images/btn-xy.png"></image>
+						</label>炫耀一下</view>
+				</view>
+				<view class="myitem">
+					<view @click="review()"><label>
+							<image src="/static/images/btn-hg.png"></image>
+						</label>演练回顾</view>
+				</view>
+				<view class="myitem">
+					<view @click="reChallenge()"><label>
+							<image src="/static/images/btn-cx.png"></image>
+						</label>重新挑战</view>
+				</view>
 			</view>
 		</view>
+		<view class="popup-share" v-if="showShare">
+			<label @click="closeShare()" class="close-button"></label>
+			<label class="medimg">
+				<image src="/static/images/medal_1.png"></image>
+			</label>
+			<view class="congrat">恭喜你获得1枚成就勋章！</view>
+			<view class="perinfo">
+				<view class="myitem">
+					<view @click=""><label><button open-type="share"></button>
+							<image src="/static/images/btn-wx.png"></image>
+						</label>分享给微信好友</view>
+				</view>
+				<view class="myitem">
+					<view @click="formSubmit()"><label>
+							<image src="/static/images/btn-ma.png"></image>
+						</label>二维码邀请</view>
+				</view>
+			</view>
 		</view>
-	    <view class="question-record">
-			<label>演练记录：</label>
-	    	<view class="list">
-	    	  <view class="item" v-for="(item, i) in recordList" :key="i">
-	    	    <span>{{item.createTime}}</span>
-	    	  </view>
-	    	</view>
-	    </view>
-		<view class="backIndex">
-			<button @click="backIndex()">返回首页</button>
-		</view>
-		<view class="perinfo">
-		  <view class="myitem"> 
-			<!-- <label><button open-type="share"></button>炫耀一下</label> -->
-			<view @click="shareUser()"><label><image src="/static/images/btn-xy.png"></image></label>炫耀一下</view>
-		  </view>
-		  <view class="myitem"> 
-			<view @click="review()"><label><image src="/static/images/btn-hg.png"></image></label>演练回顾</view>
-		  </view>
-		  <view class="myitem"> 
-			<view @click="reChallenge()"><label><image src="/static/images/btn-cx.png"></image></label>重新挑战</view>
-		  </view>
-		</view>
-	</view>
-	<view class="popup-share" v-if="showShare">
-		<label @click="closeShare()" class="close-button"></label>
-		<label class="medimg"><image src="/static/images/medal_1.png"></image></label>
-		<view class="congrat">恭喜你获得1枚成就勋章！</view>
-		<view class="perinfo">
-		  <view class="myitem"> 
-			<view @click=""><label><button open-type="share"></button><image src="/static/images/btn-wx.png"></image></label>分享给微信好友</view>
-		  </view>
-		  <view class="myitem"> 
-		  	<view @click="formSubmit()"><label><image src="/static/images/btn-ma.png"></image></label>二维码邀请</view>
-		  </view>
-		</view>
-	</view>
-	<canvas class="shengcheng" id="photo" type="2d"></canvas>
+		<canvas class="shengcheng" id="photo" type="2d"></canvas>
 		<!--生成海报后的图  -->
 		<view v-if="showLoad">
 			<view class='imagePathBox'>
-			<!--  <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
-			  <view class="btnbox">
-				  <button class='cancel' @click="cancel()">取消</button>
-				  <button class='baocun' @click="saveImage()">保存至相册</button>
-			</view>
+				<!--  <image :src="tempFilePath" class='shengcheng' show-menu-by-longpress="true"></image> -->
+				<view class="btnbox">
+					<button class='cancel' @click="cancel()">取消</button>
+					<button class='baocun' @click="saveImage()">保存至相册</button>
+				</view>
 			</view>
-			<view class="mask"></view> 
-	    </view> 
+			<view class="mask"></view>
+		</view>
 
 	</view>
 </template>
 
 <script>
-	import { mapState, mapMutations, mapGetters } from 'vuex'
+	import {
+		mapState,
+		mapMutations,
+		mapGetters
+	} from 'vuex'
 	export default {
 		data() {
 			return {
-			   "questionFreId":"8eefa1161f4643ccaed9404949911a39",
-			   "roleId":"8ad2af376ec64f519147030497086a96",
-			   "sceneId": "d6b424abc2d44f2888a4d9a3d52f9f09",
-			   achieveMedalImg:"",
-			   questionList: [],
-			   recordList: [],
-			   "ask":"",
-			   "answer":"",
-			   "correctAnswer":"",
-			   "analysis":"",
-			   "showLayer":true,
-			   "showAnlysisc":false,
-			   "showMedal":true,
-			   "showShare":false,
-			   "showLoad":false,
-			   canvas: null,  //canvas 对象
-			   tempFilePath: "",
-			   "imageQR":''
+				"questionFreId": "8eefa1161f4643ccaed9404949911a39",
+				"roleId": "8ad2af376ec64f519147030497086a96",
+				"sceneId": "d6b424abc2d44f2888a4d9a3d52f9f09",
+				achieveMedalImg: "",
+				questionList: [],
+				recordList: [],
+				"ask": "",
+				"answer": "",
+				"correctAnswer": "",
+				"analysis": "",
+				"showLayer": true,
+				"showAnlysisc": false,
+				"showMedal": true,
+				"showShare": false,
+				"showLoad": false,
+				canvas: null, //canvas 对象
+				tempFilePath: "",
+				"imageQR": ''
 			};
 		},
 		//分享到好友
-		 onShareAppMessage(res) {
-		    if (res.from === 'button') {// 来自页面内分享按钮
-		      console.log(res.target)
-		    }
-		    return {
-		      title: '自定义分享标题',
-		      path: '/pages/index/index'
-		    }
+		onShareAppMessage(res) {
+			if (res.from === 'button') { // 来自页面内分享按钮
+				console.log(res.target)
+			}
+			return {
+				title: '自定义分享标题',
+				path: '/pages/index/index'
+			}
 		},
 		//分享到朋友圈
 		onShareTimeline(res) {
@@ -129,13 +146,13 @@
 		},
 		onLoad(options) {
 			this.timer = setTimeout(() => {
-			  this.showMedal = false
-			  this.showLayer = false
-			  clearTimeout(this.timer)
+				this.showMedal = false
+				this.showLayer = false
+				clearTimeout(this.timer)
 			}, 2000)
-			this.roleId = options.roleId !=null ? options.roleId : this.roleId
-			this.questionFreId = options.questionFreId!=null ? options.questionFreId : this.questionFreId
-			this.sceneId = options.sceneId!=null ? options.sceneId : this.sceneId;
+			this.roleId = options.roleId != null ? options.roleId : this.roleId
+			this.questionFreId = options.questionFreId != null ? options.questionFreId : this.questionFreId
+			this.sceneId = options.sceneId != null ? options.sceneId : this.sceneId;
 			this.getQuestionList()
 			this.getRecordList()
 			this.editUserMedal();
@@ -185,7 +202,10 @@
 			async getRecordList() {
 				const {
 					data: res
-				} = await uni.$http.post('/small/questionFre/listAll',{roleId:this.roleId,userId:this.userId})
+				} = await uni.$http.post('/small/questionFre/listAll', {
+					roleId: this.roleId,
+					userId: this.userId
+				})
 				if (!res.success) return uni.$showMsg()
 				this.recordList = res.data
 
@@ -196,11 +216,11 @@
 					data: res
 				} = await uni.$http.post('/small/wechat/editUserMedal', {
 					medal: this.sceneId,
-				    guid: this.userId
+					guid: this.userId
 				})
 				if (!res.success) return uni.$showMsg()
-			    this.achieveMedalImg = uni.$http.baseUrl + res.data
-				if (res.data == null || res.data =="") {
+				this.achieveMedalImg = uni.$http.baseUrl + res.data
+				if (res.data == null || res.data == "") {
 					this.showMedal = false
 					this.showLayer = false
 				}
@@ -211,7 +231,7 @@
 					data: res
 				} = await uni.$http.post('/small/scene/manage/getQRCode')
 				if (!res.success) return uni.$showMsg()
-				this.imageQR =  uni.$http.baseUrl + res.data
+				this.imageQR = uni.$http.baseUrl + res.data
 				//uni.$showMsg('数据请求成功！')
 			},
 			backIndex() {
@@ -226,167 +246,168 @@
 			reChallenge() {
 				uni.navigateTo({
 					// url: '/subpkg/rechallenge/rechallenge?questionFreId=' + this.questionFreId
-					url: '/subpkg/practice/practice?roleId='+this.roleId+'&sceneId='+this.sceneId
+					url: '/subpkg/practice/practice?roleId=' + this.roleId + '&sceneId=' + this.sceneId
 				})
 			},
 			review() {
 				uni.navigateTo({
-					url: '/subpkg/review/review?questionFreId=' + this.questionFreId +'&sceneId=' + this.sceneId +"&roleId=" + this.roleId
+					url: '/subpkg/review/review?questionFreId=' + this.questionFreId + '&sceneId=' + this.sceneId +
+						"&roleId=" + this.roleId
 				})
 			},
 			closeShare() {
 				this.showShare = false
 				this.showLayer = false
 			},
-			formSubmit(){
-			  wx.createSelectorQuery()
-			    .select('#photo') // 在 canvas的 id
-			    .fields({
-			      node: true,
-			      size: true
-			    })
-			    .exec((res) => {
-			      // Canvas 对象
-			      const canvas = res[0].node
-				  this.canvas = canvas
-			      // 渲染上下文
-			      const context = canvas.getContext('2d')
-			      // canvas 画布的实际绘制宽高
-			      const width = res[0].width
-			      const height = res[0].height
-                  // 初始化画布大小
-                  const dpr = wx.getWindowInfo().pixelRatio
-                  canvas.width = width * dpr
-                  canvas.height = height * dpr
-                  context.scale(dpr, dpr)
-                  // 清空画布
-                  context.clearRect(0, 0, width, height)
-                  //canvas背景色
-                  context.fillStyle = '#3c9cff';
-				  context.fillStyle ="#FFF" // 背景颜色
-				  context.fillRect(0, 0, 500, 800)              //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
-				  //绘制左下角文字
-				  context.fontSize = 12;
-				  context.fillStyle = '#333';
-				  context.textAlign ='left';
-				  context.fillText("长按识别小程序～", 10, 520);
-				  context.stroke();
-                  // 图片对象
-                 const image = canvas.createImage()
-                 image.src = '/static/images/share_bg.png'
-				 // 图片对象
-				 const imageQR = canvas.createImage()
-				 imageQR.src = this.imageQR 
-                 image.onload = () => {
-                 // 将图片绘制到 canvas 上
-                 context.drawImage(image, 0, 0, 350, 450)
-				 context.drawImage(imageQR, 200, 450, 130, 120)
-                }
-              })
-			   this.showLoad = true
-			   this.showShare = false
-			   this.showLayer = false 
+			formSubmit() {
+				wx.createSelectorQuery()
+					.select('#photo') // 在 canvas的 id
+					.fields({
+						node: true,
+						size: true
+					})
+					.exec((res) => {
+						// Canvas 对象
+						const canvas = res[0].node
+						this.canvas = canvas
+						// 渲染上下文
+						const context = canvas.getContext('2d')
+						// canvas 画布的实际绘制宽高
+						const width = res[0].width
+						const height = res[0].height
+						// 初始化画布大小
+						const dpr = wx.getWindowInfo().pixelRatio
+						canvas.width = width * dpr
+						canvas.height = height * dpr
+						context.scale(dpr, dpr)
+						// 清空画布
+						context.clearRect(0, 0, width, height)
+						//canvas背景色
+						context.fillStyle = '#3c9cff';
+						context.fillStyle = "#FFF" // 背景颜色
+						context.fillRect(0, 0, 500, 800) //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
+						//绘制左下角文字
+						context.fontSize = 12;
+						context.fillStyle = '#333';
+						context.textAlign = 'left';
+						context.fillText("长按识别小程序～", 10, 520);
+						context.stroke();
+						// 图片对象
+						const image = canvas.createImage()
+						image.src = '/static/images/share_bg.png'
+						// 图片对象
+						const imageQR = canvas.createImage()
+						imageQR.src = this.imageQR
+						image.onload = () => {
+							// 将图片绘制到 canvas 上
+							context.drawImage(image, 0, 0, 350, 450)
+							context.drawImage(imageQR, 200, 450, 130, 120)
+						}
+					})
+				this.showLoad = true
+				this.showShare = false
+				this.showLayer = false
 			},
-			cancel(){
+			cancel() {
 				const canvas = this.canvas;
 				const ctx = canvas.getContext("2d");
-				ctx.clearRect(0, 0, 500, 800)  
+				ctx.clearRect(0, 0, 500, 800)
 				this.showLoad = false
 			},
 			saveImage() {
-			  uni.canvasToTempFilePath({
-			    canvasId: 'photo',
-			    destWidth: 286,
-			    destHeight: 417,
-			    canvas: this.canvas,
-			    success: (res) => {
-			      this.tempFilePath =  res.tempFilePath
-			      uni.saveImageToPhotosAlbum({
-			        filePath: res.tempFilePath,
-			        success: (res)=> {
-			          wx.showToast({
-			            title: '保存成功',
-			          })
-					  this.showLoad = false
-					  const canvas = this.canvas;
-					  const ctx = canvas.getContext("2d");
-					  ctx.clearRect(0, 0, 500, 800)    
-			        }
-			      })
-			    }
-			  });
+				uni.canvasToTempFilePath({
+					canvasId: 'photo',
+					destWidth: 286,
+					destHeight: 417,
+					canvas: this.canvas,
+					success: (res) => {
+						this.tempFilePath = res.tempFilePath
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: (res) => {
+								wx.showToast({
+									title: '保存成功',
+								})
+								this.showLoad = false
+								const canvas = this.canvas;
+								const ctx = canvas.getContext("2d");
+								ctx.clearRect(0, 0, 500, 800)
+							}
+						})
+					}
+				});
 			},
-            formSubmit(){
-			  wx.createSelectorQuery()
-			    .select('#photo') // 在 canvas的 id
-			    .fields({
-			      node: true,
-			      size: true
-			    })
-			    .exec((res) => {
-			      // Canvas 对象
-			      const canvas = res[0].node
-				  this.canvas = canvas
-			      // 渲染上下文
-			      const context = canvas.getContext('2d')
-			      // canvas 画布的实际绘制宽高
-			      const width = res[0].width
-			      const height = res[0].height
-                  // 初始化画布大小
-                  const dpr = wx.getWindowInfo().pixelRatio
-                  canvas.width = width * dpr
-                  canvas.height = height * dpr
-                  context.scale(dpr, dpr)
-                  // 清空画布
-                  context.clearRect(0, 0, width, height)
-                  //canvas背景色
-                  context.fillStyle = '#3c9cff';
-				  context.fillStyle ="#FFF" // 背景颜色
-				  context.fillRect(0, 0, 500, 800)              //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
-				  //绘制左下角文字
-				  context.fontSize = 16;
-				  context.fillStyle = '#333';
-				  context.textAlign ='left';
-				  context.fillText("长按识别小程序～", 16, 520);
-				  context.stroke();
-                  // 图片对象
-                 const image = canvas.createImage()
-                 image.src = '/static/images/share_bg.png'
-				 // 图片对象
-				 const imageQR = canvas.createImage()
-				 imageQR.src = this.imageQR 
-                 image.onload = () => {
-                 // 将图片绘制到 canvas 上
-                 context.drawImage(image, 0, 0, 350, 450)
-				 context.drawImage(imageQR, 200, 450, 130, 120)
-                }
-              })
-			   this.showLoad = true
-			   this.showShare = false
-			   this.showLayer = false 
+			formSubmit() {
+				wx.createSelectorQuery()
+					.select('#photo') // 在 canvas的 id
+					.fields({
+						node: true,
+						size: true
+					})
+					.exec((res) => {
+						// Canvas 对象
+						const canvas = res[0].node
+						this.canvas = canvas
+						// 渲染上下文
+						const context = canvas.getContext('2d')
+						// canvas 画布的实际绘制宽高
+						const width = res[0].width
+						const height = res[0].height
+						// 初始化画布大小
+						const dpr = wx.getWindowInfo().pixelRatio
+						canvas.width = width * dpr
+						canvas.height = height * dpr
+						context.scale(dpr, dpr)
+						// 清空画布
+						context.clearRect(0, 0, width, height)
+						//canvas背景色
+						context.fillStyle = '#3c9cff';
+						context.fillStyle = "#FFF" // 背景颜色
+						context.fillRect(0, 0, 500, 800) //  667 绘制一个矩形作为背景矩形x坐标、y坐标、图片宽、高   
+						//绘制左下角文字
+						context.fontSize = 16;
+						context.fillStyle = '#333';
+						context.textAlign = 'left';
+						context.fillText("长按识别小程序～", 16, 520);
+						context.stroke();
+						// 图片对象
+						const image = canvas.createImage()
+						image.src = '/static/images/share_bg.png'
+						// 图片对象
+						const imageQR = canvas.createImage()
+						imageQR.src = this.imageQR
+						image.onload = () => {
+							// 将图片绘制到 canvas 上
+							context.drawImage(image, 0, 0, 350, 450)
+							context.drawImage(imageQR, 200, 450, 130, 120)
+						}
+					})
+				this.showLoad = true
+				this.showShare = false
+				this.showLayer = false
 			},
 			saveImage() {
-			  uni.canvasToTempFilePath({
-			    canvasId: 'photo',
-			    destWidth: 286,
-			    destHeight: 417,
-			    canvas: this.canvas,
-			    success: (res) => {
-			      this.tempFilePath =  res.tempFilePath
-			      uni.saveImageToPhotosAlbum({
-			        filePath: res.tempFilePath,
-			        success: (res)=> {
-			          wx.showToast({
-			            title: '保存成功',
-			          })
-					  this.showLoad = false
-					  const canvas = this.canvas;
-					  const ctx = canvas.getContext("2d");
-					  ctx.clearRect(0, 0, 500, 800)    
-			        }
-			      })
-			    }
-			  });
+				uni.canvasToTempFilePath({
+					canvasId: 'photo',
+					destWidth: 286,
+					destHeight: 417,
+					canvas: this.canvas,
+					success: (res) => {
+						this.tempFilePath = res.tempFilePath
+						uni.saveImageToPhotosAlbum({
+							filePath: res.tempFilePath,
+							success: (res) => {
+								wx.showToast({
+									title: '保存成功',
+								})
+								this.showLoad = false
+								const canvas = this.canvas;
+								const ctx = canvas.getContext("2d");
+								ctx.clearRect(0, 0, 500, 800)
+							}
+						})
+					}
+				});
 			},
 			itemClickHandler(item) {
 				if (item !== "") {
@@ -464,10 +485,11 @@
 			width: 33%;
 		}
 	}
-	
+
 	.secbar {
 		height: 4vh;
 		text-align: center;
+
 		.title {
 			display: inline-block;
 			margin-top: 1.75vh;
@@ -561,9 +583,9 @@
 		overflow: hidden;
 
 		label {
-		  font-size: 32rpx;
-		  font-weight: bold;
-		  line-height: 2;
+			font-size: 32rpx;
+			font-weight: bold;
+			line-height: 2;
 		}
 
 		.list {
@@ -575,9 +597,10 @@
 			.item {
 				margin: 2% 0;
 				border-bottom: 1px dotted #ddd;
+
 				label {
 					color: #666;
-					font-size: 1.0rem;   
+					font-size: 1.0rem;
 					font-weight: 500;
 				}
 			}
@@ -622,7 +645,7 @@
 			height: 100%;
 		}
 	}
-	
+
 	.close-button {
 		position: absolute;
 		top: -60rpx;
@@ -634,77 +657,79 @@
 		border-radius: 50%;
 		transform: rotate(45deg);
 	}
-	
-	.close-button:before, .close-button:after {
-	  content: '';
-	  position: absolute;
-	  top: 50%;
-	  left: 50%;
-	  background: #333;
-	  border-radius: 50%;
-	  transform: translate(-50%, -50%);
+
+	.close-button:before,
+	.close-button:after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		background: #333;
+		border-radius: 50%;
+		transform: translate(-50%, -50%);
 	}
-	 
+
 	.close-button:before {
-	  height: 24rpx;
-	  width: 4rpx;
+		height: 24rpx;
+		width: 4rpx;
 	}
-	 
+
 	.close-button:after {
-	  height: 4rpx;
-	  width: 24rpx;
+		height: 4rpx;
+		width: 24rpx;
 	}
-	
-	.imagePathBox{
-		  width: 100%;
-		  height: 100%;
-		  background: rgba(0,0,0,0.6);
-		  position: absolute;
-		  top: 0;
-		  left: 0;
-		  right: 0;
-		  bottom: 0;
-		  z-index: 100;
-		}
-		.shengcheng{
-		  width: 350px;
-		  height: 580px;
-		  position: absolute;
-		  top: 45%;
-		  left: 50%;
-		  -webkit-transform: translate(-50%, -50%);
-		  transform: translate(-50%, -50%);
-		  z-index: 999;
-		}
-		.btnbox {
-		  display: flex;
-		  width: 70%;
-		  height: 90rpx;
-		  position: absolute;
-		  bottom: 10%;
-		  left: 15%;	
-		}
-		.baocun ,.cancel{
-		  display: block;
-		  width: 45%;
-		  height: 90rpx;
-		  padding: 0;
-		  line-height: 90rpx;
-		  text-align: center;
-		  color: #fff;
-		  font-size: 28rpx;
-		  border-radius: 50rpx;
-		  background: #1367fe;
-		  border: 1px solid #1367fe;
-		}
-		
-		.cancel {
-	display: inline-block;
-	background-color: #fff;
-	color: #1367fe;
-}
-	
-		button[class="baocun"]::after{
-		  border: 0;
-		}
+
+	.imagePathBox {
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.6);
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 100;
+	}
+
+	.shengcheng {
+		width: 350px;
+		height: 580px;
+		position: absolute;
+		top: 45%;
+		left: 50%;
+		-webkit-transform: translate(-50%, -50%);
+		transform: translate(-50%, -50%);
+		z-index: 999;
+	}
+
+	.btnbox {
+		display: flex;
+		justify-content: center;
+		position: absolute;
+		bottom: 10%;
+		left: 10%;
+		width: 80%;
+		height: 90rpx;
+	}
+
+	.baocun,
+	.cancel {
+		display: inline-block;
+		width: 60%;
+		padding: 0;
+		line-height: 90rpx;
+		text-align: center;
+		color: #fff;
+		font-size: 28rpx;
+		border-radius: 50rpx;
+		background: #1367fe;
+		border: 1px solid #1367fe;
+	}
+
+	.cancel {
+		width: 35%;
+		background-color: #fff;
+		color: #1367fe;
+	}
+
 </style>
\ No newline at end of file