问题修改

src/components/evaluationSystem/evaluationDepartmentPage.vue

@@ -76,7 +76,7 @@
                                 :key="item.id"
                                 :label="item.userName"
                                 :value="item.id">
-                                <span style="float: left">{{ item.userName }}</span>
+                                <span style="float: left;display:inline-block;width:100px">{{ item.userName }}</span>
                                 <span style="float: right;color: #909399;font-size: 13px;" >{{ item.posName }}</span>
                                 </el-option>
                             </el-select>
@@ -120,7 +120,13 @@ export default {
             leaderS: '',
             evaluationDepartmentData:[],
             departData: [],
-            deptLeaderOption: [],
+            deptLeaderOption: [
+                {
+                    userName: '人事部',
+                    posName: '管理岗',
+                    id: '2021252'
+                }
+            ],
             addW: addW,
             addIcon: addIcon,
             ruleForm: {
@@ -194,7 +200,7 @@ export default {
             apiGetorganizationstructureFromTree(params).then(datas =>{
                 if (datas && datas.data) {
                     that.departData = datas.data[0].children
-                    that.changeDeptLead(that.departData[0].id)
+                    // that.changeDeptLead(that.departData[0].id)
                 }
             })
         },
@@ -241,7 +247,6 @@ export default {
         },
         saveevaluationDepartmentMsg(formName) {
             let that = this
-            debugger
             that.$refs[formName].validate((valid) => {
                 if (valid) {
                     that.saveAndEditIndicatorData()
@@ -263,14 +268,22 @@ export default {
                     deptLeaderNameS = item.userName
                 }
             })
-            let depaIn = that.ruleForm.departmentIn.split(',')
+            let yjzbjhTypeIn = '0'
+            let jxjgkhsbTypeIn = '0'
+            that.ruleForm.departmentIn.forEach(it => {
+                if (it === '业绩指标计划') {
+                    yjzbjhTypeIn = '1'
+                } else if (it === '绩效考核申报') {
+                    jxjgkhsbTypeIn = '1'
+                }
+            })
             let params = {
                 deptId: that.ruleForm.department,
                 deptName: deptNameS,
                 chargePersonId: that.ruleForm.departmentLeader,
                 chargePersonName: deptLeaderNameS,
-                yjzbjhType: depaIn.indexOf('业绩指标计划') > 0 ? '1' : '0',
-                jxjgkhsbType: depaIn.indexOf('绩效考核申报') > 0 ? '1' : '0'
+                yjzbjhType: yjzbjhTypeIn,
+                jxjgkhsbType: jxjgkhsbTypeIn
             }
             if (that.isSave) {
                 params.id = that.evalradio.id

src/mobeilComponent/notificationPage.vue

@@ -0,0 +1,340 @@
+<template>
+    <div :class="showDatePicker || showSelect? 'homeMobeilMask': ''">
+    </div>
+    <div class="notificationPage">
+        <van-nav-bar title="对标考评公告" />
+        <div class="mobeilVant">
+            <div class="mobeilTop">
+                <div class="topLeft">
+                    <!-- <van-icon name="star" size="20" /> -->
+                    <img :src="logoImg" alt="">
+                    <span>全业务域考评系统</span>
+                </div>
+                <div class="topRight">
+                    <span>系统导航</span>
+                    <!-- <van-icon name="wap-nav"  size="23" /> -->
+                    <img :src="daohangImg" alt="" @click="chooseMenu">
+                </div>
+            </div>
+            <div class="notificationMain">
+                <div class="mainSeach">
+                    <div class="rankingList">
+                        <span>{{showDate}}年度</span>
+                        <img :src="dateImg" @click="changePickerDate" alt="">
+                    </div>
+                    <div class="sectionModel">
+                        <span @click="changeSelect">{{binSectionName}}板块</span>
+                    </div>
+                    <div class="mainSeachImg">
+                        <img :src="sortImg" alt="">
+                        <img :src="seachImg" alt="" @click="getNotificationData(binSection, showDate)">
+                    </div>
+                </div>
+                <van-date-picker
+                    v-model="currentDate"
+                    title="选择年季"
+                    :columns-type="['year', 'month']"
+                    :filter="filterPicker"
+                    @confirm="confirmFn"
+                    @cancel="cancelpickerFn"
+                    v-if="showDatePicker"
+                    />
+                <van-picker
+                    title="选择板块"
+                    :columns="columnSection"
+                    @confirm="selectConfirm"
+                    @cancel="cancelSelect"
+                    v-if="showSelect"
+                    />
+                <div class="mainModel">
+                    <el-table :data="noticeData" style="width: 100%">
+                    <el-table-column type="index" label="序号" align="center"></el-table-column>
+                    <el-table-column label="公告名称" prop="noticeTitle" width="130" />
+                    <el-table-column label="所属部门" prop="releaseDeptName" width="150" />
+                    <el-table-column label="创建时间" width="100">
+                        <template #default="scope">
+                            <span>{{scope.row.createTime.substring(0, scope.row.createTime.indexOf(' '))}}</span>
+                        </template>
+                    </el-table-column> 
+                </el-table>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import logoImg from '../assets/mobeilImg/logo.png'
+import daohangImg from '../assets/mobeilImg/daohang.png'
+import dateImg from '../assets/mobeilImg/date.png'
+import sortImg from '../assets/mobeilImg/sort.png'
+import seachImg from '../assets/mobeilImg/seach.png'
+
+import {apiGetevaluationCircularDisplaylist} from '../api/api'
+export default {
+    data() {
+        return {
+            logoImg: logoImg,
+            daohangImg: daohangImg,
+            dateImg: dateImg,
+            sortImg: sortImg,
+            seachImg: seachImg,
+            showDatePicker: false,
+            showSelect: false,
+            currentDate: [],
+            showDate: '',
+            binSection: 'HD',
+            binSectionName: '火电',
+            noticeData: [],
+            columnSection: []
+        }
+    },
+    created() {
+        this.showDate = new Date().getFullYear()-1
+        this.getNotificationData()
+        this.columnSection = [
+            { text: '火电', value: 'HD' },
+            { text: '水电', value: 'SD' },
+            { text: '新能源', value: 'XNYFG' },
+            { text: '海外业务', value: 'GJYW' },
+            { text: '煤电一体化', value: 'MDYTH' }
+        ]
+        
+    },
+    methods: {
+        // 获取公告数据
+        getNotificationData() {
+            let that = this
+            // let userMes = JSON.parse(window.sessionStorage.getItem('user'))
+            // if (userMes.deptId) {
+                let params = {
+                    // deptId: userMes.deptId,
+                    deptId: '1',
+                    noticeTitle: ''
+                }
+                apiGetevaluationCircularDisplaylist(params).then(datas => {
+                    if (datas && datas.data) {
+                        that.noticeData = datas.data
+                    }
+                })
+            // }
+        },
+        filterPicker(type, options) {
+            if (type === 'month') {
+                return options.filter((option) => Number(option.value) < 5);
+            }
+            return options;
+        },
+        chooseMenu() {
+            this.$router.push({ path: "/menu"})
+        },
+        changePickerDate() {
+            this.showDatePicker = true
+        },
+        changeSelect() {
+            this.showSelect = true
+        },
+        confirmFn(val) {
+            this.showDate = val.selectedValues[0]
+            this.cancelpickerFn()
+        },
+        selectConfirm(val) {
+            this.binSection = val.selectedValues[0]
+            if (this.binSection === 'HD') {
+                this.binSectionName = '火电'
+            } else if (this.binSection === 'SD') {
+                this.binSectionName = '水电'
+            } else if (this.binSection === 'XNYFG') {
+                this.binSectionName = '新能源'
+            } else if (this.binSection === 'GJYW') {
+                this.binSectionName = '海外业务'
+            } else if (this.binSection === 'MDYTH') {
+                this.binSectionName = '煤电一体化'
+            }
+            this.cancelSelect()
+        },
+        cancelpickerFn() {
+            this.showDatePicker = false
+        },
+        cancelSelect() {
+            this.showSelect = false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.homeMobeilMask{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 111;
+}
+.notificationPage {
+    background-color: #184FB4;
+    .van-nav-bar{
+        width: 100%;
+        background-color: #184FB4;
+        color: #fff;
+        position: fixed;
+        top: 0;
+        z-index: 111111;
+        .van-nav-bar__content{
+            .van-nav-bar__left{
+                .van-nav-bar__text{
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .mobeilVant{
+        height: 100%;
+        margin-top: 45px;
+        border-radius: 10px 10px 0 0;
+        background-color: #fff;
+        .mobeilTop{
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            .topLeft{
+                display: flex;
+                img{
+                    width: 24px;
+                    height: 28px;
+                    position: relative;
+                    top: 18px;
+                    left: -10px;
+                }
+                span{
+                    font-family: MicrosoftYaHei;
+                    font-weight: 600;
+                    font-size: 16px;
+                    color: #444950;
+                    line-height: 60px;
+                }
+            }
+            .topRight{
+                display: flex;
+                img{
+                    width: 22px;
+                    height: 18px;
+                    position: relative;
+                    top: 21px;
+                    left: 5px;
+                }
+                span{
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #545960;
+                    line-height: 60px;
+                    margin-right: 5px;
+                }
+            }
+        }
+        .notificationMain{
+            // height: 50px;
+            background-color: #ededf5;
+            padding: 17px 20px;
+            width: calc(100% - 40px);
+            .mainSeach{
+                display: flex;
+                // justify-content: space-between;
+                .rankingList{
+                    width: 37%;
+                    height: 40px;
+                    background: #184FB4;
+                    border-radius: 5px;
+                    margin-bottom: 15px;
+                    margin-right: 10px;
+                    span{
+                        display: inline-block;
+                        width: 85%;
+                        font-family: MicrosoftYaHei;
+                        font-weight: 400;
+                        font-size: 16px;
+                        color: #fff;
+                        margin-right: 5px;
+                        position: relative;
+                        left: 20px;
+                        top: 10px;
+                    }
+                    img{
+                        width: 22px;
+                        height: 18px;
+                        position: relative;
+                        top: -10px;
+                        left: 90px;
+                    }
+                }
+                .sectionModel{
+                    width: 37%;
+                    height: 40px;
+                    background: #838DAB;
+                    border-radius: 5px;
+                    margin-bottom: 15px;
+                    margin-right: 15px;
+                    span{
+                        display: inline-block;
+                        width: 100%;
+                        line-height: 40px;
+                        text-align: center;
+                        color: #fff;
+                    }
+                }
+                .mainSeachImg{
+                    width: 17%;
+                    display: flex;
+                    justify-content: space-between;
+                    position: relative;
+                    top: 10px;
+                    img:nth-child(1){
+                        width: 25px;
+                        height: 15px;
+                        position: relative;
+                        top: 2px;
+                    }
+                    img:nth-child(2){
+                        width: 22px;
+                        height: 22px;
+                    }
+                }
+            }
+            .van-picker{
+                z-index: 222222
+            }
+            .mainModel{
+                background: #fff;
+                border-radius: 5px;
+                padding: 5px 0;
+                .el-table{
+                    .el-table__header-wrapper{
+                        .el-table__header{
+                            tr{
+                                .cell{
+                                    line-height: 18px !important;
+                                }
+                            }
+                        }
+                    }
+                    .el-table__body-wrapper{
+                        .el-table__body{
+                            tr{
+                                .cell{
+                                    img{
+                                        width: 20px;
+                                        height: 20px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/mobeilComponent/reportConpanyPage.vue

@@ -27,7 +27,7 @@
                     </div>
                     <div class="mainSeachImg">
                         <img :src="sortImg" alt="">
-                        <img :src="seachImg" alt="" @click="getYearData(binSection, showDate)">
+                        <img :src="seachImg" alt="" @click="getReportData(binSection, showDate)">
                     </div>
                 </div>
                 <van-date-picker
@@ -116,7 +116,7 @@ export default {
         
     },
     methods: {
-        // 获取年度评级详情
+        // 获取考评报告数据
         getReportData(name, year) {
             let that = this
             that.mobeilReportData = []

src/mobeilComponent/seasonConpanyPage.vue

@@ -27,7 +27,7 @@
                     </div>
                     <div class="mainSeachImg">
                         <img :src="sortImg" alt="">
-                        <img :src="seachImg" alt="" @click="getYearData(binSection, showDate)">
+                        <img :src="seachImg" alt="" @click="getSeasonData(binSection, showDate)">
                     </div>
                 </div>
                 <van-date-picker
@@ -129,7 +129,7 @@ export default {
     },
     created() {
         this.showDate = new Date().getFullYear()-1
-        this.getYearData(this.binSection, this.showDate)
+        this.getSeasonData(this.binSection, this.showDate)
         this.columnSection = [
             { text: '火电', value: 'HD' },
             { text: '水电', value: 'SD' },
@@ -139,8 +139,8 @@ export default {
         ]
     },
     methods: {
-        // 获取年度评级详情
-        getYearData(name, year) {
+        // 获取季度评级详情
+        getSeasonData(name, year) {
             let that = this
             that.seasonConpanyData = []
             let params = {

src/router/index.js

@@ -407,7 +407,7 @@ const routes = [
         path: '/quarterConpany',
         name: 'quarterConpany',
         meta: {
-            title: '季度单位评级详情',
+            title: '季度单位评级',
         },
         component: () =>
             import(
@@ -424,6 +424,17 @@ const routes = [
             import(
                 '../mobeilComponent/reportConpanyPage.vue'
             ),
+    },
+    {
+        path: '/notification',
+        name: 'notification',
+        meta: {
+            title: '对标考评公告',
+        },
+        component: () =>
+            import(
+                '../mobeilComponent/notificationPage.vue'
+            ),
     }
 ]
 

src/views/Login.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isSinglePoint === 'noSinglePoint'">
+    <div class="PCandMobeilLogin" v-if="isSinglePoint === 'noSinglePoint'">
         <div class="loginPic" v-if="isMobile === 'PC'">
             <div class="login_right">
                 <img class="titleIcon" src="../assets/loginImage/logo.png" alt="">
@@ -206,245 +206,247 @@ export default {
         }
     }
 }
-.loginPic{
-    position: relative;
-    width: 100%;
-    height:1080px;
-    background-image: url('../assets/loginImage/logindefBak.png');
-    background-position: 0 0;
-    background-repeat: no-repeat;
-    display: flex;
-    .login_left{
-        position: fixed;
-        left: 15%;
-        top: 35%;
-        p{
-            margin-bottom: 0px;
-            font-size: 32px;
-            color: #fff;
-            margin-top: 10px;
-        }
-        .title{
-            letter-spacing: 5px;
-        }
-    }
-    .login_right{
-        width: 470px;
-        height:680px;
-        background: rgba(0,0,0,0.4);
-        position: fixed;
-        right: 15%;
-        top: 15%;
-        .titleIcon{
-            margin: 100px 0px 43px 95px;
+.PCandMobeilLogin{
+    .loginPic{
+        position: relative;
+        width: 100%;
+        height:100vh;
+        background-image: url('../assets/loginImage/logindefBak.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        display: flex;
+        .login_left{
+            position: fixed;
+            left: 15%;
+            top: 35%;
+            p{
+                margin-bottom: 0px;
+                font-size: 32px;
+                color: #fff;
+                margin-top: 10px;
+            }
+            .title{
+                letter-spacing: 5px;
+            }
         }
-        .loginCom{
-            margin: 0 30px 0px 43px;
-            width: 384px;
-            height: 56px;
-            background: #1B1A1F;
-            border-radius: 5px;
-            display: flex;     
-            .userIcon {
-                width: 24px;
-                height: 24px;
-                margin: 16px;
-            }   
-            .passwordIcon {
-                width: 24px;
-                height: 24px;
-                margin: 16px;
+        .login_right{
+            width: 470px;
+            height:680px;
+            background: rgba(0,0,0,0.4);
+            position: fixed;
+            right: 15%;
+            top: 15%;
+            .titleIcon{
+                margin: 100px 0px 43px 95px;
             }
-            .el-input{
-                border: 0 solid transparent;
-                .el-input__wrapper{
-                    background: transparent;
-                    box-shadow: none;
-                    .el-input__inner, .el-input__inner:focus{
-                        background-color: transparent;
-                        border: none !important;
-                        color: #fff;
-                        height: 30px;
-                        width: 100%;
-                        font-size: 14px;
+            .loginCom{
+                margin: 0 30px 0px 43px;
+                width: 384px;
+                height: 56px;
+                background: #1B1A1F;
+                border-radius: 5px;
+                display: flex;     
+                .userIcon {
+                    width: 24px;
+                    height: 24px;
+                    margin: 16px;
+                }   
+                .passwordIcon {
+                    width: 24px;
+                    height: 24px;
+                    margin: 16px;
+                }
+                .el-input{
+                    border: 0 solid transparent;
+                    .el-input__wrapper{
+                        background: transparent;
+                        box-shadow: none;
+                        .el-input__inner, .el-input__inner:focus{
+                            background-color: transparent;
+                            border: none !important;
+                            color: #fff;
+                            height: 30px;
+                            width: 100%;
+                            font-size: 14px;
+                        }
                     }
                 }
             }
-        }
-        .remeber{
-            margin: 0 0 0 50px;
-            .el-checkbox{
-                .el-checkbox__label{
-                    color: #fff;
-                    font-size: 12px;
-                    padding-left:6px;
+            .remeber{
+                margin: 0 0 0 50px;
+                .el-checkbox{
+                    .el-checkbox__label{
+                        color: #fff;
+                        font-size: 12px;
+                        padding-left:6px;
+                    }
                 }
             }
-        }
-        .loginBtn{
-            margin: 48px 0 0 43px;
-            width: 384px;
-            height: 56px;
-            background-image: url('../assets/loginImage/loginBtn.png');
-            cursor: pointer;
-            .loginSpan{
-                position: relative;
-                top: 27%;
-                left: 45%;
-                font-size: 18px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-            .loading{
-                display: flex;
-                justify-content: center;
-                padding-top: 13px;
-                .loadingSpan{
+            .loginBtn{
+                margin: 48px 0 0 43px;
+                width: 384px;
+                height: 56px;
+                background-image: url('../assets/loginImage/loginBtn.png');
+                cursor: pointer;
+                .loginSpan{
                     position: relative;
-                    top: 2px;
-                    left: -9px;
+                    top: 27%;
+                    left: 45%;
                     font-size: 18px;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     color: #FFFFFF;
                 }
-                .el-icon{
-                    position: relative;
-                    top: 7px;
-                    left: -12px;
+                .loading{
+                    display: flex;
+                    justify-content: center;
+                    padding-top: 13px;
+                    .loadingSpan{
+                        position: relative;
+                        top: 2px;
+                        left: -9px;
+                        font-size: 18px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                    }
+                    .el-icon{
+                        position: relative;
+                        top: 7px;
+                        left: -12px;
+                    }
                 }
             }
+            input::-webkit-input-placeholder{ /*WebKit browsers*/
+                color: #fff;
+            }
+            input::-moz-input-placeholder{ /*Mozilla Firefox*/
+                color: #fff;
+            }
+            input::-ms-input-placeholder{ /*Internet Explorer*/
+                color: #fff;
+            }
         }
-        input::-webkit-input-placeholder{ /*WebKit browsers*/
-            color: #fff;
-        }
-        input::-moz-input-placeholder{ /*Mozilla Firefox*/
-            color: #fff;
-        }
-        input::-ms-input-placeholder{ /*Internet Explorer*/
+        .loginFooter{
+            height: 40px;
+            line-height: 40px;
+            position: fixed;
+            bottom: 0;
+            width: 100%;
+            text-align: center;
             color: #fff;
+            font-family: Arial;
+            font-size: 12px;
+            letter-spacing: 1px;
         }
     }
-    .loginFooter{
-        height: 40px;
-        line-height: 40px;
-        position: fixed;
-        bottom: 0;
-        width: 100%;
-        text-align: center;
-        color: #fff;
-        font-family: Arial;
-        font-size: 12px;
-        letter-spacing: 1px;
-    }
-}
-.loginMobeil{
-    position: relative;
-    width: 100%;
-    height:100%;
-    background-image: url('../assets/loginImage/logindefBak.png');
-    background-position: 0 0;
-    background-repeat: no-repeat;
-    overflow: hidden;
-    .login_mobeilMain{
-        width: 470px;
-        height:680px;
-        // background: rgba(0,0,0,0.4);
+    .loginMobeil{
         position: relative;
-        right: 5%;
-        // top: 15%;
-        .titleIcon{
-            margin: 100px 0px 43px 75px;
-        }
-        .loginCom{
-            margin: 0 30px 0px 43px;
-            width: 350px;
-            height: 56px;
-            background: #1B1A1F;
-            border-radius: 5px;
-            display: flex;     
-            .userIcon {
-                width: 24px;
-                height: 24px;
-                margin: 16px;
-            }   
-            .passwordIcon {
-                width: 24px;
-                height: 24px;
-                margin: 16px;
+        width: 100%;
+        height:100%;
+        background-image: url('../assets/loginImage/logindefBak.png');
+        background-position: 0 0;
+        background-repeat: no-repeat;
+        overflow: hidden;
+        .login_mobeilMain{
+            width: 470px;
+            height:680px;
+            // background: rgba(0,0,0,0.4);
+            position: relative;
+            right: 5%;
+            // top: 15%;
+            .titleIcon{
+                margin: 100px 0px 43px 75px;
             }
-            .el-input{
-                border: 0 solid transparent;
-                .el-input__wrapper{
-                    background: transparent;
-                    box-shadow: none;
-                    .el-input__inner, .el-input__inner:focus{
-                        background-color: transparent;
-                        border: none !important;
-                        color: #fff;
-                        height: 30px;
-                        width: 100%;
-                        font-size: 14px;
+            .loginCom{
+                margin: 0 30px 0px 43px;
+                width: 350px;
+                height: 56px;
+                background: #1B1A1F;
+                border-radius: 5px;
+                display: flex;     
+                .userIcon {
+                    width: 24px;
+                    height: 24px;
+                    margin: 16px;
+                }   
+                .passwordIcon {
+                    width: 24px;
+                    height: 24px;
+                    margin: 16px;
+                }
+                .el-input{
+                    border: 0 solid transparent;
+                    .el-input__wrapper{
+                        background: transparent;
+                        box-shadow: none;
+                        .el-input__inner, .el-input__inner:focus{
+                            background-color: transparent;
+                            border: none !important;
+                            color: #fff;
+                            height: 30px;
+                            width: 100%;
+                            font-size: 14px;
+                        }
                     }
                 }
             }
-        }
-        .remeber{
-            margin: 0 0 0 50px;
-            .el-checkbox{
-                .el-checkbox__label{
-                    color: #fff;
-                    font-size: 12px;
-                    padding-left:6px;
+            .remeber{
+                margin: 0 0 0 50px;
+                .el-checkbox{
+                    .el-checkbox__label{
+                        color: #fff;
+                        font-size: 12px;
+                        padding-left:6px;
+                    }
                 }
             }
-        }
-        .loginMobeilBtn{
-            margin: 48px 0 0 43px;
-            width: 350px;
-            height: 56px;
-            // background-image: url('../assets/loginImage/loginBtn.png');
-            background: linear-gradient(#1e5adf, #1746d3);
-            border-radius: 5px;
-            cursor: pointer;
-            .loginSpan{
-                position: relative;
-                top: 27%;
-                left: 45%;
-                font-size: 18px;
-                font-family: Microsoft YaHei;
-                font-weight: 400;
-                color: #FFFFFF;
-            }
-            .loading{
-                display: flex;
-                justify-content: center;
-                padding-top: 13px;
-                .loadingSpan{
+            .loginMobeilBtn{
+                margin: 48px 0 0 43px;
+                width: 350px;
+                height: 56px;
+                // background-image: url('../assets/loginImage/loginBtn.png');
+                background: linear-gradient(#1e5adf, #1746d3);
+                border-radius: 5px;
+                cursor: pointer;
+                .loginSpan{
                     position: relative;
-                    top: 2px;
-                    left: -9px;
+                    top: 27%;
+                    left: 45%;
                     font-size: 18px;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     color: #FFFFFF;
                 }
-                .el-icon{
-                    position: relative;
-                    top: 7px;
-                    left: -12px;
+                .loading{
+                    display: flex;
+                    justify-content: center;
+                    padding-top: 13px;
+                    .loadingSpan{
+                        position: relative;
+                        top: 2px;
+                        left: -9px;
+                        font-size: 18px;
+                        font-family: Microsoft YaHei;
+                        font-weight: 400;
+                        color: #FFFFFF;
+                    }
+                    .el-icon{
+                        position: relative;
+                        top: 7px;
+                        left: -12px;
+                    }
                 }
             }
-        }
-        input::-webkit-input-placeholder{ /*WebKit browsers*/
-            color: #fff;
-        }
-        input::-moz-input-placeholder{ /*Mozilla Firefox*/
-            color: #fff;
-        }
-        input::-ms-input-placeholder{ /*Internet Explorer*/
-            color: #fff;
+            input::-webkit-input-placeholder{ /*WebKit browsers*/
+                color: #fff;
+            }
+            input::-moz-input-placeholder{ /*Mozilla Firefox*/
+                color: #fff;
+            }
+            input::-ms-input-placeholder{ /*Internet Explorer*/
+                color: #fff;
+            }
         }
     }
 }