邓洁 : 首页响应式处理

src/App.vue

@@ -42,7 +42,7 @@ export default {
 *{
   padding: 0;
   margin: 0;
-  font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
+  //font: 14px/1.8 "微软正黑体","Microsoft JhengHei","Microsoft Yahei","微软雅黑","Hiragino Sans GB","冬青黑体","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif;
 }
 a{
   width: 100%;

src/components/AboutUs.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="aboutUs">
-    <el-row type="flex">
+    <el-row style="">
-      <el-col :span="4">
+      <el-row>
-      </el-col>
-      <el-col :span="16">
         <div class="about_title">
           <h2>关于我们</h2>
           <h3>—— ABOUT US ——</h3>
@@ -11,7 +9,8 @@
         <div class="about_text">
           {{ aboutContent }}
         </div>
-        <el-row :gutter="20" style="padding: 0 4%;margin-bottom: 50px">
+      </el-row>
+      <el-row style="margin: 0 60px">
         <el-col :span="6" v-for="(numItem,numIndex) in numList" :key="numIndex" class="num_title">
           <p>
             <b class="num_bold">{{ numItem.num }}</b>
@@ -44,7 +43,6 @@
           </div>
         </el-col>
       </el-row>
-      </el-col>
     </el-row>
   </div>
 </template>
@@ -104,9 +102,22 @@ export default {
 </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) {
+  .aboutUs {
+    width: 1200px !important;
+  }
+  .img_innerBox {
+    padding: 20px!important;
+  }
+  }
+
 .aboutUs {
   min-width: 1300px;
-  margin-bottom: 50px;
+  width: 1360px;
+  margin: 0 auto 50px auto;
 
   .about_title {
     display: inline;
@@ -142,6 +153,13 @@ export default {
     line-height: 28.8px;
   }
 
+  .num_title {
+    font-size: 14px;
+    color: #666666;
+    border-right: 1px solid #e5e5e5;
+    text-align: center;
+    margin-bottom: 50px;
+
     .num_bold {
       color: #444;
       line-height: 46px;
@@ -150,18 +168,15 @@ export default {
       font-family: arial;
       font-weight: normal;
     }
-  .num_title:last-child {
-    border: none;
-  }
-  .num_title {
-    font-size: 14px;
-    color: #666666;
-    border-right: 1px solid #e5e5e5;
-    text-align: center;
 
     p:last-child {
       line-height: 25.2px;
     }
+
+  }
+
+  .num_title:last-child {
+    border: none !important;
   }
 
   .culture_1 {
@@ -195,6 +210,7 @@ export default {
         overflow: hidden;
 
         img {
+          display: block;
           width: 100%;
           transition: all 0.6s;
         }

src/components/Carousel.vue

@@ -1,10 +1,8 @@
 <template>
       <div class="slideshow">
-    <el-carousel trigger="click" height="36.2vw">
+        <el-carousel trigger="click" height="36.2vw" style="min-width: 1300px;">
           <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
-        <div>
               <img :src="item.imgurl" alt="">
-        </div>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -26,18 +24,28 @@ export default {
         }
       ]
     }
-  }
+  },
 }
 </script>
+<style scoped lang="scss">
+@media screen and (max-width: 1320px) {
+  /deep/.el-carousel__container{
+    height: 44vh!important;
+  }
+}
+@media screen and (max-width: 768px) {
+  /deep/.el-carousel__container{
+    height: 58vh!important;
+  }
+}
 
-<style scoped>
 .slideshow {
   width:100%;
-  min-width: 1300px;
 }
-
+/*.carousel_img {*/
+/*  width: 100%;*/
+/*}*/
 img {
   width: 100%;
-
 }
 </style>

src/components/FastFindProducts.vue

@@ -192,6 +192,9 @@ export default {
 </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;

src/components/NewsCenter.vue

@@ -2,10 +2,10 @@
   <div class="newsCenter">
     <div class="news_bg">
     </div>
-    <el-row type="flex">
+    <!--    <el-row type="flex" >-->
-      <el-col :span="4"></el-col>
+    <!--      <el-col :span="4"></el-col>-->
-      <el-col :span="16">
+    <!--      <el-col :span="16">-->
-        <div>
+    <div class="newsWidth">
       <div class="news_left">
         <div class="items">
           <h2>新闻资讯</h2>
@@ -48,8 +48,8 @@
         </div>
       </div>
     </div>
-      </el-col>
+    <!--      </el-col>-->
-    </el-row>
+    <!--    </el-row>-->
   </div>
 </template>
 
@@ -99,15 +99,31 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .newsWidth {
+    width: 1230px !important;
+  }
+}
+
+@media screen and (max-width: 1480px) {
+  .newsWidth {
+    width: 1100px !important;
+  }
+}
+
 .newsCenter {
   min-width: 1300px;
+
   .news_bg {
-    //min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
     background-size: cover;
     height: 380px;
   }
 
+  .newsWidth {
+    width: 1360px;
+    margin: 0 auto;
+
     .news_left {
       width: 30%;
       float: left;
@@ -202,36 +218,44 @@ export default {
             display: inline-block;
             width: 100%;
             margin: 10px 0 0;
+
             li {
               display: inline-block;
               width: 100%;
               padding: 20px 0;
               border-bottom: 1px solid #e9e9e9;
+
               .pics {
                 width: 175px;
                 float: left;
                 margin-right: 15px;
+
                 img {
                   width: 100%;
                 }
               }
+
               .info {
                 .title {
                   line-height: 28.8px;
                   font: 16px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+
                   a {
                     font-size: 16px;
                     font-weight: bold;
                     color: #333;
                   }
+
                   a:hover {
                     text-decoration: underline;
                   }
                 }
+
                 .smy {
                   color: #777;
                   padding: 6px 0;
                 }
+
                 .dates {
                   color: #777;
                   font-size: 12px;
@@ -244,4 +268,5 @@ export default {
       }
     }
   }
+}
 </style>

src/components/ProductsClassify.vue

@@ -1,11 +1,6 @@
 <template>
   <div class="grid">
-    <el-row type="flex">
+    <div class="grid_box">
-      <el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
-      </el-col>
-      <el-col :xs="22" :sm="22" :md="20" :lg="16" :xl="16">
-        <el-row>
-          <el-col :span="8">
       <div class="grid_left">
         <a href="">
             <span class="pic">
@@ -15,13 +10,11 @@
           <span>了解更多</span>
         </a>
       </div>
-          </el-col>
-          <el-col :span="16">
       <div class="grid_right">
         <ul>
-                <li v-for="(picItem,picIndex) in pics" :key="picIndex" :class="'pic_'+picIndex">
+          <li :class="'pic_'+picIndex" v-for="(picItem,picIndex) in pics" :key="picItem.src">
             <a :href="picItem.href">
-                <span>
+                  <span class="pics">
                     <img :src="picItem.src" alt=""/>
                   </span>
               <span class="info">{{ picItem.name }}</span>
@@ -29,10 +22,7 @@
           </li>
         </ul>
       </div>
-          </el-col>
+    </div>
-        </el-row>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
@@ -69,9 +59,59 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .grid_box {
+    width: 1230px !important;
+  }
+  .pic{
+    img{
+      width: 400px !important;
+    }
+  }
+  .grid_right {
+    ul {
+      li {
+        a {
+          width:360px !important;
+          height: 267px!important;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1480px) {
+  .grid_box {
+    width: 1100px !important;
+  }
+  .pic{
+    img{
+      width: 385px !important;
+    }
+  }
+  .grid_right {
+    ul {
+      li {
+        a {
+          width:341px !important;
+          height: 258px!important;
+        }
+      }
+    }
+  }
+}
+
 .grid {
+  width: 100%;
   padding: 50px 0 60px 0;
   background-color: #f9f9f9;
+  position: relative;
+  min-width: 1270px;
+  display: flex;
+  .grid_box {
+    width: 1360px;
+    display: flex;
+    margin: 0 auto;
 
     .grid_left:hover {
       filter: brightness(85%);
@@ -80,11 +120,19 @@ export default {
 
     .grid_left {
       position: relative;
-    display: inline-block;
       transition: all 0.6s;
+      display: block;
+      padding: 6px;
 
       a {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        background-color: #000;
+
         .pic {
+          transition: all 0.6s;
+
           img {
             width: 440px;
           }
@@ -123,34 +171,30 @@ export default {
     }
 
     .grid_right {
-    float: right;
-
       ul {
         display: flex;
         flex-wrap: wrap;
 
         li {
-        margin-top: -5px;
           padding: 5px;
 
+          a {
+            width: 444px;
+            height: 295px;
+            overflow: hidden;
+            position: relative;
+            display: inline-block;
+            background-color: #066090;
+
             span:first-child {
               width: 100%;
               filter: alpha(opacity=94);
               -moz-opacity: 0.94;
               opacity: 0.94;
               transition: all 0.6s;
-        }
-
-        a {
-          height: 296px;
-          position: relative;
-          display: inline-block;
-          background-color: #066090;
-          overflow: hidden;
 
               img {
-            width: 440px;
+                width: 100%;
-            height: 296px;
                 overflow: hidden;
                 transition: all 0.6s;
               }
@@ -164,4 +208,6 @@ export default {
         }
       }
     }
+  }
+}
 </style>

src/components/ProductsShow.vue

@@ -11,7 +11,7 @@
         </div>
       </el-col>
     </el-row>
-    <el-row type="flex" style="width: 987px;margin: 0 auto">
+    <el-row type="flex" style="justify-content: center">
 <!--      <el-col :span="4">-->
 <!--      </el-col>-->
 <!--      <el-col :span="16" class="tagRow">-->
@@ -70,6 +70,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+*{
+  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
+}
 .el-tag:hover{
   background-color: #333;
   a{
@@ -87,7 +90,6 @@ export default {
   margin-right: 0;
 }
 .el-tag {
-
   border: none;
   margin-right: 10px;
   padding: 0 12px;

src/components/ProjectCase.vue

@@ -10,16 +10,27 @@
           </div>
         </div>
       </el-row>
-      <div class="case_example">
+      <el-row type="flex">
+        <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="4"></el-col>
+        <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="16">
+          <el-row type="flex">
+            <el-col class="case_example" :span="6" v-for="item in projectList" :key="item.src">
               <ul>
-          <li v-for="item in projectList" :key="item.src" @click="handleOpenImage">
+                <li>
                   <div class="pics">
-              <img :src="item.src" alt=""/>
+                    <el-image
+                      class="img"
+                      :src="item.src"
+                      :preview-src-list="imgBigList">
+                    </el-image>
                   </div>
                   <div class="case_info">{{ item.projectName }}</div>
                 </li>
               </ul>
-      </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -44,7 +55,8 @@ export default {
         }, {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836721610532sss.jpg',
           projectName: '财政局大厦'
-        }, {
+        }
+        , {
           src: 'http://www.yipengtaoci.com/upfiles/images/20181213/15446836584897916sss.jpg',
           projectName: '西安市雅盛大厦'
         }, {
@@ -58,41 +70,35 @@ export default {
           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',
       ]
     }
-  },
-  methods:{
-    handleOpenImage(){
-
-    }
   }
 }
 </script>
 
 <style scoped lang="scss">
-//@media screen and (max-width: 1660px) {
+.el-row--flex {
-//  .pics {
+  display: flex;
-//    img {
+  flex-wrap: wrap;
-//      height: 221px!important;
+}
-//    }
+
-//  }
+* {
-//  .case_example {
+  font: 14px / 1.8 微软正黑体, "Microsoft JhengHei", "Microsoft Yahei", 微软雅黑, "Hiragino Sans GB", 冬青黑体, Arial, Helvetica, SimHei, 黑体, STXihei, 华文细黑, sans-serif;
-//    width: 1230px !important;
+}
-//  }
+
-//}
-//
-//@media screen and (max-width: 1480px) {
-//  .pics {
-//    img {
-//      height: 196px!important;
-//    }
-//  }
-//  .case_example {
-//    width: 1100px !important;
-//  }
-//}
 .projectCase {
-  height: 970px;
+  min-height: 900px;
+
   .case_bg {
     min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
@@ -127,6 +133,10 @@ export default {
         margin: 20px 0 0;
         text-align: center;
 
+        a:hover {
+          text-decoration: underline;
+        }
+
         a {
           color: #e2c8ab;
           display: inline-block;
@@ -140,10 +150,8 @@ export default {
     }
 
     .case_example {
-      width: 1360px;
-      margin: 0 auto;
       background-color: #fff;
-      padding: 20px 10px;
+      padding: 10px 10px 0 10px;
 
       ul {
         li:last-child {
@@ -156,35 +164,37 @@ export default {
 
         li {
           display: inline-block;
-          margin-right: 17px;
+          margin-right: 9px;
 
           .pics {
             overflow: hidden;
             margin: 0 0 5px 0;
-            img {
+
-              height: 245px;
+            .img {
-              object-fit: cover;
+              display: block;
+              width: 100%;
               transition: all 0.6s;
               cursor: pointer;
             }
-            img:hover {
+
+            .img:hover {
+              filter: brightness(85%);
+              opacity: 1;
               transform: scale(1.2);
             }
           }
+
           .case_info {
             width: 100%;
             float: left;
             font-size: 16px;
             text-align: center;
             line-height: 28.8px;
-            margin: 0 0 5px 0;
             cursor: pointer;
           }
-
         }
       }
     }
   }
-
 }
 </style>

src/views/header/index.vue

@@ -193,6 +193,9 @@ export default {
 </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;

src/views/news/index.vue

@@ -1,15 +1,312 @@
 <template>
-<div>
+  <div class="news">
-  新闻
+    <!-- 顶部图片    -->
+    <div class="ui-h">
+      <div class="said">
+        <p class="tit2"></p>
+        <p>新闻资讯</p>
+      </div>
+    </div>
+    <!--标签栏    -->
+    <div class="pt-top">
+      <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>
+        <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">
+                      <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>
+    </div>
+    <!--页码-->
+<!--    <el-pagination-->
+<!--      background-->
+<!--      layout="prev, pager, next"-->
+<!--      :total="1000">-->
+<!--    </el-pagination>-->
   </div>
 </template>
 
 <script>
+
 export default {
-  name: "index"
+  name: "index",
+  data() {
+    return {
+      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"
+        }
+      ],
+      tagList: [
+        {
+          tag: '全部'
+        },
+        {
+          tag: '公司新闻'
+        }, {
+          tag: '行业动态'
+        }, {
+          tag: '瓷砖百科'
+        }
+      ]
+    };
+  }
+
 }
 </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;
+}
 
+.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 {
+  position: relative;
+  top: 1px;
+  height: 54px;
+  border-bottom: 1px solid #333;
+}
+
+.pt-top .list ul li {
+  display: inline;
+  float: left;
+  padding: 0 20px;
+  border-left: 1px solid #f1f1f1;
+}
+
+.pt-top .list ul li: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;
+}
+
+.pt-top .classname {
+  color: #333;
+  height: 55px;
+  line-height: 55px;
+  float: left;
+  font-size: 18px;
+}
+
+.pt-list {
+  /*width: 1140px;*/
+  float: left;
+  margin: 0 auto;
+}
+
+.pt-list .list2 {
+  /*width: 1265px;*/
+  padding: 20px 0;
+}
+
+.pt-list .list2 ul {
+  width: 100%;
+  /*display: flex;*/
+  float: left;
+  overflow: hidden;
+  list-style: none;
+}
+
+.pt-list .list2 ul li {
+  width: 347px;
+  float: left;
+  margin-right: 35px;
+}
+
+.pt-list .list2 ul li:last-child {
+  margin-right: 0;
+}
+
+.pt-list .list2 ul li .item {
+  display: block;
+  padding: 15px;
+  overflow: hidden;
+}
+
+.pt-list .list2 ul li .item a {
+  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;*/
+  overflow: hidden;
+}
+
+.pt-list .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 {
+  transform: scale(1.2);
+  opacity: 0.8;
+  background-color: #000000;
+}
+
+.pt-list .list2 ul li .item a span.inf {
+  display: block;
+  font-size: 16px;
+  overflow: hidden;
+  white-space: nowrap;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+
+.pt-list .list2 ul li .item a span.dates {
+  color: #666;
+  display: block;
+  font-size: 12px;
+  float: left;
+}
 </style>
+