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

Merge branch 'task1.0.0_xg' into 'feature/task1.0.0'

Browse Source 
feat: 文件位置调整

See merge request yanxuan-frontend/shop-pc!2
merge-requests/3/head
肖广 2 years ago
parent 995e299027 804dd15fe0
commit e957575ae2
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>
<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 />
<Header />
<div class="layout-box"><Nuxt /></div>
<div class="layout-footer"></div>
</div>
</template>
<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 {
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() {},
},
components: { Header },
};
</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>

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