884 lines
26 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 :themeType="true" :showBack="true">
<view class="headerName">
受限空间作业详情
</view>
</headers>
</view>
<view :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
<view class="detail-content">
<view class="list">
<view class="list-info">
作业票编号<text class="detail-data">{{detailData.workTicketCode}}</text>
</view>
<view class="list-info">
作业申请时间<text class="detail-data">{{detailData.jobApplicationTime}}</text>
</view>
<view class="list-info">
作业申请单位<text class="detail-data">{{detailData.jobApplicationUnitName}}</text>
</view>
<view class="list-info">
作业负责人<text class="detail-data">{{detailData.assignmentPersonInChargeName}}</text>
</view>
<view class="" v-if="isShow">
<view class="list-info">
受限空间内原有介质名称:<text class="detail-data">{{detailData.limitSpaceMediumName}}</text>
</view>
<view class="list-info">
受限空间名称:<text class="detail-data">{{detailData.limitSpaceName}}</text>
</view>
<view class="list-info">
作业人:<text class="detail-data">{{detailData.jobPersonName}}</text>
</view>
<view class="list-info">
作业内容:<text class="detail-data">{{detailData.jobContent}}</text>
</view>
<view class="list-info">
可燃气体信息:
<text class="detail-data">
<text v-for="(item,i) in JSON.parse(detailData.combustibleGasInformation)">
<text style="margin-right: 12rpx;">{{item.name}}({{item.standard||''}})</text>
</text>
</text>
</view>
<view class="list-info">
有毒有害气体:
<text class="detail-data">
<text v-for="(item,i) in JSON.parse(detailData.toxicAndHarmfulGasInformation)">
<text style="margin-right: 12rpx;">{{item.name}}({{item.standard || ''}})</text>
</text>
</text>
</view>
<view class="list-info">
监护人:<text class="detail-data">{{detailData.guardianName}}</text>
</view>
<view class="list-info">
作业单位:<text class="detail-data">{{detailData.operatingUnitName}}</text>
</view>
<view class="list-info">
风险辨识结果:<text class="detail-data">{{detailData.riskIdentificationResult}}</text>
</view>
<view class="list-info">
关联的其他特殊作业及安全作业票编号:<text class="detail-data">{{detailData.otherRelatedSpecialTask}}</text>
</view>
<view class="list-info">
作业实施时间:<text class="detail-data"
v-if="detailData.workExecutionBeginTime && detailData.workExecutionEndTime">{{detailData.workExecutionBeginTime+'-'+detailData.workExecutionEndTime}}</text>
</view>
<view class="list-info">
<text>现场作业环境:</text>
<!-- <view class="source-box">
<text v-for="(item, index) in detailData.fieldWorkingEnvironment" :key="index"
@click="downloadFile(item.url)">{{item.url}}</text>
</view> -->
<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>
<!-- <ul>
<li class="img-item" v-for="(item, index) in detailData.safetyAndTechnologyDisclosure"
:key="index">
<image :src="item.url" @click="previewImage(item.url)"/>
</li>
</ul> -->
</view>
<view class="table-info" style="">
<scroll-view :scroll-x="true" class="teble-list">
<view class="teble-item">
<view class="table-item-inner" style="font-weight: bold;">
<view class="item-col" style="background-color: lightgray;"></view>
<view class="item-col" style="width: 442rpx;background-color: lightgray;">
有毒有害气体名称</view>
<view class="item-col" style="width: 442rpx;background-color: lightgray;">可燃气体名称
</view>
<view class="item-col" style="background-color: lightgray;">氧气含量</view>
<view class="item-col" style="background-color: lightgray;">取样分析时间</view>
<view class="item-col" style="background-color: lightgray;">分析部位</view>
<view class="item-col" style="margin-right: 5rpx;background-color: lightgray;">
分析人</view>
</view>
<view class="table-item-inner">
<view class="item-col" style="background-color: lightgray;font-weight: bold;">
分析项目</view>
<view class="item-col" style="">
{{JSON.parse(detailData.toxicAndHarmfulGasInformation)[0]?JSON.parse(detailData.toxicAndHarmfulGasInformation)[0].name||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.toxicAndHarmfulGasInformation)[1]?JSON.parse(detailData.toxicAndHarmfulGasInformation)[1].name||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.combustibleGasInformation)[0]?JSON.parse(detailData.combustibleGasInformation)[0].name||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.combustibleGasInformation)[1]?JSON.parse(detailData.combustibleGasInformation)[1].name||'--':'--'}}
</view>
<view class="item-col" style="">--</view>
<view class="item-col" style="">--</view>
<view class="item-col" style="">--</view>
<view class="item-col" style="margin-right: 5rpx;">--</view>
</view>
<view class="table-item-inner">
<view class="item-col" style="background-color: lightgray;font-weight: bold;">
合格标准</view>
<view class="item-col" style="">
{{JSON.parse(detailData.toxicAndHarmfulGasInformation)[0]?JSON.parse(detailData.toxicAndHarmfulGasInformation)[0].standard||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.toxicAndHarmfulGasInformation)[1]?JSON.parse(detailData.toxicAndHarmfulGasInformation)[1].standard||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.combustibleGasInformation)[0]?JSON.parse(detailData.combustibleGasInformation)[0].standard||'--':'--'}}
</view>
<view class="item-col" style="">
{{JSON.parse(detailData.combustibleGasInformation)[1]?JSON.parse(detailData.combustibleGasInformation)[1].standard||'--':'--'}}
</view>
<view class="item-col" style="">19.5%~21%(体积分数)</view>
<view class="item-col" style="">--</view>
<view class="item-col" style="">--</view>
<view class="item-col" style="margin-right: 5rpx;">--</view>
</view>
<view
:class="{'table-item-inner':true,'last-row':(i+1) === JSON.parse(detailData.gasAnalysisData).length}"
v-for="(item,i) in JSON.parse(detailData.gasAnalysisData)" :key="i">
<view class="item-col" style="background-color: lightgray;font-weight: bold;">
分析数据</view>
<view class="item-col" style="">{{item.name1}}</view>
<view class="item-col" style="">{{item.name2}}</view>
<view class="item-col" style="">{{item.name3}}</view>
<view class="item-col" style="">{{item.name4}}</view>
<view class="item-col" style="">{{item.name5}}</view>
<view class="item-col" style="">{{item.time}}</view>
<view class="item-col" style="">{{item.local}}</view>
<view class="item-col" style="margin-right: 5rpx;">{{item.person}}</view>
</view>
<!-- <view class="table-item-inner">
<view class="item-col" style="margin-bottom: 5rpx;">分析数据</view>
<view class="item-col" style="margin-bottom: 5rpx;">5%</view>
<view class="item-col" style="margin-bottom: 5rpx;">5%</view>
<view class="item-col" style="margin-bottom: 5rpx;">5%</view>
<view class="item-col" style="margin-bottom: 5rpx;">5%</view>
<view class="item-col" style="margin-bottom: 5rpx;">19.5%~21%(体积分数)</view>
<view class="item-col" style="margin-bottom: 5rpx;">--</view>
<view class="item-col" style="margin-bottom: 5rpx;">--</view>
<view class="item-col" style="margin-right: 5rpx;margin-bottom: 5rpx;">--</view>
</view> -->
</view>
</scroll-view>
</view>
<!-- <view class="table-info2" style="">
<scroll-view :scroll-x="true" class="teble-list2">
<view class="teble-item2">
<view class="table-item-inner2">
<view class="item-col2" style="">-</view>
<view class="item-col2" style="">分析项目</view>
<view class="item-col2" style="margin-bottom: 5rpx;">合格标准</view>
</view>
</view>
<view class="teble-item3">
<view class="item3-row1">有毒有害气体名称</view>
<view class="item3-row2">
<view class="item3-row2-inner" v-for="(item,i) in JSON.parse(detailData.toxicAndHarmfulGasInformation)" :key="i">{{item.name}}</view>
</view>
<view class="item3-row3">
<view class="item3-row3-inner" style="margin-bottom: 5rpx;"
v-for="(item,i) in JSON.parse(detailData.toxicAndHarmfulGasInformation)" :key="i">{{item.standard}}</view>
</view>
</view>
<view class="teble-item3">
<view class="item3-row1">可燃气体名称</view>
<view class="item3-row2">
<view class="item3-row2-inner" v-for="(item,i) in JSON.parse(detailData.combustibleGasInformation)" :key="i">{{item.name}}</view>
</view>
<view class="item3-row3">
<view class="item3-row3-inner" style="margin-bottom: 5rpx;" v-for="(item,i) in JSON.parse(detailData.combustibleGasInformation)" :key="i">{{item.standard}}</view>
</view>
</view>
<view class="teble-item2">
<view class="table-item-inner2">
<view class="item-col2" style="">-</view>
<view class="item-col2" style="">分析项目</view>
<view class="item-col2" style="margin-bottom: 5rpx;">合格标准</view>
</view>
</view>
</scroll-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 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>
<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
} 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: ""
}
},
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()
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: 'confinedSpaceWork_add',
menuPath: '/project/specialWork/confinedSpaceWork'
})
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) {
console.log(url,666)
// 下载所有的文件
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/xzLimitSpaceSafe/queryById',
method: 'get',
data: {
id: this.detailId
},
success: res => {
uni.hideLoading()
// if(res.code==200){
// this.listData = res.result.records
// }
this.detailData = res.result
if (this.detailData.fieldWorkingEnvironment) {
this.detailData.fieldWorkingEnvironment = JSON.parse(this.detailData
.fieldWorkingEnvironment)
this.detailData.fieldWorkingEnvironment.map(item => {
item.url = this.url_config + 'image/' + item.url
})
}
if (this.detailData.safetyAndTechnologyDisclosure) {
this.detailData.safetyAndTechnologyDisclosure = JSON.parse(this.detailData
.safetyAndTechnologyDisclosure)
// this.detailData.safetyAndTechnologyDisclosure.map(item => {
// item.url = this.url_config + 'image/' + item.url
// })
}
// let str = '';
// if(res.result.chooseTypeDescribeList){
// this.detailData.describeName
// res.result.chooseTypeDescribeList.map((item,index) => {
// if(index == res.result.chooseTypeDescribeList.length - 1){
// str = str + item.describeName
// } else {
// str = str + item.describeName + ','
// }
// })
// console.log(str,123456789)
// this.detailData.describeName = str;
// }
this.getApply()
}
})
},
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: 3
},
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=3&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
});
}
}
}
}
}
</script>
<style lang="scss" scoped>
.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;
}
}
.last-row {
padding-bottom: 5rpx;
}
.table-info2 {
display: flex;
justify-content: center;
align-items: center;
// background-color: #fff;
.teble-list2 {
display: flex;
font-size: 18rpx;
background-color: #fff;
white-space: nowrap;
float: left;
.teble-item2 {
background-color: lightgray;
display: inline-block;
white-space: normal;
// padding: 5rpx 0;
.table-item-inner2 {
// padding: 5rpx 0;
// margin: 5rpx 0;
min-width: 220rpx;
.item-col2 {
margin-top: 5rpx;
// width: 220rpx;
min-width: 220rpx;
// padding: 3rpx;
margin-left: 5rpx;
// margin: 0 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
.item-col-inner2 {
margin-top: 5rpx;
width: 220rpx;
// min-width: 220rpx;
// padding: 3rpx;
margin-left: 5rpx;
// margin: 0 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
}
}
}
}
.teble-item3 {
background-color: lightgray;
display: inline-block;
white-space: normal;
line-height: 50rpx;
.item3-row1 {
margin-top: 5rpx;
// width: 220rpx;
min-width: 220rpx;
// padding: 3rpx;
margin-left: 5rpx;
// margin: 0 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
}
.item3-row2 {
display: flex;
.item3-row2-inner {
margin-top: 5rpx;
// width: 220rpx;
min-width: 220rpx;
// padding: 3rpx;
margin-left: 5rpx;
// margin: 0 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
}
}
.item3-row3 {
display: flex;
.item3-row3-inner {
margin-top: 5rpx;
// width: 220rpx;
min-width: 220rpx;
// padding: 3rpx;
margin-left: 5rpx;
// margin: 0 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
}
}
}
}
}
.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;
font-size: 18rpx;
background-color: #fff;
white-space: nowrap;
.teble-item {
display: inline-block;
white-space: normal;
.table-item-inner {
// background-color: lightgray;
display: flex;
// min-width: 200rpx;
.item-col {
width: 220rpx;
padding: 3rpx;
margin-top: 5rpx;
margin-left: 5rpx;
line-height: 50rpx;
text-align: center;
background-color: #F6F6F6;
}
}
}
}
}
.dangerbig-details {
min-height: 100%;
background: #F6F6F6;
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
background-color: white;
}
.detail-content {
padding-top: 20rpx;
}
.list {
margin-bottom: 20rpx;
}
.list-info {
background: #fff;
border-bottom: 1px solid #F6F6F6;
font-size: 26rpx;
padding: 20rpx;
// 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;
}
.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>