create webpage project

This commit is contained in:
dengtongyu committed 2017-11-18 10:58:39 +08:00
commit c659f795dd
94 files changed
+9040

No files matched your search

BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+3
View File
@@ -0,0 +1,3 @@
//加载弹窗组件(不用可去掉)
var dialog = require('../../script/extends/phone/dialog');
+5
View File
@@ -0,0 +1,5 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../style/common/phone/_common.styl';
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+6
View File
@@ -0,0 +1,6 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
+9
View File
@@ -0,0 +1,9 @@
@charset "UTF-8";
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+46
View File
@@ -0,0 +1,46 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
<video id="video" width="200" height="150" autoplay=""></video>
</div>
{% endblock %}
{% block footer %}
<script type="text/javascript">
var vedio = document.querySelector('#video');
//constraints 参数是一个包含了video 和 audio两个成员的MediaStreamConstraints
//对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。
var constraints = {
audio: false,
video: {
frameRate: { ideal: 10,max: 15,min: 8 }
}
}
//获取设备(摄像头或者麦克风)
navigator.mediaDevices.getUserMedia({ audio: false, video: true })
.then(function(mediaStream){
console.log(mediaStream);
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function(e) {
video.play();
console.log(e);
};
})
.catch(function(error){
console.log(error);
});
</script>
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+6
View File
@@ -0,0 +1,6 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
+9
View File
@@ -0,0 +1,9 @@
@charset "UTF-8";
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<link rel="dns-prefetch" href="http://file.do.yy.com/">
<link rel="dns-prefetch" href="http://dl2.vip.yystatic.com/">
<link rel="dns-prefetch" href="http://res.udb.duowan.com/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
{#<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>#}
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "",
"description":"Tony",
"keywords":"Tony"
}
+95
View File
@@ -0,0 +1,95 @@
{% extends 'base.tpl' %}
{% block title %}音乐盒{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div id="index-main" class="index-main">
<div class="middle-box">
<audio id="music" v-bind:src="musicUrl" ref="music" style="display:none">你的浏览器不支持audio标签。</audio>
<div class="music-main">
<div class="bg-block" v-bind:style="backgroundImage"></div>
<div class="needle-plus"></div>
<div class="disc">
<div class="singer-img rotate" v-bind:class="[musicStatus?'rot-play':'rot-paused']"><img v-bind:src="singerImg"></div>
<div class="disc-mask"></div>
</div>
<div class="song-lyrics">
<div id="lyrics-scroll" class="lyrics-scroll" ref="lyricsScroll">
<p v-for="row in lyrics">{{row[1]}}</p>
</div>
</div>
<div class="search-btn">
<button v-on:touchend="showSeachPop">搜索</button>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="bom-bar-bg">
<div class="music-msg">
<div class="left-box">
<a class="title-page" href="javascript:;">
<img v-bind:src="singerImg">
</a>
</div>
<div class="right-box">
<div class="progress-bar" id="progress-bar" v-on:touchstart="clickDown" v-on:touchmove="clickMove" v-on:touchend="clickUp" ref="progressBarDom">
<div class="load-prog" style="width:{{loadProg}}%"></div>
<div class="prog play-prog" id="play-prog" v-bind:style="'width:'+playProg+'%'" ref="playProg">
<span class="pos"></span>
</div>
</div>
<div class="text-msg">
<div class="music-name ell">{{songName}}-{{singer}}</div>
<div class="music-time">
<span class="ct">{{currentTime}}</span>/<span>{{allTime}}</span>
</div>
</div>
</div>
</div>
<div class="controller">
<a class="prev cutover icon" href="javascript:;" v-on:touchend="prev"></a>
<a class="play ctrl-btn icon" href="javascript:;" v-bind:class="[musicStatus?'pause':'play']" v-on:touchend="play"></a>
<a class="next cutover icon" href="javascript:;" v-on:touchend="next"></a>
</div>
</div>
</div>
<div class="search-pop" v-if="showPop">
<div class="pop-bg"></div>
<div class="pop-main">
<div class="search-bar">
<input class="search-input" type="text" v-model="searchContent">
<button class="search-button" v-on:touchend="searchRequest">搜索</button>
</div>
<div class="search-list">
<div class="search-list-scroll">
<div class="search-list-item" v-for="item in searchResult">
<p class="ell">{{item.FileName | htmlEncode}}</p>
<button v-bind:hash="item.FileHash" v-on:touchend="playSong">播放</button>
</div>
</div>
</div>
<div class="placeholder">
<button v-on:touchend="closePop">关 闭</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+382
View File
@@ -0,0 +1,382 @@
//加载弹窗组件(不用可去掉)
//var dialog=require('../../res/script/extends/dialog');
var vueResource = require('../../res/script/lib/vue-resource');
Vue.use(vueResource);
var music;//audio
var timer,movable=false,ProgX,curData={},playList=[],curTime=0;
var ps,pcur,ph;
var defaultImg = 'data:image/png;base64,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 Line truncated
var indexMain=new Vue({
el:'#index-main',
data:{
musicStatus:false,
musicUrl:'',
songName:'未知',
singer:'未知',
singerImg:defaultImg,
coverImg:defaultImg,
lyrics:[],
loadProg:100,
playProg:0,
currentTime:'00:00',
allTime:'00:00',
canPlay:false,
searchContent:'',
searchResult:[],
showPop:false
},
computed:{
backgroundImage:function(){
return 'background-image:url('+(this.coverImg?this.coverImg:this.singerImg)+')';
}
},
filters:{
htmlEncode:function(str){
var temp = document.createElement("div");
temp.innerHTML = str;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
},
mounted:function () {
music = this.$refs.music;
ProgX = getElementLeft(this.$refs.playProg);
},
methods:{
//播放按钮
play:function(){
if (this.canPlay) {
if (this.musicStatus) {
pauseMusic(this);
}else{
playMusic(this);
}
}
},
//下一首
next:function() {
if (true) {
playNext(this);
}
},
//上一首
prev:function(){
if (true) {
playPrev(this);
}
},
//播放进度
playProgress:function() {
timer = playTimer(this);
},
//点击进度条
clickPlayProg:function(e){
//setPlayProg(getMousePos(e).x-ProgX,true);
},
//拖动进度条-鼠标按下
clickDown:function(e){
movable=true;
curTime=setPlayProg(getMousePos(e).x-ProgX,this.$refs.progressBarDom);
},
//拖动进度条-鼠标移动
clickMove:function(e){
if(movable) curTime=setPlayProg(getMousePos(e).x-ProgX,this.$refs.progressBarDom);
},
//拖动进度条-鼠标弹起
clickUp:function(e){
movable=false;
music.currentTime=curTime;
},
showSeachPop:function(e){
this.showPop = true;
},
searchRequest:function(e){
//console.log(this.searchContent)
getSongList(this.searchContent);
},
playSong:function(e){
//console.log(e.target);
//console.log(e.target.getAttribute('hash'));
var hash = e.target.getAttribute('hash');
getPlaySong(hash);
this.showPop = false;
},
closePop:function(e){
this.showPop = false;
}
}
});
//getPlayList();
//播放计时器
function playTimer(vue) {
return setInterval(function(){
if(vue.musicStatus&&!movable) {
vue.playProg=currentTime()/timeAll()*100
vue.currentTime=conversionTime(currentTime());
vue.allTime=conversionTime(timeAll());
//当歌曲播放完毕后
//if(music.ended){
//清除定时器,进度条归零,播放下一首
// clearInterval(timer);
// vue.playProg=0;
// vue.musicStatus=false;
//}
}
},1000);
}
//播放
function playMusic(vue) {
music.play();
vue.currentTime=conversionTime(currentTime());
vue.playProgress();
vue.musicStatus=true;
}
//暂停
function pauseMusic(vue) {
music.pause();
clearInterval(timer);
vue.musicStatus=false;
}
//播放下一首
function playNext(vue) {
if (curData.p>=playList.length-1) setCurMusic(0,vue);
else setCurMusic(curData.p+1,vue);
}
//播放上一首
function playPrev(vue) {
if (curData.p==0) setCurMusic(playList.length-1,vue);
else setCurMusic(curData.p-1,vue);
}
//设置进度条
function setPlayProg(pos,progressBar) {
//progressBar = document.querySelector('#progress-bar');
pos=pos>progressBar.offsetWidth?progressBar.offsetWidth:pos;
var ratio=pos/progressBar.offsetWidth;
indexMain.playProg=ratio*100;
return ratio*timeAll();
}
//设置播放曲目
function setCurMusic(p,vue) {
curData.p=p;
curData.msg=playList[p];
music.src=curData.msg.url;
vue.musicUrl=music.src;
vue.songName=curData.msg.name;
vue.singer=curData.msg.singer;
vue.singerImg=curData.msg.photo;
vue.coverImg=curData.msg.cover;
vue.lyrics=curData.msg.lyrics;
canPlayMeta(music,function(){
playMusic(vue);
});
playMusic(vue);
canPlayEnded(music,function(){
playNext(vue);
});
var lyricsScroll = vue.$refs.lyricsScroll;
music.ontimeupdate = function(e) {
//遍历所有歌词,看哪句歌词的时间与当然时间吻合
var indexArr = [];
for (var i = 0; i < curData.msg.lyrics.length; i++) {
/*是否匹配当前播放的时间*/
if (this.currentTime > curData.msg.lyrics[i][0]) {
indexArr.push(i);
};
};
if(indexArr.length > 0) {
var index = indexArr[indexArr.length - 1];
var moveIndex = (index-2>0)?index-2:0;
ps = lyricsScroll.querySelectorAll('p');
pcur = ps[index];
ph = pcur.clientHeight;
for (var j = 0; j < ps.length; j++) {
ps[j].removeAttribute('class');
};
pcur.className = 'cur';
lyricsScroll.style.transform = 'translateY('+(-moveIndex*ph)+'px)';
}
};
}
//将剩余秒数转化为标准格式
function conversionTime(time){
var surplusMinite,
surplusSecond,
cTime;
//将剩余秒数转化为分钟
surplusMinite = Math.floor((time / 60) % 60);
//将剩余秒数转化为秒钟
surplusSecond = Math.floor(time % 60);
if(surplusMinite < 10){
surplusMinite = '0' + surplusMinite;
}
if(surplusSecond < 10){
surplusSecond = '0' + surplusSecond;
}
cTime = surplusMinite + ':' + surplusSecond;
return cTime;
}
//获取歌曲总时间
function timeAll(){
if(music.currentTime != 0){
return music.duration;
}else{
return 0;
}
}
//获取歌曲当前播放时间
function currentTime(){
return music.currentTime;
}
//获取节点偏移量
function getElementLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current!==null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
//获取鼠标位置
function getMousePos(event) {
var e = event.targetTouches[0];
var x = e.pageX;
var y = e.pageY;
return { 'x': x, 'y': y };
}
//媒体文件元数据加载完成
function loadedMetaData(audio,cb) {
audio.onloadedmetadata=function(data){
if (cb) cb(data);
}
}
//媒体文件可以播放
function canPlayMeta(audio,cb) {
audio.oncanplay=function(data){
indexMain.canPlay=true;
if (cb) cb(data);
}
}
//媒体文件播放结束
function canPlayEnded(audio,cb) {
audio.onended=function(data){
clearInterval(timer);
indexMain.musicStatus=false;
indexMain.playProg=0;
if (cb) cb(data);
}
}
//getPlaySong('4AD039C240CB1C9B9A922FB886A37188');
function getSongList(keyword) {
var url = 'http://songsearch.kugou.com/song_search_v2?keyword='+keyword+'&page=1&pagesize=30&userid=-1&clientver=&platform=WebFilter&tag=em&filter=2&iscorrection=1&privilege_filter=0&_='+Date.now();
Vue.http.jsonp(url, {
params:{
}
}).then(function(json){
var result = json.json();
//console.log(result);
if (result) {
if(result.status == 1 && result.data.lists.length > 0) {
indexMain.searchResult = result.data.lists;
}
}else{
}
}, function(){
});
}
function getPlaySong(hash) {
Vue.http.get('/data/songMsg?hash='+hash, {
params:{
}
}).then(function(json){
var json = json.json();
if (json) {
if(json.result) {
var songMsg = {
url:json.data.play_url,
name:json.data.song_name,
singer:json.data.author_name,
photo:json.data.img,
cover:json.data.img,
lyrics:parseLyric(json.data.lyrics)
}
playList.push(songMsg);
setCurMusic(playList.length-1,indexMain);
}
}else{
//dialog.showMsg(lotData.desc);
}
}, function(){
//contentBox.loading=false;
//dialog.showMsg('你的网络好像不给力,请重试!');
});
}
function parseLyric(text) {
//将文本分隔成一行一行,存入数组
var lines = text.split('\n'),
//用于匹配时间的正则表达式,匹配的结果类似[xx:xx.xx]
pattern = /\[\d{2}:\d{2}.\d{2}\]/g,
//保存最终结果的数组
result = [];
//去掉不含时间的行
while (!pattern.test(lines[0])) {
lines = lines.slice(1);
};
//上面用'\n'生成生成数组时,结果中最后一个为空元素,这里将去掉
lines[lines.length - 1].length === 0 && lines.pop();
lines.forEach(function(v /*数组元素值*/ , i /*元素索引*/ , a /*数组本身*/ ) {
//提取出时间[xx:xx.xx]
var time = v.match(pattern),
//提取歌词
value = v.replace(pattern, '');
//因为一行里面可能有多个时间,所以time有可能是[xx:xx.xx][xx:xx.xx][xx:xx.xx]的形式,需要进一步分隔
time.forEach(function(v1, i1, a1) {
//去掉时间里的中括号得到xx:xx.xx
var t = v1.slice(1, -1).split(':');
//将结果压入最终数组
result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
});
});
//最后将结果数组中的元素按时间大小排序,以便保存之后正常显示歌词
result.sort(function(a, b) {
return a[0] - b[0];
});
return result;
}
+467
View File
@@ -0,0 +1,467 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../res/style/common/base.styl';
/*加载弹窗样式 不用可以去掉*/
$norm=750;
@import '../../res/style/common/dialog-pop.styl';
html,body,.content-box,.index-main {
height: 100%;
}
.index-main {
//min-width: 690px;
}
$pos='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAYCAYAAAD+vg1LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMXSURBVEhL3ZTdS9NhFMftTS9CZE3BF6IXEIKoi7oLxIheILrYRaDuKoi6VNhVIvpf1FWxIBSDEG+C6kJZIIIgilCQLQqdL3vfz23OuX57Op/H5/dza2ldd+A7Dud8v9/n7DnPVvffxBGDY4LjgnpBgwE5NXoO768B6agAYcPS0tLVbDb7tFQqLdu2XQSSf6FGD47hojnwAMf0hN/v91iW9bxcLtvqgKAnBwQDgUAzGqOtMXdM630+n7dQKIQQ23ZZ7ezsqny+oLLZbQ1yavQI4X5Eg9Z4VJnrSQWNyWTy5Z6gqLa28ocCDiGaIFrjgZcOTuCeTk5MTHTLPdr5/I6yrNw/AS4atHgYLz01Hyzh1NraWrBY3FWZTNZFOp5S4cGAWrh8Ti1cOqtzapUcNGjxMF7amGfDSR25XO47xFRqy8Xyk4AKdTSp962NGuRfRwarOGjQ4mG88NSjNwnOF+XoZDIjd7aP6c529U4MKxGSWiUnlcrI1MVdPIwXnnqbbPVCLrddSiTSKh7fx9szLTXG1Co5iURGXkx+Gw/jhae+kxbBxVgsuQopFku5CN7srjF+cedGFWdPE/+Bh/HCc994fn5+kq+2uZlwMfZqVD3rvqbenG7WIH89Nl7FQbO4uDiJh/HSxu5V9Pf3P7asrA15YyOuEYlsqtHRcTU0NKxBTs3pw0UzMDDwCA/jpa/CXZ6ga25u7gMTrK/H5QnFDgUcuGjQGg93ee5zE1zxer2+cPjbJ5aIOBKJ/hH04ITD4c9o0BoP97m5PxBBp6DL4/H0zszMTKfTVjkaTcpk+weQy5IVvdnZ2VBbW5sfjdFW/UD4YHROahWwgOuC+z09PcNTU1PTq6uRqBj9lAmLKyuRDWp9fX0jcAwXDVo88NLGhPsnJGgXQGSKe4JewQPBQwNyavTgwOUKav6ECE6gwDYhcDpfjXtDfFtw1+CWqdGDAxcNWjzcaZ1wzDmVr8R9MQmb5hkxGSCnRg8OXGfSGlMnHHPuiSUg4vnwNnn4gJwaPThwDzWtDEiAZ4OQr4kJIKdGz+H9FnV1vwCJAvW00y66NwAAAABJRU5ErkJggg==';
$disc='data:image/png;base64,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 truncated
$play1='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAPMSURBVFhH5ZhPSFRRFMYNQfEfCDIxQkKL2eVGhcC0RQQuGmnTqhbuooUrN6LQQG0kRGvjZja2tIWthEKJQEhkiNCsGKGBWQyBGBYWgsSond+bc3nPcd579+m4qQ8O8953zvnOmXvvu3fe1PwLaBC7KTYilhZ77bE55fARQ+y5oUNsJB6PvxkeHv40Pz//bXNz89fu7m7xj4JrOHzEEEuOWDsC1UK92IPOzs53FKLwkSWIJYdcNFTrTGiPxWJz6XS6YBo5ODg4FCzL7UP5vCZUXKxOLQ6nvmVihXMaQwMtNEvS0ZHo7u5+xRQgqo3MiiXUHwpiyTGNoYWmuKw1DDoGBgY+bG1tOUIimBPhq+qLDHLRQAtNtIW2Hqn6vr6+FyxQBERsWSymvlMDDbTQRJsaQlutqSEzTSKwIB91yp8ZaKmmM31CDZU8/mhn8ZGg09SifNWAppk+agnlP3W9vb2PWYCYIGzN8MQ8Emtz7iIAbVOHmkqfQBN7Bp3v7Oy8VM4X+Xz+98rKynfdY5KSdqHksQM1qEVNuW0qsR709PTcYr/Q0Ql9LBEDLNDR0dGPQk2JXXScFqAGtahJbaVdTExMPKdAoVDIKxUIpxsPTjNa1CKX2kq5WFpa+oxzdXX1mVKBILYcZaMVus9QizxqK+XCPOrZbPaGUoEg1g+ZTOanjtZtufUdLWoRr1vAcXg2QqtNkNggoJdKpb5IKKNVEdQysUq5YHE5SkdHjUoFQmNDsbGx8VVTTkDcjcRQWykXpiG5tNpXiLWBjMKCplRCGzEVGzJTlkwmrysVCGKDQJFisXhfLn3XELWIrThl5hEcGxt7qlQgiPWDjAqH6GUN9QW1iK+41eRyuUWcMzMzi0oFgthy2IyKF9Qij9pKudjf37+Dk0dWbkP3EGK9YK3s7e1dUrcNOqhFLrWVcyGCLXzDsAPPwOlCYEZFaWuYg5x8ait9HGUHXuB5JmL8PIk6KgYJq4NcCjgHHjY4OPhWqPN4r2pA29ShpvKVIUHTdM7Pi9bW1idC1ZY8VUEtmmhTg1rK+0PiGiVwnQROcG2qGiPVgBaa2gw1rE4FM3Xbpil9n4r86uJBAg1PM9uhU1UOSegyTTHE/f3974UeF4vyokfsOLmeaaKZrpI7InSknOmTz0PPazEn+F2xK2KcfawzjGs4fFPEkkOuaqxHHplyiEC9CE2zX5jG1tbWfkxOTuZ54eMPhebm5gzGNRw+Ykwj5KKBlsqeHXwzsVnTmA2IJYdclak+RLxF7B6FmAKxbUZCjWumhSaIqfp73f+Ompq/dtpZOtG4hdkAAAAASUVORK5CYII=';
$play2='data:image/png;base64,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';
$zt1='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAOvSURBVFhH7ZhPSFRRGMUFUfEfCDIws3A3u9yoEJi2iMBFumsRtXDbQgjcKbRpIyFaGzezsWUtbBUUSgRCIkOEQoEuhFkMgRgW1maIdPp+b85lxum9N+/mtIkOfLw35557zue7d96bZ8u/gE6r61azVjmrV3UFxxgatH8NA1az6XT69czMzIe1tbVP+/v7305OTn7+EDiHYwwNWuZYZTBoFjqs7g4ODr4liOByQqBlDnPxkNeFkEmlUk9zuVzRNXJ6enpm2LSP9+14xai0VbsqDaexTbTGBY3hgReeFWt/ZIeHh1+yBJiqkVWrrMYbAi1zXGN44WlDiT0cBiYmJt4fHh4GRmZ4YMaXNeYN5uKBF554G534SnWMjY09Y4NiYGabVimN/THwwAtPvMkwOtGemnbLZAYv7NAu/sLAS57B8hk1XRmJRobNxwQtU6/4MGTa2tpucax8DBDGnQOebvnIMip66UZHRx+wASlD7J5hcy4uLha0SQOEcWHA2+WQKfo3dHPPoPPj4+Pn4iJhm7OEtlAolEWFclEgAy2Z9rG7wtZgZGTkBvcLXZ2GX0vMHESFclEggywyyRZdxcLCwhOMisViQVQsglRBlFdDgCy0ZIuqYmNj4yOD29vbj0XFAq2DKO+GyEJLtqgq3Fd9b2/vmqhYoHUQ5d0QWWh1CziPmhthopsgWgdR3g2RhZZsUVWwuQKncrlLVCykDSDKuyGTdaElW1QVriE77a8w8UDrIMq7IUM/2tCG3JJNTk5eFRULtA6ivBsiC23okrmv4Nzc3CNRsUDrIMq7IbLQht5qDg4O1hlcWVlZFxULtA6ivBsiCy3ZoqoolUo3Gczn81/tY8PfKmgdRPk2NEAWWrLFVWFfwV42V6MHnkOQKojyasg9yMkkW/R51D3wYp9nZhb8hOAoKpSLQDbRg9w98Kipqak3RkW+V6G1usdRVCgXgk68XU4DbfBXLtO5/YT43tfX99Co1spIU9CKJ95kkCU+GqbrMuEuE7a2tj6rqWa8gXbihaeaISPRU8Et3ZFrSu9TDX8jxSCLR00zRw2Xqh42Ycg1xSUeHx9/Z/S8VeLXFwPaeebWLBPNDFWGPaErFSyfHc9qXouXrG5bXbLi2cc+oziHY2zJvX4zVx673lemHmbQYUbL3C9cYzs7O1/4Mc8LH/9Q6OnpyVOcwzGGxjXCXDzwku3FwV9mteoaSwK0zGGubJoPM++1ukMQS2B1xJVQcc6y0ASauPe6//gDtLT8AigyOthzlTKtAAAAAElFTkSuQmCC';
$zt2='data:image/png;base64,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';
$xyg1='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAK5SURBVEhL5ZY7i1pRFIUdgmmFDA6msBCsg1ikkJBmWgshRTCEIUVCupHpDBgzlVUeRWzGIilSDGQwgQgZBpOQzn9g5V+wF/GR/ek6XvVeH2OaQBZsvPu19rn77HO8oX8VByZ5k9cm5yaXEp6x4btt8teg0ItYLPajUChcNpvNr91utz4ajRoIz9jwEWOxp8rZCfei0ej5xcXFN1dgOBy+GQwGz3q93gPTH5kcY3N+Ysmx3MMpxZYIh8MPs9nsr36//wUR+S25fcBHjIvP5/M/4ZB7Iw5pESu25NK6QssYj8cR5TTgMNPGNz3I5XK8ES06NoIbsm8Ny9kjFw7e1Eyr9zSZTL5SW0q7FHMgFw644JTZh302nSBaI9s8aE+QHXA0zqaPU8ABF5ym+o9MJpN5TBuYQJkWQHs0gcmpxQNH47dB6gya5kYqlXoqk4disfgW54q3C7HaTqdzlU6nv5u6MAzkIVJngAt7pVL5KJMHVtlutz9J9cGRUljDcGIy2edVBQGccEv1wOpbrdY7qT44UifVavXKzM/nfTwvA064pXpg5fV6/aVUH+aLOeHWmfdNApcAJ9xSPWB8b5Dqw3whRFdadN43CVwCnIEFuYhrtdpnqT44UgmXwk251haEE26pHthcjXbglDrSoGOzpmAEzsBhdGcmHo8/kWkB5uO6uiN1AbQXkToDXLQz8GwbWZSC5XKZkV91o1wHEfcnALdsi7DVlOh3IpHgeOx8lwI44IJTJj9YCS3Q/Tc72NeBDdOe/Zy4e3nl2zlYwH3aoIPNJ8P+xLEd2IpTcuGAa2reADdArFLfKkcm6wrjOyKWHHIDB2UdLOkuLUEYJBXmL4hW85XGIng+cx9ZLn7rN1uGJbKnk08GhPNEuyBnERxqbM6v2PV7tg0goUUi/OAK8IwNnw1LTOH/NUKhP2esw0hDhIHMAAAAAElFTkSuQmCC';
$xyg2='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAR2SURBVEhLlZY9SJtRFIYViYIgglBw6ODg4CQEg4OC0B9Ei4PQySBuHazSvVAcLQgOpVJwsY4drIugVLDiICKlKLag0EAGaQstVqwKEjTp+5yc+5kYf+qFN7nf+XnPveeec7+v7KaRy+UqhJhQLdRms9k64U4AMtdhU+Futx84i7CKANPT0y39/f3Pu7u7p3t6ej52dnZ+BsyRocMGW3xuFVjG5b7aWkj6+vpeDQ0NfZmZmfmeTqcPDw4OTs/OzrKAObL5+fkf2GCLD77OUe60lw8MhEpWOjw83AfJxsbGnxBASEk3J0xlMplZ/a8gC3ps8cFXOlLObi8PigIDDAcHB5+OjY2lRRoG5EmhTYgLzQ7myJLY5E0zmcnJyV3SLPnVQSWMYcDqSJ+vehMyIS59A3r9Uzg1wOfI0MVPTk4e46PnHBws3PUxD5MfElCJtcvLywlWh4MMV4QOoRGdUCmUFAMy1xG80X1W9JyDC050wrmvDNh2w+jo6FtS4jvrQCZEJe+I0sNcIFi17G3HArvtgAMuOF1WFZxsdwsLCw85dIxIjQzYGcGMsKWl5ZGcg8xSBIlQl0gk3rS3t7/TnDOjNRrhgAtOuJHLr8LO7vj4+O5rDc5NNhQIZ2ZpEKrRU0Qq+6WJiYkH7mytIzTt7Oz8pT2Yu4z0xvf29t7DCTcckscIyIqbFhcXv6JkZXomlZW+C1YcZ7X0HYEpBunrIZGO1NvQnIqlSMhKgxdRFm49s5hqAtpqWOX+/v7PAic7ZOZCRAqBV+BL/IQuVxHwvv7qBW4p/NrgZPfYSl4bdtDK6re2tr5FCh8QSBaRhrG+vr5PQUiXdBEBsat3P9sInHBr3irUhR20krJUKvVBcxq6xqJpQKDnkoAMyedOT0+f+GNRQDiEZjjJioZlrijg2trajub/FVAkKYJJd+kO4RCa4bwY8NqUYiRwNtEQAX3aJbR5kdlwu+tTGhS7u7s62/Th9vb2PT0XFo0tiFUCJYK2CZeCNbn+bWgeFRz/cMHpxZjfiH6sLQp7Rs+FbUFquLJ4SzxzRyoRP+tD+fHGSDF3mbUFXHDC7TprC2t8ESVR8m5jZZKHxrd70huX86TpkUVvF83DbpnbQuCAC06NZGHjs31r7qOjo08Uz8jIyJKewzVGUG4VgoQ71e5TnyPHjvuUBVhG4ODs4IRbyF9tnja7vMP9xyVAYyNzspK3xMWBjds24AsHXOKmis8vb4Ybh/MY17819sDAwEzB64WdlARG5jp7veGDr56pZrjCuRb7SmAvYIE+nCL3rJJPhoKPJM6Iqi56AYePLGzxkZyKnRLgwqf4BRyGlFYEGCobL0gJI3wk9fb2zvKhBDlgjgwdNm7O+3Q8BINTAW/8ruGAm/TP5wUfStaD9NPq6upvyAGpQxb02OLjvtcHCwMDIbzrOGwqjMCkeVP4FQL4nFuH9EXfPu4Lx/XBCoeMow9h7yFWTXCuKG4UwJwgTd7LtBe7urGqrxw4C6zWGtpJSZcBmeusR93tilFW9g/hONGZsVCpVwAAAABJRU5ErkJggg==';
$syg1='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAK3SURBVEhL3ZY9i1pREIYNYtqFLC5uYSFYB7FIIWEbWwshRTCEJUVCOsXOwMZYWeWjiM1aJEWKhYgb2ECWxd2Qzn9g5V+wF/Ej81zneD/V624T8sJw78ycec85c+bMvZF/FYciJZH3Imcilyq8Y8N3IHJnQNJIJBLXlUrlstfr/RiNRt35fP4T4R0bPsbI2Dcacyvk4/H4WafTuTATzGazD/Isizwbj8dPptPpK7VZfsYSI7GPlxQhEYvFnpZKpZvJZHKOMIHIA3X7gI8xZnyhUPgNh7q3Ik+KWLEEnywWiz21bwUTE0MsHGLKLz3rccDOCBApy2T31B4aEhMlFo5isXgupvVnmk6n32la2FlUzTuDWDjgglPNPhxy6AwKSOOpShAY60sdHHC1Wq0rUfeXVgcymcxL0kD1qWmFPwpVnUhTlRyD6i7ABWcul3uuJhvNZvMrzoDdUQxW2atqkM9ms7+Gw+EVO1GbC3ARV6vVPqrJBhd4MBh8U9UFz4ScbdVcmzWLWQFOuFW1wUr7/f4nVV3wkL7mXIzN4/MBTrhVtcFqu93uW1VdcJLSXZwTOX1BgDMw5Rg/C1R1wUkqz7iznTl9QYAzcEIacbvd/q6qC15SKYb7oluX2+vzAk64VbXB4Wrph63SVdlvmHAfzsBiJJitJ5PJF2pagRQiqrogkz0UKavqwqa7bZ0NTm26oRv2BuzV63XTl+Nqc0N2eEK+U6kU1+PWvVQQhQMuONXmByshrfRUUatSHDt/LQRWYzB9ee3uDGTAEWnQptsQ2SW9NOmGozEcLc1bYKqPVeq/yrGIv+PbwHfMWGKIDSyUTWB1pARx/CTxiaqKsAD+1Hg/xUeBmPES+0jsu0MCOVPrlwHhPnGRIWcRpA6b8evYzWcWBlI8Cb2nEH4xE/COTY/g7hP9B4hE/gJcEcN7PB4A9AAAAABJRU5ErkJggg==';
$syg2='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAARySURBVEhLlZY7SFxREIaVsAYEWVgQLFJYWFgJssFCQcgD0WAhpHIRuxRGSR8IlgaEFCE2NsYyhbERlAhGLEQkBMUEFLKwhSQBgxETBVl0N/83O+fmrq/FgX93zpyZf85rzj1VlaRYLN4SEkKtkCwUCvUxpLB5Hz63POzmQrAIb0M6PT2dHhgYeN7T0zPd29v7saur6zNAx0YfPvgSc6PEcq720SYh6e/vfz08PPxlfn7+Ry6X+3t4eHh6dnZWAOjYZmZmvuODLzHEOke1014uOPis6kdGRvoh2djY+B0SCFn1reTz+Vn9Twlz2EI/vsQQqz6Wu+bKpPFkLNHk5OSuiIOQICO0C61CiwMdWwafkms+Pz4+nhsaGnoqO/vMEl9MKmMCBxxZIrWLGvXmycnJY9lb1WykX/8cnDrgOjb6SJ4hhtnC4TOlP+FpSiIDJzG5vLx8l5lJL8pxRegUmugTWJ4LhwGb95G8yWNW1C7CBSd9wv9YOTDtxrGxsbcsCaMkEBvO0pkNR78sqXQOGIiXDrPthAMuOI+Pj++QIwRx/FMLCwsP2XScfBkZLce8vqOj4x1AFywwJBBhUzqdfuTJGFCtx7KveTjhlr00S/0kGMEbCWsv4fSxZziAZo4+QHcb+52amJh4oFJY4pDAITtJbXvgUL5ZOOH2/gQJcWpeXFz8SiezU5ulrFEQM2qXbiK90wMbOFwkohaZCQmElM+emTbCBSfcajPYWjptNMzg4ODgJwkEThYjbZB+X/8m4cQq2UtOIWTeZYMhzhOyTTZYOHd2dv4QJ3uSA8M+tTHSra2tb1FHKZCE3fo3kZ7hEKyvrx+4KRL3ayAOkW4TgRNu6W1CioSMpI3RZrPZD9Ip6DoPKkt4enr6RO05b5aJ+0UJ4RBa4PQlJ2F9WcK1tbUdnIRLE0rPkFS+e26KxP0uJITzfMJKS3p+D9njbiXddLMJfoLtISLT5UsaOthcDs729vY9AmWPNh5CRHq4DKy4NXA79kBSIiwls1i44Nzd3c2pXZqIfqws9vf33xNIzUAo2HVFn+x8EbLobiOG2VMKz4Q5gWIPW2FlAReccKsdlYUVvpy5eAt89xiZ7EYsu13OAF2w21+gTvkENXht4m9XHzoccMEpycQL3642ofXo6OgTGzw6Orqkto1YIAEzAkbos4jfodj5p21XGxxwwQm3wOBK97CTMgO7/yhUihsbBJHjNYKP+zYSCwdc4eYih7tGzmG/Xum/SHEPDg7OxD4v0ezigs377PNGTLgYnCvse3msDPYBFqjDKbWLjJInQ+yRxH5yqss+wOGRhS8xvm98BOC6+AEOok57YuDI6FgShM2HrK+vb5aHEuQAHRt9+Lg78iIkg1MJK79rpDfrn3fMCiMG1CrLBTlYXV39hS3040uMx4YnY+WXm8CJY93ZbHurCFMi5b2yFxK4zuuA5cOH4uagEQvH9cniImfKxR7CXkOMmuTcKFxvAJ0kzV7LYVYVT/WVQrBgzwnBDkkMN3zqV1X9AwVs0gxOys5DAAAAAElFTkSuQmCC';
$needle='data:image/png;base64,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 truncated
.pos {
background-image: url($pos);
}
.bottom-bar {
width: 100%;
height: transformRem(100);
position: fixed;
bottom: 0;
left: 0;
z-index: 50
&>.bom-bar-bg {
width: 100%;
height: transformRem(100);
background: -o-linear-gradient(top , rgb(51, 51, 51) 28% , rgb(30, 30, 30) 68%);
background: -ms-linear-gradient(top , rgb(51, 51, 51) 28% , rgb(30, 30, 30) 68%);
background: -moz-linear-gradient(top , rgb(51, 51, 51) 28% , rgb(30, 30, 30) 68%);
background: -webkit-linear-gradient(top , rgb(51, 51, 51) 28% , rgb(30, 30, 30) 68%);
background: linear-gradient(top , rgb(51, 51, 51) 28% , rgb(30, 30, 30) 68%);
}
}
.music-msg {
height: transformRem(80);
padding-top: transformRem(10);
padding-left: transformRem(15);
float: left;
&>.left-box {
width: transformRem(80);
height: transformRem(80);
float: left;
&>.title-page {
display: block;
width: transformRem(80);
height: transformRem(80);
overflow: hidden;
border-radius: transformRem(40);
border:#000000 solid transformRem(2);
box-sizing:border-box;
&>img {
width: 100%;
height: 100%;
}
}
}
&>.right-box {
float: left;
height: transformRem(65);
width: transformRem(400);
padding-left: transformRem(15);
padding-top: transformRem(15);
&>.text-msg {
width: 100%;
height: transformRem(55);
line-height: transformRem(65);
&>.music-name {
width: 65%;
color: #fff;
float: left;
}
&>.music-time {
width: 35%;
float: right;
color: #797979;
text-align: right;
&>.ct {
color: #a1a1a1;
}
}
}
&>.progress-bar {
width: 100%;
height: transformRem(10);
position: relative;
cursor: pointer;
background-color: #414141;
border-radius: transformRem(5);
&>.prog {
height: 100%;
position: absolute;
left: 0;
top: 0;
}
&>.load-prog {
height: 100%;
background-color: #535353;
border-radius: transformRem(5);
}
&>.play-prog {
background-color: #c70c0c;
border-radius: transformRem(5);
&>span {
width: transformRem(33);
height: transformRem(36);
position: absolute;
top: transformRem(-10.5);
right: transformRem(-19.5);
margin-left: transformRem(-16.5);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
cursor: pointer;
background-size: cover;
}
}
}
}
}
.controller {
float: right;
padding-right: transformRem(15);
padding-top: transformRem(15);
height: transformRem(65);
a {
display: block;
background-repeat: no-repeat;
float: left;
}
&>.ctrl-btn {
width: transformRem(65);
height: transformRem(65);
margin:0 transformRem(10);
}
&>.play {
background-image: url($play1);
background-size: cover;
&:active {
background-image: url($play2);
}
}
&>.pause {
background-image: url($zt1);
background-size: cover;
&:active {
background-image: url($zt2);
}
}
&>.cutover {
width: transformRem(50);
height: transformRem(50);
margin-top: transformRem(7);
}
&>.prev {
background-image: url($syg1);
background-size: cover;
&:active {
background-image: url($syg2);
}
}
&>.next {
background-image: url($xyg1);
background-size: cover;
&:active {
background-image: url($xyg2);
}
}
}
.middle-box {
height: 100%;
}
.music-main {
height: 100%;
background-color: #333;
position:relative;
}
.bg-block {
height: 100%;
width: 100%;
position:absolute;
left: 0;
top: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-filter: blur(100px);
-moz-filter: blur(100px);
-o-filter: blur(100px);
-ms-filter: blur(100px);
filter: blur(100px);
}
.needle-plus {
width: transformRem(231);
height: transformRem(330);
position: absolute;
left: 50%;
top: 0;
margin-left: transformRem(-50);
background-image: url($needle);
background-size: cover;
z-index: 10;
}
.disc {
width: transformRem(600);
height: transformRem(600);
position: absolute;
left: 50%;
top: transformRem(150);
margin-left: transformRem(-300);
&>.disc-mask {
background-image: url($disc);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
}
&>.singer-img {
width: transformRem(300);
height: transformRem(300);
padding: transformRem(150);
&>img {
width: 100%;
height: 100%;
}
}
}
.rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 12s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-name: rotate;
animation-duration: 12s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@-ms-keyframes rotate {
0% {
-ms-transform: rotate(0);
}
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.rot-play {
-webkit-animation-play-state: running;
animation-play-state: running;
}
.rot-paused {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.song-lyrics {
width: transformRem(600);
height: transformRem(300);
position: absolute;
left: 50%;
top: transformRem(800);
margin-left: transformRem(-300);
overflow: hidden;
&>.lyrics-scroll {
text-align: center;
line-height: transformRem(60);
transition: transform .3s ease-out;
&>p {
font-size: transformRem(30);
color: rgba(255, 255, 255, 0.6);
}
&>.cur {
color: rgba(255, 255, 255, 1);
}
}
}
.search-btn {
//width: transformRem(40);
//height: transformRem(40);
position: absolute;
right: transformRem(40);
top: transformRem(50);
&>button {
font-size: transformRem(26);
padding: transformRem(10) transformRem(15);
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
border: rgba(255, 255, 255, 0.6) solid transformRem(2);
}
}
.search-pop {
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
&>.pop-bg {
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: .4;
background-color: #000;
}
&>.pop-main {
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
.search-bar {
width: transformRem(600);
height: transformRem(50);
padding: transformRem(30) 0;
&>.search-input {
width: transformRem(500);
height: transformRem(50);
border: rgba(255, 255, 255, 0.6) solid transformRem(2);
border-right: none;
background-color: rgba(0, 0, 0, 0.4);
line-height: transformRem(50);
color: #fff;
font-size: transformRem(28);
box-sizing:border-box;
border-top-left-radius: transformRem(25);
border-bottom-left-radius: transformRem(25);
padding: 0 transformRem(25);
float: left;
}
&>.search-button {
width: transformRem(100);
height: transformRem(50);
border: rgba(255, 255, 255, 0.6) solid transformRem(2);
background-color: rgba(0, 0, 0, 0.4);
line-height: transformRem(50);
color: #fff;
font-size: transformRem(28);
box-sizing:border-box;
border-top-right-radius: transformRem(25);
border-bottom-right-radius: transformRem(25);
float: left;
}
}
.search-list {
width: transformRem(600);
flex:1;
overflow-y: auto;
&>.search-list-scroll {
&>.search-list-item {
height: transformRem(50);
padding: transformRem(10) 0;
display: flex;
justify-content:space-between;
&>p {
line-height: transformRem(50);
width: transformRem(480);
font-size: transformRem(26);
color: #fff;
}
&>button {
width: transformRem(100);
height: transformRem(50);
border: rgba(255, 255, 255, 0.6) solid transformRem(2);
background-color: rgba(0, 0, 0, 0.4);
line-height: transformRem(50);
color: #fff;
font-size: transformRem(28);
box-sizing:border-box;
}
}
}
}
.placeholder {
width: transformRem(600);
height: transformRem(100);
display: flex;
justify-content: center;
align-items: center
&>button {
width: transformRem(120);
height: transformRem(60);
border: rgba(255, 255, 255, 0.6) solid transformRem(2);
background-color: rgba(0, 0, 0, 0.4);
line-height: transformRem(60);
color: #fff;
font-size: transformRem(30);
box-sizing:border-box;
}
}
+35
View File
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0f04900edf2f8fdee9b63f1da475ada3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="http://dl2.vip.yystatic.com/assets/js/template2.0.4.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "图吧",
"description":"美女,内涵图,图吧",
"keywords":"美女,内涵图,图吧"
}
+123
View File
@@ -0,0 +1,123 @@
{% extends 'base.tpl' %}
{% block title %}美女图片-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main" id="main">
{#<div class="item-block">
<div class="big-item">
<div class="img-box">
<img src="http://wx2.sinaimg.cn/mw600/006oxNJJly1fhnavnvq1pj30d20zjq7f.jpg">
</div>
</div>
<div class="small-item">
<div class="lit-item">
<div class="img-box">
<img src="http://wx4.sinaimg.cn/mw600/70f421e3gy1fhn7pwznvyj20jg0t5q4f.jpg">
</div>
</div>
<div class="lit-item mt">
<div class="img-box">
<img src="http://wx4.sinaimg.cn/mw600/005vbOHfgy1fhnait6kqsj30ia0wijts.jpg">
</div>
</div>
</div>
</div>
<div class="item-block">
<div class="small-item">
<div class="lit-item">
<div class="img-box">
<img src="http://wx4.sinaimg.cn/mw600/70f421e3gy1fhn7pwznvyj20jg0t5q4f.jpg">
</div>
</div>
<div class="lit-item mt">
<div class="img-box">
<img src="http://wx4.sinaimg.cn/mw600/005vbOHfgy1fhnait6kqsj30ia0wijts.jpg">
</div>
</div>
</div>
<div class="big-item">
<div class="img-box">
<img src="http://wx2.sinaimg.cn/mw600/006oxNJJly1fhnavnvq1pj30d20zjq7f.jpg">
</div>
</div>
</div>#}
</div>
<div class="more-block">
<a class="more-btn" id="more-btn" href="javascript:;">加载更多</a>
</div>
<div class="pop-mark" id="pop-mark" style="display: none"></div>
{% endblock %}
{% block footer %}
<script id="list-tpl" type="text/html">
{{each data as val key}}
{{if val.length == 3}}
{{if key%2 == 0}}
<div class="item-block">
<div class="big-item">
<div class="img-box">
<img src="{{val[0].srcUrl}}" {{if val[0].srcGifUrl}}org="{{val[0].srcGifUrl}}"{{/if}}>
</div>
</div>
<div class="small-item">
<div class="lit-item">
<div class="img-box">
<img src="{{val[1].srcUrl}}" {{if val[1].srcGifUrl}}org="{{val[1].srcGifUrl}}"{{/if}}>
</div>
</div>
<div class="lit-item mt">
<div class="img-box">
<img src="{{val[2].srcUrl}}" {{if val[2].srcGifUrl}}org="{{val[2].srcGifUrl}}"{{/if}}>
</div>
</div>
</div>
</div>
{{else}}
<div class="item-block">
<div class="small-item">
<div class="lit-item">
<div class="img-box">
<img src="{{val[0].srcUrl}}" {{if val[0].srcGifUrl}}org="{{val[0].srcGifUrl}}"{{/if}}>
</div>
</div>
<div class="lit-item mt">
<div class="img-box">
<img src="{{val[1].srcUrl}}" {{if val[1].srcGifUrl}}org="{{val[1].srcGifUrl}}"{{/if}}>
</div>
</div>
</div>
<div class="big-item">
<div class="img-box">
<img src="{{val[2].srcUrl}}" {{if val[2].srcGifUrl}}org="{{val[2].srcGifUrl}}"{{/if}}>
</div>
</div>
</div>
{{/if}}
{{/if}}
{{/each}}
</script>
<script id="pop-tpl" type="text/html">
<div class="img-pop">
<div class="img-main">
<img src="{{imgUrl}}">
</div>
</div>
</script>
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+110
View File
@@ -0,0 +1,110 @@
//加载弹窗组件(不用可去掉)
//var dialog = require('../../script/extends/phone/dialog');
//var template = require('../../script/lib/template.min.js');
var startNumber = 0;
getList(startNumber);
function getList(start) {
$.ajax({
url:'/data/getPictureList',
type:'GET',
dataType:'json',
data:{
start:start,
number:12
},
cache:false,
success:function(json){
if(json.result) {
if(json.data.length >= 12) {
var data = fixDataArray(json.data);
$('#main').append(template('list-tpl',{data:data}));
}else if(json.data.length < 12 && json.data.length > 0){
var data = fixDataArray(json.data);
$('#main').append(template('list-tpl',{data:data}));
$('#more-btn').html('已经没有数据了!');
$('#more-btn').off('tap');
}else if(json.data.length == 0) {
$('#more-btn').html('已经没有数据了!');
$('#more-btn').off('tap');
}
}
}
});
}
function fixDataArray(data) {
var allArr = [];
var litArr = [];
for (var i = 0; i < data.length; i++) {
litArr.push(data[i]);
if(((i+1)!=0 && (i+1)%3==0) || i==data.length-1) {
//console.log(litArr);
allArr.push(litArr);
litArr = [];
}
}
return allArr;
}
$('#more-btn').on('tap',function(){
startNumber = startNumber+12;
getList(startNumber);
});
// $('#more-btn').tap(function(){
// startNumber = startNumber+12;
// getList(startNumber);
// });
$('#main').delegate('img','tap',function(evt){
var _this = $(this);
var imgUrl = _this.attr('org')?_this.attr('org'):_this.attr('src');
$('#pop-mark').show();
$('.content-box').css({'overflow-y':'hidden'});
var tpl = template('pop-tpl',{imgUrl:imgUrl});
$('body').append(tpl);
var imgPop = $('.img-main');
loadImage(imgUrl,function(){
var imgHeight = imgPop.find('img').height();
//console.log(imgHeight)
//console.log(document.body.offsetHeight)
if(imgHeight > document.body.offsetHeight){
imgPop.css({display:'block'});
}else{
imgPop.css({display:'flex'});
}
})
});
$('body').delegate('.img-pop','tap',function(evt){
//console.log($(this).find('img').height());
$('#pop-mark').hide();
$('.content-box').css({'overflow-y':'auto'});
$(this).remove();
});
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
+94
View File
@@ -0,0 +1,94 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../style/common/phone/_common.styl';
html,body,.content-box {
height: 100%;
}
.content-box {
overflow-y: auto;
}
.index-main {
width: 9.6rem;
margin: 0 auto;
}
.item-block {
width: 100%;
margin-top: 0.2rem;
display: flex;
justify-content:space-between;
}
.big-item {
width: 6.3rem;
height: 6.4rem;
}
.small-item {
width: 3.2rem;
height: 6.4rem;
}
.img-box {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #eee;
display: flex;
justify-content:center;
align-items:center;
&>img {
width: 100%;
}
}
.lit-item {
width: 3.2rem;
height: 3.15rem;
}
.mt {
margin-top: 0.1rem;
}
.more-block {
width: 9.6rem;
margin: 0.2rem auto;
&>.more-btn {
display: block;
color: #0a77fd;
font-size: 0.4rem;
height: 1rem;
line-height: 1rem;
text-align: center;
border-radius: 0.1rem;
border: #0a77fd solid 0.02rem;
text-decoration:none;
}
}
.img-pop {
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 101;
&>.img-main {
width: 9.6rem;
height: 100%;
overflow-y: auto;
display: flex;
//justify-content:center;
align-items:center;
margin: 0 auto;
&>img {
width: 100%;
}
}
}
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+2
View File
@@ -0,0 +1,2 @@
<h1>hello,{{name}}</h1>
<p>哈哈哈哈</p>
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+10
View File
@@ -0,0 +1,10 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
var hello = require('../../script/tmodjs/test-pc/hello');
$('.index-main').append(hello({name:'大兄弟'}));
+9
View File
@@ -0,0 +1,9 @@
@charset "UTF-8";
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+2
View File
@@ -0,0 +1,2 @@
<h1>hello,{{name}}</h1>
<p>哈哈哈哈!</p>
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+7
View File
@@ -0,0 +1,7 @@
//加载弹窗组件(不用可去掉)
//var dialog = require('../../script/extends/phone/dialog');
var hello = require('../../script/tmodjs/test/hello');
$('.index-main').append(hello({name:'大兄弟'}));
+5
View File
@@ -0,0 +1,5 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../style/common/phone/_common.styl';
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div id="content-box" class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "测试你是怎样的人",
"description":"丰田-凯美瑞-测试你是怎样的人",
"keywords":"丰田-凯美瑞-测试你是怎样的人"
}
+35
View File
@@ -0,0 +1,35 @@
{% extends 'base.tpl' %}
{% block title %}丰田-凯美瑞-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div id="index-main" class="index-main">
<div class="img-list">
<div class="item cur">
<img alt="丰田-凯美瑞-双擎" src="https://t1.picb.cc/uploads/2017/11/16/NAhV6.png">
<span></span>
</div>
<div class="item">
<img alt="丰田-凯美瑞" src="https://t1.picb.cc/uploads/2017/11/16/NAqF7.png">
<span></span>
</div>
<div class="item" style="margin-right:0">
<img alt="丰田-凯美瑞-运动" src="https://t1.picb.cc/uploads/2017/11/16/NAWAs.png">
<span></span>
</div>
</div>
<div class="btn-box">
<a id="btn" href="javascript:;"></a>
</div>
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+49
View File
@@ -0,0 +1,49 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
var resultTpl = require('../../script/tmodjs/toyotacamry/result');
var _resultData = {};
var _conclusionArray = [
['是商场上的进取者,是时尚界的弄潮儿,你永远先人一步走在前列,你是先锋行者',
'是智慧又炫酷的互联网精英,更是勇于创新的革新者。你,就是独具慧眼新一代'],
['受不了将就,忍不了低规格,追求品质是你与生俱来的基因,你就是天生贵族',
'境界高、品味高、品质要求更要高,没错,你就是众人追捧的社会精英'],
['脸上一直挂着阳光,脚下一直奔波在路上。你知道,生命的美好不存在于想象,而在追逐的远方,你是阳光型动派',
'热爱旅游,钟情运动,你昂扬的姿态是人群中最独特的存在。你好啊!行走的正能量']
];
var _titleArray = [['https://t1.picb.cc/uploads/2017/11/15/NusC8.png','https://t1.picb.cc/uploads/2017/11/16/NWauy.png'],['https://t1.picb.cc/uploads/2017/11/15/Nu90w.png','https://t1.picb.cc/uploads/2017/11/15/NuzNg.png'],['https://t1.picb.cc/uploads/2017/11/15/NuTHW.png','https://t1.picb.cc/uploads/2017/11/15/NuDsX.png']];
var _typeArray = ['hev','xle','xse'];
var _index = 0;
var _type = 0;
$('.item').click(function(){
//console.log(this);
$(this).siblings().removeClass('cur');
$(this).addClass('cur');
_index = $(this).index();
});
$('#btn').click(function(){
_type = Math.floor(Math.random()*2);
_resultData.picType = _typeArray[_index];
_resultData.title = _titleArray[_index][_type];
_resultData.conclusion = _conclusionArray[_index][_type];
var resultHtml = $(resultTpl(_resultData));
resultHtml.css({
opacity:0,
marginLeft:'100%'
});
$('#content-box').html(resultHtml);
resultHtml.animate({
opacity:1,
marginLeft:0
},500,function(){
resultHtml.removeAttr('style');
});
});
+154
View File
@@ -0,0 +1,154 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
$bg = 'https://t1.picb.cc/uploads/2017/11/16/NWbvj.jpg';
$gou = 'https://t1.picb.cc/uploads/2017/11/15/NuFOv.png';
$btn = 'https://t1.picb.cc/uploads/2017/11/15/NuPRi.png';
$hev = 'https://t1.picb.cc/uploads/2017/11/15/Nu03a.png';
$xle = 'https://t1.picb.cc/uploads/2017/11/15/Nupud.png';
$xse = 'https://t1.picb.cc/uploads/2017/11/15/Nubd1.png';
h1 {
margin: 0;
padding: 0;
}
body {
background-color: #030520
}
.content-box {
width: 600px;
height: 400px;
background-image: url($bg);
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
overflow: hidden;
}
.index-main {
width: 600px;
height: 400px;
}
.img-list {
padding-top: 160px;
width: 552px;
height: 144px;
margin: 0 auto;
&>.item {
width: 176px;
height: 144px;
float: left;
margin-right: 12px;
position: relative;
cursor: pointer;
&>img {
border: transparent solid 3px;
&:hover {
border: #244dca solid 3px;
}
}
&>span {
display: none;
width: 19px;
height: 19px;
background-image: url($gou);
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 3px;
bottom: 3px;
}
}
&>.cur {
&>img {
border: #244dca solid 3px;
}
&>span {
display: block;
}
}
}
.btn-box {
padding-top: 16px;
width: 263px;
height: 48px;
margin: 0 auto;
&>a {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
background-image: url($btn);
background-position: center;
background-repeat: no-repeat;
border: none;
}
}
.result-box {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
//padding-top: 153px;
}
.result-main {
//width: 546px;
//height: 226px;
width: 100%;
height: 100%;
position: relative;
&>h1 {
position: absolute;
left: 26px;
top:153px;
}
&>p {
width: 490px;
height: 40px;
padding: 0;
margin: 0;
position: absolute;
left: 60px;
top: 203px;
color: #e0e1e3;
font-size: 14px;
font-family: 'Microsoft YaHei';
line-height: 20px;
}
}
.hev {
background-image: url($hev);
}
.xle {
background-image: url($xle);
}
.xse {
background-image: url($xse);
}
+6
View File
@@ -0,0 +1,6 @@
<div class="result-box {{picType}}">
<div class="result-main">
<h1><img src="{{title}}"></h1>
<p>测试结果:{{conclusion}}</p>
</div>
</div>
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div id="content-box" class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "测试你是怎样的人",
"description":"丰田-凯美瑞-测试你是怎样的人",
"keywords":"丰田-凯美瑞-测试你是怎样的人"
}
+35
View File
@@ -0,0 +1,35 @@
{% extends 'base.tpl' %}
{% block title %}丰田-凯美瑞-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div id="index-main" class="index-main">
<div class="img-list">
<div class="item cur">
<img alt="丰田-凯美瑞-双擎" src="./images/toyotacamry_hev.png">
<span></span>
</div>
<div class="item">
<img alt="丰田-凯美瑞" src="./images/toyotacamry_xle.png">
<span></span>
</div>
<div class="item" style="margin-right:0">
<img alt="丰田-凯美瑞-运动" src="./images/toyotacamry_xse.png">
<span></span>
</div>
</div>
<div class="btn-box">
<a id="btn" href="javascript:;"></a>
</div>
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+49
View File
@@ -0,0 +1,49 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
var resultTpl = require('../../script/tmodjs/toyotacamry/result');
var _resultData = {};
var _conclusionArray = [
['是商场上的进取者,是时尚界的弄潮儿,你永远先人一步走在前列,你是先锋行者',
'是智慧又炫酷的互联网精英,更是勇于创新的革新者。你,就是独具慧眼新一代'],
['受不了将就,忍不了低规格,追求品质是你与生俱来的基因,你就是天生贵族',
'境界高、品味高、品质要求更要高,没错,你就是众人追捧的社会精英'],
['脸上一直挂着阳光,脚下一直奔波在路上。你知道,生命的美好不存在于想象,而在追逐的远方,你是阳光型动派',
'热爱旅游,钟情运动,你昂扬的姿态是人群中最独特的存在。你好啊!行走的正能量']
];
var _titleArray = [['./images/title_hev_1.png','./images/title_hev_2.png'],['./images/title_xle_1.png','./images/title_xle_2.png'],['./images/title_xse_1.png','./images/title_xse_2.png']];
var _typeArray = ['hev','xle','xse'];
var _index = 0;
var _type = 0;
$('.item').click(function(){
//console.log(this);
$(this).siblings().removeClass('cur');
$(this).addClass('cur');
_index = $(this).index();
});
$('#btn').click(function(){
_type = Math.floor(Math.random()*2);
_resultData.picType = _typeArray[_index];
_resultData.title = _titleArray[_index][_type];
_resultData.conclusion = _conclusionArray[_index][_type];
var resultHtml = $(resultTpl(_resultData));
resultHtml.css({
opacity:0,
marginLeft:'100%'
});
$('#content-box').html(resultHtml);
resultHtml.animate({
opacity:1,
marginLeft:0
},500,function(){
resultHtml.removeAttr('style');
});
});
+154
View File
@@ -0,0 +1,154 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
$bg = './images/toyotacamry_bg.jpg';
$gou = './images/toyotacamry_gou.png';
$btn = './images/toyotacamry_btn.png';
$hev = './images/hev_pic.png';
$xle = './images/xle_pic.png';
$xse = './images/xse_pic.png';
h1 {
margin: 0;
padding: 0;
}
body {
background-color: #030520
}
.content-box {
width: 600px;
height: 400px;
background-image: url($bg);
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
overflow: hidden;
}
.index-main {
width: 600px;
height: 400px;
}
.img-list {
padding-top: 160px;
width: 552px;
height: 144px;
margin: 0 auto;
&>.item {
width: 176px;
height: 144px;
float: left;
margin-right: 12px;
position: relative;
cursor: pointer;
&>img {
border: transparent solid 3px;
&:hover {
border: #244dca solid 3px;
}
}
&>span {
display: none;
width: 19px;
height: 19px;
background-image: url($gou);
background-position: center;
background-repeat: no-repeat;
position: absolute;
left: 3px;
bottom: 3px;
}
}
&>.cur {
&>img {
border: #244dca solid 3px;
}
&>span {
display: block;
}
}
}
.btn-box {
padding-top: 16px;
width: 263px;
height: 48px;
margin: 0 auto;
&>a {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
background-image: url($btn);
background-position: center;
background-repeat: no-repeat;
border: none;
}
}
.result-box {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
//padding-top: 153px;
}
.result-main {
//width: 546px;
//height: 226px;
width: 100%;
height: 100%;
position: relative;
&>h1 {
position: absolute;
left: 26px;
top:153px;
}
&>p {
width: 490px;
height: 40px;
padding: 0;
margin: 0;
position: absolute;
left: 60px;
top: 203px;
color: #e0e1e3;
font-size: 14px;
font-family: 'Microsoft YaHei';
line-height: 20px;
}
}
.hev {
background-image: url($hev);
}
.xle {
background-image: url($xle);
}
.xse {
background-image: url($xse);
}
+6
View File
@@ -0,0 +1,6 @@
<div class="result-box {{picType}}">
<div class="result-main">
<h1><img src="{{title}}"></h1>
<p>测试结果:{{conclusion}}</p>
</div>
</div>
+25
View File
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<link rel="icon" type="image/x-icon" href="/pages/webchatroom/favicon.ico">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "老司机聊天室,开车稳",
"description":"老司机聊天室,系好安全带",
"keywords":"老司机聊天室,用不翻车"
}
+58
View File
@@ -0,0 +1,58 @@
{% extends 'base.tpl' %}
{% block title %}老司机聊天室-{% endblock %}
{% block head %}
<link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
<div id="top-bar" class="weui-cell top-bar">
<p>当前在线人数:<span id="online-users">0</span></p>
</div>
<div id="msg-content" class="msg-content">
{# <div class="weui-cell">
<div class="weui-cell__hd head-img hl">
<img src="https://sfault-avatar.b0.upaiyun.com/175/934/175934663-572d654c6f521_big64">
</div>
<div class="weui-cell__hd bubble others">是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用1314</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd head-img hl">
<img src="https://sfault-avatar.b0.upaiyun.com/175/934/175934663-572d654c6f521_big64">
</div>
<div class="weui-cell__hd bubble others">我去年买了个表</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd"></div>
<div class="bubble self weui-cell__ft">我有一头小毛驴,可我从来也不骑</div>
<div class="weui-cell__ft head-img hr">
<img src="https://sfault-avatar.b0.upaiyun.com/175/934/175934663-572d654c6f521_big64">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd"></div>
<div class="bubble self weui-cell__ft">WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一。在微信网页开发中使用 WeUI,有如下优势:</div>
<div class="weui-cell__ft head-img hr">
<img src="https://sfault-avatar.b0.upaiyun.com/175/934/175934663-572d654c6f521_big64">
</div>
</div> #}
</div>
<div class="input-bar">
<div class="weui-cell weui-cells_form">
<div class="input-box weui-cell__bd"><input id="msg-val" class="weui-input" type="text" placeholder="请输入文本"></div>
<div id="send-btn" class="send-box weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">发送</a></div>
</div>
</div>
</div>
{% endblock %}
{% block footer %}
<script src="http://node.dengtongyu.com/node_modules/socket.io-client/dist/socket.io.js"></script>
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+75
View File
@@ -0,0 +1,75 @@
//加载弹窗组件(不用可去掉)
//var dialog = require('../../script/extends/phone/dialog');
var socket = io.connect('http://node.dengtongyu.com/chat');
//var socket = io.connect('http://localhost:8080/chat');
var msgBox = $('#msg-content');
var onlineUsersDom = $('#online-users');
var onlineUsers = 0;
var user = (new Date()).getTime();
var userImageId = Math.floor(Math.random()*851 + 1);
var sendData = {};
$('#send-btn').click(function(){
if($('#msg-val').val()=='') return false;
sendData.msg = $('#msg-val').val();
sendData.user = user;
sendData.imageId = userImageId;
socket.emit('client_chat_message', sendData);
$('#msg-val').val('');
});
//console.log(socket);
socket.on('broadcast_chat_message', function(data){
//console.log('接收到服务器消息');
//console.log(msgBox.find('.weui-cell').length);
if(msgBox.find('.weui-cell').length > 18) {
msgBox.find('.weui-cell').eq(0).remove();
}
if(data.user == user) {
msgBox.append(setSelfMsg(data.msg,data.imageId));
}else{
msgBox.append(setOthersMsg(data.msg,data.imageId));
}
msgBox.scrollTop(msgBox[0].scrollHeight);
});
msgBox.append(setOthersMsg('欢迎来到老司机开车聊天室!系好安全带,准备开车!','0'));
function getImageLink(imageId) {
if(imageId) {
return '/res/images/userimage/' + imageId + '.png';
}
}
function setOthersMsg(msg,imgId) {
return '<div class="weui-cell"><div class="weui-cell__hd head-img hl"><img src="'+getImageLink(imgId)+'"></div><div class="weui-cell__hd bubble others">'+msg+'</div></div>';
}
function setSelfMsg(msg,imgId) {
return '<div class="weui-cell"><div class="weui-cell__bd"></div><div class="weui-cell__ft bubble self">'+msg+'</div><div class="weui-cell__ft head-img hr"><img src="'+getImageLink(imgId)+'"></div></div>';
}
function getOnlineUsers() {
setTimeout(function(){
socket.emit('client_get_online_users', {});
//getOnlineUsers();
},1000);
}
getOnlineUsers();
socket.on('broadcast_online_users', function(data){
setOnlineUsers(data);
});
socket.on('online_users_change', function(data){
setOnlineUsers(data);
});
function setOnlineUsers(data) {
if(onlineUsers != data.onlineUsers) {
onlineUsers = data.onlineUsers;
onlineUsersDom.html(onlineUsers);
}
}
+103
View File
@@ -0,0 +1,103 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../style/common/phone/_common.styl';
html,body ,.content-box{
height: 100%;
}
.index-main {
height: 100%;
display: flex;
flex-direction: column;
}
.top-bar {
border-bottom: 1px solid #CCCCCC;
&>p {
line-height: 1rem;
}
}
.msg-content {
box-sizing: border-box;
overflow-y: auto;
flex: 1;
&>.weui-cell {
box-align: start;
align-items: flex-start;
}
&>.weui-cell:before {
border: none;
}
.head-img {
&>img {
width: 1rem;
height: 1rem;
border-radius: .2rem;
}
}
.hl {
padding-right: .2rem;
}
.hr {
padding-left: .2rem;
}
.bubble {
max-width: 60%;
min-height: .5rem;
line-height: .5rem;
position: relative;
border-radius: .1rem;
padding: .1rem .2rem;
color: #232323;
}
.bubble::before{
content: '';
width: .2rem;
height: .2rem;
position: absolute;
top: .25rem;
transform: rotate(45deg);
}
.others {
background-color: #fff;
border: 1px solid #ededed;
}
.others::before {
background-color: #fff;
border: 1px #ededed;
left: -0.1rem;
border-style: none none solid solid;
}
.self {
background-color: #9eea6a;
border: 1px solid #9eea6a;
}
.self::before {
background-color: #9eea6a;
border: 1px #9eea6a;
right: -0.1rem;
border-style: solid solid none none;
}
}
.input-bar {
width: 100%;
//height:1rem;
//position: fixed;
//bottom: 0;
//left: 0;
border-top: #ccc solid 1px;
#msg-val {
height: .85rem;
}
#send-btn {
&>a {
font-size: .35rem;
}
}
}
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+195
View File
@@ -0,0 +1,195 @@
/*
本弹窗组件用于手机移动端页面,不依赖jQuery或者zepto,不兼容低版本IE浏览器。
用法:
引入js模块
var dialog=require('./lightDialog');
引入样式
(因为样式采用rem单位,所以建议引入样式前声明$norm值,不声明则默认值为750)
例如:
$norm=640;
@import './common/dialog-pop.styl';
调用
dialog.showMsgBoth('呵呵哈哈哈',function(){
dialog.showMsg('我点了确定按钮');
return false; //可以通过 return false 阻断弹窗关闭
},function(){
dialog.showMsgRightTop('我点了取消按钮',function(){
console.log('关闭')
});
},null,'关闭');
*/
var dialogPop=require('./dialog_pop');
var config={
yesShow:true, //是否显示确定按钮
noShow:false, //是否显示取消按钮
closeBtnShow:false, //是否显示右上角关闭按钮
}
var bodyDom=document.querySelector('body'),
tempDom,popObj={};
//visible='display:block;visibility:hidden';
//合并对象
function extend(des,src){
for(var key in src){
des[key]=src[key]
}
return des;
}
//创建dom
function strDom(html) {
tempDom = document.createElement('div');
tempDom.innerHTML = html//.replace(/\s+|\n/g,' ').replace(/>\s</g,'><');
return tempDom.childNodes;
};
//过滤字符DOM
function filterNode(nodeList) {
var newNodeList=[];
for (var i = 0; i < nodeList.length; i++) {
/*if (nodeList[i].nodeName!='#text'&&nodeList[i].nodeValue!=' ') {
newNodeList.push(nodeList[i]);
}*/
newNodeList.push(nodeList[i]);
}
return newNodeList;
}
//插入节点
function insertHtml(nodeList,parentNode) {
for (var i = 0; i < nodeList.length; i++) {
parentNode.appendChild(nodeList[i]);
}
}
//计算居中
function popDomCenter(node,key) {
//node.setAttribute('style',visible);
var className=node.getAttribute('class')+' animated bounceIn';
node.setAttribute('class',className);
node.setAttribute('style','margin-top:-'+(node.offsetHeight/2)+'px;margin-left:-'+(node.offsetWidth/2)+'px');
className=null;
}
//选中弹窗
function selectPopDom(nodeList,key) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].id==key) {
return nodeList[i]
}else {
return null;
}
}
}
//确定按钮
function bindYesButton(node,cb) {
node.querySelector('.dialog-yes').onclick=function(){
if (typeof cb==='function') cb(this)===false||closePop(this);
else closePop(this);
}
}
//取消按钮
function bindNoButton(node,cb) {
node.querySelector('.dialog-no').onclick=function(){
if (typeof cb==='function') cb(this)===false||closePop(this);
else closePop(this);
}
}
//关闭按钮
function bindCloseButton(node,cb) {
node.querySelector('.dialog-close').onclick=function(){
closePop(this);
if (typeof cb==='function') cb(this);
}
}
//关闭弹窗
function closePop(btn) {
var popId=btn.getAttribute('sub');
if(popId){
for (var i = 0; i < popObj[popId].length; i++) {
bodyDom.removeChild(popObj[popId][i]);
}
delete popObj[popId];
}
popId=null;
}
//创建弹窗
function baseMsgPop(obj) {
obj.popId=new Date().getTime();
var configTemp=JSON.parse(JSON.stringify(config));
obj=extend(configTemp,obj);
var nodeList=filterNode(strDom(dialogPop(obj)));
popObj[obj.popId]=nodeList;
insertHtml(nodeList,bodyDom);
var popDom=selectPopDom(popObj[obj.popId],obj.popId);
if (obj.text) {
insertHtml(filterNode(strDom(obj.text)),popDom.querySelector('#dialog-content'));
}
popDomCenter(popDom,obj.popId);
if (obj.yesShow) {
bindYesButton(popDom,obj.yesFun);
};
if (obj.noShow) {
bindNoButton(popDom,obj.noFun);
};
if (obj.closeBtnShow) {
bindCloseButton(popDom,obj.closeFun);
};
configTemp=popDom=nodeList=null;
}
//普通弹窗,只有一个确定按钮
function showMsg(text,cb,showMark) {
baseMsgPop({
text:text, //提示文案
yesFun:cb, //确定按钮的回调函数
showMark:showMark //是否显示遮罩
});
}
//交互弹窗,确定和取消按钮
function showMsgBoth(text,yesFun,noFun,yesBtnText,noBtnText,showMark) {
baseMsgPop({
text:text, //提示文案
noShow:true, //显示取消按钮
yesFun:yesFun, //确定按钮的回调函数
noFun:noFun, //取消按钮的回调函数
yesBtnText:yesBtnText, //确定按钮的文案
noBtnText:noBtnText, //取消按钮的文案
showMark:showMark //是否显示遮罩
});
}
//关闭弹窗,只有右上角的关闭按钮
function showMsgRightTop(text,closeFun,showMark) {
baseMsgPop({
text:text, //提示文案
yesShow:false, //不显示确定按钮
closeBtnShow:true, //显示右上角关闭按钮
closeFun:closeFun, //关闭按钮的回调函数
showMark:showMark //是否显示遮罩
});
}
exports.baseMsgPop=baseMsgPop //基础创建弹窗方法
exports.showMsg=showMsg; //普通弹窗,只有一个确定按钮
exports.showMsgBoth=showMsgBoth; //交互弹窗,确定和取消按钮
exports.showMsgRightTop=showMsgRightTop; //关闭弹窗,只有右上角的关闭按钮
+2
View File
@@ -0,0 +1,2 @@
/*TMODJS:{"version":21,"md5":"320106be58718108f95400007e217d19"}*/
define(function(require){return require("./template")("dialog_pop",function(a){"use strict";var b=this,c=(b.$helpers,a.popId),d=b.$escape,e=a.yesShow,f=a.noShow,g=a.noBtnText,h=a.yesBtnText,i=a.closeBtnShow,j=a.showMark,k="";return k+='<div class="dialog-pop"',c&&(k+=' id="',k+=d(c),k+='"'),k+=' style="display:block;visibility:hidden"> <div class="dialog-content" id="dialog-content"></div> ',(e||f)&&(k+=' <div class="dialog-btn"> ',f&&(k+='<button id="dialog-no-btn" class="dialog-no" sub="',k+=d(c),k+='">',k+=d(g||"\u53d6\u6d88"),k+="</button>"),k+=" ",e&&(k+='<button id="dialog-yes-btn" class="dialog-yes" sub="',k+=d(c),k+='">',k+=d(h||"\u786e\u5b9a"),k+="</button>"),k+=" </div> "),k+=" ",i&&(k+='<button id="dialog-close-btn" class="dialog-close" sub="',k+=d(c),k+='"></button>'),k+=" </div> ",j&&(k+='<div class="pop-mark"></div>'),k+=" ",new String(k)})});
+2
View File
@@ -0,0 +1,2 @@
/*TMODJS:{}*/
!function(){function a(a,b){return(/string|function/.test(typeof b)?h:g)(a,b)}function b(a,c){return"string"!=typeof a&&(c=typeof a,"number"===c?a+="":a="function"===c?b(a.call(a)):""),a}function c(a){return l[a]}function d(a){return b(a).replace(/&(?![\w#]+;)|[<>"']/g,c)}function e(a,b){if(m(a))for(var c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)}function f(a,b){var c=/(\/)[^\/]+\1\.\.\1/,d=("./"+a).replace(/[^\/]+$/,""),e=d+b;for(e=e.replace(/\/\.\//g,"/");e.match(c);)e=e.replace(c,"/");return e}function g(b,c){var d=a.get(b)||i({filename:b,name:"Render Error",message:"Template not found"});return c?d(c):d}function h(a,b){if("string"==typeof b){var c=b;b=function(){return new k(c)}}var d=j[a]=function(c){try{return new b(c,a)+""}catch(d){return i(d)()}};return d.prototype=b.prototype=n,d.toString=function(){return b+""},d}function i(a){var b="{Template Error}",c=a.stack||"";if(c)c=c.split("\n").slice(0,2).join("\n");else for(var d in a)c+="<"+d+">\n"+a[d]+"\n\n";return function(){return"object"==typeof console&&console.error(b+"\n\n"+c),b}}var j=a.cache={},k=this.String,l={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},m=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},n=a.utils={$helpers:{},$include:function(a,b,c){return a=f(c,a),g(a,b)},$string:b,$escape:d,$each:e},o=a.helpers=n.$helpers;a.get=function(a){return j[a.replace(/^\.\//,"")]},a.helper=function(a,b){o[a]=b},define(function(){return a})}();
+1
View File
@@ -0,0 +1 @@
!function(e){"use strict";var n=function(e,r){return n["string"==typeof r?"compile":"render"].apply(n,arguments)};n.version="2.0.4",n.openTag="<%",n.closeTag="%>",n.isEscape=!0,n.isCompress=!1,n.parser=null,n.render=function(e,r){var t=n.get(e)||a({id:e,name:"Render Error",message:"No Template"});return t(r)},n.compile=function(e,t){function o(r){try{return new l(r,e)+""}catch(i){return s?a(i)():n.compile(e,t,!0)(r)}}var c=arguments,s=c[2],u="anonymous";"string"!=typeof t&&(s=c[1],t=c[0],e=u);try{var l=i(e,t,s)}catch(p){return p.id=e||t,p.name="Syntax Error",a(p)}return o.prototype=l.prototype,o.toString=function(){return l.toString()},e!==u&&(r[e]=o),o};var r=n.cache={},t=n.helpers=function(){var e=function(n,r){return"string"!=typeof n&&(r=typeof n,"number"===r?n+="":n="function"===r?e(n.call(n)):""),n},r={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},t=function(n){return e(n).replace(/&(?![\w#]+;)|[<>"']/g,function(e){return r[e]})},a=Array.isArray||function(e){return"[object Array]"==={}.toString.call(e)},i=function(e,n){if(a(e))for(var r=0,t=e.length;t>r;r++)n.call(e,e[r],r,e);else for(r in e)n.call(e,e[r],r)};return{$include:n.render,$string:e,$escape:t,$each:i}}();n.helper=function(e,n){t[e]=n},n.onerror=function(n){var r="Template Error\n\n";for(var t in n)r+="<"+t+">\n"+n[t]+"\n\n";e.console&&console.error(r)},n.get=function(t){var a;if(r.hasOwnProperty(t))a=r[t];else if("document"in e){var i=document.getElementById(t);if(i){var o=i.value||i.innerHTML;a=n.compile(t,o.replace(/^\s*|\s*$/g,""))}}return a};var a=function(e){return n.onerror(e),function(){return"{Template Error}"}},i=function(){var e=t.$each,r="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",a=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|[\s\t\n]*\.[\s\t\n]*[$\w\.]+/g,i=/[^\w$]+/g,o=new RegExp(["\\b"+r.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),c=/^\d[^,]*|,\d[^,]*/g,s=/^,+|,+$/g,u=function(e){return e.replace(a,"").replace(i,",").replace(o,"").replace(c,"").replace(s,"").split(/^$|,+/)};return function(r,a,i){function o(e){return m+=e.split(/\n/).length-1,n.isCompress&&(e=e.replace(/[\n\r\t\s]+/g," ").replace(/<!--.*?-->/g,"")),e&&(e=x[1]+p(e)+x[2]+"\n"),e}function c(e){var r=m;if($?e=$(e):i&&(e=e.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===e.indexOf("=")){var a=!/^=[=#]/.test(e);if(e=e.replace(/^=[=#]?|[\s;]*$/g,""),a&&n.isEscape){var o=e.replace(/\s*\([^\)]+\)/,"");t.hasOwnProperty(o)||/^(include|print)$/.test(o)||(e="$escape("+e+")")}else e="$string("+e+")";e=x[1]+e+x[2]}return i&&(e="$line="+r+";"+e),s(e),e+"\n"}function s(n){n=u(n),e(n,function(e){e&&!v.hasOwnProperty(e)&&(l(e),v[e]=!0)})}function l(e){var n;"print"===e?n=k:"include"===e?(y.$include=t.$include,n=E):(n="$data."+e,t.hasOwnProperty(e)&&(y[e]=t[e],n=0===e.indexOf("$")?"$helpers."+e:n+"===undefined?$helpers."+e+":"+n)),w+=e+"="+n+","}function p(e){return"'"+e.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}var f=n.openTag,d=n.closeTag,$=n.parser,g=a,h="",m=1,v={$data:1,$id:1,$helpers:1,$out:1,$line:1},y={},w="var $helpers=this,"+(i?"$line=0,":""),b="".trim,x=b?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],T=b?"$out+=$text;return $text;":"$out.push($text);",k="function($text){"+T+"}",E="function(id,data){data=data||$data;var $text=$helpers.$include(id,data,$id);"+T+"}";e(g.split(f),function(e){e=e.split(d);var n=e[0],r=e[1];1===e.length?h+=o(n):(h+=c(n),r&&(h+=o(r)))}),g=h,i&&(g="try{"+g+"}catch(e){"+"throw {"+"id:$id,"+"name:'Render Error',"+"message:e.message,"+"line:$line,"+"source:"+p(a)+".split(/\\n/)[$line-1].replace(/^[\\s\\t]+/,'')"+"};"+"}"),g=w+x[0]+g+"return new String("+x[3]+");";try{var j=new Function("$data","$id",g);return j.prototype=y,j}catch(O){throw O.temp="function anonymous($data,$id) {"+g+"}",O}}}();"function"==typeof define?define(function(){return n}):"undefined"!=typeof exports&&(module.exports=n),e.template=n}(this),function(e){e.openTag="{{",e.closeTag="}}",e.parser=function(n){n=n.replace(/^\s/,"");var r=n.split(" "),t=r.shift(),a=r.join(" ");switch(t){case"if":n="if("+a+"){";break;case"else":r="if"===r.shift()?" if("+r.join(" ")+")":"",n="}else"+r+"{";break;case"/if":n="}";break;case"each":var i=r[0]||"$data",o=r[1]||"as",c=r[2]||"$value",s=r[3]||"$index",u=c+","+s;"as"!==o&&(i="[]"),n="$each("+i+",function("+u+"){";break;case"/each":n="});";break;case"echo":n="print("+a+");";break;case"include":n="include("+r.join(",")+");";break;default:e.helpers.hasOwnProperty(t)?n="=#"+t+"("+r.join(",")+");":(n=n.replace(/[\s;]*$/,""),n="="+n)}return n}}(Line truncated
BIN
View File
Binary file not shown.
+179
View File
@@ -0,0 +1,179 @@
/*TMODJS:{}*/
!function () {
function template (filename, content) {
return (
/string|function/.test(typeof content)
? compile : renderFile
)(filename, content);
};
var cache = template.cache = {};
var String = this.String;
function toString (value, type) {
if (typeof value !== 'string') {
type = typeof value;
if (type === 'number') {
value += '';
} else if (type === 'function') {
value = toString(value.call(value));
} else {
value = '';
}
}
return value;
};
var escapeMap = {
"<": "&#60;",
">": "&#62;",
'"': "&#34;",
"'": "&#39;",
"&": "&#38;"
};
function escapeFn (s) {
return escapeMap[s];
}
function escapeHTML (content) {
return toString(content)
.replace(/&(?![\w#]+;)|[<>"']/g, escapeFn);
};
var isArray = Array.isArray || function(obj) {
return ({}).toString.call(obj) === '[object Array]';
};
function each (data, callback) {
if (isArray(data)) {
for (var i = 0, len = data.length; i < len; i++) {
callback.call(data, data[i], i, data);
}
} else {
for (i in data) {
callback.call(data, data[i], i);
}
}
};
function resolve (from, to) {
var DOUBLE_DOT_RE = /(\/)[^/]+\1\.\.\1/;
var dirname = ('./' + from).replace(/[^/]+$/, "");
var filename = dirname + to;
filename = filename.replace(/\/\.\//g, "/");
while (filename.match(DOUBLE_DOT_RE)) {
filename = filename.replace(DOUBLE_DOT_RE, "/");
}
return filename;
};
var utils = template.utils = {
$helpers: {},
$include: function (filename, data, from) {
filename = resolve(from, filename);
return renderFile(filename, data);
},
$string: toString,
$escape: escapeHTML,
$each: each
};
var helpers = template.helpers = utils.$helpers;
function renderFile (filename, data) {
var fn = template.get(filename) || showDebugInfo({
filename: filename,
name: 'Render Error',
message: 'Template not found'
});
return data ? fn(data) : fn;
};
function compile (filename, fn) {
if (typeof fn === 'string') {
var string = fn;
fn = function () {
return new String(string);
};
}
var render = cache[filename] = function (data) {
try {
return new fn(data, filename) + '';
} catch (e) {
return showDebugInfo(e)();
}
};
render.prototype = fn.prototype = utils;
render.toString = function () {
return fn + '';
};
return render;
};
function showDebugInfo (e) {
var type = "{Template Error}";
var message = e.stack || '';
if (message) {
// 利用报错堆栈信息
message = message.split('\n').slice(0,2).join('\n');
} else {
// 调试版本,直接给出模板语句行
for (var name in e) {
message += "<" + name + ">\n" + e[name] + "\n\n";
}
}
return function () {
if (typeof console === "object") {
console.error(type + "\n\n" + message);
}
return type;
};
};
template.get = function (filename) {
return cache[filename.replace(/^\.\//, '')];
};
template.helper = function (name, helper) {
helpers[name] = helper;
};
define(function(){return template;});
}()
+8
View File
@@ -0,0 +1,8 @@
/*TMODJS:{"version":2,"md5":"42c38c47514173e8894d3110bc76222a"}*/
define(function(require){return require('../template')('test-pc/hello', function($data,$filename
/**/) {
'use strict';var $utils=this,$helpers=$utils.$helpers,$escape=$utils.$escape,name=$data.name,$out='';$out+='<h1>hello,';
$out+=$escape(name);
$out+='</h1> <p>哈哈哈哈</p>';
return new String($out);
});});
+8
View File
@@ -0,0 +1,8 @@
/*TMODJS:{"version":3,"md5":"82a0633ce39bc9927db661a771415017"}*/
template('test/hello',function($data,$filename
/**/) {
'use strict';var $utils=this,$helpers=$utils.$helpers,$escape=$utils.$escape,name=$data.name,$out='';$out+='<h1>hello,';
$out+=$escape(name);
$out+='</h1> <p>哈哈哈哈!</p>';
return new String($out);
});
+12
View File
@@ -0,0 +1,12 @@
/*TMODJS:{"version":6,"md5":"aeea77e5d0c9b342c59243600f9ed4a8"}*/
define(function(require){return require('../template')('toyotacamry/result', function($data,$filename
/**/) {
'use strict';var $utils=this,$helpers=$utils.$helpers,$escape=$utils.$escape,picType=$data.picType,title=$data.title,conclusion=$data.conclusion,$out='';$out+='<div class="result-box ';
$out+=$escape(picType);
$out+='"> <div class="result-main"> <h1><img src="';
$out+=$escape(title);
$out+='"></h1> <p>测试结果:';
$out+=$escape(conclusion);
$out+='</p> </div> </div>';
return new String($out);
});});
+12
View File
@@ -0,0 +1,12 @@
/*TMODJS:{"version":1,"md5":"aeea77e5d0c9b342c59243600f9ed4a8"}*/
define(function(require){return require('../template')('toyotacamry2/result', function($data,$filename
/**/) {
'use strict';var $utils=this,$helpers=$utils.$helpers,$escape=$utils.$escape,picType=$data.picType,title=$data.title,conclusion=$data.conclusion,$out='';$out+='<div class="result-box ';
$out+=$escape(picType);
$out+='"> <div class="result-main"> <h1><img src="';
$out+=$escape(title);
$out+='"></h1> <p>测试结果:';
$out+=$escape(conclusion);
$out+='</p> </div> </div>';
return new String($out);
});});
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+53
View File
@@ -0,0 +1,53 @@
@charset "UTF-8";
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
html,body {
padding: 0;
margin: 0;
height: 100%
}
/*清除浮动*/
.cl:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.cl {
zoom: 1;
}
.clear {
clear:both;
display:inline;
}
/*显示隐藏*/
.show{display:block;}
.hide{display:none;}
/*左右浮动*/
.fl,.z{float:left;}
.fr,.y{float:right;}
/*字体抗锯齿*/
.thin {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*单行文字超出显示省略号*/
.ell {
overflow:hidden;
word-wrap:normal;
white-space:nowrap;
text-overflow:ellipsis;
word-break:keep-all;
-ms-text-overflow:ellipsis;
}
+135
View File
@@ -0,0 +1,135 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-09 18:52:31
* @version $Id$
*/
/*全局样式*/
*{margin:0; padding:0;}
table{border-collapse:collapse; border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,i{font-style:normal; font-weight:normal;}
ul,ol,li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
html {font-size: 62.5%}
input,textarea {outline:none;resize:none;}
pre,p{ white-space: -webkit-pre-wrap;white-space: -moz-pre-wrap; white-space: pre-wrap; word-wrap: break-word;}
a {-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-focus-ring-color: rgba(0, 0, 0, 0);outline: none;border: none;text-decoration:none;}
a:hover{ }
body {font-size:1.2rem;font-family:"Microsoft Yahei";color:#666;background-color: #fff}
div {
/*width: 1rem;
height: 0.4rem;*/
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
$norm=750;
transformRem(v)
(v/$norm*10)rem
/*清除浮动*/
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }
.clear {clear:both;display:inline;}
/*显示隐藏*/
.show{display:block;}
.hide{display:none;}
/*左右浮动*/
.fl,.z{float:left;}
.fr,.y{float:right;}
/*字体抗锯齿*/
.thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
/*单行文字超出显示省略号*/
.ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
/*遮罩*/
.pop-mark {
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: .4;
background-color: #000;
}
/*loading*/
.load-icon-box {
width: 110px;
height: 30px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -55px;
margin-top: -15px;
z-index: 101;
}
.load-icon .loader:before,
.load-icon .loader:after,
.load-icon .loader {
border-radius: 50%;
width: 30px;
height: 30px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load-icon 1.8s infinite ease-in-out;
animation: load-icon 1.8s infinite ease-in-out;
}
.load-icon .loader {
position: relative;
margin-top: -30px;
text-indent: -9999em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.load-icon .loader:before {
left: 40px;
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.load-icon .loader:after {
left: 80px;
}
.load-icon .loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
@-webkit-keyframes load-icon {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em #ffffff;
}
40% {
box-shadow: 0 2.5em 0 0 #FFF;
}
}
@keyframes load-icon {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em #ffffff;
}
40% {
box-shadow: 0 2.5em 0 0 #FFF;
}
}
+73
View File
@@ -0,0 +1,73 @@
@import '../../lib/phone/animate.styl';
$close='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAACuCAYAAACvDDbuAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAATmSURBVHhe7d2xilxlGMfhiBJE1KQwlSm9IlstbNPYCLKlpXdgoa3YayWClY1gIaSTBRsvwBsw8f/ufF8kbjaZOfOdmXPOPg8cVnZn3vOdfX+EIMnmDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALMnTp08vnjx58m0+vt4+tVn1jO1ZL9qnWKNaYK4rW4+3nq09YyfeNarF7fb3n63GW8/0v2iv5HOft5ewBtnZtWi7rcVbz/KiaLt87VF7KUuWXd0YbbeVePMMb7ws2k68C5cdvTLabu3x5ux38wzfXz3MHsS7UNnNF7sV7W+t8ebMB0XbiXdhspMvd6s53NrizVknRduJdyGyiM/aTiZbS7w541HRdpnxcRvJuWQJD3Ndtp1MtvR4c7ZR0V7W96yN5ZxqEbWQtpvJMmOR8eZMot2qWkiux21Hk2XGouLNWUS7dVnMg1ybiTdnEO1tkQVtIt7ce1S0j3O938ayZFnUquPNPd/MvUdF+6CNZQ1qYbW4tsPJMuOk8eZeb+WeP1/d/Aj17PU9aGNZk1pcLbDtcrLMOEm8uYdo2akF1iLbTifLjFnjzWzR8rxaZC207XayzJgl3swULS9WC63Fth1PlhlD480s0fJytdhacNv1ZJkxJN7MEC37qQXXotvOJ8uMo+LNe0XLYbLv97LsX3ern25qvHnPkGjjN9HeMln6vXPEm9eO+pW2zn6vjeU2qcWfMt687h3RMkQFcIp487VR9xEtOxXCnPHmc6JlHhXEHPHmv0XLvCqMkfHmEi2nUYEMiu070XJSFcqI6I4lWg5WwZwz3tz7l3wQLYercM4Rb+5Z/6/3rXYMOFwCeruFdBKiZZgK6RTxipbhKqg54xUts6mw5ohXtMyuAhsZr2g5mYR2P9ffFd6Rasb9Nhbmk9CG/ISZrs2628bDeBXYyGi7zPwxH/x2gfES1izRdpnt97qMlaBmjbYTL8NUSAnqh6uyTkC8HK0CaiGdlHiZrMI5R7SdeDlYBXPOaDvxsrcKZUS0mfF1rqP/SGSdJde77XhwXQIZ9XMPvsqH13L5O2fMq8IYFNlVtG3syLni5XkVxBzRdvmceBmrQpgz2i5fEy9jVACniLbLa8TLcWrxp4y2y2vFyzRZ+qgf7vxNPuwdbZf3iJfDDIx2rx8tepO8d1S8v9cztbFsUS0415L+DYhR8fpx+ltVi60Ft11PlhlDou0yS7y8WC20Ftt2PFlmDI22y0zx8rws8mGuP9puJ8uMWaLtMlu87GSBFe1l2+lkmTFrtF3uMeoP+Ih3rbK4VUXb5V7iva2ysFVG2+WeI+N92MayZLWoXKuNtsu9R8V7Wd+TNpYlyoI+yPVn29lkmXHWaLucQbxbl8VUtH+1XU2WGYuItstZxLtVWcgmo+1yJvFuTRax6Wi7nE28W5JdfLJbyXRLj7bLGY+ON+//J9eHbSTnlEU8ans52Fqi7XLWyfG2aD9qo1iCKfGuLdouZz44XtEu2CHxrjXaLmffO17RrkAW9Gnb143WHm2XZ3hlvKJdkezrYre267YSbZdnuTFe0a5Q9nYt3q1F2+WZrsUr2hXL/p7Fu9Vouzzbs3hFuwHZ48XWo+1avD+JFgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Gh37vwLBlyXuf9Wrg4AAAAASUVORK5CYII=';
/*遮罩*/
.pop-mark {
width:100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: .4;
background-color: #000;
}
.dialog-pop {
position: fixed;
box-sizing:border-box;
background-color: #fff;
border-radius: transformRem(6);
padding: transformRem(50) transformRem(30) transformRem(30);
color: #777;
left: 50%;
top: 50%;
text-align: center;
max-width: 90%;
margin-left: -40%;
z-index: 101;
box-shadow: #666 0 0 transformRem(60);
&>.dialog-content {
line-height: transformRem(40);
font-size: transformRem(30);
}
&>.dialog-btn {
padding-top: transformRem(50);
&>button {
width: transformRem(160);
height: transformRem(60);
box-sizing:border-box;
background-color: #0fadf2;
border-radius: transformRem(10);
color: #fff;
font-size: transformRem(30);
border: none;
&:active {
background-color: #0c96f9;
}
}
&>.dialog-no {
margin-right: transformRem(10);
}
}
&>.dialog-close {
width: transformRem(60);
height: transformRem(60);
position: absolute;
right: transformRem(-20);
top: transformRem(-20);
border-radius: transformRem(30);
color: #fff;
border: none;
font-size: transformRem(40);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
background-color: #3c3c3c;
background-image: url($close);
&:active {
background-color: #d24445;
}
}
}
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
+3340
View File
File diff suppressed because it is too large. Load diff
+5
View File
@@ -0,0 +1,5 @@
/*!
* WeUI v1.1.2 (https://github.com/weui/weui)
* Copyright 2017 Tencent, Inc.
* Licensed under the MIT license
*/html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}*{margin:0;padding:0}a img{border:0}a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}@font-face{font-weight:400;font-style:normal;font-family:weui;src:url('data:application/octet-stream;base64,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 truncated
File diff suppressed because it is too large. Load diff
BIN
View File
Binary file not shown.
+18
View File
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+6
View File
@@ -0,0 +1,6 @@
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
+9
View File
@@ -0,0 +1,9 @@
@charset "UTF-8";
/**
*
* @authors Tony.Deng (dengtongyu123@163.com)
* @date 2017-05-06 21:15:04
* @version $Id$
*/
@import "../../style/common/pc/_common.styl";
Binary file not shown.
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}{% endblock %}{[title]}</title>
<meta name="description" content="{[description]}">
<meta name="keywords" content="{[keywords]}">
<script>
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
</script>
<script>
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>
{% block head %}{% endblock %}
</head>
<body>
<div class="content-box">{% block main %}{% endblock %}</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
{% block footer %}{% endblock %}
</html>
+5
View File
@@ -0,0 +1,5 @@
{
"title": "node",
"description":"node",
"keywords":"node"
}
+20
View File
@@ -0,0 +1,20 @@
{% extends 'base.tpl' %}
{% block title %}node-{% endblock %}
{% block head %}
<link href="./index.css?v={[now()]}" rel="stylesheet">
{% endblock %}
{% block main %}
<div class="index-main">
</div>
{% endblock %}
{% block footer %}
<script src="./index.js?v={[now()]}"></script>
{% endblock %}
+3
View File
@@ -0,0 +1,3 @@
//加载弹窗组件(不用可去掉)
var dialog = require('../../script/extends/phone/dialog');
+5
View File
@@ -0,0 +1,5 @@
@charset "UTF-8";
/*加载公共样式*/
@import '../../style/common/phone/_common.styl';