# 售卖专题

页面底部引用通用脚本，并执行初始化方法。根据访问平台类型加载不同的依赖js脚本，同时提供常用功能的接口方法。

<script src="//lol.qq.com/plugin/business/sell_common.min.js"  charset="UTF-8"></script>
<script>
lolSellCommon.init({
//分享信息、悬浮广告等配置项
});
</script>

# 默认加载的脚本

移动端:

 "//pub.idqqimg.com/qqmobile/qqapi.js?_bid=152", //用户手Q分享以及在手机上拉起掌盟
 "//game.gtimg.cn/images/js/2018foot/foot.js", //公共底部
 "//ossweb-img.qq.com/images/js/zepto/zepto.min.js", //移动端必引，同时分享依赖该文件
 "//ossweb-img.qq.com/images/js/mobile_bundle/milo.js",
 "//lol.qq.com/m/public/LOL_App.js"

PC端:

 "//ossweb-img.qq.com/images/lol/title/lol.js",
 "//game.gtimg.cn/images/js/2018foot/foot.js",
 "//ossweb-img.qq.com/images/js/jquery/jquery-1.11.3.min.js",
 "//ossweb-img.qq.com/images/js/milo_bundle/milo.js"

# 初始化配置项

名称	说明	备注
mobileShareCfg	设置移动端的分享信息	*必选
pcFixedBanner	设置PC端的悬浮banner。（跳转广告图、二维码等）	可选
callback	在默认脚本加载完成后执行	可选

# mobileShareCfg

使用示例：

mobileShareCfg: {
  title: "猫狗大战",//[必填]分享标题
  summery: "2019愚人节皮肤、炫彩礼包全新上线，购买解锁“喵星人”、“汪星人”掌盟勋章，一起加入猫狗大战！", //[必填]分享描述
  subtitle: "猫狗大战",//[必填]分享二级标题
  img: "https://game.gtimg.cn/images/lol/act/a20190328catdogpk/share.jpg",//[必填]分享图标；尺寸：200x200
  url: location.href.split('?')[0],//[选填]分享地址；默认值：当前页面地址
  // WXtrigger:function(res){
  //   //微信动作回调，捕捉动作
  // },
  // WXToMessageSuccess:function(res){
  //   //微信分享个人成功
  // },
  // WXToTimelineSuccess:function(res){
  //   //微信分享朋友圈成功
  // },
  // WXToQQSuccess:function(res){
  //   //微信分享QQ成功
  // },
  // WXcancel:function(res){
  //   //微信分享取消动作回调
  // },
  // WXfail:function(res){
  //   //微信分享失败动作回调
  // },
  // QQtrigger:function(res){
  //   //QQ分享动作回调
  // },
  // QQcallback:function(res){
  //   //QQ分享成功
  // }
}

# pcFixedBanner

线上案例：https://lol.qq.com/act/a20190328catdogpk/index.html

使用示例：

pcFixedBanner:[
  {         
    url:"//lol.qq.com/act/20190326PetBattle/index.html?ADTAG=lolact.nav",//[选填]跳转地址
    img:"//game.gtimg.cn/images/lol/act/a20190328catdogpk/dog-banner.png",//[必填]图片地址
    title:"带TA回家",//[必填]鼠标hover提示文字
    bottom:0,//[选填]相对浏览器窗口的位置；默认值：10
    right:10,//[选填]相对浏览器窗口的位置；默认值：10
    width:250,//[选填]宽度；默认值：200
    height:255,//[选填]高度；默认值：160
    layer:5//[选填]z-index层级；默认值："auto"
  },
  {         
    //如果是二维码等无需跳转的情况，不填url属性
    img:"//game.gtimg.cn/images/lol/act/a20190328catdogpk/fixedbanner.png",
    title:"打开掌盟萌友圈参与#猫狗大战#话题讨论",
    bottom:0,
    right:10,
    width:250,
    height:255,
    layer:5
  }
]

提示

如果要单独调整某个banner的样式，可通过fixed-banner.banner-[索引值]类名选择器进行调整

如fixed-banner.banner-0、fixed-banner.banner-1

# callback

使用示例：

callback:function(){
  doSomething()
}

# 购买按钮设置

用户在售卖页上的主要操作，点击之后会根据平台类型跳转到对应的购买页面。

使用示例：

<a class="J-btn-buy" href="javascript:;"
title="立即购买"
target="_blank"
data-zm-id="8951"
data-djc-id="16650"
data-tag="雷喵喵尔"
data-eas-tag="skin.1875">立即购买</a>

类名J-btn-buy需要添加至购买的a标签上，作为钩子。
data-tag属性填入按钮对应的物品名称，用于PTT统计上报。
data-eas-tag属性填入按钮对应的物品类型和唯一id标识，格式：物品类型.id标识；用于eas统计上报。 物品唯一id标识找内部同学确认
物品类型标签

皮肤 skin

英雄 champion

礼包 bundles

守卫 ward

通行证 pass

图标 icon
data-zm-id、data-djc-id分别对应掌盟id、道聚城id，默认情况下只需要添加这两个属性；如果在某个渠道没有上架，则将对应属性置空：

物品类型	标签
皮肤	skin
英雄	champion
礼包	bundles
守卫	ward
通行证	pass
图标	icon

<a class="J-btn-buy" href="javascript:;" data-zm-id="" data-djc-id="" data-tag="雷喵喵尔" title="立即购买" target="_blank">立即购买</a>

data-wx-id、data-other-id分别对应微信渠道、其他渠道，默认情况下不需要添加；如果在某个渠道没有上架，则将对应属性置空：

<a class="J-btn-buy" href="javascript:;" data-wx-id="8951" data-djc-id="16650" data-wx-id="" data-other-id="" data-tag="雷喵喵尔" title="立即购买" target="_blank">立即购买</a>

如果是跳转到购买列表（非半价，找产品同学确认是否是跳转半价购买列表）的按钮，那么只需要在a标签上添加类名J-btn-buy-list即可：

<a class="J-btn-buy-list" href="javascript:;" title="立即购买" target="_blank">立即购买</a>

如果是跳转到半价购买列表的按钮，则需要在a标签上添加类名J-btn-buy-half-list：

<a class="J-btn-buy-half-list" href="javascript:;" title="立即购买" target="_blank">立即购买</a>

# 全局属性&方法

会引入全局变量lolSellCommon，其有数个属性和方法可供使用

# isPC

类型：Boolean
说明：判断是否是PC端
使用示例：

if( lolSellCommon.isPC ){
  //pc端处理
}else{
  //非pc端处理
}

# loadScripts(scripts,callback)

参数：
- {Array<string>} scripts 加载文件列表
- {Function} callback
说明：加载js文件
使用示例：

lolSellCommon.loadScripts([
  "//pub.idqqimg.com/qqmobile/qqapi.js?_bid=152",//用户手Q分享以及在手机上拉起掌盟
  "//game.gtimg.cn/images/js/2018foot/foot.js",//公共底部
],function(){
  //callback
})

# initBtnBuy()

说明：适用于需要在动态插入dom结构之后初始化购买按钮的情况
使用示例：

$('.list').html(shtml);//插入dom结构
lolSellCommon.initBtnBuy();

# 售卖数字

如无特殊要求，售卖页上的数字使用公共的字体，包含0到9数字及.符号。

# 可选字体

sellnum-1、sellnum-2 ... sellnum-12，共12种；使用时引用对应的字体即可。

1024.56789 sellnum-1原始字体名称：BeaufortforLOL-Bold

1024.56789 sellnum-2原始字体名称：AVANTGA2

1024.56789 sellnum-3原始字体名称：CopperplateGothicStd-30AB

1024.56789 sellnum-4原始字体名称：DINEngschriftLTPro

1024.56789 sellnum-5原始字体名称：Dylan-CopperplateBold

1024.56789 sellnum-6原始字体名称：ENGR

1024.56789 sellnum-7原始字体名称：HelveticaLTPro-XCompressed

1024.56789 sellnum-8原始字体名称：KairosPro-Bold

1024.56789 sellnum-9原始字体名称：LT_55794

1024.56789 sellnum-10原始字体名称：Madera-ExtraBold

1024.56789 sellnum-11原始字体名称：Massimo-SemiBold

1024.56789 sellnum-12原始字体名称：PalatinoNovaPro-Imperial

隐藏

对应代码如下：

<div class="demoView" style="background:#000;padding:20px;">
  <p><span class="sellnum-1">1024.56789</span><em style="color:#aaa"> sellnum-1</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：BeaufortforLOL-Bold</em></p>
  <p><span class="sellnum-2">1024.56789</span><em style="color:#aaa"> sellnum-2</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：AVANTGA2</em></p>
  <p><span class="sellnum-3">1024.56789</span><em style="color:#aaa"> sellnum-3</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：CopperplateGothicStd-30AB</em></p>
  <p><span class="sellnum-4">1024.56789</span><em style="color:#aaa"> sellnum-4</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：DINEngschriftLTPro</em></p>
  <p><span class="sellnum-5">1024.56789</span><em style="color:#aaa"> sellnum-5</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：Dylan-CopperplateBold</em></p>
  <p><span class="sellnum-6">1024.56789</span><em style="color:#aaa"> sellnum-6</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：ENGR</em></p>
  <p><span class="sellnum-7">1024.56789</span><em style="color:#aaa"> sellnum-7</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：HelveticaLTPro-XCompressed</em></p>
  <p><span class="sellnum-8">1024.56789</span><em style="color:#aaa"> sellnum-8</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：KairosPro-Bold</em></p>
  <p><span class="sellnum-9">1024.56789</span><em style="color:#aaa"> sellnum-9</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：LT_55794</em></p>
  <p><span class="sellnum-10">1024.56789</span><em style="color:#aaa"> sellnum-10</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：Madera-ExtraBold</em></p>
  <p><span class="sellnum-11">1024.56789</span><em style="color:#aaa"> sellnum-11</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：Massimo-SemiBold</em></p>
  <p><span class="sellnum-12">1024.56789</span><em style="color:#aaa"> sellnum-12</em><em style="font-style:normal;color:#aaa;padding-left:20px;">原始字体名称：PalatinoNovaPro-Imperial</em></p>
</div>

<style>
/* 数字字体公共样式 */
@font-face {
    font-family: 'sellnum-1';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-1.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-1.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-1.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-1.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-2';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-3';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-3.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-3.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-3.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-3.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-4';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-4.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-4.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-4.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-4.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-5';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-5.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-5.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-5.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-5.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-6';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-6.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-6.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-6.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-6.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-7';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-7.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-7.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-7.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-7.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-8';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-8.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-8.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-8.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-8.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-9';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-9.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-9.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-9.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-9.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-10';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-10.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-10.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-10.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-10.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-11';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-11.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-11.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-11.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-11.svg') format('svg');
}
@font-face {
    font-family: 'sellnum-12';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-12.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-12.woff') format('woff'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-12.ttf') format('truetype'),url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-12.svg') format('svg');
}

.sellnum-1{font-family: 'sellnum-1';}
.sellnum-2{font-family: 'sellnum-2';}
.sellnum-3{font-family: 'sellnum-3';}
.sellnum-4{font-family: 'sellnum-4';}
.sellnum-5{font-family: 'sellnum-5';}
.sellnum-6{font-family: 'sellnum-6';}
.sellnum-7{font-family: 'sellnum-7';}
.sellnum-8{font-family: 'sellnum-8';}
.sellnum-9{font-family: 'sellnum-9';}
.sellnum-10{font-family: 'sellnum-10';}
.sellnum-11{font-family: 'sellnum-11';}
.sellnum-12{font-family: 'sellnum-12';}

[class^="sellnum"]{display: inline-block;font-size:42px;color:#fff;}
</style>

# 常规渐变样式

根据视觉设计稿定义渐变色值

111.56789

隐藏

对应代码如下：

<div class="demoView" style="background:#000;padding:20px;">
  <span class="sellnum text">111.56789</span>
</div>

<style>
/* 数字字体公共样式 */
@font-face {
    font-family: 'sellnum-2';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.woff') format('woff'),
          url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.ttf') format('truetype'),
          url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.svg') format('svg');
}
.sellnum{
    display: inline-block;
    font-weight: 700;
    font-family: 'sellnum';
}

/* 渐变样式示例 */
.text{
  font-size:80px;
  color:#a9905f;/* 默认色值 低级浏览器下显示 */
}

@supports (-webkit-background-clip: text) {
  .text{
    background-image: linear-gradient(#a9905f, #95b0b8);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
</style>

# 金色（带高光质感）

注意需要设置 data-num属性

111.56789

隐藏

对应代码如下：

<div class="demoView" style="background:#000;padding:20px;">
  <span class="sellnum gold" data-num="111.56789">111.56789</span>
</div>

<style>
/* 数字字体公共样式 */
@font-face {
    font-family: 'sellnum-2';
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.eot');
    src: url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.woff') format('woff'),
          url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.ttf') format('truetype'),
          url('//game.gtimg.cn/images/lol/common/sell/font/sellnum-2.svg') format('svg');
}
.sellnum{
    display: inline-block;
    font-weight: 700;
    font-family: 'sellnum';
}

/* 金色字体示例样式 */
.gold{
  position: relative;
  font-size:80px;/* 字体大小 根据实际情况设置 */
  color:#a37e38;/* 默认色值 低级浏览器下显示 */
}

@supports (-webkit-background-clip: text) {
    .gold::before,.gold::after {
        position: absolute;
        z-index: 2;
        top:0;
        left:0;
        content: attr(data-num);
        background-image: linear-gradient(#f9dfa2, #a37e38);
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
    .gold::after{
      z-index: 1;
      top:-1px;
      background-image: linear-gradient(#fff, #eed562);
    }
}
</style>

← 范例代码包下载&说明 API接口 →