<template>
    <div class="app-container">
      <van-nav-bar
        title="公示公告"
      >
        <template #right>
          <van-icon name="wap-nav" color="#000" size="18"/>
        </template>
      </van-nav-bar>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" is-link url="" style="margin:2%;width:96%;border-radius: 6px;box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); min-height: 100px;">
          <template #title>
            <p style="display:inline-block;background: #EC4B2C;height:20px;width: 20px;border-radius: 2px;margin-right: 10px;float: left"></p><p style="font-weight: bold;font-size: 18px;">{{item}}</p>
          </template>
          <template #label>
            <p style="font-size: 16px"></p>
          </template>
        </van-cell>
      </van-list>
      <yinnongIndex></yinnongIndex>
    </div>
</template>

<script>
  import yinnongIndex from "../yinnongIndex";
    export default {
      components: {
        yinnongIndex
      },
        name: "publicity",
      data() {
        return {
          list: [],
          loading: false,
          finished: false,
        };
      },
      methods: {
        onLoad() {
          // 异步更新数据
          // setTimeout 仅做示例，真实场景中一般为 ajax 请求
          setTimeout(() => {
            for (let i = 0; i < 1; i++) {
              this.list.push("暂无公示公告");
            }

            // 加载状态结束
            this.loading = false;

            // 数据全部加载完成
            if (this.list.length >= 1) {
              this.finished = true;
            }
          }, 1000);
        },
      },
    }
</script>

<style scoped>
>>>  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
