2

src/views/index.vue

@@ -1,40 +1,176 @@
 <template>
   <div id="index">
     <el-col :span="24" class="top">
-      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-        <el-menu-item index="1">处理中心</el-menu-item>
-        <el-submenu index="2">
-          <template slot="title">我的工作台</template>
-          <el-menu-item index="2-1">选项1</el-menu-item>
-          <el-menu-item index="2-2">选项2</el-menu-item>
-          <el-menu-item index="2-3">选项3</el-menu-item>
-          <el-submenu index="2-4">
-            <template slot="title">选项4</template>
-            <el-menu-item index="2-4-1">选项1</el-menu-item>
-            <el-menu-item index="2-4-2">选项2</el-menu-item>
-            <el-menu-item index="2-4-3">选项3</el-menu-item>
-          </el-submenu>
-        </el-submenu>
-        <el-menu-item index="3" disabled>消息中心</el-menu-item>
-        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+      <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>
+      </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">
+    <el-col :span="24" class="main">
       <el-col :span="24">
-        <el-carousel indicator-position="outside">
+        <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>
+        <p>长春福瑞科技有限公司</p>
       </el-col>
       <el-col :span="24" class="small">
-        <p>Shanghai Qi Kai Optoelectronics Technology Co., Ltd</p>
+        <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="4" class="cent">
+          <img :src="img" class="im" />
+        </el-col>
+        <el-col :span="4" class="cent">
+          <img :src="img" class="im" />
+        </el-col>
+        <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="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="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>
+          <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="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="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 :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>
+        <el-col :span="2" class="company">
+          <p>展会资讯</p>
+        </el-col>
+      </el-col>
     </el-col>
+    <el-col :span="24" class="foot"> </el-col>
   </div>
 </template>
 
@@ -46,6 +182,8 @@ export default {
   components: {},
   data: function() {
     return {
+      url: require('../assets/case7.jpg'),
+      img: require('../assets/main1.jpg'),
       imagesbox: [
         {
           id: 0,
@@ -77,6 +215,143 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.top {
+  position: relative;
+}
+.aut {
+  margin: 0 auto;
+}
+.ttt {
+  font-size: 30px;
+  color: #ffffff;
+  margin: 100px;
+}
+.com {
+  text-align: center;
+  font-size: 24px;
+  .company {
+    background-color: #504e4e;
+    margin: 50px 10px 50px 10px;
+    padding: 10px;
+  }
+}
+.rdzx {
+  text-align: center;
+  font-size: 36px;
+  color: #3d78d8;
+  margin: 400px 0 50px 0;
+}
+.bord {
+  border: 5px solid #504e4e;
+  height: 160px;
+  width: 160px;
+  margin: 20px;
+}
+.dq {
+  font-size: 24px;
+  color: #ffffff;
+}
+.cent {
+  border: 1px solid #727e8f;
+  border-radius: 50%;
+  padding: 20px;
+  margin-left: 120px;
+  .im {
+    border-radius: 50%;
+  }
+}
+.cen {
+  border: 1px solid #727e8f;
+}
+.cl {
+  position: relative;
+  background-color: #7ca4e4;
+  margin: 100px 500px 100px 100px;
+  height: 550px;
+  width: 90%;
+}
+.center {
+  margin: 30px 0 30px 900px;
+  text-align: center;
+  font-size: 24px;
+  background-color: #85adee;
+  width: 200px;
+  height: 50px;
+  transition: 2s;
+  :hover {
+    width: 300px;
+  }
+}
+.back {
+  background-color: #dce0e6;
+  .ce {
+    text-align: center;
+    font-size: 48px;
+    color: #3d78d8;
+    margin: 100px 0 100px 0;
+  }
+  .bor {
+    margin-left: 400px;
+    border-bottom: 1px solid #bdc1c7;
+    width: 1200px;
+    margin-bottom: 50px;
+  }
+  .polaroid {
+    margin: 50px 100px;
+    width: 300px;
+    //text-align: center;
+    .card {
+      font-size: 24px;
+      color: #3d78d8;
+      text-align: center;
+      padding-top: 30px;
+      background-color: #e2d8d8;
+      height: 80px;
+    }
+    .car {
+      text-align: center;
+      padding-top: 30px;
+      background-color: #e2d8d8;
+      height: 150px;
+    }
+    .fox {
+      text-align: center;
+      margin: 0 60px;
+      font-size: 24px;
+      background-color: #3d78d8;
+      width: 200px;
+      height: 40px;
+    }
+  }
+}
+.images {
+  background-image: url('../assets/logo.jpg');
+  background-size: 300px;
+  height: 75px;
+  width: 300px;
+  margin: 0 100px;
+}
+.te {
+  text-align: center;
+  font-size: 36px;
+  color: #ffffff;
+  margin: 50px 0 50px 0;
+}
+.nav {
+  padding-left: 400px;
+  height: 100px;
+  font-size: 24px;
+}
+.na {
+  font-size: 24px;
+}
+.tp {
+  margin-left: 1100px;
+}
+.img {
+  background-image: url('../assets/top1.jpg');
+  height: 38px;
+}
 .el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
 }
@@ -95,7 +370,7 @@ export default {
   font-size: 48px;
   text-align: center;
   color: blue;
-  margin-top: 50px;
+  margin-top: 100px;
 }
 .small {
   text-align: center;
@@ -104,6 +379,20 @@ export default {
 .bor {
   border: 1px solid #99a9bf;
   margin: 20px 0 20px 0;
-  padding: 0 20px 0 ;
+  padding: 0 10px 0 10px;
+}
+.text {
+  text-align: center;
+  font-size: 20px;
+  color: #6c6f74;
+}
+.tt {
+  margin: 20px 0 20px 0;
+}
+.man {
+  margin-top: 100px;
+  background-image: url('../assets/main13.jpg');
+  height: 600px;
+  width: 100%;
 }
 </style>