新增焊缝外观检测

scanpages/hj/daily_audit.vue

@@ -411,6 +411,7 @@
 		bottom: 0;
 		background: #ffffff;
 		padding: 20rpx 32rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
 		display: flex;
 		align-items: center;
 		gap: 20rpx;
@@ -447,8 +448,8 @@
 		}
 	}
 
-	// 给底部操作栏留出空间
+	// 给底部操作栏留出空间（含安全区）
 	.list-scroll {
-		padding-bottom: 140rpx;
+		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	}
 </style>

scanpages/hj/daily_paper.vue

@@ -69,9 +69,14 @@
 					<text class="card__value">{{ form.Specification || '--' }}</text>
 				</view>
 				<!-- 焊缝类型 -->
-				<view class="card__row">
+				<view class="card__row" @click="handleShowWeldTypeSelect">
 					<text class="card__label">焊缝类型</text>
-					<text class="card__value">{{ form.WeldTypeCode || '--' }}</text>
+					<view class="card__value-wrap card__value-wrap--clickable">
+						<text class="card__value" :class="{ 'card__value--placeholder': !form.WeldTypeCode }">
+							{{ form.WeldTypeCode || '请选择' }}
+						</text>
+						<u-icon name="arrow-right" :size="24" color="#bbb" />
+					</view>
 				</view>
 			</view>
 		</view>
@@ -119,10 +124,13 @@
 					</view>
 				</view>
 				<!-- 焊接方法 -->
-				<view class="card__row">
+				<view class="card__row" @click="handleShowWeldingMethodSelect">
 					<text class="card__label">焊接方法</text>
-					<view class="card__value-wrap">
-						<input class="card__input" v-model="form.WeldingMethodCode" type="text" placeholder="请输入焊接方法" />
+					<view class="card__value-wrap card__value-wrap--clickable">
+						<text class="card__value" :class="{ 'card__value--placeholder': !form.WeldingMethodCode }">
+							{{ form.WeldingMethodCode || '请选择' }}
+						</text>
+						<u-icon name="arrow-right" :size="24" color="#bbb" />
 					</view>
 				</view>
 				<!-- 备注 -->
@@ -169,6 +177,14 @@
 		<!-- 焊工类型选择弹窗 -->
 		<nbd-select v-model="showTypePicker" title="选择焊工类型" :list="welderTypeList" label-key="BaseInfoName"
 			value-key="BaseInfoCode" @confirm="handleConfirmType" />
+
+		<!-- 焊缝类型选择弹窗 -->
+		<nbd-select v-model="showWeldTypePicker" :show-search="true" title="选择焊缝类型" :list="weldTypeList"
+			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmWeldType" />
+
+		<!-- 焊接方法选择弹窗 -->
+		<nbd-select v-model="showWeldingMethodPicker" :show-search="true" title="选择焊接方法" :list="weldingMethodList"
+			label-key="BaseInfoCode" value-key="BaseInfoId" @confirm="handleConfirmWeldingMethod" />
 	</view>
 </template>
 
@@ -176,7 +192,7 @@
 import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { reqGetWeldJointByWeldJointId, reqSaveWeldingDailyByWeldJointId, reqGetManualPointSave, reqFitupCheckByWeldJointId } from '@/api/hj.js'
-import { reqWeldingLocation } from '@/api/base.js'
+import { reqWeldingLocation, reqGetWeldTypeList, reqGetWeldingMethodList } from '@/api/base.js'
 import { useUserStore, useMenuStore } from '@/store'
 
 
@@ -193,7 +209,11 @@ const postWeldAttachUrl = ref('')
 // ===== 弹窗 =====
 const showLocationPicker = ref(false)
 const showTypePicker = ref(false)
+const showWeldTypePicker = ref(false)
+const showWeldingMethodPicker = ref(false)
 const locationList = ref([])
+const weldTypeList = ref([])
+const weldingMethodList = ref([])
 const welderTypeList = ref([
 	{ BaseInfoName: '打底/盖面', BaseInfoCode: 0 },
 	{ BaseInfoName: '打底', BaseInfoCode: 1 },
@@ -246,6 +266,34 @@ const handleConfirmType = (item) => {
 	showTypePicker.value = false
 }
 
+const handleShowWeldTypeSelect = () => {
+	reqGetWeldTypeList().then(res => {
+		weldTypeList.value = res.data || []
+		showWeldTypePicker.value = true
+	})
+}
+
+const handleConfirmWeldType = (item) => {
+	form.value.WeldTypeId = item.BaseInfoId
+	form.value.WeldTypeCode = item.BaseInfoCode
+	form.value.WeldTypeName = item.BaseInfoName
+	showWeldTypePicker.value = false
+}
+
+const handleShowWeldingMethodSelect = () => {
+	reqGetWeldingMethodList().then(res => {
+		weldingMethodList.value = res.data || []
+		showWeldingMethodPicker.value = true
+	})
+}
+
+const handleConfirmWeldingMethod = (item) => {
+	form.value.WeldingMethodId = item.BaseInfoId
+	form.value.WeldingMethodCode = item.BaseInfoCode
+	form.value.WeldingMethodName = item.BaseInfoName
+	showWeldingMethodPicker.value = false
+}
+
 // ===== 操作 =====
 const handlePoint = async () => {
 	await reqGetManualPointSave(form.value.WeldJointId)
@@ -279,6 +327,9 @@ const handleReport = () => {
 					time: form.value.WeldingDateTemp,
 					weldingLocation: form.value.WeldingLocationId || '',
 					welderType: form.value.welderType,
+					// 同步更新焊口焊缝类型 / 焊接方法
+					WeldTypeId: form.value.WeldTypeId || '',
+					WeldingMethodId: form.value.WeldingMethodId || '',
 					PreWeldAttachUrl: preWeldAttachUrl.value || form.value.PreWeldAttachUrl || '',
 					PostWeldAttachUrl: postWeldAttachUrl.value || form.value.PostWeldAttachUrl || ''
 				})
@@ -295,11 +346,42 @@ const handleMutualCheck = () => {
 	uni.navigateTo({ url: '/scanpages/hj/make_right?id=' + weldJointId.value })
 }
 
+// 按 Code 回填 Id，保证未重选时提交仍能同步更新焊口
+const fillTypeMethodIds = async () => {
+	const needWeldType = form.value.WeldTypeCode && !form.value.WeldTypeId
+	const needMethod = form.value.WeldingMethodCode && !form.value.WeldingMethodId
+	if (!needWeldType && !needMethod) return
+	try {
+		const tasks = []
+		if (needWeldType) tasks.push(reqGetWeldTypeList())
+		else tasks.push(Promise.resolve(null))
+		if (needMethod) tasks.push(reqGetWeldingMethodList())
+		else tasks.push(Promise.resolve(null))
+		const [typeRes, methodRes] = await Promise.all(tasks)
+		if (typeRes?.data) {
+			const hit = typeRes.data.find(i => i.BaseInfoCode === form.value.WeldTypeCode)
+			if (hit) {
+				form.value.WeldTypeId = hit.BaseInfoId
+				form.value.WeldTypeName = hit.BaseInfoName
+			}
+		}
+		if (methodRes?.data) {
+			const hit = methodRes.data.find(i => i.BaseInfoCode === form.value.WeldingMethodCode)
+			if (hit) {
+				form.value.WeldingMethodId = hit.BaseInfoId
+				form.value.WeldingMethodName = hit.BaseInfoName
+			}
+		}
+	} catch (e) {
+		console.error('回填焊缝类型/焊接方法ID失败:', e)
+	}
+}
+
 // ===== 生命周期 =====
 onLoad((opt) => {
 	weldJointId.value = opt.id || ''
 
-	reqGetWeldJointByWeldJointId(opt.id).then(res => {
+	reqGetWeldJointByWeldJointId(opt.id).then(async (res) => {
 		form.value = res.data || {}
 		if (form.value.CoverWelderName) {
 			form.value.welderName = form.value.CoverWelderName
@@ -316,6 +398,8 @@ onLoad((opt) => {
 		// 回显已有照片
 		preWeldAttachUrl.value = form.value.PreWeldAttachUrl || ''
 		postWeldAttachUrl.value = form.value.PostWeldAttachUrl || ''
+
+		await fillTypeMethodIds()
 	})
 
 	reqFitupCheckByWeldJointId(opt.id).then(res => {

scanpages/hj/material_sampling.vue

@@ -62,6 +62,24 @@
 							failText="不准确" />
 					</view>
 				</view>
+				<!-- 专项审核办理人：材料编码批次或材料数量不准确时必填 -->
+				<view class="card__row" @click="handleShowReviewerSelect">
+					<text class="card__label" :class="{ required: needSpecialReviewer }">专项审核办理人</text>
+					<view class="card__value-wrap card__value-wrap--clickable">
+						<text class="card__value" :class="{ 'card__value--placeholder': !specialReviewerName }">
+							{{ specialReviewerName || '请选择' }}
+						</text>
+						<u-icon name="arrow-right" :size="24" color="#bbb" />
+					</view>
+				</view>
+
+				<!-- 两侧主编码反馈 -->
+				<view class="card__row card__row--stack">
+					<text class="card__label">两侧主编码反馈</text>
+					<view class="card__value-wrap">
+						<textarea readonly class="remark-input" placeholder="请输入" :maxlength="200" auto-height />
+					</view>
+				</view>
 			</view>
 		</view>
 
@@ -174,6 +192,10 @@
 				<text class="btn-primary-gradient__text">提交结果</text>
 			</view>
 		</view>
+
+		<!-- 专项审核办理人选择 -->
+		<nbd-select v-model="showReviewerPicker" :show-search="true" title="选择专项审核办理人" :list="reviewerList"
+			label-key="BaseInfoName" value-key="BaseInfoId" @confirm="handleConfirmReviewer" />
 	</view>
 </template>
 
@@ -183,7 +205,7 @@ import { onLoad } from '@dcloudio/uni-app'
 import { storeToRefs } from 'pinia'
 import { useUserStore, useMenuStore } from '@/store'
 
-import { reqPreWeldJointByWeldJointId, reqSaveCuttingCheck, reqCuttingCheckByWeldJointId, reqGetAntiCorrosionCheck } from '@/api/hj'
+import { reqPreWeldJointByWeldJointId, reqSaveCuttingCheck, reqCuttingCheckByWeldJointId, reqGetAntiCorrosionCheck, reqGetSpecialReviewers } from '@/api/hj'
 
 const cuttingFields = [
 	{ label: '下料长度', key: 'CuttingLength' },
@@ -191,6 +213,7 @@ const cuttingFields = [
 	{ label: '坡口角度', key: 'GrooveAngle' },
 	{ label: '材料编码批次', key: 'IsMaterialCodeBatchNoAccurate', type: 'tag', tagMatch: true, tagPassText: '准确', tagFailText: '不准确' },
 	{ label: '材料数量', key: 'IsMaterialQuantityAccurate', type: 'tag', tagMatch: true, tagPassText: '准确', tagFailText: '不准确' },
+	{ label: '专项审核办理人', key: 'SpecialReviewerName' },
 	{ label: '检查人', key: 'CheckPersonName' },
 	{ label: '检查时间', key: 'CheckTime' },
 	{ label: '检查结果', key: 'CheckResult', type: 'tag', tagMatch: '合格' },
@@ -231,11 +254,21 @@ const layingOffForm = ref({
 	CheckResult: '合格',
 	IsMaterialCodeBatchNoAccurate: '准确',
 	IsMaterialQuantityAccurate: '准确',
+	SpecialReviewerId: '',
 	UnqualifiedReason: '',
 	RectifyRequirement: '',
 	Remark: ''
 })
 
+const showReviewerPicker = ref(false)
+const reviewerList = ref([])
+const specialReviewerName = ref('')
+
+// 材料编码批次或材料数量不准确时，专项审核办理人必填
+const needSpecialReviewer = computed(() =>
+	layingOffForm.value.IsMaterialCodeBatchNoAccurate === '不准确' ||
+	layingOffForm.value.IsMaterialQuantityAccurate === '不准确'
+)
 
 // 照片组件引用
 const photoRef = ref(null)
@@ -260,11 +293,40 @@ watch(() => layingOffForm.value.CheckResult, async (val) => {
 	}
 })
 
+const handleShowReviewerSelect = () => {
+	const projectId = currentProject.value?.ProjectId || info.value?.ProjectId
+	if (!projectId) {
+		uni.showToast({ title: '缺少项目信息', icon: 'none' })
+		return
+	}
+	reqGetSpecialReviewers(projectId).then(res => {
+		reviewerList.value = Array.isArray(res.data) ? res.data : []
+		showReviewerPicker.value = true
+	})
+}
+
+const handleConfirmReviewer = (item) => {
+	if (!item) return
+	layingOffForm.value.SpecialReviewerId = item.BaseInfoId || item.PersonId || ''
+	specialReviewerName.value = item.BaseInfoName || item.PersonName || ''
+	showReviewerPicker.value = false
+}
+
+const validateSpecialReviewer = () => {
+	if (!needSpecialReviewer.value) return true
+	if (!layingOffForm.value.SpecialReviewerId) {
+		uni.showToast({ title: '请选择专项审核办理人', icon: 'none' })
+		return false
+	}
+	return true
+}
+
 const handleSubmit = () => {
 	if (!canEdit.value) {
 		uni.showToast({ title: '当前岗位仅可查看', icon: 'none' })
 		return
 	}
+	if (!validateSpecialReviewer()) return
 	uni.showModal({
 		title: '确认提交',
 		content: '确定提交吗？',
@@ -286,6 +348,7 @@ const handleSubmit = () => {
 					GrooveAngle: layingOffForm.value.GrooveAngle,		// 坡口角度
 					IsMaterialCodeBatchNoAccurate: layingOffForm.value.IsMaterialCodeBatchNoAccurate === '准确',	// 材料编码批次
 					IsMaterialQuantityAccurate: layingOffForm.value.IsMaterialQuantityAccurate === '准确',	// 材料数量
+					SpecialReviewerId: layingOffForm.value.SpecialReviewerId || '',	// 专项审核办理人
 					CheckPerson: userInfo.value?.PersonId,				// 检查人员	
 					CheckTime: uni.formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm'),	// 检查时间
 					CreateUser: userInfo.value?.PersonId,				// 创建人员

scanpages/hj/weld_appearance.vue

@@ -0,0 +1,361 @@
+<template>
+	<view class="detail-page">
+		<!-- 焊口主标识 -->
+		<view class="joint-hero">
+			<text class="joint-hero__code">{{ info.WeldJointCode || '--' }}</text>
+			<view class="joint-hero__meta">
+				<view class="joint-hero__pill">
+					<text class="pill-label">管线编码</text>
+					<text class="pill-value">{{ info.PipelineCode || '--' }}</text>
+				</view>
+				<view class="joint-hero__pill">
+					<text class="pill-label">项目名称</text>
+					<text class="pill-value">{{ info.ProjectName || info.ProjectId || '--' }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 外观检测填报 -->
+		<view class="section">
+			<view class="section__header">
+				<view class="section__bar"></view>
+				<text class="section__title">焊缝外观检测</text>
+			</view>
+			<view class="card">
+				<view class="card__row">
+					<text class="card__label required">外观是否合格</text>
+					<view class="card__value-wrap card__value-wrap--clickable">
+						<nbd-check-btn v-model="form.qualifiedText" passKey="合格" failKey="不合格" passText="合格"
+							failText="不合格" />
+					</view>
+				</view>
+				<view class="card__row">
+					<text class="card__label">检测人</text>
+					<view class="card__value-wrap">
+						<text class="card__value">{{ checkPersonName || '--' }}</text>
+					</view>
+				</view>
+				<view class="card__row card__row--stack">
+					<text class="card__label">备注</text>
+					<view class="card__value-wrap">
+						<textarea class="remark-input" v-model="form.Remark" placeholder="请输入备注信息（选填）"
+							:maxlength="200" auto-height />
+					</view>
+				</view>
+				<view class="card__row card__row--stack">
+					<text class="card__label required">照片</text>
+					<view class="card__value-wrap">
+						<nbd-photo-upload ref="photoRef" v-model:attachUrl="form.AttachUrl"
+							typeName="WeldAppearance" />
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 外观检测记录 -->
+		<view class="section">
+			<nbd-history-card title="外观检测" :list="recordList" />
+		</view>
+
+		<!-- 提交按钮 -->
+		<view class="submit-bar">
+			<view class="btn-primary-gradient" @click="handleSubmit">
+				<text class="btn-primary-gradient__text">提交结果</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed
+	} from 'vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		storeToRefs
+	} from 'pinia'
+	import {
+		useUserStore
+	} from '@/store'
+	import {
+		reqWeldAppearanceJointDetail,
+		reqSaveWeldAppearanceCheck
+	} from '@/api/hj.js'
+
+	const userStore = useUserStore()
+	const {
+		userInfo,
+		currentProject
+	} = storeToRefs(userStore)
+
+	const id = ref('')
+	const info = ref({})
+	const recordList = ref([])
+	const photoRef = ref(null)
+
+	const form = ref({
+		qualifiedText: '合格',
+		Remark: '',
+		AttachUrl: ''
+	})
+
+	const checkPersonName = computed(() => userInfo.value?.PersonName || '')
+
+	const toBoolQualified = (val) => {
+		if (val === true || val === 1 || val === '1' || val === 'true' || val === '合格') return true
+		if (val === false || val === 0 || val === '0' || val === 'false' || val === '不合格') return false
+		return !!val
+	}
+
+	const normalizeRecords = (list) => {
+		if (!Array.isArray(list)) return []
+		return list.map((item) => {
+			const qualified = toBoolQualified(item.IsQualified)
+			return {
+				...item,
+				IsQualified: qualified,
+				CheckPersonName: item.CheckPersonName || item.CheckPerson || '--',
+				CheckTime: item.CheckTime || '--',
+				AttachUrl: item.AttachUrl || item.AttachUrl1 || ''
+			}
+		})
+	}
+
+	const parseDetail = (data) => {
+		if (!data) return {
+			joint: {},
+			records: []
+		}
+		if (Array.isArray(data)) {
+			return {
+				joint: {},
+				records: data
+			}
+		}
+		const joint = data.Joint || data.WeldJoint || data.joint || data.JointInfo || data
+		const records = data.History || data.Records || data.AppearanceChecks || data.AppearanceCheckList ||
+			data.HistoryList || data.CheckRecords || data.list || data.records || []
+		return {
+			joint: joint && typeof joint === 'object' && !Array.isArray(joint) ? joint : {},
+			records: Array.isArray(records) ? records : []
+		}
+	}
+
+	const loadDetail = async (weldJointId) => {
+		try {
+			uni.showLoading({
+				title: '加载中...',
+				mask: true
+			})
+			const res = await reqWeldAppearanceJointDetail(weldJointId)
+			const {
+				joint,
+				records
+			} = parseDetail(res.data)
+			info.value = {
+				...joint,
+				WeldJointId: joint.WeldJointId || weldJointId,
+				ProjectName: joint.ProjectName || currentProject.value?.ProjectName || ''
+			}
+			recordList.value = normalizeRecords(records)
+		} catch (error) {
+			console.error('获取焊缝外观检测详情失败:', error)
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			})
+		} finally {
+			uni.hideLoading()
+		}
+	}
+
+	const handleSubmit = () => {
+		const jointId = info.value.WeldJointId || id.value
+		if (!jointId) {
+			uni.showToast({
+				title: '焊口信息缺失',
+				icon: 'none'
+			})
+			return
+		}
+		if (!form.value.AttachUrl && !photoRef.value?.hasPending()) {
+			uni.showToast({
+				title: '请上传照片',
+				icon: 'none'
+			})
+			return
+		}
+		uni.showModal({
+			title: '确认提交',
+			content: '确定提交吗？',
+			success: async ({
+				confirm
+			}) => {
+				if (!confirm) return
+				try {
+					if (photoRef.value?.hasPending()) {
+						uni.showLoading({
+							title: '上传照片中...',
+							mask: true
+						})
+						await photoRef.value.uploadAll()
+						uni.hideLoading()
+					}
+					await reqSaveWeldAppearanceCheck({
+						ProjectId: currentProject.value?.ProjectId || info.value.ProjectId,
+						WeldJointId: jointId,
+						IsQualified: form.value.qualifiedText === '合格',
+						CheckPerson: userInfo.value?.PersonId,
+						CheckTime: uni.formatTime(new Date().getTime(), 'YYYY-MM-DD HH:mm'),
+						CreateUser: userInfo.value?.PersonId,
+						Remark: form.value.Remark || '',
+						AttachUrl: form.value.AttachUrl,
+						AppearanceCheckId: ''
+					})
+					uni.showToast({
+						title: '提交成功',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.navigateBack()
+					}, 1500)
+				} catch (error) {
+					console.error('保存焊缝外观检测失败:', error)
+				}
+			}
+		})
+	}
+
+	onLoad((opt) => {
+		if (opt.id) {
+			// opt.id = '6c887720-3168-4bb4-a268-7ceef24561a4'
+			id.value = opt.id
+			loadDetail(opt.id)
+		} else {
+			uni.showToast({
+				title: '请通过扫码进入',
+				icon: 'none'
+			})
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	$primary: $app-primary;
+	$primary-light: $app-primary-light;
+	$primary-mid: $app-primary-mid;
+	$primary-dark: $app-primary-dark;
+	$text: $app-text;
+	$text-secondary: $app-text-secondary;
+	$border: $app-border;
+	$radius: $app-radius;
+	$bg: #f0f2f5;
+	$card-bg: #ffffff;
+	$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+
+	.detail-page {
+		background: $bg;
+	}
+
+	.joint-hero {
+		position: relative;
+		margin: 24rpx;
+		padding: 36rpx 32rpx 28rpx;
+		background: $card-bg;
+		border-radius: $radius;
+		box-shadow: $shadow-md;
+		overflow: hidden;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			height: 4rpx;
+			background: linear-gradient(90deg, $primary, #6ba3ff, $primary);
+			background-size: 200% 100%;
+			animation: shimmer 3s ease-in-out infinite;
+		}
+
+		@keyframes shimmer {
+
+			0%,
+			100% {
+				background-position: 0% 0;
+			}
+
+			50% {
+				background-position: 100% 0;
+			}
+		}
+
+		&__code {
+			display: block;
+			font-size: 52rpx;
+			font-weight: 800;
+			color: $text;
+			line-height: 1.2;
+			word-break: break-all;
+			font-family: monospace;
+			letter-spacing: 2rpx;
+			margin-bottom: 28rpx;
+			position: relative;
+			padding-left: 24rpx;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 6rpx;
+				bottom: 6rpx;
+				width: 4rpx;
+				background: $primary;
+				border-radius: 2rpx;
+			}
+		}
+
+		&__meta {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 12rpx;
+		}
+
+		&__pill {
+			display: inline-flex;
+			width: 100%;
+			align-items: center;
+			gap: 8rpx;
+			background: $primary-light;
+			padding: 10rpx 18rpx;
+			border-radius: 10rpx;
+			border: 1rpx solid $primary-mid;
+
+			.pill-label {
+				font-size: 22rpx;
+				color: $text-secondary;
+				width: 60rpx;
+			}
+
+			.pill-value {
+				font-size: 24rpx;
+				font-weight: 600;
+				color: $primary-dark;
+				font-family: monospace;
+			}
+		}
+	}
+
+	.submit-bar {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 20rpx 24rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		background: linear-gradient(180deg, rgba(240, 242, 245, 0) 0%, $bg 20%);
+	}
+</style>