邓洁 : 产品中心,新闻详情页面样式初步完成 #11
Binary file not shown.
|
After Width: | Height: | Size: 969 B |
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div class="pagination">
|
||||
<el-button size="small" @click="previous">上一页</el-button>
|
||||
<el-pagination
|
||||
background
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="current"
|
||||
layout="pager"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
ref="pageGroup"
|
||||
>
|
||||
</el-pagination>
|
||||
<el-button size="small" @click="next">下一页</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Pagination",
|
||||
props: {
|
||||
currentPage: Number,
|
||||
pageSize: Number,
|
||||
total: Number,
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentPage: {
|
||||
handler() {
|
||||
this.current = this.currentPage
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.current = this.currentPage
|
||||
},
|
||||
methods:{
|
||||
handleCurrentChange(val) {
|
||||
//console.log(val)
|
||||
this.$emit('pageChange', val)
|
||||
},
|
||||
previous() {
|
||||
this.$refs.pageGroup.prev()
|
||||
},
|
||||
next() {
|
||||
this.$refs.pageGroup.next()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pagination{
|
||||
padding: 40px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
/deep/.el-button{
|
||||
padding: 3px 15px;
|
||||
border-radius: unset;
|
||||
border: 1px solid #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
/deep/.el-button:hover{
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
}
|
||||
/deep/.el-pager li:hover{
|
||||
color: #fff!important;
|
||||
background-color: #333!important;
|
||||
}
|
||||
/deep/.el-pager li.active {
|
||||
color: #fff!important;
|
||||
background-color: #333!important;
|
||||
}
|
||||
/deep/.el-pagination{
|
||||
padding: 0;
|
||||
}
|
||||
/deep/.el-pagination.is-background .el-pager li {
|
||||
display: inline-block;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 16px;
|
||||
border: 1px solid #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
padding: 50px 0 60px 0;
|
||||
background-color: #f9f9f9;
|
||||
position: relative;
|
||||
min-width: 1270px;
|
||||
min-width: 1300px;
|
||||
display: flex;
|
||||
.grid_box {
|
||||
width: 1360px;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
<el-image
|
||||
class="img"
|
||||
:src="item.src"
|
||||
:preview-src-list="imgBigList">
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
</div>
|
||||
<div class="case_info">{{ item.projectName }}</div>
|
||||
|
|
@ -43,43 +43,40 @@ export default {
|
|||
projectList: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
|
||||
projectName: '大学城新校区教学楼'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
|
||||
projectName: '嘉兴中山名都'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
|
||||
projectName: '蒲田公安局'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
|
||||
projectName: '财政局大厦'
|
||||
}
|
||||
, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
|
||||
projectName: '西安市雅盛大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
|
||||
projectName: '武汉市金晖大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
|
||||
projectName: '杭州市风情小区'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||
bigSrc:['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
|
||||
projectName: '金湖花园'
|
||||
},
|
||||
|
||||
],
|
||||
imgBigList:[
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg',
|
||||
'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg',
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,11 @@ const routes = [
|
|||
name: 'index',
|
||||
component: () => import('../views/index/index')
|
||||
},
|
||||
{
|
||||
path: '/about_us',
|
||||
name: 'about_us',
|
||||
component: () => import('../views/aboutUs/index')
|
||||
},
|
||||
{
|
||||
path: '/news',
|
||||
name: 'news',
|
||||
|
|
@ -27,7 +32,20 @@ const routes = [
|
|||
{
|
||||
path: '/image_display',
|
||||
name: 'image_display',
|
||||
component: () => import('../views/ImageDisplay/index')
|
||||
component: () => import('../views/imageDisplay/index')
|
||||
},
|
||||
{
|
||||
path: '/attract_and_join',
|
||||
name: 'attract_and_join',
|
||||
component: () => import('../views/attractAndJoin/index')
|
||||
}, {
|
||||
path: '/contact_us',
|
||||
name: 'contact_us',
|
||||
component: () => import('../views/contactUs/index')
|
||||
}, {
|
||||
path: '/products_center',
|
||||
name: 'products_center',
|
||||
component: () => import('../views/productsCenter/index')
|
||||
},
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<div class="about_us">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="about_us_bg"></div>
|
||||
<!--标签栏 -->
|
||||
<div class="contact_us_border">
|
||||
<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">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="企业简介" name="first">关于我们</el-tab-pane>
|
||||
<el-tab-pane label="品牌文化" name="second">关于我们</el-tab-pane>
|
||||
<el-tab-pane label="企业观点" name="third">关于我们</el-tab-pane>
|
||||
<el-tab-pane label="企业文化" name="four">关于我们</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<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="introduce" id="introduce">
|
||||
<p v-for="(item,index) in pList" :key="index">
|
||||
{{ item.text }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="introduce band" id="band">
|
||||
<p v-for="(item,index) in bandList" :key="index">
|
||||
<span>{{ item.text1 }}</span>
|
||||
<span>{{ item.text2 }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="introduce band" id="ideas">
|
||||
<p v-for="(item,index) in ideaList" :key="index">
|
||||
<span>{{ item.text1 }}</span>
|
||||
<span>{{ item.text2 }}</span>
|
||||
<span>{{ item.text3 }}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="culture" id="culture">
|
||||
<!-- <table>-->
|
||||
<!-- <tbody>-->
|
||||
<!-- <tr v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">-->
|
||||
<!-- <td class="culture_right">-->
|
||||
<!-- <!– <div >–>-->
|
||||
<!-- <span>{{ item.text1 }}</span>-->
|
||||
<!-- <span>{{ item.text2 }}</span>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- </td>-->
|
||||
<!-- <td class="culture_img">-->
|
||||
<!-- <img :src="item.src" alt=""/>-->
|
||||
<!-- </td>-->
|
||||
|
||||
<!-- </tr>-->
|
||||
<!-- </tbody>-->
|
||||
<!-- </table>-->
|
||||
<div id="culture_content" v-for="(item,index) in cultureList" :key="index" :class="'cul_'+index">
|
||||
<div class="culture_img">
|
||||
<img :src="item.src" alt=""/>
|
||||
</div>
|
||||
<div class="culture_right">
|
||||
<!-- <div >-->
|
||||
<span>{{ item.text1 }}</span>
|
||||
<span>{{ item.text2 }}</span>
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
pList: [
|
||||
{
|
||||
text: '广东祥睿陶瓷有限公司，于2011年在中国佛山成立，在成立之初，产品精准定位于大理石品类，为设计师打造简奢风格提供瓷砖材料素材。专注于产品的研发，从整体空间应用方向进行单品的开发研究，获得国内外众多设计师的青睐与认可，海外亦有部分专卖店展示。'
|
||||
},
|
||||
{
|
||||
text: '公司依托便利的区位和人才优势，积极容身于国际圈，以其独特且具备设计韵味的产品体系，在国际舞台上崭露头角。凭借其先天的国际基因，产品开发潮流化，且与意大利知名瓷砖设计机构进行过多次合作。'
|
||||
},
|
||||
{
|
||||
text: '艺鹏瓷砖注重于产品的环保性能，将应用美学与环保健康结合起来，为用户寻求高品质瓷砖应用解决方案，由于其专注的匠心精神，先后获得业内多项殊荣。'
|
||||
},
|
||||
{
|
||||
text: '现面向全国各地开展招商加盟业务，专业的团队，打造服务一体化的招商体系，公司以“诚信、务实、全力支持”的加盟理念为每个渴望成功的加盟商提供投资少、风险低、增值快、市场潜力无限的投资机会，不断为广大加盟商创造盈利空间，我们将与加盟商一起不断创新、追求共赢、共享全新市场的无限商机。我们深信，加入成为艺鹏特许经营加盟商，将为您自己开创出一个不一样的成就人生！'
|
||||
}
|
||||
],
|
||||
bandList: [
|
||||
{
|
||||
text1: '品牌主张：把人文注入生活、品鉴艺术魅力、享受知性人生',
|
||||
text2: '艺鹏主张利用空间的创新，把人们的生活从物质的享受，升华到一个精神享受境界。主张把人文元素通过空间存在的表现形式注入到生活中，而使生活处在一种艺术的魅力氛围中，静静品味人生的点点滴滴。'
|
||||
},
|
||||
{
|
||||
text1: '品牌气质：高贵、艺术、完美、人文、知性',
|
||||
text2: '高贵是艺鹏的外在气氛你，艺术是艺鹏的表现形象。完美是艺鹏的目标追求，人文是艺鹏的品牌内涵，知性是艺鹏的人生解读。'
|
||||
}, {
|
||||
text1: '品牌文化：人文创新完美艺术空间、知性引领高贵时尚潮流',
|
||||
text2: '艺鹏以人文的魅力运用到空间创造中，使空间艺术趋于一种完美境界；艺鹏的这种知性艺术手法，对空间、对人生、都是一种旗帜性的标榜；是一种领先于时代的思想和品位追求也必将引领时尚的潮流，把人生导向高贵的商品高度。'
|
||||
}, {
|
||||
text1: '品牌理念：提升人居生活品味、打造知性时尚空间',
|
||||
text2: '艺鹏的最终宗旨是提升人居生活品味，过程是打造知性时尚的空间。通过空间的打造和创新，来承载生活的无限美好和梦想。'
|
||||
}, {
|
||||
text1: '产品思路：以人文思维、专注陶瓷科技；做高端、知性的文化陶瓷',
|
||||
text2: '艺鹏不为产品而做产品，艺鹏使用一种艺术的追求来雕琢空间，传承人文精神，通过陶瓷的科技创新来实现；突破传统的空间文化，提倡文化陶瓷的新理念，打造一种高端的，知性人生。'
|
||||
},
|
||||
],
|
||||
ideaList: [
|
||||
{
|
||||
text1: '企业文化宣言',
|
||||
text2: '以文化文本，凝聚人才，铸造精品，历练价值，成就品牌'
|
||||
},
|
||||
{
|
||||
text1: '企业文化核心',
|
||||
text2: '团队致胜，倡导自我奋斗，自我超越；通过团队协作实现企业与员工的共同发展，建立共同价值信仰，以共同目标为行动的出发点与落脚点；在职能效率的基础上加强团队协作，互为包容那个，互为扶助，求和力，提效率实现客户、经销商、员工、社会以及企业自身的多方共赢。'
|
||||
}, {
|
||||
text1: '企业精神',
|
||||
text2: '团结、敬业、务实、创新'
|
||||
}, {
|
||||
text1: '企业目标',
|
||||
text2: '以成为中国建筑陶瓷行业顶级制造商为目标，以顶尖科技与创新思想为两翼，致力将中国建陶推向世界，打造百年世界品牌。'
|
||||
}, {
|
||||
text1: '企业风格',
|
||||
text2: '实实在在做人，踏踏实实做事；真真切切承诺，切切实实服务。'
|
||||
}, {
|
||||
text1: '企业经营方针',
|
||||
text2: '专注本业，以客为尊；持续发展，多赢共荣。'
|
||||
}, {
|
||||
text1: '工作作风',
|
||||
text2: '快速反应，日事日毕，不找借口，全力以赴。 品牌定位：艺术创新、诗化人生；高端文艺、知性陶瓷',
|
||||
text3: '艺鹏是一种建立在艺术上的诗画人生，有着诗的气质，又有着画的美感；在此的延续上，艺鹏展示的是一种高端的文艺，是一种人生的智慧之美。这就是艺鹏的知性本质之所在。也是艺鹏区别于其他品牌的个性所在。'
|
||||
}
|
||||
],
|
||||
cultureList: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351034036451.jpg',
|
||||
text1: '互 信',
|
||||
text2: '互相信任，企业与员工、消费者、合作伙伴、供应商相互之间需形成良好的信任基础，做到心口如一，言行一致，才能以行取信。内部信任，重在塑造企业文化环境，使员工与企业之间达成心理契约， 外部信任，重在建立真实坦诚的合作关系，使其与企业达成一致的思想意识。'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351088324141.jpg',
|
||||
text1: '责 任',
|
||||
text2: '责任担当，全体员工具有强烈的责任意识，卓越的责任能力，自觉的责任行为，建立完整有序、纵横交错的责任链，勇于承担责任，主动把责任转化为自觉行动，转化为推动企业发展的统一意识，转化为推动工作的强劲动力，做到对社会负责，对企业负责，对客户负责，对同事负责，对自己负责。树立责任意识，以感恩的心态回馈社会。'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351138654829.jpg',
|
||||
text1: '创 新',
|
||||
text2: '持续改善工艺、产品、管理等各方面，我们以先进的理念，灵活应变的品牌策略，勇于拼搏不断完善的心态，创造出高品质产品；结合公司自身状况，以一点一滴的改善和进步，积聚成公司跨越式的发展；我们将加大激励改善创新机制，鼓励员工勇于开拓超越自我，以顾客需求为导向，不断推出先进独特的，极赋时代感的产品及服务。'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181215/15448351185978147.jpg',
|
||||
text1: '共 赢',
|
||||
text2: '携手共赢，携手式合作的基础，共赢式合作的目的；树立协作共赢，合作精神，与合作伙伴共同成长，相互尊重和信任，共享成果，是我们企业和客户共同追求的目标；宽容待人，与客户及伙伴风雨同舟，携手开拓陶瓷行业的新空间和新市场，共同实现互利和双赢。'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab) {
|
||||
const introduce = document.getElementById('introduce');
|
||||
const band = document.getElementById('band');
|
||||
const ideas = document.getElementById('ideas');
|
||||
const culture = document.getElementById('culture');
|
||||
if (tab.index == 0) {
|
||||
introduce.style.display = "block"
|
||||
band.style.display = "none"
|
||||
ideas.style.display = "none"
|
||||
culture.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
introduce.style.display = "none"
|
||||
band.style.display = "block"
|
||||
ideas.style.display = "none"
|
||||
culture.style.display = "none"
|
||||
} else if (tab.index == 2) {
|
||||
introduce.style.display = "none"
|
||||
band.style.display = "none"
|
||||
ideas.style.display = "block"
|
||||
culture.style.display = "none"
|
||||
} else if (tab.index == 3) {
|
||||
introduce.style.display = "none"
|
||||
band.style.display = "none"
|
||||
ideas.style.display = "none"
|
||||
culture.style.display = "block"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#band {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ideas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#culture {
|
||||
display: none;
|
||||
margin: 60px 0;
|
||||
}
|
||||
|
||||
* {
|
||||
font: 16px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs {
|
||||
position: relative;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 0 20px !important;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
border-right: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tab-pane {
|
||||
color: #333;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.about_us {
|
||||
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;
|
||||
}
|
||||
|
||||
.contact_us_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.introduce {
|
||||
padding: 40px 0;
|
||||
font-size: 16px;
|
||||
|
||||
p {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.band {
|
||||
p {
|
||||
padding-bottom: 50px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cul_1 {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.cul_3 {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#culture_content {
|
||||
display: flex;
|
||||
padding: 10px 10px 40px 10px;
|
||||
|
||||
.culture_img {
|
||||
padding: 10px;
|
||||
margin:0 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.culture_right {
|
||||
padding: 10px;
|
||||
|
||||
span:first-child {
|
||||
display: block;
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
white-space: normal;
|
||||
padding: 0px;
|
||||
line-height: 32px;
|
||||
color: rgb(94, 94, 94);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div class="Attract_join">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="Attract_join_bg">
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<div class="Attract_join_border">
|
||||
<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">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="支持策略" name="first">支持策略</el-tab-pane>
|
||||
<el-tab-pane label="加盟条件" name="second">加盟条件</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 支持策略 -->
|
||||
<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_title">
|
||||
支持策略 / SUPPORT STRATEGY
|
||||
</div>
|
||||
</div>
|
||||
<!--加盟条件-->
|
||||
<div class="support" id="join">
|
||||
<div class="support_title">
|
||||
加盟条件 / FRANCHISE CONDITIONS
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#join{
|
||||
display: none;
|
||||
}
|
||||
/deep/ .el-tabs {
|
||||
position: relative;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 0 20px !important;
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
border-right: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tab-pane {
|
||||
color: #333;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.Attract_join {
|
||||
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;
|
||||
}
|
||||
|
||||
.Attract_join_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.support {
|
||||
padding: 70px 0;
|
||||
|
||||
.support_title {
|
||||
color: #333;
|
||||
display: inline;
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0 0 35px 0;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<template>
|
||||
<div class="contact_us">
|
||||
<!-- 顶部图片 -->
|
||||
<div class="contact_us_bg">
|
||||
</div>
|
||||
<!--标签栏 -->
|
||||
<div class="contact_us_border">
|
||||
<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">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="联系方式" name="first">联系我们</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="contact_content">
|
||||
<p class="title">
|
||||
<strong>广东祥睿陶瓷有限公司</strong>
|
||||
</p>
|
||||
<p class="address">
|
||||
地址：佛山市禅城区华夏陶瓷博览城陶博会展三环路5座B3
|
||||
</p>
|
||||
<p class="phone">电话：0757-83551526</p>
|
||||
<div style="margin-top: 30px;margin-bottom: 50px">
|
||||
<img src="http://www.yipengtaoci.com/upfiles/images/20200706/15940300499317991.jpg" alt=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .el-tabs {
|
||||
position: relative;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 0 20px !important;
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
border-right: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tab-pane {
|
||||
color: #333;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.contact_us {
|
||||
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;
|
||||
}
|
||||
|
||||
.contact_us_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.contact_content {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
|
||||
.title {
|
||||
padding-bottom: 50px;
|
||||
|
||||
strong {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.address {
|
||||
line-height: 28.8px;
|
||||
font-size: 16px;
|
||||
color: rgb(68, 68, 68);
|
||||
font-family: 微软雅黑, "Microsoft YaHei", Arial, sans-serif;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.phone{
|
||||
font-size: 16px;
|
||||
line-height: 28.8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
title: '网站首页',
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
href: '/about_us',
|
||||
title: '关于我们',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
href: '/products_center',
|
||||
title: '产品中心',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
}
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
href: '/attract_and_join',
|
||||
title: '招商加盟',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -159,7 +159,7 @@ export default {
|
|||
},
|
||||
]
|
||||
}, {
|
||||
href: '',
|
||||
href: '/contact_us',
|
||||
title: '联系我们'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -26,7 +26,11 @@
|
|||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
</a>
|
||||
|
|
@ -48,7 +52,12 @@
|
|||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.src" alt="">
|
||||
<!-- <img :src="item.src" alt="">-->
|
||||
<el-image
|
||||
class="img"
|
||||
:src="item.src"
|
||||
:preview-src-list="item.bigSrc">
|
||||
</el-image>
|
||||
</span>
|
||||
<span class="inf">{{ item.projectName }}</span>
|
||||
</a>
|
||||
|
|
@ -70,51 +79,65 @@ export default {
|
|||
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: [
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711.jpg'],
|
||||
projectName: '大学城新校区教学楼'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969.jpg'],
|
||||
projectName: '嘉兴中山名都'
|
||||
},
|
||||
{
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313.jpg'],
|
||||
projectName: '蒲田公安局'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532.jpg'],
|
||||
projectName: '财政局大厦'
|
||||
}
|
||||
, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916.jpg'],
|
||||
projectName: '西安市雅盛大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848.jpg'],
|
||||
projectName: '武汉市金晖大厦'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901.jpg'],
|
||||
projectName: '杭州市风情小区'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939.jpg'],
|
||||
projectName: '金湖花园'
|
||||
}, {
|
||||
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
|
||||
bigSrc: ['http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435.jpg'],
|
||||
projectName: '碧桂园'
|
||||
},
|
||||
],
|
||||
|
|
@ -211,7 +234,7 @@ export default {
|
|||
}
|
||||
|
||||
.image_display {
|
||||
min-width: 1260px;
|
||||
min-width: 1300px;
|
||||
|
||||
.imageDisplay_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448387657921217.jpg");
|
||||
|
|
@ -21,54 +21,104 @@
|
|||
<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">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imageAndWord"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<!-- 公司新闻-->
|
||||
<div id="company_news">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imageAndWord"
|
||||
:key="index" @click="handleClickNews(index)">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--页码-->
|
||||
<div class="pagination">
|
||||
<table style="margin: 0 auto">
|
||||
<tbody>
|
||||
<tr style="width: auto">
|
||||
<td class="prev">
|
||||
<a href="">上一页</a>
|
||||
</td>
|
||||
<td class="prev">
|
||||
<a href="">1</a>
|
||||
</td>
|
||||
<td class="prev">
|
||||
<a href="">2</a>
|
||||
</td>
|
||||
<td class="prev">
|
||||
<a href="">下一页</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--页码-->
|
||||
<Pagination :currentPage="1" :total="20" :pageSize="10" />
|
||||
</div>
|
||||
<!-- 行业动态-->
|
||||
<div id="industry_dynamics">
|
||||
<ul>
|
||||
<li v-for="(item,index) in industryList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 瓷砖百科-->
|
||||
<div id="ceramic">
|
||||
<ul>
|
||||
<li v-for="(item,index) in ceramicList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="dates">{{ item.date }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<!--新闻详情 -->
|
||||
<div class="news_detail" id="news_detail">
|
||||
<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="detail">
|
||||
<div class="detail_top">
|
||||
<div class="tabs">
|
||||
当前位置：
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{tabs_title}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="shares">
|
||||
分享到：
|
||||
<span class="hover-pointer" @click="shareToMicroblog()">
|
||||
<img src="@/assets/weibo.png" alt=""/>
|
||||
</span>
|
||||
<span class="qqIcon hover-pointer" @click="shareToQQRom()">
|
||||
<img src="@/assets/QQKJ.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <vue2-editor v-model="htmlStr"></vue2-editor>-->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/components/Pagination";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Pagination},
|
||||
data() {
|
||||
return {
|
||||
tabs_title:'公司新闻',
|
||||
// htmlStr: '',
|
||||
activeName: 'first',
|
||||
imageAndWord: [
|
||||
{
|
||||
|
|
@ -131,22 +181,141 @@ export default {
|
|||
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"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event);
|
||||
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) {
|
||||
company_news.style.display = "block"
|
||||
industry_dynamics.style.display = "none"
|
||||
ceramic.style.display = "none"
|
||||
} else if (tab.index == 1) {
|
||||
company_news.style.display = "none"
|
||||
industry_dynamics.style.display = "block"
|
||||
ceramic.style.display = "none"
|
||||
} else if (tab.index == 2) {
|
||||
company_news.style.display = "none"
|
||||
industry_dynamics.style.display = "none"
|
||||
ceramic.style.display = "block"
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 分享到微博
|
||||
*/
|
||||
shareToMicroblog() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://service.weibo.com/share/share.php?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 分享到qq空间
|
||||
*/
|
||||
shareToQQRom() {
|
||||
//跳转地址
|
||||
window.open(
|
||||
"https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
|
||||
encodeURIComponent(location.href)
|
||||
// "&title=" +
|
||||
// this.sysInfo +
|
||||
// "&summary=" +
|
||||
// this.sysInfo
|
||||
);
|
||||
},
|
||||
/**
|
||||
* 点击图片进入详情页
|
||||
*/
|
||||
handleClickNews(index){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
#industry_dynamics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ceramic {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs {
|
||||
position: relative;
|
||||
line-height: 55px;
|
||||
|
|
@ -217,8 +386,8 @@ export default {
|
|||
}
|
||||
|
||||
.news {
|
||||
min-width: 1260px;
|
||||
}
|
||||
min-width: 1300px;
|
||||
|
||||
|
||||
.news_bg {
|
||||
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
|
||||
|
|
@ -234,81 +403,104 @@ export default {
|
|||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list2 {
|
||||
padding: 20px 0;
|
||||
|
||||
.list2 {
|
||||
padding: 20px 0;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
|
||||
.item {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
.pic {
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
span.inf {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span.dates {
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover .pic img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.news_detail {
|
||||
padding: 40px 0;
|
||||
display: none;
|
||||
.detail {
|
||||
.detail_top {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin: 0 0 40px 0;
|
||||
padding: 0 0 15px 0;
|
||||
border-bottom: 3px solid #ddd;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.shares {
|
||||
display: flex;
|
||||
//line-height: 35px;
|
||||
img {
|
||||
cursor: pointer;
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list2 ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
#industry_dynamics {
|
||||
.inf {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
#ceramic{
|
||||
.inf {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.list2 ul li {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.list2 ul li .item {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list2 ul li .item a .pic {
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list2 ul li .item a .pic img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.list2 ul li .item a:hover .pic img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.list2 ul li .item a span.inf {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.list2 ul li .item a span.dates {
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/*页码*/
|
||||
.pagination {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.pagination .prev a {
|
||||
line-height: 34px;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #333;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pagination .prev a:hover {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.pagination .prev:nth-child(2) a {
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,369 @@
|
|||
<template>
|
||||
<div class="products_center">
|
||||
<!--标签栏 -->
|
||||
<div class="center_border">
|
||||
<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">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="全部" name="first">产品中心</el-tab-pane>
|
||||
<el-tab-pane label="瓷抛大理石" name="second">瓷抛大理石</el-tab-pane>
|
||||
<el-tab-pane label="通体大理石" name="third">通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="中板通体大理石" name="four">中板通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="大板通体大理石" name="five">大板通体大理石</el-tab-pane>
|
||||
<el-tab-pane label="银河系大板" name="six">银河系大板</el-tab-pane>
|
||||
<el-tab-pane label="仿古砖600x600" name="seven">仿古砖600x600</el-tab-pane>
|
||||
<el-tab-pane label="金刚大理石" name="eight">金刚大理石</el-tab-pane>
|
||||
<el-tab-pane label="岩板" name="nine">岩板</el-tab-pane>
|
||||
<el-tab-pane label="微水泥" name="ten">微水泥</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- 分类栏-->
|
||||
<div class="product_types">
|
||||
<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">
|
||||
<strong>分类：</strong>
|
||||
<ul>
|
||||
<li v-for="item in classifyList">{{ item.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="spaceList">
|
||||
<strong>空间：</strong>
|
||||
<ul>
|
||||
<li v-for="item in spaceList">{{ item.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="styleList spaceList">
|
||||
<strong>风格：</strong>
|
||||
<ul>
|
||||
<li v-for="item in styleList">{{ item.title }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!--图片栏-->
|
||||
<div class="image_list">
|
||||
<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">
|
||||
<ul>
|
||||
<li v-for="(item,index) in imageList"
|
||||
:key="index">
|
||||
<div class="item">
|
||||
<a>
|
||||
<span class="pic">
|
||||
<img :src="item.imgUrl" alt="">
|
||||
</span>
|
||||
<span class="inf">{{ item.word }}</span>
|
||||
<span class="size">{{ item.size }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<Pagination :currentPage="1" :total="320" :pageSize="10" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Pagination from "@/components/Pagination";
|
||||
export default {
|
||||
name: "index",
|
||||
components: {Pagination},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
classifyList: [
|
||||
{
|
||||
title: '13MM瓷抛大理石'
|
||||
},
|
||||
{
|
||||
title: '11MM瓷抛大理石'
|
||||
}
|
||||
],
|
||||
spaceList: [
|
||||
{
|
||||
title: '全部'
|
||||
}, {
|
||||
title: '客厅瓷砖'
|
||||
}, {
|
||||
title: '厨房瓷砖'
|
||||
}, {
|
||||
title: '卫浴瓷砖'
|
||||
}, {
|
||||
title: '书房瓷砖'
|
||||
}, {
|
||||
title: '卧室瓷砖'
|
||||
}, {
|
||||
title: '餐厅瓷砖'
|
||||
}, {
|
||||
title: '走廊瓷砖'
|
||||
}, {
|
||||
title: '大厅瓷砖'
|
||||
}
|
||||
],
|
||||
styleList: [
|
||||
{
|
||||
title: '全部'
|
||||
},
|
||||
{
|
||||
title: '简约风格'
|
||||
},
|
||||
{
|
||||
title: '新中式风格'
|
||||
},
|
||||
{
|
||||
title: '欧式风格'
|
||||
}, {
|
||||
title: '古典风格'
|
||||
}, {
|
||||
title: '田园风格'
|
||||
}, {
|
||||
title: '工业风格'
|
||||
}
|
||||
],
|
||||
imageList: [
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
},
|
||||
{
|
||||
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220629/16564729329167616ss.jpg",
|
||||
word: "WH715T039",
|
||||
size: "750x1500MM大板时代"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
* {
|
||||
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
|
||||
}
|
||||
|
||||
.products_center {
|
||||
min-width: 1300px;
|
||||
|
||||
.center_border {
|
||||
width: 100%;
|
||||
height: 55px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.product_types {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
|
||||
.spaceList {
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px dotted #e9e9e9;
|
||||
display: flex;
|
||||
line-height: 36px;
|
||||
height: 36px;
|
||||
font-size: 14px;
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
||||
li {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image_list {
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
li {
|
||||
width: 25%;
|
||||
|
||||
.item {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
a {
|
||||
.pic {
|
||||
display: inline-block;
|
||||
border: 1px solid #e9e9e9;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
span.inf {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
span.size {
|
||||
color: #666;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover .pic img {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.8;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1660px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1480px) {
|
||||
.image_list ul li {
|
||||
width: 33.2% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-tabs {
|
||||
position: relative;
|
||||
line-height: 55px;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav {
|
||||
float: right;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__header {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item {
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
border-left: 1px solid #f1f1f1;
|
||||
padding: 0 20px !important;
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item.is-active {
|
||||
color: #000;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__item:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
|
||||
border-right: 1px solid #f1f1f1;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__active-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/deep/ .el-tab-pane {
|
||||
color: #333;
|
||||
height: 55px;
|
||||
line-height: 55px;
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue