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>
|
||||
@@ -0,0 +1,100 @@
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left top,#4CAF50, #2196F3);
|
||||
}
|
||||
.clear{
|
||||
clear: both;}
|
||||
#app{
|
||||
width:80%;
|
||||
max-width: 720px;
|
||||
height:80%;
|
||||
position: absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
border-radius: 5px;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
-moz-transform: translate(-50%,-50%);
|
||||
transform:translate(-50%,-50%);
|
||||
}
|
||||
#url-box,#btn-go{
|
||||
color: white;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
float: left;
|
||||
transition: all 0.3s;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.54);
|
||||
}
|
||||
#url-box{
|
||||
width: 60%;
|
||||
outline: none;
|
||||
border-radius: 8px 0 0 8px;
|
||||
margin-left: calc(20% - 2em);
|
||||
}
|
||||
#btn-go{
|
||||
width: 3em;
|
||||
text-align: center;
|
||||
border-left: none;
|
||||
border-radius: 0 8px 8px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#btn-go:hover {
|
||||
background-color: rgba(255, 255, 255, 0.29);
|
||||
}
|
||||
#url-ipt{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: inherit;outline: none;
|
||||
padding: 0 1.5em;
|
||||
width: calc(100% - 3em);
|
||||
}
|
||||
#history-box{
|
||||
list-style: none;
|
||||
color: white;
|
||||
padding-left: 0;
|
||||
margin-top: 6em;
|
||||
max-height: 70%;
|
||||
overflow: auto;
|
||||
padding-right: 2em;
|
||||
}
|
||||
#history-box li{
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#history-box .text-one-line{
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
#history-box .left,#history-box .right{
|
||||
height: inherit;
|
||||
line-height: inherit;
|
||||
color: rgba(255, 255, 255, 0.53);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
#history-box .left{
|
||||
width: calc(90% - 12em);
|
||||
float: left;
|
||||
|
||||
}
|
||||
#history-box .left:hover {
|
||||
text-decoration: underline;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
#history-box .right{
|
||||
width: 12em;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
#history-box .right:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="../../../res/components/font-awesome-4.7.0/css/font-awesome.min.css" />
|
||||
<script src="../../yl.app.js" ></script>
|
||||
<script src="../../../res/components/vue.min.js" ></script>
|
||||
<script src="../../../res/components/jquery-2.2.4.min.js" ></script>
|
||||
<script src="../../../res/components/jquery.nicescroll.min.js" ></script>
|
||||
<link rel="stylesheet" href="./index.css" />
|
||||
<title>浏览器</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="url-box">
|
||||
<input @keyup.enter="visit()" id="url-ipt" spellcheck="false" autofocus v-model="url" />
|
||||
</div>
|
||||
<div id="btn-go" @click="visit()"><i class="fa fa-location-arrow fa-fw"></i></div>
|
||||
<div class="clear"></div>
|
||||
<ul id="history-box">
|
||||
<li v-for="item in list">
|
||||
<span class="left text-one-line"
|
||||
@click="visit(item.url)"
|
||||
:title="item.url">{{item.url}}</span>
|
||||
<span class="right text-one-line">
|
||||
{{new Date(item.date).format('MM-dd hh:mm')}}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var storageName='yluiAppsBrowser';
|
||||
function urlFormat(url) {
|
||||
url=url.replace(/(^\s*)|(\s*$)/g, "");
|
||||
var preg=/^(https?:\/\/|\.\.?\/|\/\/?)/i;
|
||||
if(!preg.test(url)){
|
||||
url='//'+url;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
function jump(url) {
|
||||
// url=urlFormat(url);
|
||||
if(YLApp.id){
|
||||
YLApp.eval('setWinData',{
|
||||
url :url,
|
||||
urlBar:url
|
||||
})
|
||||
}else{
|
||||
try{
|
||||
location.href=url;
|
||||
}catch (e){
|
||||
alert('不正确的地址')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
url:"",
|
||||
list:[],
|
||||
},
|
||||
created:function () {
|
||||
Date.prototype.format = function (fmt) { //author: meizz
|
||||
if (!fmt) {
|
||||
fmt = 'yyyy-MM-dd hh:mm:ss';
|
||||
}
|
||||
var o = {
|
||||
"M+": this.getMonth() + 1, //月份
|
||||
"d+": this.getDate(), //日
|
||||
"h+": this.getHours(), //小时
|
||||
"m+": this.getMinutes(), //分
|
||||
"s+": this.getSeconds(), //秒
|
||||
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
||||
"S": this.getMilliseconds() //毫秒
|
||||
};
|
||||
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
for (var k in o)
|
||||
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return fmt;
|
||||
};
|
||||
if(localStorage[storageName]){
|
||||
this.list=JSON.parse(localStorage[storageName]);
|
||||
}
|
||||
this.$nextTick(function () {
|
||||
$("#history-box").niceScroll({
|
||||
cursorcolor: "#ffffff30",
|
||||
cursorwidth: "4px", // 滚动条的宽度，单位：便素
|
||||
cursorborder: "none", // CSS方式定义滚动条边框
|
||||
grabcursorenabled: false,
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
methods:{
|
||||
save:function () {
|
||||
localStorage[storageName]=JSON.stringify(this.list);
|
||||
},
|
||||
visit:function (url) {
|
||||
url||(url=this.url);
|
||||
if(!url) return;
|
||||
url= urlFormat(url);
|
||||
//查找是否已存在于列表
|
||||
if(this.list.length>0){
|
||||
var found=false,foundIndex=null;
|
||||
this.list.forEach(function (t, n) {
|
||||
if(found){return}
|
||||
if(t.url===url){
|
||||
found=true;
|
||||
foundIndex=n;
|
||||
}
|
||||
});
|
||||
if(found){
|
||||
this.list.splice(foundIndex,1)
|
||||
}
|
||||
}
|
||||
this.list.unshift({
|
||||
url:url,
|
||||
date:Date.now()
|
||||
});
|
||||
if(this.list.length>50){
|
||||
this.list.pop();
|
||||
}
|
||||
this.save();
|
||||
jump(url);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>colorPicker</title>
|
||||
<script src="../../components/jquery-2.2.4.min.js"></script>
|
||||
<script src="../../components/color-picker/color-picker.js"></script>
|
||||
<script src="../../yl.app.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../components/color-picker/color-picker.css"/>
|
||||
<style>
|
||||
html,body{
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="picker"></div>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
var color=YLApp.data.color?YLApp.data.color:'000000';
|
||||
color=color.replace(/^#/,'');
|
||||
if(!/^[\da-zA-Z]{6}$/.test(color)){
|
||||
color="000000"
|
||||
}
|
||||
$('#picker').colpick({
|
||||
flat:true,
|
||||
layout:'hex',
|
||||
color:color,
|
||||
submit:0,
|
||||
onChange:function(hsb,hex,rgb,el){
|
||||
if(YLApp.data.parent){
|
||||
var color="#"+hex;
|
||||
YLApp.emit('setColorFromColorPicker',color,YLApp.data.parent);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
2.0.8
|
||||
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Server</title>
|
||||
<script src="../../../res/yl.app.js"></script>
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Server</h1>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
// YLApp.eval('import',null,function (data) {
|
||||
//
|
||||
// })
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Server</title>
|
||||
<script src="../../../res/yl.app.js"></script>
|
||||
<style>
|
||||
body{background-color: white}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Server</h1>
|
||||
<script>
|
||||
YLApp.onReady(function () {
|
||||
var json=
|
||||
|
||||
YLApp.eval('import',null,function (data) {
|
||||
console.log(YLApp.id,data)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,444 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="cn">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>系统设置</title>
|
||||
<script src="../../components/vue.min.js"></script>
|
||||
<script src="../../js/yl-vue-component-icon.js"></script>
|
||||
<script src="../../js/Yuri2.js"></script>
|
||||
<script src="../../components/jquery-2.2.4.min.js"></script>
|
||||
<script src="../../components/clipboard-polyfill.js"></script>
|
||||
<script src="../../components/layer-v3.0.3/layer/layer.full.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="../../components/font-awesome-4.7.0/css/font-awesome.min.css"/>
|
||||
<!-- element-ui -->
|
||||
<link rel="stylesheet" href="../element-ui/index.css">
|
||||
<script src="../element-ui/index.js"></script>
|
||||
<script src="../../components/contextMenu/contextMenu.js"></script>
|
||||
<link rel="stylesheet" href="../../components/contextMenu/contextMenu.css">
|
||||
<link rel="stylesheet" href="../../css/yl-layer-skin.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script src="../../yl.app.js"></script>
|
||||
<!--图标模板-->
|
||||
<script type="text/x-template" id="tpl-icon">
|
||||
<div :class="[drawer?'icon-drawer-pre':'icon']" :style="{background:nobg?'none':icon.bg}">
|
||||
<template v-if="icon.type==='str'">
|
||||
{{icon.content.substr(0, 1)}}
|
||||
</template>
|
||||
<i v-if="icon.type==='fa'" class="fa fa-fw"
|
||||
:class="[ 'fa-'+icon.content ]">
|
||||
</i>
|
||||
<template v-if="icon.type==='img'">
|
||||
<img ondragstart="return false;" class="fa" :src="img?img:icon.content"/>
|
||||
</template>
|
||||
<div class="badge" v-show="badge">{{badgeText(badge)}}</div>
|
||||
</div>
|
||||
</script>
|
||||
<script src="../../js/yl-vue-component-icon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" :class="{'small-screen':isSmallScreen}">
|
||||
<div class="tab-title"><i class="fa fa-gear fa-fw"></i> {{YL.lang("SystemOptions")}}</div>
|
||||
<div class="tab-left">
|
||||
<ul class="tab-nav">
|
||||
<li v-for="(nav,id) in navs"
|
||||
@click="if(!nav.disable) navActive=id"
|
||||
:style="navStyle(id)"
|
||||
:class="{active:id===navActive,disable:nav.disable}">
|
||||
<i class="fa fa-fw" :class="[ 'fa-'+nav.icon ]"></i>{{nav.text}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'app-manager'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('AppManager')}}</h1>
|
||||
<div id="app-manager">
|
||||
<div>
|
||||
<input style="padding: 0.5em; width: calc(100% - 7.5em);margin-bottom: 1em; max-width: 36em;outline: none"
|
||||
v-model="appSearchWords"
|
||||
:placeholder="YL.lang('Search')+'/'+YL.lang('Create')+' '+YL.lang('Application')+'...'"/>
|
||||
<el-button @click="appCreate(appSearchWords)" type="primary" size="small" icon="el-icon-plus" >{{YL.lang('Application')}}</el-button>
|
||||
<table class="list" style="table-layout: fixed;width: 100%">
|
||||
<tr class="item">
|
||||
<td class="text" width="120" style="font-weight: bold">{{YL.lang('Application')}}</td>
|
||||
<td class="text" width="120" style="font-weight: bold">ID</td>
|
||||
<td class="text" width="110" style="font-weight: bold">{{YL.lang('Description')}}</td>
|
||||
<td class="text" width="50" style="font-weight: bold">{{YL.lang('Copyright')}}</td>
|
||||
<td class="text" width="40" style="font-weight: bold">{{YL.lang('AutoRun')}}</td>
|
||||
</tr>
|
||||
<tr v-for="(app,id) in apps" class="item"
|
||||
v-show="appSearchMatch(id)"
|
||||
@contextMenu="appContextMenu(id,$event)">
|
||||
<td class="text title" @dblclick="appSetting=app">
|
||||
<yl-icon :icon="app.icon" :img="urlFix(app.icon.content)"></yl-icon>
|
||||
<span style="padding-left: 0.5em" :title="app.title">{{app.title}}</span>
|
||||
</td>
|
||||
<td class="text" :title="id">{{id}}</td>
|
||||
<td class="text" :title="app.desc?app.desc:YL.lang('NoMoreDescription')">{{app.desc?app.desc:YL.lang('NoMoreDescription')}}</td>
|
||||
<td class="text" :title="app.poweredBy">{{app.poweredBy}}</td>
|
||||
<td class="text">{{renderAutoRun(app.autoRun)}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!--抽屉渲染-->
|
||||
<transition name="opacity">
|
||||
<div class="shader" v-if="appSetting" @click.self="appSetting=null"
|
||||
style="z-index:1">
|
||||
<div class="drawer">
|
||||
<el-form ref="form" :label-position="isSmallScreen?'top':'left'" :model="appSettingForm" label-width="8em" size="mini"
|
||||
style="padding:1em ;overflow: auto;height: calc(100% - 2em);">
|
||||
<el-form-item :label="YL.lang('Title')">
|
||||
<el-input spellcheck="false" v-model="appSetting.title" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Version')">
|
||||
<el-input spellcheck="false" v-model="appSetting.version" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Description')">
|
||||
<el-input spellcheck="false" v-model="appSetting.desc" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Copyright')">
|
||||
<el-input spellcheck="false" v-model="appSetting.poweredBy" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="URL">
|
||||
<el-input spellcheck="false" v-model="appSetting.url" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Tile')+' '+'URL'">
|
||||
<el-input spellcheck="false" v-model="appSetting.customTile" size="mini" :placeholder="YL.lang('CanBeEmpty')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('OpenMode')">
|
||||
<el-select v-model="appSetting.openMode" :placeholder="YL.lang('PleaseChoose')" size="mini">
|
||||
<el-option :label="YL.lang('Normal')" value="normal"></el-option>
|
||||
<el-option :label="YL.lang('Maximize')" value="max"></el-option>
|
||||
<el-option :label="YL.lang('Minimize')" value="min"></el-option>
|
||||
<el-option :label="YL.lang('Outer')" value="outer"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconType')">
|
||||
<el-select v-model="appSetting.icon.type" :placeholder="YL.lang('PleaseChoose')" size="mini">
|
||||
<el-option label="Font Awesome" value="fa"></el-option>
|
||||
<el-option :label="YL.lang('Initial')" value="str"></el-option>
|
||||
<el-option :label="YL.lang('Image')" value="img"></el-option>
|
||||
</el-select>
|
||||
<el-button @click="YL.open('ylui-fa')" v-show="appSetting.icon.type === 'fa'" plain size="mini" icon="el-icon-search" style="margin-left: 10px"></el-button>
|
||||
<el-button @click="YL.open('ylui-image-host')" v-show="appSetting.icon.type === 'img'" plain size="mini" icon="el-icon-upload" ></el-button>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconContent')">
|
||||
<el-input spellcheck="false" v-model="appSetting.icon.content" size="mini"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('IconBgColor')">
|
||||
<el-row>
|
||||
<el-col :span="2">
|
||||
<div @click="YL.open('yl-color-picker',{data:{color:appSetting.icon.bg,parent:YLApp.id}})" :style="{background:appSetting.icon.bg}" style="width: 90%;height: 27px;margin-top: 1px;border-radius: 3px;box-sizing: border-box;border: 1px solid darkgray;"> </div>
|
||||
</el-col>
|
||||
<el-col :span="22">
|
||||
<el-input spellcheck="false" v-model="appSetting.icon.bg" size="mini" style="width:147px" :placeholder="YL.lang('LegalCSSColor')"></el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('AutoRun')">
|
||||
<el-button-group>
|
||||
<el-button @click="reduceAutoRunLevel(appSetting)" plain icon="el-icon-remove" size="mini">{{YL.lang('Degrade')}}</el-button>
|
||||
<el-button plain size="mini">{{YL.lang('Current')}}:{{renderAutoRun(appSetting.autoRun)}}</el-button>
|
||||
<el-button @click="increaseAutoRunLevel(appSetting)" plain icon="el-icon-circle-plus" size="mini">{{YL.lang('Upgrade')}}</el-button>
|
||||
</el-button-group>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Superscript')">
|
||||
<el-input-number v-model="appSetting.badge" size="mini" :min="0" :max="999"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('AutoOffset')">
|
||||
<el-switch
|
||||
style="display: block;position: relative;top: 4px;width: 40px;"
|
||||
v-model="appSetting.position.autoOffset"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralAlignment')">
|
||||
<el-switch
|
||||
v-model="appSetting.position.left"
|
||||
:active-text="YL.lang('AlignLeft')"
|
||||
:inactive-text="YL.lang('AlignRight')"
|
||||
inactive-color="#409EFF">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalAlignment')">
|
||||
<el-switch
|
||||
v-model="appSetting.position.top"
|
||||
:active-text="YL.lang('AlignTop')"
|
||||
:inactive-text="YL.lang('AlignBottom')"
|
||||
inactive-color="#409EFF">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('LateralOffset')">
|
||||
<el-input v-model="appSetting.position.x" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Position')+' - '+YL.lang('VerticalOffset')">
|
||||
<el-input v-model="appSetting.position.y" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Width')">
|
||||
<el-input v-model="appSetting.size.width" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('Size')+' - '+YL.lang('Height')">
|
||||
<el-input v-model="appSetting.size.height" size="mini"
|
||||
:placeholder="YL.lang('TipsOfSizeSetting')"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="YL.lang('DisplayMode')">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.plugin"
|
||||
:active-text="YL.lang('PluginMode')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.single"
|
||||
:active-text="YL.lang('SingleWindow')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.addressBar"
|
||||
:active-text="YL.lang('DisplayAddressBar')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.background"
|
||||
:active-text="YL.lang('BackMode')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.resizable"
|
||||
:active-text="YL.lang('Resizable')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-switch
|
||||
v-model="appSetting.urlRandomToken"
|
||||
:active-text="YL.lang('UrlRandomToken')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'colors'===navActive}">
|
||||
<div class="show" id="colors">
|
||||
<h1>{{YL.lang('Color')}}</h1>
|
||||
<div class="color-choose">
|
||||
<div v-for="color in colors" class="color-block"
|
||||
@click="colorChoose=color"
|
||||
:style="{'background-color': color}"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="YL.open('yl-color-picker',{data:{color:colorChoose,parent:YLApp.id}})" style="float: left;margin-right:1em;width:4em;height:calc(2em + 2px);"
|
||||
:style="{'background-color': colorChoose}"></div>
|
||||
<input style="width:103px;margin-right: 20px;float: left;padding: 0.5em;outline: none;"
|
||||
:disabled="autoThemeColor" v-model="colorChoose"/>
|
||||
<el-switch
|
||||
style="display: block;position: relative;top: 4px;float: left;width: 200px;"
|
||||
v-model="autoThemeColor"
|
||||
:active-text="YL.lang('PickFromBgAuto')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'wallpaper'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('Wallpaper')}}</h1>
|
||||
<img id="img-wallpaper-preview" width="336" height="185" onerror="this.src='./error.png'" :src="wallpaperNowFixed"/>
|
||||
<div>
|
||||
<el-switch
|
||||
style=""
|
||||
v-model="wallpaperBlur"
|
||||
:active-text="YL.lang('Blur')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
<el-switch
|
||||
style="margin-left: 20px"
|
||||
v-model="wallpaperSlide"
|
||||
:active-text="YL.lang('Slide')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</div>
|
||||
<div v-show="wallpaperSlide">
|
||||
<div style="margin-top: 20px">
|
||||
<el-radio-group v-model="wallpaperSlideRandom" size="small">
|
||||
<el-radio-button :label="false">{{YL.lang('PlaySequentially')}}</el-radio-button>
|
||||
<el-radio-button :label="true">{{YL.lang('PlayRandomly')}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
{{YL.lang('SwitchingFrequency')}}
|
||||
<el-select v-model="wallpaperSlideItv" size="small" :placeholder="YL.lang('PleaseChoose')">
|
||||
<el-option :label="'1 '+YL.lang('Minutes')" :value="1"></el-option>
|
||||
<el-option :label="'10 '+YL.lang('Minutes')" :value="10"></el-option>
|
||||
<el-option :label="'30 '+YL.lang('Minutes')" :value="30"></el-option>
|
||||
<el-option :label="'1 '+YL.lang('Hours')" :value="60"></el-option>
|
||||
<el-option :label="'6 '+YL.lang('Hours')" :value="360"></el-option>
|
||||
<el-option :label="'24 '+YL.lang('Hours')" :value="1440"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<input class="ipt-yl" v-model="wallpaperAddUrl" :placeholder="YL.lang('AddPictureOnline')"/>
|
||||
<el-button @click="btnAddBgClick" size="medium"
|
||||
style="width: 81px;border-radius: inherit;font-size: 12px;">{{YL.lang('Add')}}
|
||||
</el-button>
|
||||
<el-button @click="YL.open('ylui-image-host')"
|
||||
style="border-radius: inherit;margin-left: 13px;font-size: 12px;"
|
||||
size="medium" icon="el-icon-upload" ></el-button>
|
||||
</p>
|
||||
|
||||
<div class="img-bg-preview">
|
||||
<img v-for="bg in wallpapers"
|
||||
:style="{'border-color':themeColorNow}"
|
||||
@click="YL.vue.configs.wallpaper=bg.image"
|
||||
onerror="this.src='./error.png'"
|
||||
@contextMenu="imgContextMenu(bg,$event)"
|
||||
:src="urlFix(bg.preview?bg.preview:bg.image)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'data-manage'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('DataManager')}}</h1>
|
||||
<div style="min-width: 250px;overflow-x: hidden">
|
||||
<el-button-group>
|
||||
<el-button plain :type="dataChanged?'primary':''" size="small" @click="layer.msg(YL.lang('DataHasBeenRefreshed'), {icon: 1});refreshData();" icon="el-icon-refresh"><span class="small-screen-hidden">{{YL.lang('Refresh')}}</span></el-button>
|
||||
<el-button plain size="small" @click="enableData" :loading="btnEnableLoading" icon="el-icon-sort"><span class="small-screen-hidden">{{YL.lang('TakeEffect')}}</span></el-button>
|
||||
<el-button plain size="small" @click="btnClipboard" icon="el-icon-tickets"><span class="small-screen-hidden">{{YL.lang('Copy')}}</span></el-button>
|
||||
<el-button plain size="small" @click="$('#ipt-json-file').click()" icon="el-icon-upload2"><input type="file"
|
||||
@change="jsonImport"
|
||||
id="ipt-json-file"/><span class="small-screen-hidden">{{YL.lang('Import')}}</span></el-button>
|
||||
<el-button plain size="small" @click="jsonExport" icon="el-icon-download"><span class="small-screen-hidden">{{YL.lang('Export')}}</span></el-button>
|
||||
</el-button-group>
|
||||
</div>
|
||||
<textarea style="margin: 5px 0 " id="text-data" v-model="textData" spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'others'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('Others')}}</h1>
|
||||
<p>
|
||||
<el-switch
|
||||
v-model="topTaskBar"
|
||||
:active-text="YL.lang('TopTaskBar')"
|
||||
inactive-color="gray">
|
||||
</el-switch>
|
||||
</p>
|
||||
<div style="margin-top: 20px">
|
||||
{{YL.lang('MaxNumberOfWindows')}}
|
||||
<el-select v-model="openMax" size="small" :placeholder="YL.lang('PleaseChoose')">
|
||||
<el-option label="6" :value="6"></el-option>
|
||||
<el-option label="9" :value="9"></el-option>
|
||||
<el-option label="12" :value="12"></el-option>
|
||||
<el-option label="15" :value="15"></el-option>
|
||||
<el-option label="18" :value="18"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'YLUI'===navActive}">
|
||||
<div class="show">
|
||||
<h1>YLUI</h1>
|
||||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}">
|
||||
<i class=" fa " :class="[ 'fa-'+YL.info.iconBtnStart ]"></i> {{YL.info.softwareName}}
|
||||
</div>
|
||||
<table class="tb-about-us">
|
||||
<tr>
|
||||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td>
|
||||
<td>{{YL.info.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Authorization')}}</td>
|
||||
<td>{{YL.static.authorization}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('SerialNumber')}}</td>
|
||||
<td>{{YL.static.serialNumber}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Author')}}</td>
|
||||
<td>{{YL.info.author}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Contact')}}</td>
|
||||
<td>{{YL.info.contactInformation}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('OfficialWebsite')}}</td>
|
||||
<td>
|
||||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.info.officialWebsite)">{{YL.info.officialWebsite}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Copyright')}}</td>
|
||||
<td style="font-size: 12px">{{YL.info.copyrightDetail}}</td>
|
||||
</tr>
|
||||
<tr v-if="YL.static.others">
|
||||
<td>{{YL.lang('OtherStatements')}}</td>
|
||||
<td style="font-size: 12px">{{YL.info.otherStatements}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-right" :class="{active:'aboutUs'===navActive}">
|
||||
<div class="show">
|
||||
<h1>{{YL.lang('AboutUs')}}</h1>
|
||||
<div style="margin: 15px auto;" :style="{color:themeColorNow,'font-size':isSmallScreen?'22px':'68px'}">
|
||||
<i class=" fa " :class="[ 'fa-'+YL.static.iconBtnStart ]"></i> {{YL.static.softwareName}}
|
||||
</div>
|
||||
<table class="tb-about-us">
|
||||
<tr>
|
||||
<td :width="isSmallScreen?'100':'150'">{{YL.lang('Version')}}</td>
|
||||
<td>{{YL.static.version}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Author')}}</td>
|
||||
<td>{{YL.static.author}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Contact')}}</td>
|
||||
<td>{{YL.static.contactInformation}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('OfficialWebsite')}}</td>
|
||||
<td>
|
||||
<a style="text-decoration: underline;cursor: pointer" onclick="YLApp.open(YL.static.officialWebsite)">{{YL.static.officialWebsite}}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{YL.lang('Copyright')}}</td>
|
||||
<td style="font-size: 12px">{{YL.static.copyrightDetail}}</td>
|
||||
</tr>
|
||||
<tr v-if="YL.static.others">
|
||||
<td>{{YL.lang('OtherStatements')}}</td>
|
||||
<td style="font-size: 12px">{{YL.static.otherStatements}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,457 @@
|
||||
var YL = parent.YL;
|
||||
YLApp.onReady(function () {
|
||||
YLApp.onEvent(function (e) {
|
||||
switch (e.event) {
|
||||
case "setColorFromColorPicker":
|
||||
var color = e.data;
|
||||
if ('colors' === vue.navActive) {
|
||||
vue.colorChoose = color;
|
||||
|
||||
}
|
||||
if ('app-manager' === vue.navActive) {
|
||||
vue.appSetting.icon.bg = color;
|
||||
}
|
||||
break;
|
||||
case "dataChanged" :
|
||||
if(e.from===0){
|
||||
vue.ondataChanged();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var vue = new Vue({
|
||||
el: "#app",
|
||||
created: function () {
|
||||
document.body.focus();
|
||||
var that = this;
|
||||
if(YL.static.changeable&&YL.static.dataCenter){
|
||||
this.loadApps();
|
||||
if (YLApp.data.nav) {
|
||||
this.navActive = YLApp.data.nav;
|
||||
}
|
||||
if (YLApp.data.appSetting) {
|
||||
this.appSetting = this.apps[YLApp.data.appSetting];
|
||||
}
|
||||
this.syncData();
|
||||
this.refreshData();
|
||||
}else{
|
||||
this.navActive ="aboutUs";
|
||||
}
|
||||
var fnResize = function () {
|
||||
var clientSize = Yuri2.getClientSize();
|
||||
that.isSmallScreen = clientSize.width <= 768;
|
||||
};
|
||||
fnResize();
|
||||
$(window).resize(fnResize);
|
||||
$("body").css("opacity", 1);
|
||||
},
|
||||
data: {
|
||||
navActive: 'app-manager',
|
||||
navs: {
|
||||
"app-manager": {
|
||||
icon: "puzzle-piece",
|
||||
text: YL.lang('AppManager'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"colors": {
|
||||
icon: "paint-brush",
|
||||
text: YL.lang('Color'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"wallpaper": {
|
||||
icon: "image",
|
||||
text: YL.lang('Wallpaper'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"others": {
|
||||
icon: "tasks",
|
||||
text: YL.lang('Others'),
|
||||
disable:!YL.static.changeable
|
||||
},
|
||||
"data-manage": {
|
||||
icon: "database",
|
||||
text: YL.lang('DataManager'),
|
||||
disable:!(YL.static.changeable&&YL.static.dataCenter)
|
||||
},
|
||||
"YLUI": {
|
||||
icon: "yoast",
|
||||
text: 'YLUI',
|
||||
},
|
||||
"aboutUs": {
|
||||
icon: "info-circle",
|
||||
text: YL.lang('AboutUs'),
|
||||
},
|
||||
},
|
||||
apps: {},
|
||||
appSearchWords: "",
|
||||
colors: [
|
||||
"#FFB900",
|
||||
"#FF8C00",
|
||||
"#F7630C",
|
||||
"#CA5010",
|
||||
"#DA3B01",
|
||||
"#EF6950",
|
||||
"#D13438",
|
||||
"#D13438",
|
||||
"#E74856",
|
||||
"#E81123",
|
||||
"#EA005E",
|
||||
"#C30052",
|
||||
"#E3008C",
|
||||
"#BF0077",
|
||||
"#C239B3",
|
||||
"#9A0089",
|
||||
"#0078D7",
|
||||
"#0063B1",
|
||||
"#8E8CD8",
|
||||
"#6B69D6",
|
||||
"#8764B8",
|
||||
"#744DA9",
|
||||
"#B146C2",
|
||||
"#881798",
|
||||
"#0099BC",
|
||||
"#2D7D9A",
|
||||
"#00B7C3",
|
||||
"#038387",
|
||||
"#00B294",
|
||||
"#018574",
|
||||
"#00CC6A",
|
||||
"#10893E",
|
||||
"#7A7574",
|
||||
"#5D5A58",
|
||||
"#68768A",
|
||||
"#515C6B",
|
||||
"#567C73",
|
||||
"#486860",
|
||||
"#498205",
|
||||
"#107C10",
|
||||
"#767676",
|
||||
"#4C4A48",
|
||||
"#69797E",
|
||||
"#4A5459",
|
||||
"#647C64",
|
||||
"#525E54",
|
||||
"#847545",
|
||||
"#7E735F",
|
||||
],
|
||||
colorChoose: '',
|
||||
autoThemeColor: false,
|
||||
themeColorNow: '',
|
||||
wallpaperNow: '',
|
||||
wallpapers: [],
|
||||
wallpaperBlur: false,
|
||||
wallpaperSlide: false,
|
||||
wallpaperSlideRandom: false,
|
||||
wallpaperSlideItv: 5,
|
||||
wallpaperAddUrl: '',
|
||||
openMax: 9,
|
||||
topTaskBar: false,
|
||||
activeAppId: null,
|
||||
textData: '',
|
||||
btnEnableLoading: false,
|
||||
appSetting: null,//app高级配置
|
||||
appSettingForm: {},
|
||||
isSmallScreen: false,//是否小屏幕
|
||||
dataChanged:false,
|
||||
},
|
||||
watch: {
|
||||
appSetting: {
|
||||
handler: function (val, oldVal) {
|
||||
if (!val) {
|
||||
YL.vue.$set(YL.vue, 'apps', Yuri2.jsonDeepCopy(this.apps));
|
||||
layer.msg("已保存");
|
||||
}
|
||||
}
|
||||
},
|
||||
colorChoose: {
|
||||
handler: function (val, oldVal) {
|
||||
if (!this.autoThemeColor) {
|
||||
YL.vue.configs.themeColor = val;
|
||||
}
|
||||
}
|
||||
},
|
||||
autoThemeColor: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.autoThemeColor = val;
|
||||
if (val)
|
||||
YL.vue.backgroundToThemeColor();
|
||||
else
|
||||
YL.vue.configs.themeColor = this.colorChoose;
|
||||
}
|
||||
},
|
||||
wallpaperBlur: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperBlur = this.wallpaperBlur;
|
||||
}
|
||||
},
|
||||
wallpaperSlide: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlide = this.wallpaperSlide;
|
||||
}
|
||||
},
|
||||
wallpaperSlideRandom: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlideRandom = this.wallpaperSlideRandom;
|
||||
}
|
||||
},
|
||||
wallpaperSlideItv: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.wallpaperSlideItv = this.wallpaperSlideItv;
|
||||
}
|
||||
},
|
||||
topTaskBar: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.topTaskBar = this.topTaskBar;
|
||||
}
|
||||
},
|
||||
openMax: {
|
||||
handler: function (val, oldVal) {
|
||||
YL.vue.configs.openMax = this.openMax;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 计算属性的 getter
|
||||
wallpaperNowFixed: function () {
|
||||
return this.urlFix(this.wallpaperNow);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
syncData:function () {
|
||||
var that=this;
|
||||
try {
|
||||
var configs = YL.util.dataCopy('configs');
|
||||
that.themeColorNow = configs.themeColor;
|
||||
that.autoThemeColor = configs.autoThemeColor;
|
||||
that.wallpaperNow = configs.wallpaper;
|
||||
that.wallpapers = configs.wallpapers;
|
||||
that.wallpaperBlur = configs.wallpaperBlur;
|
||||
that.wallpaperSlide = configs.wallpaperSlide;
|
||||
that.wallpaperSlideRandom = configs.wallpaperSlideRandom;
|
||||
that.wallpaperSlideItv = configs.wallpaperSlideItv;
|
||||
that.openMax = configs.openMax;
|
||||
that.topTaskBar = configs.topTaskBar;
|
||||
if (!that.colorChoose) {
|
||||
that.colorChoose = configs.themeColor;
|
||||
}
|
||||
} catch (e) {
|
||||
YL.debug(e)
|
||||
}
|
||||
},
|
||||
ondataChanged:function () {
|
||||
this.dataChanged=true;
|
||||
this.syncData();
|
||||
},
|
||||
appCreate: function (title) {
|
||||
var id = '';
|
||||
if (/^[\w-.]+$/.test(title) && !this.apps[title]) {
|
||||
//可以做id的情况
|
||||
id = title;
|
||||
} else {
|
||||
do {
|
||||
id = 'app-' + YL.util.getID();
|
||||
} while (this.apps[id])
|
||||
}
|
||||
var app = YL.util.getAppDataTemplate();
|
||||
app.title = title;
|
||||
app.icon.type = 'str';
|
||||
app.icon.content = title;
|
||||
this.$set(this.apps,id,app);
|
||||
},
|
||||
appContextMenu: function (id, e) {
|
||||
var that = this;
|
||||
var app = this.apps[id];
|
||||
var menu = [
|
||||
"<span style='color: darkgray'>" + YL.util.getStrFa('pencil') + app.title + "</span>",
|
||||
'|',
|
||||
[YL.util.getStrFa('play-circle') +YL.lang('Open'), function () {
|
||||
YL.open(id);
|
||||
}],
|
||||
[
|
||||
YL.util.getStrFa('copy') + YL.lang("AddTo"), [
|
||||
[YL.util.getStrFa('desktop') + YL.lang("DesktopIcons"), function () {
|
||||
that.appAddToShortcut(id)
|
||||
}],
|
||||
[YL.util.getStrFa('list-ul') + YL.lang("MainMenu"), function () {
|
||||
that.appAddToMenu(id)
|
||||
}],
|
||||
[YL.util.getStrFa('sliders') + YL.lang("Sidebar"), function () {
|
||||
that.appAddToSidebar(id)
|
||||
}],
|
||||
[YL.util.getStrFa('square') + YL.lang("Tiles"), function () {
|
||||
that.appAddToTile(id)
|
||||
}],
|
||||
]
|
||||
],
|
||||
[YL.util.getStrFa('cogs') + YL.lang("Advance"), function () {
|
||||
that.appSetting = app;
|
||||
}],
|
||||
'|',
|
||||
[YL.util.getStrFa('trash') + YL.lang("Uninstall"), function () {
|
||||
that.uninstall(id)
|
||||
}],
|
||||
];
|
||||
ContextMenu.render(e, menu, this);
|
||||
},
|
||||
jsonImport: function () {
|
||||
var that = this;
|
||||
var el = $("#ipt-json-file");
|
||||
var reader = new FileReader();
|
||||
//将文件以文本形式读入页面
|
||||
reader.readAsText(el[0].files[0], "utf8");
|
||||
reader.onload = function (e) {
|
||||
that.textData = e.target.result;
|
||||
};
|
||||
},
|
||||
jsonExport: function () {
|
||||
var blob = new Blob([this.textData], {type: "text/plain;charset=utf-8"});
|
||||
Yuri2.saveAs(blob, "yl-data.json");
|
||||
},
|
||||
refreshData: function () {
|
||||
//读取data
|
||||
var textData = YL.export();
|
||||
this.textData = Yuri2.jsonFormat(textData); // 缩进4个空格
|
||||
this.dataChanged=false;
|
||||
},
|
||||
btnClipboard: function () {
|
||||
var dt = new clipboard.DT();
|
||||
dt.setData("text/plain", this.textData);
|
||||
clipboard.write(dt);
|
||||
layer.msg(YL.lang("CopiedToShearPlate"));
|
||||
},
|
||||
enableData: function () {
|
||||
var that = this;
|
||||
this.btnEnableLoading = true;
|
||||
setTimeout(function () {
|
||||
try {
|
||||
var json = JSON.parse(that.textData);
|
||||
YL.import(json);
|
||||
}catch (e){
|
||||
layer.msg(YL.lang("FormatError"));
|
||||
that.btnEnableLoading = false;
|
||||
}
|
||||
}, 500);
|
||||
},
|
||||
renderAutoRun: function (autoRun) {
|
||||
try {
|
||||
if (autoRun > 0) {
|
||||
return "Lv" + Math.floor(autoRun);
|
||||
} else {
|
||||
return YL.lang("Disabled");
|
||||
}
|
||||
} catch (e) {
|
||||
return YL.lang("ConfigurationError");
|
||||
}
|
||||
},
|
||||
urlFix: function (url) {
|
||||
return url[0] === '.' ? "../../../" + url : url;
|
||||
},
|
||||
loadApps: function () {
|
||||
var apps = YL.util.dataCopy('apps');
|
||||
this.apps = apps;
|
||||
},
|
||||
navStyle: function (id) {
|
||||
var color = this.themeColorNow;
|
||||
return id === this.navActive ? {'color': color, 'border-left': '5px solid ' + color} : {};
|
||||
},
|
||||
uninstall: function (id) {
|
||||
var app = this.apps[id];
|
||||
var cfm = layer.confirm(Yuri2.template(YL.lang("UninstallConfirm"),app.title), {skin: "yl"}, function () {
|
||||
layer.close(cfm);
|
||||
if (YL.uninstall(id))
|
||||
vue.$delete(vue.apps, id);
|
||||
})
|
||||
},
|
||||
appOpen: function (id) {
|
||||
YL.open(id);
|
||||
},
|
||||
appAddToShortcut: function (id) {
|
||||
YL.addShortcut(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToMenu: function (id) {
|
||||
YL.addMenuItem(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToSidebar: function (id) {
|
||||
YL.addSidebarBtn(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appAddToTile: function (id) {
|
||||
YL.addTile(id);
|
||||
layer.msg(YL.lang("Added"));
|
||||
},
|
||||
appSearchMatch: function (id) {
|
||||
var app = this.apps[id];
|
||||
var words = this.appSearchWords;
|
||||
if (!words) {
|
||||
return true;
|
||||
}
|
||||
var checkList = [
|
||||
id,
|
||||
app.title,
|
||||
app.desc,
|
||||
app.poweredBy,
|
||||
this.renderAutoRun(app.autoRun),
|
||||
];
|
||||
for (var i in checkList) {
|
||||
var item = checkList[i];
|
||||
if (typeof item === 'string' && item.indexOf(words) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
btnAutoTheme: function () {
|
||||
if (this.autoThemeColor) {
|
||||
return {'background': this.themeColorNow, 'color': 'white'};
|
||||
} else {
|
||||
return {'background': 'rgb(230,230,230)', 'color': 'black'};
|
||||
}
|
||||
},
|
||||
btnAddBgClick: function () {
|
||||
var url = this.wallpaperAddUrl;
|
||||
if (!url) {
|
||||
return
|
||||
}
|
||||
YL.vue.configs.wallpapers.push({image: url, preview: ""});
|
||||
this.wallpaperAddUrl = '';
|
||||
},
|
||||
imgContextMenu: function (bg, e) {
|
||||
var that = this;
|
||||
var menu = [
|
||||
[YL.util.getStrFa('play') + YL.lang('Enabled'), function () {
|
||||
YL.vue.configs.wallpaper = bg.image;
|
||||
}],
|
||||
[YL.util.getStrFa('remove') + YL.lang('Delete'), function () {
|
||||
var wallpapers = YL.vue.configs.wallpapers;
|
||||
for (var i = 0; i < wallpapers.length; i++) {
|
||||
if (wallpapers[i].image === bg.image) {
|
||||
wallpapers.splice(i, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}],
|
||||
];
|
||||
ContextMenu.render(e, menu, this);
|
||||
},
|
||||
|
||||
_checkAutoRunLevel: function (app) {
|
||||
if (isNaN(app.autoRun) || app.autoRun < 0) {
|
||||
app.autoRun = 0;
|
||||
}
|
||||
},
|
||||
reduceAutoRunLevel: function (app) {
|
||||
this._checkAutoRunLevel(app);
|
||||
app.autoRun--;
|
||||
this._checkAutoRunLevel(app);
|
||||
},
|
||||
increaseAutoRunLevel: function (app) {
|
||||
this._checkAutoRunLevel(app);
|
||||
app.autoRun++;
|
||||
this._checkAutoRunLevel(app);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,300 @@
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
}
|
||||
.el-input{
|
||||
max-width: 300px;
|
||||
}
|
||||
.shader{
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.shader .drawer{
|
||||
position: absolute;
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -300px;
|
||||
margin-top: -200px;
|
||||
border: 1px solid darkgrey;
|
||||
box-shadow: 0 0 9px gray;
|
||||
background-color: white;
|
||||
}
|
||||
.small-screen .shader .drawer{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.small-screen h1{
|
||||
|
||||
}
|
||||
.small-screen .small-screen-hidden{
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
.ipt-yl {
|
||||
width: 10em;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
border: 1px solid #d8dce5;
|
||||
}
|
||||
.small-screen .ipt-yl {
|
||||
width: 8em;
|
||||
}
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tab-left {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
height: calc(100% - 90px);
|
||||
font-size: 15px;
|
||||
top: 90px;
|
||||
overflow: auto;
|
||||
}
|
||||
.small-screen .tab-left {
|
||||
width: 120px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tab-right {
|
||||
position: absolute;
|
||||
left: 330px;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
font-size: 15px;
|
||||
overflow: auto;
|
||||
display: none;
|
||||
}
|
||||
.small-screen .tab-right {
|
||||
left: 130px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.tab-title {
|
||||
position: absolute;
|
||||
line-height: 50px;
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
font-size: 25px;
|
||||
top: 16px;
|
||||
}
|
||||
.small-screen .tab-title{
|
||||
font-size: 18px;
|
||||
}
|
||||
.tab-left .tab-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li {
|
||||
line-height: 50px;
|
||||
padding: 0 15px;
|
||||
cursor: default;
|
||||
}
|
||||
.tab-left .tab-nav li.disable {
|
||||
color: grey;
|
||||
}
|
||||
.small-screen .tab-left .tab-nav li {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li.active {
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li:hover {
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.tab-left .tab-nav li i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-right .show {
|
||||
}
|
||||
|
||||
.tab-right .show h1 {
|
||||
line-height: 58px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-right.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
#app-manager {
|
||||
width: 90%;
|
||||
max-width:600px;
|
||||
}
|
||||
|
||||
#app-manager * {
|
||||
}
|
||||
|
||||
#app-manager .list {
|
||||
/*width: 100%;*/
|
||||
}
|
||||
|
||||
#app-manager .list .th {
|
||||
font-size: 10px;
|
||||
line-height: 24px;
|
||||
display: inline-block;
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
#app-manager .list .item {
|
||||
padding: 6px;
|
||||
position: relative;
|
||||
transition: 0.3s all;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#app-manager .list tr {
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
#app-manager .list td {
|
||||
text-overflow: ellipsis; /* for IE */
|
||||
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
#app-manager .list .item:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
#app-manager .list .item .icon {
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 1px 0 grey;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#app-manager .list .item .icon > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app-manager .list .item .title {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
#app-manager .list .item .text {
|
||||
font-size: 10px;
|
||||
line-height: 28px;
|
||||
color: gray;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.color-choose {
|
||||
width: 384px;
|
||||
overflow: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.small-screen .color-choose {
|
||||
width: 248px;
|
||||
}
|
||||
#colors .color-choose .color-block {
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
margin-bottom: 3px;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.small-screen .color-choose .color-block{
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
#colors .color-choose .color-block:hover {
|
||||
border: 2px solid black;
|
||||
}
|
||||
#img-wallpaper-preview{
|
||||
width: 336px;
|
||||
height: 185px;
|
||||
}
|
||||
.small-screen #img-wallpaper-preview{
|
||||
width: 90%;
|
||||
height: auto;
|
||||
}
|
||||
.img-bg-preview {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.img-bg-preview > img {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 45px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.img-bg-preview > img:hover {
|
||||
cursor: pointer;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
#text-data {
|
||||
outline: none;
|
||||
font-size: 10px;
|
||||
width: 90%;
|
||||
resize: vertical;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
#ipt-json-file {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tb-about-us{
|
||||
width: 85%;table-layout: fixed
|
||||
}
|
||||
|
||||
.tb-about-us td{
|
||||
vertical-align: top;
|
||||
word-break: break-all;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Reference in New Issue
Block a user