概述：elmentUi的Descriptions 描述列表，美观，但是确实必要的图片展示功能。

1、pc端：

        1.1、代码-html：

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-row :gutter="0" style="display: flex">
      <el-col :span="18">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户名"> kooriookami</el-descriptions-item>
          <el-descriptions-item label="用户名"> kooriookami</el-descriptions-item>
          <el-descriptions-item label="用户名"> kooriookami</el-descriptions-item>
          <el-descriptions-item label="用户名"> kooriookami</el-descriptions-item>
          <el-descriptions-item label="用户名"> kooriookami</el-descriptions-item>
          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
          <el-descriptions-item label="备注">学校</el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="6" style="align-items: stretch">
        <div class="imgBox">
          <img class="devImg" fit="fill" :src="require('@/assets/images/index/1.jpg')" />
        </div>
      </el-col>
    </el-row>
    <el-descriptions style="margin-top:-1px" :column="2" border>
     <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </el-dialog>

        1.2、代码-css ：

.imgBox {
  border: 1px solid #ebeef5;
  border-left: none;
  width: 100%;
  height: 100%;
  position: relative;
  .devImg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: 12px 10px;
  }
}

        1.3、示例： 

  1.4要点： 

1.  display: flex+align-items: stretch确保图片容器高度以内容为准；
2. 绝父相定位确保图片兼容显示；

2、移动端：

        2.1、代码-html:

<template>
  <el-dialog title="xxxxx" :visible.sync="dialogFormVisible">
    <el-row :gutter="0" class="details-row">
      <el-col :sm="18" :xs="24">
        <el-descriptions :column="isMobile ? 1 : 2" border>
          <el-descriptions-item label="用户名">
            kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="用户名">
            kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="用户名">
            kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="用户名">
            kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="用户名">
            kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
          <el-descriptions-item label="备注">学校</el-descriptions-item>
          <el-descriptions-item label="联系地址"
            >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
          >
        </el-descriptions>
      </el-col>
      <el-col :sm="6" :xs="24" class="details-row-img">
        <div class="imgBox">
          <img
            class="devImg"
            fit="fill"
            :src="require('@/assets/images/index/1.jpg')"
          />
        </div>
      </el-col>
    </el-row>
    <el-descriptions style="margin-top: -1px" :column="2" border>
      <el-descriptions-item label="联系地址"
        >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
      >
    </el-descriptions>
  </el-dialog>
</template>

        2.2、代码-css： 

::v-deep .el-dialog {
  .details-row {
    display: flex;
    .details-row-img {
      align-items: stretch;
    }
    .imgBox {
      border: 1px solid #ebeef5;
      border-left: none;
      width: 100%;
      height: 100%;
      position: relative;
      .devImg {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: auto;
        max-height: 100%;
        padding: 12px 10px;
      }
    }
  }
  @media screen and (max-width: 768px) {
    margin: 5vh auto 10px !important;
    width: 90%;
    font-size: 12px;
    .el-dialog__body {
      padding-top: 0;
      overflow: scroll;
      max-height: 85vh;
      min-height: 60vh;
      .el-descriptions-item__cell {
        font-size: 12px;
      }
      .details-row {
        flex-direction: column-reverse;
        .imgBox {
          height: 120px;
          width: auto;
          border-left: 1px solid #ebeef5;
          border-bottom: none;
        }
      }
    }
  }
}

         2.3、代码-js

//判断是否移动端
setIsMobile() {
      let has = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if(Array.isArray(has)&&has.length>0){
        this.$store.commit("setting/SET_MOBILE", true)
      }else{
        this.$store.commit("setting/SET_MOBILE", false)
      }
    },

        2.4示例：

2.5、要点： 

 1、flex-direction: column-reverse;垂直翻转