追求观影体验,买了个头显
模拟20米远眺巨幕式观感,无蓝光OLED 护眼(广告声称),想用来看书,没有看书APP但可上网,写了个基于vue的看书页面,可换书翻页,服务器上备txt格式的书,一页显示800字,可换字体,字颜色 背景颜色,目前感觉效果尚可,做个记录留存
<html>
<head>
<meta charset="utf-8">
<title>看书页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<script src="https://lib.baomitu.com/zepto/1.1.6/zepto.js"></script>
<script src="https://lib.baomitu.com/vue/2.5.16/vue.js"></script>
<script src="https://lib.baomitu.com/vue-router/3.4.3/vue-router.js"></script>
<script src="https://lib.baomitu.com/vuex/3.5.1/vuex.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/weui.css"/>
<link rel="stylesheet" href="css/weuix.css"/>
</head>
<body>
<div id="idFirst">
<div class="weui-footer weui-footer_fixed-bottom">
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[ 600, 800, 1000 ]"
layout="total, sizes, prev, pager, next, jumper"
:total="pageNum">
</el-pagination>
</div>
<el-select size="small" v-model="fontsz" placeholder="字体大小" style="width:10%">
<el-option v-for="item in fontszSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
<el-select size="small" v-model="fontcl" placeholder="字体颜色" style="width:10%">
<el-option v-for="item in fontclSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
<el-select size="small" v-model="lineht" placeholder="行距" style="width:10%">
<el-option v-for="item in linehtSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
<el-select size="small" v-model="backcl" placeholder="背景颜色" style="width:15%">
<el-option v-for="item in bgcolorSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
<el-select size="small" v-model="bookName"
@change="changeBook($event)"
placeholder="书列表" style="width:40%">
<el-option v-for="item in bookLstSl" :key="item.value"
:label="item.label"
:value="item.value" >
</el-option>
</el-select>
</div>
<div :style="bgclstr">
<span :class="classes" :style="stlstr" >
{{alldt}}
</span>
</div>
</div>
</body>
<script>
const main=new Vue( {
el: '#idFirst',
data: {
alldt: "私人定制看书程序 chao",
bookName: "",
pageNum:0,
pageVarNum:800,//每页字数多少
currentPage:1 ,
bookLstSl: [ ],
varNumSl: [
{ value: '800', label: '字数 800' },
{ value: '1000', label: '字数 1000' },
{ value: '1500', label: '字数 1500' },
{ value: '2000', label: '字数 2000' },
],
bgcolorSl: [
{ value: '#D1EEEE', label: '背景 蓝1' },
{ value: '#BFEFFF', label: '背景 蓝2' },
{ value: '#B4CDCD', label: '背景 蓝3' },
{ value: '#9BCD9B', label: '背景 绿1' },
{ value: '#71C671', label: '背景 绿2' },
{ value: '#9AFF9A', label: '背景 绿3' },
{ value: '#c2e9cf', label: '背景 绿4' },
{ value: '#CDC9C9', label: '背景 灰1' },
{ value: '#D1D1D1', label: '背景 灰2' },
{ value: '#A6A6A6', label: '背景 灰3' },
{ value: '#FFFFFF', label: '背景 白色' },
{ value: '#000000', label: '背景 黑色' },
],
linehtSl: [
{ value: '0', label: '行距0' },
{ value: '1', label: '行距1' },
{ value: '2', label: '行距2' },
{ value: '3', label: '行距3' },
{ value: '4', label: '行距4' }
],
fontclSl: [
{ value: 'f-black', label: '黑色' },
{ value: 'f-white', label: '白色' },
{ value: 'f-blue', label: '蓝色' }
],
fontszSl: [
{ value: 'f11', label: '11号' },
{ value: 'f12', label: '12号' },
{ value: 'f13', label: '13号' },
{ value: 'f14', label: '14号' },
{ value: 'f15', label: '15号' },
{ value: 'f16', label: '16号' },
{ value: 'f31', label: '31号' },
{ value: 'f32', label: '32号' },
{ value: 'f35', label: '35号' },
{ value: 'f40', label: '40号' },
{ value: 'f45', label: '45号' },
{ value: 'f50', label: '50号' },
{ value: 'f55', label: '55号' }
],
fontsz:"f12",
lineht:"2",
pageIdx:1,
fontcl:"f-black",
backcl:"#D1EEEE",
classstr:"f-green bg-blue",
},
methods: {
changeBook(val) {
var vm=this;
var jsonp = {filename:val};
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookSize',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
console.log(message);
vm.$data.pageNum=message.data;
}, error: function (message) {
console.log(message);
}
});
this.freshPg();
},
freshPg() {
var vm=this;
vm.$data.alldt= " _ "+ vm.$data.bookName+" _ 载入中 ... ";
var jsonp = { currentPage: vm.$data.currentPage, pageVarNum: vm.$data.pageVarNum, filename: vm.$data.bookName };
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookCtt',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
vm.$data.alldt=message.data;
}, error: function (message) {
console.log(message);
}
});
},
handleSizeChange(val) {
var vm=this;
vm.$data.pageVarNum=val;
this.freshPg();
},
handleCurrentChange(val) {
var vm=this;
vm.$data.currentPage=val;
this.freshPg();
}
},
created: function (){
var vm=this;
$.getJSON('/CI/index.php/conFileManage/uptBkList',function(result){
vm.$data.bookLstSl= result.data;
if(result.data.length != 0)
vm.$data.bookName=result.data[0].value;
});
/*
var vm=this;
var jsonp = {currentPage:1,pageVarNum:20};
$.ajax({
type: "POST",
url: '../CI/index.php/conFileManage/getBookCtt',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(jsonp),
dataType: "json",
success: function (message) {
console.log(message);
}, error: function (message) {
console.log(message);
}
});
*/
},
computed:{
classes(){
return this.fontsz+' '+this.fontcl+' ';
},
stlstr(){
return 'line-height:'+this.lineht+'em;' ;
},
bgclstr(){
return 'background-color:'+this.backcl+';' ;
},
}, watch: {
}
});
</script>
</html>