common新增DNF弹窗

公共资源/src/DNFfloatingWindow/DNFFW.js

@@ -0,0 +1,49 @@
+(function () {
+    var dwCommonFooter = {
+        init: function () {
+            this.render();
+            var $dom = document.querySelector('.fw-arrow-wrap')
+            var dfwDom = document.querySelector('.DNF-floating-window')
+            $dom.onclick = function(){
+                var $right = document.querySelector('.fw-arrow-right')
+                if($right){
+                    dfwDom.style.right = '-290px'
+                    $dom.classList.add('fw-arrow-left')
+                    $dom.classList.remove('fw-arrow-right')
+                }else{
+                    dfwDom.style.right = '20px'
+                    $dom.classList.add('fw-arrow-right')
+                    $dom.classList.remove('fw-arrow-left')
+                }
+            }
+        },
+
+        loadStyleString: function (css) {
+            var style = document.createElement("style");
+            style.type = "text/css";
+            try {
+                style.appendChild(document.createTextNode(css));
+            } catch (ex) {
+                style.styleSheet.cssText = css;
+            }
+            var head = document.getElementsByTagName("head")[0];
+            head.appendChild(style);
+        },
+        render: function () {
+
+            var footCSS = __inline("./style.css");
+            this.loadStyleString(footCSS);
+
+            var linkTpl = __inline("./link.tmpl");
+            var footHTML = linkTpl({  });
+
+            var frag = document.createDocumentFragment();
+            var div = document.createElement('div');
+            div.innerHTML = footHTML;
+            frag.appendChild(div);
+            document.body.appendChild(frag);
+        },
+
+    }
+    dwCommonFooter.init();
+})()

公共资源/src/DNFfloatingWindow/link.tmpl

@@ -0,0 +1,21 @@
+<div class="DNF-floating-window">
+    <div class="fw-arrow-wrap fw-arrow-right"></div>
+    <div class="fw-content">
+        <div class="DNF-F-title">
+            <p class="text">《地下城与勇士》金秋新版</p>
+            <p class="text">多玩特供礼包</p>
+        </div>
+        <div class="gift-code">礼包码：<span class="code">SZI3VXZOD6B</span></div>
+        <div class="address">兑换地址：<a href="https://dnf.qq.com/cp/a20190312welfare/" target="_blank" class="text">https://dnf.qq.com/cp/a 20190312welfare/</a></div>
+        <div class='notice'>礼包内容：随机抽取以下道具其中一种</div>
+        <ul class="prop-wrapper">
+            <li class="prop-list">魔界抗疲劳秘药*1</li>
+            <li class="prop-list">厄伽勒变身药水礼盒*1</li>
+            <li class="prop-list">远古精灵的秘药*1</li>
+            <li class="prop-list">便携式锻造器*1</li>
+            <li class="prop-list">成长胶囊(20% Lv90~94)*1</li>
+            <li class="prop-list">精炼的时空石(10个)礼盒*1</li>
+            <li class="prop-list">异形结晶(50个)礼盒*1</li>
+            <li class="prop-list">苍穹碎片(20个)礼盒*1</li>
+        </ul>
+    </div>

公共资源/src/DNFfloatingWindow/style.css

@@ -0,0 +1,165 @@
+.DNF-floating-window{
+    background:url(./img/f-bg.png?__inline) no-repeat center center;
+    width:290px;
+    height:570px;
+    position: fixed;
+    right:20px;
+    top:0;
+    bottom:0;
+    margin:auto;
+    box-sizing: border-box;
+    line-height: 24px;
+    z-index:10000;
+    transition:0.5s all;
+}
+.fw-content{
+	transition:0.5s all;
+	padding: 0 20px;
+}
+
+.DNF-F-title{
+	padding-top:26px;
+	color:#e94646;
+	text-align: center;
+	
+}
+.DNF-F-title .text{
+	font-size:20px;
+	padding-top:8px;
+}
+.gift-code{
+	font-size:14px;
+	color:#AEAEAE;
+	margin-top:17px;
+}
+.code{
+	display:inline-block;
+	width:120px;
+	height:28px;
+	background:#4c4c4c;
+	line-height: 28px;
+	text-align: center;
+}
+.address{
+	color:#AEAEAE;
+	margin-top:5px;
+  
+}
+.address .text{
+	font-size:14px;
+	color:#4a81ff;
+}
+.notice{
+	font-size:14px;
+	color:#b5b5b5;
+	margin-top:10px;
+}
+.prop-wrapper{
+	margin-top:6px;
+	
+}
+.prop-list{
+	font-size:14px;
+	color:#FFB159;
+	line-height: 40px;
+	
+}
+
+.prop-list:nth-child(1)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/1.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(2)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/2.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(3)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/3.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(4)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/4.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(5)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/5.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(6)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/6.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(7)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/7.png?__inline) no-repeat center / 100% ;
+}
+.prop-list:nth-child(8)::before{
+    content:'';
+    display: inline-block;
+    vertical-align: middle;
+    width:28px;
+    height:28px;
+    line-height: 28px;
+    margin-right:10px;
+    background: url(./img/8.png?__inline) no-repeat center / 100% ;
+}
+.fw-arrow-wrap{
+	width:21px;
+	height:53px;
+	position: absolute;
+	top:0;
+	bottom:0;
+	margin:auto;
+	left:-20px;
+	cursor: pointer;
+}
+.fw-arrow-right{
+	background:url(./img/arrow-right.png?__inline) no-repeat center/100%;
+}
+
+.fw-arrow-left{
+	background:url(./img/arrow-left.png?__inline) no-repeat center/100%;
+
+}