<template>
  <div class="orderSample">
    <div class="sample-title">
      <div class="sample-circle">微信支付</div>
    </div>
    <div class="sample-content">
      <div class="sample-step step1">微信列表找到微信支付</div>
      <img class="step-icon" src="../assets/images/order_sample/order_sample_one.png" alt="" srcset="">
      <div class="sample-step step2">微信列表找到微信支付</div>
      <img class="step-icon" src="../assets/images/order_sample/order_sample_two.png" alt="" srcset="">
      <div class="sample-step step3">微信列表找到微信支付</div>
      <img class="step-icon" src="../assets/images/order_sample/order_sample_three.png" alt="" srcset="">
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.orderSample {
  background: #F8F8F8;
  font-size: 17px;
}

.sample-title {
  line-height: 20px;
  display: flex;
  padding: 20px;
}

.sample-circle {
  width: 50%;
  padding-left: 30px;
  background-image: url(../assets/images/title_pic.png);
  background-repeat: no-repeat;
  background-position: 0 70%;
}

.sample-content {
  background: #fff;
  padding:0 20px 20px;
  margin:0 20px 20px;
  border: 1px solid #F8F8F8;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
}

.sample-step {
  background-repeat: no-repeat;
  background-position: 0 50%;
  line-height: 60px;
  padding-left: 30px;
}

.step1 {
  background-image: url("../assets/images/order_sample/order_sample_1.png");
}

.step2 {
  background-image: url("../assets/images/order_sample/order_sample_2.png");
}

.step3 {
  background-image: url("../assets/images/order_sample/order_sample_3.png");
}

.step-icon {
  width: 100%;
}
</style>
