From ab8db3aa4ded0aa0e38b9e9f81dcfd6428a3a49c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Sat, 6 May 2023 01:08:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E5=93=8D=E5=BA=94=E5=BC=8F=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                         |   1 +
 src/components/AboutUs.vue          |   1 +
 src/components/Carousel.vue         |  23 +++--
 src/components/FastFindProducts.vue | 101 +++++++++++----------
 src/components/NewsCenter.vue       |   3 +-
 src/components/ProductsClassify.vue |  55 ++++++------
 src/components/ProductsShow.vue     |  17 ++--
 src/components/ProjectCase.vue      |  23 ++++-
 src/views/footer/index.vue          |  24 +++--
 src/views/header/index.vue          | 132 ++++++++++++++++------------
 10 files changed, 222 insertions(+), 158 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c5b6b44..ee29b0d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,6 +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;
 }
 a{
   width: 100%;
diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 3b1e580..361ddf3 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -105,6 +105,7 @@ export default {
 
 <style scoped lang="scss">
 .aboutUs {
+  min-width: 1300px;
   margin-bottom: 50px;
 
   .about_title {
diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index 98acbdf..ff10d55 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -1,17 +1,13 @@
 <template>
-  <el-row>
-    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
-      <div class="slideshow">
-        <el-carousel trigger="click" height="36.2vw">
-          <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
-            <div>
-              <img :src="item.imgurl" alt="">
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-    </el-col>
-  </el-row>
+  <div class="slideshow">
+    <el-carousel trigger="click" height="36.2vw">
+      <el-carousel-item v-for="(item,index) in bannerDate" :key="index">
+        <div>
+          <img :src="item.imgurl" alt="">
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
 
 <script>
@@ -37,6 +33,7 @@ export default {
 <style scoped>
 .slideshow {
   width: 100%;
+  min-width: 1300px;
 }
 
 img {
diff --git a/src/components/FastFindProducts.vue b/src/components/FastFindProducts.vue
index 5016337..727ff4e 100644
--- a/src/components/FastFindProducts.vue
+++ b/src/components/FastFindProducts.vue
@@ -1,49 +1,41 @@
 <template>
-  <div>
-    <div class="fastFind">
-      <el-row type="flex">
-        <el-col :span="4">
-        </el-col>
-        <el-col :span="16">
-          <div class="fast_left">
-            <p>
-              快速查找产品
-            </p>
-            <p>
-              可以快速地找到合适你的产品
-            </p>
-          </div>
-          <div class="fast_right">
-            <ul>
-              <li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
-                  @mouseenter="changeFinds(moduleIndex)">
-                <a :href="moduleItem.href">
+  <div style="min-width: 1300px">
+    <div style=" border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;">
+      <el-row class="fastFind">
+        <div class="fast_left">
+          <p>
+            快速查找产品
+          </p>
+          <p>
+            可以快速地找到合适你的产品
+          </p>
+        </div>
+        <div class="fast_right">
+          <ul>
+            <li v-for="(moduleItem,moduleIndex) in moduleList" :key="moduleIndex" :id="'find_'+moduleIndex"
+                @mouseenter="changeFinds(moduleIndex)">
+              <a :href="moduleItem.href">
                 <span>
                   <img :src="moduleItem.src" alt=""/>
                 </span>
-                  <span>{{ moduleItem.name }}</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </el-col>
+                <span>{{ moduleItem.name }}</span>
+              </a>
+            </li>
+          </ul>
+        </div>
       </el-row>
     </div>
-    <div class="classify">
-      <el-row type="flex">
-        <el-col :span="4">
-        </el-col>
-        <el-col :span="16">
-          <div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
-            <ul>
-              <li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
-                <a :href="childrenItem.href" class="">
-                  {{ childrenItem.title }}
-                </a>
-              </li>
-            </ul>
-          </div>
-        </el-col>
+    <div style="border-bottom: 1px solid #e9e9e9;">
+      <el-row class="classify">
+        <div :id="'bok_'+findIndex" v-for="(findItem,findIndex) in findList" :key="findIndex">
+          <ul>
+            <li v-for="(childrenItem,childrenIndex) in findItem.children" :key="childrenIndex">
+              <a :href="childrenItem.href" class="">
+                {{ childrenItem.title }}
+              </a>
+            </li>
+          </ul>
+        </div>
       </el-row>
     </div>
   </div>
@@ -200,13 +192,32 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .fastFind {
+    width: 1230px !important;
+  }
+  .classify {
+    width: 1230px !important;
+  }
+}
+
+@media screen and (max-width: 1480px) {
+  .fastFind {
+    width: 1100px !important;
+  }
+  .classify {
+    width: 1100px !important;
+  }
+
+}
+
 .current {
   background: #eeeeee;
 }
 
 .fastFind {
-  border-top: 1px solid #e9e9e9;
-  border-bottom: 1px solid #e9e9e9;
+  width: 1360px;
+  margin: 0 auto;
   background-color: #ffffff;
 
   .fast_left {
@@ -261,10 +272,9 @@ export default {
 }
 
 .classify {
+  width: 1360px;
+  margin: 0 auto;
   padding: 15px 0;
-  height: 30px;
-  line-height: 30px;
-  border-bottom: 1px solid #e9e9e9;
 
   #bok_1 {
     display: none;
@@ -283,6 +293,7 @@ export default {
         color: #333;
         margin-right: 25px;
       }
+
       > a:hover {
         text-decoration: underline;
       }
diff --git a/src/components/NewsCenter.vue b/src/components/NewsCenter.vue
index 6e5f849..58cf7f0 100644
--- a/src/components/NewsCenter.vue
+++ b/src/components/NewsCenter.vue
@@ -100,8 +100,9 @@ export default {
 
 <style scoped lang="scss">
 .newsCenter {
+  min-width: 1300px;
   .news_bg {
-    margin: 0 60px;
+    //min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/upfiles/images/20181214/15447660862344831.jpg') no-repeat center 0;
     background-size: cover;
     height: 380px;
diff --git a/src/components/ProductsClassify.vue b/src/components/ProductsClassify.vue
index d746ca0..43cfc1c 100644
--- a/src/components/ProductsClassify.vue
+++ b/src/components/ProductsClassify.vue
@@ -1,34 +1,36 @@
 <template>
   <div class="grid">
     <el-row type="flex">
-      <el-col :span="4">
+      <el-col :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
       </el-col>
-      <el-col :span="16">
-        <el-col :span="8">
-          <div class="grid_left">
-            <a href="">
+      <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">
               <img src="http://www.yipengtaoci.com/images/ibg0.jpg" alt=""/>
             </span>
-              <span class="info">产品分类</span>
-              <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">
-                <a :href="picItem.href">
+                <span class="info">产品分类</span>
+                <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">
+                  <a :href="picItem.href">
                 <span>
                   <img :src="picItem.src" alt=""/>
                 </span>
-                  <span class="info">{{ picItem.name }}</span>
-                </a>
-              </li>
-            </ul>
-          </div>
-        </el-col>
+                    <span class="info">{{ picItem.name }}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </el-col>
+        </el-row>
       </el-col>
     </el-row>
   </div>
@@ -76,23 +78,18 @@ export default {
     opacity: 1;
   }
 
-  //.grid_left:hover span:nth-child(2) {
-  //  //background-color: red;
-  //}
   .grid_left {
     position: relative;
     display: inline-block;
     transition: all 0.6s;
+
     a {
       .pic {
         img {
           width: 440px;
-          //z-index: 9;
-
         }
       }
 
-
       span:last-child {
         color: #fff;
         position: absolute;
@@ -107,7 +104,6 @@ export default {
         text-align: center;
         background-color: #de832f;
         border-radius: 100px 100px 100px 100px;
-        //z-index: 999;
       }
     }
   }
@@ -158,7 +154,8 @@ export default {
             overflow: hidden;
             transition: all 0.6s;
           }
-          img:hover{
+
+          img:hover {
             filter: brightness(85%);
             opacity: 1;
           }
diff --git a/src/components/ProductsShow.vue b/src/components/ProductsShow.vue
index 0392b84..d682818 100644
--- a/src/components/ProductsShow.vue
+++ b/src/components/ProductsShow.vue
@@ -11,10 +11,10 @@
         </div>
       </el-col>
     </el-row>
-    <el-row type="flex">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16" class="tagRow">
+    <el-row type="flex" style="width: 987px;margin: 0 auto">
+<!--      <el-col :span="4">-->
+<!--      </el-col>-->
+<!--      <el-col :span="16" class="tagRow">-->
         <div>
           <el-tag
             v-for="item in tagItems"
@@ -23,9 +23,8 @@
             <a :href="item.href">{{ item.title }}</a>
           </el-tag>
         </div>
-      </el-col>
+<!--      </el-col>-->
     </el-row>
-
   </div>
 </template>
 
@@ -81,9 +80,14 @@ export default {
   background-color: #333;
   a{
     color: #fff;
+
   }
 }
+.el-tag:last-child{
+  margin-right: 0;
+}
 .el-tag {
+
   border: none;
   margin-right: 10px;
   padding: 0 12px;
@@ -95,6 +99,7 @@ export default {
   }
 }
 .product_show {
+  min-width: 1300px;
   padding: 60px 0 60px 0;
   border-top: 1px solid #e9e9e9;
   background-color: #f1f1f1;
diff --git a/src/components/ProjectCase.vue b/src/components/ProjectCase.vue
index e014dfe..83a08ab 100644
--- a/src/components/ProjectCase.vue
+++ b/src/components/ProjectCase.vue
@@ -70,10 +70,31 @@ export default {
 </script>
 
 <style scoped lang="scss">
+//@media screen and (max-width: 1660px) {
+//  .pics {
+//    img {
+//      height: 221px!important;
+//    }
+//  }
+//  .case_example {
+//    width: 1230px !important;
+//  }
+//}
+//
+//@media screen and (max-width: 1480px) {
+//  .pics {
+//    img {
+//      height: 196px!important;
+//    }
+//  }
+//  .case_example {
+//    width: 1100px !important;
+//  }
+//}
 .projectCase {
   height: 970px;
   .case_bg {
-    margin: 0 60px;
+    min-width: 1300px;
     background: #ffffff url('http://www.yipengtaoci.com/images/cbg0.jpg') no-repeat center 0;
     background-size: cover;
     height: 540px;
diff --git a/src/views/footer/index.vue b/src/views/footer/index.vue
index e2c7bba..7577f92 100644
--- a/src/views/footer/index.vue
+++ b/src/views/footer/index.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="footer_bg">
     <el-row type="flex" class="up_footer">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16">
         <div class="up_left">
           <el-image
             style="margin-bottom: 15px"
@@ -27,7 +24,6 @@
             style="width: 100px; height: 100px"
             src="http://www.yipengtaoci.com/upfiles/images/20200706/15940289752944272.jpg"></el-image>
         </div>
-      </el-col>
     </el-row>
     <el-row type="flex" class="down_footer">
       <el-col :span="3">
@@ -115,16 +111,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .up_footer {
+    width: 1230px!important;
+  }
+}
+@media screen and (max-width: 1480px) {
+  .up_footer {
+    width: 1100px!important;
+  }
+}
 .footer_bg {
   height: 276px;
   width: 100%;
   background-color: #111;
   color: #fff;
-
+  min-width: 1300px;
   .up_footer {
+    position: relative;
+    width: 1360px;
+    margin: 0 auto;
     color: #fff;
-    width: 100%;
-    float: left;
     padding: 50px 0 50px;
     font-size: 12px;
 
@@ -180,7 +187,8 @@ export default {
     }
 
     .up_right {
-      float: right;
+      position: absolute;
+      right: 0;
     }
   }
 
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index fa3c34e..645cac1 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,46 +1,40 @@
 <template>
-  <div>
+  <div style="min-width: 1300px">
     <div class="header_bg" id="header_bg">
-      <el-row type="flex" class="up_header">
-        <el-col :span="4">
-        </el-col>
-        <el-col :span="16" style="z-index: 400;">
+      <div class="upHeaderBox">
+        <div class="up_header">
             <span class="up_left">
               艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
             </span>
           <span class="up_right">
               广东祥睿陶瓷有限公司
             </span>
-        </el-col>
-      </el-row>
-      <el-row type="flex" class="down_header">
-        <el-col :span="4">
-        </el-col>
-        <el-col :span="16">
-          <div class="down_left">
-            <a href="/">
-              <el-image
-                src="http://www.yipengtaoci.com/images/logo.png"></el-image>
-            </a>
-          </div>
-          <div class="down_right">
-            <ul>
-              <li v-for="(item,index) in navList" :key="index" class="nav">
-                <a :href="item.href" class="nav_item">
-                  {{ item.title }}
-                </a>
-                <ul class="subNav" v-if="item.children">
-                  <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
-                    <a :href="childrenItem.href">
-                      {{ childrenItem.title }}
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </el-col>
-      </el-row>
+        </div>
+      </div>
+      <div class="down_header">
+        <div class="down_left">
+          <a href="/">
+            <el-image
+              src="http://www.yipengtaoci.com/images/logo.png"></el-image>
+          </a>
+        </div>
+        <div class="down_right">
+          <ul>
+            <li v-for="(item,index) in navList" :key="index" class="nav">
+              <a :href="item.href" class="nav_item">
+                {{ item.title }}
+              </a>
+              <ul class="subNav" v-if="item.children">
+                <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
+                  <a :href="childrenItem.href">
+                    {{ childrenItem.title }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
     </div>
     <div class="search_header" id="search_header">
       <div class="headerItems">
@@ -199,6 +193,28 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@media screen and (max-width: 1660px) {
+  .down_header {
+    width: 1230px!important;
+  }
+  .up_header {
+    width: 1230px!important;
+  }
+  .headerItems {
+    width: 1230px!important;
+  }
+}
+@media screen and (max-width: 1480px) {
+  .down_header {
+    width: 1100px!important;
+  }
+  .up_header {
+    width: 1100px!important;
+  }
+  .headerItems {
+    width: 1100px!important;
+  }
+}
 .header_bg {
   transition: all 0.6s;
   height: 130px;
@@ -206,32 +222,38 @@ export default {
   background-color: #111;
   color: #fff;
 
-  .up_header {
+  .upHeaderBox {
+    width: 100%;
     border-bottom: 1px solid #333;
-    height: 36px;
 
-    .up_left {
-      color: #fff;
-      display: inline;
-      line-height: 36px;
-      float: left;
-      margin-left: 90px;
-      font-size: 12px;
-    }
+    .up_header {
+      width: 1360px;
+      margin: 0 auto;
+      height: 36px;
 
-    .up_right {
-      color: #ccc;
-      display: inline;
-      float: right;
-      line-height: 35px;
-      font-size: 12px;
+      .up_left {
+        color: #fff;
+        display: inline;
+        line-height: 36px;
+        float: left;
+        margin-left: 90px;
+        font-size: 12px;
+      }
+
+      .up_right {
+        color: #ccc;
+        display: inline;
+        float: right;
+        line-height: 35px;
+        font-size: 12px;
+      }
     }
   }
 
   .down_header {
+    width: 1360px;
+    margin: 0 auto;
     position: relative;
-    width: 100%;
-    float: left;
     padding: 4px 0;
     z-index: 30;
 
@@ -321,13 +343,13 @@ export default {
   .headerItems {
     position: relative;
     padding: 8px 0;
-    width: 66%;
+    width: 1360px;
     margin: 0 auto;
 
     ul {
       display: flex;
       width: 100%;
-      padding-left: 100px;
+      padding-left: 50px;
 
       li {
         position: relative;