Rorschach
/
reader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>朗读小咖秀</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      overflow: hidden;
      width: 100%;
      height: 51.1733rem;
      margin-bottom: 1.8667rem;
      background: url('./img/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }
    .commoditys {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5.2267rem auto;
      width: 9.0133rem;
      height: 3.4667rem;
      padding: 14px 10px;
      box-sizing: border-box;
      border-radius: 20px;
    }
    .commodity {
      position: relative;
      width: 97px;
      height: 97px;
      border-radius: 6px;
      border: 2px solid white;
    }
    .active {
      position: absolute;
      width: 27px;
      height: 18px;
      right: 0;
      bottom: 0;
    }
    .aborder {
      border-color: #ff935e;
    }
    .c-1 {
      background: url('./img/299.png');
      background-size: contain;
    }
    .c-2 {
      background: url('./img/99.png');
      background-size: contain;
    }
    .c-3 {
      background: url('./img/15.png');
      background-size: contain;
    }
    .payBox {
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 15px 18px;
      background: white;
    }
    .payBox .left {
      font-size: 0.48rem;
    }
    .price {
      color: #ff9108;
      font-size: 0.64rem;
      font-weight: bold;
    }
    .pay {
      padding: 0.1867rem 0.6933rem;
      background: #ff9108;
      color: white;
      font-weight: 500;
      border-radius: 0.6133rem;
      font-size: 0.48rem;
    }
  </style>
  <body>
    <div id="container">
      <div class="commoditys">
        <div :class="['commodity c-1', active==1?'aborder':'']" @click="selected(1)">
          <img src="./img/active.png" class="active" v-show="active==1" />
        </div>
        <div :class="['commodity c-2', active==2?'aborder':'']" @click="selected(2)">
          <img src="./img/active.png" class="active" v-show="active==2" />
        </div>
        <div :class="['commodity c-3', active==3?'aborder':'']" @click="selected(3)">
          <img src="./img/active.png" class="active" v-show="active==3" />
        </div>
      </div>
      <div class="payBox">
        <div class="left">
          终身会员
          <span class="price">299</span>
          元
        </div>
        <div class="pay">立即支付</div>
      </div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
  <script>
    let xhr = new XMLHttpRequest()
    let app = new Vue({
      el: '#container',
      data: {
        active: 1
      },
      mounted() {
        this.request('https://reader-api.efunbox.cn/wx/v3/product/learn')
      },
      methods: {
        selected(e) {
          this.active = e
        },
        request(url) {
          xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
              console.log(xhr.responseText)
            }
          }
          xhr.open('get', url, true)
          xhr.send()
        }
      }
    })
  </script>
</html>