活动专题,各种手机的适配

https://try.fishqc.com/Activity/loveIndex

https://try.fishqc.com/Activity/activityIndex

https://try.fishqc.com/Activity/shopIndex

https://try.fishqc.com/Activity/trialOfficer

虽然简单,但是这样是媒体查询可以兼容大部分(几乎所有的手机哦),机型也记下来了,当然iphone 与iphone plus优先

第一个代码:

 <?php include $viewpath.'/public/header.phtml' ?>  
<div class="fishqc-containter ms-controller" ms-controller="getAward">
   <div ms-visible="hideTheCoverCode" class="hide-the-cover" id="hideTheDialog"></div>
   <div style="width: 100%;height: 50%;position: absolute;top: 0;z-index: 1;">
          <?php include $viewpath.'/public/search.phtml' ?>    
   </div>
   <div style="width: 100%;height: 100%">            
        <img src="/img/beauty/bg.jpg" alt="" class="bgImg">
        <!-- 上面 -->
        <div class="firstBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=LilKKSBrupnTuRabCUF8hg&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty1.png" alt="" class="BeautyImg" >
            </a>
        </div>
        <div class="secondBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=D9Q87UaFG_8ryjUBBOUOuw&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty2.png" alt="" class="BeautyImg">
            </a>
        </div>
        <div class="thirdBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=E7NcfL4gpGba68eSxwnHeQ&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty3.png" alt="" class="BeautyImg">
            </a>
        </div>
        <!-- 中间 -->
        <div class="fourBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=IO5qwiesTXVnL7GYlPYUvA&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty4.png" alt="" class="BeautyImg">
            </a>
        </div>
        <div class="fiveBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=7bWTL40kEyY2vWL8lv1fQQ&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty5.png" alt="" class="BeautyImg">
            </a>
        </div>
        <div class="sixBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=DVlrW0ul6LjWuCjDCUvlbg&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty6.png" alt="" class="BeautyImg">
            </a>    
        </div>
        <!-- 下面 -->
        <div class="sevenBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=-faWuT8h31oXQHWtvSQUsw&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty7.png" alt="" class="BeautyImg">
            </a>
        </div>
        <div class="eightBeauty">
            <a ms-attr="{href:'//try.fishqc.com/activityDetail?reportid=__8YI_GOQNi5GLDYQf99ug&&urlActivity='+ @returnUrl}"  href="javascript:;">
                <img src="/img/beauty/beauty8.png" alt="" class="BeautyImg">
            </a>    
        </div>
        <div class="nightBeauty">
             <img src="/img/beauty/people.png" alt="" class="BeautyImg" ms-click="showDialog()" onClick="javascript:;">         
        </div>
        <div class="tenBeauty" id="bigDialog">
            <img src="/img/beauty/testPeople.png" alt=""  style="width: 80%; position: absolute;left: 10%;top: 3rem;" >
            <span ms-click="closeTheDialog()" onClick="javascript:;">
                <img src="../img/beauty/close.png" alt="" class="tenClose"  >
            </span>
        </div>
        <div class="elevenBeauty">
            <a href="//try.fishqc.com" href="javascript:;">
                <img src="/img/beauty/logo.png" alt="" class="BeautyImg">
            </a>
        </div>    

    </div>    
</div>

</body>

</html>
<script>
var vm = avalon.define({
    $id: "getAward",
    returnUrl:"",
    shareWeixin:function(){
          if(typeof(__wxShareInfoTimeline)!='undefined' && typeof(__wxShareInfo)!='undefined'){
                var ua = window.navigator.userAgent.toLowerCase(); 
                if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
                     __wxShareInfoTimeline.title && ( __wxShareInfoTimeline.title="令猪猪女孩疯狂剁手的美妆好物 安全测评打几分?");     
                    __wxShareInfoTimeline.imgUrl && (__wxShareInfoTimeline.imgUrl= "http://p1.fishqc.net/fish-try-icon.png");
                    if(typeof(WEIXIN_OPENID) != "undefined" && WEIXIN_OPENID != "0"){ 
                      __wxShareInfoTimeline.link && (__wxShareInfoTimeline.link= "https://try.fishqc.com/Activity/activityIndex/?source="+WEIXIN_OPENID);
                    }else{ 
                      __wxShareInfoTimeline.link &&  (__wxShareInfoTimeline.link= "https://try.fishqc.com/Activity/activityIndex/");
                    }  
                  //给好友
                     __wxShareInfo.title && (__wxShareInfo.title= "令猪猪女孩疯狂剁手的美妆好物 安全测评打几分?");
                     __wxShareInfo.desc && (__wxShareInfo.desc= "耶,我写的试用报告上了小鱼放心试的明星专题.为小鱼放心试打CALL!!");      
                     __wxShareInfo.imgUrl && (__wxShareInfo.imgUrl= "http://p1.fishqc.net/fish-try-icon.png"); 
                     if(typeof(WEIXIN_OPENID) != "undefined" && WEIXIN_OPENID != "0"){ 
                        __wxShareInfo.link && (__wxShareInfo.link= "https://try.fishqc.com/Activity/activityIndex/"+WEIXIN_OPENID);
                      }else{ 
                        __wxShareInfo.link &&  (__wxShareInfo.link= "https://try.fishqc.com/Activity/activityIndex/");
                      }      
                } 
             }
    },
    closeTheDialog:function() {
        document.getElementById('hideTheDialog').style.display="none"
        document.getElementById('bigDialog').style.display="none"    
        $("body").unbind("touchmove");
        $("#bigDialog").unbind("touchmove");
        $("#hideTheDialog").unbind("touchmove");
    },
    showDialog :function(){
        document.getElementById('hideTheDialog').style.display="inline"
        document.getElementById('bigDialog').style.display="inline"
        // $("body,html").addClass('setClass')
         $("body").on('touchmove',function(e){
            e.preventDefault();  //阻止默认行为
         })  
         $("#bigDialog").on('touchmove',function(e){
            e.preventDefault();  //阻止默认行为
         })  
         $('#hideTheDialog').on('touchmove',function(e){
            e.preventDefault();  //阻止默认行为
         })          
    },
    getUrl:function(){
        vm.returnUrl=window.location.href;

    }
   
})

vm.$watch('onReady', function() {    
     vm.shareWeixin()
    vm.getUrl()
})
</script>
<style type="text/css">
.ms-controller {
    visibility: hidden;
}
</style>
<script type="text/javascript">

</script>
<style type="text/css">
#top{
    background: #FFFFFF;
    width: 100%;
    padding: 0 2%;
    position: fixed;
    top: 0;
    z-index: 2000;
}
.beautyBg{
    height:600px;
    width:500px;
    background-image:url('../img/beauty/bg.jpg') 
}
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.bgImg{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.hide-the-cover {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #c6cacd;
    opacity: 0.8;
    z-index: 800;
    display: block;
}
*{
    padding:0;
    margin:0;
}
.tenBeauty{
    position: fixed;
    width: 100%;
    z-index: 10000;

}
.tenClose{
    position: absolute;
    top: 3.6rem;
    right: 12%;
    width: 5%;
}
#bigDialog,#hideTheDialog{
    display:none;
}
.setClass:{
      height:100%;
      overflow:hidden;
 }
 #top{
     background: #FFFFFF;
    width: 100%;
    padding: 0 2%;
    position: fixed;
    top: 0;
    z-index: ;
 }
.img-responsive{
    display: block;
        max-width: 100%;
}       
.new-search-box {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0rem 0 .5rem;
    background-color: #fff;
    width: 100%;
    padding: 0 4% 2%;
    padding-top: 3rem;
}
.M-search-box-input {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: none;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: .5rem center;
    background-size: 5%;
    line-height: 2rem;
    position: relative;
    padding-left: .8rem;
    background: #f6f6f6;
    height: 2rem;
}    
@media only screen and (max-width:320px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 492px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 630px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 768px;
        padding: 0 3%;
    }    
    .fourBeauty{
       position: absolute; 
       width: 100%; 
       top: 1030px;
       padding: 0 3%;
    }
    .fiveBeauty{
       position: absolute; 
       width: 100%; 
       top: 1151px;
       padding: 0 3%;
    }
    .sixBeauty{
       position: absolute; 
       width: 100%; 
       top: 1272px;
       padding: 0 3%;
    }
    .sevenBeauty{
       position: absolute; 
       width: 100%; 
       top: 1525px;
       padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
        width: 100%;
        top: 1648px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 1945px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 2200px;
        padding: 0 30%;
    }

    
}
@media only screen and (max-width:365px) and (min-width:321px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 556px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 712px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 869px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1160px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1296px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1431px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 1715px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 1850px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2190px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 2470px;
        padding: 0 30%;
    }

}
@media only screen and (max-width:380px) and (min-width:366px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 580px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 742px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 905px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1210px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1352px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1495px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 1790px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 1932px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2282px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 2570px;
        padding: 0 30%;
    }

}
@media only screen and (max-width:400px) and (min-width:381px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 594px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 762px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 930px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1240px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1386px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1532px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 1830px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 1976px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2338px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 2632px;
        padding: 0 30%;
    }


}
@media only screen and (max-width:430px) and (min-width:400px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 640px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 818px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 996px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1335px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1490px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1646px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 1972px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 2128px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2518px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 2830px;
        padding: 0 30%;
    }


}

@media only screen and (max-width:480px) and (min-width:430px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 742px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 950px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 1158px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1545px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1725px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1905px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 2290px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 2470px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2920px;
        padding: 0 35%;
    }
    .elevenBeauty{
        position: absolute;
        width: 100%;
        top: 3290px;
        padding: 0 30%;
    }

}
@media only screen and (max-width:599px) and (min-width:481px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 928px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 1185px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 1444px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1930px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 2155px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 2380px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 2850px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 3078px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 3645px;
        padding: 0 35%;
    }
    .elevenBeauty{
       position: absolute;
        width: 100%;
        top: 4120px;
        padding: 0 30%;
    }

}
@media only screen and (max-width:700px) and (min-width:599px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 928px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 1185px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 1444px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 1930px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 2155px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 2380px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 2850px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 3078px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 3645px;
        padding: 0 35%;
    }
    .elevenBeauty{
       position: absolute;
        width: 100%;
        top: 4120px;
        padding: 0 30%;
    }


}
@media only screen and (max-width:850px) and (min-width:701px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 1190px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 1520px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top: 1852px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top: 2480px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 2770px;
        padding: 0 3%;
    }
    .sixBeauty{
         position: absolute; 
         width: 100%; 
         top: 3060px; 
         padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 3660px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
        width: 100%;
        top: 3950px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 4670px;
        padding: 0 35%;
    }
    .elevenBeauty{
       position: absolute;
        width: 100%;
        top: 5260px;
        padding: 0 30%;
    }

}
@media only screen and (max-width:1200px) and (min-width:851px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 1585px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 2030px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top:  2475px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top:  3298px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 3688px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 4075px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 4880px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 5270px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 6230px;
        padding: 0 35%;
    }
    .elevenBeauty{
       position: absolute;
        width: 100%;
        top: 7010px;
        padding: 0 30%;
    }


}
@media only screen and (max-width:1439px) and (min-width:1201px) {
    .firstBeauty{
        position: absolute;
        width: 100%;
        top: 650px;
        padding: 0 3%;
    }
    .BeautyImg{
        width: 100%;
    }
    .secondBeauty{
        position: absolute;
        width: 100%;
        top: 831px;
        padding: 0 3%;
    }
    .thirdBeauty{
        position: absolute;
        width: 100%;
        top:  1012px;
        padding: 0 3%;
    }    
    .fourBeauty{
        position: absolute;
        width: 100%;
        top:  1355px;
        padding: 0 3%;
    }
    .fiveBeauty{
        position: absolute;
        width: 100%;
        top: 1512px;
        padding: 0 3%;
    }
    .sixBeauty{
        position: absolute;
        width: 100%;
        top: 1670px;
        padding: 0 3%;
    }
    .sevenBeauty{
        position: absolute;
        width: 100%;
        top: 2002px;
        padding: 0 3%;
    }
    .eightBeauty{
        position: absolute;
           width: 100%;
           top: 2160px;
        padding: 0 3%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 2560px;
        padding: 0 35%;
    }
    .nightBeauty{
        position: absolute;
        width: 100%;
        top: 6230px;
        padding: 0 35%;
    }


}



</style>

第二个代码

<?php include $viewpath.'/public/header.phtml' ?>
<?php include $viewpath.'/public/search.phtml' ?>
<div class="fishqc-containter ms-controller" ms-controller="getAward">
   <div  class="backgroundbg">
           <img src="/img/love/bg.jpg" alt="" class="img">
        <div class="button1">
            <a href="https://try.fishqc.com/detail/419?id=419&&love=1" href="javascript:;">
                <img src="/img/love/button.png" alt="" class="buttonImg">
            </a>
        </div>
         <div class="button2">
             <a href="https://try.fishqc.com/detail/420?id=420&&love=1" href="javascript:;">
                 <img src="/img/love/button.png" alt="" class="buttonImg2">    
             </a>     
        </div>
         <div class="button3">
             <a href="https://try.fishqc.com/detail/416?id=416&&love=1" href="javascript:;">
                <img src="/img/love/button.png" alt="" class="buttonImg">
            </a> 
        </div>
         <div class="button4">
            <a href="https://try.fishqc.com/detail/421?id=421&&love=1" href="javascript:;">
                 <img src="/img/love/button.png" alt="" class="buttonImg2">
            </a> 
        </div>
         <div class="button5">
             <a href="https://try.fishqc.com" href="javascript:;">
                <img src="/img/love/fishqc.png" alt="" class="buttonImg3">
            </a> 
        </div>
       
   </div>
</div>

</body>

</html>
<script>
var vm = avalon.define({
    $id: "getAward",
    shareWeixin:function(){
          if(typeof(__wxShareInfoTimeline)!='undefined' && typeof(__wxShareInfo)!='undefined'){
                var ua = window.navigator.userAgent.toLowerCase(); 
                if (ua.match(/MicroMessenger/i) == 'micromessenger') { 
                     __wxShareInfoTimeline.title && ( __wxShareInfoTimeline.title="520爱自己免费领取大牌好礼对自己Say love");     
                    __wxShareInfoTimeline.imgUrl && (__wxShareInfoTimeline.imgUrl= "http://p1.fishqc.net/fish-try-icon.png");
                    if(typeof(WEIXIN_OPENID) != "undefined" && WEIXIN_OPENID != "0"){ 
                      __wxShareInfoTimeline.link && (__wxShareInfoTimeline.link= "https://try.fishqc.com/Activity/loveIndex/?source="+WEIXIN_OPENID);
                    }else{ 
                      __wxShareInfoTimeline.link &&  (__wxShareInfoTimeline.link= "https://try.fishqc.com/Activity/loveIndex/");
                    }  
                  //给好友
                     __wxShareInfo.title && (__wxShareInfo.title= "520爱自己免费领取大牌好礼对自己Say love");
                     __wxShareInfo.desc && (__wxShareInfo.desc= "520给自己来份大牌优品。安心优品，试的放心。小鱼优品 让你邂逅更美的自己。");      
                     __wxShareInfo.imgUrl && (__wxShareInfo.imgUrl= "http://p1.fishqc.net/fish-try-icon.png"); 
                     if(typeof(WEIXIN_OPENID) != "undefined" && WEIXIN_OPENID != "0"){ 
                        __wxShareInfo.link && (__wxShareInfo.link= "https://try.fishqc.com/Activity/loveIndex/?source="+WEIXIN_OPENID);
                      }else{ 
                        __wxShareInfo.link &&  (__wxShareInfo.link= "https://try.fishqc.com/Activity/loveIndex/");
                      }      
                } 
             }
    }   
})

vm.$watch('onReady', function() { 
     vm.shareWeixin()
})
</script>
<style type="text/css">
.ms-controller {
    visibility: hidden;
}
</style>
<script type="text/javascript">

</script>
<style type="text/css">
.backgroundbg{
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
}
.img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.hide-the-cover{
    width:100%;
    height:800px;
    position:fixed;
    top:0;
    left:0;
    background-color:rgba(81,81,93,0.8);
    display:block;
}
.buttonImg{
    width: 42%;
    position: absolute;
    left: 2%;
    top: 0;
}
.buttonImg2{
    width: 42%;
    position: absolute;
    left: 56%;
    top: 0;
}
.buttonImg3{
    width: 64%;
    position: absolute;
    left: 18%;
    top: 0;
}

@media only screen and (max-width:320px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 410px;
        padding: 0 3%;
        height: 100%;
    }    
    .button2{
        position: absolute;
        width: 100%;
        top: 640px;
        padding: 0 3%;
        height: 100%;
    }    
    .button3{
        position: absolute;
        width: 100%;
        top: 900px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1168px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 1430px;
        padding: 0 3%;
        height: 100%;
    }    
}
@media only screen and (max-width:365px) and (min-width:321px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 462px;
        padding: 0 3%;
        height: 100%;
    }    
    .button2{
        position: absolute;
        width: 100%;
        top: 720px;
        padding: 0 3%;
        height: 100%;
    }    
    .button3{
         position: absolute;
        width: 100%;
        top: 1010px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1312px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 1610px;
        padding: 0 3%;
        height: 100%;
    }    
    

}
@media only screen and (max-width:380px) and (min-width:366px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 479px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 748px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1053px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1368px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 1672px;
        padding: 0 3%;
        height: 100%;
    }
}
@media only screen and (max-width:400px) and (min-width:381px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 490px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 766px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1078px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1398px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 1710px;
        padding: 0 3%;
        height: 100%;
    }
}
@media only screen and (max-width:430px) and (min-width:400px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 530px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 825px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1162px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1510px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 1845px;
        padding: 0 3%;
        height: 100%;
    }
    

}

@media only screen and (max-width:480px) and (min-width:430px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 610px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 956px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1346px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1750px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 2140px;
        padding: 0 3%;
        height: 100%;
    }
    
    
}
@media only screen and (max-width:599px) and (min-width:481px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 610px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 956px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1346px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 1750px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 2140px;
        padding: 0 3%;
        height: 100%;
    }
}
@media only screen and (max-width:700px) and (min-width:599px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 770px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 1200px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1685px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 2190px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 2666px;
        padding: 0 3%;
        height: 100%;
    }
    
}
@media only screen and (max-width:850px) and (min-width:701px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 820px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 1276px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1794px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 2336px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 2850px;
        padding: 0 3%;
        height: 100%;
    }
    
}
@media only screen and (max-width:1200px) and (min-width:851px) {
    .button1{
        position: absolute;
        width: 100%;
        top: 820px;
        padding: 0 3%;
        height: 100%;
    }
    .button2{
        position: absolute;
        width: 100%;
        top: 1276px;
        padding: 0 3%;
        height: 100%;
    }
    .button3{
        position: absolute;
        width: 100%;
        top: 1794px;
        padding: 0 3%;
        height: 100%;
    }
    .button4{
        position: absolute;
        width: 100%;
        top: 2336px;
        padding: 0 3%;
        height: 100%;
    }
    .button5{
        position: absolute;
        width: 100%;
        top: 2850px;
        padding: 0 3%;
        height: 100%;
    }
    
}



</style>