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

Merge branch 'feature/task1.0.0' of http://internel-git.mashibing.cn/yanxuan-frontend/shop-pc into feature/task1.0.0

Browse Source
merge-requests/4/head
ch 2 years ago
parent 7e67f0785d 34d160a754
commit f0dec01534
14 changed files with 298 additions and 78 deletions
Show Stats Download Patch File Download Diff File

1
assets/scss/global.scss
Unescape View File

@ -1,5 +1,6 @@
@import './flex.scss';
@import './util.scss';
* {
-webkit-box-sizing: border-box; box-sizing: border-box;

5
layouts/default.vue
Unescape View File

@ -9,15 +9,16 @@
<div class="layout">
<Header />
<div class="layout-box"><Nuxt /></div>
<div class="layout-footer"></div>
<Footer />
</div>
</template>
<script>
import Header from "./module/header/index.vue";
import Footer from "./module/footer/index.vue";
export default {
name: "Layout",
components: { Header },
components: { Header, Footer },
};
</script>
<style lang="scss" scoped>

83
layouts/module/footer/index.vue
Unescape View File

@ -0,0 +1,83 @@
<template>
<div class="layout-footer">
<div class="layout-footer-wrap">
<div class="layout-footer-wrap__promise flex flex-middle flex-between">
<div
v-for="(item, index) in promiseList"
:key="index"
class="wrap-promise-item"
>
<img :src="item.icon" />
<span>{{ item.label }}</span>
</div>
</div>
<div class="layout-footer-wrap__line"></div>
<div class="layout-footer-wrap__address">
© 2020 马士兵（北京）教育科技有限公司
地址：北京市海淀区北三环中路44号4号楼1层114 京ICP备17012835号-1
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
promiseList: [
{
label: "马士兵严选",
icon: require("@/static/images/layout/footer-1.png"),
},
{
label: "马士兵严选",
icon: require("@/static/images/layout/footer-2.png"),
},
{
label: "马士兵严选",
icon: require("@/static/images/layout/footer-3.png"),
},
{
label: "马士兵严选",
icon: require("@/static/images/layout/footer-4.png"),
},
],
};
},
};
</script>
<style lang="scss" scoped>
.layout-footer {
height: 189px;
background: #dddddd;
.layout-footer-wrap {
.layout-footer-wrap__promise {
width: 1060px;
margin: 0 auto;
padding: 25px 0;
.wrap-promise-item {
font-weight: bold;
color: #999999;
font-size: 18px;
margin-left: 20px;
img {
width: 52px;
height: 52px;
}
}
}
.layout-footer-wrap__line {
width: 100%;
height: 1px;
background: #cccccc;
}
.layout-footer-wrap__address {
width: 500px;
margin: 0 auto;
padding: 20px 0;
font-size: 12px;
color: #797979;
text-align: center;
}
}
}
</style>

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

@ -6,12 +6,11 @@
<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">
<el-dropdown v-if="isLogin" @visible-change="menuVisible = $event">
<div
class="wrap-content-login__info flex flex-middle flex-center"
:class="{ 'wrap-content-login__info--hover': menuVisible }"
>
<span>你好，{{ userInfo.name }}</span>
<img class="content-login-info__logo" :src="menuIcon" />
</div>
@ -31,6 +30,10 @@
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div v-else class="wrap-content-login__text flex">
<span>请先</span>
<span class="content-login-text--light">登录/注册</span>
</div>
</div>
<template>
<div v-if="!menuVisible" class="header-wrap-content--line"></div>
@ -64,7 +67,7 @@ const MENU_VALUE = {
export default {
data() {
return {
isLogin: false,
isLogin: true,
userInfo: {
name: "仙女广",
},
@ -148,13 +151,14 @@ export default {
.header-wrap__content {
.header-wrap-content__login {
.wrap-content-login__text {
padding: 0 18px;
.content-login-text--light {
margin-left: 6px;
color: #ff875b;
cursor: pointer;
}
}
.wrap-content-login__info:hover {
.wrap-content-login__info--hover {
background: #ffffff !important;
color: #ff875b;
}

234
layouts/module/header/index.vue
Unescape View File

@ -1,55 +1,89 @@
<template>
<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="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 class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
<template v-if="isSticky">
<div class="sticky-bar-header">
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
<div class="flex flex-middle">
<img
class="bar-header-wrap__logo"
src="@/static/images/layout/logo-sticky.png"
/>
<el-menu
:default-active="tabIndex"
mode="horizontal"
@select="handleTabSelect"
>
<el-menu-item
v-for="item in tabList"
:key="item.value"
:index="item.value"
>{{ item.label }}</el-menu-item
>
</el-menu>
</div>
<div class="bar-header-wrap__icons flex flex-middle">
<img src="@/static/images/layout/icon-search-sticky.png" />
<div class="header-wrap-icons__shop">
<img src="@/static/images/layout/icon-shop-sticky.png" />
<span class="">3</span>
</div>
<div class="header-wrap-icons__login">登录</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>
</template>
<template v-else>
<HeaderInfoBar />
<div class="default-bar-header">
<div class="bar-header-box">
<div class="bar-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="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 v-show="categrayHoverVisible">
</div>
</div>
<div class="bar-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 flex-middle"
>
<img />
<span>{{ item.name }}</span>
</div>
</div>
<div
v-show="categrayHoverVisible"
class="tab-category-menu__right flex flex-wrap"
@mouseenter="categrayHoverVisible = true"
@mouseleave="categrayHoverVisible = false"
>
<div
v-for="item in currentCategrayList"
@ -61,21 +95,22 @@
</div>
</div>
</div>
<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>
<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>
</template>
</div>
</template>
<script>
@ -94,19 +129,25 @@ const TAB_TYPE = {
export default {
name: "DefaultHeader",
components: { HeaderInfoBar },
props: {
isSticky: {
type: Boolean,
default: false,
},
},
data() {
return {
searchContent: "",
activityTab: TAB_TYPE.HOME,
tabIndex: TAB_TYPE.HOME,
tabList: [
{ label: "首页", value: TAB_TYPE.HOME, path: "/" },
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
],
categrayData: [],
categrayHoverVisible: false,
currentCategrayId: 0,
categrayData: [],
};
},
computed: {
@ -148,15 +189,84 @@ export default {
};
</script>
<style lang="scss" scoped>
.default-header {
.layout-sticky-bar-header {
height: 50px;
}
.sticky-bar-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
.sticky-bar-header__wrap {
width: 1200px;
height: 100%;
margin: 0 auto;
.bar-header-wrap__logo {
width: 164px;
height: 28px;
margin-right: 50px;
}
.bar-header-wrap__icons {
cursor: pointer;
img {
width: 23px;
height: 23px;
}
.header-wrap-icons__shop {
position: relative;
margin: 0 30px 0 14px;
img {
width: 30px;
}
span {
position: absolute;
right: -6px;
top: -4px;
display: block;
height: 14px;
padding: 0 2px;
line-height: 14px;
text-align: center;
background: #ff512b;
font-size: 10px;
color: #ffffff;
border-radius: 50%;
}
}
.header-wrap-icons__login {
font-size: 16px;
color: #909399;
}
}
/deep/ .el-menu {
height: 50px;
color: #666666;
.is-active {
color: #ff7f39;
border-bottom: 2px solid #ff823c;
}
.el-menu-item:hover {
color: #ff7f39;
}
.el-menu-item {
height: 100%;
line-height: 50px;
font-size: 16px;
margin: 0 20px;
}
}
}
}
.default-bar-header {
padding-top: 32px;
position: relative;
z-index: 3;
.default-header-box {
.bar-header-box {
width: 1200px;
margin: 0 auto;
background: #ffffff;
.default-header-box__wrap {
.bar-header-box__wrap {
height: 42px;
font-size: 14px;
margin-bottom: 38px;
@ -214,7 +324,7 @@ export default {
}
}
}
.default-header-box__tab {
.bar-header-box__tab {
height: 38px;
.header-box-tab__category {
position: relative;
@ -241,7 +351,7 @@ export default {
color: #333333;
.tab-category-menu__left {
width: 190px;
padding: 34px 0;
padding: 15px 0;
background: #ffffff;
.menu-left__item:hover {
color: #ff875b;

33
pages/index/module/Banner.vue
Unescape View File

@ -9,8 +9,12 @@
<template>
<div class="home-banner">
<el-carousel height="360px" indicator-position="outside">
<el-carousel-item v-for="item in bannerList" :key="item.id">
<el-image :src="item.picture"></el-image>
<el-carousel-item
v-for="item in bannerList"
:key="item.id"
@click="onBannerClick(item.id)"
>
<el-image :src="item.url" fit="fill"></el-image>
</el-carousel-item>
</el-carousel>
</div>
@ -22,16 +26,29 @@ export default {
return {
bannerList: [
{
picture:
"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
id: 13,
},
{
picture:
"https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/1.png",
id: 30,
},
{
url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/2banner.png",
id: 15,
},
{
url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/3banner.png",
id: 40,
},
],
};
},
methods: {
onBannerClick(goodsId) {
window.open(`${location.href}/detail/${goodsId}`);
},
},
};
</script>
<style lang="scss" scoped>
@ -46,6 +63,9 @@ export default {
width: 45px;
height: 45px;
}
.el-carousel__indicators {
display: none;
}
.el-carousel__arrow--left {
left: calc(50% - 380px) !important;
}
@ -54,6 +74,7 @@ export default {
}
.el-image {
width: 100%;
height: 100%;
}
}
}

BIN
static/images/layout/footer-1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
static/images/layout/footer-2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/images/layout/footer-3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
static/images/layout/footer-4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/images/layout/icon-login-sticky.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 B

BIN
static/images/layout/icon-search-sticky.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/images/layout/icon-shop-sticky.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

BIN
static/images/layout/logo-sticky.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

Write Preview
Loading…
Cancel
Save