chen
/
flying-monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
flying-monkey/pages/dataQuery/projectDetails.vue

709 lines
21 KiB
Vue
Raw Normal View History

新增页面
2022-03-22 10:10:39 +00:00
<template>
<view class="content">
修改
2022-03-25 10:33:33 +00:00
<statusNav navBarTitle="项目详情"></statusNav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -30rpx;">
<view class="head-top">
<view class="details-head">
<view class="swiper-head">
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval">
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="indication-point ">
{{index}}/3
</view>
</view>
<view class="title">
湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view>
<view class="code">
XM20220108-1001
</view>
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
</view>
<view class="last-date">
<view class="last-date-content">
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
<view class="text">
最近一次故障时间：2021-11-18 17：00：16
</view>
</view>
</view>
</view>
<view class="project-message-title">
<view class="icon">
</view>
<view class="text">
项目概况
</view>
</view>
<view class="project-message-content">
<view class="li">
<view class="title-one">
客户名称
</view>
<view class="text">
：上海弘焱电子科技有限公司
</view>
</view>
<view class="li">
<view class="title-one">
竣工日期
</view>
<view class="text">
：2022/2/26
</view>
</view>
<view class="li">
<view class="title-one">
质保年限
</view>
<view class="text">
：1 年
</view>
</view>
<view class="li">
<view class="title-one">
产品品类：
</view>
<view class="text">
单色LED屏
</view>
</view>
<view class="li">
<view class="title-one">
品牌
</view>
<view class="text">
：海康威视
</view>
</view>
<view class="li">
<view class="title-one">
维保次数
</view>
<view class="text">
：4 次
</view>
</view>
<view class="li">
<view class="title">
规格型号
</view>
<view class="text">
：DS-CK15FI
</view>
</view>
<view class="li">
<view class="title">
尺寸
</view>
<view class="text">
：4.57m*2.88m
</view>
</view>
<view class="li">
<view class="title">
合同类型：
</view>
<view class="text">
制作安装
</view>
</view>
<view class="li">
<view class="title">
合同开始
</view>
<view class="text">
： 2021/02/26
</view>
</view>
<view class="li">
<view class="title">
合同结束
</view>
<view class="text">
：2021/02/2
</view>
</view>
<view class="li">
<view class="title">
应用场景 </view>
<view class="text">
：会议室
</view>
</view>
<view class="li">
<view class="title">
安装位置
</view>
<view class="text">
：地下负二层总控电机室
</view>
</view>
新增页面
2022-03-22 10:10:39 +00:00
</view>
修改
2022-03-25 10:33:33 +00:00
<view class="project-message-title">
<view class="icon">
</view>
<view class="text">
项目材料
</view>
新增页面
2022-03-22 10:10:39 +00:00
</view>
修改
2022-03-25 10:33:33 +00:00
<view class="project-materials-content">
<view class="project-materials-title">
<view class="text">
名称
</view>
<view class="text">
品牌
</view>
<view class="text">
型号
</view>
<view class="text">
批次
</view>
<view class="text">
尺寸
</view>
<view class="text">
数量
</view>
</view>
<view class="project-materials-text">
<view class="text">
接收卡
</view>
<view class="text">
卡莱特
</view>
<view class="text">
5A-75E
</view>
<view class="text">
1033876
</view>
<view class="text">
*
</view>
<view class="text">
1台
</view>
</view>
新增页面
2022-03-22 10:10:39 +00:00
</view>
修改
2022-03-25 10:33:33 +00:00
<view class="record-nav">
<view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState">
{{item.title}}
</view>
新增页面
2022-03-22 10:10:39 +00:00
</view>
修改
2022-03-25 10:33:33 +00:00
<view class="record-content">
<view class="title">
维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
新增页面
2022-03-22 10:10:39 +00:00
</view>
修改
2022-03-25 10:33:33 +00:00
</view>
</container-subgroup-two>
新增页面
2022-03-22 10:10:39 +00:00
</view>
</template>
<script>
修改
2022-03-25 10:33:33 +00:00
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from "../../components/status-nav.vue"
export default {
components: {
statusNav,
containerSubgroupTwo
},
新增页面
2022-03-22 10:10:39 +00:00
data() {
return {
autoplay: true,
interval: 3000,
index: 1,
recordState: [{
title: '维修记录',
state: true
},
{
title: '保养记录',
state: false
},
{
title: '巡检记录',
state: false
},
]
}
},
methods: {
changeAutoplay(data) {
console.log()
this.index = data.detail.current - 0 + 1
},
recordNav(index) {
for (var i = 0; i < this.recordState.length; i++) {
this.recordState[i].state = false
}
this.recordState[index].state = true
}
}
}
</script>
<style>
page {
background-color: #F7F7F7;
}
.content {
padding: 16rpx 0;
修改
2022-03-25 10:33:33 +00:00
新增页面
2022-03-22 10:10:39 +00:00
}
.swiper {
width: 100%;
height: 500rpx;
}
.swiper .img {
height: 500rpx;
width: 100%;
}
.details-head {
width: 725rpx;
margin: auto;
padding: 24rpx 12rpx;
box-sizing: border-box;
height: 682rpx;
background-color: #FFFFFF;
border-radius: 20rpx;
}
.swiper-head {
position: relative;
}
.indication-point {
width: 102rpx;
height: 46rpx;
border-radius: 26rpx 0 0 0;
right: 0px;
bottom: 0rpx;
text-align: center;
color: #fff;
position: absolute;
background-color: #e64545;
}
.details-head .title {
font-size: 28rpx;
padding: 13rpx 0rpx;
}
.details-head .code {
font-size: 24rpx;
padding: 0rpx 0rpx 13rpx 0rpx;
color: #ff8800;
}
.address {
display: flex;
align-items: center;
}
.address .img {
width: 18rpx;
margin-right: 14rpx;
height: 24rpx;
}
.address .text {
font-size: 24rpx;
color: #666666;
}
.last-date {
width: 100%;
padding: 10rpx 13rpx 10rpx;
box-shadow: 0rpx 5rpx 3rpx rgba(0, 0, 0, 0.1);
}
.last-date-content {
width: 100%;
height: 57rpx;
display: flex;
padding-left: 20rpx;
align-items: center;
border-radius: 10rpx;
background: linear-gradient(to right, #FFEBEB, #F7F7F7);
}
.last-date-content .icon {
width: 30rpx;
height: 30rpx;
margin-right: 20rpx;
}
.last-date-content .text {
font-size: 22rpx;
color: #333333;
}
.project-message-title {
display: flex;
padding: 0 33rpx;
align-items: center;
修改
2022-03-25 10:33:33 +00:00
border-top: 2rpx solid #ebebeb;
新增页面
2022-03-22 10:10:39 +00:00
border-bottom: 2rpx solid #ebebeb;
修改
2022-03-25 10:33:33 +00:00
padding-top: 23rpx;
background-color: #FFFFFF;
新增页面
2022-03-22 10:10:39 +00:00
padding-bottom: 21rpx;
}
.project-message-title .icon {
width: 8rpx;
height: 27rpx;
margin-right: 15rpx;
border-radius: 50rpx;
background: linear-gradient(#00A2e9, #bbe6f9);
}
.project-message-title .text {
xiugai
2022-03-24 09:04:24 +00:00
font-size: 26rpx
新增页面
2022-03-22 10:10:39 +00:00
}
.project-message-content {
display: flex;
padding: 30rpx 25rpx 0rpx;
flex-wrap: wrap;
margin-bottom: 8rpx;
xiugai
2022-03-24 09:04:24 +00:00
background-color: #FFFFFF;
新增页面
2022-03-22 10:10:39 +00:00
justify-content: space-between;
}
.project-message-content .title-one {
color: #4d4c4c;
font-size: 24rpx;
font-weight: bold;
display: flex;
justify-content: space-between;
}
.project-message-content .li {
display: flex;
margin-bottom: 31rpx;
修改
2022-03-25 10:33:33 +00:00
xiugai
2022-03-24 09:04:24 +00:00
margin-right: 20rpx;
新增页面
2022-03-22 10:10:39 +00:00
}
.project-message-content .title {
color: #4d4c4c;
font-weight: bold;
font-size: 24rpx
}
.project-message-content .text {
color: #4d4c4c;
font-size: 24rpx
}
.record-nav {
xiugai
2022-03-24 09:04:24 +00:00
padding: 33rpx 50rpx 33rpx;
新增页面
2022-03-22 10:10:39 +00:00
display: flex;
修改
2022-03-25 10:33:33 +00:00
margin-top: 10rpx;
background-color: #FFFFFF;
新增页面
2022-03-22 10:10:39 +00:00
justify-content: space-between;
border-bottom: 2rpx solid #D5D4D4;
}
.record-nav .li {
font-size: 24rpx;
width: 128rpx;
text-align: center;
font-weight: bold;
position: relative;
}
.record-nav .on {
color: #00b1ff;
}
.record-nav .on::after {
content: "";
width: 100%;
height: 2rpx;
position: absolute;
background-color: #00B1FF;
top: 65rpx;
left: 0rpx;
}
.record-content {
修改
2022-03-25 10:33:33 +00:00
新增页面
2022-03-22 10:10:39 +00:00
padding: 0 52rpx;
xiugai
2022-03-24 09:04:24 +00:00
padding-top: 33rpx;
overflow: hidden;
background-color: #FFFFFF;
padding-bottom: 43rpx;
新增页面
2022-03-22 10:10:39 +00:00
}
.record-content .title {
color: #333333;
margin-left: 12rpx;
font-size: 24rpx;
margin-bottom: 33rpx;
}
.record-content .list .li {
display: flex;
align-items: center;
margin-bottom: 40rpx;
}
.record-content .list .li .icon {
width: 14rpx;
height: 14rpx;
margin-right: 50rpx;
border-radius: 50%;
background-color: #999999;
margin-left: 5rpx;
position: relative;
}
.record-content .list .li .icon::after {
content: "";
xiugai
2022-03-24 09:04:24 +00:00
width: 2rpx;
新增页面
2022-03-22 10:10:39 +00:00
position: absolute;
left: 7rpx;
height: 102rpx;
background-color: #999999;
top: 14rpx;
}
修改
2022-03-25 10:33:33 +00:00
.record-content .list .li .icon:last-child::after {
content: "";
width: 2rpx;
position: absolute;
left: 7rpx;
height: 102rpx;
background-color: #999999;
top: 14rpx;
;
}
新增页面
2022-03-22 10:10:39 +00:00
.record-content .list .li .con {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999999;
}
.record-content .list .on .icon {
background-color: #5caefb;
width: 21rpx;
height: 21rpx;
margin-left: 1rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
修改
2022-03-25 10:33:33 +00:00
.record-content .list .on .icon .icon-con {
background-color: #0084ff;
width: 13rpx;
height: 13rpx;
border-radius: 50%;
}
.record-content .list .on .icon::after {
content: "";
width: 2rpx;
position: absolute;
left: 9rpx;
height: 170rpx;
z-index: -1;
background-color: #0084ff;
top: 20rpx;
}
.record-content .list .on .con {
display: block;
color: #0084ff;
}
.record-content .list .on .con .text {
margin-bottom: 35rpx;
}
.record-content .list .on .con .date {
margin-bottom: 35rpx;
}
.record-content .list .on {
align-items: flex-start;
}
.project-materials-title {
display: flex;
color: #00a2e9;
font-size: 24rpx;
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED;
font-weight: bold;
padding: 26rpx 20rpx;
justify-content: space-between;
}
.project-materials-title .text {
width: 16%;
text-align: center;
}
.project-materials-text {
display: flex;
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED;
padding: 26rpx 20rpx;
font-size: 24rpx;
justify-content: space-between;
}
.project-materials-text .text {
width: 16%;
text-align: center;
}
新增页面
2022-03-22 10:10:39 +00:00
</style>