pc端添加2个轮播代码,楼层装修跟pc端样式不一致,楼层装修无法添加的bug修改
parent
d104baf426
commit
cc80242896
|
@ -25,9 +25,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.model-content {
|
.model-content {
|
||||||
width: 1200px;
|
width: 100%;
|
||||||
margin: 0 auto;
|
|
||||||
// background: #fff;
|
|
||||||
min-height: 1200px;
|
min-height: 1200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,11 +2,17 @@
|
||||||
<div class="model-item" v-if="element && element.key">
|
<div class="model-item" v-if="element && element.key">
|
||||||
<!-- 轮播图模块,包括个人信息,快捷导航模块 -->
|
<!-- 轮播图模块,包括个人信息,快捷导航模块 -->
|
||||||
<template v-if="element.type == 'carousel'">
|
<template v-if="element.type == 'carousel'">
|
||||||
<model-carousel :data="element" class="mb_20"></model-carousel>
|
<model-carousel :data="element" class="mb_20 width_1200_auto"></model-carousel>
|
||||||
|
</template>
|
||||||
|
<template v-if="element.type == 'carousel1'">
|
||||||
|
<model-carousel1 :data="element" class="mb_20"></model-carousel1>
|
||||||
|
</template>
|
||||||
|
<template v-if="element.type == 'carousel2'">
|
||||||
|
<model-carousel2 :data="element" class="mb_20 width_1200_auto"></model-carousel2>
|
||||||
</template>
|
</template>
|
||||||
<!-- 热门广告 -->
|
<!-- 热门广告 -->
|
||||||
<template v-if="element.type == 'hotAdvert'">
|
<template v-if="element.type == 'hotAdvert'">
|
||||||
<div class="mb_20">
|
<div class="mb_20 width_1200_auto">
|
||||||
<img
|
<img
|
||||||
style="display: block"
|
style="display: block"
|
||||||
class="hover-pointer"
|
class="hover-pointer"
|
||||||
|
@ -16,7 +22,7 @@
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ul class="advert-list">
|
<ul class="advert-list width_1200_auto">
|
||||||
<template v-for="(item, index) in element.options.list">
|
<template v-for="(item, index) in element.options.list">
|
||||||
<li
|
<li
|
||||||
v-if="index !== 0"
|
v-if="index !== 0"
|
||||||
|
@ -31,12 +37,12 @@
|
||||||
</template>
|
</template>
|
||||||
<!-- 限时秒杀 待完善 -->
|
<!-- 限时秒杀 待完善 -->
|
||||||
<template v-if="element.type == 'seckill' && element.options.list.length">
|
<template v-if="element.type == 'seckill' && element.options.list.length">
|
||||||
<seckill :data="element" class="mb_20"></seckill>
|
<seckill :data="element" class="mb_20 width_1200_auto"></seckill>
|
||||||
</template>
|
</template>
|
||||||
<!-- 折扣广告 -->
|
<!-- 折扣广告 -->
|
||||||
<template v-if="element.type == 'discountAdvert'">
|
<template v-if="element.type == 'discountAdvert'">
|
||||||
<div
|
<div
|
||||||
class="discountAdvert mb_20"
|
class="discountAdvert"
|
||||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
@ -64,15 +70,15 @@
|
||||||
|
|
||||||
<!-- 好货推荐 -->
|
<!-- 好货推荐 -->
|
||||||
<template v-if="element.type == 'recommend'">
|
<template v-if="element.type == 'recommend'">
|
||||||
<recommend :data="element" class="mb_20"></recommend>
|
<recommend :data="element" class="mb_20 width_1200_auto"></recommend>
|
||||||
</template>
|
</template>
|
||||||
<!-- 新品排行 -->
|
<!-- 新品排行 -->
|
||||||
<template v-if="element.type == 'newGoodsSort'">
|
<template v-if="element.type == 'newGoodsSort'">
|
||||||
<new-goods-sort :data="element" class="mb_20"></new-goods-sort>
|
<new-goods-sort :data="element" class="mb_20 width_1200_auto"></new-goods-sort>
|
||||||
</template>
|
</template>
|
||||||
<!-- 首页广告 -->
|
<!-- 首页广告 -->
|
||||||
<template v-if="element.type == 'firstAdvert'">
|
<template v-if="element.type == 'firstAdvert'">
|
||||||
<first-page-advert :data="element" class="mb_20"></first-page-advert>
|
<first-page-advert :data="element" class="mb_20 width_1200_auto"></first-page-advert>
|
||||||
</template>
|
</template>
|
||||||
<!-- 横幅广告 -->
|
<!-- 横幅广告 -->
|
||||||
<template v-if="element.type == 'bannerAdvert'">
|
<template v-if="element.type == 'bannerAdvert'">
|
||||||
|
@ -85,13 +91,15 @@
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<template v-if="element.type == 'notEnough'">
|
<template v-if="element.type == 'notEnough'">
|
||||||
<not-enough :data="element" class="mb_20"></not-enough>
|
<not-enough :data="element" class="mb_20 width_1200_auto"></not-enough>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import ModelCarousel from './modelList/Carousel.vue';
|
import ModelCarousel from './modelList/Carousel.vue';
|
||||||
|
import ModelCarousel1 from './modelList/Carousel1.vue';
|
||||||
|
import ModelCarousel2 from './modelList/Carousel2.vue';
|
||||||
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
||||||
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
||||||
import Recommend from './modelList/Recommend.vue';
|
import Recommend from './modelList/Recommend.vue';
|
||||||
|
@ -103,6 +111,8 @@ export default {
|
||||||
props: ['element', 'select', 'index', 'data'],
|
props: ['element', 'select', 'index', 'data'],
|
||||||
components: {
|
components: {
|
||||||
ModelCarousel,
|
ModelCarousel,
|
||||||
|
ModelCarousel1,
|
||||||
|
ModelCarousel2,
|
||||||
Recommend,
|
Recommend,
|
||||||
NewGoodsSort,
|
NewGoodsSort,
|
||||||
FirstPageAdvert,
|
FirstPageAdvert,
|
||||||
|
@ -118,9 +128,9 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.model-item {
|
.model-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: #fff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 热门广告 */
|
/** 热门广告 */
|
||||||
|
@ -153,10 +163,13 @@ export default {
|
||||||
}
|
}
|
||||||
/** 折扣广告 */
|
/** 折扣广告 */
|
||||||
.discountAdvert {
|
.discountAdvert {
|
||||||
|
width: 1300px;
|
||||||
height: 566px;
|
height: 566px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
margin-left: -97px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
left: -47px;
|
||||||
padding-left: 295px;
|
padding-left: 295px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
@ -171,104 +184,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/** 首页品牌 */
|
|
||||||
.brand {
|
|
||||||
.brand-view {
|
|
||||||
display: flex;
|
|
||||||
margin-top: 10px;
|
|
||||||
.brand-view-content {
|
|
||||||
width: 470px;
|
|
||||||
margin-left: 10px;
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: 316px;
|
|
||||||
}
|
|
||||||
.brand-view-title {
|
|
||||||
height: 50px;
|
|
||||||
padding: 0 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brand-view-content:first-child {
|
|
||||||
width: 240px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brand-list {
|
|
||||||
margin-top: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
li {
|
|
||||||
width: 121px;
|
|
||||||
height: 112px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #f5f5f5;
|
|
||||||
margin: -1px -1px 0 0;
|
|
||||||
&:hover {
|
|
||||||
.brand-mash {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brand-img {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
img {
|
|
||||||
width: 100px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.brand-mash {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
width: inherit;
|
|
||||||
height: inherit;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
.ivu-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
div:last-child {
|
|
||||||
background-color: $theme_color;
|
|
||||||
border-radius: 9px;
|
|
||||||
padding: 0 10px;
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.refresh {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.ivu-icon {
|
|
||||||
font-size: 18px;
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: $theme_color;
|
|
||||||
color: #fff;
|
|
||||||
.ivu-icon {
|
|
||||||
transform: rotateZ(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 装修模态框 内部样式start */
|
/** 装修模态框 内部样式start */
|
||||||
.modal-top-advert {
|
.modal-top-advert {
|
||||||
|
@ -280,4 +195,9 @@ export default {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.width_1200_auto{
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-carousel1" :style="{background: bgColor}">
|
||||||
|
<div class="nav-body clearfix">
|
||||||
|
<!-- 侧边导航 -->
|
||||||
|
<div class="nav-side"></div>
|
||||||
|
<div class="nav-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay @on-change="autoChange">
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index" >
|
||||||
|
<div style="overflow: hidden">
|
||||||
|
<img :src="item.img" width="1200" height="470" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'modelCarousel1',
|
||||||
|
props: ['data'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: null, // 已选数据
|
||||||
|
picModelFlag: false, // 选择图片modal
|
||||||
|
bgColor: '#fff' // 轮播背景色
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.bgColor = this.data.options.list[0].bgColor
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 自动切换时改变背景色
|
||||||
|
autoChange (oVal, val) {
|
||||||
|
this.bgColor = this.data.options.list[val].bgColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.model-carousel1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 470px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*大的导航信息,包含导航,幻灯片等*/
|
||||||
|
.nav-body {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.nav-side {
|
||||||
|
height: 470px;
|
||||||
|
width: 200px;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 470px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*导航内容*/
|
||||||
|
.nav-content {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,211 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-carousel2">
|
||||||
|
<div class="nav-body clearfix">
|
||||||
|
<!-- 侧边导航 -->
|
||||||
|
<div class="nav-side"></div>
|
||||||
|
<div class="nav-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay>
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<div style="overflow: hidden">
|
||||||
|
<img :src="item.img" width="590" height="470" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
<div class="nav-content1">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay :autoplay-speed="5000">
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
|
||||||
|
<div class="mb_10">
|
||||||
|
<img :src="item[0].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
<div class="mb_10">
|
||||||
|
<img :src="item[1].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img :src="item[2].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<div class="person-msg">
|
||||||
|
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||||
|
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||||
|
<div>Hi,{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
|
||||||
|
<div v-if="userInfo.id">
|
||||||
|
<Button type="error" shape="circle">会员中心</Button>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<Button type="error" shape="circle">请登录</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shop-msg">
|
||||||
|
<div>
|
||||||
|
<span>常见问题</span>
|
||||||
|
<ul class="article-list">
|
||||||
|
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||||
|
{{article.title}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {articleList} from '@/api/common.js'
|
||||||
|
import storage from '@/plugins/storage';
|
||||||
|
export default {
|
||||||
|
name: 'modelCarousel2',
|
||||||
|
props: ['data'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
userInfo: {}, // 用户信息
|
||||||
|
articleList: [], // 常见问题
|
||||||
|
params: { // 请求常见问题参数
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
type: 'ANNOUNCEMENT',
|
||||||
|
sort: 'sort'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getArticleList () { // 获取常见问题列表
|
||||||
|
articleList(this.params).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.articleList = res.result.records
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
goArticle (id) { // 跳转文章详情
|
||||||
|
let routeUrl = this.$router.resolve({
|
||||||
|
path: '/article',
|
||||||
|
query: {id}
|
||||||
|
});
|
||||||
|
window.open(routeUrl.href, '_blank');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
||||||
|
this.getArticleList()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.model-carousel2 {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item li {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.nav-item a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.nav-item a:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
/*大的导航信息,包含导航,幻灯片等*/
|
||||||
|
.nav-body {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.nav-side {
|
||||||
|
height: 100%;
|
||||||
|
width: 200px;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
float: left;
|
||||||
|
background-color: #6e6568;
|
||||||
|
line-height: 470px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*导航内容*/
|
||||||
|
.nav-content,.nav-content1 {
|
||||||
|
width: 590px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.nav-content1{
|
||||||
|
width: 190px;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
float: left;
|
||||||
|
width: 190px;
|
||||||
|
margin-left: 10px;
|
||||||
|
.person-msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: 25px !important;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-btn-default {
|
||||||
|
color: $theme_color;
|
||||||
|
border-color: $theme_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop-msg {
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 27px;
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
span:nth-child(1) {
|
||||||
|
@include content_color($theme_color);
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
span:nth-child(3):hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 5px 0;
|
||||||
|
color: #999395;
|
||||||
|
width: 150px;
|
||||||
|
font-size: 12px;
|
||||||
|
&:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -4,7 +4,6 @@
|
||||||
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
|
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
|
||||||
<ul class="nav-item" v-if="showNavBar">
|
<ul class="nav-item" v-if="showNavBar">
|
||||||
<li
|
<li
|
||||||
class="hover-color"
|
|
||||||
v-for="(item, index) in navList.list"
|
v-for="(item, index) in navList.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="linkTo(item.url)"
|
@click="linkTo(item.url)"
|
||||||
|
@ -16,7 +15,7 @@
|
||||||
<!-- 全部商品分类 -->
|
<!-- 全部商品分类 -->
|
||||||
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
|
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
|
||||||
<!-- 第一级分类 -->
|
<!-- 第一级分类 -->
|
||||||
<div class="nav-side" @mouseleave="panel = false">
|
<div class="nav-side" :class="{'large-nav': large, 'opacity-nav': opacity}" @mouseleave="panel = false">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
|
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
|
||||||
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
|
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
|
||||||
|
@ -30,6 +29,7 @@
|
||||||
<!-- 展开分类 -->
|
<!-- 展开分类 -->
|
||||||
<div
|
<div
|
||||||
class="detail-item-panel"
|
class="detail-item-panel"
|
||||||
|
:style="{'minHeight': large?'470px':'340px'}"
|
||||||
v-show="panel"
|
v-show="panel"
|
||||||
@mouseenter="panel = true"
|
@mouseenter="panel = true"
|
||||||
@mouseleave="panel = false"
|
@mouseleave="panel = false"
|
||||||
|
@ -77,6 +77,14 @@ export default {
|
||||||
hover: {
|
hover: {
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean
|
||||||
|
},
|
||||||
|
large: { // 是否更高的高度
|
||||||
|
default: false,
|
||||||
|
type: Boolean
|
||||||
|
},
|
||||||
|
opacity: { // 是否背景透明
|
||||||
|
default: false,
|
||||||
|
type: Boolean
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
@ -156,7 +164,6 @@ export default {
|
||||||
.nav-con {
|
.nav-con {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
// background: #eee;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
.all-categories {
|
.all-categories {
|
||||||
|
@ -176,7 +183,7 @@ export default {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
display: flex;
|
display: flex;
|
||||||
li {
|
li {
|
||||||
font-size: 16px;
|
float: left;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
color: rgb(89, 88, 88);
|
color: rgb(89, 88, 88);
|
||||||
|
@ -187,24 +194,12 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 分类列表
|
||||||
.cate-list{
|
.cate-list{
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
.nav-item li {
|
|
||||||
float: left;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: bold;
|
|
||||||
margin-left: 30px;
|
|
||||||
}
|
|
||||||
.nav-item a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: #555555;
|
|
||||||
}
|
|
||||||
.nav-item a:hover {
|
|
||||||
color: $theme_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-side {
|
.nav-side {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
@ -215,6 +210,15 @@ export default {
|
||||||
height: 335px;
|
height: 335px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.large-nav{
|
||||||
|
height: 470px;
|
||||||
|
ul>li{
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.opacity-nav{
|
||||||
|
background-color:rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
.nav-side ul {
|
.nav-side ul {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
@ -226,9 +230,9 @@ export default {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
&:hover{
|
||||||
.nav-side li:hover {
|
background: #999395;
|
||||||
background: #999395;
|
}
|
||||||
}
|
}
|
||||||
.nav-side-item:hover {
|
.nav-side-item:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -237,7 +241,7 @@ export default {
|
||||||
|
|
||||||
/*显示商品详细信息*/
|
/*显示商品详细信息*/
|
||||||
.detail-item-panel {
|
.detail-item-panel {
|
||||||
width: 815px;
|
width: 1000px;
|
||||||
min-height: 340px;
|
min-height: 340px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0px 0px 15px #ccc;
|
box-shadow: 0px 0px 15px #ccc;
|
||||||
|
@ -265,7 +269,6 @@ export default {
|
||||||
}
|
}
|
||||||
.detail-item-panel li {
|
.detail-item-panel li {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
// margin-left: 40px;
|
|
||||||
}
|
}
|
||||||
.detail-item-title {
|
.detail-item-title {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
<!-- 搜索框、logo -->
|
<!-- 搜索框、logo -->
|
||||||
<Search></Search>
|
<Search></Search>
|
||||||
<!-- 商品分类 -->
|
<!-- 商品分类 -->
|
||||||
<cateNav :showAlways="true" v-if="showNav"></cateNav>
|
<cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
|
||||||
<!-- 楼层装修部分 -->
|
<!-- 楼层装修部分 -->
|
||||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
<!-- 底部栏 -->
|
<!-- 底部栏 -->
|
||||||
|
@ -44,7 +44,9 @@ export default {
|
||||||
modelForm: { list: [] }, // 楼层装修数据
|
modelForm: { list: [] }, // 楼层装修数据
|
||||||
topAdvert: {}, // 顶部广告
|
topAdvert: {}, // 顶部广告
|
||||||
showNav: false, // 是否展示分类栏
|
showNav: false, // 是否展示分类栏
|
||||||
topSearchShow: false // 滚动后顶部搜索栏展示
|
topSearchShow: false, // 滚动后顶部搜索栏展示
|
||||||
|
carouselLarge: false, // 不同轮播分类尺寸
|
||||||
|
carouselOpacity: false // 不同轮播分类样式
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -53,15 +55,21 @@ export default {
|
||||||
indexData({ clientType: 'PC' }).then((res) => {
|
indexData({ clientType: 'PC' }).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
let dataJson = JSON.parse(res.result.pageData);
|
let dataJson = JSON.parse(res.result.pageData);
|
||||||
this.modelForm = dataJson;
|
|
||||||
// 秒杀活动不是装修的数据,需要调用接口判断是否有秒杀商品
|
// 秒杀活动不是装修的数据,需要调用接口判断是否有秒杀商品
|
||||||
|
// 轮播图根据不同轮播,样式不同
|
||||||
for (let i = 0; i < dataJson.list.length; i++) {
|
for (let i = 0; i < dataJson.list.length; i++) {
|
||||||
if (dataJson.list[i].type === 'seckill') {
|
let type = dataJson.list[i].type
|
||||||
|
if (type === 'carousel2') {
|
||||||
|
this.carouselLarge = true;
|
||||||
|
} else if (type === 'carousel1') {
|
||||||
|
this.carouselLarge = true
|
||||||
|
this.carouselOpacity = true
|
||||||
|
} else if (type === 'seckill') {
|
||||||
let seckill = this.getListByDay()
|
let seckill = this.getListByDay()
|
||||||
dataJson.list[i].options.list = seckill
|
dataJson.list[i].options.list = seckill
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.modelForm = dataJson;
|
||||||
storage.setItem('navList', dataJson.list[1])
|
storage.setItem('navList', dataJson.list[1])
|
||||||
this.showNav = true
|
this.showNav = true
|
||||||
this.topAdvert = dataJson.list[0];
|
this.topAdvert = dataJson.list[0];
|
||||||
|
|
|
@ -24,8 +24,8 @@
|
||||||
<div class="goodsBuy">
|
<div class="goodsBuy">
|
||||||
<Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)" v-if="params.type === 'GOODS'">立即购买</Button>
|
<Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)" v-if="params.type === 'GOODS'">立即购买</Button>
|
||||||
<Button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</Button>
|
<Button size="small" type="primary" @click="goShop(item.id)" v-else>店铺购买</Button>
|
||||||
<Button size="small" type="error" ghost v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</Button>
|
<Button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)">取消收藏</Button>
|
||||||
<Button size="small" type="error" ghost v-if="params.type === 'SHOP'" @click="cancel(item.id)">取消收藏</Button>
|
<Button size="small" v-if="params.type === 'SHOP'" @click="cancel(item.id)">取消收藏</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -43,7 +43,6 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
type: "multiple", //单选或者多选 single multiple
|
type: "multiple", //单选或者多选 single multiple
|
||||||
|
|
||||||
skuList: [], // 商品sku列表
|
skuList: [], // 商品sku列表
|
||||||
total: 0, // 商品总数
|
total: 0, // 商品总数
|
||||||
goodsParams: { // 商品请求参数
|
goodsParams: { // 商品请求参数
|
||||||
|
@ -115,10 +114,9 @@ export default {
|
||||||
res.result.records.forEach((item) => {
|
res.result.records.forEach((item) => {
|
||||||
item.selected = false;
|
item.selected = false;
|
||||||
item.___type = "goods"; //设置为goods让pc wap知道标识
|
item.___type = "goods"; //设置为goods让pc wap知道标识
|
||||||
|
|
||||||
this.selectedWay.forEach(e => {
|
this.selectedWay.forEach(e => {
|
||||||
if (e.id === item.id) {
|
if (e.id === item.id) {
|
||||||
item.selected = true
|
item.selected = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-con">
|
<div class="header-con">
|
||||||
<div><Icon type="md-pin" />北京</div>
|
<div></div>
|
||||||
<ul class="detail">
|
<ul class="detail">
|
||||||
<!-- <li>切换主题</li> -->
|
<li>立即注册</li>
|
||||||
<li>请登录</li>
|
<li>请登录</li>
|
||||||
<li>我的订单</li>
|
<li>我的订单</li>
|
||||||
<li>我的足迹</li>
|
<li>我的足迹</li>
|
||||||
|
|
|
@ -20,24 +20,25 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
<div class="person-msg">
|
<div class="person-msg">
|
||||||
<img src="../../../assets/play.png" alt />
|
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||||
<div>Hi,欢迎来到LiLi Shop</div>
|
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||||
<div>
|
<div>Hi,{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
|
||||||
<Button type="error" shape="circle">请登录</Button>
|
<div v-if="userInfo.id">
|
||||||
<Button size="small" shape="circle">我要开店</Button>
|
<Button type="error" shape="circle">会员中心</Button>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<Button type="error" shape="circle">请登录</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-msg">
|
<div class="shop-msg">
|
||||||
<div>
|
<div>
|
||||||
<span>店铺信息</span>
|
<span>常见问题</span>
|
||||||
<span>|</span>
|
<ul class="article-list">
|
||||||
<span>网站帮助分类</span>
|
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||||
|
{{article.title}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
|
||||||
<li>免责条款</li>
|
|
||||||
<li>联系我们</li>
|
|
||||||
<li>咨询热点</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -131,6 +132,13 @@ export default {
|
||||||
showModal: false, // modal显隐
|
showModal: false, // modal显隐
|
||||||
selected: null, // 已选数据
|
selected: null, // 已选数据
|
||||||
picModelFlag: false, // 选择图片modal
|
picModelFlag: false, // 选择图片modal
|
||||||
|
userInfo:{},
|
||||||
|
articleList:[
|
||||||
|
{title:'促销计算规则'},
|
||||||
|
{title:'商家申请开店'},
|
||||||
|
{title:'商家账号注册'},
|
||||||
|
{title:'促销计算规则'}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 操作按钮 -->
|
<!-- 操作按钮 -->
|
||||||
<div class="btn-bar">
|
<div class="btn-bar">
|
||||||
<Button type="primary" @click="saveTemplate">保存模板</Button>
|
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
|
||||||
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -38,6 +38,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
modelData, // 可选模块数据
|
modelData, // 可选模块数据
|
||||||
modelForm: { list: [] }, // 模板数据
|
modelForm: { list: [] }, // 模板数据
|
||||||
|
submitLoading: false, // 提交加载状态
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -47,15 +48,17 @@ export default {
|
||||||
},
|
},
|
||||||
// 提交模板
|
// 提交模板
|
||||||
submitTemplate(pageShow) {
|
submitTemplate(pageShow) {
|
||||||
this.modelForm.list.unshift(this.$refs.modelForm.navList);
|
this.submitLoading = true
|
||||||
this.modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||||
const modelForm = JSON.stringify(this.modelForm);
|
modelForm.list.unshift(this.$refs.modelForm.navList);
|
||||||
|
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
||||||
const data = {
|
const data = {
|
||||||
id: this.$route.query.id,
|
id: this.$route.query.id,
|
||||||
pageData: modelForm,
|
pageData: JSON.stringify(modelForm),
|
||||||
pageShow
|
pageShow
|
||||||
};
|
};
|
||||||
API_floor.updateHome(this.$route.query.id, data).then((res) => {
|
API_floor.updateHome(this.$route.query.id, data).then((res) => {
|
||||||
|
this.submitLoading = false
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$Message.success("保存模板成功");
|
this.$Message.success("保存模板成功");
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,4 @@
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "@/styles/tree-common.scss";
|
|
||||||
.desc{
|
|
||||||
font-size: 12px;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<Card>
|
<Card>
|
||||||
|
@ -130,7 +124,6 @@
|
||||||
@click="submitEdit"
|
@click="submitEdit"
|
||||||
:loading="submitLoading"
|
:loading="submitLoading"
|
||||||
type="primary"
|
type="primary"
|
||||||
icon="ios-create-outline"
|
|
||||||
>保存
|
>保存
|
||||||
</Button
|
</Button
|
||||||
>
|
>
|
||||||
|
@ -232,6 +225,7 @@ import {
|
||||||
addPermission,
|
addPermission,
|
||||||
editPermission,
|
editPermission,
|
||||||
deletePermission,
|
deletePermission,
|
||||||
|
searchPermission,
|
||||||
} from "@/api/index";
|
} from "@/api/index";
|
||||||
import util from "@/libs/util.js";
|
import util from "@/libs/util.js";
|
||||||
|
|
||||||
|
@ -436,6 +430,20 @@ export default {
|
||||||
this.cancelEdit();
|
this.cancelEdit();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 搜索菜单
|
||||||
|
search() {
|
||||||
|
if (this.searchKey) {
|
||||||
|
this.loading = true;
|
||||||
|
searchPermission({title: this.searchKey}).then((res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.data = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.getAllList();
|
||||||
|
}
|
||||||
|
},
|
||||||
// 取消选择
|
// 取消选择
|
||||||
cancelEdit() {
|
cancelEdit() {
|
||||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||||
|
@ -591,3 +599,10 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/styles/tree-common.scss";
|
||||||
|
.desc{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -45,12 +45,20 @@
|
||||||
</Row>
|
</Row>
|
||||||
<div class="oss-operation padding-row">
|
<div class="oss-operation padding-row">
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Upload
|
||||||
@click="uploadVisible = true"
|
style="display:inline-block;"
|
||||||
type="primary"
|
:action="baseUrl + '/common/upload/file'"
|
||||||
>上传文件
|
:headers="accessToken"
|
||||||
</Button
|
:on-success="handleSuccess"
|
||||||
|
:on-error="handleError"
|
||||||
|
:show-upload-list="false"
|
||||||
|
:max-size="1024"
|
||||||
|
:on-exceeded-size="handleMaxSize"
|
||||||
|
multiple
|
||||||
|
ref="up"
|
||||||
>
|
>
|
||||||
|
<Button type="primary">上传文件</Button>
|
||||||
|
</Upload>
|
||||||
<Dropdown @on-click="handleDropdown">
|
<Dropdown @on-click="handleDropdown">
|
||||||
<Button>
|
<Button>
|
||||||
更多操作
|
更多操作
|
||||||
|
@ -181,28 +189,7 @@
|
||||||
</Row>
|
</Row>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Drawer title="文件上传" class="drawer" styles="z-index:2000;" closable v-model="uploadVisible" width="500">
|
|
||||||
<Upload
|
|
||||||
:action="baseUrl + '/common/upload/file'"
|
|
||||||
:headers="accessToken"
|
|
||||||
:on-success="handleSuccess"
|
|
||||||
:on-error="handleError"
|
|
||||||
:max-size="1024"
|
|
||||||
:on-exceeded-size="handleMaxSize"
|
|
||||||
multiple
|
|
||||||
type="drag"
|
|
||||||
ref="up"
|
|
||||||
|
|
||||||
>
|
|
||||||
<div style="padding: 20px 0">
|
|
||||||
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
|
|
||||||
<p>点击这里或将文件拖拽到这里上传</p>
|
|
||||||
</div>
|
|
||||||
</Upload>
|
|
||||||
<div class="drawer-footer">
|
|
||||||
<Button @click="clearFiles">清空上传列表</Button>
|
|
||||||
</div>
|
|
||||||
</Drawer>
|
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
:title="modalTitle"
|
:title="modalTitle"
|
||||||
|
@ -497,7 +484,7 @@ export default {
|
||||||
"Button",
|
"Button",
|
||||||
{
|
{
|
||||||
props: {
|
props: {
|
||||||
type: "primary",
|
type: "info",
|
||||||
size: "small",
|
size: "small",
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
|
@ -517,6 +504,7 @@ export default {
|
||||||
{
|
{
|
||||||
props: {
|
props: {
|
||||||
size: "small",
|
size: "small",
|
||||||
|
type: 'success'
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
marginRight: "5px",
|
marginRight: "5px",
|
||||||
|
|
Loading…
Reference in New Issue