web-tj/src/views/index.vue

<template>
  <div id="index">
    <div class="w_1200">
      <el-col :span="24" class="top">
        <div :span="24" class="img">
          <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>
        <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>
    </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="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>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      url: require('../assets/case7.jpg'),
      img: require('../assets/main1.jpg'),
      tel: require('../assets/top2.png'),
      imagesbox: [
        {
          id: 0,
          idView: require('@/assets/banner_p.jpg'),
        },
        {
          id: 1,
          idView: require('@/assets/banner_p.jpg'),
        },
      ],
    };
  },
  created() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.top {
  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;
  width: 1200;
}
.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%;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  min-width: 1230px;
}
.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;
}

.img {
  background-image: url('../assets/top1.jpg');
  height: 38px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.image {
  width: 100%;
  height: 100%;
}
.pic {
  height: 800px;
}
.fon {
  font-size: 48px;
  text-align: center;
  color: blue;
  margin-top: 100px;
}
.small {
  text-align: center;
  color: #99a9bf;
}
.bor {
  border: 1px solid #99a9bf;
  margin: 20px 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>