nsgk_mobile/src/views/agriculturalTrusteeship/socialization/draft.vue

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="草稿箱"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->

    <!--  内容开始  -->
    <div class="main">

      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
      >
  <!--            @load="onLoad"-->
        <div class="main_content_right_list" v-for="item in 10" :key="item" @click="$router.push({name:'agriculturalTrusteeshipSocializationDraftEdit'})">
          <div class="main_content_right_list_center">
            <img src="../../../../static/images/agriculturalTrusteeship/index/test.png" width="80">
            <div class="main_content_right_list_content">
              <p class="tt">如果只有一行就空着啊啊啊啊啊啊啊啊啊啊啊啊</p>
              <p class="name">2022.03.15</p>
            </div>
          </div>
        </div>
      </van-list>

    </div>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import agr from "@/components/common/agr_footer";
  import dialogClose from "@/components/agriculturalTrusteeship/dialog";

  export default {
    name: "agriculturalTrusteeshipIndex",
    components: {
      agr,
      dialogClose
    },
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        showDialog:false
      };
    },
    created() {

    },
    methods: {
      openDialog(val){
        this.showDialog = val
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{

}
  /*头部*/
  .header{
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 2vh 4% 0vh;
    p{
      &:nth-child(1){
        color: #334281;
        font-size: .45rem;
      }
      &:nth-child(2){
        color: #7A7A7A;
        margin-top: .5vh;
      }
    }
  }

  /*内容*/
  .main{
    width: 94%;
    margin: 0 auto;
    .main_content_right_list{
      margin-top: 2vh;
      padding: 1.5vh 3%;
      background: #ffffff;
      border-radius: 10PX;
      /*box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);*/
      /deep/ .van-cell{
        padding: 0;
        margin-top: 8PX;
      }
      .main_content_right_list_header{
        display: flex;
        margin-bottom: 1vh;
        align-items: center;
        p{
          padding: 3PX 10PX;
          border-radius: 8PX;
          &:nth-child(1){background: #2B7EEC;color: #ffffff;}
          &:nth-child(2){background: #E2E9FD;color: #497CE8;margin-left: 10PX;}
          &:nth-child(3){color: #334281;margin-left: auto;padding:0 0 0 15PX;background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center}
        }
      }
      .main_content_right_list_center{
        display: flex;
        img{
          border-radius: 15PX;
          margin-right: 4%;
        }
        .main_content_right_list_content{
          display: flex;
          flex-direction:column;
          justify-content: space-between;
          .tt{
            color: #333333;
            font-size: .35rem;
          }
          .tab{
            display: flex;
            justify-content: space-between;
            p{
              &:nth-child(1){
                flex: 1;
                color: #FF5E00;
                span{
                  font-size: .4rem;
                }
              }
              &:nth-child(2){
                span{
                  display: inline-block;
                  text-align: center;
                  padding: 2PX 5PX;
                  &:nth-child(1){
                    color: #497CE8;
                    background: #E2E9FD;
                    border-top-left-radius: 10PX;
                  }
                  &:nth-child(2){
                    color: #ffffff;
                    background-image: linear-gradient(to right , #5D87FA , #5FD5F5);
                    border-bottom-right-radius: 10PX;
                  }
                }
              }
            }
          }
          .name{
            color: #334281;
            margin-left: auto;
            padding:0 0 0 15PX;
            background: url("../../../../static/images/agriculturalTrusteeship/socialization/socialization_icon_clock.png") no-repeat left center
          }
        }
      }
    }
  }

</style>