代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一课表设置中心</title>
<link href="./images/icon.ico" rel="icon" />
</head>
<script src="https://cdn.bootcss.com/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="./jquery.cookie.min.js"></script>
<script src="./HwAuth.js"></script>
<body style="background-color: #F0F0F0;">
<div id="app" style="display: flex;width: 100%;height: 100%;flex-direction: column;padding: 8px;">
<div style="align-items: center;width: 100%;flex-shrink: 0;">
<!-- 返回按钮 -->
<div style="width: fit-content;align-items: center;" class="clickEffect" v-on:click="back">
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1">
<path
d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z"
fill="black" />
</svg>
<p style="font-size: 20px;margin-left: 8px;letter-spacing: 4px;">返回</p>
</div>
<div style="flex-grow: 1;"></div>
<div style="padding: 6px 16px;background-color: red;color: white;border-radius: 30px;font-size: 14px;align-items: center;justify-content: center;"
class="clickEffect" v-on:click="openPlatformChooseDialog">从云备份中获取设置数据</div>
</div>
<div style="flex-grow: 1;width: 100%;margin-top: 8px;overflow: hidden;">
<div style="flex-direction: column;width: calc(30% - 4px);">
<div style="align-items: center;" class="setting_item">
<p>显示周末</p>
<input type="checkbox" v-on:change="showWeekendChange" v-bind:checked="showWeekend" />
</div>
<div style="align-items: center;" class="setting_item">
<p>显示背景</p>
<input type="checkbox" v-on:change="backgroundChange" v-bind:checked="showBackgroungImg" />
<input type="file" v-on:input="selectImage(event)" style="display: none;" accept="image/*" id="imageSelect"/>
</div>
<div style="align-items: center;" class="setting_item">
<p>文本颜色</p>
<div style="width: 50px;border-radius: 30px;height: 24px;border: 1px solid black"
v-bind:style="{'background-color': textColor}" onclick="this.nextElementSibling.click()" class="clickEffect"></div>
<input type="color" v-bind:value="textColor" style="width: 0;height: 0;padding: 0;visibility: hidden;" v-on:input="textColorChange(event)" v-on:change="saveTextColor"/>
</div>
</div>
<div style="width: 8px;flex-shrink: 0;"></div>
<div
style="flex-direction: column;width: calc(70% - 4px);border-radius: 8px;background-color: #FFFFFF;padding: 16px;overflow: hidden;">
<p style="font-size: 20px;margin-bottom: 8px;">时间表设置</p>
<div style="width: 100%;align-items: center;">
<div
style="flex-grow: 1;border-radius: 30px;background-color: #80808018;align-items: center;justify-content: center;">
<select v-on:change="tableChange($event.currentTarget)" required>
<option v-for="timeTableObj in timeTables" v-bind:value="timeTableObj.uid"
v-bind:selected="timeTableObj.uid == uid">{{timeTableObj.name}}</option>
</select>
</div>
<div class="checkbox clickEffect" v-bind:checked="uid == defaultUid" v-on:click="useDefault"></div>
<p style="font-size: 16px;">默认时间表</p>
</div>
<div style="flex-direction: column;width: 100%;overflow-x: none;overflow-y: auto;margin-top: 8px;">
<div style="width: 100%;flex-direction: column;align-items: flex-end;"
v-for="(item, i) in timeCombine.combine">
<div
style="border-radius: 16px;background-color: #80808018;padding: 8px 16px;flex-direction: column;margin: 4px 0;width: 100%;">
<div style="width: 100%;flex-direction: column;" v-for="(idx, ii) in item">
<div style="align-items: stretch;">
<div style="align-items: center;flex-grow: 1;">
<svg width="24" height="24" style="flex-shrink: 0;margin-right: 14px"
class="clickEffect" v-on:click="deleteTime"
v-if="idx == timeTable.getBlockLength() && idx != 1">
<path fill="black"
d="M19.7781746,4.22182541 C20.0710678,4.51471863 20.0710678,4.98959236 19.7781746,5.28248558 L5.28248558,19.7781746 C4.98959236,20.0710678 4.51471863,20.0710678 4.22182541,19.7781746 C3.92893219,19.4852814 3.92893219,19.0104076 4.22182541,18.7175144 L10.9395166,11.9994697 L4.22182541,5.28248558 C3.92893219,4.98959236 3.92893219,4.51471863 4.22182541,4.22182541 C4.51471863,3.92893219 4.98959236,3.92893219 5.28248558,4.22182541 L12,10.9389863 L18.7175144,4.22182541 C19.0104076,3.92893219 19.4852814,3.92893219 19.7781746,4.22182541 Z M19.7781746,18.7175144 C20.0710678,19.0104076 20.0710678,19.4852814 19.7781746,19.7781746 C19.4852814,20.0710678 19.0104076,20.0710678 18.7175144,19.7781746 L12.7072836,13.7675902 L13.767767,12.7071068 L19.7781746,18.7175144 Z" />
</svg>
<div v-else style="width: 24px; flex-shrink: 0;margin-right: 14px;"></div>
<p>名称：</p>
<p style="flex-grow: 1;overflow: hidden;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
class="clickEffect" v-on:click="clickName(idx)">{{timeShowing[idx-1].name}}
</p>
<p style="margin-left: 16px;">上课时间：</p>
<p style="flex-shrink: 0;width: 100px;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
class="clickEffect" v-on:click="clickTime(idx)">{{timeShowing[idx-1].time}}
</p>
<p style="margin-left: 16px;">持续时间：</p>
<p style="flex-shrink: 0;width: 100px;border-bottom: 1px black solid;padding: 4px 8px;text-align: center;"
class="clickEffect" v-on:click="clickLast(idx)">{{timeShowing[idx-1].last}}
</p>
</div>
<div
style="width: 80px;flex-shrink: 0;margin-left: 16px;align-items: center;justify-content: center;">
<div v-if="item.length == 1"></div>
<svg width="48" height="48" v-else-if="ii == 0">
<path d="M0,24 L24,24 L24,48" stroke="black" stroke-width="1.5" fill="none">
</path>
</svg>
<svg width="48" height="48" v-else-if="ii == item.length - 1">
<path d="M0,24 L24,24 L24,0" stroke="black" stroke-width="1.5" fill="none">
</path>
</svg>
<svg width="48" height="48" v-else>
<path d="M24,0 L24,48" stroke="black" stroke-width="1.5" fill="none"></path>
</svg>
</div>
</div>
<div style="width: 100%;justify-content: flex-end;height: 40px;"
v-if="ii != item.length - 1">
<div style="width: 80px;flex-shrink: 0;align-items: center;justify-content: center;margin-left: 16px;"
class="clickEffect" v-on:click="unlock(i, ii)">
<svg style="width: 30px;aspect-ratio: 1;">
<path
d="M16.447592,14.0940386 C16.8470122,14.0940386 17.1735072,14.4062686 17.1963188,14.7999704 L17.197592,14.8440386 L17.197592,18.5940386 C17.197592,21.3554623 14.9590157,23.5940386 12.197592,23.5940386 C9.46493306,23.5940386 7.24428571,21.4018564 7.19831874,18.6801609 L7.19759198,14.8440386 C7.19759198,14.429825 7.53337841,14.0940386 7.94759198,14.0940386 C8.3470122,14.0940386 8.6735072,14.4062686 8.6963188,14.7999704 L8.69759198,14.8440386 L8.69759198,18.5940386 C8.69759198,20.5270352 10.2645954,22.0940386 12.197592,22.0940386 C14.104467,22.0940386 15.6551737,20.5691005 15.6967365,18.6721998 L15.697592,14.8440386 C15.697592,14.429825 16.0333784,14.0940386 16.447592,14.0940386 Z M12.197592,6.84403858 C12.6118055,6.84403858 12.947592,7.17982502 12.947592,7.59403858 L12.947592,16.0940386 C12.947592,16.5082521 12.6118055,16.8440386 12.197592,16.8440386 C11.7833784,16.8440386 11.447592,16.5082521 11.447592,16.0940386 L11.447592,7.59403858 C11.447592,7.17982502 11.7833784,6.84403858 12.197592,6.84403858 Z M12.197592,0.0940385849 C14.9302509,0.0940385849 17.1508982,2.28622073 17.1968652,5.00791623 L17.197592,8.84403858 C17.197592,9.25825215 16.8618055,9.59403858 16.447592,9.59403858 C16.0481718,9.59403858 15.7216768,9.28180859 15.6988651,8.88810678 L15.697592,8.84403858 L15.697592,5.09403858 C15.697592,3.16104196 14.1305886,1.59403858 12.197592,1.59403858 C10.2907169,1.59403858 8.74001025,3.11897668 8.69844749,5.01587733 L8.69759198,5.09403858 L8.69759198,8.84403858 C8.69759198,9.25825215 8.36180554,9.59403858 7.94759198,9.59403858 C7.54817175,9.59403858 7.22167676,9.28180859 7.19886515,8.88810678 L7.19759198,8.84403858 L7.19759198,5.09403858 C7.19759198,2.33261484 9.43616823,0.0940385849 12.197592,0.0940385849 Z"
fill="black"
transform="translate(12.197592, 11.844039) rotate(-315.000000) translate(-12.197592, -11.844039)" />
<line x1="5" y1="5" x2="19" y2="19" stroke="black" stroke-width="1.5"
stroke-linecap="round" />
</svg>
</div>
</div>
</div>
</div>
<div style="width: 80px;justify-content: center;align-items: center;margin-right: 16px;">
<svg style="width: 30px;aspect-ratio: 1;margin-top: 8px"
v-if="i != timeCombine.combine.length - 1" class="clickEffect" v-on:click="lock(i)">
<path
d="M16.447592,14.0940386 C16.8470122,14.0940386 17.1735072,14.4062686 17.1963188,14.7999704 L17.197592,14.8440386 L17.197592,18.5940386 C17.197592,21.3554623 14.9590157,23.5940386 12.197592,23.5940386 C9.46493306,23.5940386 7.24428571,21.4018564 7.19831874,18.6801609 L7.19759198,14.8440386 C7.19759198,14.429825 7.53337841,14.0940386 7.94759198,14.0940386 C8.3470122,14.0940386 8.6735072,14.4062686 8.6963188,14.7999704 L8.69759198,14.8440386 L8.69759198,18.5940386 C8.69759198,20.5270352 10.2645954,22.0940386 12.197592,22.0940386 C14.104467,22.0940386 15.6551737,20.5691005 15.6967365,18.6721998 L15.697592,14.8440386 C15.697592,14.429825 16.0333784,14.0940386 16.447592,14.0940386 Z M12.197592,6.84403858 C12.6118055,6.84403858 12.947592,7.17982502 12.947592,7.59403858 L12.947592,16.0940386 C12.947592,16.5082521 12.6118055,16.8440386 12.197592,16.8440386 C11.7833784,16.8440386 11.447592,16.5082521 11.447592,16.0940386 L11.447592,7.59403858 C11.447592,7.17982502 11.7833784,6.84403858 12.197592,6.84403858 Z M12.197592,0.0940385849 C14.9302509,0.0940385849 17.1508982,2.28622073 17.1968652,5.00791623 L17.197592,8.84403858 C17.197592,9.25825215 16.8618055,9.59403858 16.447592,9.59403858 C16.0481718,9.59403858 15.7216768,9.28180859 15.6988651,8.88810678 L15.697592,8.84403858 L15.697592,5.09403858 C15.697592,3.16104196 14.1305886,1.59403858 12.197592,1.59403858 C10.2907169,1.59403858 8.74001025,3.11897668 8.69844749,5.01587733 L8.69759198,5.09403858 L8.69759198,8.84403858 C8.69759198,9.25825215 8.36180554,9.59403858 7.94759198,9.59403858 C7.54817175,9.59403858 7.22167676,9.28180859 7.19886515,8.88810678 L7.19759198,8.84403858 L7.19759198,5.09403858 C7.19759198,2.33261484 9.43616823,0.0940385849 12.197592,0.0940385849 Z"
fill="black"
transform="translate(12.197592, 11.844039) rotate(-315.000000) translate(-12.197592, -11.844039)" />
</svg>
</div>
</div>
</div>
<p class="clickEffect"
style="padding: 12px;border-radius: 30px;outline: none;background-color: #0066ff;color: white;border: none;text-align: center;margin-top: 16px;"
v-on:click="addTime">
添加节次</p>
</div>
</div>
<dialog id="PlatformChooseDialog"
style="background-color: #FFFFFF;outline: none;border: none;padding: 16px;border-radius: 16px;box-shadow: 4px 4px 10px 0 #00000030;">
<div style="width: 500px;max-width: 300px;height: 200px;flex-direction: column;">
<p style="font-size: 16px;width: 100%;margin-bottom: 8px;flex-shrink: 0;text-align: center;">请选择云空间数据归属
</p>
<div style="flex-grow: 1;width: 100%;flex-direction: column;overflow-y: auto;overflow-x: hidden;">
<div class="clickEffect"
style="width: 100%;padding: 12px 16px;align-items: center;justify-content: center;margin: 4px 0;background-color: #80808020;border-radius: 30px;font-size: 12px;"
v-on:click="choosePlatform(true)">一课表应用(应用市场)
</div>
<div class="clickEffect"
style="width: 100%;padding: 12px 16px;align-items: center;justify-content: center;margin: 4px 0;background-color: #80808020;border-radius: 30px;font-size: 12px;"
v-on:click="choosePlatform(false)">一课表服务(服务中心/负一屏)
</div>
</div>
<div class="clickEffect"
style="border-radius: 30px;background-color: #dd0000;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;"
v-on:click="PlatformChooseDialog_cancel">取消</div>
</div>
</dialog>
<dialog id="InputDialog"
style="background-color: #FFFFFF;outline: none;border: none;padding: 16px;border-radius: 16px;box-shadow: 4px 4px 10px 0 #00000030;">
<div style="width: 500px;max-width: 300px;padding: 16px;flex-direction: column;">
<p style="font-size: 16px;width: 100%;margin-bottom: 8px;flex-shrink: 0;text-align: center;">
{{inputDialog_title}}
</p>
<input style="width: 100%;flex-shrink: 0;width: 100%;text-align: center;font-size: 16px;"
placeholder="请输入" v-bind:value="inputDialog_value" v-on:change="InputDialog_change" />
<div class="clickEffect"
style="border-radius: 30px;background-color: #0066ff;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;margin-top: 8px;"
v-on:click="InputDialog_confirm">确定</div>
<div class="clickEffect"
style="border-radius: 30px;background-color: #dd0000;color: white;padding: 8px 16px;border: none;text-align: center;width: 100%;align-items: center;justify-content: center;flex-shrink: 0;font-size: 16px;margin-top: 8px;"
v-on:click="InputDialog_cancel">取消</div>
</div>
</dialog>
</div>
</body>
<script>
var platFormIsApp = true
</script>
<script type="module">
import * as utils from './utils.js'
import { TimeTable } from './TimeTable.js'
import { TimeCombine } from './TimeCombine.js'
var set_storage = utils.getStorage({
priority: ['indexeddb'],
name: 'Set'
})
var time_storage = utils.getStorage({
priority: ['indexeddb'],
name: 'Time'
})
var inputDialog_callback = null
var vm = new Vue({
el: '#app',
data: {
showWeekend: true,
showBackgroungImg: false,
textColor: '#000000',
timeTable: {},
timeShowing: [],
timeCombine: { combine: [] },
inputDialog_title: '请输入',
inputDialog_value: '',
timeTables: [],
uid: null,
defaultUid: null
},
async created() {
let _showWeekend = (await set_storage.get('showWeekend')).showWeekend
this.showWeekend = _showWeekend != undefined ? _showWeekend : true
let img = window.localStorage.getItem('backgroundImg')
this.showBackgroungImg = img != null
let tc = window.localStorage.getItem('textColor')
this.textColor = tc == null ? '#000000' : tc
let TimeTables = await time_storage.keys()
let defaultUid = await set_storage.get('nowTimeTableUID').nowTimeTableUID
if (TimeTables.length == 0) {
let defaultTime = JSON.stringify({ timeTable: TimeTable.defaultTime().convertToComplex().toSave(), timeCombine: TimeCombine.defaultTimeCombine().combine })
let uid = String(new Date().getTime())
await time_storage.set(uid, defaultTime)
await set_storage.set('timeTable', JSON.stringify([{ uid: uid, name: '时间表1' }]))
TimeTables = [uid]
}
if (defaultUid == undefined || TimeTables.indexOf(defaultUid) == -1) {
defaultUid = TimeTables[0]
}
let _timeTables = (await set_storage.get('timeTable')).timeTable
this.timeTables = _timeTables != undefined ? JSON.parse(_timeTables) : []
let [timeTable, timeCombine] = (await TimeTable.loadTimeTable(defaultUid))
if (timeTable.type == 0) {
timeTable = timeTable.convertToComplex()
}
this.defaultUid = defaultUid
this.uid = defaultUid
timeCombine = new TimeCombine(timeCombine)
timeCombine.fixTimeCombine(timeTable.getBlockLength() + 1)
this.timeCombine = timeCombine
this.timeTable = timeTable
let ts = timeTable.buildTimeShowing()
this.timeShowing = ts
this.save()
},
methods: {
back() {
window.location.href = './'
},
showWeekendChange(e) {
let checked = e.currentTarget.checked
this.showWeekend = checked
set_storage.set('showWeekend', checked)
},
openPlatformChooseDialog() {
document.getElementById('PlatformChooseDialog').showModal()
},
choosePlatform(isApp) {
document.getElementById('PlatformChooseDialog').close()
platFormIsApp = isApp
checkCloud(isApp, res => {
if (res.code == 0) {
Hw_getFilesFromCloud(isApp, 'Data', items => {
if (items.length == 0) {
alert('没有备份过设置数据')
} else {
Hw_loadFile(isApp, items[0].contentDownloadLink, ({ code, data }) => {
if (code == 0) {
let setting = JSON.parse(base64Decode(data))
let Storage = setting.Storage
let TimeTableStorage = setting.TimeTable
let TimeCombineStorage = setting.TimeCombine
let wait = []
time_storage.clear().then(() => {
wait.push(set_storage.set('showWeekend', Storage.pageSetting.hideWeekend))
Object.entries(TimeTableStorage).forEach(([timeTableId, timeTable]) => {
let timeCombine = TimeCombineStorage ? TimeCombineStorage[timeTableId] : '[]'
wait.push(time_storage.set(timeTableId, JSON.stringify({
timeTable: JSON.parse(timeTable),
timeCombine: JSON.parse(timeCombine)
})))
})
wait.push(set_storage.set('nowTimeTableUID', Storage.nowTimeTableUID))
wait.push(set_storage.set('timeTable', Storage.timeTable))
Promise.all(wait).then(() => {
alert('获取完成')
window.location.reload()
})
})
} else {
alert('获取设置数据失败，请重试')
}
})
}
})
}
}, false)
},
PlatformChooseDialog_cancel() {
document.getElementById('PlatformChooseDialog').close()
},
lock(i) {
this.timeCombine.lock(i + 1)
this.save()
},
unlock(bi, i) {
this.timeCombine.unlock(bi, i + 1)
this.save()
},
save() {
time_storage.set(this.uid, JSON.stringify({ timeTable: this.timeTable.toSave(), timeCombine: this.timeCombine.combine }))
},
openInputDialog(title, value, callback) {
this.inputDialog_title = title
this.inputDialog_value = value
inputDialog_callback = callback
document.getElementById('InputDialog').showModal()
},
InputDialog_change(e) {
this.inputDialog_value = e.currentTarget.value
},
InputDialog_confirm() {
document.getElementById('InputDialog').close()
if (inputDialog_callback != null) inputDialog_callback()
},
InputDialog_cancel() {
document.getElementById('InputDialog').close()
},
clickName(i) {
this.openInputDialog('请输入节次名称', this.timeTable.getName(i), () => {
console.log(i, this.inputDialog_value)
this.timeTable.complexName[i - 1] = this.inputDialog_value
this.timeShowing = this.timeTable.buildTimeShowing()
this.save()
})
},
clickTime(i) {
this.openInputDialog('请输入开始时间', this.timeTable.getStart(i), () => {
console.log(i, this.inputDialog_value)
if (/[0-9]{2}:[0-9]{2}/.test(this.inputDialog_value)) {
this.timeTable.change(this.inputDialog_value, i)
this.timeShowing = this.timeTable.buildTimeShowing()
this.save()
} else {
alert('时间格式错误，请按照xx:xx格式输入')
}
})
},
clickLast(i) {
this.openInputDialog('请输入持续时间', this.timeTable.getLast(i), () => {
console.log(i, this.inputDialog_value)
if (/[0-9]{2}:[0-9]{2}/.test(this.inputDialog_value)) {
this.timeTable.changeLast(this.inputDialog_value, i)
this.timeShowing = this.timeTable.buildTimeShowing()
this.save()
} else {
alert('时间格式错误，请按照xx:xx格式输入')
}
})
},
async tableChange(e) {
let value = e[e.selectedIndex].value
console.log(value)
let [timeTable, timeCombine] = (await TimeTable.loadTimeTable(value))
if (timeTable.type == 0) {
timeTable = timeTable.convertToComplex()
}
this.uid = value
timeCombine = new TimeCombine(timeCombine)
timeCombine.fixTimeCombine(timeTable.getBlockLength() + 1)
this.timeCombine = timeCombine
this.timeTable = timeTable
let ts = timeTable.buildTimeShowing()
this.timeShowing = ts
this.save()
},
useDefault() {
if (this.defaultUid == this.uid) return;
set_storage.set('nowTimeTableUID', this.uid).then(() => {
this.defaultUid = this.uid
})
},
deleteTime() {
this.timeTable.remove(this.timeTable.getBlockLength() - 1)
this.timeCombine.fixTimeCombine(this.timeTable.getBlockLength() + 1)
this.save()
},
addTime() {
let t = this.timeTable.getStartV(this.timeTable.getBlockLength() + 1)
let l = this.timeTable.getLastV(this.timeTable.getBlockLength() + 1)
let nt = utils.num2time_float(t + l + 0.1667)
let nl = utils.num2time_float(l)
if (t + l >= 24) {
alert('再增加将超过24点')
return;
}
if (t + l + l > 24) {
nt = utils.num2time_float(t + l)
nl = utils.num2time_float(24 - t - l)
}
this.timeTable.add(nt, nl)
this.timeShowing = this.timeTable.buildTimeShowing()
this.timeCombine.fixTimeCombine(this.timeTable.getBlockLength() + 1)
this.save()
},
backgroundChange(e) {
let checked = e.currentTarget.checked
if (checked) {
let useUrl = confirm('是否使用网络图片（否则使用本地图片）？')
let url = ''
if (useUrl) {
url = prompt('输入图片url')
if (url == null || url == '') {
e.currentTarget.setAttribute('checked', 'false')
return;
}
this.confirmImage(url)
} else {
document.getElementById('imageSelect').click()
}
} else {
window.localStorage.removeItem('backgroundImg')
this.showBackgroungImg = false
}
},
selectImage(e) {
let files = e.currentTarget.files
if (files.length == 0) {
e.currentTarget.previousElementSibling.setAttribute('checked', 'false')
} else {
let reader = new FileReader()
reader.readAsBinaryString(files[0])
reader.onload = () => {
let buffer = reader.result
let url = "data:" + files[0].type + ";base64," + btoa(buffer);
this.confirmImage(url)
}
}
},
confirmImage(url) {
this.showBackgroungImg = true
console.log(url)
window.localStorage.setItem('backgroundImg', url)
},
textColorChange(e) {
this.textColor = e.currentTarget.value
},
saveTextColor(e) {
this.textColor = e.currentTarget.value
window.localStorage.setItem('textColor', this.textColor)
}
}
})
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
::-webkit-scrollbar {
display: none;
}
div,
button {
display: flex;
box-sizing: border-box;
user-select: none;
}
p {
padding: 0;
margin: 0;
}
input {
outline: none;
border: none;
background-color: #80808018;
border-radius: 30px;
padding: 8px;
}
select {
outline: none;
border: none;
padding: 8px 24px;
text-align: center;
background: none;
}
.checkbox {
border-radius: 30px;
width: 18px;
aspect-ratio: 1;
background-image: url('checkbox_unchecked.svg');
background-size: 18px;
margin: 0 8px;
}
.checkbox[checked] {
background-image: url('checkbox_checked.svg');
}
.setting_item {
padding: 8px 16px;
border-radius: 30px;
background-color: #FFFFFF;
margin: 4px 0;
}
.setting_item>p {
font-size: 16px;
flex-grow: 1;
}
.setting_item>input[type=checkbox] {
width: 48px;
height: 24px;
appearance: none;
background-color: #E0E0E0;
border-radius: 30px;
position: relative;
outline: none;
transition: background-color .3s;
}
.setting_item>input[type=checkbox]::after {
content: '';
width: 18px;
height: 18px;
background-color: #FFFFFF;
border-radius: 30px;
position: absolute;
left: 3px;
top: 3px;
box-shadow: 1px 1px 3px 0 #00000030;
transition: left .3s, transform .3s;
}
.setting_item>input[type=checkbox]:active::after {
transform: scale(0.8);
}
.setting_item>input[type=checkbox]:checked {
background-color: #0066ff;
}
.setting_item>input[type=checkbox]:checked::after {
left: 28px;
}
.clickEffect {
transition: transform 300ms;
}
.clickEffect:active {
transform: scale(0.9);
}
</style>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手