643 lines
25 KiB
Vue
643 lines
25 KiB
Vue
<!-- 应急事件 -->
|
||
<template>
|
||
<view class="main">
|
||
<view class="emergencyList">
|
||
<view class="eventCard" v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)">
|
||
<!-- 事件头部信息 -->
|
||
<view class="cardHeader">
|
||
<view class="eventTitle">{{ type === 1 ? item.title || "" : type === 2 ? item.type || "" : "" }}
|
||
</view>
|
||
<view class="eventStatus" v-if="item.state" :class="{
|
||
'status-completed': item.state === '完成',
|
||
'status-processing': item.state === '处理中'
|
||
}">
|
||
{{ item.state }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 事件描述 -->
|
||
<view class="eventDesc" v-if="item.sceneOverview">{{ item.sceneOverview }}</view>
|
||
|
||
<!-- 详细信息区域 -->
|
||
<view class="eventDetails">
|
||
<view class="detailItem">
|
||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||
<view class="detailValue">{{ item.userName || item.createUserName || '-' }}</view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||
<view class="detailValue">{{ item.phone || '-' }}</view>
|
||
</view>
|
||
<view class="detailItem">
|
||
<image class="detailIcon" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||
<view class="detailValue">{{ item.createTime || '-' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noDataBox" v-if="!isLoading && !(showList && showList.length > 0)">
|
||
<noData :type="1" :text="'暂无数据'" />
|
||
</view>
|
||
|
||
<!-- <view :class="item.status === 1 ? 'event-item left-ok' : item.status === 2 ? 'event-item' : ''"
|
||
v-for="(item, index) in showList" :key="index" @click="handleShowDetail(item)">
|
||
<view class="event-header">
|
||
<view class="event-title">{{ type === 1 ? item.title || "" : type === 2 ? item.service || "" : "" }}
|
||
</view>
|
||
<view class="event-meta">
|
||
<view class="event-time">
|
||
<text>🕐</text><text>{{ item.time || "" }}</text>
|
||
</view>
|
||
<view class="event-priority priority-high" :style="{
|
||
background: item.status === 1 ? '#E7F8EE' : item.status === 2 ? '#f9dfe2' : '',
|
||
color: item.status === 1 ? '#3DC272' : item.status === 2 ? '#ff4757' : ''
|
||
}">
|
||
{{ item.status === 1 ? '已完成' : item.status ===
|
||
2 ? '处理中' : '' }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="event-content">
|
||
<view class="event-description">
|
||
<text class="line">{{ item.desc || "" }}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 应急事件详情 -->
|
||
<uni-popup ref="popup" border-radius="10px 10px 0 0" @change="handlePopupChange">
|
||
<!-- 应急事件的 -->
|
||
<view class="eventsPopupBox" v-if="eventsDetail && type === 1">
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||
<view class="eventsHaveLabel">联系人：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ eventsDetail.person || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||
<view class="eventsHaveLabel">联系电话：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ eventsDetail.phone || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/timeIcon.png" />
|
||
<view class="eventsHaveLabel">处理用时：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ eventsDetail.haveTime || "" }}</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">标题：</view>
|
||
<view class="eventsValue">{{ eventsDetail.title || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件片区：</view>
|
||
<view class="eventsValue">{{ eventsDetail.area || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件服务区：</view>
|
||
<view class="eventsValue">{{ eventsDetail.service || "" }}</view>
|
||
</view>
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">死亡人数：</view>
|
||
<view class="eventsValue">{{ eventsDetail.diePerson || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件概况：</view>
|
||
<view class="eventsValue">{{ eventsDetail.desc || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件损失情况：</view>
|
||
<view class="eventsValue">{{ eventsDetail.lossDesc || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">处理结果：</view>
|
||
<view class="eventsValue">{{ eventsDetail.res || "" }}</view>
|
||
</view>
|
||
<view class="eventsItemPic">
|
||
<view class="eventsLabel">事件现场照片：</view>
|
||
<view class="eventsPic" v-if="eventsDetail.imgList && eventsDetail.imgList.length > 0">
|
||
<view class="eventsPicItem" v-for="(item, index) in eventsDetail.imgList" :key="index"
|
||
@click="showImg(eventsDetail.imgList, index)">
|
||
<image class="eventsPicImg" :src="item.url" />
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 日常问题 -->
|
||
<view class="eventsPopupBox" v-if="eventsDetail && type === 2">
|
||
<!-- <view class="eventsItem">
|
||
<view class="eventsLabel">处理状态：</view>
|
||
<view class="eventsValue"></view>
|
||
</view> -->
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/personIcon.png" />
|
||
<view class="eventsHaveLabel">联系人：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ eventsDetail.createUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsHaveImgLabel">
|
||
<image class="eventsHaveImg" src="https://eshangtech.com/cyy_DIB/phoneLabelIcon.png" />
|
||
<view class="eventsHaveLabel">联系电话：</view>
|
||
</view>
|
||
<view class="eventsValue">{{ eventsDetail.phone || "" }}</view>
|
||
</view>
|
||
|
||
<view class="line"></view>
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件片区：</view>
|
||
<view class="eventsValue">{{ eventsDetail.belongArea || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">事件服务区：</view>
|
||
<view class="eventsValue">{{ eventsDetail.saName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">类型：</view>
|
||
<view class="eventsValue">{{ eventsDetail.type || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">问题描述：</view>
|
||
<view class="eventsValue">{{ eventsDetail.describe || "" }}</view>
|
||
</view>
|
||
|
||
|
||
<view class="eventsSmallTitle">协调处理情况</view>
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">协调处理结果：</view>
|
||
<view class="eventsValue">{{ eventsDetail.coorResult || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理人：</view>
|
||
<view class="eventsValue">{{ eventsDetail.coorUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理完成时间：</view>
|
||
<view class="eventsValue">{{ eventsDetail.coorEndTime || "" }}</view>
|
||
</view>
|
||
|
||
<view class="eventsSmallTitle">经营公司协调处理情况</view>
|
||
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">协调处理结果：</view>
|
||
<view class="eventsPic">{{ eventsDetail.companyResult || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理人：</view>
|
||
<view class="eventsValue">{{ eventsDetail.companyUserName || "" }}</view>
|
||
</view>
|
||
<view class="eventsItem">
|
||
<view class="eventsLabel">办理完成时间：</view>
|
||
<view class="eventsValue">{{ eventsDetail.companyEndTime || "" }}</view>
|
||
</view>
|
||
<view class="eventsItemPic">
|
||
<view class="eventsLabel">事件现场照片：</view>
|
||
<view class="eventsPic" v-if="eventsDetail.companyFileUp && eventsDetail.companyFileUp.length > 0">
|
||
<view class="eventsPicItem" v-for="(item, index) in eventsDetail.companyFileUp" :key="index"
|
||
@click="showImg(eventsDetail.companyFileUp, index)">
|
||
<image class="eventsPicImg" :src="item.url" />
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { formatTime } from '@/util/dateTime/index.js'
|
||
import noData from '../../components/noData.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
dataList: [
|
||
// {
|
||
// title: "中和停车区下行停水",
|
||
// time: "2023-09-26 13:30:38",
|
||
// area: "昭通片区管理补",// 片区
|
||
// service: "中和加油站-上行",// 事件服务区
|
||
// eventType: "事件类型1",// 事件类型
|
||
// person: "徐琴",// 联系人
|
||
// phone: "13408871099",//联系电话
|
||
// theInjured: "",// 受伤人数
|
||
// haveTime: "待定",// 处理用时
|
||
// diePerson: "0",//死亡人数
|
||
// desc: "水泵房故障，导致停水，急需处理",//事件现场概况
|
||
// lossDesc: "因突发情况 卫生间卫生无法保障",// 事件损失情况
|
||
// res: "已联系施工方，未处理",//处理结果
|
||
// imgList: [{ url: "https://eshangtech.com/cyy_DIB/1695785143848.jpg" }],// 事件现场照片
|
||
// status: 1,
|
||
// },
|
||
// {
|
||
// title: "楼坝服务区停水",
|
||
// time: "2023-08-02 13:57:27",
|
||
// area: "昭通片区管理补",// 片区
|
||
// service: "楼坝服务区-下行",// 事件服务区
|
||
// eventType: "事件类型1",// 事件类型
|
||
// person: "孔令婷",// 联系人
|
||
// phone: "19987196597",//联系电话
|
||
// theInjured: "",// 受伤人数
|
||
// haveTime: "7小时",// 处理用时
|
||
// diePerson: "0",//死亡人数
|
||
// desc: "楼坝街道主水管道被路面改造施工的挖机挖断，目前正在抢修中，预计7小时后可正常供水，服务区现用水箱里的储水进行供水。",//事件现场概况
|
||
// lossDesc: "无",// 事件损失情况
|
||
// res: "正在进行抢修，预计7小时后可正常供水，服务区现用水箱里的储水进行供水。",//处理结果
|
||
// imgList: null,// 事件现场照片
|
||
// status: 2,
|
||
// } // status 1 已完成 2 处理中
|
||
],
|
||
everyDayList: [
|
||
// {
|
||
// area: "版纳片区管理部", // 事件片区：
|
||
// service: "小勐养服务区-上行", // 事件服务区：
|
||
// time: "2024-09-12 09:14:47",
|
||
// type: "其他", // 类型：
|
||
// desc: "小勐养服务区上行卫生间5号蹲坑隔板底座损坏，已修复。",// 问题描述：
|
||
// person: "杨杰",// 联系人：
|
||
// phone: "13628710377",// 联系电话：
|
||
// startRes: "修复完毕，建议结束流程",// 协调处理结果：
|
||
// startPerson: "刀天华",// 办理人：
|
||
// startTime: "2024-09-12 09:43:53",// 办理完成时间：
|
||
// endRes: "",// 协调处理结果：
|
||
// endPerson: "",// 办理人：
|
||
// endTime: "流转后自动显示",// 办理完成时间：
|
||
// imgList: [
|
||
// { url: "https://eshangtech.com/cyy_DIB/1726104387683_mmexport1726104287279.jpg" },
|
||
// { url: "https://eshangtech.com/cyy_DIB/1726104504808_IMG_20240912_091809.jpg" }
|
||
// ],// 事件现场照片
|
||
// status: 1,
|
||
// },
|
||
// {
|
||
// area: "昆东片区管理部", // 事件片区：
|
||
// service: "阳宗服务区-上行", // 事件服务区：
|
||
// time: "2024-08-08 13:45:25",
|
||
// type: "维修上报", // 类型：
|
||
// desc: "关于昆东片区管理部阳宗服务区上行更换入口车辆引导标识牌的请示",// 问题描述：
|
||
// person: "唐林波",// 联系人：
|
||
// phone: "15287959258",// 联系电话：
|
||
// startRes: "按照公司相关流程进行更换标识牌审批事宜",// 协调处理结果：
|
||
// startPerson: "申锐娟",// 办理人：
|
||
// startTime: "流转后自动显示",// 办理完成时间：
|
||
// endRes: "",// 协调处理结果：
|
||
// endPerson: "",// 办理人：
|
||
// endTime: "流转后自动显示",// 办理完成时间：
|
||
// imgList: null,// 事件现场照片
|
||
// status: 2,
|
||
// }
|
||
],
|
||
showList: [],
|
||
eventsDetail: null,
|
||
type: 0,
|
||
serviceInfo: {},
|
||
isLoading: false
|
||
}
|
||
},
|
||
components: {
|
||
noData
|
||
},
|
||
onLoad(query) {
|
||
if (query.type) {
|
||
this.type = Number(query.type)
|
||
if (this.type === 1) {
|
||
this.showList = this.dataList
|
||
} else {
|
||
this.showList = this.everyDayList
|
||
uni.setNavigationBarTitle({
|
||
title: '日常问题'
|
||
})
|
||
}
|
||
}
|
||
let currentService = uni.getStorageSync('currentService')
|
||
this.serviceInfo = currentService
|
||
|
||
this.handleGetData()
|
||
},
|
||
methods: {
|
||
// 拿到数据
|
||
async handleGetData() {
|
||
let data = []
|
||
uni.showLoading({
|
||
title: "加载中..."
|
||
})
|
||
this.isLoading = true
|
||
if (this.type === 1) {
|
||
this.showList = []
|
||
const req = {
|
||
bsessionKey: "EA65F66FA29B47FD8072A4AFC66967B3",
|
||
saName: this.serviceInfo.SAName
|
||
}
|
||
const data = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: "https://fwqznxj.yciccloud.com:9081/ynjt/pushManage/queryEmergency",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
"content-type": "application/x-www-form-urlencoded",
|
||
},
|
||
success(res) {
|
||
resolve(res.data.data)
|
||
},
|
||
});
|
||
});
|
||
|
||
let list = data
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
item.imgUp = item.imgUp ? JSON.parse(item.imgUp) : ""
|
||
item.createTime = formatTime(item.createTime)
|
||
})
|
||
}
|
||
this.showList = list
|
||
|
||
} else {
|
||
this.showList = []
|
||
const req = {
|
||
bsessionKey: "0DAF3A5982D54A619D4B63A34CA20C55",
|
||
saName: this.serviceInfo.SAName
|
||
}
|
||
const data = await new Promise((resolve, reject) => {
|
||
uni.request({
|
||
url: "https://fwqznxj.yciccloud.com:9081/ynjt/pushManage/queryQuestions",
|
||
method: "POST",
|
||
data: req,
|
||
header: {
|
||
"content-type": "application/x-www-form-urlencoded",
|
||
},
|
||
success(res) {
|
||
resolve(res.data.data)
|
||
},
|
||
});
|
||
});
|
||
let list = data
|
||
if (list && list.length > 0) {
|
||
list.forEach((item) => {
|
||
item.fileUp = item.fileUp ? JSON.parse(item.fileUp) : ""
|
||
item.createTime = item.createTime ? formatTime(item.createTime) : ""
|
||
item.coorEndTime = item.coorEndTime ? formatTime(item.coorEndTime) : ""
|
||
})
|
||
}
|
||
this.showList = data
|
||
}
|
||
console.log('this.showListthis.showListthis.showListthis.showList', this.showList);
|
||
uni.hideLoading()
|
||
this.isLoading = false
|
||
},
|
||
handleShowDetail(obj) {
|
||
// this.$refs.popup.open('center')
|
||
// this.eventsDetail = obj
|
||
this.$util.toNextRoute("navigateTo", `/pages/attendanceStatus/emergencyEventsDetail?detail=${JSON.stringify(obj)}&type=${this.type}`);
|
||
|
||
},
|
||
handlePopupChange(e) {
|
||
this.showPopup = e.show
|
||
console.log('e', e);
|
||
if (!e.show) {
|
||
this.userDetail = null
|
||
}
|
||
},
|
||
// 图片预览
|
||
showImg(list, index) {
|
||
console.log('list', list);
|
||
console.log('indexindex', index);
|
||
let urls = []
|
||
list.forEach((item) => {
|
||
urls.push(item.url)
|
||
})
|
||
|
||
uni.previewImage({
|
||
urls: urls,
|
||
current: list[index].url,
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
// 使用项目全局颜色变量
|
||
$bg: #f8f9fa;
|
||
$muted: #666;
|
||
$card: #fff;
|
||
$shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
$primary: #27B25F;
|
||
$primary2: #4CCC7F;
|
||
$success: #2ed573;
|
||
$warning: #ff9f43;
|
||
$danger: #ff4757;
|
||
$info: #3742fa;
|
||
|
||
/* 重新设计的应急事件页面 */
|
||
.main {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: $bg;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.emergencyList {
|
||
width: 100%;
|
||
|
||
.noDataBox {
|
||
width: 100%;
|
||
height: 60vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.eventCard {
|
||
background: $card;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 32rpx;
|
||
overflow: hidden;
|
||
box-shadow: $shadow;
|
||
|
||
.cardHeader {
|
||
padding: 32rpx 32rpx 16rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
|
||
.eventTitle {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #160002;
|
||
line-height: 1.4;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.eventStatus {
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
padding: 6rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
flex-shrink: 0;
|
||
|
||
&.status-completed {
|
||
background: #E7F8EE;
|
||
color: $success;
|
||
}
|
||
|
||
&.status-processing {
|
||
background: #FFF3E0;
|
||
color: $warning;
|
||
}
|
||
}
|
||
}
|
||
|
||
.eventDesc {
|
||
padding: 0 32rpx 16rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: $muted;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eventDetails {
|
||
padding: 16rpx 32rpx 32rpx;
|
||
background: #FAFAFA;
|
||
|
||
.detailItem {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detailIcon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.detailValue {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #160002;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 弹窗样式保持不变，只是不再使用
|
||
.eventsPopupBox {
|
||
width: 90vw;
|
||
height: 80vh;
|
||
background-color: $card;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
overflow-y: auto;
|
||
|
||
.eventsItemTitle {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eventsItem {
|
||
width: 100%;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.eventsHaveImgLabel {
|
||
display: flex;
|
||
width: 200rpx;
|
||
align-items: center;
|
||
|
||
.eventsHaveImg {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 16rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.eventsHaveLabel {
|
||
width: 154rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.eventsValue {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 1rpx;
|
||
background-color: #f0f0f0;
|
||
margin: 16rpx 0;
|
||
}
|
||
|
||
.eventsSmallTitle {
|
||
margin: 16rpx 0;
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.eventsItemPic {
|
||
width: 100%;
|
||
|
||
.eventsLabel {
|
||
width: 200rpx;
|
||
text-align: left;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.eventsPic {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 24rpx;
|
||
|
||
.eventsPicItem {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
margin-right: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.eventsPicImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style> |