mall-web-ssr/components/store/StoreHeader.vue

<template>
  <div id="nav_fragment">
    <div class="container">
      <div class="row" style="height: 120px; padding-top: 30px; margin: 0;">
        <!-- 店铺信息以及下拉菜单 -->
        <div id = "shop" :class="{ 'drop-down-active' : isOpen }" @mouseleave="closeDropDown()">
          <div class="dropdown">
            <div style="width: 440px;">
              <div class="dropdown-btn" style="margin-top: 0;">
                <div style="margin-bottom: 15px;">
                  <a role="button" class="dropdown-toggle" @mouseover="openDropDown()">
                    <span class="shop-name" v-text="storeInfo.storeName || '店铺名称'"></span>
                    <span><i class="fa fa-angle-down fa-fw" style="font-size: 20px;"></i></span>
                  </a>
                </div>
                <div class="icon-style">
                  <button class="btn btn-xs btn-danger btn-nav" v-if="!isFocus"><span class="watch">关注</span></button>
                  <button class="btn btn-xs btn-default btn-nav" v-if="isFocus" style="width:50px"><span>已关注</span></button>
                  <span v-if="storeInfo.type == 'ORIGINAL_FACTORY'">&nbsp;<img src="/images/store/icon/icon-factory.png"/></span>
                  <span v-else-if="storeInfo.type == 'AGENCY'">&nbsp;<img src="/images/store/icon/icon-agent.png"/></span>
                  <span v-else-if="storeInfo.type == 'DISTRIBUTION'">&nbsp;<img src="/images/store/icon/icon-distribution.png"/></span>
                  <span v-else-if="storeInfo.type == 'CONSIGNMENT'">&nbsp;<img src="/images/store/icon/consignment.png"/></span>
                </div>
              </div>
              <div class="clearfix"></div>
            </div>
            <div style="background: #FFFFFF;" v-if="isOpen">
              <ul class = "shop-contact list-unstyled" style="padding: 15px 0; margin-bottom: 0; border-top: #e8e8e8 1px solid; margin-top: 20px;">
                <li ng-if="storeInfo.enterprise.enTel.length > 0">
                  <span>电话：</span><span v-text="storeInfo.enterprise.enTel"></span>
                </li>
                <li ng-if="storeInfo.enterprise.enFax.length > 0">
                  <span>传真：</span><span v-text="storeInfo.enterprise.enFax"></span>
                </li>
                <li ng-if="storeInfo.enterprise.enAddress.length > 0">
                  <span>地址：</span><span v-text="storeInfo.enterprise.enAddress"></span>
                </li>
                <li class="text-right">
                  <nuxt-link :to="{ name: 'store-uuid-description', params: { uuid: storeInfo.uuid } }">了解更多&gt;</nuxt-link>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 搜索框 -->
        <div id="search-group" style="margin-left: 450px;">
          <search-box/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SearchBox from '~components/main/Search.vue'

export default {
  name: 'store-header',
  data () {
    return {
      isFocus: false,
      isOpen: false
    }
  },
  computed: {
    storeInfo () {
      return this.$store.state.shop.storeInfo.store.data
    }
  },
  components: {
    SearchBox
  },
  methods: {
    closeDropDown () {
      this.isOpen = false
    },
    openDropDown () {
      this.isOpen = true
    }
  }
}
</script>
<style scoped>
  body{
		font-family: "Microsoft Yahei", "微软雅黑";
	}
	#nav_fragment {
		margin-bottom: 20px;
	}

	#nav_fragment .shop-name {
		font-size: 24px;
		color: RGB(50,50,50);
	}

	#nav_fragment div#shop {
		width: 440px;
		padding: 5px;
	}

	#nav_fragment .shop-info {
		font-size: 12px;
		color: rgb(50,50,50);
	}

	#nav_fragment .shop-data {
		font-size: 12px;
		line-height: 25px;
		font-weight: 600;
		color: RGB(255,0,0);
	}

	#nav_fragment .btn-nav{
		width: 40px;
		height: 20px;
		line-height: 14px;
    padding: 0;
	}

	#nav_fragment .btn-nav .watch {
		font-size: 12px;
		color: white;
	}

	#nav_fragment .btn-nav .message {
		font-size: 12px;
		color: rgb(50,50,50);
	}

	#nav_fragment div.dropdown {
		margin-top: -5px;
		padding: 5px;
	}

	#nav_fragment .shop-contact {
		font-size: 14px;
		color: rgb(120,120,120);
		line-height: 25px;
	}

	#nav_fragment .shop-contact a{
		color: rgb(33,71,151);
	}

	#nav_fragment #search_input {
		height: 40px;
		font-size: 16px;
		font-family: '微软雅黑';
		border: 2px solid #5078cb;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
		line-height: 40px;
	}

	#nav_fragment #search_input:focus {
		border-color: #5078cb;
		outline: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	#nav_fragment #search_btn {
		background-color: #5078cb;
		color: rgb(255, 255, 255);
		font-size: 16px;
		width: 78px;
		height: 40px;
		border: 2px solid #5078cb;
		border-radius: 0;
	}

	#nav_fragment #search_btn_this {
		height: 36px;
		line-height: 36px;
		padding-top: 0px;
		padding-bottom: 0px;
		font-size: 16px;
		font-weight: 600;
		color: #5078cb;
		background: #fff;
		border-radius: 0;
		border: 1px #5078cb solid;
	}

	#nav_fragment .my-cart {
		margin-top: 20px;
		margin-left: 20px;
	}

	#nav_fragment .my-cart #my-cart{
		font-size: 14px;
		color: #5078cb;
	}

	#nav_fragment .my-cart .badge {
		background-color: #ff0000;
		position: absolute;
		top: -10px;
	}

	#nav_fragment .list-unstyled {
		list-style: none;
	}

	#nav_fragment a:hover,a:focus {
		text-decoration: none;
	}

	#nav_fragment .row>div {
		float: left;
	}

	#nav_fragment #shop {
		width: 100%;
		position: absolute;
		float: left;
	}

	#nav_fragment #search-group {
		padding-top: 20px;
		margin-left: 10px;
		padding-left: 20px;
		top: -12px;
		position: relative;
	}

	#nav_fragment #search-group .input-group {
		margin-right: 10px;
		float: left;
		width: 480px;
	}

	#nav_fragment .dropdown .dropdown-menu .dropdown-btn {
		float: left;
		margin-top: 30px;
	}

	#nav_fragment .dropdown .dropdown-score .description {
		padding-top: 10px;
		color: #323232;
		font-size: 12px;
	}

	#nav_fragment .dropdown .dropdown-score .score {
		display: inline-block;
		padding-top: 5px;
		color: #FF6868;
		font-size: 12px;
	}

	#nav_fragment .dropdown .dropdown-menu .dropdown-score>div>div {
		margin-top: 0px;
		width: 25px;
		margin-right: 10px;
	}

	#nav_fragment .shop-score {
		margin-top: 20px;
		margin-left: 70px;
	}

	#nav_fragment .shop-score>div>div {
		margin-right: 10px;
		width: 25px;
	}

	#nav_fragment .hot-search .active-search-item {
		color: #ff0101;
		font-size: 13px;
		display: inline-block;
		margin-right: 1em;
	}

	#nav_fragment .hot-search .resources {
		font-size: 12px;
		font-family: "Microsoft Yahei", "微软雅黑";
		color: rgb(250,50,50);
	}

	#nav_fragment .hot-search .hot-word {
		font-size: 12px;
		color: rgb(50,50,50);
		margin-left: 20px;
	}
	#nav_fragment .drop-down-active {
		z-index: 20;
		-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(210,209,209,.9);
		box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(210,209,209,.9);
		border: #f5f5f5 1px solid;
		background-color: white;
		transition: dispaly .5s ease;
	}
	.hot-search{
		margin-top: 5px;
	}
	.hot-search .static{
		color: #f00;
	}
	.hot-search a{
		color: #838383;
	}
	.hot-search a:hover{
		color: #f00;
	}
	.my-cart .btn{
		top: -8px;
		position: relative;
	}
	#search-group .association {
		position: absolute;
		left: 0;
		top: 100%;
		right: 61px;
		list-style: none;
		-webkit-padding-start: 0;
		background: #ffffff;
		border: 1px solid #dddddd;
		z-index: 21;
	}

	#search-group .association li {
		padding: 0 15px;
		line-height: 30px;
		text-align: left;
		font-family: "Microsoft Yahei";
	}

	#search-group .association li:hover {
		background: #EEEEEE;
		cursor: pointer;
	}
	.text-right{
		text-align: right;
	}
	.text-right a:hover{
		color: #d32526 !important;
		text-decoration: underline;
	}
	.icon-style img{
		vertical-align: top;
		position: relative;
		top: -9px;
	}
</style>