new
This commit is contained in:
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