<template>
    <el-row class="page">
      <el-row class="block-view" v-for="(item,index) in expressList">
        <el-row class="top">
          <el-row> 运单号: {{item.express_no}}</el-row>
          <el-row class="top-time"> 签收时间: {{item.s_datetime}}</el-row>
        </el-row>
        <el-row class="express-view">
          <el-row class="express-no-view">
            <el-text class="city">
              {{item.senderCity}}
            </el-text>
            <el-text class="user">
              {{item.senderName}}
            </el-text>
          </el-row>
          <el-row class="express-no-view">
            <el-image class="logo" src="/logo.png"></el-image>
            <el-text class="sign">
              已签收
            </el-text>
          </el-row>
          <el-row class="express-no-view">
            <el-text class="city">
              {{item.receiverCity}}
            </el-text>
            <el-text class="user">
              {{item.receiverName}}
            </el-text>
          </el-row>
          <el-row class="express-icon-view">
            <el-icon>
              <Delete />
            </el-icon>
            <el-icon>
              <Edit />
            </el-icon>
          </el-row>
        </el-row>
        
        <el-row class="line-view"></el-row>
      </el-row>
      
    </el-row>
  </template>
  
  <script setup>
  import {
    Delete,
    Edit
  } from '@element-plus/icons-vue'
  import {
    reactive
  } from 'vue';
  const expressList = reactive([{
    "express_no": "SF1313131313123",
    "senderCity":"深圳市",
    "senderName":"冰凉凉1",
    "receiverCity":"福州市",
    "receiverName":"叶丽丽",
    "s_datetime": "2024-10-24 11:58"
  },
  {
    "express_no": "SF1313131313123",
    "senderCity":"深圳市",
    "senderName":"冰凉凉2",
    "receiverCity":"福州市",
    "receiverName":"叶丽丽",
    "s_datetime": "2024-10-24 11:58"
  },
  {
    "express_no": "SF1313131313123",
    "senderCity":"深圳市",
    "senderName":"冰凉凉3",
    "receiverCity":"福州市",
    "receiverName":"叶丽丽",
    "s_datetime": "2024-10-24 11:58"
  },
  {
    "express_no": "SF1313131313123",
    "senderCity":"深圳市",
    "senderName":"冰凉凉4",
    "receiverCity":"福州市",
    "receiverName":"叶丽丽",
    "s_datetime": "2024-10-24 11:58"
  }
  ])
  </script>
  
  <style>
  .page {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: white;
    line-height: 20px;
  }
  .block-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .top {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 20px;
    color: gray;
    font-size: 12px;
  }
  .top-time {
    margin-left: 120px;
  }
  .express-view {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    width: 100%;
  }
  .express-no-view {
    display: flex;
    flex-direction: column;
  }
  .logo {
    width: 40px;
    height: 10px;
  }
  .city {
    font-size: 20px;
    margin-bottom: 10px;
  }
  .user {
    color: gray;
  }
  .sign {
    color: red;
    margin-top: 10px;
  }
  .express-icon-view {
    width: 10%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .line-view {
    height: 0.5px;
    width: 95%;
    background-color: lightgray;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  </style>