flyLong/pc/src/components/levelIcon.vue

<template>
    <div :class="[{'levelIconTV':true},{'levelIconTest':true},{'levelIcon':true}]">
        <ul>
            <li>
          <span class="cube">
             <div>
                  0%-<br>
            39%
             </div>
          </span>
                <em>激活放松</em>
            </li>
            <li>
          <span class="cube">
             <div>
             40%-<br>54%  </div>
          </span>
                <em>动态热身</em>
            </li>
            <li>
          <span class="cube">
             <div>
             55%-<br>69%  </div>
          </span>
                <em>脂肪燃烧</em>
            </li>
            <li>
          <span class="cube">
             <div>
             70%-<br>79%  </div>
          </span>
                <em>糖分消耗</em>
            </li>
            <li>
          <span class="cube">
             <div>
             80%-<br>89%  </div>
          </span>
                <em>心肺训练</em>
            </li>
            <li>
          <span class="cube">
             <div>
             ≥90%  </div>
          </span>
                <em>峰值锻炼</em>
            </li>
        </ul>
    </div>
</template>

<style scoped>
    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .levelIcon {
        width: 85%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 5rem;
    }

    .levelIconTest {

    }

    .levelIconTV {
    }

    .levelIcon ul {
        width: 90%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0;
        margin-left: 2%;
    }

    .levelIcon li {
        width: 14.666666666667%;
        height: 100%;
        float: left;
        padding-left: 2.4%;
    }

    .levelIcon li:nth-child(1) {
        padding-left: 0;
    }

    .levelIcon li span {
        width: 5rem;
        height: 4rem;
        overflow: hidden;
        float: left;
        background: url("../static/img/t1.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: top center;
        font-family: vista;
        font-weight: normal;
        font-size: 1.2rem;
        letter-spacing: -0.05em;
        text-align: center;
        color: #fff;
        line-height: 0.4rem;
    }

    .levelIcon li span div {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 17%;
    }

    .levelIcon li:nth-child(2) span {
        background: url("../static/img/t2.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(3) span {
        background: url("../static/img/t3.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(4) span {
        background: url("../static/img/t4.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(5) span {
        background: url("../static/img/t5.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(6) span {
        background: url("../static/img/t6.svg");
        background-size: 100% 100%;
        background-position: top center;
    }

    .levelIcon li:nth-child(6) span div {
        margin-top: 13%;
    }

    .levelIcon li em {
        float: right;
        width: 4rem;
        height: 42px;
        border-radius: 21px;
        background: rgba(2, 143, 225, 0.16);
        border: 1px solid #028fe1;
        box-shadow: 0px 0px 5px #028fe1;
        font-family: vista;
        font-weight: normal;
        font-size: 24px;
        text-align: center;
        color: #fff;
        font-style: normal;
        line-height: 42px;
        margin-top: 15%;
        margin-left: 1%;
    }

    .levelIcon li:nth-child(2) em {
        background: rgba(109, 38, 250, 0.16);
        border: 1px solid #6d26fa;
        box-shadow: 0px 0px 5px #6d26fa;
    }

    .levelIcon li:nth-child(3) em {
        background: rgba(10, 177, 5, 0.16);
        border: 1px solid #0ab105;
        box-shadow: 0px 0px 5px #0ab105;

    }

    .levelIcon li:nth-child(4) em {
        background: rgba(186, 204, 1, 0.16);
        border: 1px solid #DFB200;
        box-shadow: 0px 0px 5px #DFB200;
    }

    .levelIcon li:nth-child(5) em {
        background: rgba(234, 136, 19, 0.16);
        border: 1px solid #ea8813;
        box-shadow: 0px 0px 5px #ea8813;
    }

    .levelIcon li:nth-child(6) em {
        background: rgba(209, 17, 34, 0.16);
        border: 1px solid #d11122;
        box-shadow: 0px 0px 5px #d11122;
    }

    .levelIcon {
        height: 70px;
    }

    .levelIcon li span {
        width: 70px;
        height: 70px;
        font-size: 0.2rem;
    }

    .levelIcon li span div {
        font-size: 16px;
        padding-top: 0.19rem;
        line-height: 22px;
    }

    .levelIcon ul {
        width: 98%;
    }

    .levelIcon li em {
        width: 45%;
        height: 30px;
        line-height: 30px;
        font-size: 0.2rem;
        margin-top: 11%;
        margin-left: 3%;
        float: left;
    }

    /*pc part */
    .levelIcon {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .levelIcon li span div {
        padding-top: 15px;
    }

    /*pc part */
</style>