<template>
  <div class="container">
    <div class="top">
        <img src="../../assets/logo.png" alt="logo" class="logo">
        <div class="search">
            <!-- <div class="inputbox">
                <input placeholder="搜索" class="input1" type="text">
                <button class="btn1">搜索</button>
            </div> -->
            <h3 class="el-icon-phone"> {{ configurationdata && configurationdata.phone }}</h3>
        </div>
    </div>
    <menus class="menu"></menus>
  </div>
</template>

<script>
import menus from './menus.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState: configmapState } = createNamespacedHelpers('webconfig')
export default {
  components: {
    menus
  },
  data () {
    return {}
  },
  methods: {},
  mounted () {},
  computed: {
    ...configmapState(['configurationdata'])
  }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    margin-top: 3%;
    .top {
        width: 70%;
        margin: 0 auto;
        display: flex;
        .logo {
            width: 25%;
            display: block;
        }
        .search {
            width: 50%;
            display: flex;
            margin-left: 20%;
            margin-top: 1em;
            .inputbox {
                display: flex;
                height: 2em;
                margin-top: 0.5em;
                .input1 {
                    border: none;
                    background: #f1f1f1;
                    height: 100%;
                }
                .btn1 {
                    background: red;
                    color: #fff;
                    border: none;
                    height: 100%;
                    padding: 10px;
                    display: block;
                }
            }
            h3 {
                // margin-left: 10%;
            }
        }
    }
}
</style>
