返回首页
网站导航
商家入驻
客户服务
我的订单
我的易购
苏宁会员
购物车 0
易付宝
企业采购
手机苏宁
君凤文轩图书专营店

服务体验

店铺评分与同行业相比

用户评价：----

物流时效：----

售后服务：----

  • 服务承诺： 正品保障
  • 公司名称：
  • 所 在 地：
进入店铺 关注店铺 商品地图
本店所有商品
君凤文轩图书专营店
  • 扫码下单
    进入店铺

  • 正版新书]WEB前端设计从入门到实战:HTML5.CSS3.JAVASCRIPT项目

  • 全店均为全新正版书籍，欢迎选购！新疆西藏青海(可包挂刷).港澳台及海外地区bu bao快递

    • 作者： 张树明著 | 张树明编 | 张树明译 | 张树明绘
    • 出版社： 清华大学出版社
    • 出版时间：2019-04-01
    送至
  • 由""直接销售和发货，并提供售后服务
  • 加入购物车 购买电子书
    服务

    看了又看

    商品预定流程：

    查看大图
    /
    ×

    苏宁商家

    商家：
    君凤文轩图书专营店
    联系：

    • 商品

    • 服务

    • 物流

    进入店铺 关注店铺

    搜索店内商品

    • 关键词：
    • 价  格： -

    商品分类

    商品分类

    商品参数
    • 作者： 张树明著| 张树明编| 张树明译| 张树明绘
    • 出版社：清华大学出版社
    • 出版时间：2019-04-01
    • 版次：2
    • 印次：1
    • 印刷时间：2018-09-01
    • 字数：748千字
    • 页数：474
    • 开本：其他
    • ISBN：9787302516286
    • 版权提供：清华大学出版社
    • 作者：张树明
    • 著：张树明
    • 装帧：平装
    • 印次：1
    • 定价：79.5
    • ISBN：9787302516286
    • 出版社：清华大学出版社
    • 开本：其他
    • 印刷时间：2018-09-01
    • 语种：中文
    • 出版时间：2019-04-01
    • 页数：474
    • 外部编号：党庄B171315
    • 版次：2
    • 成品尺寸：暂无

    第1章 Web技术概述 1
    1.1Internet概述 1
    1.1.1TCP/IP 1
    1.1.2主机和IP地址 2
    1.1.3域名和DNS 3
    1.2Web概述 3
    1.2.1Web历史 4
    1.2.2Web体系结构 5
    1.2.3基本Web技术 5
    1.2.4Web服务器 9
    1.3超文本与标记语言 9
    1.3.1超文本与超媒体 10
    1.3.2标记语言 10
    1.4Web标准 12
    1.4.1Web标准体系 13
    1.4.2采用Web标准的优势 15
    1.5浏览器 15
    1.5.1浏览器的发展史 15
    1.5.2浏览器的内核 16
    1.5.3常用浏览器 16
    1.5.4标准浏览器 17
    1.6Web开发工具 18
    1.6.1JetBrains WebStorm 19
    1.6.2测试和调试环境 19
    1.7小结 20
    1.8习题 20
    第2章 初识HTML5 21
    2.1HTML5基础 21
    2.1.1HTML5文档结构 21
    2.1.2元素与标签 22
    2.1.3属性 26
    2.1.4语法规则 27
    2.2WebStorm基础 27
    2.2.1WebStorm的基本操作 28
    2.2.2WebStorm的快捷键 29
    2.3文档结构元素 30
    2.3.1标签 31
    2.3.2标签 31
    2.3.3标签 31
    2.4头部元素 31
    2.4.1标签 31<br/>2.4.2<meta>标签 32<br/>2.5为叮叮书店首页添加元信息 35<br/>2.6小结 36<br/>2.7习题 36<br/>第3章 HTML5内容结构与文本 37<br/>3.1HTML5结构标签 37<br/>3.1.1<header>标签 38<br/>3.1.2<main>标签 38<br/>3.1.3<nav>标签 38<br/>3.1.4<article>标签 38<br/>3.1.5<section>标签 38<br/>3.1.6<aside>标签 39<br/>3.1.7<footer>标签 39<br/>3.1.8<details>标签和<summary>标签 39<br/>3.1.9<div>标签 39<br/>3.1.10<span>标签 40<br/>3.2HTML5基础标签 40<br/>3.2.1标题 40<br/>3.2.2段落 41<br/>3.2.3换行符 41<br/>3.2.4注释 41<br/>3.3HTML5格式化标签 41<br/>3.3.1文本格式化标签 41<br/>3.3.2引用和术语定义标签 43<br/>3.3.3HTML5新增格式标签 44<br/>3.4HTML5列表 47<br/>3.4.1无序列表 47<br/>3.4.2有序列表 48<br/>3.4.3定义列表 49<br/>3.5叮叮书店首页内容结构的建立 49<br/>3.5.1分析设计页面内容结构 50<br/>3.5.2用HTML5结构标签确定页面内容结构 50<br/>3.5.3添加文本内容 53<br/>3.5.4在浏览器中预览 57<br/>3.6小结 58<br/>3.7习题 58<br/>第4章 HTML5超链接 60<br/>4.1<a>标签 60<br/>4.1.1href属性 61<br/>4.1.2target属性 61<br/>4.1.3id属性 62<br/>4.2HTML5字符集与颜色 63<br/>4.2.1HTML5字符集 63<br/>4.2.2HTML5字符实体 63<br/>4.2.3HTML5颜色 64<br/>4.2.4HTML5颜色名 64<br/>4.3叮叮书店首页超链接的使用 65<br/>4.4小结 67<br/>4.5习题 67<br/>第5章 HTML5多媒体 68<br/>5.1HTML5图像 68<br/>5.1.1<img>标签 68<br/>5.1.2<map>标签和<area>标签 70<br/>5.1.3<figure>标签和<figcaption>标签 71<br/>5.2HTML5音频/视频 71<br/>5.2.1HTML5视频 71<br/>5.2.2HTML5音频 74<br/>5.3<embed>标签 76<br/>5.4叮叮书店首页图像的使用 76<br/>5.5小结 79<br/>5.6习题 79<br/>第6章 HTML5表格 80<br/>6.1表格结构和表格标签 80<br/>6.1.1表格结构 80<br/>6.1.2表格标签 80<br/>6.2常用表格标签 82<br/>6.2.1<table>标签 82<br/>6.2.2<tr>标签 83<br/>6.2.3<td>标签 83<br/>6.2.4<col>标签 84<br/>6.2.5<thead>、<tbody>和<tfoot>标签 85<br/>6.3叮叮书店“购物车”页面的建立 85<br/>6.4小结 86<br/>6.5习题 87<br/>第7章 HTML5表单 88<br/>7.1表单的基本知识 88<br/>7.1.1什么是表单 88<br/>7.1.2<form>标签 88<br/>7.2表单域 90<br/>7.2.1<input>标签 91<br/>7.2.2<textarea>标签 98<br/>7.2.3<label>标签 99<br/>7.2.4<fieldset>标签 99<br/>7.2.5<select>标签 100<br/>7.2.6<option>标签 100<br/>7.2.7<optgroup>标签 101<br/>7.2.8<button>标签 101<br/>7.2.9<datalist>标签 102<br/>7.2.10<output>标签 103<br/>7.3叮叮书店“联系我们”页面的建立 103<br/>7.4为叮叮书店首页添加站内搜索 106<br/>7.5小结 106<br/>7.6习题 106<br/>第8章 CSS基础 108<br/>8.1CSS概述 108<br/>8.2CSS语法 110<br/>8.3CSS常用选择器 111<br/>8.4CSS3选择器 114<br/>8.5CSS属性 115<br/>8.5.1CSS常用属性 115<br/>8.5.2CSS属性值和单位 119<br/>8.5.3CSS3属性值和单位 120<br/>8.6使用CSS 127<br/>8.7媒体查询 130<br/>8.8层叠样式 132<br/>8.9使用Chrome开发者工具检查编辑页面及样式 135<br/>8.10小结 136<br/>8.11习题 137<br/>第9章 页面布局定位 139<br/>9.1CSS盒模型 139<br/>9.1.1CSS盒模型概述 139<br/>9.1.2CSS内边距 141<br/>9.1.3CSS边框 143<br/>9.1.4CSS3边框 147<br/>9.1.5CSS外边距 151<br/>9.1.6CSS轮廓 153<br/>9.2CSS布局 154<br/>9.2.1盒模型显示类型 154<br/>9.2.2CSS3伸缩盒布局 157<br/>9.2.3CSS浮动 171<br/>9.2.4可见与溢出 174<br/>9.3CSS定位 176<br/>9.3.1position属性 176<br/>9.3.2z-index属性 181<br/>9.4基本布局模板 181<br/>9.4.1固定（液态）布局 182<br/>9.4.2弹性伸缩布局（响应式Web设计） 184<br/>9.5叮叮书店首页的布局样式设计 187<br/>9.6小结 190<br/>9.7习题 191<br/>第10章 元素外观属性 193<br/>10.1背景 193<br/> 10.1.1CSS背景 193<br/> 10.1.2CSS3背景 196<br/> 10.1.3CSS3透明度 198<br/>10.2字体 199<br/> 10.2.1指定字体 199<br/> 10.2.2指定大小 200<br/> 10.2.3字体风格 200<br/> 10.2.4字体粗细 200<br/> 10.2.5CSS3服务器端字体 202<br/>10.3文本与修饰 205<br/> 10.3.1文本 205<br/> 10.3.2修饰 211<br/>10.4CSS3文本效果 212<br/> 10.4.1阴影 212<br/> 10.4.2换行 213<br/>10.5CSS3多列 213<br/>10.6列表 215<br/>10.7尺寸 216<br/>10.8表格 218<br/> 10.8.1表格的属性 218<br/> 10.8.2表格的边框控制 220<br/> 10.8.3改善表格的显示效果 222<br/> 10.8.4叮叮书店“购物车”页面的表格样式设计 223<br/>10.9叮叮书店首页的外观样式设计 224<br/> 10.9.1文本 224<br/> 10.9.2背景 225<br/> 10.9.3栏目标题图标 226<br/> 10.9.4其他 227<br/>10.10小结 228<br/>10.11习题 228<br/>第11章 伪类和伪元素 230<br/>11.1CSS伪类 230<br/> 11.1.1超链接伪类 231<br/> 11.1.2结构性伪类 232<br/> 11.1.3子元素伪类 233<br/> 11.1.4UI元素状态伪类 236<br/>11.2CSS伪元素 239<br/>11.3CSS内容 240<br/>11.4小结 243<br/>11.5习题 243<br/>第12章 CSS3变换、过渡和动画 245<br/>12.1变换 245<br/>12.2过渡 256<br/>12.3动画 260<br/>12.4叮叮书店首页的超链接、伪类和动画样式设计 263<br/>12.5小结 267<br/>12.6习题 267<br/>第13章 默认样式和页面内容样式设计 269<br/>13.1默认样式 269<br/> 13.1.1HTML默认样式 269<br/> 13.1.2浏览器默认样式 271<br/>13.2页面内容样式设计 272<br/> 13.2.1导航菜单 272<br/> 13.2.2图文混排 274<br/>13.3小结 276<br/>13.4习题 276<br/>第14章 网站制作流程与发布 277<br/>14.1网站制作流程 277<br/>14.2模板 279<br/>14.3基于模板建立叮叮书店的其他页面 280<br/> 14.3.1书籍分类 280<br/> 14.3.2特刊降价 282<br/> 14.3.3联系我们 284<br/> 14.3.4关于我们 285<br/> 14.3.5详细内容 286<br/> 14.3.6购物车 289<br/>14.4网站发布 289<br/> 14.4.1Tomcat服务器的安装与使用 289<br/> 14.4.2发布 292<br/>14.5小结 292<br/>14.6习题 292<br/>第15章 JavaScript和ECMAScript基础 294<br/>15.1JavaScript基础 294<br/> 15.1.1JavaScript的历史和主要功能 294<br/> 15.1.2JavaScript的组成 295<br/> 15.1.3JavaScript的使用 296<br/> 15.1.4JavaScript消息框 298<br/> 15.1.5开发者工具Console 299<br/>15.2ECMAScript基础 300<br/> 15.2.1ECMAScript语法基础 300<br/> 15.2.2ECMAScript变量 301<br/> 15.2.3ECMAScript关键字和保留字 302<br/> 15.2.4ECMAScript基本数据类型 303<br/> 15.2.5ECMAScript类型转换 305<br/>15.3ECMAScript运算符 307<br/> 15.3.1一元运算符 307<br/> 15.3.2算术运算符 308<br/> 15.3.3关系运算符 309<br/> 15.3.4逻辑运算符 311<br/> 15.3.5其他运算符 312<br/>15.4小结 313<br/>15.5习题 313<br/>第16章 算法和ECMAScript语句 315<br/>16.1算法 315<br/> 16.1.1算法的概念 315<br/> 16.1.2简单算法举例 316<br/> 16.1.3算法的特性 316<br/> 16.1.4算法与程序 316<br/>16.2ECMAScript语句 317<br/> 16.2.1条件语句 317<br/> 16.2.2循环语句 320<br/> 16.2.3break和continue语句 322<br/>16.3WebStorm和Chrome协作调试JavaScript脚本程序 323<br/>16.4使用Sources调试JavaScript脚本程序 325<br/>16.5小结 328<br/>16.6习题 328<br/>第17章 行为与对象 329<br/>17.1行为 329<br/> 17.1.1ECMAScript函数 329<br/> 17.1.2ECMAScript闭包 332<br/> 17.1.3HTML事件 333<br/>17.2ECMAScript对象 337<br/> 17.2.1对象和类 337<br/> 17.2.2创建和使用对象 338<br/> 17.2.3ECMAScript引用类型 339<br/> 17.2.4ECMAScript对象类型 345<br/>17.3错误处理 346<br/>17.4内置对象和本地对象 348<br/> 17.4.1Math对象 348<br/> 17.4.2全局对象 349<br/> 17.4.3Array对象 351<br/> 17.4.4Date对象 353<br/>17.5叮叮书店首页显示日期和时间 354<br/>17.6小结 356<br/>17.7习题 356<br/>第18章 DOM 358<br/>18.1DOM概述 358<br/> 18.1.1DOM简介 358<br/> 18.1.2节点和节点树 359<br/>18.2DOM对象 360<br/> 18.2.1Node对象 360<br/> 18.2.2HTMLElement对象 362<br/> 18.2.3HTMLDocument对象 362<br/> 18.2.4访问节点 363<br/>18.3DOM与CSS 366<br/> 18.3.1Style对象 366<br/> 18.3.2CurrentStyle对象 370<br/> 18.3.3StyleSheet对象 371<br/>18.4叮叮书店首页图片轮播广告的实现 373<br/>18.5小结 376<br/>18.6习题 376<br/>第19章 HTML DOM对象和RegExp对象 378<br/>19.1HTML DOM对象 378<br/> 19.1.1Document对象 379<br/> 19.1.2Image对象 381<br/> 19.1.3Anchor对象 382<br/> 19.1.4Event对象 383<br/> 19.1.5Checkbox和Radio对象 388<br/> 19.1.6FileUpload对象 390<br/> 19.1.7Text和Password对象 392<br/> 19.1.8Textarea对象 393<br/> 19.1.9Select和Option对象 393<br/> 19.1.10Submit、Reset和Button对象 396<br/> 19.1.11Form对象 397<br/> 19.1.12一个小游戏——剪子石头布 398<br/>19.2RegExp对象 404<br/>19.3叮叮书店“联系我们”页面的表单数据验证 406<br/>19.4小结 408<br/>19.5习题 408<br/>第20章 HTML5 DOM 411<br/>20.1Canvas对象 411<br/> 20.1.1Canvas基础 413<br/> 20.1.2使用路径 414<br/> 20.1.3绘制文本 417<br/> 20.1.4绘制图像 418<br/>20.2HTML5拖放 420<br/>20.3HTML5数据存储 423<br/> 20.3.1sessionStorage对象 423<br/> 20.3.2localStorage对象 424<br/>20.4实现叮叮书店“书籍分类”页面拖放图书到购物车 428<br/>20.5小结 430<br/>20.6习题 431<br/>第21章 BOM 432<br/>21.1BOM对象 432<br/> 21.1.1Window对象 432<br/> 21.1.2Navigator对象 439<br/> 21.1.3Screen对象 441<br/> 21.1.4Location对象 441<br/> 21.1.5History对象 442<br/>21.2元素的大小与位置 442<br/>21.3叮叮书店首页的浮动广告 445<br/>21.4小结 446<br/>21.5习题 446<br/>第22章 Ajax与JSON 448<br/>22.1Ajax 448<br/>22.2XMLHttpRequest对象 449<br/> 22.2.1创建XMLHttpRequest对象 449<br/> 22.2.2XMLHttpRequest请求 450<br/> 22.2.3XMLHttpRequest响应 451<br/>22.3JSON 452<br/> 22.3.1JSON的语法 453<br/> 22.3.2JSON的使用 454<br/>22.4小结 456<br/>22.5习题 456<br/>第23章 jQuery入门 457<br/>23.1jQuery基础 457<br/> 23.1.1添加jQuery库 457<br/> 23.1.2jQuery的语法 458<br/>23.2特效和动画 459<br/>23.3HTML操作 462<br/>23.4Ajax函数 463<br/>23.5叮叮书店“试读”页面的建立 463<br/>23.6小结 466<br/>23.7习题 466<br/>附录A实验 467<br/>实验1HTML5内容结构和文本 467<br/>实验2HTML5超链接和多媒体 468<br/>实验3HTML5表格和表单 469<br/>实验4CSS3布局与定位 470<br/>实验5CSS3元素外观样式设计 471<br/>实验6CSS3动画 471<br/>实验7行为与对象及DOM 472<br/>实验8HTML DOM表单数据验证 473<br/>实验9HTML5 DOM 473<br/> 参考文献 474<br/></p></div><div style="width:auto;height:auto;margin:0 0 10pt 0;"><img onload="if(this.width>750){this.height=this.height*(750.0/this.width); this.width = 750;}" src2="//uimgproxy.suning.cn/uimg1/sop/commodity/xIIMWEkAWBO1CTvuBC6e1w.png"><p style="margin-top:5pt;text-indent:10pt;text-align:justify;font-size:18pt;color:#666;line-height:28pt;">HTML5内容结构与文本　　内容结构简称结构，是为网页内容建立一个框架，就像写文章先写一个提纲。结构使页面内容看起来不会杂乱无章，每一部分都紧密联系，形成一个整体。采用HTML5结构标签可以将页面划分成不同的区域或块形成结构，然后在不同的区域或块中填充内容，如报刊/杂志版面设计一样。本章首先详细介绍HTML5结构标签和基础标签，接下来简单了解格式化标签，然后重点介绍HTML5列表，最后详细介绍建立叮叮书店首页内容结构的过程。<br/>　　本章要点：　　 HTML5结构标签。<br/>　　 HTML5基础标签。<br/>　　 HTML5格式化标签。<br/>　　 HTML5列表。<br/>3.1HTML5结构标签　　HTML5结构标签用于搭建页面主体内容结构，形成不同的区块，完成整个页面的排版布局。表3.1列出了HTML5结构标签。<br/>表3.1HTML5结构标签标签描述　　　<article>　　　　定义文章（HTML5新标签）　　　<aside>　　　　定义页面内容之外的内容（HTML5新标签）　　　<details>　　　　定义元素的细节（HTML5新标签）　　　<footer>　　　　定义section或page的页脚（HTML5新标签）　　　<header>　　　　定义section或page的页眉（HTML5新标签）　　　<main>　　　　定义文档的主要内容（HTML5.2新标签）续表标签描述　　　<nav>　　　　定义导航链接（HTML5新标签）　　　<section>　　　　定义section（HTML5新标签）　　　<summary>　　　　为details元素定义可见的标题（HTML5新标签）　　　<div>　　　　定义文档中的节<br/>　　　<span>　　　　定义文档中的行内元素　　<br/>3.1.1<header>标签　　<header>标签定义文档的页眉，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，比如在header里面放置logo图片、搜索表单等。<br/>　　<br/>　　提示：在一个页面内并没有限制header的出现次数，也就是说可以在同一页面内不同的内容区块上分别加上一个header元素。<br/>　　<br/>　　在HTML5中，一个header元素至少可以包含一个heading元素（h1～h6）。<br/>3.1.2<main>标签　　<main>标签定义文档的主要内容。<main>标签中的内容对于文档来说应当是唯一的，不包含在文档中重复出现的内容，例如边栏、导航栏、版权信息、站点标志等。<br/>　　<br/>　　提示：在一个文档中不能出现一个以上的<main>标签。main元素不能是article、aside、footer、header或nav的子元素。<br/>3.1.3<nav>标签　　<nav>标签定义导航链接的部分，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域。<br/>3.1.4<article>标签　　<article>标签表示页面中的一块与上下文不相关的独立内容，比如一篇文章。这篇文章应有其自身的意义，应该有可能独立于站点的其他部分，例如论坛帖子、报纸文章、博客条目和用户评论等。<br/>3.1.5<section>标签　　<section>标签定义文档中的节（区段），例如章节、页眉、页脚或文档中的其他部分。<br/>3.1.6<aside>标签　　<aside>标签定义其所处内容之外的内容，这个内容应该与附近的内容相关，例如可用作文章的侧栏或边栏。<br/>3.1.7<footer>标签　　<footer>标签定义文档或节的页脚，footer元素应当含有其包含元素的信息。页脚通常包含文档的建立日期、作者、版权信息、使用条款链接和联系信息等。用户可以在一个文档中使用多个<footer>标签。<br/>3.1.8<details>标签和<summary>标签　　<details>标签用于描述文档或文档中某个部分的细节。details元素实际上是一种用于标识其内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型值的open属性，当open属性值为true时元素内部的子元素被展开显示，当open属性值为false时其内部的子元素被收缩起来不显示。open属性的默认值为false，当页面打开时其内部的子元素处于收缩状态。<br/>　　<summary>标签可以为details元素定义标题，标题是可见的，用户单击标题时会展开显示details元素的内容，再次单击标题时details元素会收缩起来不显示。summary元素从属于details元素。<br/>　　如果details元素内没有定义summary元素，浏览器会提供默认的文字显示，例如“详细信息”。<br/>　　<br/>　　提示：IE和Edge不支持<details>标签。<br/>3.1.9<div>标签　　HTML5中几乎所有的标签都是有具体语义的，例如<title>标签用于定义文档的标题。但<div>和<span>标签并没有具体标识这个元素到底是什么，需要用户在实际使用中根据元素的内容确定。<br/>　　<div>标签用来定义文档中的分区或节。<div>标签可以把文档分割为独立的、不同的部分，是一个容器标签，<div>的内容可以是任何HTML5元素。如果有多个<div>标签把文档分成多个部分，可以使用id或class属性来区分不同的<div>。<br/>　　div元素在显示时默认是一个块元素，块元素的宽度为100%，而且后面隐藏附带有换行符，块元素在页面显示时始终占据一行，这样块元素周围的元素不能与块元素显示在同一行上。例如下面的代码：　　<br/><div><h3>这是一个标题</h3><p>这是一个段落</p></div><span>一些文本</span><span>一些其他文本</span>　　<br/>　　其显示效果如图3.1所示。由于“<span>一些文本</span>”在<div>标签的后面，div是块元素，所以显示在下一行。<br/>3.1.10<span>标签　　<span>标签用来定义文档中一行的一部分，在显示时默认是一个行内元素，行内元素没有固定的宽度，根据span元素的内容决定。span元素的内容主要是文本。<br/>　　在图3.1所示的示例中，第2个<span>标签前面也是一个<span>标签，所以第2个<span>标签的内容紧接着前一个<span>标签的内容显示。<br/></p></div><div style="width:auto;height:auto;margin:0 0 10pt 0;"><img onload="if(this.width>750){this.height=this.height*(750.0/this.width); this.width = 750;}" src2="//uimgproxy.suning.cn/uimg1/sop/commodity/1ov8jvbp-pKKpzF1U7TanA.png"><p style="margin-top:5pt;text-indent:10pt;text-align:justify;font-size:18pt;color:#666;line-height:28pt;">本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识，对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解。内容翔实，结构合理，语言精炼，表达简明，实用性强，易于自学。</p></div></div> </div> </div> </div> </div> <div id="J-procon-comment" class="tabarea-content" style="display:none;"></div> <div id="J-procon-answer" class="tabarea-content" style="display:none;"></div> <div id="J-procon-sale" class="tabarea-content" style="display:none;"></div> </div> <div id="appraise" class="lazy-ajax mt10" data-type="function"><div class="area loading-holder"></div><a target="_blank" href="//review.suning.com/cmmdty_review/general-000000012435369406-0070172873-1-total.htm">查看全部评论></a> </div> <div id="appwd" class="lazy-ajax mt10" data-type="function"></div> <div id="appAdv" class="mt10"><a rel="nofollow" name="item_12435369406_mobileAd_01" href="//c.m.suning.com/newPacket_pc.html" target="_blank"><img src2="//image3.suning.cn//uimg/cms/img/167836138660343191.png" onerror="javascript:$('#appAdv').hide()"/></a></div> <div id="serviceArea" class="lazy-ajax area mt10"> <div class="area-head"><h3>售后保障</h3></div> <div class="after-market" id="afterService"> <div id="installService" class="lazy-ajax" data-type="function"></div> <div id="afterServicePic" class="lazy-ajax after-market-img-list" style="display: none"></div> <div id="djh-after-market-container" style="display: none"></div> <div id="snblank" style="display: none"></div> </div> </div> <div class="area history mt15" id="historyListDiv" sap-modid="14"> <div class="area-head"> <h3>最近浏览</h3> </div> <div class="lazy-ajax history-rec" id="J-historyList" data-type="function"> </div> </div> <div class="procon-like mt15 lazy-ajax" id="adDatasDiv" sap-modid="16" style="display: none;"> </div> <div class="area history mt15" id="historyRecDiv" sap-modid="08"> <div class="area-head"> <h3>猜你喜欢</h3> </div> <div class="lazy-ajax history-rec" id="J-historyRec" data-type="jsonp"> </div> </div> <script id="guessScriptContent" type="text/html"> {{if skus.length>5}} <a tabindex="-1" aria-hidden="true" class="btn-dir prev" href="javascript:void(0);"><span class="screen-count"><em class="cur-count">1</em>/<i class="total-count">3</i></span><i class="arr"></i></a> <a tabindex="-1" aria-hidden="true" class="btn-dir next" href="javascript:void(0);"><span class="screen-count"><em class="cur-count">1</em>/<i class="total-count">3</i></span><i class="arr"></i></a> {{/if}} <div class="scroll-box"> <ul> {{each skus as value i}} <li com-partinfo="{{value.vendorId}}-{{value.sugGoodsCode}}" com-name="{{value.sugGoodsName}}" com-price="{{value.price}}" com-check="false"> <a tabindex="-1" aria-hidden="true" name="{{value.eleName}}" sa-data="{{value.saData}}" title="{{value.sugGoodsName}}" target="_blank" href="{{value.eleHref}}"> <img alt="{{value.sugGoodsName}}" src="{{value.eleSrc}}"> </a> <p class="price"> <i>¥</i>{{value.price}} {{if value.coopSecType == "A4" && value.specialType && value.specialType != "" && value.specialType.indexOf("T0003") > -1}} <label class="com-has-border">苏宁服务</label> {{else if value.productType==1 || value.coopSecType == "A4"}} <label class="com-has-border">苏宁自营</label> {{/if}} <p class="title"> <a tabindex="-1" aria-hidden="true" name="{{value.eleName}}" sa-data="{{value.saData}}" id="{{value.eleId}}" target="_blank" href="{{value.eleHref}}">{{value.sugGoodsName}}</a> </p> <p class="p-huodong">{{if value.promotionInfo!="" }}<span>{{value.promotionInfo}}</span>{{/if}}</p> </li> {{/each}} </ul> </div> </script> <div class="pro-statement hide" id="proStatement"> </div> </div> </div> <div id="addCartPop" class="promtip-addcart hide"> <div class="promtip-addcart-title"> <i class="tipInfo4 mr5"></i> <span>该商品在当前城市正在进行</span> <label class="promtip-label">抢购</label> <span>促销</span> </div> <ul class="promtip-addcart-panel clearfix"> <li> <p>抢购价：<span class="price"><i>¥</i> <em id="qg_qgprice">38.00</em></span> </p> <a href="javascript:void(0);" id="qg_href" class="btn-view" target="_blank">查看抢购信息</a> </li> <li class="sep"></li> <li> <p>易购价：<span class="price"><i>¥</i> <em id="qg_promotionPrice">38.00</em></span> </p> <a href="javascript:void(0);" id="qg_promotion_href" class="btn-buy">以易购价购买</a> </li> </ul> <p class="promtip-addcart-memo">注：参加抢购将不再享受其他优惠活动</p> <a href="javascript:void(0)" class="close"></a> </div> <div id="J-identify-code" style="display: none;"> <div class="identify-code"> <p class="tips">亲，很抱歉，您购买的宝贝销售异常火爆，让小苏措手不及，请稍后再试~</p> <div class="code-input clearfix"> <dl> <dt class="l">验证码</dt> <dd class="l"> <p class="item-ide"><input id="validateCode" autocomplete="off" class="ui-text l" type="text" value="以下字符不区分大小写"><i id="imageVerifytip" class="tip-icon tip-ok-16 tip-ok l" style="display:none;"></i><em class="code-error l" style="display:none;">验证码错误</em></p> <p class="item-ide"><img onclick="fun_getVcode()" name="vcodeimg1" id="vcodeimg1" class="l" src="" alt=""><span class="change l">看不清楚？<a href="javascript:void(0);" onclick="fun_getVcode()">换一张</a></span></p> <p class="item-ide"><a class="lion-btn certain" href="javascript:void(0);" onclick="ajaxCheckVerifyCodeOrSubmit(true);return false;">确定</a><a class="lion-btn close" href="javascript:void(0);">关闭</a></p> </dd> </dl> </div> </div> </div> <div id="J-company-channel" style="display: none;"> <div class="company-channel"> <p class="tips">亲，大宗购物请点击<span><a href="//b.suning.com">企业用户渠道></a></span>小苏的服务会更贴心！</p> </div> </div> <div id="J-boom" style="display: none;"> <div class="company-channel"> <p class="tips">亲，很抱歉，您购买的宝贝销售<span>异常火爆</span>让小苏措手不及，请稍后再试~</p> </div> </div> <div class="pro-pop gray6 hide" id="proPop"> <div class="pop-up fix"> <a id="proPopCloseBtn" class="close-btn" href="javascript:void(0)" title="关闭">x</a> </div> <div class="pop-main pop-main-normal fix"> <em class="tipIcon"></em> <div class="msg"><strong>您已成功将商品加入收藏夹</strong> <p style="font-size:12px;">查看<a href="#">我的收藏夹</a> </p> </div> </div> <div class="pop-down"> <a id="proPopSubmit" class="pop-btn" href="javascript:;">确定</a> </div> </div> <div id="win_presell" class="hide"> <div class="presell-pay-failed"> <i></i> <p id="psellBookMessage">非常抱歉，您前期未参加预订活动，<br />无法支付尾款哦！</p> <p class="mt20"><a href="javascript:void(0);" class="btn-cancel close">关闭</a></p> </div> </div> <div id="dlg_error_prompt" class="hide"> <div class="d-error-prompt"> <div class="e-img"></div> <p class="d-message">抱歉，您暂无任性付资格</p> </div> </div> <!---super会员预约弹窗--> <div id="super-dialog-tell" class="hide"> <div class="orders-dialog-container"> <div class="orders-msg"> <span class="orders-common super-new-posi"></span> <div class="super-dialog-text"><span id="super-dialog-msg">此时为正式期SUPER会员专享抢购期，普通会员暂不可抢购</span></div> </div> <div class="btn-box"> <a href="javascript:;" name="item_12435369406_supertqqqx_click" id="dialogVipPriceClose" class="btn4 close"> <p>继续等待</p> <p>0小时0分</p> </a> <a href="javascript:;" name="item_12435369406_supertqqkt_click" id="dialogVipPriceLink" class="btn3"> <p>立即开通</p> <p>SUPER会员</p> </a> </div> </div> </div> <div id="orders-dialog-content" class="hide" sap-modid="18"> </div> <div class="lazy-ajax" id="pds-footer" data-type="function"> <div style="height:25px;"></div> </div> <script type="text/javascript" src="//res.suning.cn/project/crdnode/common/tingyun.js?v="></script> <script type="text/javascript" src="//res.suning.cn/project/crdnode/comps/seoComponents-mini.js?v="></script> <script type="text/javascript"> var isArray=function(obj){return Object.prototype.toString.call(obj)==='[object Array]';} var windowOnLoadEventQueue=[];var scriptOnLoadEventQueue=[];window.onload=function(){for(var i=0;i<windowOnLoadEventQueue.length;i++){windowOnLoadEventQueue[i]();}} function addOnLoad(func){windowOnLoadEventQueue=windowOnLoadEventQueue.concat(func);} var lazyScriptMap={};function lazyLoadScript(src,callback){if(!lazyScriptMap[src]){lazyScriptMap[src]=callback;var scriptNode=document.createElement("script");if('function'===typeof callback){scriptNode.onload=callback;scriptNode.onreadystatechange=function(){if("loaded"==scriptNode.readyState||"complete"==scriptNode.readyState){callback();}}}else if(isArray(callback)){var callbackSequence=function(){for(var i=0;i<callback.length;i++){(callback[i])();}};scriptNode.onload=callbackSequence;scriptNode.onreadystatechange=function(){if("loaded"==scriptNode.readyState||"complete"==scriptNode.readyState){callbackSequence();}}} scriptNode.type="text/javascript";scriptNode.src=src;var scriptContainer=document.getElementsByTagName("head")[0];scriptContainer.appendChild(scriptNode);}else{}} function lazyLoadScripts(srcs,callback){var srcNum=srcs.length;var loadingProgress=0;if(srcNum>0){for(var i=0;i<srcNum;i++){var currSrc=srcs[i];lazyLoadScript(currSrc,function(){loadingProgress++;if(srcNum==loadingProgress){if('function'===typeof callback){callback();}else if(isArray(callback)){for(var i=0;i<callback.length;i++){(callback[i])();}}}});}}} var isTimeout = false; var lazyLoadFunction = null; var lazyScriptLoaded = false; var lazyScriptTimeout = 2000; //默认的超时时间2秒，这个数字2是业务部或用户体验部门来提出要求。 //在懒加载方法中对事件响应后绑定 lazyloadBindingFuc=function() { $(".mycar, .myhelp, .myweb").bind({ mouseover: function() { addhover(this); }, mouseout: function() { delhover(this); } }); } lazyLoadFunction = function() { if(lazyScriptLoaded&&isTimeout) { //一旦已经执行过，并且是在timeout的情况下执行，则需要加载da.js lazyLoadScript( "//res.suning.cn/javascript/sn_da/da_opt.js?v=2024111823", function(){ lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024111823" );}); return; } lazyScriptLoaded =true;//flag置为true if (isTimeout) { lazyLoadScript("//res.suning.cn/javascript/ShoppingArea/V9/ECode.calendar.js?v=2024111823", function(){ lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024111823" );}); } else { lazyLoadScript("//res.suning.cn/javascript/ShoppingArea/V9/ECode.calendar.js?v=2024111823", function(){ lazyLoadScript("//res.suning.cn/javascript/sn_da/da_opt.js?v=2024111823", function(){ lazyLoadScript("//res.suning.cn/javascript/sn_da/saSiteDsp.js?v=2024111823" );} );} ); } } addOnLoad(lazyloadBindingFuc); addOnLoad(lazyLoadFunction); //对lazyload设置 超时机制 function checkLazyScriptTimeout(){ isTimeout = true; if(!lazyScriptLoaded){//检测lazy script是否已经加载 if(!!lazyLoadFunction){//检测下函数空间，以免servlet还没加载完全 lazyLoadFunction();// }else{ setTimeout(checkLazyScriptTimeout, 1000);//在servlet还没加载完全的情况下，每过1秒，重新检测一次 } } } setTimeout(checkLazyScriptTimeout, lazyScriptTimeout); /*eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 8;5(!8)8={};5(!8.K)8.K={};(4(){2 j=/^\\w*?.A.z$/,1f=9.P.2r,Q=(("10:"==9.P.Q)?"10://":"2l://"),14=16(),7="|",1e=P.T,1h=v(1x(1e));4 U(a){2 b=a.V?v(a.V):"V B",p=a.p?v(a.p):"p B",C=y 2i(),1m=(R(a,C),C)?v(C.2f("").1w(/\\s|\\|/2e,"")):"2d B",t=(t=9.S("2c"))?t.Y:"",1a=p+7+b+7+1m,J=(J=9.S("2b"))?J.Y:"",1g=Q+14+"/2a.25",N=1n(),O="O";1r(O,N,\'/\',"","");2 c=l("23"),Z=22 11=="2s"?11.13:"20 1Z 1X 13",17=N+7+c+7+1a+7+1h,L=a.T?a.T:\'\',M=(L?19(L):\'-\'),F=9.S("1W"),1c=(F?F.Y:""),1d=l(\'1S\').H(\'|\')[1],1y=l(\'1O\'),1j=l(\'1M\'),1l=l(\'1K\').H(\'|\')[0],1o=1g+"?"+"1J="+17+"&1I="+J+"&t="+t+"&1H="+Z+\'&1G=\'+M+\'&F=\'+1c+\'&1D=\'+1d+\'&1C=\'+1y+\'&M=\'+1l+\'&1z=\'+1j;1v(1o)}4 1n(){2 a=y X(),m=1u.21(1A*1u.1B()),1t=a.W().1E().1F(m);6 1t}4 l(a){2 b=9.1q.H("; ");1p(2 i=0;i<b.I;i++){2 c=b[i].H("=");5(c[0]==a)6 1L(c[1])}}4 1v(a){2 n="1N"+(y X()).W();2 i=1i[n]=y 1P();i.1Q=(i.1R=4(){1i[n]=G});i.1T=a+"&1U="+n;i=G}4 16(){5(j.1V(1f)){6"K.A.1b/8"}E{6"1Y.A.1b/8"}}4 15(){6 9.D}4 1r(a,b,c,d,e){2 f=a+"="+24(b);5(d!=""){2 g=y X();g.26(g.W()+d);f+=";27="+g.28()}5(c!=""){f+=";29="+c}2 h=15();5(h.u(".A.z")!=-1){f+=";D=.A.z"}E 5(h.u(".18.z")!=-1){f+=";D=.18.z"}E{f+=";D="+e}9.1q=f}4 19(r){2 a=\'-\';5(!q(r)){a=1s(r,\'2g\',\'&\')}6 a}4 1x(a){5(a.I>2h){a=a.1k(0,2j)}2k(a.u(7)!=-1){a=a.1w(7,"--")}6 a}4 R(n,a){5(n.12==3){a.2m(n.2n)}E 5(n.12==1){1p(2 m=n.2o;m!=G;m=m.2p){R(m,a)}}}4 v(s){6 s!=G?2q(s):""}4 1s(a,b,c){2 d="-",x;5(!q(a)&&!q(b)&&!q(c)){x=a.u(b);5(x>-1){2 e=a.u(c,x);5(e<0){e=a.I}d=a.1k(x+b.I+1,e)}}6 d}4 q(o){6(B==o||\'\'==o||\'-\'==o)}2 k=8.K;k.U=U})();',62,153,'||var||function|if|return|_tag|sa|document||||||||||||getCookieIndex||||id|IsEmpty|||_type|indexOf|_encode||idx|new|com|suning|undefined|_strings|domain|else|urlPattern|null|split|length|_errorCode|click|aHref|sid|oId|_snck|location|protocol|_getString|getElementById|href|sendDatasIndex|name|getTime|Date|value|_cityId|https|sn|nodeType|cityId|server|_getDomain|getServer|cDatas|cnsuning|GetSID|Datas|cn|urlPatternV|visitorID|_toUrl|hostName|clickUrl|_shortToUrl|window|memberID|substring|sessionID|_text|getOnlyIdIndex|url|for|cookie|_addCookie4Index|Pick|onlyId|Math|httpGifSendIndex|replace|_cutUrlToShort|loginUser|mid|100000|random|lu|vid|toString|concat|_sid|_cId|_snme|_snmk|_snmb|unescape|custno|log_|idsLoginUserIdLastTime|Image|onload|onerror|_snma|src|iId|test|URLPattern|get|clicksit|not|can|round|typeof|_snmp|escape|gif|setTime|expires|toGMTString|path|ajaxClick|errorCode|resourceType|text|ig|join|tid|301|Array|300|while|http|push|nodeValue|firstChild|nextSibling|encodeURIComponent|hostname|object'.split('|'),0,{}))*/ $(document).ready(function(){ if($("#anchorList li").length == 0){ $("#J-procon-desc").addClass("not-anchor"); $(".prod-detail-container").addClass('not-anchor'); } $("dl[name^=item_],img[name^=item_],span[name^=item_],a[name^=item_],p[name^=item_],div[name^=item_],i[name^=item_],li[name^=item_],input[name^=item_],a[name^=reviewitem_],input[name^=reviewitem_],p[name^=reviewitem_]").live("click",function(){ sa.click.sendDatasIndex(this); }); //分享附节点阻止了冒泡，另设分享 $('.share a[name^=item_],.share span[name^=item_]').on("click", function(){ sa.click.sendDatasIndex(this); }); // bd.init({ // 'token' : 'other' // }); var env = "prd"; if(sn.envName){ if(sn.envName == "PROD"){ env = "prd"; }else if(sn.envName == "SIT"){ env = "sit"; }else if(sn.envName == "XGPRE"){ env = "xgpre"; }else if(sn.envName == "PRE"){ env = "pre"; } } bd.init({ appCode : "OLSltniYhR1s2xr5", env : env }); _dfp.init({ appCode : "OLSltniYhR1s2xr5", env : env, error : function (e) { } }); }); //FourPage.initCluster(); CommonFourPage.autoPlayer(); FourPage.itemMainTab();//主tab切 iFourth.initDetailScroll();//详情锚点 //初始化横条dom iFourth.fillProconToolbar(); iFourth.init();//加载页面效果 FourPage.lazyElems(); FourPage.lazyFunction(); FourPage.commGroup()//同级目录 //非捐助加载推荐 if(!sn.donateFlag){ FourPage.Recommend();//推荐 } //展示举报 FourPage.showJubao(); initHistoryCookie(sn.partNumber,sn.vendorCode);//更新cookie if($("#kernelParmeter").length>0&&$.trim($("#kernelParmeter").find("ul").html())==""){$("#kernelParmeter").hide()} $("#cslpBox").html("").show(); iFourth.bindProServTooltip();//服务标签 $("img[src2]").Jlazyload({type: "image", placeholderClass: "err-product"}); //360度图片加载 if(sn.itemViewFlag){ iFourth.popTabFun(); } $('#hbModel-pj').on('click',function(){ $("#productCommTitle").click(); }); //在线客服 setFixBarOnline(); //DOM结束后塞值防止DOM没加载结束值没塞进去 $("li[rel=#J-procon-comment]").html('<a name="item_'+sn.ninePartNumber+'_tab_pingjia" href="javascript:void(0);">评价（'+sn.reviewTotal+'）</a>'); if(typeof gProduct == "undefined" || gProduct.gors != "0"){ $("#tabAddCart").show(); }else{ $("#tabAddCart").hide(); } if($("#callmeTile").length == 0){ $("#onlineTile").parent().hide(); } //相关品牌 Recommend.lazyRelGroup(); //页尾 Recommend.lazyFooter(); iFourth.judgeCanvas(); function parseQueryString(url) { var regUrl = /^[^\?]+\?([\w\W]+)$/; var regPara = /([^&=]+)=([\w\W]*?)(&|$|#)/g; var arrUrl = regUrl.exec(url); var ret = {}; if (arrUrl && arrUrl[1]) { var strPara = arrUrl[1]; var result; while ((result = regPara.exec(strPara)) != null) { ret[result[1]] = null != result[2]?result[2]:""; } } return ret; } window.doSeoComponents = function () { var reg = /^http(s)?:\/\/(.*?)\//; var referrer = document.referrer; var referrerHost = referrer && reg.exec(referrer); referrerHost = (referrerHost && Array.isArray(referrerHost)) ? referrerHost[2] : ''; var seoReferrerList = ",www.baidu.com,m.baidu.com,so.m.sm.cn,www.so.com,m.so.com,www.sogou.com,wap.sogou.com,cn.bing.com,cn.google.com,so.toutiao.com,m.toutiao.com,nativeapp.toutiao.com,"; if (null != referrerHost && '' != referrerHost && seoReferrerList.indexOf(','+referrerHost+',') != -1) { var categorys = {first:"502282",second:"502311",third:"502578"}; var coupons = new Array(); console.log(couponList); if (null != couponList && couponList.length > 0) { for (var i = 0; i < couponList.length; i++) { var actObj = couponList[i]; if (null != actObj.activityType && actObj.activityType != "7") { continue; } var obj = parseQueryString(actObj.activityLink); coupons.push({ actId: actObj.activityId, actKey: actObj.activitySecretKey, channel: "", cityId: sn.lesCityId, bonusTrigerId: obj.bonusTrigerId==null?"":obj.bonusTrigerId, mobileVisitWapFlag: "", versionNo: '', uuid: '', sourceId: "2001", salesPrice: actObj.couponValue, activityDescription: actObj.activityDesc, activityTypeId:actObj.activityId, couponType:actObj.couponType, couponTypeTag:actObj.couponShowType, memberAttLimitType:actObj.memberAttributeList }); } } var product = { cityCode:sn.lesCityId, prodNo:sn.partNumber, shopCode:sn.vendorCode, comeFrompage:"fourGoodpage", shopName:"君凤文轩图书专营店", classCode:sn.catenIds, brandId:"0001400CU", distCode:getAddrCode(), b2cGroupId:sn.categoryId, goods_price:sn.promotionPrice, goodsName:sn.itemDisplayName, productImage:sn.fristPic, sourceURL:"https://product.suning.com/0070172873/12435369406.html" }; seoComponents.init({ mode:"compSe", sourceChannel: "04", platform: "p", styles: {}, activityCode: "ACT0000012972", gameId: "GM0217", coupons: coupons, categorys: categorys, brand:"00014", product:product }); } }; </script> <script id="shoppingAllowanceDialog" type="text/html"> <div id="o2o-cjhb" sap-modid="23"> <div class="o2o-contain"> <div id="oto-bgg" class="oto-bgg" style='background: url("//image2.suning.cn/uimg/cms/img/154287473370364143.png")'> <p class="o2o-p1" style='background-image: url("//image2.suning.cn/uimg/cms/img/154510130790775531.png")'></p> {{if dialogMode == '5'}} <p class="o2o-p2">活动太火爆 稍后尝试</p> <br/> {{else}} <p class="o2o-p2"><a name="item_12435369406_gwjtmjhd_click" target="_blank" href="{{ruleUrl}}">{{bountyRulDescribe}} ></a></p> {{if startTimeStr && endTimeStr}} <p class="o2o-p3">{{startTimeStr}} 至 {{endTimeStr}}</p> {{/if}} {{/if}} <div id="o2oDynamic"> <div class={{if dialogMode == '1'}} "o2o-common o2o-avalible"> {{else if dialogMode == '4'}} "o2o-common o2o-success"> {{else if dialogMode == '5'}} "o2o-common o2o-avalible"> {{/if}} {{if dialogMode == '5'}} <div class="o2o-lkbg">刷新</div> {{else}} <div class="o2o-d-con"> {{if freeAllowanceObj }} <div class="o2o-d-y" sendCategory="free_allowance" sa-data="{'eletp':'','eleid':'140000630'}"> <span class="o2o-zydh">抢{{freeAllowanceObj.freeAmount}}元</span> <span class="o2o-zyxy">可领{{freeAllowanceObj.freeRemainCount}}次</span> </div> {{else}} {{each surplusQuota as quota}} <div class="{{if !point || point < quota.pointQuota}}o2o-d-n{{else}}o2o-d-y{{/if}}{{if dialogMode != '1'}} hide{{/if}}" {{if quota.sendCategory=="0"}}sa-data="{'eletp':'','eleid':'140000640'}"{{else if quota.sendCategory=="1"}}sa-data="{'eletp':'','eleid':'140000650'}"{{/if}} sendCategory="{{quota.sendCategory}}"> <span class="o2o-zydh">{{if quota.sendCategory=="1"}}抢{{quota.minAllowanceQuota}}-{{quota.maxAllowanceQuota}}元{{else if quota.sendCategory=="0"}}抢{{quota.allowanceQuota}}元{{/if}}</span> <span class="o2o-zyxy">{{if !point || point < quota.pointQuota}}云钻不足{{else}}需{{quota.pointQuota}}云钻{{/if}}</span> </div> {{/each}} {{/if}} </div> <div class="o2o-do-text{{if dialogMode != '4'}} hide{{/if}}"><i>恭喜，兑换成功(</i><i>5</i><i>s)</i></div> <div class="o2o-done{{if dialogMode != '4'}} hide{{/if}}">获得{{if dialogMode == '4'}}{{exchangeAllowanceQuota}}{{/if}}元购物补贴</div> {{/if}} </div> {{if point >= 0}} <div class="o2o-my-money"> <span>我的云钻 : </span> <i>{{point}}</i> </div> {{/if}} {{if bonusUseAmount >= 0 && shopAllowanceRedPacketLinkSwitch == '1'}} <div class="o2o-my-money"> <a href="//quan.suning.com/shoppingCoupon/shoppingCoupon_{{activityId}}.htm" target="_blank"><span>我的购物补贴 : </span> <i>¥ {{bonusUseAmount}}</i></a> </div> {{/if}} </div> </div> </div> </div> <!-- 风控验证 --> <div class="identity-pop-form" id="vasIdentityPopForm" style="display: none"> <div class="idty-container"> <div class="clearfix" id="vasSlideWords" style="display: none"> <div class="lose-img"></div> <div class="idty-prompt"> <p>活动太火爆，请滑动验证！</p> </div> </div> <div class="clearfix" id="vasImgWords" style="display: none"> <div class="lose-img"></div> <div class="idty-prompt"> <p>活动太火爆，请输入验证码验证！</p> </div> </div> <div class="idty-area" id="vasSlideCheck" style="display: none"> <div> <div style="width: 332px;height: 42px; text-align: center;background: #75C72B;" id="vasSlideArea"></div> </div> </div> <div class="idty-area" id="vasImgCheck" style="display: none"> <div class="identity-img "> <div class=" clearfix "> <div class="idty-input check-err check-correct" id="vasChenckInfo"> <input type="text" id="vasImgtext"> <i class="err-i" style="display: none"></i> <i class="correct-i" style="display: none"></i> </div> <img src="" alt="" class="idtycode-img"> <a href="javascript:;" class="idty-change" onclick="shopAllowance.fk.imageCheck.changeValidate()">换一张</a> </div> <div class="err-box" style="display: none" id="vasErrbox"></div> <a href="javascript:;" class="btn-idty" id="vasValidateButton">验证领取</a> </div> </div> <div id="vasSMSCheck" style="display: none"> <div class="page1 SMS_security"> <div class="info info-tel"> <p>手机号码:<span class="tel-num" id="vasSmsTel"></span></p> </div> <p class="info info-code"> <input type="tel" class="code" id="vasSmsCode" placeholder="请输入验证码"> <a class="code1" id="vasGetSmsCode" href="javascript:;">获取验证码</a> </p> <p class="error-msg" style="display: none" id="vasSmsErrbox">验证码错误</p> <div class="btn-box"> <a href="javascript:;" class="btn-idty" id="vasSMSButton">确定</a> <a href="javascript:;" class="btn2" id="vasSMSCancel">取消</a> </div> </div> </div> </div> </div> </script></body> </html>