admin/zhgdyunapp_vue3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
zhgdyunapp_vue3/pages/projectEnd/startReportApproveManage/unitProjectStartWorkReport/detail.vue

1010 lines
26 KiB
Vue
Raw Normal View History

flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
<template>
<view class="dangerbig-details">
<view class="fixedheader">
<headers :showBack="true">
<view class="headerName">
单位工程开工报审详情
</view>
</headers>
</view>
flx:修复page-mate app会带来页面不适配问题 修复app会被状态栏遮挡问题
2025-04-11 14:24:29 +08:00
<view :style="{ 'padding-top': ((statusBarHeight * 2) + 45) * 1.5 + 'rpx' }">
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
<view class="detail-content">
<view class="list">
<view class="list-info">
编号：<text class="detail-data">{{detailData.no}}</text>
</view>
<view class="list-info">
承包模式：<text class="detail-data">
{{ detailData.contractingModel ? contractModelList[detailData.contractingModel - 1].contractModelName : '--' }}</text>
</view>
<view class="list-info">
单位工程：<text class="detail-data">{{detailData.unitProjectName}}</text>
</view>
<view class="list-info">
单位工程号：<text class="detail-data">{{detailData.unitProjectNumber}}</text>
</view>
<view class="list-info">
区域项目组：<text class="detail-data">{{detailData.regionalProjectTeamName}}</text>
</view>
<view class="list-info">
工程监理单位 ：<text class="detail-data">{{detailData.projectSupervisionName}}</text>
</view>
<view class="list-info">
工程承包商：<text class="detail-data">{{detailData.projectContractorName}}</text>
</view>
<view class="list-info">
工程分包商：<text class="detail-data">{{detailData.projectSubcontractorName}}</text>
</view>
<view class="list-info">
单位工程内容：<text class="detail-data">{{detailData.unitProjectContent}}</text>
</view>
<view class="list-info">
涉及技术专业：<text class="detail-data">
{{ detailData.technicalExpertiseInvolved ? technicalOperationList[detailData.technicalExpertiseInvolved - 1].operationName : '--' }}</text>
</view>
<!-- <view class="list-info">
作业时间：<text class="detail-data"
v-if="detailData.jobStartTime && detailData.jobEndTime">{{detailData.jobStartTime+'-'+detailData.jobEndTime}}</text>
</view> -->
<view class="" v-if="isShow">
<!-- <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>
<th>材质</th>
<th>焊工号</th>
<th>上传图片</th>
<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>
{{weldingListUp(ele.weldingNumber)}}
</td>
<td>
{{ ele.specification ? ele.specification : '--' }}
</td>
<td>
{{ ele.texture ? ele.texture : '--' }}
</td>
<td>
{{ ele.weldingWork ? ele.weldingWork : '--' }}
</td>
<td>
<view class="download" v-for="item in ele.fileList" :key="ele.uid">
<image :src="url_config+'image/'+item.url" class="img"
@click="previewImage(url_config+'image/'+item.url)"></image>
</view>
</td>
<td>
{{ isAffirmListUp(ele.appearanceStandard) }}
</td>
<td>
{{ isAffirmListUp(ele.standard) }}
</td>
<td>
{{ ele.remark ? ele.remark : '--' }}
</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.constructionStartContent}}</text>
</view>
<view class="list-info">
附件：<text style="color: #1684FC;" class="detail-data" @click="downloadFn(item)"
v-for="item in detailData.testingReportAttachment"
:key="item.id">{{item.name}}</text>
</view>
<view class="list-info">
承包商项目经理：
<electronicSignature :userId="detailData.contractorProjectManager" />
<!-- <text class="detail-data">{{detailData.contractorProjectManagerName}}</text> -->
</view>
<view class="list-info">
承包商项目经理日期：<text class="detail-data">{{detailData.contractorProjectManagerDate}}</text>
</view>
<!-- <view class="list-info">
总监理工程师审查意见：<text
class="detail-data">{{detailData.generalSupervisorEngineerReview}}</text>
</view> -->
<view class="list-info">
总监理工程师：
<electronicSignature :userId="detailData.generalSupervisorEngineer" />
<!-- <text class="detail-data">{{detailData.generalSupervisorEngineerName}}</text> -->
</view>
<view class="list-info">
总监理工程师日期 ：<text class="detail-data">{{detailData.generalSupervisorEngineerDate}}</text>
</view>
<!-- <view class="list-info">
安全工程师审查意见：<text class="detail-data">{{detailData.safetyEngineerReview}}</text>
</view> -->
<view class="list-info">
安全工程师：
<electronicSignature :userId="detailData.safetyEngineer" />
<!-- <text class="detail-data">{{detailData.safetyEngineerName}}</text> -->
</view>
<view class="list-info">
安全工程师日期：<text class="detail-data">{{detailData.safetyEngineerDate}}</text>
</view>
<!-- <view class="list-info">
进度控制经理审查意见：<text class="detail-data">{{detailData.progressControlManagerReview}}</text>
</view> -->
<view class="list-info">
进度控制经理 ：
<electronicSignature :userId="detailData.progressControlManager" />
<!-- <text class="detail-data">{{detailData.progressControlManagerName}}</text> -->
</view>
<view class="list-info">
进度控制经理日期：<text class="detail-data">{{detailData.progressControlManagerDate}}</text>
</view>
<!-- <view class="list-info">
专业工程师审查意见：<text class="detail-data">{{detailData.specialEngineerReview}}</text>
</view> -->
<view class="list-info">
专业工程师 ：
<electronicSignature :userId="detailData.specialEngineer" />
<!-- <text class="detail-data">{{detailData.specialEngineerName}}</text> -->
</view>
<view class="list-info">
专业工程师日期：<text class="detail-data">{{detailData.specialEngineerDate}}</text>
</view>
<!-- <view class="list-info">
施工经理审查意见：<text class="detail-data">{{detailData.constructionManagerReview}}</text>
</view> -->
<view class="list-info">
施工经理：
<electronicSignature :userId="detailData.constructionManager" />
<!-- <text class="detail-data">{{detailData.constructionManagerName}}</text> -->
</view>
<view class="list-info">
施工经理日期：<text class="detail-data">{{detailData.constructionManagerDate}}</text>
</view>
<!-- <view class="list-info">
项目组经理审查意见：<text class="detail-data">{{detailData.projectTeamManagerReview}}</text>
</view> -->
<view class="list-info">
项目组经理：
<electronicSignature :userId="detailData.projectTeamManager" />
<!-- <text class="detail-data">{{detailData.projectTeamManagerName}}</text> -->
</view>
<view class="list-info">
项目组经理日期：<text class="detail-data">{{detailData.projectTeamManagerDate}}</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: "",
contractModelList: [{
contractModelId: 1,
contractModelName: 'EPC'
},
{
contractModelId: 2,
contractModelName: 'E+P+C'
}
], // 合同模式
technicalOperationList: [{
id: 1,
operationName: '土建'
},
{
id: 2,
operationName: '动设备'
},
{
id: 3,
operationName: '静设备'
},
{
id: 4,
operationName: '管道'
},
{
id: 5,
operationName: '电气'
},
{
id: 6,
operationName: '仪表'
},
{
id: 7,
operationName: '其它'
}
], // 技术操作
workCategoryList: [{
id: 1,
workCategoryName: "一级"
}, {
id: 2,
workCategoryName: "二级"
}, {
id: 3,
workCategoryName: "三级"
}],
workerListOptions: [],
workTypeList: [{
id: 1,
workTypeName: "受限空间作业"
}, {
id: 2,
workTypeName: "类受限空间作业"
}],
detectionMethodList: [{
id: 1,
detectionMethodName: "RT(射线检测)"
}, {
id: 2,
detectionMethodName: "PT(渗透检测)"
}, {
id: 3,
detectionMethodName: "MT(磁粉检测)"
}, {
id: 4,
detectionMethodName: "UT(超声检测)"
}, {
id: 5,
detectionMethodName: "TOFD(衍射时差法超声检测)"
}, {
id: 6,
detectionMethodName: "GP(光谱检测)"
}, {
id: 7,
detectionMethodName: "YD(硬度检测)"
}, {
id: 8,
detectionMethodName: "CH(超声测厚)"
}, {
id: 9,
detectionMethodName: "TCH(涂层测厚)"
}, {
id: 10,
detectionMethodName: "DHH(电火花检测)"
}, {
id: 11,
detectionMethodName: "WL(涡流检测)"
}, {
id: 12,
detectionMethodName: "TST(铁素体检测)"
}],
weldingListAll: [],
}
},
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();
this.getWeldingListAll();
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/unitEngineerOpen/queryById',
method: 'get',
data: {
id: this.detailId
},
success: res => {
uni.hideLoading()
// if(res.code==200){
// this.listData = res.result.records
// }
this.detailData = {
...res.result,
testingReportAttachment: isJSON(res.result.fileUrl) ? JSON
.parse(res.result.fileUrl) : [],
technicalExpertiseInvolved:
isJSON(res.result.technicalExpertiseInvolved) && Array.isArray(JSON.parse(res.result.technicalExpertiseInvolved))
? Number(JSON.parse(res.result.technicalExpertiseInvolved).join(','))
: Number(res.result.technicalExpertiseInvolved)
// hotWorkExecutionTime: [
// res.result.jobStartTime ? res.result.jobStartTime : '',
// res.result.jobEndTime ? res.result.jobEndTime : '',
// ],
// tableList: JSON.parse(res.result.craterList).reduce((prev, item) => {
// prev.push({
// id: "id-" + Math.random().toString(36).substr(2, 9),
// weldingNumber: item["field5496713710010"],
// specification: item["field4898340503658"],
// texture: item["field8195640514474"],
// weldingWork: item["field8807940520346"],
// appearanceStandard: item[
// 'field9997884093086'] instanceof Array ? item[
// 'field9997884093086'][0] : item[
// 'field9997884093086'],
// standard: item['field8817951200764'] instanceof Array ?
// item['field8817951200764'][0] : item[
// 'field881795120076'],
// remark: item["field7676440525389"],
// fileList: item["field2911840545724"] instanceof Array ?
// item["field2911840545724"] : [],
// });
// return prev
// }, []),
}
// this.getApply()
}
})
},
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: '下载失败'
})
}
}
});
},
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
});
}
}
},
getWeldingListAll() {
let data = {
projectSn: JSON.parse(uni.getStorageSync('projectDetail')).projectSn,
pageNo: 1,
pageSize: -1
}
this.sendRequest({
url: 'xmgl/pipelineWeldingRecord/page',
method: 'get',
data,
success: res => {
if (res.code == 200) {
this.weldingListAll = res.result.records
}
}
})
},
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)
}
}
})
},
},
computed: {
isAffirmListUp() {
return row => {
const obj = {
1: '是',
0: '否'
};
return Array.isArray(row) ? row.map(item => (obj[item] ? obj[item] : '--')).join(',') : obj[
row] ? obj[row] : '--';
};
},
weldingListUp() {
return row => {
return this.weldingListAll
.filter(item => row.includes(item.id))
.map(item => item.weldingNumber)
.join(',');
};
},
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;
flx:修复page-mate app会带来页面不适配问题 修复app会被状态栏遮挡问题
2025-04-11 14:24:29 +08:00
background-color: white;
flx:vue2版本升级vu3 合并工作流
2025-01-21 18:08:48 +08:00
}
.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>
Reference in New Issue Copy Permalink