937 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 :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.applicantName}}</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.operationEquipmentName}}</text>
</view>
<view class="list-info">
作业地点<text class="detail-data">{{detailData.operationLocation}}</text>
</view>
<view class="list-info">
作业内容<text class="detail-data">{{detailData.operationContent}}</text>
</view>
<view class="list-info">
作业时间<text class="detail-data"
v-if="detailData.operationStartTime && detailData.operationEndTime">{{detailData.operationStartTime+'-'+detailData.operationEndTime}}</text>
</view>
<view class="list-info">
吊车类型/车牌号:<text class="detail-data">{{detailData.craneTypeLicensePlateNumber}}</text>
</view>
<view class="list-info">
负荷描述:<text class="detail-data">{{detailData.loadDescription}}</text>
</view>
<view class="list-info">
级别:<text
class="detail-data">{{detailData.level ? workCategoryList[detailData.level - 1].workCategoryName : '--'}}</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>
<div class="gasanalysis-table">
<table>
<thead>
<tr>
<th>序号</th>
<th>特种作业人员</th>
<th>特种作业人员证号</th>
</tr>
</thead>
<tbody>
<tr v-for="(ele, eIndex) in detailData.tableList2" :key="ele.id">
<td>
{{ eIndex + 1 }}
</td>
<td>
{{ workerListOptionsUp(ele.specialOperationStaff) }}
</td>
<td>
{{ ele.specialOperatorIdNumber ? ele.specialOperatorIdNumber : '--' }}
</td>
</tr>
</tbody>
</table>
</div>
<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>序号</th>
<th>安全措施名称</th>
<th>安全措施确认</th>
</tr>
</thead>
<tbody>
<tr v-for="(ele, eIndex) in detailData.tableList" :key="ele.id">
<td>{{ eIndex + 1 }}</td>
<td>
{{ ele.titleName }}
</td>
<td>
{{ ele.isAffirm ? ele.isAffirm : '--' }}
</td>
</tr>
</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.operationUnitConstructionApplicantName}}</text>
</view>
<view class="list-info">
作业单位施工申请人日期:<text
class="detail-data">{{detailData.operationUnitConstructionApplicantDate}}</text>
</view>
<view class="list-info">
作业监护:<text class="detail-data">{{detailData.operationSupervisionName}}</text>
</view>
<view class="list-info">
作业监护日期:<text class="detail-data">{{detailData.operationSupervisionDate}}</text>
</view>
<view class="list-info">
项目经理/施工经理(施工承包商)
<electronicSignature :userId="detailData.projectConstructionManagerOfConstructionContractor" />
<!-- <text class="detail-data">{{detailData.projectConstructionManagerOfConstructionContractorName}}</text> -->
</view>
<view class="list-info">
项目经理/施工经理时间(施工承包商)<text class="detail-data">{{detailData.projectConstructionManagerTime}}</text>
</view>
<view class="list-info">
安全经理(施工承包商)
<electronicSignature :userId="detailData.safetyManagerOfConstructionContractor" />
<!-- <text class="detail-data">{{detailData.safetyManagerOfConstructionContractorName}}</text> -->
</view>
<view class="list-info">
安全经理时间(施工承包商)<text
class="detail-data">{{detailData.safetyManagerTimeOfConstructionContractor}}</text>
</view>
<view class="list-info">
现场经理/专业工程师:
<electronicSignature :userId="detailData.siteManagerProfessionalEngineer" />
<!-- <text class="detail-data">{{detailData.siteManagerProfessionalEngineerName}}</text> -->
</view>
<view class="list-info">
现场经理/专业工程师时间:<text
class="detail-data">{{detailData.siteManagerProfessionalEngineerTime}}</text>
</view>
<view class="list-info">
安全经理(EPC承包商)
<electronicSignature :userId="detailData.safetyManagerOfEpcContractor" />
<!-- <text class="detail-data">{{detailData.safetyManagerOfEpcContractorName}}</text> -->
</view>
<view class="list-info">
安全经理时间(EPC承包商)<text
class="detail-data">{{detailData.safetyManagerTimeOfEpcContractor}}</text>
</view>
<view class="list-info" v-if="detailData.level == 3">
安全工程师(监理单位)
<electronicSignature :userId="detailData.safetyEngineerOfSupervisionUnit" />
<!-- <text class="detail-data">{{detailData.safetyEngineerOfSupervisionUnitName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 3">
安全工程师时间(监理单位)<text
class="detail-data">{{detailData.safetyEngineerTimeOfSupervisionUnit}}</text>
</view>
<view class="list-info" v-if="detailData.level == 3">
总监/总代:
<electronicSignature :userId="detailData.directorGeneralAgent" />
<!-- <text class="detail-data">{{detailData.directorGeneralAgentName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 3">
总监/总代时间:<text class="detail-data">{{detailData.directorGeneralAgentTime}}</text>
</view>
<view class="list-info" v-if="detailData.level == 2">
专业工程师(项目组)
<electronicSignature :userId="detailData.professionalEngineerOfProjectTeam" />
<!-- <text class="detail-data">{{detailData.professionalEngineerOfProjectTeamName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 2">
专业工程师日期(项目组)<text
class="detail-data">{{detailData.professionalEngineerDateOfProjectTeam}}</text>
</view>
<view class="list-info" v-if="detailData.level == 2">
项目经理/施工经理(项目组)
<electronicSignature :userId="detailData.projectConstructionManagerOfProjectTeam" />
<!-- <text class="detail-data">{{detailData.projectConstructionManagerOfProjectTeamName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 2">
项目经理/施工经理日期(项目组)<text
class="detail-data">{{detailData.projectConstructionManagerDateOfProjectTeam}}</text>
</view>
<view class="list-info" v-if="detailData.level == 1">
专业工程师(施工管理部)
<electronicSignature :userId="detailData.professionalEngineerOfConstructionManagementDepartment" />
<!-- <text class="detail-data">{{detailData.professionalEngineerOfConstructionManagementDepartmentName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 1">
专业工程师日期(施工管理部)<text
class="detail-data">{{detailData.professionalEngineerDateOfConstructionManagementDepartment}}</text>
</view>
<view class="list-info" v-if="detailData.level == 1">
部门经理:
<electronicSignature :userId="detailData.departmentManager" />
<!-- <text class="detail-data">{{detailData.departmentManagerName}}</text> -->
</view>
<view class="list-info" v-if="detailData.level == 1">
部门经理日期:<text class="detail-data">{{detailData.departmentManagerDate}}</text>
</view>
<view class="list-info">
作业负责人:<text class="detail-data">{{detailData.operationSupervisorName}}</text>
</view>
<view class="list-info">
作业负责人日期:<text class="detail-data">{{detailData.operationSupervisorDate}}</text>
</view>
<view class="list-info">
安全工程师:<text class="detail-data">{{detailData.safetyEngineerName}}</text>
</view>
<view class="list-info">
安全工程师日期:<text class="detail-data">{{detailData.safetyEngineerDate}}</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: "一级(M>100吨)"
}, {
id: 2,
workCategoryName: "二级(40吨≤M≤100吨)"
}, {
id: 3,
workCategoryName: "三级(M<40吨)"
}],
workerListOptions: [],
}
},
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/liftingOperation/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.operationStartTime ? res.result.operationStartTime : '',
res.result.operationEndTime ? res.result.operationEndTime : '',
],
firstExampleVideoList: isJSON(res.result.fileUrl) && res.result.fileUrl !=
null ? JSON.parse(res.result.fileUrl) : [],
tableList: res.result.safetyMeasuresList && JSON.parse(res.result
.safetyMeasuresList).reduce((prev, ele,
index) => {
prev.push({
id: 'id-' + Math.random().toString(36).substr(2, 9),
titleName: ele["field9615049464860"],
isAffirm: ele["field4905649477307"],
});
return prev
}, []),
tableList2: res.result.operatorLicenseNumber && JSON.parse(res.result
.operatorLicenseNumber).reduce((prev,
item) => {
prev.push({
id: "id-" + Math.random().toString(36).substr(2, 9),
specialOperationStaff: Array.isArray(item[
"field6438549419062"]) ? item[
"field6438549419062"][0] : item[
"field6438549419062"],
specialOperatorIdNumber: item["field8297449432862"],
});
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>