<div   class="yn-sd-home-nine">

            <div class="yn-sd-home-nine-main" ng-click="gridClick('2')" >
                <div class="yn-logo-xqsb xzq-bg" ></div>
                <div class="yn-name-mz">需求申報</div>
            </div>

            <div class="yn-sd-home-nine-main" ng-click="gridClick('3')" >
                <div class="yn-logo-dldj xzq-bg" ></div>
                <div class="yn-name-mz">電量電價</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('4')" >
                <div class="yn-logo-fyxx xzq-bg" ></div>
                <div class="yn-name-mz">服務費</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('9')">
                <div class="yn-logo-dl xzq-bg"></div>
                <div class="yn-name-mz">電量</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('5')">
                <div class="yn-logo-dydlr xzq-bg"></div>
                <div class="yn-name-mz">電壓電流</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('6')">
                <div class="yn-logo-ydfh xzq-bg"></div>
                <div class="yn-name-mz">用電負荷</div>
            </div>
            <div class="yn-sd-home-nine-main" ng-click="gridClick('7')">
                <div class="yn-logo-glys xzq-bg"></div>
                <div class="yn-name-mz">功率因數</div>
            </div>

            <div class="yn-sd-home-nine-main" ng-click="gridClick('8')" >
                <div class="yn-logo-more" ></div>
                <div class="yn-name-mz">更多</div>
            </div>

        </div>
 

.yn-sd-home-nine {
    position: relative;
    width: 100vw;
    height: auto;
    padding: calc(40 / 750 * 100vw) 6vw 0 6vw;
    background-color: #FFFFFF;
    font-size: 0;
}

.yn-sd-home-nine-main {
    width: 22vw;
    height: calc(180 / 750 * 100vw);
    padding: 0 0 calc(40 / 750 * 100vw) 0;
    display: inline-block;
    position: relative;
}

.yn-name-mz {
    width: 100%;
    height: calc(40 / 750 * 100vw);
    line-height: calc(40 / 750 * 100vw);
    text-align: center;
    font-size: calc(20 / 750 * 100vw);
    color: #52526d;
    overflow: hidden; /*超出部分隱藏*/
    white-space: nowrap; /*不換行*/
    text-overflow: ellipsis; /*超出部分文字以...顯示*/
}

.yn-logo-xqsb {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-dldj {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dldj.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-pcdj {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-pcdj.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-dlgz {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dlgz.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-fyxx {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-fyxx.png');
    mask-image: url('../../img/ynhome/apps-icon-fyxx.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-dydl {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-dydljc.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-logo-more {
    background: url('../../img/home/apps-icon.png') no-repeat center;
    background-size: calc(73 / 750 * 100vw) calc(73 / 750 * 100vw);
    width: 100%;
    height: calc(100 / 750 * 100vw);
}

.yn-logo-ynzb {
    width: 100%;
    height: calc(100 / 750 * 100vw);
    -webkit-mask-image: url('../../img/ynhome/apps-icon-ynzbfx.png');
    mask-image: url('../../img/ynhome/apps-icon-xqsb.png');
    -webkit-mask-position: center;
    -webkit-mask-size: calc(90 / 750 * 100vw) calc(90 / 750 * 100vw);
    -webkit-mask-repeat: no-repeat;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+1) .xzq-bg {
    background-color: #6594ed;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+2) .xzq-bg {
    background-color: #f48374;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+3) .xzq-bg {
    background-color: #65cc9a;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+4) .xzq-bg {
    background-color: #F8C558;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+5) .xzq-bg {
    background-color: #90D789;
}

.yn-sd-home-nine .yn-sd-home-nine-main:nth-child(6n+6) .xzq-bg {
    background-color: #DB94E0;
}
 

.fa-icon-home {
    background: url("../img/tabbar/HOME-NORMAL.png");
    width: 36px;!important;
    height: 36px;!important;
    margin-top: -6px;
    -webkit-background-size: cover;
    background-size: cover;
}
.active .fa-icon-home {
    background: #329af0;
    -webkit-mask-image: url("../img/tabbar/HOME-ACTIVE.png");
    mask-image: url("../img/tabbar/HOME-ACTIVE.png");
    -webkit-mask-size:36px;!important,36px;!important;
    -webkit-mask-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
}