3

src/views/index.vue

@@ -1,176 +1,178 @@
 <template>
   <div id="index">
-    <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>
+    <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>
           </el-col>
-        </el-col>
-      </div>
-      <el-menu mode="horizontal">
-        <el-menu-item index="9" class="images"></el-menu-item>
-        <el-menu-item index="1" class="nav">首页</el-menu-item>
-        <el-menu-item index="2" class="na">关于我们</el-menu-item>
-        <el-menu-item index="3" class="na">产品中心</el-menu-item>
-        <el-menu-item index="4" class="na">案例应用</el-menu-item>
-        <el-menu-item index="5" class="na">技术支持</el-menu-item>
-        <el-menu-item index="6" class="na">新闻中心</el-menu-item>
-        <el-menu-item index="7" class="na">人才招聘</el-menu-item>
-        <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-menu mode="horizontal">
+          <el-menu-item index="9" class="images"></el-menu-item>
+          <el-menu-item index="1" class="nav">首页</el-menu-item>
+          <el-menu-item index="2" class="na">关于我们</el-menu-item>
+          <el-menu-item index="3" class="na">产品中心</el-menu-item>
+          <el-menu-item index="4" class="na">案例应用</el-menu-item>
+          <el-menu-item index="5" class="na">技术支持</el-menu-item>
+          <el-menu-item index="6" class="na">新闻中心</el-menu-item>
+          <el-menu-item index="7" class="na">人才招聘</el-menu-item>
+          <el-menu-item index="8" class="na">联系我们</el-menu-item>
+        </el-menu>
       </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 :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="4" class="cent">
-          <img :src="img" class="im" />
+        <el-col :span="24" class="fon">
+          <p>长春福瑞科技有限公司</p>
         </el-col>
-        <el-col :span="4" class="cent">
-          <img :src="img" class="im" />
+        <el-col :span="24" class="small">
+          <p>ChangChun FuRui Technology Co., Ltd</p>
         </el-col>
-        <el-col :span="4" class="cent">
-          <img :src="img" class="im" />
+        <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>
-      <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="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="aut">
+          <el-col :span="4" class="cent">
+            <img :src="img" class="im" />
           </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>
+          <el-col :span="4" class="cent">
+            <img :src="img" class="im" />
           </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>
-          </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>
+          <el-col :span="4" class="cent">
+            <img :src="img" class="im" />
           </el-col>
-          <el-col :span="24" class="center">
-            <p>more</p>
+          <el-col :span="4" class="cent">
+            <img :src="img" class="im" />
           </el-col>
         </el-col>
-        <el-col :span="24" class="man">
-          <el-col :span="24" class="te">
-            <p>案例应用</p>
+        <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="cen"> </el-col>
-          <el-col :span="24" class="cl">
-            <el-col :span="12">
-              <img :src="url" width="800px" />
-            </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 :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="12" class="dq">
-                <p>-日期：2020年8月19日</p>
+            </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>
-              <el-col :span="4" class="bord">
-                <img :src="url" height="150px" width="150px" />
+            </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>
-              <el-col :span="4" class="bord">
-                <img :src="url" height="150px" width="150px" />
+            </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>
-              <el-col :span="4" class="bord">
-                <img :src="url" height="150px" width="150px" />
+            </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>
-              <el-col :span="4" class="bord">
-                <img :src="url" height="150px" width="150px" />
+              <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>
             </el-col>
           </el-col>
         </el-col>
-      </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="2" class="company">
-          <p>行业新闻</p>
+        <el-col :span="24">
+          <p class="rdzx">热点资讯</p>
         </el-col>
-        <el-col :span="2" class="company">
-          <p>展会资讯</p>
+        <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>
       </el-col>
-    </el-col>
-    <el-col :span="24" class="foot"> </el-col>
+      <el-col :span="24" class="foot"> </el-col>
+    </div>
   </div>
 </template>
 
@@ -218,6 +220,10 @@ export default {
 .top {
   position: relative;
 }
+.w_1200 {
+  margin: 0 auto;
+  width: 1200;
+}
 .aut {
   margin: 0 auto;
 }