邓洁 : 部分接口对接
This commit is contained in:
dengjie
parent
f1792af548
commit
0289fee048
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 734 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -52,7 +52,7 @@ export default {
|
|||
name: "AboutUs",
|
||||
data() {
|
||||
return {
|
||||
aboutContent: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
|
||||
aboutContent: '广东蒙彼利陶瓷有限公司，于2020年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。',
|
||||
numList: [
|
||||
{
|
||||
num: '2000',
|
||||
|
|
@ -78,19 +78,19 @@ export default {
|
|||
imgTextList: [
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446921627711241s.jpg',
|
||||
src: require('../assets/index/a1.jpg'),
|
||||
boldText: 'Brand',
|
||||
enText: 'culture',
|
||||
cnTitle: '品牌文化'
|
||||
}, {
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446922829529890s.jpg',
|
||||
src: require('../assets/index/a2.jpg'),
|
||||
boldText: 'Enterprise',
|
||||
enText: 'viewpoint',
|
||||
cnTitle: '企业观点'
|
||||
}, {
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446925925108442s.jpg',
|
||||
src: require('../assets/index/a3.jpg'),
|
||||
boldText: 'corporate',
|
||||
enText: 'culture',
|
||||
cnTitle: '企业文化'
|
||||
|
|
|
|||
|
|
@ -26,175 +26,85 @@
|
|||
</el-row>
|
||||
</div>
|
||||
<div style="border-bottom: 1px solid #e9e9e9;">
|
||||
<el-row class="classify">
|
||||
<div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
|
||||
<ul>
|
||||
<li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href" class="">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-row>
|
||||
<div class="classify" v-if="findIndex===0">
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
|
||||
{{ childrenItem.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="classify" v-else>
|
||||
<a v-for="(childrenItem,childrenIndex) in findList" :key="childrenIndex">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getPublicData} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "FastFindProducts",
|
||||
data() {
|
||||
return {
|
||||
moduleList: [
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/images/module2-1.png',
|
||||
name: '分类'
|
||||
href: "/products_center",
|
||||
src: require("@/assets/index/module2-1.png"),
|
||||
name: "分类"
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/images/module2-2.png',
|
||||
name: '空间'
|
||||
href: "/products_center",
|
||||
src: require("@/assets/index/module2-2.png"),
|
||||
name: "空间"
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/images/module2-3.png',
|
||||
name: '风格'
|
||||
},
|
||||
href: "/products_center",
|
||||
src: require("@/assets/index/module2-3.png"),
|
||||
name: "风格"
|
||||
}
|
||||
],
|
||||
findList: [
|
||||
{
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title: '瓷抛大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '中板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '大板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '银河系大板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '仿古砖600x600'
|
||||
}, {
|
||||
href: '',
|
||||
title: '金刚大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '岩板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '微水泥'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title: '客厅瓷砖'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '厨房瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '卫浴瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '书房瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '卧室瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '餐厅瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '走廊瓷砖'
|
||||
}, {
|
||||
href: '',
|
||||
title: '大厅瓷砖'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title: '简约风格'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '新中式风格'
|
||||
}, {
|
||||
href: '',
|
||||
title: '欧式风格'
|
||||
}, {
|
||||
href: '',
|
||||
title: '古典风格'
|
||||
}, {
|
||||
href: '',
|
||||
title: '田园风格'
|
||||
}, {
|
||||
href: '',
|
||||
title: '工业风格'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
findList: [],
|
||||
findIndex:0
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let find0 = document.getElementById("find_0");
|
||||
find0.classList.add("current");
|
||||
this.getPublicData()
|
||||
},
|
||||
methods: {
|
||||
//获取第一个数据
|
||||
getPublicData(){
|
||||
getPublicData().then(res => {
|
||||
this.findList = res.data.goodscategory_list;
|
||||
});
|
||||
},
|
||||
changeFinds(moduleIndex) {
|
||||
let find0 = document.getElementById('find_0')
|
||||
let find1 = document.getElementById('find_1')
|
||||
let find2 = document.getElementById('find_2')
|
||||
let bok0 = document.getElementById('bok_0')
|
||||
let bok1 = document.getElementById('bok_1')
|
||||
let bok2 = document.getElementById('bok_2')
|
||||
this.findIndex=moduleIndex
|
||||
let find0 = document.getElementById("find_0");
|
||||
find0.classList.remove("current");
|
||||
if (moduleIndex === 0) {
|
||||
find0.classList.add('current')
|
||||
find1.classList.remove('current')
|
||||
find2.classList.remove('current')
|
||||
bok0.style.display = 'block'
|
||||
bok1.style.display = 'none'
|
||||
bok2.style.display = 'none'
|
||||
this.getPublicData()
|
||||
} else if (moduleIndex === 1) {
|
||||
find0.classList.remove('current')
|
||||
find1.classList.add('current')
|
||||
find2.classList.remove('current')
|
||||
find1.addClass = 'current'
|
||||
bok0.style.display = 'none'
|
||||
bok1.style.display = 'block'
|
||||
bok2.style.display = 'none'
|
||||
getPublicData().then(res => {
|
||||
this.findList = res.data.space_list;
|
||||
});
|
||||
} else if (moduleIndex === 2) {
|
||||
find0.classList.remove('current')
|
||||
find1.classList.remove('current')
|
||||
find2.classList.add('current')
|
||||
find2.addClass = 'current'
|
||||
bok0.style.display = 'none'
|
||||
bok1.style.display = 'none'
|
||||
bok2.style.display = 'block'
|
||||
getPublicData().then(res => {
|
||||
this.findList = res.data.style_list;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
*{
|
||||
* {
|
||||
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1660px) {
|
||||
.fastFind {
|
||||
width: 1230px !important;
|
||||
|
|
@ -244,6 +154,10 @@ export default {
|
|||
float: right;
|
||||
|
||||
ul {
|
||||
li:hover {
|
||||
background: #eeeeee;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
width: 120px;
|
||||
|
|
@ -279,28 +193,14 @@ export default {
|
|||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
|
||||
#bok_1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bok_2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline;
|
||||
|
||||
> a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
> a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
> a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@
|
|||
<div class="newsCenter">
|
||||
<a href="/about_us">
|
||||
<div class="news_bg">
|
||||
<img src="../assets/index/b1.jpg" alt="">
|
||||
</div>
|
||||
</a>
|
||||
<!-- <el-row type="flex" >-->
|
||||
<!-- <el-col :span="4"></el-col>-->
|
||||
<!-- <el-col :span="16">-->
|
||||
<div class="newsWidth">
|
||||
<div class="news_left">
|
||||
<div class="items">
|
||||
|
|
@ -34,15 +32,15 @@
|
|||
<li v-for="(item,index) in itemList" :key="index">
|
||||
<div class="pics">
|
||||
<a :href="item.href">
|
||||
<img :src="item.src" alt=""/>
|
||||
<img :src="item.image" alt=""/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">
|
||||
<a :href="item.href">{{ item.title }}</a>
|
||||
</div>
|
||||
<div class="smy">{{ item.smy }}</div>
|
||||
<div class="dates">发布时间：{{ item.dates }}</div>
|
||||
<div class="smy">{{ item.synopsis }}</div>
|
||||
<div class="dates">发布时间：{{ item.create_time }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -50,54 +48,43 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getArticleList} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "NewsCenter",
|
||||
data() {
|
||||
return {
|
||||
news_summary: '坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。',
|
||||
news_summary: "坚持以科技创新推进产品革新，“以质量为生命”保障产品品质。秉承工匠精神，每一片瓷砖都经过从原料到产品进库数百道工序的精心打造，数十项物理性能检测和表面效果把关，为全球消费者及采购商提供高品质的产品。",
|
||||
classifyList: [
|
||||
{
|
||||
href: '',
|
||||
title: '公司新闻'
|
||||
href: "/news",
|
||||
title: "公司新闻"
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '行业动态'
|
||||
href: "",
|
||||
title: "行业动态"
|
||||
}, {
|
||||
href: '',
|
||||
title: '瓷砖百科'
|
||||
href: "",
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
],
|
||||
itemList: [
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367sss.jpg',
|
||||
title: '【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间。',
|
||||
smy: '...',
|
||||
dates: '2022-7-28'
|
||||
}, {
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960sss.jpg',
|
||||
title: 'EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。',
|
||||
smy: '...',
|
||||
dates: '2022-7-7'
|
||||
}, {
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220706/16570891341430082sss.jpg',
|
||||
title: '艺鹏·科普 | 为什么微水泥瓷砖那么火爆？让我们一探究竟！',
|
||||
smy: '...',
|
||||
dates: '2022-7-6'
|
||||
}
|
||||
]
|
||||
}
|
||||
itemList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getArticleList({
|
||||
classid: 6,
|
||||
page: 1,
|
||||
limit: 10
|
||||
}).then(res => {
|
||||
this.itemList = res.data.list;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -117,9 +104,11 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
.news_bg {
|
||||
background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
|
||||
background-size: cover;
|
||||
height: 380px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.newsWidth {
|
||||
|
|
@ -130,7 +119,7 @@ export default {
|
|||
width: 30%;
|
||||
float: left;
|
||||
padding: 90px 0;
|
||||
background: #f1f1f1 url('http://www.yipengtaoci.com/images/cbg2.jpg') no-repeat right bottom;
|
||||
background: #f1f1f1 url('../assets/index/newsBgc.jpg') no-repeat right bottom;
|
||||
|
||||
.items {
|
||||
display: block;
|
||||
|
|
@ -184,12 +173,13 @@ export default {
|
|||
width: 70%;
|
||||
float: right;
|
||||
padding: 40px 0 0 0;
|
||||
font-size: 14px;
|
||||
|
||||
ul {
|
||||
float: right;
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
|
||||
li {
|
||||
float: right;
|
||||
margin: 0 0 0 15px;
|
||||
|
||||
a {
|
||||
|
|
@ -255,7 +245,13 @@ export default {
|
|||
|
||||
.smy {
|
||||
color: #777;
|
||||
padding: 6px 0;
|
||||
padding: 3px 0;
|
||||
margin: 3px 0;
|
||||
font-size: 14px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dates {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ export default {
|
|||
},
|
||||
methods:{
|
||||
handleCurrentChange(val) {
|
||||
//console.log(val)
|
||||
this.$emit('pageChange', val)
|
||||
},
|
||||
previous() {
|
||||
|
|
@ -67,9 +66,12 @@ export default {
|
|||
background-color: #fff;
|
||||
}
|
||||
/deep/.el-button:hover{
|
||||
color: #fff;
|
||||
color: #fff!important;
|
||||
background-color: #333;
|
||||
}
|
||||
/deep/.el-button:focus{
|
||||
color: #333;
|
||||
}
|
||||
/deep/.el-pager li:hover{
|
||||
color: #fff!important;
|
||||
background-color: #333!important;
|
||||
|
|
|
|||
|
|
@ -5,20 +5,31 @@
|
|||
<el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imageList"
|
||||
:key="index" @click="type!==22?handleClickNews(index):''">
|
||||
:key="index" @click="type!==22?handleClickNews(item):''">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic" v-if="type!==22">
|
||||
<div v-if="type===33">
|
||||
<span class="pic">
|
||||
<img :src="item.image" alt="">
|
||||
</span>
|
||||
<el-image
|
||||
v-if="type===22"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
<span class="info" v-if="type===22">{{ item.word }}</span>
|
||||
<span class="inf" v-if="type!==22">{{ item.name }}</span>
|
||||
<span class="size" v-if="type!==22">{{ item.date }}</span>
|
||||
<span class="inf">{{ item.name }}</span>
|
||||
<span class="size">{{ item.goods_category.name }}</span>
|
||||
</div>
|
||||
<!-- 新闻-->
|
||||
<div v-if="type===11">
|
||||
<el-image
|
||||
:src="item.image">
|
||||
</el-image>
|
||||
<span class="inf">{{ item.title }}</span>
|
||||
<span class="info">{{ item.create_time }}</span>
|
||||
</div>
|
||||
<!--形象展示放大 -->
|
||||
<div v-if="type===22" class="bigImg">
|
||||
<el-image
|
||||
:src="item.image">
|
||||
</el-image>
|
||||
<span class="inf" style="text-align: center">{{ item.title }}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -38,34 +49,30 @@ export default {
|
|||
* 22是封装图片放大的效果
|
||||
* 33是跳转到产品详情
|
||||
*/
|
||||
type: Number
|
||||
type: Number,
|
||||
newsItem: String
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击图片进入详情页
|
||||
*/
|
||||
handleClickNews(index) {
|
||||
if(this.type==33){
|
||||
handleClickNews(item) {
|
||||
if (this.type == 33) {
|
||||
this.$router.push({
|
||||
path: '/products_detail', //跳转的路由
|
||||
// query:{ //跳转路由的参数
|
||||
// type:type //前面的type是参数的名称
|
||||
// //后面的type是点击产品时传过来的型号 这里也就是m320
|
||||
// }
|
||||
})
|
||||
}else {
|
||||
this.$parent.showDetail=true
|
||||
this.$parent.company_news=false
|
||||
this.$parent.industry_dynamics=false
|
||||
this.$parent.ceramic=false
|
||||
this.$parent.showPagination=false
|
||||
path: "/products_detail", //跳转的路由
|
||||
query: { //跳转路由的参数
|
||||
classid: item.id //前面的type是参数的名称
|
||||
}
|
||||
});
|
||||
} else if (this.type == 11) {
|
||||
this.$emit("getNewsIdClick", item.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -82,6 +89,33 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
/deep/ .el-image:hover {
|
||||
img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.bigImg {
|
||||
height: 270px;
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
overflow: hidden;
|
||||
|
||||
/deep/ .el-image {
|
||||
width: 308px;
|
||||
height: 270px;
|
||||
background-color: #000000;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image_list {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
|
|
@ -110,15 +144,18 @@ export default {
|
|||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
.info{
|
||||
text-align: center;
|
||||
|
||||
.info {
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
span.inf {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<div class="grid">
|
||||
<div class="grid_box">
|
||||
<div class="grid_left">
|
||||
<a href="">
|
||||
<a href="/products_center">
|
||||
<span class="pic">
|
||||
<img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
|
||||
<img src="../assets/index/ibg0.jpg" alt=""/>
|
||||
</span>
|
||||
<span class="info">产品分类</span>
|
||||
<span>了解更多</span>
|
||||
|
|
@ -34,22 +34,22 @@ export default {
|
|||
pics: [
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961573658658.png',
|
||||
src: require('../assets/index/product1.png'),
|
||||
name: '瓷抛大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949961872720151.jpg',
|
||||
src:require('../assets/index/product2.jpg'),
|
||||
name: '通体大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949962397730467.jpg',
|
||||
src: require('../assets/index/product3.jpg'),
|
||||
name: '中板通体大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20200717/15949963006120695.jpg',
|
||||
src: require('../assets/index/product4.jpg'),
|
||||
name: '大板通体大理石'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,64 +7,37 @@
|
|||
<div class="show_title">
|
||||
<h2>产品展示</h2>
|
||||
<h3>—— PRODUCTS ——</h3>
|
||||
<a href="">查看所有</a>
|
||||
<a href="/products_center">查看所有</a>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" style="justify-content: center">
|
||||
<!-- <el-col :span="4">-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="16" class="tagRow">-->
|
||||
<div>
|
||||
<el-tag
|
||||
v-for="item in tagItems"
|
||||
:key="item.title"
|
||||
effect="plain">
|
||||
<a :href="item.href">{{ item.title }}</a>
|
||||
<a :href="item.href">{{ item.name }}</a>
|
||||
</el-tag>
|
||||
</div>
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getPublicData} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "ProductsShow",
|
||||
data(){
|
||||
return{
|
||||
tagItems:[
|
||||
{
|
||||
href: '',
|
||||
title: '瓷抛大理石'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '中板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '大板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '银河系大板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '仿古砖600x600'
|
||||
}, {
|
||||
href: '',
|
||||
title: '金刚大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '岩板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '微水泥'
|
||||
}
|
||||
]
|
||||
tagItems:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getPublicData().then(res => {
|
||||
this.tagItems = res.data.goodscategory_list;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</el-tabs>
|
||||
<el-tabs v-else v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.title" >
|
||||
{{ title === 0 ? '' : item.title }}
|
||||
{{item.title }}
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-tabs v-if="title===9" v-model="activeName" @tab-click="handleClick">
|
||||
|
|
@ -30,10 +30,7 @@ export default {
|
|||
props: {
|
||||
title: Number,
|
||||
tabList: {
|
||||
type: Array,
|
||||
default: ()=>{
|
||||
return []
|
||||
}
|
||||
type: Array
|
||||
},
|
||||
fatherMethod:{
|
||||
type:Function,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<h2>工程案例</h2>
|
||||
<h3>—— Engineering Case ——</h3>
|
||||
<div class="case_more">
|
||||
<a href="">查看所有</a>
|
||||
<a href="/image_display">查看所有</a>
|
||||
</div>
|
||||
</div>
|
||||
</el-row>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div class="about_us">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="about_us_bg"></div>
|
||||
<div class="about_us_bg">
|
||||
<img src="../../assets/aboutus.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="aboutTabs" :title="1" :fatherMethod="handleClick"/>
|
||||
<!-- 关于我们的内容-->
|
||||
|
|
@ -89,11 +91,12 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
.about_us_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448450589680815.jpg");
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.introduce {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="Attract_join">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="Attract_join_bg">
|
||||
<img src="../../assets/join.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="joinTab" :fatherMethod="handleClick"/>
|
||||
|
|
@ -81,11 +82,12 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
.Attract_join_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448381427541777.jpg");
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.support {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<div class="contact_us">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="contact_us_bg">
|
||||
<img src="../../assets/contactus.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="contactTabs"/>
|
||||
|
|
@ -15,7 +16,7 @@
|
|||
</p>
|
||||
<p class="phone">电话：{{ tel }}</p>
|
||||
<div class="contact_logo">
|
||||
<img :src="logo" alt=""/>
|
||||
<img src="@/assets/qr1.jpg" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,8 +34,7 @@ export default {
|
|||
contactTabs: [],
|
||||
corporate_name: "",
|
||||
corporate_add: "",
|
||||
tel: "",
|
||||
logo: "http://www.yipengtaoci.com/upfiles/images/20200706/15940300499317991.jpg"
|
||||
tel: ""
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -42,7 +42,6 @@ export default {
|
|||
this.corporate_name = res.data.corporate_name;
|
||||
this.corporate_add = res.data.corporate_add;
|
||||
this.tel = res.data.tel;
|
||||
// this.logo = res.data.logo;
|
||||
this.contactTabs = res.data.contact_us;
|
||||
});
|
||||
}
|
||||
|
|
@ -54,14 +53,14 @@ export default {
|
|||
min-width: 1300px;
|
||||
|
||||
.contact_us_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181214/15447790134910001.jpg");
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.contact_content {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,7 @@
|
|||
<div class="footer_bg">
|
||||
<el-row type="flex" class="up_footer">
|
||||
<div class="up_left">
|
||||
<el-image
|
||||
:src="logo"></el-image>
|
||||
<el-image :src="logo"></el-image>
|
||||
<div>
|
||||
{{ corporate_name }}
|
||||
</div>
|
||||
|
|
@ -13,15 +12,13 @@
|
|||
<li v-for="(footerItem,footerIndex) in footerList" :key="footerIndex">
|
||||
<a>{{ footerItem.title }}</a>
|
||||
<div class="item" v-for="(footerItems,footerItemsIndex) in footerItem.items" :key="footerItemsIndex">
|
||||
<a>{{ footerItems.name }}</a>
|
||||
<a>{{ footerItems.title }}</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="up_right">
|
||||
<el-image
|
||||
style="width: 100px; height: 100px"
|
||||
src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
|
||||
<img style="width: 100px; height: 100px" src="@/assets/qr2.jpg" alt=""/>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row type="flex" class="down_footer">
|
||||
|
|
@ -52,29 +49,19 @@ export default {
|
|||
footerList: [
|
||||
{
|
||||
title: "关于我们",
|
||||
items: [
|
||||
{
|
||||
name: "企业简介"
|
||||
},
|
||||
{
|
||||
name: "品牌文化"
|
||||
},
|
||||
{
|
||||
name: "企业观点"
|
||||
}
|
||||
]
|
||||
items: []
|
||||
},
|
||||
{
|
||||
title: "新闻资讯",
|
||||
items: [
|
||||
{
|
||||
name: "公司新闻"
|
||||
title: "公司新闻"
|
||||
},
|
||||
{
|
||||
name: "行业动态"
|
||||
title: "行业动态"
|
||||
},
|
||||
{
|
||||
name: "瓷砖百科"
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -82,31 +69,20 @@ export default {
|
|||
title: "形象展示",
|
||||
items: [
|
||||
{
|
||||
name: "资质荣誉"
|
||||
title: "资质荣誉"
|
||||
},
|
||||
{
|
||||
name: "工程案例"
|
||||
title: "工程案例"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "招商加盟",
|
||||
items: [
|
||||
{
|
||||
name: "支持策略"
|
||||
},
|
||||
{
|
||||
name: "加盟条件"
|
||||
}
|
||||
]
|
||||
items: []
|
||||
},
|
||||
{
|
||||
title: "联系我们",
|
||||
items: [
|
||||
{
|
||||
name: "联系方式"
|
||||
}
|
||||
]
|
||||
items: []
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -116,6 +92,9 @@ export default {
|
|||
this.logo = res.data.logo;
|
||||
this.corporate_name = res.data.corporate_name;
|
||||
this.corporate_add = res.data.corporate_add;
|
||||
this.footerList[0].items=res.data.aboutus
|
||||
this.footerList[3].items=res.data.join
|
||||
this.footerList[4].items=res.data.contact_us
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
|
||||
</span>
|
||||
<span class="up_right">
|
||||
{{corporate_name}}
|
||||
{{ corporate_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,13 +24,22 @@
|
|||
<a :href="item.href" class="nav_item">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<ul class="subNav" v-if="item.children">
|
||||
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<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">
|
||||
{{ childrenItem.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="subNav" v-else>
|
||||
<li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
|
||||
<a :href="childrenItem.href">
|
||||
{{ childrenItem.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -60,153 +69,106 @@ export default {
|
|||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
logo:'',
|
||||
corporate_name:'',
|
||||
logo: "",
|
||||
corporate_name: "",
|
||||
navList: [
|
||||
{
|
||||
href: '/',
|
||||
title: '网站首页',
|
||||
href: "/",
|
||||
title: "网站首页"
|
||||
},
|
||||
{
|
||||
href: '/about_us',
|
||||
title: '关于我们',
|
||||
href: "/about_us",
|
||||
title: "关于我们",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
href: "/products_center",
|
||||
title: "产品中心",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
href: "/news",
|
||||
title: "新闻资讯",
|
||||
children: [
|
||||
{
|
||||
href: '/about_us',
|
||||
title: '企业简介'
|
||||
href: "/news",
|
||||
title: "公司新闻"
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '品牌文化'
|
||||
href: "",
|
||||
title: "行业动态"
|
||||
}, {
|
||||
href: '',
|
||||
title: '企业观点'
|
||||
}, {
|
||||
href: '',
|
||||
title: '企业文化'
|
||||
href: "",
|
||||
title: "瓷砖百科"
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '/products_center',
|
||||
title: '产品中心',
|
||||
},
|
||||
{
|
||||
href: "/image_display",
|
||||
title: "形象展示",
|
||||
children: [
|
||||
{
|
||||
href: '',
|
||||
title: '瓷抛大理石'
|
||||
href: "/image_display",
|
||||
title: "资质荣誉"
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '中板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '大板通体大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '银河系大板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '仿古砖600x600'
|
||||
}, {
|
||||
href: '',
|
||||
title: '金刚大理石'
|
||||
}, {
|
||||
href: '',
|
||||
title: '岩板'
|
||||
}, {
|
||||
href: '',
|
||||
title: '微水泥'
|
||||
href: "",
|
||||
title: "工程案例"
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '/news',
|
||||
title: '新闻资讯',
|
||||
children: [
|
||||
{
|
||||
href: '/news',
|
||||
title: '公司新闻'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '行业动态'
|
||||
}, {
|
||||
href: '',
|
||||
title: '瓷砖百科'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '/image_display',
|
||||
title: '形象展示',
|
||||
children: [
|
||||
{
|
||||
href: '/image_display',
|
||||
title: '资质荣誉'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '工程案例'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
href: '/attract_and_join',
|
||||
title: '招商加盟',
|
||||
children: [
|
||||
{
|
||||
href: '/attract_and_join',
|
||||
title: '支持策略'
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
title: '加盟条件'
|
||||
},
|
||||
]
|
||||
}, {
|
||||
href: '/contact_us',
|
||||
title: '联系我们'
|
||||
},
|
||||
{
|
||||
href: "/attract_and_join",
|
||||
title: "招商加盟",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
href: "/contact_us",
|
||||
title: "联系我们"
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
getPublicData().then(res => {
|
||||
// console.log('公共数据',res.data);
|
||||
this.logo = res.data.logo;
|
||||
this.corporate_name = res.data.corporate_name;
|
||||
// this.navList[2].children=res.data.goodscategory_list
|
||||
// sessionStorage.setItem("lang", 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;
|
||||
});
|
||||
let header_bg = document.getElementById('header_bg')
|
||||
let search_header = document.getElementById('search_header')
|
||||
let header_bg = document.getElementById("header_bg");
|
||||
let search_header = document.getElementById("search_header");
|
||||
|
||||
window.onscroll = () => {
|
||||
// 获取滚动距离
|
||||
let top = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
if (top >= 140) {
|
||||
header_bg.style = 'display:none;transition: all 0.6s;'
|
||||
search_header.style = 'position: fixed;top: 0;;display:block;transition: all 0.6s;'
|
||||
header_bg.style = "display:none;transition: all 0.6s;";
|
||||
search_header.style = "position: fixed;top: 0;;display:block;transition: all 0.6s;";
|
||||
} else if (top === 0) {
|
||||
header_bg.style = 'position: static;'
|
||||
search_header.style = 'display:none'
|
||||
header_bg.style = "position: static;";
|
||||
search_header.style = "display:none";
|
||||
}
|
||||
}
|
||||
const that = this
|
||||
};
|
||||
const that = this;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
//这里写要操作的函数
|
||||
window.screenWidth = document.body.clientWidth
|
||||
that.width = window.screenWidth >= 1200
|
||||
})()
|
||||
}
|
||||
},
|
||||
}
|
||||
window.screenWidth = document.body.clientWidth;
|
||||
that.width = window.screenWidth >= 1200;
|
||||
})();
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1660px) {
|
||||
.down_header {
|
||||
width: 1230px !important;
|
||||
|
|
@ -218,6 +180,7 @@ export default {
|
|||
width: 1230px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1480px) {
|
||||
.down_header {
|
||||
width: 1100px !important;
|
||||
|
|
@ -229,6 +192,7 @@ export default {
|
|||
width: 1100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header_bg {
|
||||
transition: all 0.6s;
|
||||
height: 130px;
|
||||
|
|
@ -274,12 +238,14 @@ export default {
|
|||
.down_left {
|
||||
position: absolute;
|
||||
float: left;
|
||||
/deep/.el-image {
|
||||
.el-image__inner{
|
||||
width: 323px!important;
|
||||
height: 85px!important;
|
||||
|
||||
/deep/ .el-image {
|
||||
.el-image__inner {
|
||||
width: 323px !important;
|
||||
height: 85px !important;
|
||||
}
|
||||
}
|
||||
|
||||
> a:hover:after {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,111 +2,63 @@
|
|||
<div class="image_display">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="imageDisplay_bg">
|
||||
<img src="../../assets/image_display.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="imageDisplayTabs" :fatherMethod="handleClick"/>
|
||||
<!--资质荣誉 22是封装图片放大的效果-->
|
||||
<PicturesBox id="honor_list" :image-list="imageAndWord" :type="22"/>
|
||||
<!--工程案例-->
|
||||
<PicturesBox id="project_list" :image-list="projectList" :type="22"/>
|
||||
<PicturesBox :image-list="imageAndWord" :type="22"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import PicturesBox from "@/components/PicturesBox";
|
||||
import {getArticleList} from "@/api";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {ProductsTabsItem,PicturesBox},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
imageDisplayTabs: [
|
||||
{
|
||||
label: '资质荣誉',
|
||||
title: '资质荣誉',
|
||||
name: 'first'
|
||||
},
|
||||
{
|
||||
label: '工程案例',
|
||||
title: '工程案例',
|
||||
name: 'second'
|
||||
}
|
||||
],
|
||||
imageAndWord: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480.jpg'],
|
||||
word: "国家权威检测合格质量信得过产品"
|
||||
}, {
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987sss.jpg",
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987.jpg'],
|
||||
word: "全国产品质量消费者满意品牌"
|
||||
}, {
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898sss.jpg",
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898.jpg'],
|
||||
word: "中国工程建设推荐产品"
|
||||
}, {
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413sss.jpg",
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413.jpg'],
|
||||
word: "中国陶瓷行业十大品牌"
|
||||
}, {
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082sss.jpg",
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082.jpg'],
|
||||
word: "中国政府采购重点推荐产品"
|
||||
}
|
||||
],
|
||||
projectList: [
|
||||
{
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
|
||||
word: '大学城新校区教学楼'
|
||||
},
|
||||
{
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
|
||||
word: '嘉兴中山名都'
|
||||
},
|
||||
{
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
|
||||
word: '蒲田公安局'
|
||||
}, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
|
||||
word: '财政局大厦'
|
||||
}
|
||||
, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
|
||||
word: '西安市雅盛大厦'
|
||||
}, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
|
||||
word: '武汉市金晖大厦'
|
||||
}, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
|
||||
word: '杭州市风情小区'
|
||||
}, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
|
||||
word: '金湖花园'
|
||||
}, {
|
||||
imgUrl: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
|
||||
word: '碧桂园'
|
||||
},
|
||||
],
|
||||
imageAndWord: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getArticleList(2)
|
||||
},
|
||||
methods: {
|
||||
//获取新闻列表
|
||||
getArticleList(classId,page,limit){
|
||||
getArticleList({
|
||||
classid: classId,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
this.imageAndWord = res.data.list;
|
||||
if(res.data.list.length==0){
|
||||
this.showNull=true
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
const honor_list = document.getElementById('honor_list');
|
||||
const project_list = document.getElementById('project_list');
|
||||
if (tab.index == 0) {
|
||||
honor_list.style.display = "block"
|
||||
project_list.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
project_list.style.display = "block"
|
||||
honor_list.style.display = "none"
|
||||
if(tab.index==0){
|
||||
this.getArticleList(2)
|
||||
}else if(tab.index==1){
|
||||
this.getArticleList(8)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -117,16 +69,22 @@ export default {
|
|||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.nullData{
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
.image_display {
|
||||
min-width: 1300px;
|
||||
|
||||
.imageDisplay_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
#project_list {
|
||||
|
|
|
|||
|
|
@ -25,6 +25,3 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@ import {getArticleInfo} from "@/api";
|
|||
|
||||
export default {
|
||||
name: "detail",
|
||||
props: {
|
||||
newsId: Number,
|
||||
classIndex: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs_title: '公司新闻',
|
||||
|
|
@ -42,7 +46,12 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
getArticleInfo(6).then(res => {
|
||||
if(this.classIndex==1){
|
||||
this.tabs_title='行业动态'
|
||||
}else if(this.classIndex==2){
|
||||
this.tabs_title='瓷砖百科'
|
||||
}
|
||||
getArticleInfo(this.newsId).then(res => {
|
||||
this.htmlStr=res.data.articleinfo.content
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,18 +2,21 @@
|
|||
<div class="news">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="news_bg">
|
||||
<img src="../../assets/news.jpg" alt=""/>
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<ProductsTabsItem :tab-list="newsTab" :fatherMethod="handleClick"/>
|
||||
<!--图片栏-->
|
||||
<PicturesBox :image-list="imageAndWord" v-show="company_news"/>
|
||||
<PicturesBox :image-list="industryList" v-show="industry_dynamics"/>
|
||||
<PicturesBox :image-list="ceramicList" v-show="ceramic"/>
|
||||
<PicturesBox :image-list="imageAndWord" :type="11" v-show="showImage" @getNewsIdClick="getNewsId"/>
|
||||
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="20" :pageSize="10" v-show="showPagination"/>
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="limit" @pageChange="handleChangePage" v-show="showPagination"/>
|
||||
|
||||
<!--新闻详情-->
|
||||
<detail v-show="showDetail"/>
|
||||
<detail :newsId="newsId" :classIndex="classIndex" v-if="showDetail"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -22,17 +25,21 @@ import Pagination from "@/components/Pagination";
|
|||
import PicturesBox from "@/components/PicturesBox";
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import Detail from "@/views/news/detail";
|
||||
import {getArticleList} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Detail, PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
showPagination:true,
|
||||
page:1,
|
||||
limit:10,
|
||||
total:0,
|
||||
newsId:6,
|
||||
classIndex:0,
|
||||
showDetail:false,
|
||||
company_news:true,
|
||||
industry_dynamics:false,
|
||||
ceramic:false,
|
||||
showImage:true,
|
||||
showPagination:true,
|
||||
newsTab: [
|
||||
{
|
||||
title: '公司新闻',
|
||||
|
|
@ -45,168 +52,59 @@ export default {
|
|||
name: 'third'
|
||||
},
|
||||
],
|
||||
imageAndWord: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||
date: "2022.7.28"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||
date: "2022.7.28"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
|
||||
word: "【艺鹏·精品推介1】高级质感，构筑低奢至美的生活空间",
|
||||
date: "2022.7.28"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220707/16571639728388960s.jpg",
|
||||
word: "EIP CERAMICS | 800x800通体大理石任意连纹，品味独特的艺术空间。",
|
||||
date: "2022.7.7"
|
||||
}
|
||||
],
|
||||
industryList: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447712213262052s.jpg",
|
||||
word: "陶卫企业面临成本挑战",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
],
|
||||
ceramicList: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20181214/15447713189934462s.jpg",
|
||||
word: "陶瓷一线品牌需精选 升级你的空间质量",
|
||||
date: "2018.10.14"
|
||||
}
|
||||
]
|
||||
imageAndWord: [],
|
||||
showNull:false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getArticleList(5)
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
// const company_news = document.getElementById('company_news');
|
||||
// const industry_dynamics = document.getElementById('industry_dynamics');
|
||||
// const ceramic = document.getElementById('ceramic');
|
||||
if (tab.index == 0) {
|
||||
this.company_news=true
|
||||
this.industry_dynamics=false
|
||||
this.ceramic=false
|
||||
this.showPagination=true
|
||||
// company_news.style.display = "block"
|
||||
// industry_dynamics.style.display = "none"
|
||||
// ceramic.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
this.company_news=false
|
||||
this.industry_dynamics=true
|
||||
this.ceramic=false
|
||||
this.showDetail=false
|
||||
getNewsId(value){
|
||||
this.newsId=value
|
||||
if(this.newsId!==0){
|
||||
this.showDetail=true
|
||||
this.showPagination=false
|
||||
// company_news.style.display = "none"
|
||||
// industry_dynamics.style.display = "block"
|
||||
// ceramic.style.display = "none"
|
||||
} else if (tab.index == 2) {
|
||||
this.company_news=false
|
||||
this.industry_dynamics=false
|
||||
this.ceramic=true
|
||||
this.showDetail=false
|
||||
this.showPagination=false
|
||||
// company_news.style.display = "none"
|
||||
// industry_dynamics.style.display = "none"
|
||||
// ceramic.style.display = "block"
|
||||
this.showImage=false
|
||||
}
|
||||
},
|
||||
|
||||
//获取新闻列表
|
||||
getArticleList(classId,page,limit){
|
||||
getArticleList({
|
||||
classid: classId,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
}).then(res => {
|
||||
this.total=res.data.count
|
||||
this.imageAndWord = res.data.list;
|
||||
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)
|
||||
if (tab.index == 0) {
|
||||
this.getArticleList(5)
|
||||
} else if (tab.index == 1) {
|
||||
this.getArticleList(6)
|
||||
} else if (tab.index == 2) {
|
||||
this.getArticleList(7)
|
||||
}
|
||||
},
|
||||
//新闻分页
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -215,7 +113,12 @@ export default {
|
|||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.nullData{
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
#industry_dynamics {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -242,11 +145,12 @@ export default {
|
|||
|
||||
|
||||
.news_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 360px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.list2 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 产品标签栏-->
|
||||
<ProductsTabsItem :title="0"/>
|
||||
<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>
|
||||
|
|
@ -12,17 +12,17 @@
|
|||
</div>
|
||||
<div class="img_right">
|
||||
<div class="title">
|
||||
产品名称：WH715T038
|
||||
产品名称：{{detailList.name}}
|
||||
</div>
|
||||
<div class="space_style">
|
||||
<p>产品分类：750x1500MM大板时代</p>
|
||||
<p>适用空间：客厅瓷砖,书房瓷砖,卧室瓷砖,餐厅瓷砖,大厅瓷砖</p>
|
||||
<p>所属风格：简约风格,新中式风格,工业风格</p>
|
||||
<p>产品分类：{{classifyName}}</p>
|
||||
<p>适用空间：{{detailList.space}}</p>
|
||||
<p>所属风格：{{detailList.style}}</p>
|
||||
</div>
|
||||
<div class="img_part">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imgList" :key="index" @click.stop="changeMainImg(index)">
|
||||
<img :src="item.src" alt=""/>
|
||||
<img :src="item.thumb_image" alt=""/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -36,12 +36,28 @@
|
|||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="small">上一款产品</el-button>
|
||||
<el-button size="small">下一款产品</el-button>
|
||||
<el-button size="small" @click="prevProduct">上一款产品</el-button>
|
||||
<el-button size="small" @click="nextProduct">下一款产品</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 同类产品推荐 -->
|
||||
<div class="sameProducts">
|
||||
<div class="same_title">同类产品推荐</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li v-for="(item,index) in goodsList" :key="index">
|
||||
<div class="sameItem">
|
||||
<img :src="item.image" alt=""/>
|
||||
<div class="info">{{item.name}}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -50,33 +66,52 @@
|
|||
|
||||
<script>
|
||||
import ProductsTabsItem from "@/components/ProductsTabsItem";
|
||||
import { getGoodsInfo} from "@/api";
|
||||
|
||||
export default {
|
||||
name: "detail",
|
||||
components: {ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
mainSrc: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079.jpg',
|
||||
imgList: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712904436079s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712901631818s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712913084897s.jpg'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20220629/16564712911963193s.jpg'
|
||||
},
|
||||
]
|
||||
showNull:false,
|
||||
mainSrc: '',
|
||||
detailList:[],
|
||||
imgList: [],
|
||||
classifyName:'',
|
||||
goodsList:[]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
getGoodsInfo(this.$route.query.classid).then(res => {
|
||||
this.goodsList=res.data.goods_lists
|
||||
if(res.data.goods_lists.length==0){
|
||||
this.showNull=true
|
||||
}
|
||||
this.detailList = res.data.info
|
||||
this.classifyName = res.data.info.goods_category.name
|
||||
this.imgList = res.data.img_list
|
||||
this.mainSrc=this.imgList[0].ori_image
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//上一款产品
|
||||
prevProduct(){
|
||||
// for (let i = 0; i < this.goodsList.length; i++) {
|
||||
// console.log(this.goodsList[i].id);
|
||||
// this.detailList=this.goodsList[0]
|
||||
// this.classifyName = this.goodsList[0].goods_category.name
|
||||
// this.imgList = res.data.img_list
|
||||
// this.mainSrc=this.imgList[0].ori_image
|
||||
// }
|
||||
// // console.log(this.detailList.id);
|
||||
},
|
||||
//下一款产品
|
||||
nextProduct(){
|
||||
|
||||
},
|
||||
//点击小图切换主览图
|
||||
changeMainImg(index) {
|
||||
this.mainSrc = this.imgList[index].src
|
||||
this.mainSrc = this.imgList[index].ori_image
|
||||
},
|
||||
/**
|
||||
* 分享到微博
|
||||
|
|
@ -112,7 +147,12 @@ export default {
|
|||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.nullData{
|
||||
display: block;
|
||||
height: 150px;
|
||||
line-height: 150px;
|
||||
text-align: center;
|
||||
}
|
||||
/deep/ .el-button:focus, .el-button:hover {
|
||||
color: #333;
|
||||
border-color: #ddd;
|
||||
|
|
@ -138,7 +178,7 @@ export default {
|
|||
background-color: #f3f3f3;
|
||||
|
||||
.img_text_content {
|
||||
width: 1360px;
|
||||
//width: 1360px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
|
||||
|
|
@ -151,7 +191,6 @@ export default {
|
|||
margin-right: 30px;
|
||||
|
||||
img {
|
||||
margin-top: 25%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -198,8 +237,7 @@ export default {
|
|||
|
||||
img {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin-top: 25%;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -218,5 +256,40 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.sameProducts{
|
||||
padding: 50px 0;
|
||||
background-color: #f4f4f4;
|
||||
.same_title{
|
||||
display: inline;
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 0 15px 0;
|
||||
padding: 0 0 15px 0;
|
||||
font-size: 18px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
display: inline;
|
||||
width: 20%;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
.sameItem{
|
||||
display: block;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.info{
|
||||
padding: 5px 0 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,22 +7,22 @@
|
|||
<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="classifyList spaceList">
|
||||
<div class="spaceList">
|
||||
<strong>分类：</strong>
|
||||
<ul>
|
||||
<li v-for="item in classifyList">{{ item.name }}</li>
|
||||
<li v-for="(item,index) in classifyList" @click="changeClassify(item,index)" :id="'classify_'+index">{{ item.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spaceList">
|
||||
<strong>空间：</strong>
|
||||
<ul>
|
||||
<li v-for="item in spaceList">{{ item.title }}</li>
|
||||
<li v-for="(item,index) in spaceList" @click="changeSpace(item,index)" :id="'space_'+index">{{ item.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="styleList spaceList">
|
||||
<div class="spaceList">
|
||||
<strong>风格：</strong>
|
||||
<ul>
|
||||
<li v-for="item in styleList">{{ item.title }}</li>
|
||||
<li v-for="(item,index) in styleList" @click="changeStyle(item,index)" :id="'style_'+index">{{ item.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -30,7 +30,10 @@
|
|||
</div>
|
||||
<!--图片栏-->
|
||||
<PicturesBox :image-list="imgList" :type="33"/>
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="pageSize"/>
|
||||
<Pagination :currentPage="1" :total="total" :pageSize="pageSize" @pageChange="handleChangePage" v-if="showPagination"/>
|
||||
<div class="nullData" v-if="showNull">
|
||||
暂时没有数据！
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -45,12 +48,15 @@ export default {
|
|||
components: {PicturesBox, Pagination, ProductsTabsItem},
|
||||
data() {
|
||||
return {
|
||||
showNull:false,
|
||||
showPagination:true,
|
||||
classifyList: [],
|
||||
spaceList: [],
|
||||
styleList: [],
|
||||
pageSize:10,
|
||||
pageSize:12,
|
||||
total:0,
|
||||
imgList: []
|
||||
imgList: [],
|
||||
classIndex:''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -69,16 +75,55 @@ export default {
|
|||
page:1,
|
||||
limit:this.pageSize,
|
||||
}).then(res => {
|
||||
// this.total=res.data.count
|
||||
this.total=res.data.count
|
||||
this.imgList=res.data.list
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//获取产品列表
|
||||
getGoodsList(classid,page,limit,stylename,spacename){
|
||||
getGoodsList({
|
||||
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
|
||||
}
|
||||
});
|
||||
},
|
||||
//点击一级分类切换数据及切换不同二级分类
|
||||
handleClick(tab) {
|
||||
let index = parseInt(tab.index) + 1
|
||||
this.classIndex=index
|
||||
getGoodsCategory(index).then(res => {
|
||||
this.classifyList = res.data.categorylist
|
||||
});
|
||||
this.getGoodsList(index,1,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;"
|
||||
},
|
||||
//点击空间分类,筛选产品数据
|
||||
changeSpace(item,index){
|
||||
this.getGoodsList(this.classIndex,1,this.pageSize,'',item.title)
|
||||
document.getElementById('space_'+index).style="color: #f00;text-decoration: underline;"
|
||||
},
|
||||
//点击风格分类,筛选产品数据
|
||||
changeStyle(item,index){
|
||||
this.getGoodsList(this.classIndex,1,this.pageSize,item.title,'')
|
||||
document.getElementById('style_'+index).style="color: #f00;text-decoration: underline;"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -88,7 +133,12 @@ export default {
|
|||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.nullData{
|
||||
display: block;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
.products_center {
|
||||
min-width: 1300px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue