邓洁 : 接口对接完成,菜单切换等编写完成 #18
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="aboutUs">
|
||||
<el-row style="">
|
||||
<el-row>
|
||||
<el-row>
|
||||
<div class="about_title">
|
||||
<h2>关于我们</h2>
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
</el-row>
|
||||
<el-row :gutter="10" style="padding: 0 5% ">
|
||||
<el-col :span="8" v-for="(imgTextItem,imgTextIndex) in imgTextList" :key="imgTextIndex"
|
||||
:class="'culture_'+imgTextIndex">
|
||||
<div class="imgAndText">
|
||||
:class="'culture_'+imgTextIndex" >
|
||||
<div class="imgAndText" @click="handleChangeMenu(imgTextItem)">
|
||||
<a :href="imgTextItem.href">
|
||||
<span class="pic">
|
||||
<img :src="imgTextItem.src" alt=""/>
|
||||
|
|
@ -48,6 +48,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getArticleInfo} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "AboutUs",
|
||||
data() {
|
||||
|
|
@ -77,26 +79,46 @@ export default {
|
|||
],
|
||||
imgTextList: [
|
||||
{
|
||||
href: '',
|
||||
id: '',
|
||||
src: require('../assets/index/a1.jpg'),
|
||||
boldText: 'Brand',
|
||||
enText: 'culture',
|
||||
cnTitle: '品牌文化'
|
||||
cnTitle: ''
|
||||
}, {
|
||||
href: '',
|
||||
id: '',
|
||||
src: require('../assets/index/a2.jpg'),
|
||||
boldText: 'Enterprise',
|
||||
enText: 'viewpoint',
|
||||
cnTitle: '企业观点'
|
||||
cnTitle: ''
|
||||
}, {
|
||||
href: '',
|
||||
id: '',
|
||||
src: require('../assets/index/a3.jpg'),
|
||||
boldText: 'corporate',
|
||||
enText: 'culture',
|
||||
cnTitle: '企业文化'
|
||||
cnTitle: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getArticleInfo(1).then(res => {
|
||||
this.imgTextList[0].id = res.data.articlelist[1].id;
|
||||
this.imgTextList[1].id = res.data.articlelist[2].id;
|
||||
this.imgTextList[2].id = res.data.articlelist[3].id;
|
||||
this.imgTextList[0].cnTitle = res.data.articlelist[1].title;
|
||||
this.imgTextList[1].cnTitle = res.data.articlelist[2].title;
|
||||
this.imgTextList[2].cnTitle = res.data.articlelist[3].title;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleChangeMenu(imgTextItem) {
|
||||
this.$router.push({
|
||||
path: "/about_us", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: imgTextItem.id,
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -117,7 +139,7 @@ export default {
|
|||
.aboutUs {
|
||||
min-width: 1300px;
|
||||
width: 1360px;
|
||||
margin: 0 auto 50px auto;
|
||||
margin: 60px auto 50px auto;
|
||||
|
||||
.about_title {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<ul>
|
||||
<li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
|
||||
@mouseenter="changeFinds(moduleIndex)">
|
||||
<a :href="moduleItem.href">
|
||||
<a :href="moduleItem.href" >
|
||||
<span>
|
||||
<img :src="moduleItem.src" alt=""/>
|
||||
</span>
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
</div>
|
||||
<div style="border-bottom: 1px solid #e9e9e9;">
|
||||
<div class="classify" v-if="findIndex===0">
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
|
||||
{{ childrenItem.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="classify" v-else>
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex" @click.stop="handleChangeMenu(childrenItem)">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -95,6 +95,15 @@ export default {
|
|||
this.findList = res.data.style_list;
|
||||
});
|
||||
}
|
||||
},
|
||||
handleChangeMenu(childrenItem) {
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: childrenItem.id,
|
||||
menuTitle:childrenItem.title//前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<div class="news_right">
|
||||
<div class="classify">
|
||||
<ul>
|
||||
<li v-for="(item,index) in classifyList" :key="index">
|
||||
<li v-for="(item,index) in classifyList" :key="index" @click="handleChangeMenu(item)">
|
||||
<a :href="item.href">{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -31,13 +31,13 @@
|
|||
<ul>
|
||||
<li v-for="(item,index) in itemList" :key="index">
|
||||
<div class="pics">
|
||||
<a :href="item.href">
|
||||
<a :href="item.href" @click="handleToDetail(item)">
|
||||
<img :src="item.image" alt=""/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a :href="item.href">{{ item.title }}</a>
|
||||
<a :href="item.href" @click="handleToDetail(item)">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="smy">{{ item.synopsis }}</div>
|
||||
<div class="dates">发布时间：{{ item.create_time }}</div>
|
||||
|
|
@ -61,14 +61,13 @@ export default {
|
|||
news_summary: "坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。",
|
||||
classifyList: [
|
||||
{
|
||||
href: "/news",
|
||||
id: 5,
|
||||
title: "公司新闻"
|
||||
},
|
||||
{
|
||||
href: "",
|
||||
}, {
|
||||
id: 6,
|
||||
title: "行业动态"
|
||||
}, {
|
||||
href: "",
|
||||
id: 7,
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
],
|
||||
|
|
@ -83,6 +82,24 @@ export default {
|
|||
}).then(res => {
|
||||
this.itemList = res.data.list;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
handleChangeMenu(item){
|
||||
this.$router.push({
|
||||
path: "/news", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: item.id,
|
||||
}
|
||||
});
|
||||
},
|
||||
handleToDetail(item){
|
||||
this.$router.push({
|
||||
path: "/news", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menuDetail: item.id,
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<span class="info">{{ item.create_time }}</span>
|
||||
</div>
|
||||
<!--形象展示放大 -->
|
||||
<div v-if="type===22">
|
||||
<div v-if="type===22" style="display: inline-block">
|
||||
<div class="bigImg">
|
||||
<el-image
|
||||
:src="item.image">
|
||||
|
|
@ -36,6 +36,19 @@
|
|||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-show="showMask">
|
||||
<div class="mask">
|
||||
</div>
|
||||
<div class="mask_pic">
|
||||
<div class="pic_bgc">
|
||||
<div>
|
||||
<i class="el-icon-close close" @click="closeMask"></i>
|
||||
<img :src="mask_pic" alt=""/>
|
||||
</div>
|
||||
<span class="mask_info">{{ mask_title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,7 +66,11 @@ export default {
|
|||
newsItem: String
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
showMask: false,
|
||||
mask_pic: "",
|
||||
mask_title: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
|
@ -70,8 +87,13 @@ export default {
|
|||
} else if (this.type == 11) {
|
||||
this.$emit("getNewsIdClick", item.id);
|
||||
} else if (this.type == 22) {
|
||||
console.log("图片放大");
|
||||
this.showMask = true;
|
||||
this.mask_pic = item.image;
|
||||
this.mask_title = item.title;
|
||||
}
|
||||
},
|
||||
closeMask() {
|
||||
this.showMask = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -99,6 +121,59 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.mask {
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
z-index: 990;
|
||||
}
|
||||
|
||||
.mask_pic {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 991333;
|
||||
opacity: 1;
|
||||
|
||||
.pic_bgc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 35px 15px 10px 15px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mask_info {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bigImg {
|
||||
height: 270px;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@
|
|||
</div>
|
||||
<div class="grid_right">
|
||||
<ul>
|
||||
<li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
|
||||
<a :href="picItem.href">
|
||||
<li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src"
|
||||
@click.stop="handleChangeMenu(picItem)">
|
||||
<a>
|
||||
<span class="pics">
|
||||
<img :src="picItem.src" alt=""/>
|
||||
</span>
|
||||
|
|
@ -27,35 +28,55 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getPublicData} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "ProductsClassify",
|
||||
data() {
|
||||
return {
|
||||
pics: [
|
||||
{
|
||||
href: '',
|
||||
src: require('../assets/index/product1.png'),
|
||||
name: '瓷抛大理石'
|
||||
id: 1,
|
||||
src: require("../assets/index/product1.png"),
|
||||
name: ""
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src:require('../assets/index/product2.jpg'),
|
||||
name: '通体大理石'
|
||||
id: 2,
|
||||
src: require("../assets/index/product2.jpg"),
|
||||
name: ""
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: require('../assets/index/product3.jpg'),
|
||||
name: '中板通体大理石'
|
||||
id: 3,
|
||||
src: require("../assets/index/product3.jpg"),
|
||||
name: ""
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: require('../assets/index/product4.jpg'),
|
||||
name: '大板通体大理石'
|
||||
id: 4,
|
||||
src: require("../assets/index/product4.jpg"),
|
||||
name: ""
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getPublicData().then(res => {
|
||||
this.pics[0].name = res.data.goodscategory_list[0].name;
|
||||
this.pics[1].name = res.data.goodscategory_list[1].name;
|
||||
this.pics[2].name = res.data.goodscategory_list[2].name;
|
||||
this.pics[3].name = res.data.goodscategory_list[3].name;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleChangeMenu(item) {
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -63,8 +84,8 @@ export default {
|
|||
.grid_box {
|
||||
width: 1230px !important;
|
||||
}
|
||||
.pic{
|
||||
img{
|
||||
.pic {
|
||||
img {
|
||||
width: 400px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -72,8 +93,8 @@ export default {
|
|||
ul {
|
||||
li {
|
||||
a {
|
||||
width:360px !important;
|
||||
height: 267px!important;
|
||||
width: 360px !important;
|
||||
height: 267px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,8 +105,8 @@ export default {
|
|||
.grid_box {
|
||||
width: 1100px !important;
|
||||
}
|
||||
.pic{
|
||||
img{
|
||||
.pic {
|
||||
img {
|
||||
width: 385px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -93,8 +114,8 @@ export default {
|
|||
ul {
|
||||
li {
|
||||
a {
|
||||
width:341px !important;
|
||||
height: 258px!important;
|
||||
width: 341px !important;
|
||||
height: 258px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -108,6 +129,7 @@ export default {
|
|||
position: relative;
|
||||
min-width: 1300px;
|
||||
display: flex;
|
||||
|
||||
.grid_box {
|
||||
width: 1360px;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" style="justify-content: center">
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="item in tagItems"
|
||||
:key="item.title"
|
||||
effect="plain">
|
||||
<a :href="item.href">{{ item.name }}</a>
|
||||
</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="item in tagItems"
|
||||
:key="item.title"
|
||||
effect="plain">
|
||||
<a @click.stop="handleChangeMenu(item)">{{ item.name }}</a>
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -29,39 +29,54 @@ import {getPublicData} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "ProductsShow",
|
||||
data(){
|
||||
return{
|
||||
tagItems:[]
|
||||
}
|
||||
data() {
|
||||
return {
|
||||
tagItems: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getPublicData().then(res => {
|
||||
this.tagItems = res.data.goodscategory_list;
|
||||
});
|
||||
}, methods: {
|
||||
handleChangeMenu(item) {
|
||||
this.$router.push({
|
||||
path: "/products_center", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
*{
|
||||
* {
|
||||
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||
}
|
||||
.el-tag:hover{
|
||||
|
||||
.el-tag:hover {
|
||||
background-color: #333;
|
||||
a{
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.el-tag:first-child{
|
||||
|
||||
.el-tag:first-child {
|
||||
background-color: #333;
|
||||
a{
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
.el-tag:last-child{
|
||||
|
||||
.el-tag:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.el-tag {
|
||||
border: none;
|
||||
margin-right: 10px;
|
||||
|
|
@ -69,10 +84,12 @@ export default {
|
|||
font-size: 15px;
|
||||
height: 37px;
|
||||
line-height: 37px;
|
||||
a{
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.product_show {
|
||||
min-width: 1300px;
|
||||
padding: 60px 0 60px 0;
|
||||
|
|
@ -106,11 +123,13 @@ export default {
|
|||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.tagRow{
|
||||
|
||||
.tagRow {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||
<el-tabs v-if="title===1" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title" >
|
||||
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title">
|
||||
关于我们
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {getPublicData} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "TabsItem",
|
||||
props: {
|
||||
title: Number,
|
||||
tabList: {
|
||||
type: Array
|
||||
}, productTabs: {
|
||||
type: Array
|
||||
},
|
||||
fatherMethod:{
|
||||
type:Function,
|
||||
|
|
@ -39,15 +39,9 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: '0',
|
||||
productTabs:[]
|
||||
activeName: '0'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getPublicData().then(res => {
|
||||
this.productTabs=res.data.goodscategory_list
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab){
|
||||
if(this.fatherMethod){
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="projectCase">
|
||||
<div class="projectCase" id="projectCase">
|
||||
<div class="case_bg">
|
||||
<el-row>
|
||||
<div class="cases_title">
|
||||
<h2>工程案例</h2>
|
||||
<h3>—— Engineering Case ——</h3>
|
||||
<div class="case_more">
|
||||
<a href="/image_display">查看所有</a>
|
||||
<a @click="changeProductCase">查看所有</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
|
@ -14,14 +14,13 @@
|
|||
<el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
|
||||
<el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
|
||||
<el-row type="flex">
|
||||
<el-col class="case_example" :span="6" v-for="(item,index) in projectList" :key="index">
|
||||
<el-col class="case_example" :span="6" v-for="(item,index) in projectList" :key="index" >
|
||||
<ul>
|
||||
<li>
|
||||
<li @click="handleClickNews(item)">
|
||||
<div class="pics">
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.image"
|
||||
:preview-src-list="item.bigSrc">
|
||||
:src="item.image">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="case_info">{{ item.title }}</div>
|
||||
|
|
@ -31,6 +30,19 @@
|
|||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div v-show="showMask">
|
||||
<div class="mask">
|
||||
</div>
|
||||
<div class="mask_pic">
|
||||
<div class="pic_bgc">
|
||||
<div>
|
||||
<i class="el-icon-close close" @click="closeMask"></i>
|
||||
<img :src="mask_pic" alt=""/>
|
||||
</div>
|
||||
<span class="mask_info">{{ mask_title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -42,7 +54,10 @@ export default {
|
|||
name: "Projects",
|
||||
data() {
|
||||
return {
|
||||
projectList: []
|
||||
projectList: [],
|
||||
showMask: false,
|
||||
mask_pic: "",
|
||||
mask_title: ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -52,12 +67,86 @@ export default {
|
|||
limit: 8
|
||||
}).then(res => {
|
||||
this.projectList = res.data.list;
|
||||
if(res.data.list.length>4){
|
||||
const bg= document.getElementById('projectCase')
|
||||
bg.style="margin-bottom: 300px!important;"
|
||||
}
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
closeMask() {
|
||||
this.showMask = false;
|
||||
},
|
||||
handleClickNews(item){
|
||||
this.showMask = true;
|
||||
this.mask_pic = item.image;
|
||||
this.mask_title = item.title;
|
||||
},
|
||||
changeProductCase(){
|
||||
this.$router.push({
|
||||
path: "/image_display", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: 8
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.mask {
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.3;
|
||||
z-index: 990;
|
||||
}
|
||||
|
||||
.mask_pic {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 991333;
|
||||
opacity: 1;
|
||||
|
||||
.pic_bgc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 35px 15px 10px 15px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 480px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mask_info {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-row--flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -68,11 +157,10 @@ export default {
|
|||
}
|
||||
|
||||
.projectCase {
|
||||
min-height: 900px;
|
||||
|
||||
//margin-bottom: 100px;
|
||||
.case_bg {
|
||||
min-width: 1300px;
|
||||
background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
|
||||
background: #ffffff url('../assets/index/cbg0.jpg') no-repeat center 0;
|
||||
background-size: cover;
|
||||
height: 540px;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<img src="../../assets/aboutus.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
|
||||
<ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||||
<!-- 关于我们的内容-->
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||
|
|
@ -29,28 +29,56 @@ export default {
|
|||
return {
|
||||
aboutTabs: [],
|
||||
pList: []
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
$route(to){
|
||||
for (let i = 0; i < this.aboutTabs.length; i++) {
|
||||
if (this.aboutTabs[i].id ==to.query.menu ) {
|
||||
this.$refs.ProductsTabsItem.activeName= i+'';
|
||||
}
|
||||
}
|
||||
getArticleInfo(to.query.menu).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
for (let i = 0; i < this.aboutTabs.length; i++) {
|
||||
if (this.aboutTabs[i].id ==this.$route.query.menu ) {
|
||||
this.$refs.ProductsTabsItem.activeName= i+'';
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//获取关于我们的数据
|
||||
getArticleInfo(1).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content
|
||||
});
|
||||
if(this.$route.query.menu){
|
||||
//获取关于我们的数据
|
||||
getArticleInfo(this.$route.query.menu).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
}else {
|
||||
getArticleInfo(1).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
for (let i = 0; i < this.aboutTabs.length; i++) {
|
||||
console.log('this.aboutTabs[i].id',this.aboutTabs[i].id);
|
||||
if (this.aboutTabs[i].title === tab._props.label) {
|
||||
getArticleInfo(this.aboutTabs[i].id).then(res => {
|
||||
this.aboutTabs = res.data.articlelist;
|
||||
this.pList = res.data.articleinfo.content
|
||||
this.pList = res.data.articleinfo.content;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -92,7 +120,8 @@ export default {
|
|||
|
||||
.about_us_bg {
|
||||
height: 360px;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -5,28 +5,19 @@
|
|||
<img src="../../assets/join.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
|
||||
<ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||||
<!-- 支持策略 -->
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||
<div class="support" id="support">
|
||||
<div class="support">
|
||||
<div class="support_title">
|
||||
支持策略 / SUPPORT STRATEGY
|
||||
{{classid==4?'支持策略 / SUPPORT STRATEGY':'加盟条件 / FRANCHISE CONDITIONS'}}
|
||||
</div>
|
||||
<div style="font-size: 16px;padding-bottom: 25px">
|
||||
<span v-html="supportList"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!--加盟条件-->
|
||||
<div class="support" id="join">
|
||||
<div class="support_title">
|
||||
加盟条件 / FRANCHISE CONDITIONS
|
||||
</div>
|
||||
<div style="font-size: 16px;padding-bottom: 25px">
|
||||
<span v-html="joinList"></span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -41,49 +32,63 @@ export default {
|
|||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
classid:4,
|
||||
joinTab: [],
|
||||
supportList: [],
|
||||
joinList: [
|
||||
{text: '艺鹏瓷砖合作加盟条件：'},
|
||||
{text: '1、有强烈的事业心、有良好的职业道德和商业道德，重合同、守信誉、品行端正、实事求是、言行一致；'},
|
||||
{text: '2、具有较强的资金实力，有一定规模的营销场所，有稳定的、高素质的营销队伍；'},
|
||||
]
|
||||
supportList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
for (let i = 0; i < this.joinTab.length; i++) {
|
||||
if (this.joinTab[i].id == to.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
this.getInfo(to.query.menu)
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
for (let i = 0; i < this.joinTab.length; i++) {
|
||||
if (this.joinTab[i].id == this.$route.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
//获取招商加盟的数据
|
||||
getArticleInfo(4).then(res => {
|
||||
this.joinTab = res.data.articlelist;
|
||||
this.supportList = res.data.articleinfo.content
|
||||
});
|
||||
if (this.$route.query.menu) {
|
||||
//获取招商加盟的数据
|
||||
this.getInfo(this.$route.query.menu)
|
||||
} else {
|
||||
this.getInfo(4)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getInfo(classId){
|
||||
getArticleInfo(classId).then(res => {
|
||||
this.joinTab = res.data.articlelist;
|
||||
this.supportList = res.data.articleinfo.content;
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
const support = document.getElementById('support');
|
||||
const join = document.getElementById('join');
|
||||
if (tab.index == 0) {
|
||||
support.style.display = "block"
|
||||
join.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
join.style.display = "block"
|
||||
support.style.display = "none"
|
||||
for (let i = 0; i < this.joinTab.length; i++) {
|
||||
if (this.joinTab[i].title === tab._props.label) {
|
||||
this.getInfo(this.joinTab[i].id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#join {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Attract_join {
|
||||
min-width: 1300px;
|
||||
|
||||
.Attract_join_bg {
|
||||
height: 360px;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@
|
|||
<div v-if="item.children">
|
||||
<ul class="subNav" v-if="index==2">
|
||||
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href">
|
||||
<a @click.stop="handleChangeMenu(childrenItem,item)">
|
||||
{{ childrenItem.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="subNav" v-else>
|
||||
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href">
|
||||
<a @click.stop="handleChangeMenu(childrenItem,item)">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -91,14 +91,14 @@ export default {
|
|||
title: "新闻资讯",
|
||||
children: [
|
||||
{
|
||||
href: "/news",
|
||||
id: 5,
|
||||
title: "公司新闻"
|
||||
},
|
||||
{
|
||||
href: "",
|
||||
id: 6,
|
||||
title: "行业动态"
|
||||
}, {
|
||||
href: "",
|
||||
id: 7,
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
]
|
||||
|
|
@ -108,19 +108,18 @@ export default {
|
|||
title: "形象展示",
|
||||
children: [
|
||||
{
|
||||
href: "/image_display",
|
||||
id: 2,
|
||||
title: "资质荣誉"
|
||||
},
|
||||
{
|
||||
href: "",
|
||||
id: 8,
|
||||
title: "工程案例"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
href: "/attract_and_join",
|
||||
title: "招商加盟",
|
||||
children: []
|
||||
title: "招商加盟"
|
||||
},
|
||||
{
|
||||
href: "/contact_us",
|
||||
|
|
@ -135,8 +134,11 @@ export default {
|
|||
this.corporate_name = res.data.corporate_name;
|
||||
this.navList[1].children = res.data.aboutus;
|
||||
this.navList[2].children = res.data.goodscategory_list;
|
||||
this.navList[5].children = res.data.join;
|
||||
this.navList[6].children = res.data.contact_us;
|
||||
for (let i = 0; i < res.data.join.length; i++) {
|
||||
if (this.navList[5].title !== res.data.join[i].title) {
|
||||
this.navList[5].children = res.data.join;
|
||||
}
|
||||
}
|
||||
});
|
||||
let header_bg = document.getElementById("header_bg");
|
||||
let search_header = document.getElementById("search_header");
|
||||
|
|
@ -160,6 +162,16 @@ export default {
|
|||
that.width = window.screenWidth >= 1200;
|
||||
})();
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChangeMenu(childrenItem, item) {
|
||||
this.$router.push({
|
||||
path: item.href, //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
menu: childrenItem.id //前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,9 +5,11 @@
|
|||
<img src="../../assets/image_display.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
|
||||
<ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||||
<!--资质荣誉 22是封装图片放大的效果-->
|
||||
<PicturesBox :image-list="imageAndWord" :type="22"/>
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
|
|
@ -15,73 +17,110 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/components/Pagination";
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
import {getArticleList} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {ProductsTabsItem,PicturesBox},
|
||||
components: {ProductsTabsItem, PicturesBox,Pagination},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
limit: 12,
|
||||
total: 0,
|
||||
classIndex:0,
|
||||
showNull: false,
|
||||
imageDisplayTabs: [
|
||||
{
|
||||
title: '资质荣誉',
|
||||
name: 'first'
|
||||
id: 2,
|
||||
title: "资质荣誉"
|
||||
},
|
||||
{
|
||||
title: '工程案例',
|
||||
name: 'second'
|
||||
id: 8,
|
||||
title: "工程案例"
|
||||
}
|
||||
],
|
||||
imageAndWord: [],
|
||||
imageAndWord: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
for (let i = 0; i < this.imageDisplayTabs.length; i++) {
|
||||
if (this.imageDisplayTabs[i].id == to.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
this.getArticleList(to.query.menu);
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
for (let i = 0; i < this.imageDisplayTabs.length; i++) {
|
||||
if (this.imageDisplayTabs[i].id == this.$route.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getArticleList(2)
|
||||
if (this.$route.query.menu) {
|
||||
this.getArticleList(this.$route.query.menu);
|
||||
} else {
|
||||
this.getArticleList(2);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取新闻列表
|
||||
getArticleList(classId,page,limit){
|
||||
getArticleList(classId, page, limit) {
|
||||
getArticleList({
|
||||
classid: classId,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
page: page,
|
||||
limit: limit
|
||||
}).then(res => {
|
||||
console.log('',res);
|
||||
this.imageAndWord = res.data.list;
|
||||
if(res.data.list.length==0){
|
||||
this.showNull=true
|
||||
if (res.data.list.length == 0) {
|
||||
this.showNull = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
if(tab.index==0){
|
||||
this.getArticleList(2)
|
||||
}else if(tab.index==1){
|
||||
this.getArticleList(8)
|
||||
this.classIndex = parseInt(tab.index);
|
||||
if (tab.index == 0) {
|
||||
this.getArticleList(2, this.page, this.limit);
|
||||
} else if (tab.index == 1) {
|
||||
this.getArticleList(8, this.page, this.limit);
|
||||
}
|
||||
}
|
||||
},
|
||||
//分页
|
||||
handleChangePage(value) {
|
||||
if (this.classIndex == 0) {
|
||||
this.getArticleList(2, value, this.limit);
|
||||
} else if (this.classIndex == 1) {
|
||||
this.getArticleList(8, value, this.limit);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
.nullData{
|
||||
|
||||
.nullData {
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image_display {
|
||||
min-width: 1300px;
|
||||
|
||||
.imageDisplay_bg {
|
||||
height: 360px;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
<img src="../../assets/news.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
|
||||
<!--图片栏-->
|
||||
<PicturesBox :image-list="imageAndWord" :type="11" v-show="showImage" @getNewsIdClick="getNewsId"/>
|
||||
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage" v-show="showPagination"/>
|
||||
|
||||
<ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||||
<div v-show="showImage">
|
||||
<!--图片栏-->
|
||||
<PicturesBox :image-list="imageAndWord" :type="11" @getNewsIdClick="getNewsId"/>
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage"/>
|
||||
</div>
|
||||
<!--新闻详情-->
|
||||
<detail :newsId="newsId" :classIndex="classIndex" v-if="showDetail"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
|
|
@ -32,93 +32,116 @@ export default {
|
|||
components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
page:1,
|
||||
limit:10,
|
||||
total:0,
|
||||
newsId:6,
|
||||
classIndex:0,
|
||||
showDetail:false,
|
||||
showImage:true,
|
||||
showPagination:true,
|
||||
page: 1,
|
||||
limit: 12,
|
||||
total: 0,
|
||||
newsId: 6,
|
||||
classIndex: 0,
|
||||
showDetail: false,
|
||||
showImage: true,
|
||||
newsTab: [
|
||||
{
|
||||
title: '公司新闻',
|
||||
name: 'first'
|
||||
id: 5,
|
||||
title: "公司新闻"
|
||||
}, {
|
||||
title: '行业动态',
|
||||
name: 'second'
|
||||
id: 6,
|
||||
title: "行业动态"
|
||||
}, {
|
||||
title: '瓷砖百科',
|
||||
name: 'third'
|
||||
},
|
||||
id: 7,
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
],
|
||||
imageAndWord: [],
|
||||
showNull:false
|
||||
showNull: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
for (let i = 0; i < this.newsTab.length; i++) {
|
||||
if (this.newsTab[i].id == to.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
this.getArticleList(to.query.menu);
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
for (let i = 0; i < this.newsTab.length; i++) {
|
||||
if (this.newsTab[i].id == this.$route.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getArticleList(5)
|
||||
if(this.$route.query.menuDetail){
|
||||
this.getNewsId(this.$route.query.menuDetail)
|
||||
}
|
||||
if (this.$route.query.menu) {
|
||||
this.getArticleList(this.$route.query.menu);
|
||||
} else {
|
||||
this.getArticleList(5);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNewsId(value){
|
||||
this.newsId=value
|
||||
if(this.newsId!==0){
|
||||
this.showDetail=true
|
||||
this.showPagination=false
|
||||
this.showImage=false
|
||||
getNewsId(value) {
|
||||
this.newsId = value;
|
||||
if (this.newsId !== 0) {
|
||||
this.showDetail = true;
|
||||
this.showImage = false;
|
||||
}
|
||||
},
|
||||
//获取新闻列表
|
||||
getArticleList(classId,page,limit){
|
||||
getArticleList(classId, page, limit) {
|
||||
getArticleList({
|
||||
classid: classId,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
page: page,
|
||||
limit: limit
|
||||
}).then(res => {
|
||||
this.total=res.data.count
|
||||
this.total = res.data.count;
|
||||
this.imageAndWord = res.data.list;
|
||||
if(res.data.list.length==0){
|
||||
this.showNull=true
|
||||
if (res.data.list.length == 0) {
|
||||
this.showNull = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
this.showDetail=false
|
||||
this.showImage=true
|
||||
this.showPagination=true
|
||||
this.classIndex=parseInt(tab.index)
|
||||
this.showDetail = false;
|
||||
this.showImage = true;
|
||||
this.classIndex = parseInt(tab.index);
|
||||
if (tab.index == 0) {
|
||||
this.getArticleList(5)
|
||||
this.getArticleList(5, this.page, this.limit);
|
||||
} else if (tab.index == 1) {
|
||||
this.getArticleList(6)
|
||||
this.getArticleList(6, this.page, this.limit);
|
||||
} else if (tab.index == 2) {
|
||||
this.getArticleList(7)
|
||||
this.getArticleList(7, this.page, this.limit);
|
||||
}
|
||||
},
|
||||
//新闻分页
|
||||
handleChangePage(value){
|
||||
if(this.classIndex==0){
|
||||
this.getArticleList(5,value,this.limit)
|
||||
}else if (this.classIndex == 1) {
|
||||
this.getArticleList(6,value,this.limit)
|
||||
handleChangePage(value) {
|
||||
if (this.classIndex == 0) {
|
||||
this.getArticleList(5, value, this.limit);
|
||||
} else if (this.classIndex == 1) {
|
||||
this.getArticleList(6, value, this.limit);
|
||||
} else if (this.classIndex == 2) {
|
||||
this.getArticleList(7,value,this.limit)
|
||||
this.getArticleList(7, value, this.limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
.nullData{
|
||||
|
||||
.nullData {
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#industry_dynamics {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -146,7 +169,8 @@ export default {
|
|||
|
||||
.news_bg {
|
||||
height: 360px;
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<template>
|
||||
<div style="min-width: 1300px">
|
||||
<!-- 产品标签栏-->
|
||||
<ProductsTabsItem :title="9" />
|
||||
<div class="img_text_bgc">
|
||||
<el-row type="flex">
|
||||
<el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
|
||||
|
|
@ -66,11 +64,10 @@
|
|||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import {getGoodsInfo, getGoodsList} from "@/api";
|
||||
import {getGoodsInfo, getGoodsList, getPublicData} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "detail",
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="products_center">
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :title="9" :fatherMethod="handleClick"/>
|
||||
<ProductsTabsItem :title="9" :product-tabs="productTabs" :fatherMethod="handleClick" ref="ProductsTabsItem"/>
|
||||
<!-- 分类栏-->
|
||||
<div class="product_types">
|
||||
<el-row type="flex">
|
||||
|
|
@ -10,19 +10,25 @@
|
|||
<div class="spaceList">
|
||||
<strong>分类：</strong>
|
||||
<ul>
|
||||
<li v-for="(item,index) in classifyList" @click="changeClassify(item,index)" :id="'classify_'+index">{{ item.name }}</li>
|
||||
<li v-for="(item,index) in classifyList" @click.stop="changeClassify(item,index)" :id="'classify_'+index">
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spaceList">
|
||||
<strong>空间：</strong>
|
||||
<ul>
|
||||
<li v-for="(item,index) in spaceList" @click="changeSpace(item,index)" :id="'space_'+index">{{ item.title }}</li>
|
||||
<li v-for="(item,index) in spaceList" @click.stop="changeSpace(item,index)" :id="'space_'+index">
|
||||
{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spaceList">
|
||||
<strong>风格：</strong>
|
||||
<ul>
|
||||
<li v-for="(item,index) in styleList" @click="changeStyle(item,index)" :id="'style_'+index">{{ item.title }}</li>
|
||||
<li v-for="(item,index) in styleList" @click.stop="changeStyle(item,index)" :id="'style_'+index">
|
||||
{{ item.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -30,7 +36,8 @@
|
|||
</div>
|
||||
<!--图片栏-->
|
||||
<PicturesBox :image-list="imgList" :type="33"/>
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage" v-if="showPagination"/>
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage"
|
||||
v-if="showPagination"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
|
|
@ -48,97 +55,181 @@ export default {
|
|||
components: {PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
showPagination:true,
|
||||
showNull: false,
|
||||
showPagination: true,
|
||||
classifyList: [],
|
||||
spaceList: [],
|
||||
styleList: [],
|
||||
pageSize:12,
|
||||
total:0,
|
||||
pageSize: 12,
|
||||
total: 0,
|
||||
imgList: [],
|
||||
classIndex:''
|
||||
classIndex: "",
|
||||
productTabs: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
if (to.query.menu) {
|
||||
for (let i = 0; i < this.productTabs.length; i++) {
|
||||
if (this.productTabs[i].id == to.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
getGoodsCategory(to.query.menu).then(res => {
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
//获取产品列表
|
||||
getGoodsList({
|
||||
classid: to.query.menu,
|
||||
page: 1,
|
||||
limit: this.pageSize
|
||||
}).then(res => {
|
||||
this.total = res.data.count;
|
||||
this.imgList = res.data.list;
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (this.$route.query.menu) {
|
||||
for (let i = 0; i < this.productTabs.length; i++) {
|
||||
if (this.productTabs[i].id == this.$route.query.menu) {
|
||||
this.$refs.ProductsTabsItem.activeName = i + "";
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.$route.query.menuTitle) {
|
||||
for (let i = 0; i < this.classifyList.length; i++) {
|
||||
const red = document.getElementById("classify_" + i);
|
||||
if (this.classifyList[i].name == this.$route.query.menuTitle) {
|
||||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||||
} else {
|
||||
red.style = "color: #000!important;";
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.spaceList.length; i++) {
|
||||
const red = document.getElementById("space_" + i);
|
||||
if (this.spaceList[i].title == this.$route.query.menuTitle) {
|
||||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||||
} else {
|
||||
red.style = "color: #000!important;";
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < this.styleList.length; i++) {
|
||||
const red = document.getElementById("style_" + i);
|
||||
if (this.styleList[i].title == this.$route.query.menuTitle) {
|
||||
red.style = "color: #f00!important;text-decoration: underline!important;";
|
||||
} else {
|
||||
red.style = "color: #000!important;";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getPublicData().then(res => {
|
||||
this.productTabs = res.data.goodscategory_list;
|
||||
});
|
||||
//获取空间和风格数据
|
||||
getPublicData().then(res => {
|
||||
this.spaceList = res.data.space_list
|
||||
this.styleList = res.data.style_list
|
||||
});
|
||||
//进入页面时, 获取第一个列表的类别
|
||||
getGoodsCategory(1).then(res => {
|
||||
this.classifyList = res.data.categorylist
|
||||
});
|
||||
//获取产品列表
|
||||
getGoodsList({
|
||||
classid:0,
|
||||
page:1,
|
||||
limit:this.pageSize,
|
||||
}).then(res => {
|
||||
this.total=res.data.count
|
||||
this.imgList=res.data.list
|
||||
this.spaceList = res.data.space_list;
|
||||
this.styleList = res.data.style_list;
|
||||
});
|
||||
if (this.$route.query.menu) {
|
||||
//进入页面时, 获取第一个列表的类别
|
||||
getGoodsCategory(this.$route.query.menu).then(res => {
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
this.getGoodsList(this.$route.query.menu, 1, this.pageSize);
|
||||
} else {
|
||||
//进入页面时, 获取第一个列表的类别
|
||||
getGoodsCategory(1).then(res => {
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
this.getGoodsList(0, 1, this.pageSize);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//获取产品列表
|
||||
getGoodsList(classid,page,limit,stylename,spacename){
|
||||
getGoodsList(classid, page, limit, stylename, spacename) {
|
||||
getGoodsList({
|
||||
classid:classid,
|
||||
page:page,
|
||||
limit:limit,
|
||||
stylename:stylename,
|
||||
spacename:spacename,
|
||||
classid: classid,
|
||||
page: page,
|
||||
limit: limit,
|
||||
stylename: stylename,
|
||||
spacename: spacename
|
||||
}).then(res => {
|
||||
this.total=res.data.count
|
||||
this.imgList=res.data.list
|
||||
if(res.data.list.length===0){
|
||||
this.showNull=true
|
||||
this.showPagination=false
|
||||
this.total = res.data.count;
|
||||
this.imgList = res.data.list;
|
||||
if (res.data.list.length === 0) {
|
||||
this.showNull = true;
|
||||
this.showPagination = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//点击一级分类切换数据及切换不同二级分类
|
||||
handleClick(tab) {
|
||||
let index = parseInt(tab.index) + 1
|
||||
this.classIndex=index
|
||||
let index = parseInt(tab.index) + 1;
|
||||
this.classIndex = index;
|
||||
getGoodsCategory(index).then(res => {
|
||||
this.classifyList = res.data.categorylist
|
||||
this.classifyList = res.data.categorylist;
|
||||
});
|
||||
this.getGoodsList(index,1,this.pageSize)
|
||||
this.getGoodsList(index, 1, this.pageSize);
|
||||
},
|
||||
//产品分页
|
||||
handleChangePage(value){
|
||||
this.getGoodsList(this.classIndex,value,this.pageSize)
|
||||
handleChangePage(value) {
|
||||
this.getGoodsList(this.classIndex, value, this.pageSize);
|
||||
},
|
||||
//点击二级分类,筛选产品数据
|
||||
changeClassify(item,index){
|
||||
this.getGoodsList(item.id,1,this.pageSize)
|
||||
document.getElementById('classify_'+index).style="color: #f00;text-decoration: underline;"
|
||||
changeClassify(item) {
|
||||
this.$router.push({
|
||||
path: "/products_center",
|
||||
query: {
|
||||
menuTitle: item.name
|
||||
}
|
||||
});
|
||||
this.getGoodsList(item.id, 1, this.pageSize);
|
||||
},
|
||||
//点击空间分类,筛选产品数据
|
||||
changeSpace(item,index){
|
||||
this.getGoodsList(this.classIndex,1,this.pageSize,'',item.title)
|
||||
document.getElementById('space_'+index).style="color: #f00;text-decoration: underline;"
|
||||
changeSpace(item) {
|
||||
this.$router.push({
|
||||
path: "/products_center",
|
||||
query: {
|
||||
menuTitle: item.title
|
||||
}
|
||||
});
|
||||
this.getGoodsList(this.classIndex, 1, this.pageSize, "", item.title);
|
||||
},
|
||||
//点击风格分类,筛选产品数据
|
||||
changeStyle(item,index){
|
||||
this.getGoodsList(this.classIndex,1,this.pageSize,item.title,'')
|
||||
document.getElementById('style_'+index).style="color: #f00;text-decoration: underline;"
|
||||
changeStyle(item) {
|
||||
this.$router.push({
|
||||
path: "/products_center",
|
||||
query: {
|
||||
menuTitle: item.title
|
||||
}
|
||||
});
|
||||
this.getGoodsList(this.classIndex, 1, this.pageSize, item.title, "");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
.nullData{
|
||||
|
||||
.becomeRed {
|
||||
color: #f00;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nullData {
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.products_center {
|
||||
min-width: 1300px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue