|
|
@@ -0,0 +1,913 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <!-- <MainPanel>
|
|
|
+ <template v-slot:header>
|
|
|
+ <Header title="道路交通事故现场勘查笔录" type="return">
|
|
|
+ <ui-button type="primary" width="96px" @click="getLayoutImage"> 完成 </ui-button>
|
|
|
+ </Header>
|
|
|
+ </template> -->
|
|
|
+
|
|
|
+ <div class="explorate" :class="{ downMode }">
|
|
|
+ <div ref="layoutRef">
|
|
|
+ <h2 class="title">道路交通事故现场勘查笔录</h2>
|
|
|
+
|
|
|
+ <div class="container">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div class="header">
|
|
|
+ <div class="item" v-for="(i, index) in sceneTypes.options" @click="checkLevel(sceneTypes, index)">
|
|
|
+ <ui-icon :type="sceneTypes.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div>勘查单位</div>
|
|
|
+ <div class="input-box" contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div>勘查时间</div>
|
|
|
+ <div class="input-box" contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div>事故时间</div>
|
|
|
+ <div class="input-box" contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div class="time">
|
|
|
+ <div class="name">事故地点</div>
|
|
|
+ <div class="time-one">
|
|
|
+ <div class="road-type">
|
|
|
+ <div class="road-type-name">道路类型</div>
|
|
|
+ <div class="type-box">
|
|
|
+ <div class="type-item">
|
|
|
+ <div class="type-item-name">公路</div>
|
|
|
+ <div class="item-msg">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="item-info-name">技术等级</div>
|
|
|
+ <div class="item-info-box">
|
|
|
+ <div class="item" v-for="(i, index) in technicalLevel.options" @click="checkLevel(technicalLevel, index)">
|
|
|
+ <ui-icon :type="technicalLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="item-info-name">行政等级</div>
|
|
|
+ <div class="item-info-box">
|
|
|
+ <div class="item" v-for="(i, index) in administrativeLevel.options" @click="checkLevel(administrativeLevel, index)">
|
|
|
+ <ui-icon :type="administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ <div class="input-box" style="flex: 1" v-if="i.id == 5">
|
|
|
+ <input type="text" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="type-item city">
|
|
|
+ <div class="type-item-name">城市道路</div>
|
|
|
+ <div class="item-msg">
|
|
|
+ <div class="item-info">
|
|
|
+ <div class="item-info-box" style="flex-flow: row wrap">
|
|
|
+ <div class="item" v-for="(i, index) in cityRoadList.options" @click="checkLevel(cityRoadList, index)">
|
|
|
+ <ui-icon :type="cityRoadList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="road-type">
|
|
|
+ <div class="road-type-name">路口路段类型</div>
|
|
|
+ <div class="type-box">
|
|
|
+ <div class="type-item">
|
|
|
+ <div class="type-item-name">路口</div>
|
|
|
+ <div class="item-msg intersection" style="min-height: 48px; flex-flow: row wrap">
|
|
|
+ <div class="item" v-for="(i, index) in roadSideList.options" @click="checkLevel(roadSideList, index)">
|
|
|
+ <ui-icon :type="roadSideList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="type-item">
|
|
|
+ <div class="type-item-name">路段</div>
|
|
|
+ <div class="item-msg intersection" style="min-height: 60px; flex-flow: row wrap">
|
|
|
+ <div class="item" v-for="(i, index) in roadPartList.options" @click="checkLevel(roadPartList, index)">
|
|
|
+ <ui-icon :type="roadPartList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="road-info">
|
|
|
+ <div class="road-name">路名</div>
|
|
|
+ <div class="road-msg">
|
|
|
+ <div class="road-name-text" contenteditable></div>
|
|
|
+ <div class="road-num">路号（公路）</div>
|
|
|
+ <div class="road-num-text" contenteditable></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="road-pos">
|
|
|
+ <div class="road-pos-name">位置</div>
|
|
|
+ <div class="pos-box">
|
|
|
+ <div class="pos-item">
|
|
|
+ <div class="pos-item-name" style="height: 30px">卫星定位</div>
|
|
|
+ <div class="pos-msg" style="height: 30px">
|
|
|
+ <div class="longitude">
|
|
|
+ <span>经度:</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div class="latitude">
|
|
|
+ <span>纬度:</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pos-item">
|
|
|
+ <div class="pos-item-name" style="height: 54px">地点描述</div>
|
|
|
+ <div class="pos-msg desc" style="height: 54px" contenteditable></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="weather">
|
|
|
+ <div class="name">天气</div>
|
|
|
+
|
|
|
+ <div style="flex-flow: row wrap">
|
|
|
+ <div class="item" v-for="(i, index) in weatherList.options" @click="checkLevel(weatherList, index)">
|
|
|
+ <ui-icon :type="weatherList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ i.title }}</span>
|
|
|
+ <div class="input-box" v-if="i.id == 10">
|
|
|
+ <input type="text" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="environment">
|
|
|
+ <div>
|
|
|
+ <p style="margin-bottom: 18px">一、事故现场道路环境</p>
|
|
|
+ <div class="em-info-box">
|
|
|
+ <div class="info-item" v-for="(i, index) in environments">
|
|
|
+ <span class="info-title">{{ i.title }}</span>
|
|
|
+ <div class="check-box">
|
|
|
+ <div class="check-item" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
|
|
|
+ <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
|
|
|
+ <span>{{ j.name }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-box">
|
|
|
+ <input type="text" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sign-box">
|
|
|
+ <div>
|
|
|
+ <span>现场勘查人员签名：</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>记录人签名：</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sign-box">
|
|
|
+ <div>
|
|
|
+ <span>当事人签名：</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>见证人签名：</span>
|
|
|
+ <div contenteditable></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footer">
|
|
|
+ <span>共<span>肆</span>页</span>
|
|
|
+ <span>第<span>壹</span>页</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </MainPanel> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
|
|
|
+import html2canvas from 'html2canvas';
|
|
|
+import { downloadImage, uploadImage } from '@/store/sync';
|
|
|
+import Message from '@/components/base/components/message/message.vue';
|
|
|
+import Header from '@/components/photos/header.vue';
|
|
|
+import MainPanel from '@/components/main-panel/index.vue';
|
|
|
+const layoutRef = ref<HTMLDivElement>();
|
|
|
+const downMode = ref(false);
|
|
|
+const getLayoutImage = async () => {
|
|
|
+ downMode.value = true;
|
|
|
+ await nextTick();
|
|
|
+ console.error(layoutRef.value);
|
|
|
+ const canvas = await html2canvas(layoutRef.value);
|
|
|
+ Message.success({ msg: '已保存至相册', time: 2000 });
|
|
|
+ downMode.value = false;
|
|
|
+ const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
|
|
|
+ await downloadImage(blob, '12312.jpg');
|
|
|
+ // return await uploadImage(blob);
|
|
|
+};
|
|
|
+const sceneTypes = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '现场勘查' },
|
|
|
+ { id: 2, title: '补充勘查' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const roadPartList = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '普通路段' },
|
|
|
+ { id: 2, title: '高架路段' },
|
|
|
+ { id: 3, title: '变窄路段' },
|
|
|
+ { id: 4, title: '窄路' },
|
|
|
+ { id: 5, title: '桥梁' },
|
|
|
+ { id: 6, title: '隧道' },
|
|
|
+ { id: 7, title: '路段进出处' },
|
|
|
+ { id: 8, title: '路侧险要路段' },
|
|
|
+ { id: 9, title: '其他特殊路段' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const roadSideList = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '三枝分叉口' },
|
|
|
+ { id: 2, title: '四枝分叉口' },
|
|
|
+ { id: 3, title: '多枝分叉口' },
|
|
|
+ { id: 4, title: '环形交叉口' },
|
|
|
+ { id: 5, title: '匝道口' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const cityRoadList = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '城市快速路' },
|
|
|
+ { id: 2, title: '一般城市道路' },
|
|
|
+ { id: 3, title: '单位小区自建路' },
|
|
|
+ { id: 4, title: '公共停车场' },
|
|
|
+ { id: 5, title: '公共广场' },
|
|
|
+ { id: 6, title: '其他路' },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const administrativeLevel = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '国道' },
|
|
|
+ { id: 2, title: '省道' },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '县道',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '乡村道',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '其他',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const checkLevel = (item, index) => {
|
|
|
+ item.check = item.options[index].id;
|
|
|
+};
|
|
|
+const technicalLevel = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '高速' },
|
|
|
+ { id: 2, title: '一级' },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '二级',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '三级',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '四级',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ title: '等外',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+const weatherList = ref({
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, title: '晴' },
|
|
|
+ { id: 2, title: '阴' },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '多云',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '雨',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '雪',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ title: '雾',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ title: '冰雹',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ title: '沙尘',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ title: '霾',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ title: '其他',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const checkEnvironItem = (item, index, j_index) => {
|
|
|
+ environments.value[index].check = item.id;
|
|
|
+};
|
|
|
+const environments = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '影响视线或行驶的障碍物：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '无' },
|
|
|
+ { id: 2, name: '有：' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '递路交通标志：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '无' },
|
|
|
+ { id: 2, name: '有：' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '道路交通标线：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '无' },
|
|
|
+ { id: 2, name: '有：' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '中央隔离设施：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '无' },
|
|
|
+ { id: 2, name: '有：' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '路侧防护设施：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '无' },
|
|
|
+ { id: 2, name: '有：' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ title: '路面材料：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '沥青' },
|
|
|
+ { id: 2, name: '水泥' },
|
|
|
+ { id: 3, name: '砂石' },
|
|
|
+ { id: 4, name: '土路' },
|
|
|
+ { id: 5, name: '其他' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ title: '路面状况：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '路面完好' },
|
|
|
+ { id: 2, name: '施工' },
|
|
|
+ { id: 3, name: '凹凸' },
|
|
|
+ { id: 4, name: '塌陷' },
|
|
|
+ { id: 5, name: '路障' },
|
|
|
+ { id: 6, name: '其他' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ title: '路表状况：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '干燥' },
|
|
|
+ { id: 2, name: '潮湿' },
|
|
|
+ { id: 3, name: '积水' },
|
|
|
+ { id: 4, name: '漫水' },
|
|
|
+ { id: 5, name: '冰雪' },
|
|
|
+ { id: 6, name: '泥泞' },
|
|
|
+ { id: 7, name: '其他' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ title: '照明情况：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [
|
|
|
+ { id: 1, name: '白天 夜间路灯照明' },
|
|
|
+ { id: 2, name: '有' },
|
|
|
+ { id: 3, name: '无' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ title: '照明情况：',
|
|
|
+ value: '',
|
|
|
+ check: 0,
|
|
|
+ options: [],
|
|
|
+ },
|
|
|
+]);
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+div {
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.explorate {
|
|
|
+ color: #000;
|
|
|
+ font-size: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // display: grid;
|
|
|
+
|
|
|
+ font-family: sr, st;
|
|
|
+
|
|
|
+ // padding: 80px 0 0 0;
|
|
|
+ > div {
|
|
|
+ padding: 20px 50px 30px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .container {
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 60px;
|
|
|
+ margin-top: 10px;
|
|
|
+ > span {
|
|
|
+ > span {
|
|
|
+ margin: 0 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.downMode {
|
|
|
+ width: 1050px;
|
|
|
+ height: 1485px;
|
|
|
+ > div {
|
|
|
+ padding: 125px 100px 75px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.wrapper {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 100%;
|
|
|
+ grid-template-rows: repeat(8, auto);
|
|
|
+ border: 1px solid #000;
|
|
|
+ font-size: 20px;
|
|
|
+ .sign-box {
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-top: 1px solid #000;
|
|
|
+ min-height: 40px;
|
|
|
+ > div {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ outline: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ height: 35px;
|
|
|
+ .item {
|
|
|
+ margin-right: 60px;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 14% 86%;
|
|
|
+ grid-template-rows: repeat(1, 100%);
|
|
|
+ height: 35px;
|
|
|
+ > div {
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &:last-of-type {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ &.input-box {
|
|
|
+ outline: none;
|
|
|
+ padding: 0 10px;
|
|
|
+ line-height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .environment {
|
|
|
+ padding: 10px;
|
|
|
+ .em-info-box {
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ .check-box {
|
|
|
+ display: inline-block;
|
|
|
+ .check-item {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .input-box {
|
|
|
+ flex: 1;
|
|
|
+ display: inline-block;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .weather {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 14% 86%;
|
|
|
+ grid-template-rows: repeat(1, 100%);
|
|
|
+ min-height: 35px;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ .name {
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ padding: 5px;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ .input-box {
|
|
|
+ input {
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 14% 86%;
|
|
|
+ grid-template-rows: repeat(1, auto);
|
|
|
+ .name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+
|
|
|
+ &:last-of-type {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-one {
|
|
|
+ // display: grid;
|
|
|
+ // grid-auto-flow: row;
|
|
|
+ // grid-template-columns: 66px;
|
|
|
+ // grid-template-rows: repeat(4, auto);
|
|
|
+ .road-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ .road-name {
|
|
|
+ width: 66px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .road-msg {
|
|
|
+ flex: 1;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ > div {
|
|
|
+ min-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .road-name-text {
|
|
|
+ width: 55%;
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10px;
|
|
|
+ outline: none;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .road-num {
|
|
|
+ width: 23.8%;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ }
|
|
|
+ .road-num-text {
|
|
|
+ width: 20%;
|
|
|
+ padding: 0 10px;
|
|
|
+ flex: 1;
|
|
|
+ outline: none;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ min-height: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .road-pos {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .road-pos-name {
|
|
|
+ width: 66px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .pos-box {
|
|
|
+ // width: 100%;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .pos-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pos-item-name {
|
|
|
+ width: 120px;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .pos-msg {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ &.desc {
|
|
|
+ outline: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 5px;
|
|
|
+ line-height: 54px;
|
|
|
+ }
|
|
|
+ .longitude {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 10px;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ height: 30px;
|
|
|
+ outline: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .latitude {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 0 10px;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ height: 30px;
|
|
|
+ outline: none;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .road-type {
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ .road-type-name {
|
|
|
+ width: 66px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .type-box {
|
|
|
+ // width: 100%;
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .type-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ &.city {
|
|
|
+ .type-item-name {
|
|
|
+ // border-right: 1px solid #000;
|
|
|
+ }
|
|
|
+ .item-info-box {
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .type-item-name {
|
|
|
+ width: 66px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .item-msg {
|
|
|
+ flex: 1;
|
|
|
+ &.intersection {
|
|
|
+ min-height: 48px;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 5px;
|
|
|
+ .item {
|
|
|
+ margin-right: 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ // flex: 1;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 56px;
|
|
|
+ .item-info {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ position: relative;
|
|
|
+ .item-info-name {
|
|
|
+ width: 66px;
|
|
|
+ height: 56px;
|
|
|
+ // line-height: 56px;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-right: 1px solid #000;
|
|
|
+ border-left: 1px solid #000;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ .item-info-box {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 56px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 5px;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ margin-right: 2px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .input-box {
|
|
|
+ width: 10%;
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 1px solid #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.wrapper div {
|
|
|
+}
|
|
|
+</style>
|
