小记一哈,虽然很简单,麻雀虽小,五脏俱全

起因

我们这边有个客户需要演示查询航班的信息,然后要求就是做的跟艺龙机票查询那样就OK了

正文

下面我们来看下艺龙的机票的界面

哈哈哈,然后来看看我写的

最终来看在我们产品下的效果

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>机票</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .wrap {
      background: #fefe;
      padding: 10px;
      border-radius: 10px;
      margin: 10px 0;
    }

    .jipiao,
    .time {
      display: flex;
      justify-content: space-between;
      overflow: hidden;
    }

    .tl,
    .tr,
    .price {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      float: left;
    }

    .text {
      font-size: 12px;
      color: gray;
    }

    .line {
      margin: 0 18px;
    }

    .arrawLine {
      margin-top: 13px;
      width: 60px;
      height: 2px;
      background: gray;
    }

    .arraw {
      width: 6px;
      height: 0px;
      border-top: 2px solid gray;
      border-right: 2px solid gray;
      transform: rotate(45deg);
      margin-left: 53px;
      margin-top: -6px;
    }
    .money{
        color: orange;
        font-size:20px;
    }
    
  </style>
</head>

<body>
  <div class="wrap">
    <div class="jipiao">
      <div class="time">
        <div class="tl">
          <span class="startTime">07:55</span>
          <span class="text">虹桥机场</span>
        </div>
        <div class="line">
          <div class="arrawLine"></div>
          <div class="arraw"></div>
        </div>
        <div class="tr">
          <span class="endTime">10:10</span>
          <span class="text">首都机场T3</span>
        </div>
      </div>
      <div class="price">
        <span class="money">¥1320</span>
        <span class="text" >全价经济舱</span>
      </div>
    </div>
    <p class="text">国航CA1858|波音777-300ER(大)</p>
  </div>

 <div class="wrap" >
    <div class="jipiao" >
      <div class="time" >
        <div class="tl" >
          <span class="startTime">07:55</span>
          <span class="text" >虹桥机场</span>
        </div>
        <div class="line" >
          <div class="arrawLine" ></div>
          <div class="arraw" ></div>
        </div>
        <div class="tr" >
          <span class="endTime">10:10</span>
          <span class="text" >首都机场T3</span>
        </div>
      </div>
      <div class="price" >
        <span class="money">¥1320</span>
        <span class="text" >全价经济舱</span>
      </div>
    </div>
    <p class="text" >国航CA1858|波音777-300ER(大)</p>
  </div>
   <div class="wrap" >
    <div class="jipiao" >
      <div class="time" >
        <div class="tl" >
          <span class="startTime">07:55</span>
          <span class="text" >虹桥机场</span>
        </div>
        <div class="line" >
          <div class="arrawLine" ></div>
          <div class="arraw" ></div>
        </div>
        <div class="tr" >
          <span class="endTime">10:10</span>
          <span class="text" >首都机场T3</span>
        </div>
      </div>
      <div class="price" >
        <span class="money">¥1320</span>
        <span class="text" >全价经济舱</span>
      </div>
    </div>
    <p class="text" >国航CA1858|波音777-300ER(大)</p>
  </div>
   <div class="wrap" >
    <div class="jipiao" >
      <div class="time" >
        <div class="tl" >
          <span class="startTime">07:55</span>
          <span class="text" >虹桥机场</span>
        </div>
        <div class="line" >
          <div class="arrawLine" ></div>
          <div class="arraw" ></div>
        </div>
        <div class="tr" >
          <span class="endTime">10:10</span>
          <span class="text" >首都机场T3</span>
        </div>
      </div>
      <div class="price" >
        <span class="money">¥1320</span>
        <span class="text" >全价经济舱</span>
      </div>
    </div>
    <p class="text" >国航CA1858|波音777-300ER(大)</p>
  </div>
</body>

</html>

the end


扫描二维码,在手机上阅读!