970 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="dangerbig-details">
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
受限(类受限)空间作业详情
</view>
</headers>
</view>
<view :style="{ 'padding-top': (statusBarHeight + 45) * 1.5 + 'rpx' }">
<view class="detail-content">
<view class="list">
<view class="list-info">
编号<text class="detail-data">{{detailData.num}}</text>
</view>
<view class="list-info">
状态<text
class="detail-data">{{detailData.status == 1 ? '进行中' : detailData.status == 2 ? '已完成' : ''}}</text>
</view>
<view class="list-info">
作业类型<text class="detail-data">
{{ detailData.workType ? workTypeList[detailData.workType - 1].workTypeName : '--'}}</text>
</view>
<view class="list-info">
建设项目<text class="detail-data">{{detailData.constructionProject}}</text>
</view>
<view class="list-info">
项目组<text class="detail-data">{{detailData.projectGroupName}}</text>
</view>
<view class="list-info">
作业申请单位<text class="detail-data">{{detailData.jobApplicationUnitName}}</text>
</view>
<view class="list-info">
装置/单元<text class="detail-data">{{detailData.deviceUnitName}}</text>
</view>
<view class="list-info">
设施地点名称<text class="detail-data">{{detailData.facilityLocationName}}</text>
</view>
<view class="list-info">
原有介质<text class="detail-data">{{detailData.originalMedium}}</text>
</view>
<view class="list-info">
作业内容<text class="detail-data">{{detailData.jobContent}}</text>
</view>
<view class="list-info">
作业人员<text class="detail-data">{{detailData.operatorName}}</text>
</view>
<view class="list-info">
作业时间<text class="detail-data"
v-if="detailData.jobStartTime && detailData.jobEndTime">{{detailData.jobStartTime+'-'+detailData.jobEndTime}}</text>
</view>
<view class="list-info">
附件:<text style="color: #1684FC;margin-left: 10rpx;" class="detail-data"
@click="downloadFn(item)" v-for="item in detailData.firstExampleVideoList"
:key="item.id">{{item.name}}</text>
</view>
<view class="" v-if="isShow">
<!-- <view class="list-info">
<text>现场作业环境:</text>
<ul>
<li class="img-item" v-for="(item, index) in detailData.fieldWorkingEnvironment"
:key="index">
<image :src="item.url" @click="previewImage(item.url)"/>
</li>
</ul>
</view> -->
<!-- <view class="list-info">
<text>安全技术交底:</text>
<view class="source-box">
<text v-for="(item, index) in detailData.safetyAndTechnologyDisclosure" :key="index"
@click="downloadFile(item.url)">{{item.url}}</text>
</view>
</view> -->
<view class="other-safe">
<view class="other-head">
<view class="other-icon"></view>
<view class="other-text">措施</view>
</view>
<view class="gasanalysis-table">
<table>
<thead>
<tr>
<th rowspan="2">序号</th>
<th colspan="2">作业危害识别</th>
<th rowspan="2">安全控制措施 <br />(措施落实情况落实人必须签字,确认检查合格的打√)</th>
<th colspan="3">措施落实情况</th>
</tr>
<tr>
<th></th>
<th></th>
<th>落实人</th>
<th>确认()</th>
<th>补充措施</th>
</tr>
</thead>
<tbody>
<template v-for="(option, index) in detailData.tableList">
<tr v-for="(ele, eIndex) in option.detailList" :key="ele.id">
<td>{{ index == 0 ? eIndex + 1 : countName(detailData.tableList, index) +
eIndex + 1 }}</td>
<td v-if="index == 0 && eIndex == 0" :rowspan="12">作业申请单位及作业单位</td>
<td v-if="eIndex == 0" :rowspan="option.detailList.length">
{{ option.title }}
</td>
<td>
{{ ele.titleName }}
</td>
<td>
{{ workerListOptionsUp(ele.isAffirmName) }}
</td>
<td>
{{ ele.isAffirm ? ele.isAffirm : '--' }}
</td>
<td>
{{ ele.supplement ? ele.supplement : '--' }}
</td>
</tr>
</template>
</tbody>
</table>
</view>
</view>
<view class="other-safe">
<view class="other-head">
<view class="other-icon"></view>
<view class="other-text">签字</view>
</view>
<view class="list-info">
申请人签字:<text class="detail-data">{{detailData.applicantSignatureName}}</text>
</view>
<view class="list-info">
申请人签字时间:<text class="detail-data">{{detailData.applicantSignatureTime}}</text>
</view>
<view class="list-info">
承包商签字:<text class="detail-data">{{detailData.contractorSignatureName}}</text>
</view>
<view class="list-info">
监理签字:<text class="detail-data">{{detailData.supervisorSignatureName}}</text>
</view>
<view class="list-info">
检测分析氧含量:<text
class="detail-data">{{detailData.detectionAndAnalysisOxygenContent}}</text>
</view>
<view class="list-info">
检测分析时间:<text class="detail-data">{{detailData.detectionAndAnalysisTime}}</text>
</view>
<view class="list-info">
检测分析可燃气:<text
class="detail-data">{{detailData.detectionAndAnalysisCombustibleGas}}</text>
</view>
<view class="list-info">
检测分析地点:<text class="detail-data">{{detailData.detectionAndAnalysisLocation}}</text>
</view>
<view class="list-info">
检测分析有毒:<text class="detail-data">{{detailData.detectionAndAnalysisToxicity}}</text>
</view>
<view class="list-info">
检测分析粉尘:<text class="detail-data">{{detailData.detectionAndAnalysisDust}}</text>
</view>
<view class="list-info">
检测分析签字:<text class="detail-data">{{detailData.detectionAndAnalysisSignatureName}}</text>
</view>
<view class="list-info">
结论:<text class="detail-data">{{detailData.conclusion}}</text>
</view>
<view class="list-info">
作业负责人:<text class="detail-data">{{detailData.operationSupervisorName}}</text>
</view>
<view class="list-info">
作业申请单位确认:<text
class="detail-data">{{detailData.operationApplicationUnitConfirmation}}</text>
</view>
<view class="list-info">
作业负责人时间:<text class="detail-data">{{detailData.operationSupervisorTime}}</text>
</view>
<view class="list-info">
安全工程师(EPC承包商)
<electronicSignature :userId="detailData.epcContractor1" />
<!-- <text class="detail-data">{{detailData.epcContractor1Name}}</text> -->
</view>
<view class="list-info">
专业工程师(EPC承包商)
<electronicSignature :userId="detailData.epcContractor2" />
<!-- <text class="detail-data">{{detailData.epcContractor2Name}}</text> -->
</view>
<view class="list-info">
EPC承包商确认<text class="detail-data">{{detailData.epcContractorConfirmation}}</text>
</view>
<view class="list-info">
EPC承包商时间<text class="detail-data">{{detailData.epcContractorTime}}</text>
</view>
<view class="list-info">
安全工程师(监理单位)
<electronicSignature :userId="detailData.supervisor1" />
<!-- <text class="detail-data">{{detailData.supervisor1Name}}</text> -->
</view>
<view class="list-info">
专业工程师(监理单位)
<electronicSignature :userId="detailData.supervisor2" />
<!-- <text class="detail-data">{{detailData.supervisor2Name}}</text> -->
</view>
<view class="list-info">
监理单位确认:<text class="detail-data">{{detailData.supervisorConfirmation}}</text>
</view>
<view class="list-info">
监理单位时间:<text class="detail-data">{{detailData.supervisorTime}}</text>
</view>
<view class="list-info">
安全工程师(项目组)
<electronicSignature :userId="detailData.projectTeam1" />
<!-- <text class="detail-data">{{detailData.projectTeam1Name}}</text> -->
</view>
<view class="list-info">
专业工程师(项目组)
<electronicSignature :userId="detailData.projectTeam2" />
<!-- <text class="detail-data">{{detailData.projectTeam2Name}}</text> -->
</view>
<view class="list-info">
项目组确认:<text class="detail-data">{{detailData.projectTeamConfirmation}}</text>
</view>
<view class="list-info">
项目组时间:<text class="detail-data">{{detailData.projectTeamTime}}</text>
</view>
<view class="list-info">
安质环部:
<electronicSignature :userId="detailData.safetyQualityEnvironmentalProtectionDepartment" />
<!-- <text class="detail-data">{{detailData.safetyQualityEnvironmentalProtectionDepartmentName}}</text> -->
</view>
<view class="list-info">
安质环部确认:<text
class="detail-data">{{detailData.safetyQualityEnvironmentalProtectionDepartmentConfirmation}}</text>
</view>
<view class="list-info">
安质环部时间:<text
class="detail-data">{{detailData.safetyQualityEnvironmentalProtectionDepartmentTime}}</text>
</view>
<view class="list-info">
作业人签字:<text class="detail-data">{{detailData.operatorSignatureName}}</text>
</view>
<view class="list-info">
监护人签字:<text class="detail-data">{{detailData.guardianSignatureName}}</text>
</view>
<view class="list-info">
签字时间点:<text class="detail-data">{{detailData.signatureTime}}</text>
</view>
</view>
<!--
<view class="safe-mesure">
<view class="safe-btn" @click="goSafeMesure">查看安全措施</view>
</view>
<view class="other-safe">
<view class="other-head">
<view class="other-icon"></view>
<view class="other-text">安全技术交底</view>
</view>
<view class="other-content">
<view class="content-1"><text style="float: right;">安全交底人:</text></view>
<view class="content-2">{{detailData.safetyInformantName}}</view>
<view class="content-3"><text style="float: right;">接受交底人:</text></view>
<view class="content-4">{{detailData.acceptTheInformantName}}</view>
</view>
<view class="other-content">
<view class="content-1"><text style="float: right;">监护人:</text></view>
<view class="content-2">{{detailData.guardianName}}</view>
</view>
</view> -->
</view>
</view>
<view v-if="COMPANY != 'longguang'" class="more-btn" @click="isShow=!isShow">
<text>{{isShow ? "收起详情":"展开详情"}}</text>
<image class="detail_icon_up" :class="{'detail_icon_down': isShow}"
src="/static/bthgIcon/detail_icon.png"></image>
<!-- <uni-icons2 :type="isShow ? 'arrowup':'arrowdown'"></uni-icons2> -->
</view>
</view>
<!-- <view class="detail-nav" v-if="COMPANY != 'longguang'">
<scroll-view class="scrollx-wrap" scroll-x>
<view class="nav-list">
<view class="nav-item" :class="{'active-nav': activeIndex == item.id}"
v-for="(item,index) in navList" :key="index" @click="checkNav(item)">
{{item.name}}
</view>
</view>
</scroll-view>
<view class="detail-wrap">
<plan ref="list" v-if="componentName == 'plan'" :detailId="detailId" :info="detailData"></plan>
<safe ref="list" v-if="componentName == 'safe'" :detailId="detailId" :info="detailData"></safe>
<side ref="list" v-if="componentName == 'side'" :detailId="detailId" :info="detailData"></side>
<workFinally ref="list" v-if="componentName =='workFinally'" :detailId="detailId"
:info="detailData"></workFinally>
</view>
</view> -->
<!-- <view class="add-btn" v-if="activeIndex != 7 && activeIndex != 2 && !(activeIndex == 1 && detailData.engineeringState == 3) -->
<!-- <view class="add-btn" v-if="activeIndex != 7 && userInfo.userId === detailData.assignmentPersonInCharge
&& COMPANY != 'longguang' && detailData.finalAcceptanceStatus !== 2 && isShowBtn && btnAuth" @click="addForm">
<uni-icons2 v-if="activeIndex == 5" type="camera" size="30" color="#fff"></uni-icons2>
<uni-icons2 v-else type="plusempty" size="30" color="#fff"></uni-icons2>
<span>+</span>
</view> -->
</view>
<view class="fixed" :class="{show:showIframe}" v-if="show" @click="show=false">
<view class="iframeMain" @click.stop="show=true">
<video v-if="getType(iframeUrl) == 'video'" class="iframe" :src="iframeUrl"></video>
<image v-else-if="getType(iframeUrl) == 'image'" class="iframe" :src="iframeUrl" mode="aspectFit">
</image>
<iframe v-else class="iframe" ref="iframe" :src="iframeUrl" frameborder="0"></iframe>
</view>
</view>
</view>
</template>
<script>
import plan from './plan.vue'
import safe from './safe.vue'
import side from './side.vue'
import workFinally from './workFinally.vue'
import {
isVideoLink,
isImageLink,
openOutsideFile,
openLocalFile,
removeNetWorkFileTemp,
isJSON
} from '@/utils/tool.js'
export default {
components: {
plan,
safe,
side,
workFinally,
},
data() {
return {
statusBarHeight: 0,
isShow: true,
componentName: "plan",
navList: [{
id: 1,
name: "当前进度"
}, {
id: 2,
name: "安全检查"
}, {
id: 3,
name: "施工旁站"
}, {
id: 4,
name: "最终验收"
}],
activeIndex: 1,
detailId: "",
detailData: {},
isShowBtn: null,
userInfo: {},
btnAuth: true,
showIframe: false,
show: false,
iframeUrl: "",
workCategoryList: [{
id: 1,
workCategoryName: "一级(2-5m)"
}, {
id: 2,
workCategoryName: "二级(5-15m)"
}, {
id: 3,
workCategoryName: "三级(15-30m)"
}, {
id: 4,
workCategoryName: "特级(>30m)"
}, {
id: 5,
workCategoryName: "特殊"
}],
workerListOptions: [],
workTypeList: [{
id: 1,
workTypeName: "受限空间作业"
}, {
id: 2,
workTypeName: "类受限空间作业"
}],
}
},
onReachBottom() {
console.log(1, this.$refs['list'])
},
onPullDownRefresh() {
console.log(2)
},
onShow() {
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
// this.initData()
this.getWork()
this.getDutyPerson();
let that = this;
// setTimeout(function() {
// console.log(that.$refs, 777)
// console.log(that.$refs.listBox, 777)
// if (that.$refs['list'] && that.$refs['list'].initData) {
// console.log(777888)
// that.$refs['list'].initData()
// }
// }, 200)
},
onLoad(val) {
this.btnAuth = this.checkBtnPermission({
key: 'towerOverWork_add',
menuPath: '/project/specialWork/towerOverWork'
})
this.detailId = val.id
},
onUnload() {
removeNetWorkFileTemp();
},
mounted() {},
methods: {
getType(url) {
if (isImageLink(url)) {
return "image"
} else if (isVideoLink(url)) {
return "video"
} else {
return ''
}
},
downloadFile(url) {
// 下载所有的文件
let name = url.substring(url.lastIndexOf('/') + 1);
console.log(name, "文件名称");
if (isVideoLink(url) || isImageLink(url)) {
// 是图片和视频
this.show = true;
this.showIframe = true;
this.iframeUrl = this.url_config + 'image/' + url;
} else {
// openOutsideFile(`${this.url_config}image/${url}`)
openLocalFile(name, `${this.url_config}image/${url}`)
}
return;
},
//预览图片
previewImage(url) {
uni.previewImage({
urls: [url]
})
},
getWork() {
this.sendRequest({
url: 'xmgl/confinedSpaceOperation/queryById',
method: 'get',
data: {
id: this.detailId
},
success: res => {
uni.hideLoading()
// if(res.code==200){
// this.listData = res.result.records
// }
this.detailData = {
...res.result,
hotWorkExecutionTime: [
res.result.jobStartTime ? res.result.jobStartTime : '',
res.result.jobEndTime ? res.result.jobEndTime : '',
],
firstExampleVideoList: isJSON(res.result.fileUrl) && res.result.fileUrl !=
null ? JSON.parse(res.result.fileUrl) : [],
tableList: JSON.parse(res.result.jobHazardIdentificationDetail).reduce((prev,
ele,
index) => {
const findIndex = prev.findIndex(item => item.title == ele[
"field3191920855669"]);
if (findIndex == -1) {
prev.push({
id: index + 1,
title: ele["field3191920855669"],
detailList: [{
id: 'id-' + Math.random().toString(36)
.substr(2, 9),
titleName: ele["field5703120857118"],
isAffirm: ele["field4427420877151"],
isAffirmName: Array.isArray(ele[
"field8506620872502"
]) ? ele[
"field8506620872502"][0] : ele[
"field8506620872502"],
supplement: ele["field9463720880350"],
}]
});
return prev;
}
prev[findIndex].detailList.push({
id: 'id-' + Math.random().toString(36).substr(2, 9),
titleName: ele["field5703120857118"],
isAffirm: ele["field4427420877151"],
isAffirmName: Array.isArray(ele[
"field8506620872502"
]) ? ele[
"field8506620872502"][0] : ele[
"field8506620872502"],
supplement: ele["field9463720880350"],
});
return prev;
}, []),
}
// this.getApply()
}
})
},
countName(list, rowIndex) {
return list.reduce((prev, item, index) => {
// console.log(index == rowIndex, prev);
if (index < rowIndex) {
prev += item.detailList.length;
return prev;
}
return prev;
}, 0);
},
goSafeMesure() {
uni.navigateTo({
url: "./safeMesure?detailId=" + this.detailId
})
},
getApply() {
console.log("=====================================================detail");
console.log(this.detailData);
this.sendRequest({
url: 'xmgl/xzDangerousEngineeringAcceptance/list',
method: 'get',
data: {
engineeringId: this.detailData.id,
projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
type: 5
},
success: res => {
uni.hideLoading()
console.log("xmgl/xzDangerousEngineeringAcceptance/list", res);
let result = res.result
if (res.result.length > 0) {
if (res.result[0].acceptanceResult === null) this.isShowBtn = false
if (res.result[0].acceptanceResult === 1) this.isShowBtn = false
if (res.result[0].acceptanceResult === 2) this.isShowBtn = true
} else {
this.isShowBtn = true
}
}
})
},
checkNav(val) {
this.activeIndex = val.id
if (val.id == 1) {
this.componentName = "plan"
} else if (val.id == 2) {
this.componentName = "safe"
} else if (val.id == 3) {
this.componentName = "side"
} else if (val.id == 4) {
this.componentName = "workFinally"
}
},
addForm() {
if (this.activeIndex == 1) {
uni.navigateTo({
url: './addPlan?id=' + this.detailId
})
} else if (this.activeIndex == 2) {
if (uni.getStorageSync('dangerData')) {
uni.removeStorageSync('dangerData');
}
if (uni.getStorageSync('detailData')) {
uni.removeStorageSync('detailData');
}
uni.navigateTo({
// url:'../safeManage/addExamine?type=1&engineeringId='+this.detailId + '&moduleType=safeCheck'
url: '../../safeSame/addIssue?type=5&engineeringId=' + this.detailId +
'&moduleType=safeCheck'
})
} else if (this.activeIndex == 3) {
uni.navigateTo({
url: './addSide?id=' + this.detailId
})
} else if (this.activeIndex == 4) {
if (this.isShowBtn) {
uni.navigateTo({
url: './addWorkFinally?id=' + this.detailId + '&workTicketCode=' + this.detailData
.workTicketCode
})
} else {
uni.showToast({
title: '请勿重复操作',
icon: "none",
duration: 2000
});
}
}
},
getDutyPerson() {
let data = {
projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
// isFilterQualityRegionEnterprise: 1
}
this.sendRequest({
url: 'xmgl/workerInfo/selectWorkerInfoList',
method: 'post',
data,
success: res => {
if (res.code == 200) {
this.workerListOptions = res.result.records
console.log('获取施工人员下拉', this.workerListOptions)
}
}
})
},
downloadFn(row) {
let that = this;
let src = row.url.includes('http://') ? row.url : that.url_config + 'image/' + row.url;
uni.downloadFile({
url: src, //仅为示例,并非真实的资源
success: (res) => {
console.log(res)
if (res.statusCode === 200) {
// uni.showToast({
// title:'下载成功'
// })
var filePath = res.tempFilePath;
if (!filePath) return
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log(res);
console.log('打开文档成功');
uni.showToast({
title: '打开文档成功'
})
}
});
} else {
uni.showToast({
title: '下载失败'
})
}
}
});
},
},
computed: {
workerListOptionsUp() {
return (workerName) => {
const find = this.workerListOptions.find(item => item.id == workerName);
return find ? find.workerName : '--';
}
},
}
}
</script>
<style lang="scss" scoped>
.download {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 10rpx;
// justify-content: center;
}
.img {
width: 120rpx;
height: 120rpx;
}
.gasanalysis-table {
table {
width: 100%;
// height: 100%;
font-size: 24rpx;
margin-bottom: 20rpx;
margin-top: 20rpx;
}
tr {
height: 100rpx;
}
td {
text-align: center;
min-width: 80rpx;
}
table,
td,
th {
border: 2rpx solid #CDCDCD;
border-collapse: collapse;
// color: white;
}
th {
background-color: #EEEEEE;
font-size: 28rpx;
}
}
.fixed {
position: fixed;
z-index: 9999;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .3);
display: none;
&.show {
display: initial;
}
}
.iframeMain {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 650rpx;
font-size: 0;
.iframe {
width: 100%;
height: 500rpx;
}
}
.other-safe {
background-color: #fff;
// margin-top: 50rpx;
padding: 15rpx 15rpx;
line-height: 40rpx;
.other-head {
display: flex;
.other-icon {
width: 10rpx;
height: 40rpx;
background-color: #2b8df3;
border-radius: 100rpx;
}
.other-text {
margin-left: 20rpx;
}
}
.other-content {
font-size: 22rpx;
width: auto;
min-height: 50rpx;
// background-color: darkred;
// border: 1rpx solid black;
margin: 0 30rpx;
margin-top: 15rpx;
display: flex;
.content-1 {
width: 22%;
}
.content-2 {
width: 24%;
}
.content-3 {
width: 23%;
// margin-left: 10%;
}
.content-4 {
width: 26%;
}
}
}
.safe-mesure {
width: 100%;
height: 100rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
.safe-btn {
text-align: center;
width: 80%;
line-height: 70rpx;
// background-color: darkred;
border: 4rpx solid #2b8df3;
color: #2b8df3;
border-radius: 20rpx;
font-weight: bold;
}
}
.table-info {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
.teble-list {
display: flex;
justify-content: flex-start;
width: 100%;
font-size: 18rpx;
background-color: gainsboro;
.teble-item {
width: 24.8%;
line-height: 40rpx;
// border: 1rpx solid black;
// background-color: darkred;
.item-col {
// margin: 0 5rpx;
margin-left: 5rpx;
margin-top: 5rpx;
padding: 3rpx;
text-align: center;
background-color: #fff;
}
}
}
.u-td {
height: auto;
}
}
.dangerbig-details {
min-height: 100%;
// background: #F6F6F6;
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.detail-content {
padding-top: 20rpx;
}
.list {
margin-bottom: 20rpx;
}
.list-info {
background: #fff;
// border-bottom: 1px solid #F6F6F6;
font-size: 26rpx;
padding: 20rpx 30rpx;
// display: flex;
// align-items: center;
}
.list-info {
.source-box {
display: flex;
flex-direction: column;
text {
color: #8F8FF7;
text-decoration: underline;
margin-top: 20rpx;
}
}
}
.list-info ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: 20rpx;
}
.list-info ul li {
width: 30%;
height: 100px;
margin: 0 10rpx;
margin-bottom: 20rpx;
}
.list-info ul li image {
width: 100%;
height: 100%;
}
.more-btn {
text-align: center;
font-size: 28rpx;
// height: 50rpx;
background: #F1F7FE;
line-height: 50rpx;
border-top: 2rpx dashed #CCCCCC;
border-bottom: 2rpx dashed #CCCCCC;
padding: 14rpx 0;
color: #3190F3;
}
.nav-list {
display: flex;
height: 80rpx;
align-items: center;
padding: 0 20rpx;
.nav-item {
width: 25%;
text-align: center;
white-space: nowrap;
padding: 0 20rpx;
height: 80rpx;
box-sizing: border-box;
line-height: 80rpx;
font-size: 28rpx;
}
.active-nav {
border-bottom: 4rpx solid #4396E7;
}
}
.detail-nav {
width: 100%;
}
.scrollx-wrap {
width: 100%;
background: #fff;
}
.add-btn {
background: #4181FE;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
text-align: center;
line-height: 96rpx;
position: fixed;
bottom: 40rpx;
right: 40rpx;
span {
font-size: 60rpx;
line-height: 90rpx;
color: #fff;
}
}
}
</style>