Compare commits

...

2 Commits

4 changed files with 460 additions and 165 deletions

View File

@ -24,6 +24,11 @@ const routes = [
name: 'news',
component: () => import('../views/news/index')
},
{
path: '/image_display',
name: 'image_display',
component: () => import('../views/ImageDisplay/index')
},
]
const router = new VueRouter({

View File

@ -0,0 +1,288 @@
<template>
<div class="image_display">
<!-- 顶部图片 -->
<div class="imageDisplay_bg">
</div>
<!--标签栏 -->
<div class="imageDisplay_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>
<!--资质荣誉-->
<div class="honor_list" id="honor_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 imageAndWord"
:key="index">
<div class="item">
<a>
<span class="pic">
<img :src="item.imgUrl" alt="">
</span>
<span class="inf">{{ item.word }}</span>
</a>
</div>
</li>
</ul>
</el-col>
</el-row>
</div>
<!--工程案例-->
<div id="project_list" class="project_list honor_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 projectList"
:key="index">
<div class="item">
<a>
<span class="pic">
<img :src="item.src" alt="">
</span>
<span class="inf">{{ item.projectName }}</span>
</a>
</div>
</li>
</ul>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
activeName: 'first',
imageAndWord: [
{
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925082928480sss.jpg",
word: "国家权威检测合格质量信得过产品"
}, {
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925195172987sss.jpg",
word: "全国产品质量消费者满意品牌"
}, {
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925805806898sss.jpg",
word: "中国工程建设推荐产品"
}, {
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925457884413sss.jpg",
word: "中国陶瓷行业十大品牌"
}, {
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20200629/15933925562846082sss.jpg",
word: "中国政府采购重点推荐产品"
}
],
projectList: [
{
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446837055605711sss.jpg',
projectName: '大学城新校区教学楼'
},
{
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836948260969sss.jpg',
projectName: '嘉兴中山名都'
},
{
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836838788313sss.jpg',
projectName: '蒲田公安局'
}, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
projectName: '财政局大厦'
}
, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
projectName: '西安市雅盛大厦'
}, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836464189848sss.jpg',
projectName: '武汉市金晖大厦'
}, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836342981901sss.jpg',
projectName: '杭州市风情小区'
}, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836233995939sss.jpg',
projectName: '金湖花园'
}, {
src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836107997435sss.jpg',
projectName: '碧桂园'
},
],
}
},
methods: {
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"
}
}
}
}
</script>
<style scoped lang="scss">
* {
font: 14px/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;
}
@media only screen and (max-width: 1660px) {
.honor_list ul li {
width: 33.2% !important;
}
}
@media only screen and (max-width: 1480px) {
.honor_list ul li {
width: 33.2% !important;
}
}
.image_display {
min-width: 1260px;
.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;
}
.imageDisplay_border {
width: 100%;
height: 55px;
border-bottom: 1px solid #ebebeb;
background-color: #fff;
}
.honor_list {
padding: 20px 0;
ul {
display: flex;
flex-wrap: wrap;
li {
width: 25%;
.item {
padding: 15px;
overflow: hidden;
a:hover {
.pic {
img {
transform: scale(1.2);
opacity: 0.8;
background-color: #000000;
}
}
}
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;
}
}
}
}
}
}
#project_list {
display: none;
}
}
</style>

View File

@ -133,7 +133,7 @@ export default {
}
]
}, {
href: '',
href: '/image_display',
title: '形象展示',
children: [
{

View File

@ -1,70 +1,75 @@
<template>
<div class="news">
<!-- 顶部图片 -->
<div class="ui-h">
<div class="said">
<p class="tit2"></p>
<p>新闻资讯</p>
</div>
<!-- 顶部图片 -->
<div class="news_bg">
</div>
<!--标签栏 -->
<div class="pt-top">
<!--标签栏 -->
<div class="news_border">
<el-row type="flex">
<el-col :span="1"></el-col>
<el-col :span="22">
<div class="list">
<ul>
<li v-for="(item,index) in tagList" :key="index"
>
<a class="oncname">{{ item.tag }}</a>
</li>
</ul>
</div>
<div class="classname" v-model="tagList">新闻资讯</div>
<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-tabs>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</div>
<!--图片栏-->
<div class="pt-list">
<div class="list2">
<ul>
<el-row type="flex" justify="space-around">
<el-col :span="1"></el-col>
<el-col :span="22">
<li v-for="(item,index) in imageAndWord"
:key="index">
<div class="item">
<a>
<div class="pic">
<div class="list2">
<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>
<span class="pic">
<img :src="item.imgUrl" alt="">
</div>
<span class="inf">{{ item.word }}</span>
<span class="dates">{{ item.date }}</span>
</a>
</div>
</li>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</ul>
</div>
</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>
</div>
</el-col>
</el-row>
</div>
<!--页码-->
<!-- <el-pagination-->
<!-- background-->
<!-- layout="prev, pager, next"-->
<!-- :total="1000">-->
<!-- </el-pagination>-->
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
activeName: 'first',
imageAndWord: [
{
imgUrl: "http://www.yipengtaoci.com/upfiles/images/20220728/16589788725259367s.jpg",
@ -126,106 +131,72 @@ export default {
word: "EIP CERAMICS | 800x800通体大理石任意连纹品味独特的艺术空间。",
date: "2022.7.7"
}
],
tagList: [
{
tag: '全部'
},
{
tag: '公司新闻'
}, {
tag: '行业动态'
}, {
tag: '瓷砖百科'
}
]
};
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
<style scoped>
.news{
height: 1200px;
}
.ui-h {
background-image: url("http://www.yipengtaoci.com/upfiles/images/20181215/15448384274864820.jpg");
width: 100%;
height: 360px;
float: left;
background-repeat: no-repeat;
background-position: center center;
* {
font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}
.ui-h .said {
display: none;
position: absolute;
top: 50%;
left: 50%;
padding: 10px 60px;
border: 1px solid #fff;
background-color: rgba(254, 254, 254, 0.9);
transform: translate(-50%, -50%);
}
.ui-h .said p.tit2 {
font-size: 24px;
}
.ui-h .said p {
color: #000;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
.pt-top {
width: 100%;
height: 55px;
float: left;
border-bottom: 1px solid #ebebeb;
background-color: #fff;
}
.pt-top .list {
float: right;
}
.pt-top .list ul li {
/deep/ .el-tabs {
position: relative;
top: 1px;
height: 54px;
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;
}
.pt-top .list ul li {
display: inline;
float: left;
padding: 0 20px;
border-left: 1px solid #f1f1f1;
/deep/ .el-tabs__item:hover {
color: #000;
text-decoration: underline;
}
.pt-top .list ul li:last-child {
/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
border-right: 1px solid #f1f1f1;
}
.pt-top .list ul li a.oncname {
color: #333;
display: inline-block;
width: 100%;
height: 55px;
line-height: 55px;
float: left;
text-align: center;
font-size: 14px;
}
.pt-top .list ul li a .oncname:hover{
text-decoration: 1px solid #aaaaaa;
/deep/ .el-tabs__active-bar {
display: none;
}
.pt-top .classname {
/deep/ .el-tabs__nav-wrap::after {
display: none;
}
/deep/ .el-tab-pane {
color: #333;
height: 55px;
line-height: 55px;
@ -233,67 +204,75 @@ export default {
font-size: 18px;
}
.pt-list {
/*width: 1140px;*/
float: left;
margin: 0 auto;
@media only screen and (max-width: 1660px) {
.list2 ul li {
width: 33.2% !important;
}
}
.pt-list .list2 {
/*width: 1265px;*/
@media only screen and (max-width: 1480px) {
.list2 ul li {
width: 33.2% !important;
}
}
.news {
min-width: 1260px;
}
.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;
}
.news_border {
width: 100%;
height: 55px;
border-bottom: 1px solid #ebebeb;
background-color: #fff;
}
.list2 {
padding: 20px 0;
}
.pt-list .list2 ul {
width: 100%;
/*display: flex;*/
float: left;
overflow: hidden;
list-style: none;
.list2 ul {
display: flex;
flex-wrap: wrap;
}
.pt-list .list2 ul li {
width: 347px;
float: left;
margin-right: 35px;
.list2 ul li {
width: 25%;
}
.pt-list .list2 ul li:last-child {
margin-right: 0;
}
.pt-list .list2 ul li .item {
display: block;
.list2 ul li .item {
padding: 15px;
overflow: hidden;
}
.pt-list .list2 ul li .item a {
.list2 ul li .item a .pic {
display: inline-block;
width: 100%;
}
.pt-list .list2 ul li .item a .pic {
display: block;
margin: 0 0 6px;
/*border: 1px solid #e9e9e9;*/
/*background-color: #000;*/
border: 1px solid #e9e9e9;
background-color: #000;
overflow: hidden;
}
.pt-list .list2 ul li .item a .pic img {
.list2 ul li .item a .pic img {
width: 100%;
display: block;
transition: all 0.4s;
}
.pt-list .list2 ul li .item a:hover .pic img {
.list2 ul li .item a:hover .pic img {
transform: scale(1.2);
opacity: 0.8;
background-color: #000000;
}
.pt-list .list2 ul li .item a span.inf {
.list2 ul li .item a span.inf {
display: block;
font-size: 16px;
overflow: hidden;
@ -302,11 +281,34 @@ export default {
text-overflow: ellipsis;
}
.pt-list .list2 ul li .item a span.dates {
.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>