vue排版中間加小三角

<template>
  <div class="buyService">
    <!-- 圖片介紹   -->
    <section class="docPro">
      <div class="docMessage">
        <div class="docLeft">
          <img :src="docUrl ? docUrl : default_img" alt />
          <div class="text">
            <h4>
              {{docName}}
              <span v-if="orderType==4">在線復診服務</span>
              <span v-else-if="orderType==7">電話復診服務</span>
              <span v-else-if="orderType==6">在線咨詢服務</span>
            </h4>
            <p>可和醫生進行無限制交流</p>
          </div>
        </div>
        <div class="docRight">
          <span>¥{{price}}</span>
          /{{serverCount | regAir}}次
        </div>
      </div>
      <div class="promise">
        <ul>
          <li>
            <img src="../../assets/img/doctor/buyPicB1_1.png" alt />
            <p>
              100%醫生本人
            </p>
          </li>
          <li>
            <img src="../../assets/img/doctor/buyPicB1_2.png" alt />
            <p>
              免排隊
            </p>
          </li>
          <li>
            <img src="../../assets/img/doctor/buyPicB1_3.png" alt />
            <p>
             48小時超長服務
            </p>
          </li>
          <li>
            <img src="../../assets/img/doctor/buyPicB1_4.png" alt />
            <p>
              未回復可退 
            </p>
          </li>
        </ul>
      </div>
    </section>
    <!-- 承諾 -->
    <section class="promiseBox">
      <ul>
        <li>
          <img v-if="orderType==4 || orderType==6" src="../../assets/img/doctor/buyIcon4-1.png" />
          <img v-else src="../../assets/img/doctor/buyIcon4.png" />
          <p v-if="orderType==4">不限次數 線上溝通</p>
          <p v-else-if="orderType==7">30分鍾通話時間</p>
          <p v-else-if="orderType==6">和醫生進行交流</p>
        </li>
        <li>
          <i class="iconfont icon-triangleRight"></i>
        </li>
        <li>
          <img src="../../assets/img/doctor/buyIcon5.png" />
          <p>醫生為您診斷開方</p>
        </li>
        <li>
          <i class="iconfont icon-triangleRight"></i>
        </li>
        <li>
          <img src="../../assets/img/doctor/buyIcon6.png" />
          <p>道地葯材 順豐到家</p>
        </li>
      </ul>
    </section>
    <!-- 支付方式 -->
    <section class="payWay">
      <h3 class="payLeft">支付方式</h3>
      <div class="payRight" @click="showPopup()">
        <img :src="payWay[payIndex].img" alt />
        <span>{{payWay[payIndex].text}}</span>
        <i class="iconfont icon-more"></i>
      </div>
      <van-popup v-model="show" position="bottom">
        <div class="payBox">
          <h2>選擇支付方式</h2>
          <ul>
            <li v-for="(item,index) in payWay" :key="index" @click="choosepay(index)">
              <img :src="item.img" />
              <span>{{item.text}}</span>
            </li>
            <li @click="closePopup()">
              <span>取消</span>
            </li>
          </ul>
        </div>
      </van-popup>
    </section>
    <!-- 溫馨提示 -->
    <section class="warmTip">
      <h2>— 溫馨提示 —</h2>
      <div>
        <i>·</i>
        <p>互聯網醫療僅適用常見病、慢性病復診患者，急重症患者、首診 患者請前往實體醫療機構就診。</p>
      </div>
      <div>
        <i>·</i>
        <p>醫生將在3小時內回復您，逾期未回復您可繼續等待或聯系客服。</p>
      </div>
      <div>
        <i>·</i>
        <p>您可通過圖片、文字的方式與醫生進行交流。</p>
      </div>
      <div>
        <i>·</i>
        <p>醫生將根據就診人的實際情況開具調理方案。</p>
      </div>
      <div>
        <i>·</i>
        <p>購買成功后請您如實填寫症狀描述，醫生發給您的問診單。</p>
      </div>
      <div>
        <i>·</i>
        <p>
          本次服務有效時間為48小時
          <strong v-show="orderType!=7">，醫生首次回復您之后開始計時</strong>。
        </p>
      </div>
      <div>
        <i>·</i>
        <p>
          購買即視為同意
          <span @click="jumpAgreement()">《用戶注冊協議》</span>
        </p>
      </div>
    </section>
    <footer>
      <!-- 有默認就診人和就診人數量的時候就可以顯示出來 -->
      <div v-if="haveVisitingPerson!=0" class="VisitingPersonPro">
        <div class="VisitingLeft">
          <span v-show="name">{{name}}</span>
          <span v-show="age">{{age}}歲</span>
          <span v-show="phone">{{phone}}</span>
        </div>
        <div
          v-show="(patientList && patientList.length>0) || isHavePersonFlag==1"
          class="VisitingRight"
          @click="jumpChooseVisitingPerson()"
        >
          <span>更換就診人</span>
          <i class="iconfont icon-arrowLeft"></i>
        </div>
      </div>
      <div class="footer">
        <div class="footerLeft">
          <img src="../../assets/img/doctor/buyIcon7.png" alt /> 聯系客服
        </div>
        <div class="footerCenter">
          實付：
          <span>¥{{price}}</span>
        </div>
        <div class="footerRight" @click="goBuy()">購買</div>
      </div>
    </footer>
  </div>
</template>

<style rel='stylesheet/scss' lang='scss' scoped>
.buyService {
  height: 100%;
  overflow: auto;
  background-color: #f5f5f5;
  .docPro {
    background-color: #fff;
    padding: 0.6rem 0.25rem 0.7rem 0.25rem;
    .docMessage {
      display: flex;
      justify-content: space-between;
      .docLeft {
        display: flex;
        align-items: center;
        img {
          width: 0.98rem;
          height: 0.98rem;
          border: 2px solid #cdced5;
          border-radius: 50%;
          background-color: #cdced5;
          margin-right: 0.3rem;
        }
        .text {
          h4 {
            font-size: 0.3rem;
            font-weight: 500;
            line-height: 0.42rem;
          }
          p {
            font-size: 0.26rem;
            color: #999;
            line-height: 0.42rem;
          }
        }
      }
      .docRight {
        font-size: 0.27rem;
        margin-top: 0.13rem;
        span {
          color: #da0428;
          font-size: 0.34rem;
        }
      }
    }
    .promise {
      margin-top: 0.6rem;
      ul {
        display: flex;
        li {
          flex: 1;
          color: #333;
          text-align: center;
          font-size: 0.24rem;
          img {
            height: .58rem;
            margin-bottom: .2rem;
          }
          i {
            font-size: 0.2rem;
          }
        }
      }
    }
  }
  .promiseBox {
    padding: 0.7rem 0.25rem;
    ul {
      display: flex;
      color: #999;
      font-size: 0.22rem;
      li {
        text-align: center;
        &:nth-child(odd) {
          width: calc((100% - 1rem) / 3);
        }
        &:nth-child(even) {
          color: #e4e4e4;
          margin: 0 0.2rem;
        }
        img {
          width: 0.4rem;
          height: 0.4rem;
          vertical-align: text-top;
          margin-right: 3px;
        }
        p {
          margin-top: 0.2rem;
        }
        i {
          position: relative;
          top: 0.1rem;
        }
      }
    }
  }
  .payWay {
    display: flex;
    justify-content: space-between;
    padding: 0.28rem 0.25rem;
    background-color: #fff;
    .payLeft {
      font-size: 0.32rem;
      font-weight: 500;
    }
    .payRight {
      display: flex;
      align-items: center;
      color: #444;
      font-weight: 400;
      font-size: 0.3rem;
      img {
        width: 0.42rem;
        height: 0.42rem;
      }
      span {
        display: inline-block;
        margin: 0 0.1rem;
      }
      i {
        font-size: 0.35rem;
        color: #333;
        position: relative;
        top: 0.05rem;
      }
    }
    .payBox {
      h2 {
        width: 100%;
        font-size: 0.3rem;
        color: #333;
        background: #f7f9fa;
        font-weight: normal;
        padding: 0.15rem 0;
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
      li {
        background: #fff;
        border-bottom: 1px solid #ccc;
        padding: 0.29rem 0;
        text-align: center;
        img {
          width: 0.54rem;
          height: 0.54rem;
          margin-right: 0.2rem;
          vertical-align: middle;
        }
        span {
          font-size: 0.3rem;
          min-width: 1.2rem;
          white-space: nowrap;
          display: inline-block;
          vertical-align: middle;
        }
        &:last-child {
          border-top: 5px solid rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
  .warmTip {
    padding: 0.4rem 0.35rem 2.4rem 0.35rem;
    line-height: 0.4rem;
    color: #666;
    font-size: 0.24rem;
    overflow: hidden;
    h2 {
      line-height: 0.72rem;
      font-size: 0.28rem;
      text-align: center;
      font-weight: normal;
    }
    i {
      float: left;
      width: 0.2rem;
    }
    p {
      float: left;
      width: calc(100% - 0.2rem);
      span {
        color: #da0428;
      }
      strong {
        font-weight: normal;
      }
    }
  }
  footer {
    width: 100%;
    left: 0;
    position: fixed;
    bottom: 0;
    .VisitingPersonPro {
      padding: 0 0.25rem;
      line-height: 1rem;
      display: flex;
      justify-content: space-between;
      height: 1rem;
      background-color: #fffbf4;
      font-size: 0.28rem;
      color: #8f5f3b;
      .VisitingLeft {
        span {
          margin-right: 0.15rem;
        }
      }
    }
    .footer {
      display: flex;
      height: 1rem;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      div {
        flex: 1;
        color: #666;
        line-height: 1rem;
      }
      .footerLeft {
        font-size: 0.24rem;
        padding-left: 0.25rem;
        img {
          width: 0.31rem;
          height: 0.32rem;
          vertical-align: sub;
        }
      }
      .footerCenter {
        font-size: 0.28rem;
        span {
          color: #da0428;
        }
      }
      .footerRight {
        background-color: #da0428;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.34rem;
      }
    }
  }
  .myslefMessage {
    .tip {
      padding: 20px 0.25rem 24px 0.25rem;
      font-size: 0.28rem;
      color: #666;
    }
    .buttonConfirm {
      display: flex;
      border-top: 1px solid #ebedf0;

      .btn {
        flex: 1;
        line-height: 1rem;
        height: auto;
        font-size: 0.3rem;
        color: #da0428;
        &:nth-child(1) {
          border-right: 1px solid #ebedf0;
          color: #333;
        }
      }
    }
  }
}
</style>