|
|
@@ -0,0 +1,237 @@
|
|
|
+<template>
|
|
|
+ <view class="redBook" :style="{ height: set.screenHeight,background:set.background, }">
|
|
|
+ <lz-red-book ref="lzRedBook" :bookText="content_text" :scrollDirection="set.scrollDirection" :bookStyle="{ background:set.background,'font-size':set.fontSize+'px','line-height':set.lineHeight+'px','color':set.fontColor}"
|
|
|
+ @clickCenter="clickCenter"
|
|
|
+ @scrollEnd="scrollEnd"
|
|
|
+ @scrollStart="scrollStart"
|
|
|
+ ></lz-red-book>
|
|
|
+
|
|
|
+ <!-- 遮罩层上部分 -->
|
|
|
+ <view class="mask-top" :style="{top:mask.showMask?0:-100+'upx','background':mask.background}">
|
|
|
+ <view style="letter-spacing: 10px; line-height: 20px;">usahfufasijdiajij</view>
|
|
|
+ </view>
|
|
|
+ <!-- 遮罩层下部分 -->
|
|
|
+ <view class="mask-bottom" :style="{bottom:mask.showMask?0:-300+'upx','background':mask.background}">
|
|
|
+ <view class="v1">
|
|
|
+ <view class="slider-warp">
|
|
|
+ 字体：
|
|
|
+ <slider class="slider" block-size="20" activeColor="#FFCC33" :step="2" backgroundColor="#000000" block-color="#8A6DE9" :value="set.fontSize" @change="sliderChange($event,'fontSize')" min="18" max="30"/>
|
|
|
+ </view>
|
|
|
+ <view class="slider-warp">
|
|
|
+ 间距：
|
|
|
+ <slider class="slider" block-size="20" activeColor="#FFCC33" :step="2" backgroundColor="#000000" block-color="#8A6DE9" :value="set.lineHeight" @change="sliderChange($event,'padding')" min="26" max="40"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="v1">
|
|
|
+ 滚动方向：
|
|
|
+ <uni-tag text="左右" :inverted="set.scrollDirection=='topBottom' ? true : false" type="primary" @click="changeScrollDirection('leftRight')" size="small"/>
|
|
|
+ <uni-tag text="上下" :inverted="set.scrollDirection=='leftRight' ? true : false" type="primary" @click="changeScrollDirection('topBottom')" size="small" style="color: #333333; margin-left: 10px;"/>
|
|
|
+ </view>
|
|
|
+ <view class="v2">
|
|
|
+ <view v-for="(item,index) in arr" :key="index" :class="mask.backgroundIndex==index?'color-warp':''" class="v1-color" @click="changeBackground(index)">
|
|
|
+ <uni-icons type="smallcircle-filled" size="26" :color="item.color" ></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="v3">
|
|
|
+ <view class="v3-item">
|
|
|
+ <uni-icons type="settings" size="20" ></uni-icons>目录
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ mask:{//遮罩层
|
|
|
+ showMask:false,
|
|
|
+ background:'#fff',
|
|
|
+ backgroundIndex:0,
|
|
|
+ },
|
|
|
+ set: {
|
|
|
+ background:'#f0f0f0',//页面背景颜色
|
|
|
+ fontSize:18,//字体大小
|
|
|
+ lineHeight:33,//字体间距
|
|
|
+ fontColor:'#000',//字体颜色
|
|
|
+ scrollDirection:'leftRight',//滚动方向leftRight左右，上下topBottom
|
|
|
+ },
|
|
|
+ arr:[
|
|
|
+ {
|
|
|
+ background:'#f0f0f0',//背景色
|
|
|
+ maskBg:'#fff',//遮罩层色
|
|
|
+ fontColor:'#524d51',//字体颜色
|
|
|
+ color:'#f5f5f5',//选择圆圈颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background:'#d8c9aa',//背景色
|
|
|
+ maskBg:'#f3e4c3',//遮罩层色
|
|
|
+ fontColor:'#3c2506',//字体颜色
|
|
|
+ color:'#e0d1aa',//选择圆圈颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background:'#daba94',//背景色
|
|
|
+ maskBg:'#f8dcb4',//遮罩层色
|
|
|
+ fontColor:'#3c2506',//字体颜色
|
|
|
+ color:'#d8b784',//选择圆圈颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background:'#cfb793',//背景色
|
|
|
+ maskBg:'#f8dcb4',//遮罩层色
|
|
|
+ fontColor:'#674923',//字体颜色
|
|
|
+ color:'#d6b781',//选择圆圈颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background:'#aac9aa',//背景色
|
|
|
+ maskBg:'#cdeccd',//遮罩层色
|
|
|
+ fontColor:'#2c1e1e',//字体颜色
|
|
|
+ color:'#abcaab',//选择圆圈颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background:'#333b3d',//背景色
|
|
|
+ maskBg:'#313439',//遮罩层色
|
|
|
+ fontColor:'#7e8894',//字体颜色
|
|
|
+ color:'#626a75',//选择圆圈颜色
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //正文
|
|
|
+ content_text:
|
|
|
+ `第一章 陨落的天才<br> “斗之力，三段！”<br><br>
|
|
|
+ 望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字，少年面无表情，唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之中，
|
|
|
+ 带来一阵阵钻心的疼痛…<br><br> “萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位中年男子，看了一眼碑上所显示出来的信息，
|
|
|
+ 语气漠然的将之公布了出来…<br><br> 中年男子话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。<br><br>
|
|
|
+ “三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”<br><br> “哎，这废物真是把家族的脸都给丢光了。
|
|
|
+ ”<br><br> “要不是族长是他的父亲，这种废物，早就被驱赶出家族，任其自生自灭了，哪还有机会待在家族中白吃白喝。”<br><br>
|
|
|
+ “唉，昔年那名闻乌坦城的天才少年，如今怎么落魄成这般模样了啊？”<br><br> “谁知道呢，或许做了什么亏心事，
|
|
|
+ 惹得神灵降怒了吧…”<br><br> 周围传来的不屑嘲笑以及惋惜轻叹，落在那如木桩待在原地的少年耳中，恍如一根根利刺狠狠的扎在心脏一般，
|
|
|
+ 让得少年呼吸微微急促。<br><br> 少年缓缓抬起头来，露出一张有些清秀的稚嫩脸庞，漆黑的眸子木然的在周围那些嘲讽的同龄人身上扫过，
|
|
|
+ 少年嘴角的自嘲，似乎变得更加苦涩了。<br><br> “这些人，都如此刻薄势力吗？或许是因为三年前他们曾经在自己面前露出过最谦卑的笑容
|
|
|
+ ，所以，如今想要讨还回去吧…”苦涩的一笑，萧炎落寞的转身，安静的回到了队伍的最后一排，孤单的身影，与周围的世界，有些格格不入。<br><br>
|
|
|
+ “下一个，萧媚！”<br><br> 听着测验人的喊声，一名少女快的人群中跑出，少女刚刚出场，附近的议论声便是小了许多，一双双略微火
|
|
|
+ 热的目光，牢牢的锁定着少女的脸颊…<br><br> 少女年龄不过十四左右，虽然并算不上绝色，不过那张稚气未脱的小脸，却是蕴含着淡淡的妩媚
|
|
|
+ ，清纯与妩媚，矛盾的集合，让得她成功的成为了全场瞩目的焦点…<br><br> 少女快步上前，小手轻车熟路的触摸着漆黑的魔石碑，然后缓缓闭
|
|
|
+ 上眼睛…<br><br> 在少女闭眼片刻之后，漆黑的魔石碑之上再次亮起了光芒…<br><br> “斗之气：七段！”<br>
|
|
|
+ <br> “萧媚，斗之气：七段！级别:高级！”<br><br> “耶！”听着测验员所喊出的成绩，少女脸颊扬起了得意的笑容
|
|
|
+ …<br><br> “啧啧，七段斗之气，真了不起，按这进度，恐怕顶多只需要三年时间，她就能称为一名真正的斗者了吧…”<br><br> &n
|
|
|
+ bsp; “不愧是家族中种子级别的人物啊…”<br><br> 听着人群中传来的一阵阵羡慕声，少女脸颊上的笑容更是多了几分，虚荣心，这是很多
|
|
|
+ 女孩都无法抗拒的诱惑…<br><br> 与平日里的几个姐妹互相笑谈着，萧媚的视线，忽然的透过周围的人群，停在了人群外的那一道孤单身影上…<br>
|
|
|
+ <br> 皱眉思虑了瞬间，萧媚还是打消了过去的念头，现在的两人，已经不在同一个阶层之上，以萧炎最近几年的表现，成年后，顶多只能作为家族中
|
|
|
+ 的下层人员，而天赋优秀的她，则将会成为家族重点培养的强者，前途可以说是不可限量。<br><br> “唉…”莫名的轻叹了一口气，萧媚脑中忽然浮现
|
|
|
+ 出三年前那意气风的少年，四岁练气，十岁拥有九段斗之气，十一岁突破十段斗之气，成功凝聚斗之气旋，一跃成为家族百年之内最年轻的斗者！<br><br> &n
|
|
|
+ bsp;当初的少年，自信而且潜力无可估量，不知让得多少少女对其春心荡漾，当然，这也包括以前的萧媚。<br><br> 然而天才的道路，貌似总是曲折的
|
|
|
+ ，三年之前，这名声望达到巅峰的天才少年，却是突兀的接受到了有生以来最残酷的打击，不仅辛辛苦苦修炼十数载方才凝聚的斗之气旋，一夜之间，化为乌有，而且体内的斗之气
|
|
|
+ ，也是随着时间的流逝，变得诡异的越来越少。<br><br> 斗之气消失的直接结果，便是导致其实力不断的后退。<br><br> &nb
|
|
|
+ sp;从天才的神坛，一夜跌落到了连普通人都不如的地步，这种打击，让得少年从此失魂落魄，天才之名，也是逐渐的被不屑与嘲讽所替代。<br><br>
|
|
|
+ 站的越高，摔得越狠，这次的跌落，或许就再也没有爬起的机会。<br><br> “下一个，萧薰儿！”<br><br> 喧闹的人群中
|
|
|
+ ，测试员的声音，再次响了起来。<br><br> 随着这有些清雅的名字响起，人群忽然的安静了下来，所有的视线，豁然转移。<br><br>  
|
|
|
+ ; 在众人视线汇聚之处，一位身着紫色衣裙的少女，正淡雅的站立，平静的稚嫩俏脸，并未因为众人的注目而改变分毫。<br><br> 少女清冷淡然的气质
|
|
|
+ ，犹如清莲初绽，小小年纪，却已初具脱俗气质，难以想象，日后若是长大，少女将会如何的倾国倾城…<br><br> 这名紫裙少女，论起美貌与气质来，比
|
|
|
+ 先前的萧媚，无疑还要更胜上几分，也难怪在场的众人都是这般动作。<br><br> 莲步微移，名为萧薰儿的少女行到魔石碑之前，小手伸出，镶着黑
|
|
|
+ 金丝的紫袖滑落而下，露出一截雪白娇嫩的皓腕，然后轻触着石碑…<br><br> 微微沉静，石碑之上，刺眼的光芒再次绽放。<br><br>  
|
|
|
+ ; “斗之气：九段！级别：高级！”<br><br> 望着石碑之上的字体，场中陷入了一阵寂静。<br><br> “…
|
|
|
+ 竟然到九段了，真是恐怖！家族中年轻一辈的第一人，恐怕非薰儿小姐莫属了。”寂静过后，周围的少年，都是不由自主的咽了一口唾沫，眼神充满敬畏…<br><br>  
|
|
|
+ ; 斗之气，每位斗者的必经之路，初阶斗之气分一至十段，当体内斗之气到达十段之时，便能凝聚斗之气旋，成为一名受人尊重的斗者！<br><br>
|
|
|
+ 人群中，萧媚皱着浅眉盯着石碑前的紫裙少女，脸颊上闪过一抹嫉妒…<br><br> 望着石碑上的信息，一旁的中年测验员漠然的脸庞上
|
|
|
+ 竟然也是罕见的露出了一丝笑意，对着少女略微恭声道：“薰儿小姐，半年之后，你应该便能凝聚斗气之旋，如果你成功的话，那么以十四岁年龄成为一名真正的斗者，你是萧家百
|
|
|
+ 年内的第二人！”<br><br> 是的，第二人，那位第一人，便是褪去了天才光环的萧炎。<br><br> “谢谢。”少女微微点
|
|
|
+ 了点头，平淡的小脸并未因为他的夸奖而出现喜悦，安静的回转过身，然后在众人炽热的注目中，缓缓的行到了人群最后面的那颓废少年面前…<br><br> &
|
|
|
+ nbsp;“萧炎哥哥。”在经过少年身旁时，少女顿下了脚步，对着萧炎恭敬的弯了弯腰，美丽的俏脸上，居然露出了让周围少女为之嫉妒的清雅笑容。<br><br> &nbs
|
|
|
+ p; “我现在还有资格让你怎么叫么?”望着面前这颗已经成长为家族中最璀璨的明珠，萧炎苦涩的道，她是在自己落魄后，极为少数还对自己依旧保持着尊敬的人。<br><br>
|
|
|
+ “萧炎哥哥，以前你曾经与薰儿说过，要能放下，才能拿起，提放自如，是自在人！”萧薰儿微笑着柔声道，略微稚嫩的嗓音，却是暖人心肺。<br>
|
|
|
+ <br> “呵呵，自在人？我也只会说而已，你看我现在的模样，象自在人吗？而且…这世界，本来就不属于我。”萧炎自嘲的一笑，意兴阑珊的道。<br
|
|
|
+ ><br> 面对着萧炎的颓废，萧薰儿纤细的眉毛微微皱了皱，认真的道：“萧炎哥哥，虽然并不知道你究竟是怎么回事，不过，薰儿相信，你会重新站起
|
|
|
+ 来，取回属于你的荣耀与尊严…”话到此处，微顿了顿，少女白皙的俏脸，头一次露出淡淡的绯红：“当年的萧炎哥哥，的确很吸引人…”<br><br> “
|
|
|
+ 呵呵…”面对着少女毫不掩饰的坦率话语，少年尴尬的笑了一声，可却未再说什么，人不风流枉少年，可现在的他，实在没这资格与心情，落寞的回转过身，对着广场之外缓缓行去
|
|
|
+ …<br><br> 站在原地望着少年那恍如与世隔绝的孤独背影，萧薰儿踌躇了一会，然后在身后一干嫉妒的狼嚎声中，快步追了上去，与少年并肩而行…`
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ plus.navigator.setFullscreen(true);//隐藏状态栏
|
|
|
+ //#endif
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ //点击中间
|
|
|
+ clickCenter(){
|
|
|
+ let that=this
|
|
|
+ that.mask.showMask=!that.mask.showMask
|
|
|
+ },
|
|
|
+ //滚动到最后一页
|
|
|
+ scrollEnd(){
|
|
|
+ uni.showToast({
|
|
|
+ title: '最后一页了'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //滚动到第一页
|
|
|
+ scrollStart(){
|
|
|
+ uni.showToast({
|
|
|
+ title: '第一页'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //滑块设置字体间距或大小
|
|
|
+ sliderChange(e,type) {
|
|
|
+ let that=this
|
|
|
+ that.$refs.lzRedBook.init()
|
|
|
+ if(type=='fontSize'){
|
|
|
+ console.log('value 发生变化：' + e.detail.value)
|
|
|
+ that.set.fontSize=e.detail.value
|
|
|
+ }else{
|
|
|
+ that.set.lineHeight=e.detail.value
|
|
|
+ }
|
|
|
+ //重新计算页面页数
|
|
|
+ uni.$emit('lz-red-book-change')
|
|
|
+ },
|
|
|
+ //修改滚动方向
|
|
|
+ changeScrollDirection(text){
|
|
|
+ let that=this
|
|
|
+ that.set.scrollDirection=text
|
|
|
+ //重新计算页面页数
|
|
|
+ uni.$emit('lz-red-book-change','changeScrollDirection')
|
|
|
+ },
|
|
|
+ //修改背景颜色
|
|
|
+ changeBackground(index){
|
|
|
+ let that=this
|
|
|
+ that.mask.backgroundIndex=index
|
|
|
+ that.set.background=that.arr[index].background//背景颜色
|
|
|
+ that.set.fontColor=that.arr[index].fontColor//字体颜色
|
|
|
+ that.mask.background=that.arr[index].maskBg//遮罩背景色
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.redBook {
|
|
|
+ width: 100%;height: 100%;
|
|
|
+ .mask-top{
|
|
|
+ position: fixed;height: 40upx;transition: all 0.2s;width: 100%;z-index: 1000;margin: auto;border-radius:0 0 4px 4px ;
|
|
|
+ }
|
|
|
+ .mask-bottom{
|
|
|
+ position: fixed;height: 300upx;transition: all 0.2s;width: 100%;z-index: 1000;margin: auto;border-radius: 10px 10px 0 0;
|
|
|
+ padding: 10px;box-sizing: border-box;
|
|
|
+ .v1{
|
|
|
+ width: 100%;display: flex;align-items: center;
|
|
|
+ .slider-warp{
|
|
|
+ display: flex;flex: 1;align-items: center;
|
|
|
+ .slider{flex: 1;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .v2{
|
|
|
+ display: flex;width: 100%;justify-content: space-around;margin-top: 10px;
|
|
|
+ .color-warp{
|
|
|
+ border: 1px solid #6d583b;border-radius: 50%;width: 26px;height: 26px;display: flex;justify-content: center;align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .v3{
|
|
|
+ margin-top: 10px;
|
|
|
+ .v3-item{
|
|
|
+ width: 100px;height: 30px;background: #f7f7f7;display: flex;justify-content: center;align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
