image.png
<template>
<div>
<ol class="titt" ref="control_Bar">
<a :class="activeIndex == index?'cur':''" v-for="(item, index) in list" :key="index" @click="handleToggle(index)">{{item.tit}}</a>
</ol>
<ul class="conttt">
<li ref='panelRef' v-for="(item, index) in list" :key="index">
<h3>{{item.tit}}</h3>
<p>{{item.cont}}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
list: [{
tit: '七星鲁王宫',
cont: '七星鲁王宫50年前由长沙土夫子（盗墓贼）出土的战国帛书，记载了一个奇特战国古墓的位置，50年后，其中一个土夫七星鲁王宫七星鲁王宫子的孙子在他的笔记中发现这个秘密，纠集了一批经验丰富的盗墓贼前去寻宝，谁也没有想到，这个古墓竟然有着这么多诡异的事情：七星疑棺，青眼狐尸，九头蛇柏。发现了这神秘的墓主人，并找到真正的棺椁。故事悬念重重，情节跌荡。 [6] 秦岭神树'
}, {
tit: '秦岭神树',
cont: '朋友老痒出狱，给刚从西礁海底墓归来、在家赋闲没有几日的主人公——“我”带来一个惊人的消息：诡异的六角铃铛，古老的厍族，巨大的青铜树，遥远的秦岭腹地……“我”不由得跃跃欲试。 接下来，“我”和老痒二人孤身深入到神秘莫测的秦岭探险。但前方等待着他们的又是什么？——各种诡异事物接踵而来，哲罗鲑，黄泉瀑布，尸阵，麒麟竭，烛九阴…… 这棵巨大的青铜树究竟是做什么用的？是一棵许愿树，还是一个少数民族的图腾？他们到底能不能找到真正的答案？ 探险的过程充满了人性的挣扎和努力，可怖的人物与可憎的面孔交织出现。最后，是一个让人瞠目结舌，超乎所有想象都无法猜透，却又似乎是真实可信的结局……'
}, {
tit: '云顶天宫',
cont: '十年前，顺子的父亲带领一批神秘人进入茫茫的大雪山秦岭神树秦岭神树，闯入凶险莫名的地宫墓室，发现了数不胜数的金银财宝，但他们非但不能带着这些财宝离开，反而被困此地，几乎全部死于非命。十年后，“我们”和顺子一行人再次踏足云顶天宫，这更是一次直逼死亡的惊险大穿越：昆仑胎、墙串子、百足神龙等前所未见的怪异事物接替出现，藏尸阁、排道、火山口、门殿、殉葬渠等诡异恐怖之所带来超强的感官刺激……云顶天宫是一代奇人汪藏海为万奴王修建的陵墓。上次出现在海底墓穴中的土夫子几乎齐聚云顶天宫，两地之间有着奇怪的联系。三叔总是在最令人感到意外的时机出现。三叔的出现就意味着谜团的最后答案，但这些谜团意然又要追溯到五十年前，而真相远远不止这些。一切的现象表明，更加恐怖、惊悚的场景已经到来……'
}, {
tit: '蛇沼鬼城',
cont: '从云顶天宫顺利脱出之后，吴邪和苏醒后的三叔进行了一次长谈。吴邪了解到在二十年前海底古墓里发生的三叔没有透露的隐情。关于解连环的神秘死亡以及背后牵涉到战国帛书和老长沙的恩怨，也理出了端倪。就在吴邪认为事情接近真相的时候，两盘来自张起灵的录像带，又让事情重新进入了重重迷雾之中……寻着录像带中支离破碎的线索，吴邪只身一人来到了陌生的青海……顺着前人留下的线索，吴邪发现了考古队最后的去向。为了了解事情的真相，吴邪混入了阿宁前往柴达木盐沼的探险队……'
}, {
tit: '谜海归巢',
cont: '深入西王母的蛇沼鬼城之后，吴邪一行经过三天三夜极其紧张的搜索，终于在隐藏于密林中的神庙附近找到了进入西王母宫的入口。在入口的泥潭处，他发现三叔的队伍几乎全部离奇死去，但他并没找到三叔的尸体。 他们继续涉险，进入西王母城庞大的地下体系，终于遇到文锦，得悉西沙的秘密，三叔鲜为人知的真正过去也浮出水面。事情并没有完结，路途的终极点就在前方，西王母古城承载一个诡异的文明。浮雕上的巨蛇是否真的存在过。那个如影随形的“它”，究竟来自何方。他们最终看到了一个颠覆一切的秘密。'
}, {
tit: '阴山古楼',
cont: '在十万大山的腹地，在广西巴乃，为了帮助闷油瓶找回记忆，吴邪与胖子再入险境，搜集西沙事件残存的蛛丝马迹。死而复生的考古队队员，充满奇怪气味的铁块，离奇暴毙的当事人……经由盘马老爹的口述，一切更加扑朔迷离。而噩梦只是刚刚开始，他们几入魔湖，发现了位于水下数百米的瑶族古寨，发现了隐藏其中的汉式大院，更发现了比古墓更令人胆寒的所在！惊竦的事件远不止此：铁人葬、雷王像、石中影、活人祭……他们九死一生，它的意图如此不可捉摸……这个被水淹没的千年瑶寨到底隐藏了怎样的大阴谋？随着麒麟文身与古寨的呼应，闷油瓶的身世前所未有地明朗起来……'
}, {
tit: '邛笼石影',
cont: '回到北京，我们和老九门后人的约见正撞上拍卖会，由于误“点天灯”，我们不得不携拍卖的玉玺逃走。然而，随后交换到的消息，却令双方都大吃一惊!神秘失踪的考古队，闷油瓶非同寻常的身份，连续多年收到的录像带……所有的秘密，最后竟都指向同一处！为了得到这一切的答案，吴邪和闷油瓶兵分两路，前往四川和广西。 样式雷上的张家古楼究竟承载 过往。幕后操纵的势力难道另有其人。折损了老九门上代全部精英的墓穴吴邪将如何面对？嗜血的毛发、移动的铁衣、诡异的浮雕……谜题终结之前的最后一步，一切问题的答案，就在这道石壁后！'
}],
activeIndex: 0
}
},
methods: {
handleTabFix () {
// 元素上边到视窗上边的距离 getBoundingClientRect().top
for (let index = 0; index < this.$refs.panelRef.length; index++) {
if (this.$refs.panelRef[index].getBoundingClientRect().top < 0) {
this.activeIndex = index
}
}
},
// 点击导航栏，滚动条移动到内容所对应的位置
handleToggle (index) {
this.activeIndex = index
// 网页被卷去的高 offsetTop
window.scrollTo(0, this.$refs.panelRef[index].offsetTop + 1)
}
},
mounted () {
window.addEventListener('scroll', this.handleTabFix)
},
beforeDestroy () {
window.removeEventListener('scroll', this.handleTabFix)
}
}
</script>
<style>
ol.titt {
display: flex;
justify-content: space-around;
align-items: center;
background-color: skyblue;
height: 100px;
margin: 0;
padding: 0;
font-size: 32px;
position: fixed;
width: 100%;
top: 0;
}
ol.titt a {
background-color: slateblue;
cursor: pointer;
}
ol.titt a.cur {
background-color: salmon;
}
ul.conttt li {
padding: 220px 550px;
}
.conttt li:nth-child(2n) {
background-color: salmon;
}
.header {
height: 100px;
background-color: seagreen;
font-size: 40px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
</style>
