<template>
  <div class="max-big-box">
    <!--返回按钮-->
    <div class="out-page-button cursor_pointer" @click="outButton">
      <img src="~@/assets/images/icon_25.png">
      <p>返回</p>
    </div>
    <div class="top-title-box">
      <img src="~@/assets/images/xian_1.png">
      <p>历史行程轨迹</p>
      <img src="~@/assets/images/xian_2.png">
    </div>
    <div class="map-box">

    </div>
    <!--地图点中展示数据-->
    <div class="right-bottom-max-box">
      <p class="right-top-title">{{mapInfoData.title}}</p>
      <p class="address-p">位置：{{mapInfoData.address}}</p>
      <div class="right-bottom-big-box TabStrip">
        <div class="right-title-box">
          <img src="~@/assets/images/xian_1.png">
          <p>任务详细信息</p>
          <img src="~@/assets/images/xian_2.png">
        </div>
        <div class="text-box">
          <p>单位名称：</p>
          <p>{{mapInfoData.unitName}}</p>
        </div>
        <div class="text-box">
          <p>医疗队名称：</p>
          <p>{{mapInfoData.medicalName}}</p>
        </div>
        <div class="text-box">
          <p>执行任务时间：</p>
          <p>{{mapInfoData.taskPlayTime}} 至 {{mapInfoData.taskEndTime}}</p>
        </div>
        <div class="text-box">
          <p>执行任务地点：</p>
          <p>{{mapInfoData.taskAddress}}</p>
        </div>
        <div class="text-one-box">
          <p>备注：</p>
          <p>{{mapInfoData.text}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "viewHistoricalDrivingTrails",//查看历史行驶轨迹
    data () {
      return {
        //地图点中展示数据
        mapInfoData:{
          title:"抗震救灾任务",
          address:"重庆市********83号",
          unitName:"服务保障中心",
          medicalName:"野战医疗队",
          taskPlayTime:"2020-10-10 10:21",
          taskEndTime:"2020-10-10 12:21",
          taskAddress:"重庆市*****************83号",
          text:"****部门近期进行****活动,请务必保证仓库方面随时沟通联系."
        },
      }
    },

    created(){

    },
    mounted() {

    },
    methods: {
      // 调用父组件方法退出当前页面
      outButton(){
        this.$parent.outPage();
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    position relative
    //返回按钮
    .out-page-button
      height:30px;
      width:93px;
      margin:0 0 0 106px;
      background:url("~@/assets/images/button_02.png");
      background-size 100% 100%
      display flex
      img
        display block
        height:12px;
        width:7px;
        margin:9px 10px 0 22px;
      p
        line-height:30px;
        font-size:$font_12;
        color:$color_ff;
        text-align left
    .top-title-box
      display flex
      width:475px;
      margin:0 auto 21px;
      img
        width:165px;
        height:2px;
        margin-top:20px;
      p
        line-height:42px;
        width:145px;
        font-size:$font_16;
        font-weight 700
        color:$color_ff;
    .map-box
      height:756px;
      width:1254px;
      background:url("~@/assets/images/demo3.png");
      background-size 100% 100%
      margin:0 auto;
      //地图点中展示数据
    .right-bottom-max-box
      height:303px;
      width:450px;
      position absolute
      bottom:120px;
      right:12px;
      background:url("~@/assets/images/min_back_06_2.png");
      background-size 100% 100%
      overflow hidden
      text-align left
      .right-top-title
        margin:15px 0 0 37px;
        line-height:30px;
        font-size:$font_16;
        color:$theme;
        font-weight:700;
      .address-p
        margin-left:37px;
        line-height:28px;
        font-size:$font_14;
        color:$color_ff;
      .right-bottom-big-box
        height:220px;
        margin:0 10px;
        overflow-x:hidden;
        overflow-y:scroll;
        .right-title-box
          margin:5px auto;
          width:271px;
          display flex
          img
            height:1px;
            width:75px;
          p
            width:121px;
            line-height:42px;
            font-size:$font_16;
            color:$theme;
        .text-box
          display: flex
          p
            font-size:$font_14;
          p:nth-child(1)
            margin-left:34px;
            width:102px;
            color:$theme;
          p:nth-child(2)
            width:294px;
            line-height:26px;
            color:$color_ff;
        .text-one-box
          display: flex
          p
            font-size:$font_14;
          p:nth-child(1)
            margin-left:34px;
            width:102px;
            color:$theme;
          p:nth-child(2)
            width:294px;
            margin:8px 0;
            line-height:16px;
            color:$color_ff;
  .color
    color: #000
</style>
