<template>
  <div>
    <h2>son1</h2>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card shadow="hover">鼠标悬浮时显示</el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">鼠标悬浮时显示</el-card>
      </el-col>
   
    </el-row>
      <el-row :gutter="24">
      <ul>
          <li v-for="(item,idx) in pageLists" :key="idx" style="color:black;">  <!-- for 绑定 lists + 绑定下标 -->
                <!-- {{item.title1}}-{{item.content1}} -->
              
              <el-col :span="12" >
                <el-card  shadow="hover" >
                    <span>{{item.title1}}</span>
                     <el-divider></el-divider>
                     <span>{{item.content1}}</span>

                </el-card>
              </el-col>
                

            </li>
        </ul>
      </el-row>

  </div>
</template>

<style scoped>
body {
  color: black;
}
ul{
        list-style: none;
        margin:0;padding:0;
}
li{
  display:inline
}
.el-col{
  margin-bottom: 20px;
}
</style>


<script>
import store from '@/store' //取出存储器里面的lists
export default {
    name:'List',
    store,
    computed:{ //动态监听变化
        pageLists(){
            return store.state.lists
        }
    },
   
}
</script>