|
@@ -4,44 +4,44 @@
|
|
|
<span :class="['settings-header-item',activeTab === '0' ? 'active-item' : '']" @click="onTabChange('0')">一般设置</span>
|
|
|
<span :class="['settings-header-item',activeTab === '1' ? 'active-item' : '']" @click="onTabChange('1')">学校管理</span>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<div class="settings-body">
|
|
|
<div class="normal-settings" v-if="activeTab === '0'">
|
|
|
<div class="normal-settings-item">
|
|
|
<span class="item-title">网站语言设定</span>
|
|
|
<span class="item-description">请选择网站要用来显示选单、互动页面以及通知信息的语言</span>
|
|
|
<span class="item-content">
|
|
|
- <Select v-model="curLang" style="width:200px">
|
|
|
+ <Select v-model="cloudSetting.curLang" style="width:200px">
|
|
|
<Option value="zh-CN">中文(简体)</Option>
|
|
|
<Option value="zh-TW">中文(繁体)</Option>
|
|
|
- <Option value="en-US">英语</Option>
|
|
|
+ <Option value="en-US">English</Option>
|
|
|
</Select>
|
|
|
- <Checkbox v-model="isHomeworkLang">使用您作业系统的语系来展示</Checkbox>
|
|
|
+ <Checkbox v-model="cloudSetting.isSystemLang">使用您作业系统的语系来展示</Checkbox>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="normal-settings-item">
|
|
|
<span class="item-title">网站色彩模式</span>
|
|
|
<span class="item-description">请选择网站显示的色彩模式,以便提供最佳的用户体验</span>
|
|
|
<span class="item-content">
|
|
|
- <span :class="['color-item',activeTheme === '0' ? 'color-item-active' : '']" @click="onThemeChange('0')"></span>
|
|
|
- <span :class="['color-item',activeTheme === '1' ? 'color-item-active' : '']" @click="onThemeChange('1')"></span>
|
|
|
+ <span :class="['color-item',cloudSetting.curTheme === 'dark' ? 'color-item-active' : '']" @click="onThemeChange('dark')"></span>
|
|
|
+ <span :class="['color-item',cloudSetting.curTheme === 'light' ? 'color-item-active' : '']" @click="onThemeChange('light')"></span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="normal-settings-item">
|
|
|
<span class="item-title">菜单显示设置</span>
|
|
|
<span class="item-description">选择左侧Menu在网站载入时的预设显示模式</span>
|
|
|
<span class="item-content">
|
|
|
- <RadioGroup v-model="menuStatus">
|
|
|
+ <RadioGroup v-model="cloudSetting.menuStatus">
|
|
|
<Radio label="open">预设展开显示</Radio>
|
|
|
<Radio label="close">预设关闭显示</Radio>
|
|
|
</RadioGroup>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="normal-settings-item">
|
|
|
- <Button>保存变更</Button>
|
|
|
+ <Button @click="saveSetting">保存变更</Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<SchoolMgmt v-else></SchoolMgmt>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -50,22 +50,53 @@
|
|
|
<script>
|
|
|
import SchoolMgmt from './SchoolMgmt.vue'
|
|
|
export default {
|
|
|
- components:{ SchoolMgmt },
|
|
|
- data(){
|
|
|
+ components: {
|
|
|
+ SchoolMgmt
|
|
|
+ },
|
|
|
+ data() {
|
|
|
return {
|
|
|
- activeTab:'0',
|
|
|
- activeTheme:'0',
|
|
|
- menuStatus:'open',
|
|
|
- curLang:'zh-CN',
|
|
|
- isHomeworkLang:true,
|
|
|
+ activeTab: '0',
|
|
|
+ activeTheme: '0',
|
|
|
+ menuStatus: 'open',
|
|
|
+ curLang: 'zh-CN',
|
|
|
+ isHomeworkLang: true,
|
|
|
+ cloudSetting: {
|
|
|
+ curLang: 'zh-CN',
|
|
|
+ curTheme: 'dark',
|
|
|
+ isSystemLang: true,
|
|
|
+ menuStatus: 'open'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- onTabChange(index){
|
|
|
+ created() {
|
|
|
+ if(localStorage.getItem('cloudSetting')){
|
|
|
+ this.cloudSetting = JSON.parse(localStorage.getItem('cloudSetting'))
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ /* 一般设置与学校管理切换 */
|
|
|
+ onTabChange(index) {
|
|
|
this.activeTab = index
|
|
|
},
|
|
|
- onThemeChange(index){
|
|
|
- this.activeTheme = index
|
|
|
+
|
|
|
+ /* 主题切换 */
|
|
|
+ onThemeChange(index) {
|
|
|
+ this.cloudSetting.curTheme = index
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 保存设置 */
|
|
|
+ saveSetting() {
|
|
|
+ this.$Modal.confirm({
|
|
|
+ title: '提示',
|
|
|
+ content: '设置保存成功,刷新后即可生效,是否前往?',
|
|
|
+ okText: '确认',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk: () => {
|
|
|
+ localStorage.setItem('cloudSetting', JSON.stringify(this.cloudSetting))
|
|
|
+ location.reload()
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -76,30 +107,30 @@
|
|
|
</style>
|
|
|
|
|
|
<style lang="less">
|
|
|
- .settings-container{
|
|
|
-
|
|
|
- .ivu-select-selection{
|
|
|
+ .settings-container {
|
|
|
+
|
|
|
+ .ivu-select-selection {
|
|
|
background: transparent;
|
|
|
border-color: #363738;
|
|
|
- color:#a6a6a6;
|
|
|
+ color: #a6a6a6;
|
|
|
}
|
|
|
-
|
|
|
- .ivu-checkbox-wrapper{
|
|
|
+
|
|
|
+ .ivu-checkbox-wrapper {
|
|
|
margin-left: 40px;
|
|
|
margin-top: 5px;
|
|
|
- color:#a6a6a6;
|
|
|
+ color: #a6a6a6;
|
|
|
}
|
|
|
-
|
|
|
- .ivu-checkbox{
|
|
|
+
|
|
|
+ .ivu-checkbox {
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
-
|
|
|
- .ivu-radio-wrapper{
|
|
|
+
|
|
|
+ .ivu-radio-wrapper {
|
|
|
margin-right: 20px;
|
|
|
- color:#a5a5a5;
|
|
|
+ color: #a5a5a5;
|
|
|
}
|
|
|
-
|
|
|
- .ivu-radio-inner{
|
|
|
+
|
|
|
+ .ivu-radio-inner {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
border-radius: 4px;
|
|
@@ -107,25 +138,25 @@
|
|
|
border-color: #4d4d4d;
|
|
|
border-width: 1px;
|
|
|
margin-right: 5px;
|
|
|
-
|
|
|
- &::after{
|
|
|
- content:'';
|
|
|
- display:block;
|
|
|
- width:10px;
|
|
|
- height:16px;
|
|
|
- border-right:#ffffff solid 3px;
|
|
|
- border-bottom:#ffffff solid 3px;
|
|
|
- transform:rotate(35deg);
|
|
|
- position:absolute;
|
|
|
- top:-4px;
|
|
|
- left:4px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+ border-right: #ffffff solid 3px;
|
|
|
+ border-bottom: #ffffff solid 3px;
|
|
|
+ transform: rotate(35deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -4px;
|
|
|
+ left: 4px;
|
|
|
border-radius: 0;
|
|
|
background-color: transparent;
|
|
|
- border-color:#0094FF;
|
|
|
+ border-color: #0094FF;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .ivu-checkbox-inner{
|
|
|
+
|
|
|
+ .ivu-checkbox-inner {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
border-radius: 4px;
|
|
@@ -134,8 +165,8 @@
|
|
|
border-width: 1px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
-
|
|
|
- .ivu-checkbox-checked .ivu-checkbox-inner{
|
|
|
+
|
|
|
+ .ivu-checkbox-checked .ivu-checkbox-inner {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
border-radius: 4px;
|
|
@@ -143,25 +174,25 @@
|
|
|
border-color: #4d4d4d;
|
|
|
border-width: 1px;
|
|
|
margin-right: 5px;
|
|
|
-
|
|
|
- &::after{
|
|
|
- content:'';
|
|
|
- display:block;
|
|
|
- width:10px;
|
|
|
- height:16px;
|
|
|
- border-right:#ffffff solid 3px;
|
|
|
- border-bottom:#ffffff solid 3px;
|
|
|
- transform:rotate(35deg);
|
|
|
- position:absolute;
|
|
|
- top:-4px;
|
|
|
- left:4px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 16px;
|
|
|
+ border-right: #ffffff solid 3px;
|
|
|
+ border-bottom: #ffffff solid 3px;
|
|
|
+ transform: rotate(35deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -4px;
|
|
|
+ left: 4px;
|
|
|
border-radius: 0;
|
|
|
background-color: transparent;
|
|
|
- border-color:#0094FF;
|
|
|
+ border-color: #0094FF;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
</style>
|