fix: logo图更换高清

响应式按钮大小过渡调整产品信息隐藏生产人和生成时间字段扫码增加声音和震动切换tab调整正则表达式更换，ios低版本不支持零宽度正向断言

fix: logo图更换高清
响应式按钮大小过渡调整产品信息隐藏生产人和生成时间字段扫码增加声音和震动切换tab调整正则表达式更换，ios低版本不支持零宽度正向断言
郭伟龙
1 parent da785871
Showing 11 changed files with 217 additions and 58 deletions Show diff stats
pages/component/InformationModule.vue
pages/component/InspectionModule.vue
pages/component/QrScan.vue
pages/component/goback.vue
pages/component/topWindow.vue
pages/homePage/index.vue
pages/product/index.vue
pages/product/repairReport.vue
pages/product/scan.vue
static/hdk-top-logo.png
static/logo.png
@@ -21,14 +21,15 @@
 				<text class="leftT">{{$t('hdk.Model')}}</text>
 				<text class="rightT">{{informationData.type || ""}}</text>
 			</view>
-			<view class="flex-between">
+			<!-- 不展示 -->
+			<!-- <view class="flex-between">
 				<text class="leftT">{{$t('hdk.DateOfProduction')}}</text>
 				<text class="rightT">{{$u.timeFormat(informationData.productionTime, 'yyyy-mm-dd') || ""}}</text>
 			</view>
 			<view class="flex-between">
 				<text class="leftT">{{$t('hdk.ProductionPersonnel')}}</text>
 				<text class="rightT">{{informationData.productionUserName || ""}}</text>
-			</view>
+			</view> -->
 		</view>
 		<view class="fileViewingModule">
 			<view class="title">
@@ -102,7 +103,9 @@
 		}
 		.swiperCss {
+			margin-top: 20px;
 			width: 95%;
+			height: 200px !important; 
 		}
 		.flex-between {
@@ -147,6 +150,8 @@
 		.swiperCss {
 			width: 80%;
+			margin-top: 20px;
+			height: 600px !important;
 		}
 		.flex-between {
@@ -17,7 +17,7 @@
 			</view>
 			<view class="flex-between">
 				<text class="leftT">{{$t('hdk.TestDate')}}</text>
-				<text class="rightT">{{$u.timeFormat(inspectionData.checkTime, 'yyyy年mm月dd日') || ''}}</text>
+				<text class="rightT">{{$u.timeFormat(inspectionData.checkTime, 'yyyy-mm-dd') || ''}}</text>
 			</view>
 		</view>
@@ -9,8 +9,11 @@
 	import {
 		Html5Qrcode
 	} from 'html5-qrcode';
+	const innerAudioContext = uni.createInnerAudioContext();
+	innerAudioContext.autoplay = true;
+	innerAudioContext.src = '/static/audio/scanSound.mp3';
 	export default {
-		created() {
+		mounted() {
 			this.getCameras();
 			navigator.mediaDevices.getUserMedia({
 					video: true
@@ -43,6 +46,7 @@
 					});
 			},
 			start() {
+				let that = this;
 				//environment后置 user前置
 				this.html5QrCode
 					.start({
@@ -57,13 +61,24 @@
 							halfSample: true, //缩小二维码提高识别精度吧
 						},
 						(decodedText) => {
-							this.$emit('ok', decodedText);
+							this.playAudio();
+							navigator.vibrate(500);
+							setTimeout(()=>{
+								that.$emit('ok', decodedText);
+								this.stop();
+							},500)
 						},
 					)
 					.catch((err) => {
 						this.$emit('err', err);
 					});
 			},
+			playAudio() {
+				innerAudioContext.play();
+				innerAudioContext.onPlay(() => {
+					console.log('音频开始播放');
+				});
+			},
 			stop() {
 				this.html5QrCode
 					.stop()
@@ -88,7 +103,7 @@
 		height: 100%;
 		width: 100%;
 		// background: rgba($color: #000000, $alpha: 0.48);
-		background:rgba(0, 0, 0, 1.48);
+		background: rgba(0, 0, 0, 1.48);
 	}
 <template>
 	<view class="back" @click="goback" v-if="!$isMobile">
-		<u-image src="/static/images/icon/back.png" mode="witFix" width="100px" height="100px"></u-image>
+		<u-image src="/static/images/icon/back.png" mode="witFix" class="ImageCss"></u-image>
 	</view>
 </template>
@@ -34,6 +34,18 @@
 </script>
 <style lang="scss" scoped>
+	/deep/.u-image__image{
+		width: 50px !important;
+		height: 50px !important;
+	}
+	/deep/.u-image{
+		width: 0 !important;
+		height: 0 !important;
+	}
+	.ImageCss{
+		width: 50px !important;
+		height: 50px !important;
+	}
 	.back {
 		width: 50px;
 		height: 50px;
@@ -43,7 +55,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		left:1%;
+		left:10px;
 		top: 10%;
 		bottom: 0;
 	}
@@ -7,16 +7,16 @@
 			<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 			<b-collapse id="nav-collapse" is-nav class="collapseR">
 				<b-navbar-nav>
-					<b-nav-item v-show="!isHome" @click="handleClick('productInformation')"
-						:class="{ 'activeCSS': selectedNavItem === 'productInformation' }">
+					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(0)"
+						:class="{ 'activeCSS': selectedNavItem === 0 }">
 						{{$t('hdk.productInformation')}}
 					</b-nav-item>
-					<b-nav-item v-show="!isHome" @click="handleClick('inspectionInformation')"
-						:class="{ 'activeCSS': selectedNavItem === 'inspectionInformation' }">
+					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(1)"
+						:class="{ 'activeCSS': selectedNavItem === 1 }">
 						{{$t('hdk.inspectionInformation')}}
 					</b-nav-item>
-					<b-nav-item v-show="!isHome" @click="handleClick('attachmentInformation')"
-						:class="{ 'activeCSS': selectedNavItem === 'attachmentInformation' }">
+					<b-nav-item v-show="!isHome && !$isMobile" @click="handleClick(2)"
+						:class="{ 'activeCSS': selectedNavItem === 2 }">
 						{{$t('hdk.attachmentInformation')}}
 					</b-nav-item>
 					<b-nav-item-dropdown :text="selectedLanguage" right>
@@ -41,7 +41,7 @@
 		data() {
 			return {
 				selectedLanguage: this.$t('index.language'),
-				selectedNavItem: 'productInformation'
+				selectedNavItem: 0
 			}
 		},
 		props: {
@@ -110,12 +110,12 @@
 		},
 		methods: {
 			getFirstSnFromUrl(url) {
-				// const regex = /sn=([^&]+)/;
-				const regex = /((?<=\?sn=)|(?<=HDKSN:))\w+/;
+				// const regex = /((?<=\?sn=)|(?<=HDKSN:))\w+/;「零宽度正向断言」ios低版本不支持
+				const regex = /(?:\?sn=|HDKSN:)(\w+)/;
 				const match = url.match(regex);
 				console.log(match)
 				if (match && match.length > 1) {
-					const sn = match[0];
+					const sn = match[1];
 					return sn;
 				}
 				return url;
 <template>
 	<view class="containers">
-		<topWindow :isHome="false" @item-click="handleItemClick"></topWindow>
+		<topWindow :isHome="false" @item-click="handleItemClick" @lanChange="changeLan"></topWindow>
 		<goback></goback>
+		<u-tabs :list="list" :current="current" lineColor="#00aeaa"
+			:itemStyle="{width:'200px',height:'40px',backgraound:'#000'}" @click="tabChange" v-show="$isMobile"
+			:activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
 		<view class="ComponentsBody">
-			<view class="productInformation" v-if="current == 'productInformation'">
+			<view class="productInformation" v-if="current == 0">
 				<InformationModule v-if="informationData != null" :informationData="informationData">
 				</InformationModule>
 			</view>
-			<view class="inspectionInformation" v-else-if="current == 'inspectionInformation'">
+			<view class="inspectionInformation" v-else-if="current == 1">
 				<InspectionModule v-if="inspectionData != null" :inspectionData="inspectionData"></InspectionModule>
 			</view>
-			<view class="attachmentInformation" v-else-if="current == 'attachmentInformation'">
+			<view class="attachmentInformation" v-else-if="current == 2">
 				<AuxiliaryModule v-if="auxiliaryData != null" :auxiliaryData="auxiliaryData"></AuxiliaryModule>
 			</view>
 			<view class="repairReportBtnCss" @click="jumpService">
-				<u-image src="/static/images/icon/repair.png" mode="witFix" :width="$isMobile?'100px':'200px'"
-					:height="$isMobile?'100px':'200px'"></u-image>
+				<image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix" ></u-image>
 				<text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
 			</view>
 		</view>
@@ -49,7 +51,37 @@
 				inspectionData: null,
 				auxiliaryData: null,
 				repairInformation: null,
-				current: "productInformation"
+				// current: "productInformation",
+				current: 0,
+				list: [{
+					name: this.$t('hdk.productInformation'),
+				}, {
+					name: this.$t('hdk.inspectionInformation'),
+				}, {
+					name: this.$t('hdk.attachmentInformation')
+				}],
+				inactiveStyle: {
+					width: '120rpx',
+					height: '38rpx',
+					backgroundColor: 'rgba(255, 255, 255, 0)',
+					boxSizing: 'border-box',
+					fontFamily: "苹方 中等, 苹方, sans-serif",
+					color: '#555555',
+					textAlign: 'left',
+					lineHeight: 'normal',
+					fontSize: '28rpx'
+				},
+				activeStyle: {
+					width: '128rpx',
+					height: '43rpx',
+					backgroundColor: 'rgba(255, 255, 255, 0)',
+					boxSizing: 'border-box',
+					fontFamily: "苹方 中等, 苹方, sans-serif",
+					color: '#00aeaa',
+					textAlign: 'left',
+					lineHeight: 'normal',
+					fontSize: '32rpx'
+				},
 			}
 		},
 		computed: {
@@ -63,6 +95,18 @@
 			this.initData()
 		},
 		methods: {
+			changeLan(lang) {
+				console.log("改变语言", lang);
+				this.list = [];
+				// 重新构建新的 list 数组
+				this.list = [{
+					name: this.$t('hdk.productInformation'),
+				}, {
+					name: this.$t('hdk.inspectionInformation'),
+				}, {
+					name: this.$t('hdk.attachmentInformation')
+				}];
+			},
 			initData() {
 				// uni.showLoading({title: '查询中...'})
 				getProductFind(this.sn).then(res => {
@@ -246,6 +290,16 @@
 				const pictureRegex = /\.(jpg|jpeg|png|gif)$/i;
 				return pictureRegex.test(str);
 			},
+			tabChange(item) {
+				this.current = item.index
+				if (this.current == 0) {
+					// console.log(this.informationData);
+				} else if (this.current == 1) {
+					// console.log(this.inspectionData);
+				} else {
+					// console.log(this.auxiliaryData);
+				}
+			},
 			handleItemClick(item) {
 				this.current = item;
 				console.log('点击的菜单项:', item);
@@ -263,6 +317,7 @@
 	}
 	.ComponentsBody {
+		margin-top: 5px;
 		// width:100%;
 		// display: flex;
 		// justify-content: center;
@@ -280,7 +335,8 @@
 	// .attachmentInformation{
 	// 	width: 100%;
 	// }
-
+	
+	//移动端样式
 	@media screen and (max-width: 767px) {
 		.repairReportBtnCss {
 			width: 100px;
@@ -295,6 +351,18 @@
 			bottom: 100px;
 			// background-color: #00aeaa;
 		}
+		
+		
+		
+		// .u-image__image{
+		// 	width: 100px !important;
+		// 	height: 100px !important;
+		// }
+		
+		.repairReportImageCss{
+			width: 100px !important;
+			height: 100px !important;
+		}
 		.repairReportTextCss {
 			position: absolute;
@@ -309,9 +377,8 @@
 	// //PC端样式
 	@media screen and (min-width: 768px) {
 		.repairReportBtnCss {
-			width: 100px;
-			height: 100px;
-			border-radius: 100px;
+			width: 200px;
+			height: 200px;
 			position: fixed;
 			display: flex;
 			flex-direction: column;
@@ -322,9 +389,19 @@
 			// background-color: #00aeaa;
 		}
+		// .u-image__image{
+		// 	width: 200px !important;
+		// }
+		
+		
+		.repairReportImageCss{
+			width: 200px !important;
+			height: 200px !important;
+		}
+
 		.repairReportTextCss {
 			position: absolute;
-			bottom: 15px;
+			bottom: 60px;
 			color: #fff;
 		}
@@ -2,7 +2,7 @@
 	<view class="containers">
 		<topWindow @lanChange="changeLan"></topWindow>
 		<goback></goback>
-		<view class="content">
+		<view class="contents">
 			<u-form labelPosition="top" labelAlign="left" :model="modal" :rules="rules" ref="uForm"
 				:labelStyle="{fonSize:'26px',color:'#8B91A4',paddingLeft:'10px'}">
 				<view class="basicInformation">
@@ -169,16 +169,52 @@
 			}
 		},
 		methods: {
+			setRules() {
+				this.rules = {
+					'formInfo.sn': {
+						type: 'string',
+						required: true,
+						message: this.$t('hdk.FillSNCode'),
+						trigger: ['blur', 'change']
+					},
+					'formInfo.productName': {
+						type: 'string',
+						required: true,
+						message: this.$t('hdk.FillProductName'),
+						trigger: ['blur', 'change']
+					},
+					'formInfo.contactPersonName': {
+						type: 'string',
+						required: true,
+						message: this.$t('hdk.FillName'),
+						trigger: ['blur', 'change']
+					},
+					'formInfo.email': {
+						type: 'email',
+						required: true,
+						message: this.$t('hdk.FillEmail'),
+						trigger: ['blur', 'change']
+					},
+					'formInfo.repairDescribe': {
+						type: 'string',
+						required: true,
+						message: this.$t('hdk.FillDescription'),
+						trigger: ['blur', 'change']
+					},
+					'formInfo.airportName': {
+						type: 'string',
+						required: true,
+						message: this.$t('hdk.FillAirportName'),
+						trigger: ['blur', 'change']
+					},
+				}
+			},
 			changeLan(locale) {
 				console.log("切换语言,重新触发提示语", locale);
 				// 清除校验状态
 				this.$refs.uForm.clearValidate();
 				// 重新校验
-				this.$forceUpdate()
-				this.$nextTick(() => {
-					this.$refs.uForm.validate();
-				});
-				
+				this.setRules();
 			},
 			deletePic(event) {
 				this.fileList.splice(event.index, 1)
@@ -350,7 +386,7 @@
 			text-align: left;
 		}
-		.content {
+		.contents {
 			width: 100%;
 		}
@@ -374,20 +410,19 @@
 		}
 		.submitBtn {
-			width: 350px;
+			width: 90%;
 			height: 40px;
-			padding: 2px;
-			margin: 24px;
+			margin: 20px 24px;
 			position: fixed;
-			bottom: 0px;
+			bottom: 0;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			border-radius: 8px;
 			background-color: #00aeaa;
 			box-sizing: border-box;
-			font-family: '苹方 中等', '苹方', sans-serif;
-			color: #ffffff;
+			font-family: 苹方 中等, 苹方, sans-serif;
+			color: #fff;
 			text-align: center;
 			line-height: normal;
 			z-index: 999;
@@ -417,7 +452,7 @@
 			color: #999999;
 		}
-		.content {
+		.contents {
 			width: 80%;
 			position: relative;
 		}
@@ -463,22 +498,19 @@
 		}
 		.submitBtn {
-			width: 500px;
-			height: 39px;
-			padding: 2px;
+			width: 80%;
+			height: 40px;
+			margin: 20px 24px;
 			position: fixed;
-			left: 0;
-			right: 0;
-			bottom: 30px;
-			margin: 0 auto;
+			bottom: 0;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border-radius: 4px;
+			border-radius: 8px;
 			background-color: #00aeaa;
 			box-sizing: border-box;
-			font-family: '苹方 中等', '苹方', sans-serif;
-			color: #ffffff;
+			font-family: 苹方 中等, 苹方, sans-serif;
+			color: #fff;
 			text-align: center;
 			line-height: normal;
 			z-index: 999;
@@ -40,6 +40,9 @@
 		computed: {
 		},
+		onShow() {
+			this.open = true
+		},
 		mounted() {
 			if (browser.versions.webKit || browser.versions.weixin || browser.versions.gecko) {
 				this.open = true;
@@ -51,25 +54,40 @@
 		},
 		methods: {
+			playAudio() {
+				const innerAudioContext = uni.createInnerAudioContext();
+				innerAudioContext.autoplay = true;
+				innerAudioContext.src = '/static/audio/scanSound.mp3';
+				innerAudioContext.play();
+				innerAudioContext.onPlay(() => {
+					alert('音频开始播放')
+					console.log('音频开始播放');
+				});
+			},
 			getResult(sn) {
 				console.log(sn);
+				// this.playAudio()
 				this.open = false;
-				const regex = /((?<=\?sn=)|(?<=HDKSN:))\w+/;
+				// const regex = /((?<=\?sn=)|(?<=HDKSN:))\w+/;「零宽度正向断言」ios低版本不支持
+				const regex = /(?:\?sn=|HDKSN:)(\w+)/;
 				const match = regex.exec(sn);
-				const sncode = match ? match[0] : sn;
+				const sncode = match ? match[1] : sn;
 				// let sncode = sn.substring(sn.lastIndexOf(":") + 1);
 				getProductFind(sncode).then(res => {
 					console.log(res);
 					if (res.code === 1400001001) {
 						uni.navigateTo({
-							url: '/pages/product/invalidCode?snCode='+sncode,
+							url: '/pages/product/invalidCode?snCode=' + sncode,
 							success() {
 								this.open = true
 							}
 						});
 					} else {
 						uni.navigateTo({
-							url: "/pages/product/index?sn=" + sncode
+							url: "/pages/product/index?sn=" + sncode,
+							success() {
+								this.open = true
+							}
 						})
 					}
 				})
	@@ -17,7 +17,7 @@		@@ -17,7 +17,7 @@
17	</view>	17	</view>
18	<view class="flex-between">	18	<view class="flex-between">
19	<text class="leftT">{{$t('hdk.TestDate')}}</text>	19	<text class="leftT">{{$t('hdk.TestDate')}}</text>
20	- <text class="rightT">{{$u.timeFormat(inspectionData.checkTime, 'yyyy年mm月dd日') \|\| ''}}</text>	20	+ <text class="rightT">{{$u.timeFormat(inspectionData.checkTime, 'yyyy-mm-dd') \|\| ''}}</text>
21	</view>	21	</view>
22	</view>	22	</view>
23		23
1	<template>	1	<template>
2	<view class="containers">	2	<view class="containers">
3	- <topWindow :isHome="false" @item-click="handleItemClick"></topWindow>	3	+ <topWindow :isHome="false" @item-click="handleItemClick" @lanChange="changeLan"></topWindow>
4	<goback></goback>	4	<goback></goback>
		5	+ <u-tabs :list="list" :current="current" lineColor="#00aeaa"
		6	+ :itemStyle="{width:'200px',height:'40px',backgraound:'#000'}" @click="tabChange" v-show="$isMobile"
		7	+ :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></u-tabs>
5	<view class="ComponentsBody">	8	<view class="ComponentsBody">
6	- <view class="productInformation" v-if="current == 'productInformation'">	9	+ <view class="productInformation" v-if="current == 0">
7	<InformationModule v-if="informationData != null" :informationData="informationData">	10	<InformationModule v-if="informationData != null" :informationData="informationData">
8	</InformationModule>	11	</InformationModule>
9	</view>	12	</view>
10	- <view class="inspectionInformation" v-else-if="current == 'inspectionInformation'">	13	+ <view class="inspectionInformation" v-else-if="current == 1">
11	<InspectionModule v-if="inspectionData != null" :inspectionData="inspectionData"></InspectionModule>	14	<InspectionModule v-if="inspectionData != null" :inspectionData="inspectionData"></InspectionModule>
12	</view>	15	</view>
13	- <view class="attachmentInformation" v-else-if="current == 'attachmentInformation'">	16	+ <view class="attachmentInformation" v-else-if="current == 2">
14	<AuxiliaryModule v-if="auxiliaryData != null" :auxiliaryData="auxiliaryData"></AuxiliaryModule>	17	<AuxiliaryModule v-if="auxiliaryData != null" :auxiliaryData="auxiliaryData"></AuxiliaryModule>
15	</view>	18	</view>
16	<view class="repairReportBtnCss" @click="jumpService">	19	<view class="repairReportBtnCss" @click="jumpService">
17	- <u-image src="/static/images/icon/repair.png" mode="witFix" :width="$isMobile?'100px':'200px'"
18	- :height="$isMobile?'100px':'200px'"></u-image>	20	+ <image src="/static/images/icon/repair.png" class="repairReportImageCss" mode="witFix" ></u-image>
19	<text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>	21	<text class="repairReportTextCss">{{$t("hdk.Repair")}}</text>
20	</view>	22	</view>
21	</view>	23	</view>
	@@ -49,7 +51,37 @@		@@ -49,7 +51,37 @@
49	inspectionData: null,	51	inspectionData: null,
50	auxiliaryData: null,	52	auxiliaryData: null,
51	repairInformation: null,	53	repairInformation: null,
52	- current: "productInformation"	54	+ // current: "productInformation",
		55	+ current: 0,
		56	+ list: [{
		57	+ name: this.$t('hdk.productInformation'),
		58	+ }, {
		59	+ name: this.$t('hdk.inspectionInformation'),
		60	+ }, {
		61	+ name: this.$t('hdk.attachmentInformation')
		62	+ }],
		63	+ inactiveStyle: {
		64	+ width: '120rpx',
		65	+ height: '38rpx',
		66	+ backgroundColor: 'rgba(255, 255, 255, 0)',
		67	+ boxSizing: 'border-box',
		68	+ fontFamily: "苹方中等, 苹方, sans-serif",
		69	+ color: '#555555',
		70	+ textAlign: 'left',
		71	+ lineHeight: 'normal',
		72	+ fontSize: '28rpx'
		73	+ },
		74	+ activeStyle: {
		75	+ width: '128rpx',
		76	+ height: '43rpx',
		77	+ backgroundColor: 'rgba(255, 255, 255, 0)',
		78	+ boxSizing: 'border-box',
		79	+ fontFamily: "苹方中等, 苹方, sans-serif",
		80	+ color: '#00aeaa',
		81	+ textAlign: 'left',
		82	+ lineHeight: 'normal',
		83	+ fontSize: '32rpx'
		84	+ },
53	}	85	}
54	},	86	},
55	computed: {	87	computed: {
	@@ -63,6 +95,18 @@		@@ -63,6 +95,18 @@
63	this.initData()	95	this.initData()
64	},	96	},
65	methods: {	97	methods: {
		98	+ changeLan(lang) {
		99	+ console.log("改变语言", lang);
		100	+ this.list = [];
		101	+ // 重新构建新的 list 数组
		102	+ this.list = [{
		103	+ name: this.$t('hdk.productInformation'),
		104	+ }, {
		105	+ name: this.$t('hdk.inspectionInformation'),
		106	+ }, {
		107	+ name: this.$t('hdk.attachmentInformation')
		108	+ }];
		109	+ },
66	initData() {	110	initData() {
67	// uni.showLoading({title: '查询中...'})	111	// uni.showLoading({title: '查询中...'})
68	getProductFind(this.sn).then(res => {	112	getProductFind(this.sn).then(res => {
	@@ -246,6 +290,16 @@		@@ -246,6 +290,16 @@
246	const pictureRegex = /\.(jpg\|jpeg\|png\|gif)$/i;	290	const pictureRegex = /\.(jpg\|jpeg\|png\|gif)$/i;
247	return pictureRegex.test(str);	291	return pictureRegex.test(str);
248	},	292	},
		293	+ tabChange(item) {
		294	+ this.current = item.index
		295	+ if (this.current == 0) {
		296	+ // console.log(this.informationData);
		297	+ } else if (this.current == 1) {
		298	+ // console.log(this.inspectionData);
		299	+ } else {
		300	+ // console.log(this.auxiliaryData);
		301	+ }
		302	+ },
249	handleItemClick(item) {	303	handleItemClick(item) {
250	this.current = item;	304	this.current = item;
251	console.log('点击的菜单项:', item);	305	console.log('点击的菜单项:', item);
	@@ -263,6 +317,7 @@		@@ -263,6 +317,7 @@
263	}	317	}
264		318
265	.ComponentsBody {	319	.ComponentsBody {
		320	+ margin-top: 5px;
266	// width:100%;	321	// width:100%;
267	// display: flex;	322	// display: flex;
268	// justify-content: center;	323	// justify-content: center;
	@@ -280,7 +335,8 @@		@@ -280,7 +335,8 @@
280	// .attachmentInformation{	335	// .attachmentInformation{
281	// width: 100%;	336	// width: 100%;
282	// }	337	// }
283	-	338	+
		339	+ //移动端样式
284	@media screen and (max-width: 767px) {	340	@media screen and (max-width: 767px) {
285	.repairReportBtnCss {	341	.repairReportBtnCss {
286	width: 100px;	342	width: 100px;
	@@ -295,6 +351,18 @@		@@ -295,6 +351,18 @@
295	bottom: 100px;	351	bottom: 100px;
296	// background-color: #00aeaa;	352	// background-color: #00aeaa;
297	}	353	}
		354	+
		355	+
		356	+
		357	+ // .u-image__image{
		358	+ // width: 100px !important;
		359	+ // height: 100px !important;
		360	+ // }
		361	+
		362	+ .repairReportImageCss{
		363	+ width: 100px !important;
		364	+ height: 100px !important;
		365	+ }
298		366
299	.repairReportTextCss {	367	.repairReportTextCss {
300	position: absolute;	368	position: absolute;
	@@ -309,9 +377,8 @@		@@ -309,9 +377,8 @@
309	// //PC端样式	377	// //PC端样式
310	@media screen and (min-width: 768px) {	378	@media screen and (min-width: 768px) {
311	.repairReportBtnCss {	379	.repairReportBtnCss {
312	- width: 100px;
313	- height: 100px;
314	- border-radius: 100px;	380	+ width: 200px;
		381	+ height: 200px;
315	position: fixed;	382	position: fixed;
316	display: flex;	383	display: flex;
317	flex-direction: column;	384	flex-direction: column;
	@@ -322,9 +389,19 @@		@@ -322,9 +389,19 @@
322	// background-color: #00aeaa;	389	// background-color: #00aeaa;
323	}	390	}
324		391
		392	+ // .u-image__image{
		393	+ // width: 200px !important;
		394	+ // }
		395	+
		396	+
		397	+ .repairReportImageCss{
		398	+ width: 200px !important;
		399	+ height: 200px !important;
		400	+ }
		401	+
325	.repairReportTextCss {	402	.repairReportTextCss {
326	position: absolute;	403	position: absolute;
327	- bottom: 15px;	404	+ bottom: 60px;
328	color: #fff;	405	color: #fff;
329	}	406	}
330		407