<template>
  <div class="home_page">
    <div class="list">
      <div class="li" v-for="(i,key) of list" :key="key" @click="toDetail(i.article_id)">
        <div class="li-left">
          <span class="title">{{i.title}}</span>
          <div class="bottom">
            <span>{{i.author || '数字茶商'}}</span>
            <span>{{ $day(i.publish_time * 1000).format('MM-DD') }}</span>
          </div>
        </div>
        <div class="li-right">
          <image
            class="gg_img"
            :src="i.thumb"
          ></image>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { post } from "@/request/api.js";
export default {
  data() {
    return {
      list:[]
    };
  },
  methods: {
    init(){
      let data = {
        is_index: 0
      }
      post("v1/notice",data).then(res => {
            if(res.code === 0){
                this.list = res.data.data
            }
        })
    },
    //跳转通告详情
    toDetail(id) {
      this.goto("/pages/notice/detail", { id });
    },
  },
  onLoad(option) {
    this.init()
  },
  computed: {},
  created() {},
};
</script>
  <style lang="scss" scoped>
.home_page {
  padding: 20px;
  .list {
    // margin-top: 20px;
    .li {
      display: flex;
      flex-direction: row;
      background: #fafafa;
      box-shadow: 0px 2px 50px 0px rgba(0, 0, 0, 0.08);
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 1px solid #dddddd;
      margin-top: 20px;
      // border-image: linear-gradient(
      //     135deg,
      //     rgba(41.00000135600567, 121.00000038743019, 255, 1),
      //     rgba(255, 170.39100408554077, 178.8549891114235, 1)
      //   )
      //   1 1;
      padding: 10rpx;
      .li-left {
        flex: 3;
        display: flex;
        flex-direction: column;
        // background: red;
        justify-content: center;
        align-items: flex-start;
        padding: 0 10px;
        .title {
          font-size: 28rpx;
          color: #1b1a1a;
          font-family: "SourceHanSansCN-Bold";
          font-weight: bold;
        }

        .bottom {
          width: 100%;
          // background-color: red;
          margin-top: 50rpx;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          span {
            font-size: 20rpx;
            font-weight: normal;
            color: #999999;
          }
        }
      }
      .li-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px;
        .gg_img {
          width: 237rpx;
          height: 166rpx;
          border-radius: 8px 8px 8px 8px;
          // background: red;
        }
      }
    }
  }
}
</style>