image.png
image.png
点击切换其他会场是否展示，页面只需要引入自定义组件，传入参数设置哪个会场高亮。这样对应的8个会场就不用相同的样式、结构、以及js 都写一遍了。
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>【奢品年货节】会场 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script>
(function(doc, win) {
var htmlFont = function() {
var docEl = doc.documentElement,
l = docEl.clientWidth,
f;
f = l / 15;
l > 750 ? docEl.style.fontSize = 50 + "px" : docEl.style.fontSize = f + "px"
};
htmlFont();
win.addEventListener("resize", htmlFont, false)
})(document, window)
</script>
<script defer src="main.js"></script>
</head>
<body>
<!-- 每个会场引入main.js 并且页面加入自定义标签即可 -->
<custom-square l="2"></custom-square>
<!-- l对应第几个会场高亮 -->
</body>
</html>
let that;
let fixBtn = true;
class Square extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' });
const div = document.createElement('div');
const style = document.createElement('style');
shadow.appendChild(style);
shadow.appendChild(div);
}
connectedCallback() {
updateStyle(this);
that = this;
}
}
function updateStyle(elem) {
const shadow = elem.shadowRoot;
const childNodes = Array.from(shadow.childNodes);
console.log(childNodes)
const hhh = fixBtn ? 0 : '6.4rem';
fixBtn = !fixBtn;
const index = elem.getAttribute('l');
childNodes.forEach(childNode => {
if (childNode.nodeName === 'STYLE') {
tem = childNode;
childNode.textContent = `
.bottom-fixed{width:15rem;height:${hhh};overflow:hidden;position:fixed;bottom:1.68rem;left:50%;margin-left:-7.5rem;background-color:#fff;background-size:100%;z-index:1002}
.bottom-fixed a{float:left;width:4.46rem;height:1.58rem;line-height:1.6rem;font-size:.48rem;color:#6b6b6b;border-bottom:1px solid #e7e7e7;position:relative}
.bb-fixed{width:15rem;height:1.78rem;background:url(https://pic21.zhen.com/appimg/A/nianhuo/bannerChoiec2.png) no-repeat;background-size:15rem 1.78rem;position:fixed;bottom:-.1rem;left:50%;z-index:1002;margin-left:-7.5rem}
.bb-fixed a{float:left;height:1.78rem;text-indent:-9999em}
.bb-fixed a:first-child{width:7.5rem}
.bb-fixed a:nth-child(2){width:7.5rem}
.bb-fixed .cur,.bb-fixed a:first-child:hover{background-position:0 0;background-size:15rem 1.78rem}
.bb-fixed .hhc{background-position:-7.5rem 0;background-size:15rem 1.78rem}
#zzc{position:fixed;top:0;left:0;opacity:.6;background-color:#000;z-index:1000;width:0;height:0;overflow:hidden}
.bottom-fixed a{float:left;width:4.46rem;height:1.58rem;line-height:1.6rem;font-size:.48rem;color:#6b6b6b;border-bottom:1px solid #e7e7e7;position:relative}
.bottom-fixed a::after{content:"";display:inline-block;width:.56rem;height:.56rem;overflow:hidden;position:absolute;left:2.3rem;top:.5rem}
.bottom-fixed span:nth-of-type(2n+1) a{padding-left:3.02rem;background-position:2.32rem center;background-size:.56rem;background-repeat:no-repeat}
.bottom-fixed span:nth-of-type(2n) a{padding-left:3rem;border-left:1px solid #e7e7e7}
.bottom-fixed .a:active,.bottom-fixed .hasChoice a{color:#bb9a6a}
.bottom-fixed .hasChoice1::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -3.36rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice2::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -2.8rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice3::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -4.48rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice4::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -3.92rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice5::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -2.24rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice6::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -.56rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice7::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) 0 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice8::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -1.68rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice9::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -1.12rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice1::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -5.04rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice2::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -5.6rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice3::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -6.16rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice4::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -6.72rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice5::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -7.28rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice6::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -7.84rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice7::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -8.4rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice8::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -8.96rem 0/10.08rem .56rem no-repeat}
.bottom-fixed .hasChoice .hasChoice9::after{background:url(https://pic1.zhen.com/appimg/A/nianhuo/sprite.png) -9.52rem 0/10.08rem .56rem no-repeat}
`;
} else if (childNode.nodeName === 'DIV') {
childNode.innerHTML = `
<div class="bottom-fixed">
<span class="${index == 0?'hasChoice': ''}"><a class="hasChoice1" href="https://map.baidu.com">品牌分会场</a></span>
<span class="${index == 1?'hasChoice': ''}"><a class="hasChoice2" href="https://www.360.cn/">服装分会场</a></span>
<span class="${index == 2?'hasChoice': ''}"><a class="hasChoice3" href="https://www.sina.com.cn/">鞋履分会场</a></span>
<span class="${index == 3?'hasChoice': ''}"><a class="hasChoice4" href="https://www.1688.com/">箱包分会场</a></span>
<span class="${index == 4?'hasChoice': ''}"><a class="hasChoice5" href="https://www.taobao.com/">配饰分会场</a></span>
<span class="${index == 5?'hasChoice': ''}"><a class="hasChoice6" href="https://www.jindong.com/">品质生活分会场</a></span>
<span class="${index == 6?'hasChoice': ''}"><a class="hasChoice7" href="https://aiqiyi.html">精品店分会场</a></span>
<span class="${index == 7?'hasChoice': ''}"><a class="hasChoice8" href="https://youku.html">全球购分会场</a></span>
<span class="needDel"><a class="hasChoice9" href="https://qq.html">预售分会场</a></span>
<span class="needDel"><a></a></span>
</div>
<div class="bb-fixed">
<a href="https://www.baidu.com" class="cur">主会场</a>
<a href="javascript:void(0)" onclick="updateStyle(that)">分会场</a>
</div>
`
}
});
}
customElements.define('custom-square', Square);
网友评论