4

src/views/index.vue

@@ -3,12 +3,15 @@
     <div class="w_1200">
       <el-col :span="24" class="top">
         <div :span="24" class="img">
-          <el-col :span="24">
-            <el-col :span="6" class="tp">
-              <p>您好，欢迎来到长春福瑞科技有限公司~</p>
-            </el-col>
-            <el-col :span="3">
-              <p>咨询热线：400-8207-595</p>
+          <el-col :span="24" class="container">
+            <el-col :span="24" class="helloBox">
+              <el-col :span="2" class="welcome">
+                您好，欢迎来到长春福瑞科技有限公司~
+              </el-col>
+              <el-col :span="3" class="tel">
+                <img src="tel" />
+                <p>咨询热线：400-8207-595</p>
+              </el-col>
             </el-col>
           </el-col>
         </div>
@@ -24,155 +27,155 @@
           <el-menu-item index="8" class="na">联系我们</el-menu-item>
         </el-menu>
       </el-col>
-      <el-col :span="24" class="main">
-        <el-col :span="24">
-          <el-carousel indicator-position="outside" height="800px">
-            <el-carousel-item v-for="item in imagesbox" :key="item.id">
-              <img :src="item.idView" class="image" />
-            </el-carousel-item>
-          </el-carousel>
+    </div>
+    <el-col :span="24" class="main">
+      <el-col :span="24">
+        <el-carousel indicator-position="outside" height="800px">
+          <el-carousel-item v-for="item in imagesbox" :key="item.id">
+            <img :src="item.idView" class="image" />
+          </el-carousel-item>
+        </el-carousel>
+      </el-col>
+      <el-col :span="24" class="fon">
+        <p>长春福瑞科技有限公司</p>
+      </el-col>
+      <el-col :span="24" class="small">
+        <p>ChangChun FuRui Technology Co., Ltd</p>
+      </el-col>
+      <el-col :span="24" class="bor"> </el-col>
+      <el-col :span="24" class="text">
+        <p class="tt">
+          长春福瑞科技有限公司是一家国内领先的LED应用产品与解决方案供应商，专业从事LED显示屏研发、生产、销售为一体的高新技术企业。致力于为国内外的专业渠道客户和终端客户提供高质量、
+        </p>
+        <p class="tt">高性能的LED应用产品及解决方案。</p>
+        <p class="tt">
+          福瑞科技致力于发展LED高新技术，符合国家推广绿色、环保、节能宏观政策要求，对现代城市亮化、美化及视觉传播产生积极贡献。2010年始，公司着手致力于营销及售后服务体系建设，让我
+        </p>
+        <p class="tt">们们一个客户都能获得完美的售前、售中和售后服务体系的建设。并继续加强质量检控力度，以100%的产品质量服务于每一位客户。</p>
+      </el-col>
+      <el-col :span="24" class="aut">
+        <el-col :span="4" class="cent">
+          <img :src="img" class="im" />
         </el-col>
-        <el-col :span="24" class="fon">
-          <p>长春福瑞科技有限公司</p>
+        <el-col :span="4" class="cent">
+          <img :src="img" class="im" />
         </el-col>
-        <el-col :span="24" class="small">
-          <p>ChangChun FuRui Technology Co., Ltd</p>
+        <el-col :span="4" class="cent">
+          <img :src="img" class="im" />
         </el-col>
-        <el-col :span="24" class="bor"> </el-col>
-        <el-col :span="24" class="text">
-          <p class="tt">
-            长春福瑞科技有限公司是一家国内领先的LED应用产品与解决方案供应商，专业从事LED显示屏研发、生产、销售为一体的高新技术企业。致力于为国内外的专业渠道客户和终端客户提供高质量、
-          </p>
-          <p class="tt">高性能的LED应用产品及解决方案。</p>
-          <p class="tt">
-            福瑞科技致力于发展LED高新技术，符合国家推广绿色、环保、节能宏观政策要求，对现代城市亮化、美化及视觉传播产生积极贡献。2010年始，公司着手致力于营销及售后服务体系建设，让我
-          </p>
-          <p class="tt">们们一个客户都能获得完美的售前、售中和售后服务体系的建设。并继续加强质量检控力度，以100%的产品质量服务于每一位客户。</p>
+        <el-col :span="4" class="cent">
+          <img :src="img" class="im" />
+        </el-col>
+      </el-col>
+      <el-col :span="24" class="center">
+        <p>more</p>
+      </el-col>
+      <el-col :span="24" class="back">
+        <el-col :span="24" class="ce">
+          <p>我们的产品</p>
         </el-col>
-        <el-col :span="24" class="aut">
-          <el-col :span="4" class="cent">
-            <img :src="img" class="im" />
+        <el-col :span="24" class="bor"></el-col>
+        <el-col :span="24">
+          <el-col :span="6" class="polaroid">
+            <p class="card">异形LED灯显示屏</p>
+            <img :src="img" style="width:100%" />
+            <el-col :span="24" class="car">
+              <p>.九面旋转屏</p>
+              <p>.弧形屏</p>
+              <p>.球型屏</p>
+              <p class="fox">more</p>
+            </el-col>
           </el-col>
-          <el-col :span="4" class="cent">
-            <img :src="img" class="im" />
+          <el-col :span="6" class="polaroid">
+            <p class="card">异形LED灯显示屏</p>
+            <img :src="img" style="width:100%" />
+            <el-col :span="24" class="car">
+              <p>.九面旋转屏</p>
+              <p>.弧形屏</p>
+              <p>.球型屏</p>
+              <p class="fox">more</p>
+            </el-col>
           </el-col>
-          <el-col :span="4" class="cent">
-            <img :src="img" class="im" />
+          <el-col :span="6" class="polaroid">
+            <p class="card">异形LED灯显示屏</p>
+            <img :src="img" style="width:100%" />
+            <el-col :span="24" class="car">
+              <p>.九面旋转屏</p>
+              <p>.弧形屏</p>
+              <p>.球型屏</p>
+              <p class="fox">more</p>
+            </el-col>
           </el-col>
-          <el-col :span="4" class="cent">
-            <img :src="img" class="im" />
+          <el-col :span="6" class="polaroid">
+            <p class="card">异形LED灯显示屏</p>
+            <img :src="img" style="width:100%" />
+            <el-col :span="24" class="car">
+              <p>.九面旋转屏</p>
+              <p>.弧形屏</p>
+              <p>.球型屏</p>
+              <p class="fox">more</p>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="center">
+            <p>more</p>
           </el-col>
         </el-col>
-        <el-col :span="24" class="center">
-          <p>more</p>
-        </el-col>
-        <el-col :span="24" class="back">
-          <el-col :span="24" class="ce">
-            <p>我们的产品</p>
+        <el-col :span="24" class="man">
+          <el-col :span="24" class="te">
+            <p>案例应用</p>
           </el-col>
-          <el-col :span="24" class="bor"></el-col>
-          <el-col :span="24">
-            <el-col :span="6" class="polaroid">
-              <p class="card">异形LED灯显示屏</p>
-              <img :src="img" style="width:100%" />
-              <el-col :span="24" class="car">
-                <p>.九面旋转屏</p>
-                <p>.弧形屏</p>
-                <p>.球型屏</p>
-                <p class="fox">more</p>
-              </el-col>
+          <el-col :span="24" class="cen"> </el-col>
+          <el-col :span="24" class="cl">
+            <el-col :span="12">
+              <img :src="url" width="800px" />
             </el-col>
-            <el-col :span="6" class="polaroid">
-              <p class="card">异形LED灯显示屏</p>
-              <img :src="img" style="width:100%" />
-              <el-col :span="24" class="car">
-                <p>.九面旋转屏</p>
-                <p>.弧形屏</p>
-                <p>.球型屏</p>
-                <p class="fox">more</p>
+            <el-col :span="12">
+              <p class="ttt">-长春福瑞科技室内装潢666</p>
+              <el-col :span="12" class="dq">
+                <p>-地区：长春</p>
               </el-col>
-            </el-col>
-            <el-col :span="6" class="polaroid">
-              <p class="card">异形LED灯显示屏</p>
-              <img :src="img" style="width:100%" />
-              <el-col :span="24" class="car">
-                <p>.九面旋转屏</p>
-                <p>.弧形屏</p>
-                <p>.球型屏</p>
-                <p class="fox">more</p>
+              <el-col :span="12" class="dq">
+                <p>-地区：长春</p>
               </el-col>
-            </el-col>
-            <el-col :span="6" class="polaroid">
-              <p class="card">异形LED灯显示屏</p>
-              <img :src="img" style="width:100%" />
-              <el-col :span="24" class="car">
-                <p>.九面旋转屏</p>
-                <p>.弧形屏</p>
-                <p>.球型屏</p>
-                <p class="fox">more</p>
+              <el-col :span="12" class="dq">
+                <p>-面积：100m²</p>
               </el-col>
-            </el-col>
-            <el-col :span="24" class="center">
-              <p>more</p>
-            </el-col>
-          </el-col>
-          <el-col :span="24" class="man">
-            <el-col :span="24" class="te">
-              <p>案例应用</p>
-            </el-col>
-            <el-col :span="24" class="cen"> </el-col>
-            <el-col :span="24" class="cl">
-              <el-col :span="12">
-                <img :src="url" width="800px" />
+              <el-col :span="12" class="dq">
+                <p>-日期：2020年8月19日</p>
+              </el-col>
+              <el-col :span="4" class="bord">
+                <img :src="url" height="150px" width="150px" />
+              </el-col>
+              <el-col :span="4" class="bord">
+                <img :src="url" height="150px" width="150px" />
+              </el-col>
+              <el-col :span="4" class="bord">
+                <img :src="url" height="150px" width="150px" />
               </el-col>
-              <el-col :span="12">
-                <p class="ttt">-长春福瑞科技室内装潢666</p>
-                <el-col :span="12" class="dq">
-                  <p>-地区：长春</p>
-                </el-col>
-                <el-col :span="12" class="dq">
-                  <p>-地区：长春</p>
-                </el-col>
-                <el-col :span="12" class="dq">
-                  <p>-面积：100m²</p>
-                </el-col>
-                <el-col :span="12" class="dq">
-                  <p>-日期：2020年8月19日</p>
-                </el-col>
-                <el-col :span="4" class="bord">
-                  <img :src="url" height="150px" width="150px" />
-                </el-col>
-                <el-col :span="4" class="bord">
-                  <img :src="url" height="150px" width="150px" />
-                </el-col>
-                <el-col :span="4" class="bord">
-                  <img :src="url" height="150px" width="150px" />
-                </el-col>
-                <el-col :span="4" class="bord">
-                  <img :src="url" height="150px" width="150px" />
-                </el-col>
+              <el-col :span="4" class="bord">
+                <img :src="url" height="150px" width="150px" />
               </el-col>
             </el-col>
           </el-col>
         </el-col>
-        <el-col :span="24">
-          <p class="rdzx">热点资讯</p>
+      </el-col>
+      <el-col :span="24">
+        <p class="rdzx">热点资讯</p>
+      </el-col>
+      <el-col :span="24" class="cen"> </el-col>
+      <el-col :span="24" class="com">
+        <el-col :span="2" class="company">
+          <p>公司新闻</p>
         </el-col>
-        <el-col :span="24" class="cen"> </el-col>
-        <el-col :span="24" class="com">
-          <el-col :span="2" class="company">
-            <p>公司新闻</p>
-          </el-col>
-          <el-col :span="2" class="company">
-            <p>行业新闻</p>
-          </el-col>
-          <el-col :span="2" class="company">
-            <p>展会资讯</p>
-          </el-col>
+        <el-col :span="2" class="company">
+          <p>行业新闻</p>
+        </el-col>
+        <el-col :span="2" class="company">
+          <p>展会资讯</p>
         </el-col>
       </el-col>
-      <el-col :span="24" class="foot"> </el-col>
-    </div>
+    </el-col>
+    <el-col :span="24" class="foot"> </el-col>
   </div>
 </template>
 
@@ -186,6 +189,7 @@ export default {
     return {
       url: require('../assets/case7.jpg'),
       img: require('../assets/main1.jpg'),
+      tel: require('../assets/top2.png'),
       imagesbox: [
         {
           id: 0,
@@ -218,7 +222,41 @@ export default {
 
 <style lang="less" scoped>
 .top {
-  position: relative;
+  position: fixed;
+  width: 100%;
+  height: 128px;
+  left: 0;
+  top: 0;
+  z-index: 1010;
+  border-top: #1978cb solid 2px;
+  background-color: #fff;
+  // -webkit-transition: all 0.2s linear;
+  // -moz-transition: all 0.2s linear;
+  // -o-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  .helloBox {
+    float: right;
+    height: 38px;
+    font-size: 13px;
+    .welcome {
+      float: left;
+      width: 407px;
+      height: 38px;
+      color: #dfe8f5;
+      line-height: 38px;
+      padding: 0 0 0 82px;
+      border-right: #3086d0 solid 1px;
+    }
+  }
+  .tel {
+    float: left;
+    width: 282px;
+    height: 38px;
+    border-right: #3086d0 solid 1px;
+    padding-left: 30px;
+    color: #ffffff;
+    line-height: 38px;
+  }
 }
 .w_1200 {
   margin: 0 auto;
@@ -266,6 +304,14 @@ export default {
     border-radius: 50%;
   }
 }
+
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  min-width: 1230px;
+}
 .cen {
   border: 1px solid #727e8f;
 }
@@ -351,9 +397,7 @@ export default {
 .na {
   font-size: 24px;
 }
-.tp {
-  margin-left: 1100px;
-}
+
 .img {
   background-image: url('../assets/top1.jpg');
   height: 38px;