代码合并
This commit is contained in:
BianLzhaoMin
parent
f0ce911bb8
commit
4d1f452043
|
|
@ -1,180 +1,438 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 地图弹框 展示设备轨迹 -->
|
<!-- 地图弹框 展示设备轨迹 -->
|
||||||
<el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
|
<el-dialog
|
||||||
<!-- 表单 根据日期查询设备轨迹 -->
|
title="装备定位信息"
|
||||||
<el-card shadow="hover">
|
:visible.sync="dialogVisible"
|
||||||
<el-form :model="queryForm" inline>
|
width="90%"
|
||||||
<el-form-item label="查询日期">
|
@close="handelCloseDialog()"
|
||||||
<el-date-picker
|
>
|
||||||
v-model="queryForm.date"
|
<el-card shadow="hover">
|
||||||
type="daterange"
|
<div class="device-title">
|
||||||
range-separator="至"
|
<h2>{{ deviceName }}</h2>
|
||||||
start-placeholder="请选择开始日期"
|
<span>({{ deviceType }})</span>
|
||||||
end-placeholder="请选择结束日期"
|
</div>
|
||||||
style="width: 330px"
|
|
||||||
value-format="yyyy-MM-dd"
|
|
||||||
format="yyyy-MM-dd"
|
|
||||||
></el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<div>
|
|
||||||
<h2>{{ equipment }}</h2>
|
|
||||||
<div class="equipment">定位设备编号: {{ equipmentNumber }}</div>
|
|
||||||
<div class="equipment">{{ engineering }}工程</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 地图 -->
|
<div class="equipment">
|
||||||
<div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
|
定位设备编号: {{ equipmentNumber }}
|
||||||
</el-card>
|
</div>
|
||||||
</el-dialog>
|
<div class="equipment" v-if="false">{{ engineering }}工程</div>
|
||||||
</div>
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="queryForm.date"
|
||||||
|
type="daterange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="请选择开始日期"
|
||||||
|
end-placeholder="请选择结束日期"
|
||||||
|
style="width: 330px"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
format="yyyy-MM-dd"
|
||||||
|
/>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
style="padding: 8px 16px; margin-left: 5px"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<el-row :gutter="24" class="map-container">
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-tabs type="border-card" class="map-left">
|
||||||
|
<el-tab-pane label="行程">
|
||||||
|
<div
|
||||||
|
class="trip-container"
|
||||||
|
@click="handlePreviewTrip()"
|
||||||
|
>
|
||||||
|
<div class="left-num">1</div>
|
||||||
|
<div class="right-info">
|
||||||
|
<ul>
|
||||||
|
<li>0KM</li>
|
||||||
|
<li>22秒</li>
|
||||||
|
<li>5KM/h</li>
|
||||||
|
<li>0KM/h</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>里程</li>
|
||||||
|
<li>行驶时长</li>
|
||||||
|
<li>最大速度</li>
|
||||||
|
<li>平均速度</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<div class="time-container">
|
||||||
|
<span class="radius-span">始</span>
|
||||||
|
<span>2024-07-18 01:18:53</span>
|
||||||
|
</div>
|
||||||
|
<h3>安徽省------</h3>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<div class="time-container">
|
||||||
|
<span
|
||||||
|
class="radius-span"
|
||||||
|
style="
|
||||||
|
background-color: #e6a23c;
|
||||||
|
"
|
||||||
|
>终</span
|
||||||
|
>
|
||||||
|
<span>2024-07-18 01:18:53</span>
|
||||||
|
</div>
|
||||||
|
<h3>安徽省------</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="停留点">
|
||||||
|
<div class="point-container">
|
||||||
|
<div class="time-container">
|
||||||
|
<span class="radius-span">1</span>
|
||||||
|
<span>2024-07-18 01:18:53</span>
|
||||||
|
<span>1时19分</span>
|
||||||
|
</div>
|
||||||
|
<h3>安徽省------</h3>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="报警">
|
||||||
|
<div class="point-container">
|
||||||
|
<div class="time-container">
|
||||||
|
<span class="radius-span">1</span>
|
||||||
|
<span>2024-07-18 01:18:53</span>
|
||||||
|
</div>
|
||||||
|
<h3>手动触发紧急报警---------</h3>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="18">
|
||||||
|
<!-- 地图 -->
|
||||||
|
<div
|
||||||
|
id="container"
|
||||||
|
style="height: 550px; background-color: #bfc"
|
||||||
|
></div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'MapDialog',
|
name: 'MapDialog',
|
||||||
data() {
|
props: {
|
||||||
return {
|
// 设备名称
|
||||||
openMap: false, // 是否打开地图弹框
|
deviceName: {
|
||||||
queryForm: {
|
type: String,
|
||||||
date: '',
|
default: () => '',
|
||||||
},
|
|
||||||
equipment: '', // 设备名称
|
|
||||||
equipmentNumber: 'H906L', // 设备编号
|
|
||||||
engineering: '大禹治水', // 工程
|
|
||||||
map: null,
|
|
||||||
// 轨迹点
|
|
||||||
linePointList: [
|
|
||||||
{
|
|
||||||
lng: 116.297611,
|
|
||||||
lat: 40.047363,
|
|
||||||
},
|
},
|
||||||
{
|
// 设备状态
|
||||||
lng: 116.302839,
|
deviceType: {
|
||||||
lat: 40.048219,
|
type: String,
|
||||||
|
default: () => '',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
lng: 116.308301,
|
|
||||||
lat: 40.050566,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lng: 116.305732,
|
|
||||||
lat: 40.054957,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lng: 116.304754,
|
|
||||||
lat: 40.057953,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lng: 116.306487,
|
|
||||||
lat: 40.058312,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lng: 116.307223,
|
|
||||||
lat: 40.056379,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getEquipmentInfo()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async handleQuery() {
|
|
||||||
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
|
||||||
const params = {
|
|
||||||
date: this.queryForm.date,
|
|
||||||
}
|
|
||||||
this.getEquipmentInfo(params)
|
|
||||||
// 先销毁地图 再重新初始化
|
|
||||||
this.map.clearOverlays()
|
|
||||||
this.map = null
|
|
||||||
await this.initMap()
|
|
||||||
},
|
},
|
||||||
openMapDialog(val) {
|
data() {
|
||||||
this.openMap = val
|
return {
|
||||||
this.initMap()
|
dialogVisible: true,
|
||||||
},
|
openMap: false, // 是否打开地图弹框
|
||||||
close() {
|
queryForm: {
|
||||||
this.openMap = false
|
date: '',
|
||||||
this.$emit('getList')
|
},
|
||||||
},
|
equipment: '', // 设备名称
|
||||||
// 获取装备信息
|
equipmentNumber: 'H906L', // 设备编号
|
||||||
getEquipmentInfo(params = {}) {
|
engineering: '大禹治水', // 工程
|
||||||
console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
|
map: null,
|
||||||
// 接口(params).then(res => {
|
// 轨迹点
|
||||||
// this.equipment = res.equipment
|
linePointList: [
|
||||||
// this.equipmentNumber = res.equipmentNumber
|
{
|
||||||
// this.engineering = res.engineering
|
lng: 116.297611,
|
||||||
// this.linePointList = res.linePointList
|
lat: 40.047363,
|
||||||
// })
|
},
|
||||||
},
|
{
|
||||||
// 初始化地图和轨迹
|
lng: 116.302839,
|
||||||
initMap() {
|
lat: 40.048219,
|
||||||
this.$nextTick(() => {
|
},
|
||||||
this.map = new BMapGL.Map('container') // 创建地图实例
|
{
|
||||||
let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
|
lng: 116.308301,
|
||||||
console.log('🚀 ~ this.$nextTick ~ point:', point)
|
lat: 40.050566,
|
||||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
},
|
||||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
{
|
||||||
|
lng: 116.305732,
|
||||||
|
lat: 40.054957,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lng: 116.304754,
|
||||||
|
lat: 40.057953,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lng: 116.306487,
|
||||||
|
lat: 40.058312,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lng: 116.307223,
|
||||||
|
lat: 40.056379,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
// 添加轨迹
|
count: 0,
|
||||||
let pointList = []
|
|
||||||
if (this.linePointList.length === 0) return
|
|
||||||
for (var i = 0; i < this.linePointList.length; i++) {
|
|
||||||
pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
|
|
||||||
}
|
}
|
||||||
let polyline = new BMapGL.Polyline(pointList)
|
|
||||||
// 修改线的样式
|
|
||||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
|
||||||
// polyline.setStrokeWeight(2) // 线宽
|
|
||||||
|
|
||||||
let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
|
||||||
overallView: true, // 动画完成后自动调整视野到总览
|
|
||||||
tilt: 30, // 轨迹播放的角度，默认为55
|
|
||||||
duration: 5000, // 动画持续时长，默认为10000，单位ms
|
|
||||||
delay: 2000, // 动画开始的延迟，默认0，单位ms
|
|
||||||
})
|
|
||||||
|
|
||||||
trackAni.start()
|
|
||||||
// 设置起点终点图标
|
|
||||||
this.triggerMovement()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 添加起点和终点的标记
|
|
||||||
addStartEndMarkers(startLatLng, endLatLng) {
|
|
||||||
let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
|
|
||||||
let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
|
|
||||||
this.map.addOverlay(startMarker)
|
|
||||||
|
|
||||||
let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32))
|
mounted() {
|
||||||
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
console.log('地图弹框组件被创建--')
|
||||||
this.map.addOverlay(endMarker)
|
// this.getEquipmentInfo()
|
||||||
|
this.initMap()
|
||||||
},
|
},
|
||||||
// 轨迹运动结束后的回调
|
|
||||||
triggerMovement() {
|
|
||||||
// 轨迹运动结束后获取起点和终点的经纬度坐标
|
|
||||||
let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat)
|
|
||||||
let endLatLng = new BMapGL.Point(
|
|
||||||
this.linePointList[this.linePointList.length - 1].lng,
|
|
||||||
this.linePointList[this.linePointList.length - 1].lat
|
|
||||||
)
|
|
||||||
|
|
||||||
// 添加起点和终点的图标
|
beforeDestroy() {
|
||||||
this.addStartEndMarkers(startLatLng, endLatLng)
|
this.map.clearOverlays()
|
||||||
|
this.map.destroy()
|
||||||
|
this.map = null
|
||||||
|
console.log('地图弹框组件销毁了---', this.map)
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/** 查看行程 */
|
||||||
|
handlePreviewTrip() {
|
||||||
|
let pointList = []
|
||||||
|
if (this.linePointList.length === 0) return
|
||||||
|
for (var i = 0; i < this.linePointList.length; i++) {
|
||||||
|
pointList.push(
|
||||||
|
new BMapGL.Point(
|
||||||
|
this.linePointList[i].lng,
|
||||||
|
this.linePointList[i].lat,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
let polyline = new BMapGL.Polyline(pointList)
|
||||||
|
// 修改线的样式
|
||||||
|
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||||
|
// polyline.setStrokeWeight(2) // 线宽
|
||||||
|
let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||||
|
overallView: true, // 动画完成后自动调整视野到总览
|
||||||
|
tilt: 30, // 轨迹播放的角度，默认为55
|
||||||
|
duration: 5000, // 动画持续时长，默认为10000，单位ms
|
||||||
|
delay: 2000, // 动画开始的延迟，默认0，单位ms
|
||||||
|
})
|
||||||
|
trackAni.start()
|
||||||
|
// 设置起点终点图标
|
||||||
|
this.triggerMovement()
|
||||||
|
},
|
||||||
|
async handleQuery() {
|
||||||
|
console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
|
||||||
|
const params = {
|
||||||
|
date: this.queryForm.date,
|
||||||
|
}
|
||||||
|
this.getEquipmentInfo(params)
|
||||||
|
// 先销毁地图 再重新初始化
|
||||||
|
this.map.clearOverlays()
|
||||||
|
this.map = null
|
||||||
|
await this.initMap()
|
||||||
|
},
|
||||||
|
openMapDialog(val) {
|
||||||
|
this.openMap = val
|
||||||
|
this.initMap()
|
||||||
|
},
|
||||||
|
// 获取装备信息
|
||||||
|
getEquipmentInfo(params = {}) {
|
||||||
|
console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
|
||||||
|
// 接口(params).then(res => {
|
||||||
|
// this.equipment = res.equipment
|
||||||
|
// this.equipmentNumber = res.equipmentNumber
|
||||||
|
// this.engineering = res.engineering
|
||||||
|
// this.linePointList = res.linePointList
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
// 初始化地图和轨迹
|
||||||
|
initMap() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.map = new BMapGL.Map('container') // 创建地图实例
|
||||||
|
let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
|
||||||
|
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||||
|
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||||
|
this.map.setHeading(64.5) //设置地图旋转角度
|
||||||
|
this.map.setTilt(73) //设置地图的倾斜角度
|
||||||
|
let marker = new BMapGL.Marker(point) // 创建标点
|
||||||
|
this.map.addOverlay(marker)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 添加起点和终点的标记
|
||||||
|
addStartEndMarkers(startLatLng, endLatLng) {
|
||||||
|
let startIcon = new BMapGL.Icon(
|
||||||
|
require('/src/assets/images/startIcon.png'),
|
||||||
|
new BMapGL.Size(32, 32),
|
||||||
|
)
|
||||||
|
let startMarker = new BMapGL.Marker(startLatLng, {
|
||||||
|
icon: startIcon,
|
||||||
|
})
|
||||||
|
this.map.addOverlay(startMarker)
|
||||||
|
|
||||||
|
let endIcon = new BMapGL.Icon(
|
||||||
|
require('/src/assets/images/endIcon.png'),
|
||||||
|
new BMapGL.Size(32, 32),
|
||||||
|
)
|
||||||
|
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
||||||
|
this.map.addOverlay(endMarker)
|
||||||
|
},
|
||||||
|
// 轨迹运动结束后的回调
|
||||||
|
triggerMovement() {
|
||||||
|
// 轨迹运动结束后获取起点和终点的经纬度坐标
|
||||||
|
let startLatLng = new BMapGL.Point(
|
||||||
|
this.linePointList[0].lng,
|
||||||
|
this.linePointList[0].lat,
|
||||||
|
)
|
||||||
|
let endLatLng = new BMapGL.Point(
|
||||||
|
this.linePointList[this.linePointList.length - 1].lng,
|
||||||
|
this.linePointList[this.linePointList.length - 1].lat,
|
||||||
|
)
|
||||||
|
|
||||||
|
// 添加起点和终点的图标
|
||||||
|
this.addStartEndMarkers(startLatLng, endLatLng)
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 关闭地图弹框 */
|
||||||
|
handelCloseDialog() {
|
||||||
|
this.$emit('handelCloseDialog')
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.device-title {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding: 4px 0 0 6px;
|
||||||
|
color: rgb(9, 193, 9);
|
||||||
|
}
|
||||||
|
}
|
||||||
.equipment {
|
.equipment {
|
||||||
font-weight: 600;
|
margin: 8px 0;
|
||||||
font-size: 15px;
|
font-weight: 600;
|
||||||
margin-top: 10px;
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-container {
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
.map-left {
|
||||||
|
height: 550px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-tabs__nav {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.el-tabs__item {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||||
|
padding: 0;
|
||||||
|
height: 510px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
::v-deep .el-dialog__body {
|
||||||
|
padding: 5px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.trip-container {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
.left-num {
|
||||||
|
width: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #e7f3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-info {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
li {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child li {
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-container {
|
||||||
|
padding-left: 15px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: #e8eaed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
padding: 0 0 0 15px;
|
||||||
|
margin: 5px 0 0 0;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radius-span {
|
||||||
|
margin-right: 3px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 15px;
|
||||||
|
background-color: #409eff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point-container {
|
||||||
|
margin: 2px;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 3px;
|
||||||
|
.time-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-container span:nth-child(2) {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue