完成区班校教室设定页面

TEAMModelOS/ClientApp/router/routes.js

@@ -108,7 +108,7 @@ export const routes = [
       {
         name: 'classroom',
         path: '/school/classroom',
-        component: resolve => require(['@/view/school-mgmt/SystemSetting/SystemSetting.vue'], resolve)
+        component: resolve => require(['@/view/school-mgmt/ClassroomSetting/ClassroomSetting.vue'], resolve)
       }
     ]
   },

TEAMModelOS/ClientApp/view/school-mgmt/ClassroomSetting/ClassroomSetting.less

@@ -1,31 +1,253 @@
-.login{
-    &-body{
-        height: 88%;
-        display: -webkit-flex;
-        display:         flex;
-        -webkit-align-items: center;
-                align-items: center;
-        -webkit-justify-content: center;
-                justify-content: center;
-        .center-box{
-            width: 64%;
-            height: 53%;
-        } 
-    }
-    &-footer{
-        height: 12%;
-        text-align: center;
-        position: relative;
-        .footer-title{
-            color: #fefefe;
+@main-bgColor: rgb(40,40,40); //主背景颜色
+@borderColor: #424242; //边框颜色
+@primary-textColor: #fff; //文本主颜色
+@second-textColor: #a5a5a5; //文本副级颜色
+@primary-fontSize: 14px;
+@second-fontSize: 16px;
+@large-fontSize: 20px;
+.container-box{
+    height:100%;
+}
+.position-full-height(@top:80px) {
+    position: absolute;
+    top: @top;
+    bottom: 0px;
+}
+.border(right) {
+    border-right: 1px solid @borderColor;
+}
+.border(top) {
+    border-top: 1px solid @borderColor;
+}
+.border(left) {
+    border-left: 1px solid @borderColor;
+}
+.border(bottom) {
+    border-bottom: 1px solid @borderColor;
+}
+.container-left {
+    width: 59%;
+    .border(right);
+    .position-full-height;
+
+    &-title {
+        -moz-width: ~"calc(100%-30px)";
+        -webkit-width: ~"calc(100%-30px)";
+        width: ~"calc(100%-30px)";
+        margin-left: 30px;
+        height: 50px;
+        .border(bottom);
+        line-height: 50px;
+        padding-right: 35px;
+    }
+}
+.container-right {
+    width: 41%;
+    .position-full-height;
+    left: 59%;
+
+    &-title {
+        -moz-width: ~"calc(100%-30px)";
+        -webkit-width: ~"calc(100%-30px)";
+        width: ~"calc(100%-30px)";
+        margin-left: 30px;
+        height: 50px;
+        line-height: 50px;
+        .border(bottom);
+    }
+}
+.first-title {
+    font-size: @primary-fontSize+1;
+    color: @second-textColor;
+    font-weight:900;
+}
+.label-style {
+    font-size: @primary-fontSize - 1;
+    color: @second-textColor;
+    float: right;
+    margin-left:50px;
+}
+.label-style .label-icon{
+    margin-right:15px;
+}
+
+.school-plan-wrap{
+    position:absolute;
+    top:50px;
+    bottom:0px;
+    width:100%;
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    align-items:center;
+}
+.school-plan-wrap p{
+    position:absolute;
+    top:0px;
+    right:0px;
+    padding:8px 35px 6px 20px;
+    .border(bottom);
+    color:white;
+    cursor:pointer;
+}
+.school-plan-wrap .label-icon {
+    margin-right: 15px;
+
+}
+.container-left-wrap{
+    width:100%;
+}
+.container-left-box {
+    width: 38%;
+    .border(right);
+    .position-full-height(50px);
+
+    .list-order {
+        padding: 5px 0px 5px 40px;
+        color: white;
+        .label-icon{
+            margin-right:10px;
+        }
+    }
+}
+.container-right-box {
+    width: 62%;
+    position: absolute;
+    left: 38%;
+    top: 50px;
+    height: ~"calc(100% - 50px)";
+    -moz-height: ~"calc(100% - 50px)";
+    -webkit-height: ~"calc(100% - 50px)";
+}
+.class-search-input{
+    width:~"calc(100% - 40px)";
+    -moz-width:~"calc(100% - 40px)";
+    -webkit-width:~"calc(100% - 40px)";
+    height:30px;
+    margin-left:40px;
+    .border(bottom);
+}
+.class-list {
+    width: 100%;
+    .border(top);
+    padding-left: 40px;
+    overflow: auto;
+    position:absolute;
+    top:68px;
+    bottom:0px;
+    &::-webkit-scrollbar { /*滚动条整体样式*/
+        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+    }
+
+    &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        background: rgb(124,124,124);
+    }
+
+    &::-webkit-scrollbar-track { /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+        background: rgba(68,68,68,.5);
+    }
+}
+.class-list-item {
+    padding: 8px 0px;
+    position: relative;
+    .border(bottom);
+
+    &:hover {
+        background-image: -webkit-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
+        background-image: -o-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
+        background-image: -moz-linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
+        background-image: linear-gradient(90deg, rgba(30,30,30,0) 0%, rgba(110,110,110,.2) 50%, rgba(110,110,110,.4) 100%);
+
+        .period-btn-edit {
+            display: inline-block;
+        }
+
+        .class-list-item-tool {
+            display: unset;
         }
-        .link{
-            color: rgb(220, 220, 220);
-            font-size: 1.2em;
-            text-decoration: underline;
+    }
+}
+.class-name {
+    font-size: @large-fontSize;
+    color: white;
+    font-weight: 900;
+}
+.second-text-color {
+    color: @second-textColor;
+}
+.second-text-color {
+    color: @second-textColor;
+}
+.class-hiteach-code {
+}
+.class-type {
+    
+}
+.primary-text-color{
+    color:@primary-textColor;
+}
+.class-list-item-tool {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    font-size: 24px;
+    color: @primary-textColor;
+    display: none;
+
+    .ivu-icon {
+        margin-left: 5px;
+        cursor:pointer;
+    }
+}
+.class-attr-wrap{
+    width:47%;
+    position:absolute;
+    top:50px;
+    bottom:0px;
+    left:0px;
+    .border(right);
+    padding-left:30px;
+    &-label{
+        display:block;
+        color:@second-textColor;
+        font-size:@second-fontSize - 4px;
+        margin-top:30px;
+        margin-bottom:10px;
+    }
+}
+.hiteach-code-wrap {
+    width: 53%;
+    position: absolute;
+    top: 50px;
+    bottom: 0px;
+    left: 47%;
+
+    &-header {
+        width: ~"calc(100% - 30px)";
+        -moz-width: ~"calc(100% - 30px)";
+        -webkit-width: ~"calc(100% - 30px)";
+        margin-left:30px;
+        p{
+            padding:10px 0px;
+            color:@second-textColor;
+            .border(bottom);
         }
-        .demarcation{
-            color: rgb(220, 220, 220);
+    }
+    &-list{
+        .border(top);
+        position:absolute;
+        left:0px;
+        top:70px;
+        bottom:0px;
+        width:100%;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        h1{
+            margin-top:-120px;
         }
     }
-}
+}

TEAMModelOS/ClientApp/view/school-mgmt/ClassroomSetting/ClassroomSetting.vue

@@ -1,84 +1,156 @@
 <style lang="less" scoped>
-  @import './Index.less';
-</style>
 
+  @import './ClassroomSetting.less';
+</style>
+<style>
+  .class-search-input .ivu-input {
+    height: 30px;
+    background: none;
+    line-height: 30px;
+    border: none;
+  }
+  .hiteach-code-wrap-header .ivu-input {
+    width:calc(100% - 30px);
+    -webkit-width:calc(100% - 30px);
+    -moz-width:calc(100% - 30px);
+    background:none;
+    border:none;
+    border-radius:0px;
+    font-size:12px;
+    color:#424242;
+  }
+  .class-attr-wrap .ivu-input {
+    width:calc(100% - 30px);
+    -webkit-width:calc(100% - 30px);
+    -moz-width:calc(100% - 30px);
+    background:none;
+    border:none;
+    border-radius:0px;
+    font-size:16px;
+    border-bottom: 2px solid #424242;
+  }
+  .class-attr-wrap .ivu-select {
+    width:calc(100% - 30px);
+    -webkit-width:calc(100% - 30px);
+    -moz-width:calc(100% - 30px);
+  }
+  .class-attr-wrap .ivu-select-selection {
+    background:none;
+    border-color: #424242;
+  }
+  .class-attr-wrap .ivu-divider {
+    background-color:#424242;
+  }
+</style>
 <template>
-  <div id="login" class="login backdrop-light">
-    <div class="login-body">      
-      <div class="center-box">
-        <img style="width:33%;" src="@/assets/mark.svg"/>
-        <h2 style="color:#c5b381e0;">歡迎來到醍摩豆雲平台 ！ 請選擇您的身分進行登入 ！</h2>
-        <Row style="margin-top: 50px;">
-          <Col :span="12" style="border-right: 1px solid #fff;">
-            <div style="width: 450px;margin: auto;">         
-              <div style="padding: 5px 0;" >                
-                <h1 style="color: #fefefe;font-weight: 100;display: inline-block;vertical-align: middle;">教師身分登入 | </h1>
-                <div style="display: inline-block;vertical-align: middle;">
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                </div>
-              </div>
-              <div style="padding: 5px 0;" >
-                <Input v-model="value" placeholder="醍摩豆帳號" />
-              </div>
-              <div style="padding: 5px 0;" >
-                <Input v-model="value" placeholder="密碼"/>
-              </div>
-              <div style="padding: 1px 0;" >
-                <Checkbox v-model="single" style="color: #fefefe;">記住我的登入資訊</Checkbox><a>  | 忘記帳號/密碼?</a>
+  <div class="container-box">
+    <div class="container-left">
+      <div class="container-left-title">
+        <span class="first-title">教室列表</span>
+        <span class="label-style"><Icon class="label-icon" color="white" type="ios-albums-outline" />储存变更</span>
+        <span class="label-style"><Icon class="label-icon" color="white" type="md-add" />新增教室</span>
+      </div>
+      <div class="container-left-wrap">
+        <div class="container-left-box">
+          <div class="class-search-input">
+            <Input placeholder="请输入关键字或资讯" style="width: 100%;height:30px;">
+            <Icon style="margin-top:0px;" type="ios-search" slot="suffix" />
+            </Input>
+          </div>
+          <p class="list-order">
+            <Icon class="label-icon" color="white" type="md-funnel" />
+            依创建时间排序
+          </p>
+          <div class="class-list">
+            <div class="class-list-item" v-for="(item,index) in classList">
+              <div class="class-list-item-left">
+                <p class="class-name">预设教室</p>
+                <p class="class-hiteach-code second-text-color">未输入HiTeach软件序号</p>
+                <p class="class-type second-text-color">
+                  <Icon type="md-arrow-dropright" size="18" />一般教室{{index}}
+                </p>
+                <p class="second-text-color">
+                  <span>学生人数：</span>
+                  <span class="primary-text-color">0</span>
+                  <span>|</span>
+                  <span>班主任：</span>
+                  <span class="primary-text-color">未指定班主任</span>
+                </p>
               </div>
-              <div style="padding: 5px 0;text-align: right;" >
-                <Button style="width: 150px;background-color: #082835;color:#fefefe;">登入</Button>
+              <div class="class-list-item-tool">
+                <Icon type="ios-copy" title="不知道" />
+                <Icon type="md-trash" title="删除" />
               </div>
             </div>
-          </Col>
-          <Col :span="12">
-            <div style="width: 450px;margin: auto;">         
-              <div style="padding: 5px 0;" >                
-                <h1 style="color: #fefefe;font-weight: 100;display: inline-block;vertical-align: middle;">學生身分登入 | </h1>
-                <div style="display: inline-block;vertical-align: middle;">
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                  <a style="margin: 0 10px;"><img style="width: 30px;" src="@/assets/image/touxiang.png"></a>
-                </div>
-              </div>
-              <div style="padding: 5px 0;" >
-                <Input v-model="value" placeholder="醍摩豆帳號" />
-              </div>
-              <div style="padding: 5px 0;" >
-                <Input v-model="value" placeholder="密碼"/>
-              </div>
-              <div style="padding: 1px 0;" >
-                <Checkbox v-model="single" style="color: #fefefe;">記住我的登入資訊</Checkbox><a>  | 忘記帳號/密碼?</a>
-              </div>
-              <div style="padding: 5px 0;text-align: right;" >
-                <Button style="width: 150px;background-color: #082835;color:#fefefe;">登入</Button>
-              </div>
+          </div>
+        </div>
+
+        <div class="container-right-box">
+          <div class="container-right-title">
+            <span class="first-title">教室属性</span>
+          </div>
+          <div class="class-attr-wrap">
+            <span class="class-attr-wrap-label">教室名称</span>
+            <Input v-model="className" placeholder="请输入教室名称..." />
+            <span class="class-attr-wrap-label">班主任设定</span>
+            <Input v-model="headmaster" placeholder="请输入指定教师名称..." />
+            <span class="class-attr-wrap-label">选择教室学段</span>
+            <Select v-model="model1">
+              <Option v-for="item in periodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <span class="class-attr-wrap-label">选择教室年级</span>
+            <Select v-model="model1">
+              <Option v-for="item in gradeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <span class="class-attr-wrap-label">HiTeach软件序号</span>
+            <Input v-model="hiteachCode" placeholder="请输入序号或在右侧列表选择可用序号..." />
+            <Divider style="margin-top:60px;color:#424242;" />
+          </div>
+          <div class="hiteach-code-wrap">
+            <div class="hiteach-code-wrap-header">
+              <p>HiTeach序号列表（星号为大量授权序号）</p>
+              <Input placeholder="请输入关键字或资讯" style="width: 100%;height:30px;">
+              <Icon style="margin-top:0px;" type="ios-search" slot="suffix" />
+              </Input>
+            </div>
+            <div class="hiteach-code-wrap-list">
+              <h1>没有序号登录</h1>
             </div>
-          </Col>
-        </Row>
+          </div>
+        </div>
+        
       </div>
     </div>
-    <div class="login-footer">
-      <h2 class="footer-title">
-        相關連結
-      </h2>
-      <a class="link">AClassONE智慧學伴網頁版</a><span class="demarcation">&nbsp;&nbsp;|&nbsp;&nbsp;</span><a class="link">AClassONE智慧學伴網頁版</a><span class="demarcation">&nbsp;&nbsp;|&nbsp;&nbsp;</span><a class="link">AClassONE智慧學伴網頁版</a>
-      <h5 style="position: absolute;bottom:0;width: 100%;padding: 7px;color: #515a6e;">&copy; HABOOL Group 2019</h5>
+    <div class="container-right">
+      <div class="container-right-title">
+        <span class="first-title">校园平面图与教室位置设定</span>
+      </div>
+      <div class="school-plan-wrap">
+        <p><Icon class="label-icon" color="white" type="ios-cloud-upload-outline" size="20" />长传平面图</p>
+        <h1>未上传平面图</h1>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  data () {
-    return {
+  export default {
+    data() {
+      return {
+        model1:'',
+        headmaster: '',
+        className: '',
+        hiteachCode:'',
+        classList: [],
+        periodList: [],
+        gradeList:[]
+      }
+    },
+    methods: {
 
+    },
+    mounted() {
+      this.classList = [...Array(10).keys()];
     }
-  },
-  methods:{
-    
   }
-}
-</script>
+</script>

TEAMModelOS/ClientApp/view/school-mgmt/SystemSetting/SystemSetting.vue

@@ -32,7 +32,6 @@
                 <Icon type="ios-copy" title="不知道"/>
                 <Icon type="md-trash" title="删除"/>
               </div>
-
             </div>
           </div>
       </div>