shop-pc/layouts/default.vue

<!--
 * @Author: ch
 * @Date: 2022-05-04 17:56:39
 * @LastEditors: ch
 * @LastEditTime: 2022-05-04 21:19:27
 * @Description: file content
-->
<template>
  <div class="layout">
    <div class="layout-header">
      <div
        class="layout-header-wrap layout-center flex flex-between flex-middle"
      >
        <div class="header-wrap__logo">马士兵严选欢迎你！</div>
        <div class="header-wrap__content flex flex-middle">
          <div class="header-wrap-content__login">
            <div v-if="isLogin" class="wrap-content-login__text flex">
              <span>请先</span>
              <span class="content-login-text--light">登录/注册</span>
            </div>
            <el-dropdown @visible-change="menuVisible = $event">
              <div
                class="wrap-content-login__info flex flex-middle flex-center"
              >
                <span>你好，{{ userInfo.name }}</span>
                <img class="content-login-info__logo" :src="menuIcon" />
              </div>
              <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
                <div class="menu-item__wrap flex flex-middle">
                  <img class="menu-item-wrap__avatar" />
                  <span>{{ userInfo.name }}</span>
                </div>
                <div class="menu-item__line"></div>
                <el-dropdown-item
                  class="flex flex-between flex-middle"
                  v-for="item in menuList"
                  :key="item.value"
                >
                  <span> {{ item.label }}</span>
                  <img src="@/static/images/layout/icon-arrow.png" />
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <template>
            <div v-if="!menuVisible" class="header-wrap-content--line"></div>
            <div class="header-wrap-content__common flex flex-middle">
              <img src="@/static/images/layout/icon-message.png" />
              <span>消息</span>
              <div class="wrap-content-message__tip">33</div>
            </div>
          </template>
          <div class="header-wrap-content--line"></div>
          <div class="header-wrap-content__common flex flex-middle">
            <img src="@/static/images/layout/icon-order.png" />
            <span>我的订单</span>
          </div>
          <div class="header-wrap-content--line"></div>
          <div class="header-wrap-content__common flex flex-middle">
            <img src="@/static/images/layout/icon-phone.png" />
            <span>下载app</span>
          </div>
        </div>
      </div>
    </div>
    <DefaultHeader />
    <div class="layout-box"><Nuxt /></div>
    <div class="layout-footer"></div>
  </div>
</template>
<script>
import DefaultHeader from "./module/DefaultHeader.vue";

const MENU_VALUE = {
  PERSONAL: 1,
  ADDRESS: 2,
  LOGON_OUT: 3,
};
export default {
  name: "Layout",
  components: { DefaultHeader },
  data() {
    return {
      isLogin: false,
      userInfo: {
        name: "仙女广",
      },
      menuVisible: false,
      menuList: [
        {
          label: "个人中心",
          value: MENU_VALUE.PERSONAL,
        },
        {
          label: "收货地址",
          value: MENU_VALUE.ADDRESS,
        },
        {
          label: "退出登录",
          value: MENU_VALUE.LOGON_OUT,
        },
      ],
    };
  },
  computed: {
    menuIcon() {
      return this.menuVisible
        ? require("@/static/images/layout/icon-up-light.png")
        : require("@/static/images/layout/icon-up.png");
    },
  },
  methods: {
    onMenuClick() {},
  },
};
</script>
<style lang="scss">
.dropdown-menu-self {
  width: 200px;
  margin-top: 0 !important;
  padding-bottom: 0;
  .popper__arrow {
    display: none;
  }
  .el-dropdown-menu__item:hover {
    background: #f8f9fb;
    color: #666666;
  }
  .el-dropdown-menu__item {
    height: 42px;
    font-size: 14px;
    img {
      width: 8px;
      height: 14px;
    }
  }
  .menu-item__wrap {
    padding: 16px 24px;
    font-size: 14px;
    .menu-item-wrap__avatar {
      width: 50px;
      height: 50px;
      margin-right: 13px;
      border-radius: 50%;
    }
  }
  .menu-item__line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
    border-radius: 0px 0px 0px 0px;
  }
}
</style>
<style lang="scss" scoped>
.layout-center {
  width: 1200px;
  margin: 0 auto;
}
.layout {
  .layout-header {
    height: 30px;
    color: #999999;
    background: #f1f1f1;
    border-radius: 0px 0px 0px 0px;
    .layout-header-wrap {
      height: 100%;
      .header-wrap__content {
        .header-wrap-content__login {
          .wrap-content-login__text {
            .content-login-text--light {
              margin-left: 6px;
              color: #ff875b;
              cursor: pointer;
            }
          }
          .wrap-content-login__info:hover {
            background: #ffffff !important;
            color: #ff875b;
          }
          .wrap-content-login__info {
            position: relative;
            padding: 0 18px;
            height: 30px;
            cursor: pointer;
            .content-login-info__logo {
              width: 8px;
              height: 4px;
              margin-left: 4px;
            }
          }
        }
        .wrap-content-message__tip {
          min-width: 14px;
          height: 14px;
          padding: 0 3px;
          line-height: 14px;
          font-size: 10px;
          color: #ffffff;
          text-align: center;
          background: #ff512b;
          border-radius: 50%;
          margin-left: 4px;
        }
        .header-wrap-content--line {
          width: 1px;
          height: 10px;
          background: #d8d8d8;
        }
        .header-wrap-content__common {
          cursor: pointer;
          padding: 0 18px;
          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>