507 lines
14 KiB
Vue
507 lines
14 KiB
Vue
<template>
|
||
<div class="news">
|
||
<!-- 顶部图片 -->
|
||
<div class="news_bg">
|
||
</div>
|
||
<!--标签栏 -->
|
||
<div class="news_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-tabs>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!--图片栏-->
|
||
<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">
|
||
<!-- 公司新闻-->
|
||
<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>
|
||
<!--页码-->
|
||
<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: [
|
||
{
|
||
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"
|
||
}
|
||
]
|
||
};
|
||
},
|
||
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) {
|
||
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 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;
|
||
}
|
||
|
||
/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) {
|
||
.list2 ul li {
|
||
width: 33.2% !important;
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: 1480px) {
|
||
.list2 ul li {
|
||
width: 33.2% !important;
|
||
}
|
||
}
|
||
|
||
.news {
|
||
min-width: 1300px;
|
||
|
||
|
||
.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;
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
#industry_dynamics {
|
||
.inf {
|
||
text-align: left;
|
||
}
|
||
}
|
||
#ceramic{
|
||
.inf {
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|
||
|