优化了部分展示功能
parent
2213f0d0ce
commit
8529641145
|
@ -223,7 +223,6 @@ export default {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
border-left: 1px solid #ccc !important;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
<div class="person-msg">
|
<div class="person-msg" @click="entryControl({ path: 'home' })">
|
||||||
<img class="user-face" :src="userInfo.face || defaultAvatar" alt />
|
<img class="user-face" :src="userInfo.face || defaultAvatar" alt />
|
||||||
<div class="welcome">
|
<div class="welcome">
|
||||||
Hi, {{
|
Hi, {{
|
||||||
|
@ -27,7 +27,9 @@
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="userInfo.id">
|
<div v-if="userInfo.id">
|
||||||
<div class="icon-list flex flex-j-sb" >
|
<div class="icon-list"></div>
|
||||||
|
<!-- #TODO 后续增加 -->
|
||||||
|
<!-- <div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
|
||||||
<div class="value">
|
<div class="value">
|
||||||
{{ item.value}}
|
{{ item.value}}
|
||||||
|
@ -36,7 +38,7 @@
|
||||||
{{ item.label}}
|
{{ item.label}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="flex flex-a-c ">
|
<div v-else class="flex flex-a-c ">
|
||||||
<div class="btns" @click="$router.push('login')" shape="circle"
|
<div class="btns" @click="$router.push('login')" shape="circle"
|
||||||
|
@ -49,18 +51,18 @@
|
||||||
|
|
||||||
<div class="gray-line"></div>
|
<div class="gray-line"></div>
|
||||||
<div class="icon-list flex flex-j-sb" >
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item,index) in entranceList">
|
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item, index) in entranceList">
|
||||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
<div>
|
<div>
|
||||||
{{ item.label}}
|
{{ item.label }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon-list flex flex-j-sb" >
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in appendList">
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item, index) in appendList">
|
||||||
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
<div>
|
<div>
|
||||||
{{ item.label}}
|
{{ item.label }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,77 +87,77 @@ export default {
|
||||||
config: require("@/config"),
|
config: require("@/config"),
|
||||||
defaultAvatar: require("@/assets/images/default.png"),
|
defaultAvatar: require("@/assets/images/default.png"),
|
||||||
userInfo: {}, // 用户信息
|
userInfo: {}, // 用户信息
|
||||||
entranceList:[
|
entranceList: [
|
||||||
{
|
{
|
||||||
icon:"collage",
|
icon: "collage",
|
||||||
label:"宝贝收藏",
|
label: "宝贝收藏",
|
||||||
path:"/home/Favorites"
|
path: "/home/Favorites"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"shop",
|
icon: "shop",
|
||||||
label:"收藏店铺",
|
label: "收藏店铺",
|
||||||
path:"/home/Favorites?type=STORE"
|
path: "/home/Favorites?type=STORE"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"carts",
|
icon: "carts",
|
||||||
label:"购物车",
|
label: "购物车",
|
||||||
path:"/cart"
|
path: "/cart"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"story",
|
icon: "story",
|
||||||
label:"我的足迹",
|
label: "我的足迹",
|
||||||
path:"/home/MyTracks"
|
path: "/home/MyTracks"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
appendList:[
|
appendList: [
|
||||||
{
|
{
|
||||||
icon:"support",
|
icon: "support",
|
||||||
label:"帮助中心",
|
label: "帮助中心",
|
||||||
path:"/article"
|
path: "/article"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"feedback",
|
icon: "feedback",
|
||||||
label:"我的评论",
|
label: "我的评论",
|
||||||
path:"/home/CommentList"
|
path: "/home/CommentList"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"notice",
|
icon: "notice",
|
||||||
label:"收货地址",
|
label: "收货地址",
|
||||||
path:"/home/MyAddress"
|
path: "/home/MyAddress"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon:"notification",
|
icon: "notification",
|
||||||
label:"我的消息",
|
label: "我的消息",
|
||||||
path:"/home/MsgList"
|
path: "/home/MsgList"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
recentList:[
|
recentList: [
|
||||||
{
|
{
|
||||||
value:"0",
|
value: "0",
|
||||||
label:"购物车"
|
label: "购物车"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value:"0",
|
value: "0",
|
||||||
label:"待收货"
|
label: "待收货"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value:"0",
|
value: "0",
|
||||||
label:"待发货"
|
label: "待发货"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
value:"0",
|
value: "0",
|
||||||
label:"代付款"
|
label: "代付款"
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 快捷跳转中心
|
// 快捷跳转中心
|
||||||
entryControl(val){
|
entryControl(val) {
|
||||||
this.$router.push(val.path)
|
this.$router.push(val.path)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (storage.getItem("userInfo"))
|
if (storage.getItem("userInfo"))
|
||||||
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
||||||
|
|
||||||
|
@ -164,7 +166,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.label{
|
.label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
|
@ -173,24 +175,28 @@ export default {
|
||||||
|
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
.swiper-img{
|
|
||||||
|
.swiper-img {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 637px;
|
width: 637px;
|
||||||
height: 329.9px;
|
height: 329.9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-list{
|
.icon-list {
|
||||||
width: 216px
|
width: 216px
|
||||||
}
|
}
|
||||||
.icon-list:nth-last-of-type(1){
|
|
||||||
|
.icon-list:nth-last-of-type(1) {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.hot-box{
|
|
||||||
|
.hot-box {
|
||||||
margin-top: 35px;
|
margin-top: 35px;
|
||||||
width: 216px;
|
width: 216px;
|
||||||
|
|
||||||
}
|
}
|
||||||
.hot-tag{
|
|
||||||
|
.hot-tag {
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
@ -202,22 +208,26 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
.gray-line{
|
|
||||||
|
.gray-line {
|
||||||
width: 216px;
|
width: 216px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid #E5E5E5;
|
||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
}
|
}
|
||||||
.icon{
|
|
||||||
|
.icon {
|
||||||
width: 20px !important;
|
width: 20px !important;
|
||||||
height: 20px !important;
|
height: 20px !important;
|
||||||
margin-bottom: 7px;
|
margin-bottom: 7px;
|
||||||
}
|
}
|
||||||
.icon-item{
|
|
||||||
|
.icon-item {
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
>div{
|
|
||||||
|
>div {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 13px;
|
line-height: 13px;
|
||||||
|
@ -226,7 +236,8 @@ export default {
|
||||||
|
|
||||||
color: #666666;
|
color: #666666;
|
||||||
}
|
}
|
||||||
>.value{
|
|
||||||
|
>.value {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
|
@ -236,7 +247,8 @@ export default {
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
>.label{
|
|
||||||
|
>.label {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
|
@ -247,12 +259,14 @@ export default {
|
||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.model-carousel {
|
.model-carousel {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 340px;
|
height: 340px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.hover-pointer{
|
|
||||||
|
.hover-pointer {
|
||||||
//display: block;
|
//display: block;
|
||||||
//width: 100%;
|
//width: 100%;
|
||||||
//height: 100%;
|
//height: 100%;
|
||||||
|
@ -263,7 +277,8 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.welcome{
|
|
||||||
|
.welcome {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
|
@ -272,11 +287,13 @@ export default {
|
||||||
|
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
.hr{
|
|
||||||
|
.hr {
|
||||||
width: 216px;
|
width: 216px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
border: 1px solid #E5E5E5;
|
border: 1px solid #E5E5E5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
margin-top: 21px;
|
margin-top: 21px;
|
||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
|
@ -294,19 +311,22 @@ export default {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
background: $theme_color;
|
background: $theme_color;
|
||||||
}
|
}
|
||||||
.sign-up{
|
|
||||||
|
.sign-up {
|
||||||
background: #F39519;
|
background: #F39519;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
.avatar{
|
|
||||||
|
.avatar {
|
||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
}
|
}
|
||||||
.user-face{
|
|
||||||
|
|
||||||
margin-bottom: 12px;
|
.user-face {
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
margin-bottom: 12px;
|
||||||
border-radius: 50%;
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -342,6 +362,7 @@ export default {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-right {
|
.nav-right {
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
@ -350,7 +371,9 @@ export default {
|
||||||
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
|
||||||
.person-msg {
|
.person-msg {
|
||||||
|
cursor: pointer;
|
||||||
height: 333px;
|
height: 333px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -360,27 +383,33 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-msg {
|
.shop-msg {
|
||||||
div {
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 10px 27px;
|
margin: 10px 27px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(1) {
|
span:nth-child(1) {
|
||||||
@include content_color($theme_color);
|
@include content_color($theme_color);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(3):hover {
|
span:nth-child(3):hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -388,6 +417,7 @@ export default {
|
||||||
color: #999395;
|
color: #999395;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
>)
|
>)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Search :showTag="false" :showLogo="false"></Search>
|
|
||||||
</div>
|
</div>
|
||||||
<Divider />
|
<Divider />
|
||||||
<!-- 购物车主体 -->
|
<!-- 购物车主体 -->
|
||||||
|
@ -245,7 +245,7 @@
|
||||||
</div>
|
</div>
|
||||||
<Spin size="large" fix v-if="loading"></Spin>
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
</div>
|
</div>
|
||||||
<BaseFooter></BaseFooter>
|
<BaseFooter class="footer"></BaseFooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -449,6 +449,9 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.footer{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
/** logo 搜索 start **/
|
/** logo 搜索 start **/
|
||||||
.logo {
|
.logo {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
@ -781,4 +784,5 @@ export default {
|
||||||
.ivu-input-number-input {
|
.ivu-input-number-input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<BaseHeader></BaseHeader>
|
<BaseHeader></BaseHeader>
|
||||||
<Search @search="handleSearch"></Search>
|
<Search @search="handleSearch"></Search>
|
||||||
<drawer></drawer>
|
<drawer></drawer>
|
||||||
<cateNav useClass="background-white"></cateNav>
|
<cateNav class="cate-nav" useClass="background-white"></cateNav>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 商品筛选栏 -->
|
<!-- 商品筛选栏 -->
|
||||||
<GoodsClassNav @getParams="getParams"></GoodsClassNav>
|
<GoodsClassNav @getParams="getParams"></GoodsClassNav>
|
||||||
|
@ -261,7 +261,9 @@ export default {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "../assets/styles/goodsList.scss";
|
@import "../assets/styles/goodsList.scss";
|
||||||
|
.cate-nav{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
.goods-show-info > .goods-show-seller > .goods-show-buyer {
|
.goods-show-info > .goods-show-seller > .goods-show-buyer {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<BaseHeader></BaseHeader>
|
<BaseHeader></BaseHeader>
|
||||||
<Search></Search>
|
<Search></Search>
|
||||||
<cateNav></cateNav>
|
|
||||||
<!-- 添加成功提示 -->
|
<!-- 添加成功提示 -->
|
||||||
<div class="add-info-box-container">
|
<div class="add-info-box-container">
|
||||||
<div class="add-info-box">
|
<div class="add-info-box">
|
||||||
|
|
|
@ -300,25 +300,6 @@ export const modelData = [{
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: 'seckill-only-album',
|
|
||||||
name: '促销活动-图片版',
|
|
||||||
icon: 'md-image',
|
|
||||||
showName: '',
|
|
||||||
options: {
|
|
||||||
list: [{
|
|
||||||
time: 6,
|
|
||||||
goodsList: [{
|
|
||||||
img: require('@/assets/nav/1.jpg'),
|
|
||||||
|
|
||||||
url: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'discountAdvert',
|
type: 'discountAdvert',
|
||||||
name: '折扣广告',
|
name: '折扣广告',
|
||||||
|
|
Loading…
Reference in New Issue