CoolGod/src/components/Home.vue

<template>
  <el-container class="home-container" id="topAnchor" direction="vertical">
    <div style="height:45px; width:100%; background-color:#f7f8fa ">
      <div style="position:absolute;top:10px;left:12%;line-height:2.5em;">预约热线 000-000-000</div>
      <div style="position:absolute;top:10px;right:5%">
        <router-link to="login"><el-button style="width:100px;">登陆</el-button></router-link>
      </div>
    </div>
    <!-- //导航栏 -->
    <el-header style="height: 100px; width:100% display: flex ; justify-content: space-between; background-color: #fff;">
      <div style="position: relative;">
        <h3 class="top_title1">控温者 - 数据中心节能平台</h3>
      </div>
      <!-- <p >高路交通理解云</p> -->

    </el-header>

    <!-- //轮播图  start-->
    <div class="carousel">
      <template>
        <el-carousel :interval="4000" type="card" height="450px">
          <el-carousel-item v-for="(item, index) in list" :key="index">
            <img :src="item.src" alt="" style="width: 100%; height: 100%; " />
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- //轮播图  end-->
    <el-footer style=" color: #ddd; height:350px; background-color: rgb(37, 37, 37); margin-top: 55px">
      <div class="mod_copyright">

        <div class="copyright">
          <el-row :gutter="20">
            <el-col :span="8">
              <h4>@版权所有</h4>
              <div class="footer_text">内蒙古工业大学</div>
              <div class="footer_text">内蒙古工业大学人工智能研究小组</div>
            </el-col>
            <el-col :span="8">
              <div>
                <h3>联系方式</h3>
                <div class="footer_text">联系QQ: xxxxxxx</div>
                <div class="footer_text">联系邮箱: xxxxx@.com</div>
                <div class="footer_text">手机号码:157xxxxxxxx</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="color: #7e7e7e;font-size:12px; text-align:center;">
          <p>地址：内蒙古工业大学金川校区 邮编：xxxxx 电话：xxx-xxx-xxxx 传真：xxx-xxxxxxxx 蒙公网安备 15082202000131号<br />Copyright &copy; 2018.Company name All rights reserved.</p>
        </div>
      </div>
    </el-footer>
    <!-- 返回顶部按钮 -->
    <template>
      <el-backtop>
        <div
          style="{
        height: 100%;
        width: 100%;
        border-radius: 50px;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      }"
        >
          <i class="el-icon-caret-top"></i>
        </div>
      </el-backtop>
    </template>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      list: [
        {
          src: 'https://img2.baidu.com/it/u=903467524,2920385702&fm=26&fmt=auto'
        },
        {
          src: 'https://img2.baidu.com/it/u=1514194555,1408855411&fm=26&fmt=auto'
        },
        {
          src: 'https://img1.baidu.com/it/u=4264221152,3602489092&fm=26&fmt=auto'
        },

        {
          src: 'https://img2.baidu.com/it/u=2673658967,4041565795&fm=26&fmt=auto'
        },
        {
          src: 'https://img1.baidu.com/it/u=135466862,2358213243&fm=26&fmt=auto'
        }
      ],
      activeIndex: '1'
    }
  }
}
</script>

<style lang="less" scoped>
.top_title1 {
  position: absolute;
  color: #409eff;
  font-size: 35px;
  top: -12px;
  left: 36%;
}
.top_title2 {
  position: absolute;
  color: #cccccc;
  font-size: 35px;
  top: -12px;
  left: 50%;
}
.el-menu-demo {
  margin-top: 8px;
  margin-left: 40%;
  display: inline-flex;
}
.el-menu-item {
  font-size: 18px;
  height: 30px;
  background-color: #fff;
}
.el-menu-item.is-active,
.el-menu-item:hover i {
  color: #409eff !important;
}
.LOGO {
  width: 350px;
  height: 75px;
}
.w {
  width: 1600px;
  margin: 20px auto;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.image {
  width: 100%;
  height: 230px;
  object-fit: fill;
  display: block;
}
.el-card {
  height: 350px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.footer_text {
  margin-bottom: 18px;
  font-size: 10px;
  cursor: pointer;
  color: #7e7e7e;
}
.footer_text:hover {
  font-weight: 800;
}

.el-menu-item:before {
  content: '';
}
.news_title {
  font-weight: normal;
  cursor: pointer;
  margin-top: 0;
}
.news_title a {
  text-decoration: none;
  color: #000;
}
.news:hover,
.news:hover .news_title a {
  color: #409eff;
}

.mod_copyright .links ul li {
  float: left;
  padding-left: 120px;
  list-style: none;
  margin-top: 10px;
  margin-left: 18px;
}
.mod_copyright .links ul li a {
  color: #7e7e7e;
  font-size: 14 px;
}
.links {
  width: 1347px;
  height: 80px;
  margin: 0 auto;
  border-bottom: 1px #7e7e7e solid;
}

.copyright {
  margin-left: 35%;
}
</style>