<template>
    <div class="transportation">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">运输管理</h2>
        <div class="map">
            <!-- <el-input
                v-model="searchKey"
                @keyup.enter.native="searchByHand"
                placeholder="请输入内容"
                class="input-with-select"
            >
                <el-button slot="append" icon="el-icon-search" @click="searchByHand"></el-button>
            </el-input> -->
            <vue-a-map></vue-a-map>
        </div>
        <aside class="aside">
            <h5>运输车辆信息</h5>
            <el-row type="flex" class="row">
                <el-col class="title">车牌号：</el-col>
                <el-col class="content">浙A45154</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">运输批次号：</el-col>
                <el-col class="content">135498</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">当前车厢温度：</el-col>
                <el-col class="content">- 5℃</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">驾驶员：</el-col>
                <el-col class="content">张三</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">联系电话：</el-col>
                <el-col class="content">13545454862</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">目的地：</el-col>
                <el-col class="content">杭州市余杭区xx超市</el-col>
            </el-row>
            <el-row type="flex" class="row">
                <el-col class="title">预计到时间：</el-col>
                <el-col class="content">2020-07-21 06:45</el-col>
            </el-row>
            <div class="footer_link">
                <el-link type="primary" disabled>查看运输单</el-link>
            </div>
        </aside>
    </div>
</template>

<script>
import VueAMap from "../../components/map/Amap.vue";

export default {
    data() {
        return {
            searchKey: ""
        };
    },
    components: { VueAMap },
    created() {},
    methods: {
        searchByHand() {
            console.log("666");
        }
    }
};
</script>

<style lang="scss" scoped>
.transportation {
    display: flex;
    .map {
        width: 60%;
        height: 700px;
    }
    .aside {
        flex-grow: 1;
        margin: 20px 0 0 30px;
        border: 1px solid rgb(230, 228, 228);
        border-radius: 15px;
        padding: 15px;
        h5 {
            font-size: 25px;
            margin-bottom: 20px;
        }
        .row {
            margin-bottom: 15px;
            .title {
                width: 240px;
                font-size: 20px;
                color: #555;
                font-weight: 600;
            }
            .content {
                font-size: 20px;
                color: #666;
            }
        }
        .footer_link {
            text-align: right;
            padding-right: 30%;
            margin-top: 30px;
            user-select: none;
        }
    }
}
</style>