域名空间 旧版主页 免费下载 教程中心
在线教育方案
官方动态 功能建议 插件模块 风格模板 问题反馈 技术交流 站长杂谈 代码共享 V系列产品 运营交流
社区主页　 在线教育方案　 技术交流
分享
  • 收藏
  • 举报
    X
    @admin请教CMS音频播放页缩略图大小怎么改？
    1438
    16

    X1默认的播放界面主图太小，如图





    我们可参考喜马拉雅，修改主图大小如图





    请问改什么地方？请指教，谢谢


    13
    赏礼
    赏钱
    收藏
    点击回复
        全部留言
    • 共 16 条
    • 中国羊病网 普通粉丝 消费:98.9元 2020-01-10 21:57 21:576楼
      发网址一下，我看下。
      韦成继 消费:4532.1元 华为 2020-01-10 22:00
      https://www.gzxcms.com/cms/show-368.html麻烦帮看，谢谢！
      中国羊病网 消费:98.9元 2020-01-10 22:24

      <div class="player-layout-outer" data-layout="single-album-cover" data-style-type="blur" style="opacity: 1;" data-secondary-color="light-bg">

          <div class="player-layout"><div class="player-layout-inner">

            <div class="album-covers-wrapper " style="margin-top: 0px;"> <div class="album-cover-wrapper" data-position="2" style="width: 80px;">

          <div class="album-cover" style="height: 80x;width: 80px;">

            <div class="image" style="opacity: 1;"><img alt="album cover" src="https://www.gzxcms.com/public/uploads/images/20200110/293_20200110001332416ad.jpeg"; style="opacity: 1;"> <span class="album-cover-highlight"></span> </div>

          </div>

          <div class="track-info">

            <div class="track-title">《期待着花开的声音》李淑民.mp3</div>

            <div class="track-artist">韦成继</div>

          </div>

        </div></div>

          </div></div>

          <div class="player-controls-outer"><div class="player-controls">

          <div class="jPlayer-container" id="jp_jplayer_0" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src="


      红色的 80 改成160或者更大，就能大，他这个不在css里修改，是在模板文件里，播放器的模板文件。因为我还的cms不是增强版本，所以没有这个模板文件，不知道文件名是什么.


      韦成继 消费:4532.1元 2020-01-10 23:11
      模板为/template/index_style/default/cms/content/show4.htm
      {extend name="$index_style_layout" /}

      <!--SEO相关-->
      {block name="head_title"}{$info.title}{/block}
      {block name="head_keword"}{$info.keywords?:$info.title}  {$s_info.name} {/block}
      {block name="head_description"}{:get_word(del_html($info['content']),300)}{/block}
      {block name="head_base_css"}<link rel="stylesheet" href="__STATIC__/css/base.css">{/block}
      {block name="head_qb_ui"}<link rel="stylesheet" href="__STATIC__/css/qb_ui.css">{/block}
      {block name="head_font_icon"}<link rel="stylesheet" href="__STATIC__/icon/icon.css">{/block}
      {block name="head_jquery_js"}<script type="text/javascript" src="__STATIC__/js/core/jquery.min.js"></script>{/block}
      {block name="head_layer_js"}<script type="text/javascript" src="__STATIC__/layer/layer.js"></script>{/block}
      <link rel="stylesheet" href="__STATIC__/pt/cms_show.css">
      {block name="body_content"}
      <link rel="stylesheet" href="__STATIC__/index/default/article.css">
      <div class="ArticleContBox">
      <div class="MainInfos">
      <div class="title">{$info.title}</div>
      <div class="infos">
      <span><i class="glyphicon glyphicon-time"></i> {:date("Y-m-d H:i:s",$info.create_time)}</span>
      <span><i class="si si-earphones-alt"></i> {$info.view}</span>
      <span onclick="add_fav({$id},0)"> <li class="fav fa fa-star-o"></li>收藏</span>
      </div>
      <div class="ShowContent">
      <!----------音乐播放器开始-------->
      <link rel="stylesheet" href="__STATIC__/libs/jplayer/css/style.css"/>
      <style type="text/css">
      #voice{
          height:300px;
          width:100%;
          margin:0 auto;
      }
      </style>
      <div id="voice"></div>
      <script src="__STATIC__/libs/jplayer/ttw-clarity-player.js?3"></script>
      <script src="__STATIC__/libs/jplayer/yepnope.js"></script>
      <script type="text/javascript">
      var is_in_weixin = false;
      var clarity;
      $(function () {
              var myPlaylist = [
      /*
                  {
                      mp3:'{$info['voice_url'][0]['url']}',
                      duration:'2:21',
                      cover:'{$info.picurl|default="/public/static/libs/jplayer/css/images/bg.jpg"}',
                      title:'{$info.title}',
                      artist:'{$info.uid|get_user_name}',
                      background:'',
                  },
      */
      {volist name="$info['voice_url']" id="rs"}
      {php}$rs['title']||$rs['title']=$info['title'].'(第'.$i.'段)';{/php}
      {
                      mp3:"{$rs['url']}",
                      duration:'2:21',
                      cover:'{$info.picurl|default="/public/static/libs/jplayer/css/images/bg.jpg"}',
                      title:'{$rs.title}',
                      artist:'{$info.uid|get_user_name}',
                      background:'',
      next_topic:false,
                  },
      {/volist}

      {volist name=":fun('content@next_more',$info,3)" id="rs"}
      {php}$array=json_decode($rs['voice_url'],true);$voice_url=tempdir($array[0]['url']);{/php}
      {
                      mp3:'{$voice_url}',
                      duration:'3:55',
                      cover:"{:tempdir($rs.picurl?:'/public/static/libs/jplayer/css/images/bg.jpg')}",
                      title:'{$rs.title}',
                      artist:'{$rs.uid|get_user_name}',
                      background:'',
      next_topic:true,
                  },
      {/volist}

              ];

              clarity = $('#voice').ttwClarityPlayer(myPlaylist,{
      jPlayer:{
      supplied:'mp3',
      errorAlerts:true,
      autoPlay:true,
      warningAlerts:true,
      consoleAlerts:true,
      smoothPlayBar:true,
      timeupdate:function (e) {
      var time = parseInt(e.jPlayer.status.currentTime);
      console.log(time);
      if(typeof(api_player_time)=='function'){
      api_player_time(time);
      }
      },
      play:function(){
      if(typeof(api_player_play)=='function'){
      api_player_play();
      }
      },
      pause:function(){
      if(typeof(api_player_pause)=='function'){
      api_player_pause();
      }
      },
      ended:function() {
      if(typeof(api_player_ended)=='function'){
      api_player_ended();
      }
      },
      ready: function (e) {
      if(typeof(api_player_ready)=='function'){
      api_player_ready();
      }
      //$(this).jPlayer("pause",5);
      },
      error:function(event){
      if(typeof(api_player_error)=='function'){
      api_player_error();
      }
      //$(".jp-next").trigger("click");
      },
      }
      });


      document.addEventListener("WeixinJSBridgeReady",function(){
      clarity.play();
      play_url();
      is_in_weixin=true;
      });
      setTimeout(function(){
      if(is_in_weixin==false){
      clarity.play();
      play_url();
      }
      }, 2000 );
              
      //$('#voice-size-picker').on('click', 'li', function(){
              //    $('#voice').attr('data-size', $(this).data('size'));
              //    clarity.manageLayout();
              //});
      });
      </script>
      <!------------音乐播放器结束---------->
      </div>

      <link rel="stylesheet" href="__STATIC__/index/default/show.css">
      <section class="goodsinfo-xinxi">
        <link rel="stylesheet" href="__STATIC__/pt/show_tap.css">
        <div class="tab-wrapper">  
        <ul class="tab-menu">
          <li class="active">播放列表</li>
          <li>课程简介</li>
          <li>评价</li>
        </ul>  
        <div class="tab-content">
          
          <div>
      <!----音频列表开始---->
      <style type="text/css">
      .more_list{
      margin:10px 0 10px 0;
      }
      .more_list .list{
      line-height:34px;
      color:#fff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
      }
      .more_list .list em{
      color:#333;
      }
      .more_list .list a{
      background:orange;
      color:#fff;
      padding:4px 9px 4px 10px;
      font-size:14px;
      }
      .more_list .list .choose{
      font-weight:bold;
      color:yellow;
      }
      .more_list .list .fav_ck{
      color:blue;
      font-size:13px;
      }

      .total_price{
      margin:10px 0 10px 0;
      background:#62B3E7;
      text-align:center;
      color:#fff;
      font-weight:bold;
      font-size:15px;
      line-height:20px;
      padding:10px 0 10px 0;
      border-radius:5px;
      display:none;
      }
      .total_price a{
      color:yellow;
      }
      .total_price a:hover{
      color:red;
      }
      </style>


      {if $info.price>0&&count($info.voice_url)>1}
      <div class="total_price">本内容全包价只需 {$info.price} 元，比单节购买更划算<br><a href="javascript:" data-money="{$info.price}" class="buy">点击购买</a></div>
      {elseif $info.price>0 /}
      <div class="total_price">本内容收费 {$info.price} 元<br><a href="javascript:" data-money="{$info.price}" class="buy">点击购买</a></div>
      {/if}

      <div class="more_list" style="{:count($info.voice_url)<2?'display:none;':''}">
      {volist name="$info.voice_url" id="rs"}
      {php}$rs['title']||$rs['title']=$info['title'].'(第'.$i.'节)';{/php}
      <div class="list"><em>第{$i}节</em><a {if $i==1}class="choose"{/if} href="javascript:;" onclick="change_play({$key},$(this))"><i class="si si-earphones-alt"></i> {$rs.title}</a>
      <em class="fav fa fa-star-o" onclick="add_fav({$id},{$key})"></em>
      <em class="money fa fa-lock"> 免费</em>
      </div>
      {/volist}
      </div>

      <!----音频列表结束---->
      <a href="{:urls('fav/index')}"><div style="margin:auto;margin-top:10px;background:#62B3E7;color:#fff;font-size:15px;text-align:center;width:100px;line-height:30px;border-radius:5px;">
      我的收听记录
      </div></a>
           </div>
              <div>{$info.content}</div>
      <fieldset class="135editor" style="font-family:sans-serif;border:0px none;">
          <fieldset style="margin:0px;padding:5px;border:1px solid #cccccc;max-width:100%;color:#3e3e3e;line-height:24px;text-align:justify;box-shadow:#a5a5a5 5px 5px 2px;background-color:#fafafa;">
              <legend style="margin:0px 0px 0px 20px;padding:0px;text-align:left;width:auto;">
                  <strong><strong style="color:#666666;line-height:20px;background-color:#fffff5;"><span class="135brush" data-brushtype="text" style="border-radius:0.5em 4em 3em 1em 0.5em 2em;box-shadow:#a5a5a5 4px 4px 2px;color:white;max-width:100%;padding:4px 10px;text-align:justify;background-color:red;">版权申明</span></strong></strong>
              </legend>
              <section class="135brush" data-style="margin-top:2px; margin-bottom:0px; padding:0px; max-width:100%; min-height:1.5em; line-height:2em;font-weight:bold;">
                  <p style="padding: 0px; max-width: 100%; min-height: 1.5em; margin-top: 0px; margin-bottom: 0px; text-indent: 2em; line-height: normal;">
                      <span style="font-size: 14px;">本课程版权归原发布者所有，转载仅用于学习交流，如涉及版权问题，请联系木子老师，电话/QQ/微信同号：18985999088</br> 黔乡名师不只是知识的传播者，更是知识的创造者!</span>
                  </p>
              </section>
          </fieldset>
      </fieldset>
      <p>
          <br/>
      </p>
      <!--评论-->
          <div>{qb:comment name="commentwap01" rows='5'}
      {include file="content/comment" /}
      {/qb:comment}</div>
        </div><!-- //tab-content -->
        
      </div>
      <!--用到的相关JS-->
      {include file="content/voice_inc"}
      {include file="content/common_inc"}
      </div>
      <!--显示自定义字段内容 field="picurl,title,content,keywords" 就是过滤掉不在里边重复显示的字段-->
      <style type="text/css">.OtherInfos .SideBox{clear:both;}.OtherInfos img{height:100px;float:left;margin:3px;}</style>
         <div class="OtherInfos">
      {qb:showpage field="picurl,title,content,keywords,mv_url,myfid"}
      <div class="SideBox">
      {if in_array($rs['type'],['images','images2','image','file','files','files2'])}
      <!-- 组图及多文件的显示方法\template\index_style\default\index\common\field.htm,其实不建议放在这里,影响布局,更多请查阅 http://help.php168.com/665693/ ; -->
      <div class="tag"><span>{$rs.title}</span></div>
      {include file="index@common/field" /}
      {else /}
      <div class="tag"><span>{$rs.title}</span></div>
      <div class="cont">{$rs.value}</div>
      {/if}
      </div>
      {/qb:showpage}



      </div>


      <!---主办方工作室-->
      <link rel="stylesheet" href="/public/static/2019/wap_nr.css">
      {if (modules_config('qun')&&$qun=fun('qun@getByid',$info.ext_id))}
      {if $qun.status==2}
      <div class="activity_attent">
      <div class="detail_attent">
          <div class="detail_attent_content detail_attent_content_vip">

              <div class="detail_attent_content_vip">
                  <div class="detail_attent_icon"></div>
                  <div class="detail_attent_pic">
                          <a  href="{:urls('qun/content/show',['id'=>$qun.id])}" ontouchstart="">
                         <img ms-src="{{detail_info_base_model.shopLogo}}" onerror="this.src='__STATIC__/images/nopic.png'"  src="{$qun.picurl|tempdir}">
                          </a>
                  </div>
                  <div class="detail_attent_con_c">
                      <div class="detail_attent_Name">
                          <p>
                              <a class="subinfo_name"  href="{:urls('qun/content/show',['id'=>$qun.id])}">{$qun.title}</a>
                              <a href="/vip?sales=pc_detail_right" class="detailPlusIcon"><img src="__STATIC__/2019//newWapDetailVipSmallIcon.png" style="margin-top: 5px; width: 14px;"></a>
                          </p>
                      </div>
                      <div class="SignedHostIcon">
                      </div>
                      <div class="partyFansNum">
                          <span class="partyNum">{$qun.view} 影响力</span>
                          <span class="fansNum">{$qun.usernum} 成员</span>
                      </div>
                  </div>
                   <div class="detail_attent_con">
      <p>电话:{$qun.telphone}地址：{$qun.address}</p>
      <p>{:get_word(del_html($qun.content),86)}</p>
      </div>
              
                  <div class="focus_Cz notel" notel="">
                      <a id="attent_Btn" href="{:urls('qun/content/show',['id'=>$qun.id])}"rel="nofollow" class="wgz" ontouchstart=""><i class="fa fa-fw fa-plus-circle"></i>加入工作室</a>
                              <a href="{:urls('qun/content/show',['id'=>$qun.id])}" class="lxt" id="attent_Btn" ontouchstart="" rel="nofollow"><i class="fa fa-fw fa-phone"></i>联系主持人</a>
                  </div>
              </div>
          </div>
      </div>  </div>
      {else /}

      {/if}
      {/if}
      <div class="ShowMoreInfos">
      <div class="head"><i class="si si-book-open"></i> 更多阅读</div>
      <div class="ListMoreInfos">
      {qb:tag name="news_list_page_listdata02" type="cms" where="fid=$fid&id<>$id"}
      <!--
      <div class="Lists">
      <ul>
      <li>
      <div class="t"><a href="/index.php/news/content/show/id/4.html">山东乡村全面振兴：为乡村振兴注入新动能</a></div>
      <div class="m"><span><i class="glyphicon glyphicon-time"></i> 2018-01-20</span><em> <i class="si si-eye"></i> 0</em></div>
      </li>
      </ul>
      </div>
      <div class="Lists">
      <ul>
      <ol><a href="#"><img src="__STATIC__/images/1.jpg" onmouseover='thisimg_over($(this))' onmouseout='thisimg_out($(this))'/></a></ol>
      <li>
      <div class="t"><a href="/index.php/news/content/show/id/4.html">山东乡村全面振兴：为乡村振兴注入新动能</a></div>
      <div class="m"><span><i class="glyphicon glyphicon-time"></i> 2018-01-20</span><em> <i class="si si-eye"></i> 0</em></div>
      </li>
      </ul>
      </div>
      -->
      <div class="Lists">
      <ul>
      {notempty name="rs.picurl"}
      <ol><a href="{$rs.url}"><img src="{$rs.picurl}" onmouseover='thisimg_over($(this))' onmouseout='thisimg_out($(this))'/></a></ol>
      {/notempty}
      <li>
      <div class="t"><a href="{$rs.url}">{$rs.title}</a></div>
      <div class="m"><span><i class="glyphicon glyphicon-time"></i> {$rs.time}</span><em> <i class="si si-eye"></i> {$rs.view}</em></div>
      </li>
      </ul>
      </div>
      {/qb:tag}

      </div>
      <div class="ShowMoreButter"><button type="butter" onclick="ShowMoreInfo()">查看更多</button></div>
      </div>
      </div>
      <script>
      var morepage=1;
      var url='{qb:url name="news_list_page_listdata02" /}';//异步获取更多内容的url
      function ShowMoreInfo(){
      morepage++;
      $.get(url+morepage+'&'+Math.random(),function(res){
      if(res.code==0){
      if(res.data==''){
      layer.msg("已经显示完了！",{time:500});
      $('.ShowMoreButter button').attr('onclick','');
      $('.ShowMoreButter button').html('显示完了');
      $('.ShowMoreButter button').css({'background':'#CCC'});
      }else{
      res.data="<span class='pages"+morepage+"'>"+res.data+"</span>";
      $('.ListMoreInfos').append(res.data);
      $('.ListMoreInfos .pages'+morepage).hide();
      $('.ListMoreInfos .pages'+morepage).show(500);
      }
      }else{
      layer.msg(res.msg,{time:2500});
      }
      });
      }
      function thisimg_over(imgobjs){
      imgobjs.animate({"max-width":"150%","max-height":"150%"},300);
      }
      function thisimg_out(imgobjs){
      imgobjs.animate({"max-width":"100%","max-height":"100%"},300);
      }
      </script>


      <!-- 分享海报二维码宣传推广图片 -->
      {include file="$haibao" /}
      {include file="../../../haibao_style/btn" /}
      <!--<div style="position:fixed;right:30px;top:80px;z-index:200;width:30px;font-size:10px;line-height:10px;color:#000;opacity:0.7;"><i id="share_code" onclick="share_btn()" style="font-size:30px;" class="fa fa-qrcode"></i>海报</div>-->

      <!-- 微动态自动收录用户感兴趣的主题,时间60代表用户停留60秒将自动收藏 -->
      {:fun('sns@fav',$info,60,'系统帮你订阅了本主题,下次本主题有回复,将会通知你')}

      <!-- 微信分享 -->
      {php}if(in_weixin()&&empty($info['picurl'])&&$array=fun('content@get_images',$info['content']))$info['picurl']=$array[0]['picurl'];{/php}
      {include file="index@share" /}

      <!--
      微信分享插件里边有这段代码了
      <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js";></script>
      -->
      <script type="text/javascript">
      wx.miniProgram.getEnv(function (res) {
      if (res.miniprogram==true) {
      var info = {
      title: '{$info.title}',
      picurl: '{$info.picurl}',
      url: "{:get_url(urls('show',['id'=>$id]))}?p_uid={$userdb.uid}",
      };
      var json = JSON.stringify(info);
      wx.miniProgram.postMessage({
      data: info,
      });
      }
      });
      </script>
      {/block}
      中国羊病网 消费:98.9元 2020-01-11 11:28
      我看是在css以外的模板中，看是不是他的音频播放器用的插件。。。
      韦成继 消费:4532.1元 华为 2020-01-11 12:47
      /public/static/libs/jplayer/css/style.css应该是这个样式文件
      中国羊病网 消费:98.9元 其他手机 2020-01-11 12:52
      打开这个文件，搜索80px
      韦成继 消费:4532.1元 华为 2020-01-11 13:07
      没有，这图片大小会变，有时是108px
      韦成继 消费:4532.1元 华为 2020-01-11 13:18
      css样式文件代码如下：
      .player-container *,
      .player-container *:before,
      .player-container *:after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
      .player-container {
        position: relative;
        font-family: sans-serif;
      }
      .player-layout {
        font-family: arial, sans-serif;
      }
      .ellipsis {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .player-background-outer,
      .player-background {
        z-index: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .player-background-outer{
      background:#000 url(images/sucaijiayuan.jpg) no-repeat center center;
      }
      .player-layout-outer {
        height: 100%;
        position: relative;
        overflow: hidden;
      }
      .player-layout {
        height: 100%;
        position: relative;
        overflow: hidden;
        z-index: 1;
      }
      .player-layout-inner {
        height: 100%;
        padding: 40px 0 90px 0;
      }
      .player-controls-outer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
      }
      .album-covers-wrapper,
      .track-list-wrapper {
        float: left;
        position: relative;
      }
      .album-covers-wrapper {
        min-height: 10px;
        height: 100%;
        width: 100%;
      }
      .track-list-wrapper {
        width: 50%;
      }
      .tracks:focus {
        outline: none !important;
      }
      .album-cover-wrapper {
        overflow: visible;
      }
      .album-cover-wrapper img {
        display: inline-block;
        vertical-align: middle;
      }
      .album-cover-wrapper {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        transition: opacity linear .5s;
      }
      .album-cover-wrapper.old {
        z-index: 9999;
      }
      .album-cover-wrapper img {
        width: 100%;
      }
      .album-cover-wrapper .track-info {
        color: #fff;
        text-align: center;
        padding-top: 15px;
      }
      .album-cover-wrapper .track-info .track-title,
      .album-cover-wrapper .track-info .track-artist {
        height: 20px;
        line-height: 20px;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
        -webkit-font-smoothing: antialiased;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .album-cover-wrapper .track-info .track-title {
        font-size: 14px;
      }
      .album-cover-wrapper .track-info .track-artist {
        font-size: 12px;
        opacity: .5;
      }
      .album-cover {
        position: relative;
        -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.4);
      }
      .album-cover .image {
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.85);
      }
      .album-cover-highlight {
        background: transparent url(images/album-cover-highlight.png) no-repeat 0 0 scroll;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      .mini [data-position="2"] {
        margin: 0 auto;
      }
      .track-list-wrapper .track-list {
        border-radius: 3px;
        background: rgba(0, 0, 0, 0.1);
        color: #777;
        float: left;
      }
      .track-list-wrapper ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .track-list-wrapper li {
        padding: 10px 20px;
        position: relative;
        font-size: 12px;
      }
      .track-list-wrapper li:hover {
        background: rgba(0, 0, 0, 0.1);
        color: #fff;
      }
      .track-list-wrapper li span {
        display: block;
      }
      .track-list-wrapper .track-number {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 20px;
        line-height: 40px;
      }
      .track-list-wrapper .track-details {
        margin-left: 20px;
        margin-right: 80px;
        line-height: 20px;
      }
      .track-list-wrapper .track-title,
      .track-list-wrapper .track-artist {
        line-height: 20px;
        cursor: pointer;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .track-list-wrapper .track-artist {
        color: #999;
      }
      .track-list-wrapper .duration {
        width: 80px;
        position: absolute;
        top: 10px;
        right: 0;
        padding: 0 0 0 20px;
        line-height: 40px;
      }
      .track-list-wrapper .playing {
        background: transparent url(images/now-playing-list-indicator.png) no-repeat 10px center;
      }
      .track-list-wrapper .playing .track-number {
        display: none;
      }
      .player-controls {
        padding: 0 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 90px;
        background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.9));
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.9));
        background-repeat: no-repeat;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#e6000000', GradientType=0);
      }
      .player-controls .player {
        height: 90px;
      }
      .player-controls .player-button {
        height: 90px;
        line-height: 90px;
        height: 100%;
        width: 50px;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: transparent;
        float: left;
        cursor: pointer;
      }
      .player-controls .player-track-info {
        color: #fff;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
        font-size: 12px;
        text-align: center;
        opacity: .6;
        position: relative;
        top: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .player-controls .play {
        background-image: url(images/play.svg);
        background-size: auto 19px;
      }
      .player-controls .previous {
        background-image: url(images/previous.svg);
        background-size: 18px auto;
      }
      .player-controls .next {
        background-image: url(images/next.svg);
        background-size: 18px auto;
      }
      .player-controls .pause {
        background-image: url(images/pause.svg);
        background-size: auto 20px;
      }
      .player-controls .toggle-layout {
        background-image: url(images/toggle-layout.svg);
        background-size: 20px auto;
      }
      .player-left {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
      }
      .player-center {
        padding-left: 200px;
        padding-right: 200px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      .player-center .player-center-inner {
        position: relative;
      }
      .player-center .time-and-progress-wrapper {
        position: relative;
        margin-top: 38px;
      }
      .player-center .player-time,
      .player-center .player-duration {
        position: absolute;
        top: -4px;
        font-size: 11px;
        color: #aaa;
      }
      .player-center .player-time {
        left: 0;
      }
      .player-center .player-duration {
        right: 0;
      }
      .player-center .progress-wrapper {
        padding: 0 40px;
      }
      .player-center .title {
        display: block;
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #fff;
      }
      .player-center .artist {
        display: block;
        font-size: 10px;
        color: #aaa;
        text-align: center;
      }
      .player-center .progress-bar,
      .player-center .elapsed-bar {
        width: 100%;
        height: 3px;
      }
      .player-center .progress-bar {
        background: #aaa;
      }
      .player-center .elapsed-bar {
        background: #fff;
      }
      .player-right {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
      }
      .volume {
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
      }
      .volume[data-level="high"] {
        background-image: url(images/volume-high.svg);
        background-size: 17px auto;
      }
      .volume[data-level="medium"] {
        background-image: url(images/volume-medium.png);
        background-size: 17px auto;
      }
      .volume[data-level="low"] {
        background-image: url(images/volume-low.png);
        background-size: 17px auto;
      }
      .volume[data-level="mute"] {
        background-image: url(images/volume-mute.svg);
        background-size: 17px auto;
      }
      .watermark {
        position: absolute;
        bottom: 100px;
        right: 20px;
        color: #fff;
        opacity: .2;
        font-size: 11px;
      }
      .watermark:hover {
        color: #fff;
        opacity: .5;
      }
      .light-bg .track-info {
        color: #444444;
      }
      .light-bg .player-track-info {
        color: #444444;
        opacity: 1;
      }
      .light-bg .player-time,
      .light-bg .player-duration {
        color: #444444;
      }
      .light-bg .play {
        background-image: url(images/play-dark.svg);
      }
      .light-bg .previous {
        background-image: url(images/previous-dark.svg);
      }
      .light-bg .next {
        background-image: url(images/next-dark.svg);
      }
      .light-bg .pause {
        background-image: url(images/pause-dark.svg);
      }
      .light-bg .toggle-layout {
        background-image: url(images/toggle-layout-dark.svg);
      }
      .light-bg .volume[data-level="high"] {
        background-image: url(images/volume-high-dark.svg);
      }
      .light-bg .volume[data-level="medium"] {
        background-image: url(images/volume-medium-dark.svg);
      }
      .light-bg .volume[data-level="low"] {
        background-image: url(images/volume-low-dark.svg);
      }
      .light-bg .volume[data-level="mute"] {
        background-image: url(images/volume-mute-dark.svg);
      }
      .light-bg .progress-bar {
        background: #fafafa;
      }
      .light-bg .elapsed-bar {
        background: #444;
      }
      .light-bg .watermark {
        color: #222;
      }
      [data-color="light-bg"] .track-info {
        color: #444444;
      }
      [data-color="light-bg"] .player-track-info {
        color: #444444;
        opacity: 1;
      }
      [data-color="light-bg"] .player-time,
      [data-color="light-bg"] .player-duration {
        color: #444444;
      }
      [data-color="light-bg"] .play {
        background-image: url(images/play-dark.svg);
      }
      [data-color="light-bg"] .previous {
        background-image: url(images/previous-dark.svg);
      }
      [data-color="light-bg"] .next {
        background-image: url(images/next-dark.svg);
      }
      [data-color="light-bg"] .pause {
        background-image: url(images/pause-dark.svg);
      }
      [data-color="light-bg"] .toggle-layout {
        background-image: url(images/toggle-layout-dark.svg);
      }
      [data-color="light-bg"] .volume[data-level="high"] {
        background-image: url(images/volume-high-dark.svg);
      }
      [data-color="light-bg"] .volume[data-level="medium"] {
        background-image: url(images/volume-medium-dark.svg);
      }
      [data-color="light-bg"] .volume[data-level="low"] {
        background-image: url(images/volume-low-dark.svg);
      }
      [data-color="light-bg"] .volume[data-level="mute"] {
        background-image: url(images/volume-mute-dark.svg);
      }
      [data-color="light-bg"] .progress-bar {
        background: #fafafa;
      }
      [data-color="light-bg"] .elapsed-bar {
        background: #444;
      }
      [data-color="light-bg"] .watermark {
        color: #222;
      }
      .simple-shadows .album-cover {
        border: 1px solid rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
      }
      .mini .player-center,
      .forced-mini .player-center,
      .mini .player-left,
      .forced-mini .player-left {
        display: block;
        width: 100%;
        position: relative;
        padding: 0;
      }
      .mini .player-right,
      .forced-mini .player-right {
        display: none;
      }
      .mini .player-left .player-button,
      .forced-mini .player-left .player-button {
        width: 33%;
        text-align: center;
        display: block;
        float: left;
      }
      .mini .player-track-info,
      .forced-mini .player-track-info {
        display: none;
      }
      .mini .player-button,
      .forced-mini .player-button {
        line-height: 40px;
        height: 40px;
      }
      .mini-height .player-controls,
      forced-mini-height .player-controls {
        height: 60px;
      }
      .mini-height .player-controls .player,
      forced-mini-height .player-controls .player {
        height: 60px;
      }
      .mini-height .player-controls .player-button,
      forced-mini-height .player-controls .player-button {
        width: 40px;
        height: 60px;
        line-height: 60px;
      }
      .mini-height .player-controls .player-track-info,
      forced-mini-height .player-controls .player-track-info {
        display: none;
      }
      .mini-height .player-controls .time-and-progress-wrapper,
      forced-mini-height .player-controls .time-and-progress-wrapper {
        margin-top: 28px;
      }
      .mini-height .player-layout-inner,
      forced-mini-height .player-layout-inner {
        padding-bottom: 60px;
      }
      .mini-height .watermark,
      forced-mini-height .watermark {
        bottom: 70px;
      }
      .mini-height [data-style-type="blur-player"] .general-background,
      forced-mini-height [data-style-type="blur-player"] .general-background {
        top: -60px;
      }
      .mini.mini-height .player-center,
      .forced-mini.forced-mini-height .player-center {
        padding: 0;
      }
      .mini.mini-height .time-and-progress-wrapper,
      .forced-mini.forced-mini-height .time-and-progress-wrapper {
        margin-top: 18px;
      }
      .mini.mini-height .player-button,
      .forced-mini.forced-mini-height .player-button {
        width: 33%;
        height: 40px;
        line-height: 40px;
      }
      [data-layout="album-cover-and-list"] .album-covers-wrapper,
      [data-layout="album-cover-and-list"] .track-list-wrapper {
        width: 50%;
        float: left;
      }
      [data-layout="album-cover-and-list"] .album-cover-wrapper {
        float: right;
        margin-right: 2.5%;
      }
      [data-layout="album-cover-and-list"] .track-list {
        margin-left: 2.5%;
      }
      [data-layout="list"] .player-layout-inner {
        padding-top: 0;
      }
      [data-layout="list"] .track-list-wrapper {
        height: 100%;
        width: 100%;
      }
      .not-allowed {
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        height: 100%;
        width: 100%;
      }
      .not-allowed p {
        width: 80%;
        padding: 10px 20px;
        margin: 10px auto;
        text-align: left;
        background-color: #f2dede;
        border-color: #ebccd1;
        color: #a94442;
      }
      .blur-player.player-background {
        z-index: 0;
      }
      .blvd-loading {
        height: 100%;
        width: 100%;
        background: rgba(35, 35, 35, 0.95);
        font-size: 20px;
        color: #fafafa;
        text-align: center;
        position: absolute;
        display: table;
        top: 0;
        left: 0;
        z-index: 999;
      }
      .blvd-loading div {
        display: table-cell;
        vertical-align: middle;
        margin-top: -100px;
      }
      .nano-pane {
        z-index: 9;
      }
    0 赏钱 赏礼回复
    • admin 超级管理员 消费:3.04元 2020-01-10 09:34 09:346楼
      要调播放器的CSS样式.晚点再改吧,这个不是最急的
      韦成继 消费:4532.1元 华为 2020-01-10 09:38
      您说改哪个文件？路径是什么？
      a5 消费:2145.96元 华为 2020-01-10 22:58
      @韦成继 F12键！火狐浏览器打开！编程器查询！地址，文件名！CSS，标签！自己研究一下
    0 赏钱 赏礼回复
    网站没有直接报错，如何查看错误原因，解决方案如下:
    https://www.kancloud.cn/php168/x1_of_qibo/1544387
    • a5 实战运营者 消费:2145.96元 2020-01-10 22:55 22:55
      华为
      6楼
      不知道
    0 赏钱 赏礼回复
    • 午夜梦寒 实战运营者 消费:1817.13元 2020-01-10 17:19 17:196楼
      张萌好漂亮
    0 赏钱 赏礼回复
    微信13205905096，欢迎同道交流。
    • 三横 实战运营者 消费:2338.38元 2020-01-10 14:42 14:426楼
      /public/static/libs/jplayer/css/style.css
      这个文件可以改！但是改哪一行忘了·····
      韦成继 消费:4532.1元 华为 2020-01-10 16:13
      具体哪一行代码呢？
    0 赏钱 赏礼回复
    更多回复
    恢复多功能编辑器
  • 3 1
    • 在线教育方案
        圈内贴子71
    • 圈子成员3
    本圈子内的新贴

    热门分类
    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

    打造最专业的开源系统建站程序
     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648
    微信扫一扫
    加客服微信