new
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
{
|
||||
"labels":["社交", "视频", "工具", "YLUI", "购物","壁纸","插件"],
|
||||
"apps": [
|
||||
{
|
||||
"title": "动态壁纸-星球大战",
|
||||
"icon": "../yl-wallpaper-starwar/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"壁纸"
|
||||
],
|
||||
"url": "./res/apps/yl-wallpaper-starwar/setup.html"
|
||||
},
|
||||
{
|
||||
"title": "桌面时钟插件",
|
||||
"icon": "../yl-clock/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"插件"
|
||||
],
|
||||
"url": "./res/apps/yl-clock/setup.html"
|
||||
},
|
||||
{
|
||||
"title": "计算器",
|
||||
"icon": "../yl-calculator/preview.png",
|
||||
"labels": [
|
||||
"YLUI",
|
||||
"工具"
|
||||
],
|
||||
"url": "./res/apps/yl-calculator/setup.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>应用商店</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css"/>
|
||||
<link rel="stylesheet" href="./style.css"/>
|
||||
<script src="../../yl.app.js"></script>
|
||||
<script src="../../../res/js/Yuri2.js"></script>
|
||||
<link rel="stylesheet" href="../../../res/css/grid.css"/>
|
||||
<script src="../../../res/components/vue.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="banner">
|
||||
YLUI 应用商店
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
|
||||
<div class="row apps box">
|
||||
<div class="app col-xs-6 col-sm-3 col-md-2 col-lg-2"
|
||||
:class="{active:isAppActive(app)}"
|
||||
v-show="isAppActive(app)"
|
||||
v-for="app in apps" @click="appClick(app)">
|
||||
<img onerror="this.src='./error.png'" :src="app.icon"/>
|
||||
<div class="title">{{app.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
|
||||
<div class="labels box">
|
||||
<input v-model="search" style="line-height: 1.5em;width: 100%;padding: 0.5em" placeholder="查询"/>
|
||||
</div>
|
||||
<div class="labels box">
|
||||
<div class="label"
|
||||
@click="labelClick(label)"
|
||||
:class="{active:label.active}"
|
||||
:style="labelStyle(label)"
|
||||
v-for="label in labels">{{label.name}}
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
©2018 ylui.yuri2.com
|
||||
</div>
|
||||
</div>
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -0,0 +1,99 @@
|
||||
var data={
|
||||
labels:[],
|
||||
apps:[],
|
||||
};
|
||||
|
||||
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
search: "",
|
||||
labels: [],
|
||||
apps: [],
|
||||
},
|
||||
created: function () {
|
||||
var that = this;
|
||||
Yuri2.loadContentFromUrl('./data.json','get',function (err,str) {
|
||||
var data=JSON.parse(str);
|
||||
var labels = data.labels;
|
||||
var apps =data.apps ;
|
||||
var labelsLoaded = [];
|
||||
labels.forEach(function (t) {
|
||||
labelsLoaded.push({
|
||||
name: t,
|
||||
active: true,
|
||||
color: that.getRandomColor()
|
||||
})
|
||||
});
|
||||
that.$set(that, 'labels', labelsLoaded);
|
||||
that.$set(that, 'apps', apps);
|
||||
});
|
||||
YLApp.onReady(function () {
|
||||
YLApp.eval('getAppVersion','',function (rel) {
|
||||
console.log(rel)
|
||||
});
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
appClick: function (app) {
|
||||
if (app.url) {
|
||||
YLApp.eval('open',{url:app.url,title:app.title});
|
||||
}
|
||||
|
||||
},
|
||||
labelClick: function (l) {
|
||||
l.active = !l.active;
|
||||
},
|
||||
isAppActive: function (app) {
|
||||
var that = this;
|
||||
var rel = false;
|
||||
var labels = app.labels;
|
||||
var hash = {};
|
||||
labels.forEach(function (t) {
|
||||
hash[t] = true;
|
||||
});
|
||||
this.labelsActive.forEach(function (t) {
|
||||
var checkList = [
|
||||
app.title,
|
||||
app.url,
|
||||
];
|
||||
checkList = checkList.concat(app.labels);
|
||||
var inWord = false;
|
||||
checkList.forEach(function (t2) {
|
||||
if (typeof t2 === "string" && t2.indexOf(that.search) !== -1) {
|
||||
inWord = true;
|
||||
}
|
||||
});
|
||||
if (hash[t] && inWord) {
|
||||
rel = true;
|
||||
}
|
||||
});
|
||||
return rel;
|
||||
|
||||
},
|
||||
labelStyle: function (label) {
|
||||
return {
|
||||
"color": label.active ? "white" : label.color,
|
||||
"border-color": label.active ? "white" : label.color,
|
||||
"background-color": !label.active ? "white" : label.color,
|
||||
}
|
||||
},
|
||||
getRandomColor: function () {
|
||||
var r = Yuri2.randInt(0, 200);
|
||||
var g = Yuri2.randInt(0, 200);
|
||||
var b = Yuri2.randInt(0, 200);
|
||||
return 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
labelsActive: function () {
|
||||
var ls = [];
|
||||
this.labels.forEach(function (t) {
|
||||
if (t.active)
|
||||
ls.push(t.name)
|
||||
});
|
||||
return ls;
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,95 @@
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
#banner{
|
||||
background-color: #070744;
|
||||
color: white;
|
||||
font-size: 36px;
|
||||
line-height: 4em;
|
||||
padding-left: 2em;
|
||||
}
|
||||
#footer{
|
||||
background-color: gainsboro;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 4em;
|
||||
padding-left: 2em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
/*border: 1px solid silver;*/
|
||||
/*box-shadow: 3px 3px 5px #d0d0d0;*/
|
||||
margin: 20px auto;
|
||||
overflow-x: hidden;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.labels, .apps {
|
||||
|
||||
}
|
||||
|
||||
.labels {
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
float: left;
|
||||
border-radius: 0.4em;
|
||||
border: 1px solid gray;
|
||||
padding: 0.5em;
|
||||
font-size: 12px;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.label.active {
|
||||
|
||||
}
|
||||
|
||||
.apps {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
margin-bottom: 1em;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.app:hover {
|
||||
border-color: #2D93CA;
|
||||
}
|
||||
|
||||
.app img {
|
||||
width: 100%;
|
||||
height:48px;
|
||||
}
|
||||
|
||||
.app .title {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
margin-top: 1em;
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<script src="../../yl.app.js"></script>
|
||||
<title>示例-APP引导安装</title>
|
||||
<style>
|
||||
body{
|
||||
padding: 0;
|
||||
margin:0;
|
||||
}
|
||||
.left{float: left}
|
||||
.clear{clear: both}
|
||||
.btn{
|
||||
padding: 1.5em;
|
||||
color: rgb(30,158,116);
|
||||
width: 16em;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 2em auto;
|
||||
border: 1px solid rgb(30,158,116);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.btn:hover{
|
||||
border-radius: 1em;
|
||||
color: rgb(36, 190, 139);
|
||||
}
|
||||
#header{
|
||||
color: lightgray;
|
||||
text-align: center;
|
||||
background-color: rgb(51,51,51);
|
||||
padding: 40px;
|
||||
|
||||
}
|
||||
#title{
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#sub-title{
|
||||
margin-top: 2em;
|
||||
}
|
||||
#body{
|
||||
padding: 2em;
|
||||
}
|
||||
#preview{
|
||||
width: 30%;
|
||||
display: block;
|
||||
}
|
||||
#content{
|
||||
width: 60%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header">
|
||||
<div id="title">APP名称</div>
|
||||
<div id="sub-title">APP副标题</div>
|
||||
<div class="btn">立即安装</div>
|
||||
</div>
|
||||
<div id="body">
|
||||
<img id="preview" class="left" src="./preview.jpg"/>
|
||||
<div id="content" class="left">
|
||||
<p>介绍性文字</p>
|
||||
<ul>
|
||||
<li>特性1</li>
|
||||
<li>特性2</li>
|
||||
<li>特性3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user