reservation-ssr/pages/index.vue

<template>
  <div class="section">
    <div class="banner">
      <div class="container">
        <el-dialog title="登  录" :visible.sync="isDialog" center width="30%">
          <el-form label-width="0px" :model="formLabelAlign">
            <el-form-item>
              <el-input v-model="formLabelAlign.name" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input  type="password" v-model="formLabelAlign.region" placeholder="请输入密码"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="isDialog = false">登 录</el-button>
            <el-button type="text">忘记密码？</el-button>
          </div>
        </el-dialog>
        <el-row>
          <el-col :span="12">
            <span><i></i> 服务预约</span>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <a href="#" @click="isDialog = true">登录</a>
            <a href="register">注册</a>
            <a href="#">客户端下载</a>
            <a href="#">在线客服</a>
          </el-col>
        </el-row>
        <div class="banner-btn">
          <a href="#">自动开店</a>
          <a href="#">立即咨询</a>
        </div>
      </div>
    </div>
    <carousel></carousel>
    <div class="info">
      <div class="container">
        <ul class="list-inline">
          <li>
            <a href="#">
              <img src="/banner/reservation1.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/banner/reservation2.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/banner/reservation3.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/banner/reservation4.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/banner/reservation6.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="/banner/reservation5.jpg" alt="">
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Carousel from '@/components/common/Carousel.vue'
export default {
  name: 'index',
  layout: 'default',
  components: {
    Carousel
  },
  data () {
    return {
      isDialog: false,
      formLabelAlign: {
        name: '',
        region: ''
      }
    }
  },
  methods: {

  }
}
</script>

<style type="text/scss" lang="scss" scoped>
  .banner{
    height:600px;
    background: url("/img/banner.jpg")no-repeat center center;
    padding-top:20px;
    .dialog-footer{
      .el-button--text{
        margin-left: 253px;
      }
      .el-button--primary{
        display: block;
        width: 94%;
        margin: 0 10px;
      }
    }
    .banner-btn{
      text-align: center;
      a{
        display:inline-block;
        margin:410px 90px 0;
        width:250px;
        height:58px;
        line-height: 58px;
        border-radius:10px;
        text-align: center;
        background: #feac38;
        font-size: 32px;
        font-weight: bold;
        color:#fff;
      }
    }
    a{
      display:inline-block;
      padding:0 20px;
      color:#fff;
      font-size: 16px;
    }
    span{
      font-size: 24px;
      color:#fff;
      i{
        display:inline-block;
        width:24px;
        height:24px;
        background: url("/header/favicon.png")no-repeat;
        background-size: cover;
        vertical-align: bottom;
      }

    }
  }
  .info{
    padding: 40px 0 55px 0;
    text-align: center;
    ul{
      width:100%;
      li{
        position:relative;
        height:308px;
        margin:0 20px 20px 0;
        padding:0;
        &:hover{
          cursor:pointer;
          position:relative;
          top:2px;
          left:2px;
          box-shadow: 0 0 5px rgba(0,0,0,.7);
          a{
            display:block;
          }
        }
        &:nth-child(1){
          margin-right:0;
          background: #e59265;
        }
        &:nth-child(2){
          background: #6ecdb8;
        }
        &:nth-child(3){
          margin-right:0;
          background: #91c2e7;
        }
        &:nth-child(4){
          background: #91c2e7;}
        &:nth-child(5){
          background: #ed927a;
        }
        &:nth-child(6){margin-right:0;
          background: #f296a0;
        }
      }
    }
  }
</style>