<template>
  <div class="homepage">
    <div class="content flex">
      <div class="banner">
        <el-carousel trigger="click" height="5.41rem">
          <el-carousel-item v-for="(item,index) in picArr" :key="index">
            <!-- <img class="small" :src = "item.picUrl"/> -->
            <img :src="item.picUrl" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="login" @mouseover="changeActive" @mouseout="remActive">
        <div class="author"></div>
        <div class="login-title">Hi~欢迎来到</div>
        <div class="login-button">用户登录</div>
        <div class="login-button">商家入驻</div>
        <div class="login-button" v-if="isshow">退出</div>
      </div>
    </div>
    <div class="content message">
      <div v-for="(item,index) in messageList" :key="index" class="message-item">
        <div class="t3" style="margin-bottom: 0.2rem;">{{item.head}}</div>
        <div class="flex-between">
          <img :src="item.src" alt="">
          <div>{{item.title}}</div>
        </div>
      </div>
    </div>
    <div class="content flex-between">
      <div v-for="(item,index) in dynamicList" :key="index" class="dynamic-item">
        <div class="flex-between">
          <div class="t3">{{item.title}}</div>
          <div class="more t1">更多 ></div>
        </div>
        <ul>
          <li v-for="(item,index) in item.list" :key="index" class="flex-between">
            <nuxt-link tag="div" to="/about">{{item}}</nuxt-link>
            <div class="time">07-08</div>
          </li>
        </ul>
      </div>
    </div>
   <!-- <div class="content cooperation">
      <div class="cooperation-title t3">合作平台</div>
      <div class="flex-between">
        <div class="cooperation-item" v-for="item in 5">

        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import {getLoopPic} from '@/common/list.js'
  export default {
    created(){
      this.getLoopPic()
    },
    methods:{
      async getLoopPic(){
        let message = {}
        message.status =1
        const {data} = await getLoopPic(message)
        this.picArr = data
      },
      changeActive(){
        this.isshow = true
      },
      remActive(){
        this.isshow = false
      }
    },
    data() {
      return {
        isshow:false,
        picList:[],
        picArr:[],
        messageList: [{
            head: "基地直供专区",
            src: "https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/c210d79ab18147dda465e7646064c33f.jpg",
            title: "脱贫攻坚是一场直接关系到夺取决胜全面建成小康社会的硬仗和大仗，需要全国各行各业和全社会的高度关注和大力支持，更需要各地因地制宜、创新方式，开展卓有成效的扶贫帮困活动。在我国，许多贫困村地处偏远，农产品销售渠道不畅通，农产品滞销严重影响贫困户脱贫增收。北京学校基地直供平台开设“工会采购专区”旨在为贫困地区农产品拓展销售渠道，将当地优秀的农副产品由田间地头搬到学生餐桌的同时，也将它展示给在校老师。基地直供平台依托自身互联网优势，开设工会采购专区能更好的让贫困地区农产品流通在线化、数据化，提高了流通和交易效率"
          },
          {
            head: "扶贫专区",
            src: "https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/afa09c005abd4c249a99f9a85d1bb1b2.jpg",
            title: "中国交建与怒江的联系可以追溯到上世纪90年代，2002年起，按照国务院扶贫开发领导小组的统一部署开始对怒江州进行定点帮扶。自2013年以来，中交集团更是与云南省政府相继签订系列投资协议，分别在交通基础设施、城市综合体开发、轨道交通及其他相关领域建立了全面的战略合作关系，投资并实施了黄牛、生猪、山地鸡养殖，雪桃、重楼、秦艽、草果、白芨、火龙果种植，以及饲料加工等一系列产业扶贫项目，由“输血式”扶贫变为造血式扶贫，中交集团在怒江州的产业扶贫“造血运动”逐渐步入正轨。"
          },
          {
            head: "溯源食品专区",
            src: "https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/f0acdd4c9594464cbb279416fda934ff.jpg",
            title: "基原材料供应商在向食品厂家提供原材料时候进行批次管理，将原材料的原始生产数据制造日期、食用期限、原产地、生产者、遗传基因组合的有无使用的药剂等信息录入到二维码中并打印带有二维码的标签，粘贴在包装箱上后交与食品厂家。在食品厂家原材料入库时，使用数据采集器读取二维码，取得到货原材料的原始生产数据。从该数据就可以马上确认交货的产品是否符合厂家的采购标准。然后将原材料入库。"
          }
        ],
        dynamicList: [{
          title: "新闻资讯",
          list: ["国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向"]
        }, {
          title: "法律法规",
          list: ["国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向"]
        }, {
          title: "平台动态",
          list: ["国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向", "国内建筑新动向"]
        }]
      }
    }
  }
</script>

<style scoped>
  .banner {
    width: 9.16rem;
    height: 5.41rem;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .login {
    width: 2.84rem;
    height: 5.41rem;
    border: .01rem solid rgba(220, 220, 220, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .login>.login-button {
    width: 1.05rem;
    height: .36rem;
    line-height: .36rem;
    text-align: center;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.03rem;
    margin-bottom: 0.2rem;
    border: 1px solid rgba(4, 134, 254, 1);
    font-size: .16rem;
    font-weight: 300;
    color: rgba(4, 134, 254, 1);
  }

  .login>.author {
    margin-top: 0.6rem;
    width: .60rem;
    height: .60rem;
    background: rgba(216, 216, 216, 1);
    border-radius: 50%;
  }

  .login>.login-title {
    font-size: .16rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 1);
    margin: .3rem 0 .53rem 0
  }

  .message {
    margin-top: 0.3rem
  }

  .message-item {
    margin-bottom: 0.2rem;
  }

  .message-item>div>img {
    width: 8.80rem;
    height: 5.40rem;
  }

  .message-item>div>div {
    width: 2.84rem;
    height: 5.40rem;
    border: 1px solid rgba(220, 220, 220, 1);
    padding: .3rem .3rem 0 .3rem
  }

  .dynamic-item {
    width: 3.88rem;
    height: 2.78rem;
    border: 1px solid rgba(151, 152, 153, 1);
    box-sizing: border-box;
    padding: 0.2rem
  }

  .dynamic-item>div {
    padding-bottom: 0.12rem;
    border-bottom: 1px solid rgba(228, 231, 237, 1);
  }

  .dynamic-item .more {
    color: rgba(153, 153, 153, 1);
  }

  .dynamic-item>ul {
    margin-top: 0.12rem;
  }

  .dynamic-item>ul>li {
    margin-bottom: 0.2rem;
  }

  .dynamic-item>ul>li>div {
    color: #343434
  }

  .dynamic-item>ul>li>.time {
    color: #A3A3A3
  }

  .cooperation-item {
    width: 2.31rem;
    height: 1.24rem;
    background: rgba(216, 216, 216, 1);
  }

  .cooperation-title {
    margin: 0.2rem 0 0.18rem 0
  }
  .cooperation{
    margin-bottom:1.21rem;
  }
</style>
