msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 文件位置调整

Browse Source
merge-requests/2/head
xiaoguang 3 years ago
parent 83a91066a7
commit 804dd15fe0
3 changed files with 272 additions and 268 deletions
Show Stats Download Patch File Download Diff File

201
layouts/default.vue
Unescape View File

@ -7,217 +7,22 @@
--> -->
<template> <template>
<div class="layout"> <div class="layout">
<div class="layout-header"> <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-box"><Nuxt /></div>
<div class="layout-footer"></div> <div class="layout-footer"></div>
</div> </div>
</template> </template>
<script> <script>
import DefaultHeader from "./module/DefaultHeader.vue"; import Header from "./module/header/index.vue";
const MENU_VALUE = {
PERSONAL: 1,
ADDRESS: 2,
LOGON_OUT: 3,
};
export default { export default {
name: "Layout", name: "Layout",
components: { DefaultHeader }, components: { Header },
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> </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> <style lang="scss" scoped>
.layout-center { .layout-center {
width: 1200px; width: 1200px;
margin: 0 auto; 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> </style>

202
layouts/module/header/HeaderInfoBar.vue
Unescape View File

@ -0,0 +1,202 @@
<template>
<div class="info-bar-header">
<div
class="info-bar-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>
</template>
<script>
const MENU_VALUE = {
PERSONAL: 1,
ADDRESS: 2,
LOGON_OUT: 3,
};
export default {
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>
.info-bar-header {
height: 30px;
color: #999999;
background: #f1f1f1;
border-radius: 0px 0px 0px 0px;
.info-bar-header-wrap {
height: 100%;
width: 1200px;
margin: 0 auto;
.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>

137
layouts/module/DefaultHeader.vue → layouts/module/header/index.vue
Unescape View File

@ -1,81 +1,85 @@
<template> <template>
<div class="default-header"> <div>
<div class="default-header-box"> <HeaderInfoBar />
<div class="default-header-box__wrap flex flex-between flex-middle"> <div class="default-header">
<img <div class="default-header-box">
class="header-box-wrap__logo" <div class="default-header-box__wrap flex flex-between flex-middle">
src="@/static/images/layout/logo.png" <img
/> class="header-box-wrap__logo"
<div class="header-box-wrap__right flex flex-middle"> src="@/static/images/layout/logo.png"
<div class="box-wrap-right__search flex"> />
<div class="search-input"> <div class="header-box-wrap__right flex flex-middle">
<el-input <div class="box-wrap-right__search flex">
v-model="searchContent" <div class="search-input">
placeholder="请输入商品名称" <el-input
></el-input> v-model="searchContent"
placeholder="请输入商品名称"
></el-input>
</div>
<div class="search-icon flex flex-center flex-middle">
<img src="@/static/images/layout/icon-search.png" />
</div>
</div> </div>
<div class="search-icon flex flex-center flex-middle"> <div class="box-wrap-right__cart flex flex-middle">
<img src="@/static/images/layout/icon-search.png" /> <img src="@/static/images/layout/icon-shop.png" />
<span>购物车</span>
<div class="wrap-right-cart__tip">3</div>
</div> </div>
</div> </div>
<div class="box-wrap-right__cart flex flex-middle">
<img src="@/static/images/layout/icon-shop.png" />
<span>购物车</span>
<div class="wrap-right-cart__tip">3</div>
</div>
</div> </div>
</div> <div class="default-header-box__tab flex flex-middle">
<div class="default-header-box__tab flex flex-middle"> <div class="header-box-tab__category">
<div class="header-box-tab__category"> <div class="tab-category__label flex flex-center flex-middle">
<div class="tab-category__label flex flex-center flex-middle"> <img src="@/static/images/layout/icon-category.png" />
<img src="@/static/images/layout/icon-category.png" /> <span>热门分类</span>
<span>热门分类</span>
</div>
<div class="tab-category__menu flex flex-left">
<div class="tab-category-menu__left">
<div
v-for="item in categrayData"
:key="item.id"
@mouseenter="handleMouEnter(item.id)"
@mouseleave="categrayHoverVisible = false"
class="menu-left__item flex felx-middle"
>
<img />
<span>{{ item.name }}</span>
</div>
</div> </div>
<div v-show="categrayHoverVisible"> <div class="tab-category__menu flex flex-left">
<div <div class="tab-category-menu__left">
class="tab-category-menu__right flex flex-wrap"
@mouseenter="categrayHoverVisible = true"
>
<div <div
v-for="item in currentCategrayList" v-for="item in categrayData"
:key="item.id" :key="item.id"
class="menu-right__item" @mouseenter="handleMouEnter(item.id)"
@mouseleave="categrayHoverVisible = false"
class="menu-left__item flex felx-middle"
>
<img />
<span>{{ item.name }}</span>
</div>
</div>
<div v-show="categrayHoverVisible">
<div
class="tab-category-menu__right flex flex-wrap"
@mouseenter="categrayHoverVisible = true"
> >
{{ item.name }} <div
v-for="item in currentCategrayList"
:key="item.id"
class="menu-right__item"
>
{{ item.name }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <nuxt-link
<div v-for="item in tabList"
v-for="item in tabList" :key="item.value"
:key="item.value" class="header-box-tab__common flex flex-center flex-middle"
class="header-box-tab__common flex flex-center flex-middle" :class="{
:class="{ 'header-box-tab__common--light': item.path === $nuxt.$route.path,
'header-box-tab__common--light': item.value === activityTab, }"
}" :to="item.path"
@click="onTabClick(item)" >
> {{ item.label }}
{{ item.label }} </nuxt-link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import HeaderInfoBar from "./HeaderInfoBar.vue";
import { import {
ApiGetCategoryOneList, ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods, ApiGetCategoryTwoAndGoods,
@ -89,14 +93,15 @@ const TAB_TYPE = {
}; };
export default { export default {
name: "DefaultHeader", name: "DefaultHeader",
components: { HeaderInfoBar },
data() { data() {
return { return {
searchContent: "", searchContent: "",
activityTab: TAB_TYPE.HOME, activityTab: TAB_TYPE.HOME,
tabList: [ tabList: [
{ label: "首页", value: TAB_TYPE.HOME, path: "/" }, { label: "首页", value: TAB_TYPE.HOME, path: "/" },
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/" }, { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/" }, { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" }, { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
], ],
categrayData: [], categrayData: [],
@ -139,15 +144,6 @@ export default {
); );
} }
}, },
onTabClick(tab) {
if (this.activityTab === tab.value) {
return;
}
this.activityTab = tab.value;
this.$router.push({
path: tab.path,
});
},
}, },
}; };
</script> </script>
@ -164,6 +160,7 @@ export default {
height: 42px; height: 42px;
font-size: 14px; font-size: 14px;
margin-bottom: 38px; margin-bottom: 38px;
padding-right: 50px;
.header-box-wrap__logo { .header-box-wrap__logo {
width: 244px; width: 244px;
height: 100%; height: 100%;
Write Preview
Loading…
Cancel
Save