<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>

