Rorschach
/
reader


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!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: 938px;
      background: url('./img/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }
    .commoditys {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 30px auto;
      width: 9.0133rem;
      height: 3.4667rem;
      padding: 14px 10px;
      box-sizing: border-box;
      background: white;
      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;
    }
  </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>
  </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 app = new Vue({
      el: '#container',
      data: {
        active: 1
      },
      mounted() {
      },
      methods: {
        selected(e) {
          this.active = e
        }
      }
    })
  </script>
</html>