|
@@ -0,0 +1,167 @@
|
|
|
+<template>
|
|
|
+ <div class="settings-container">
|
|
|
+ <div class="settings-header">
|
|
|
+ <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">
|
|
|
+ <Option value="zh-CN">中文(简体)</Option>
|
|
|
+ <Option value="zh-TW">中文(繁体)</Option>
|
|
|
+ <Option value="en-US">英语</Option>
|
|
|
+ </Select>
|
|
|
+ <Checkbox v-model="isHomeworkLang">使用您作业系统的语系来展示</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>
|
|
|
+ </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">
|
|
|
+ <Radio label="open">预设展开显示</Radio>
|
|
|
+ <Radio label="close">预设关闭显示</Radio>
|
|
|
+ </RadioGroup>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="normal-settings-item">
|
|
|
+ <Button>保存变更</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <SchoolMgmt v-else></SchoolMgmt>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import SchoolMgmt from './SchoolMgmt.vue'
|
|
|
+ export default {
|
|
|
+ components:{ SchoolMgmt },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ activeTab:'0',
|
|
|
+ activeTheme:'0',
|
|
|
+ menuStatus:'open',
|
|
|
+ curLang:'zh-CN',
|
|
|
+ isHomeworkLang:true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ onTabChange(index){
|
|
|
+ this.activeTab = index
|
|
|
+ },
|
|
|
+ onThemeChange(index){
|
|
|
+ this.activeTheme = index
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import "./Index.less";
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .settings-container{
|
|
|
+
|
|
|
+ .ivu-select-selection{
|
|
|
+ background: transparent;
|
|
|
+ border-color: #363738;
|
|
|
+ color:#a6a6a6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-checkbox-wrapper{
|
|
|
+ margin-left: 40px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color:#a6a6a6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-checkbox{
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-radio-wrapper{
|
|
|
+ margin-right: 20px;
|
|
|
+ color:#a5a5a5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-radio-inner{
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #0f0f0f;
|
|
|
+ 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;
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ border-color:#0094FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-checkbox-inner{
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #0f0f0f;
|
|
|
+ border-color: #4d4d4d;
|
|
|
+ border-width: 1px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-checkbox-checked .ivu-checkbox-inner{
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #0f0f0f;
|
|
|
+ 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;
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ border-color:#0094FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+</style>
|