<template>
  <div >
      <navbar1 class="navbar" :logopangzi='logopangzi' :gouwuchenum=gouwuchenum :loginmsg='loginmsg'></navbar1>
      <div class="zhankong"></div>
      <tuijian class="tuijian"></tuijian>
      <div class="shangpinlist">
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
          <shangpin class="shangpin"></shangpin>
      </div>
      <el-pagination class="fenye"  background="#f10214" layout="prev, pager, next" :total="10"></el-pagination>
  </div>
</template>

<script>
import navbar1 from "../components/navbar1"
import tuijian from "../components/tuijian"
import shangpin from "../components/shangpin"

export default {
    name: 'index',
    data () {
      return {
        logopangzi: '',
        gouwuchenum:0,
        loginmsg:'注册/登录'
      }
    },
    components: {
        navbar1,
        tuijian,
        shangpin,
    }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
body{
   background-color: #f4f4f4;
}
.navbar{
    position: fixed;
}
.zhankong{
    height: 70px;
}
.tuijian{
   margin-bottom: 20px;
}
.shangpinlist{
    width: 80%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0 auto;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #f10214;
    
}
.fenye{
    margin: 50px 0 0 200px;
}
</style>