From d24c9dde20cba23b96082b4db81b5223c75e4ea9 Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期三, 08 三月 2023 09:06:28 +0800 Subject: [PATCH] 身份证正反面调整 --- src/views/layout/components/Header/index.vue | 103 ++++++++++++++++++++++++++++++++++----------------- 1 files changed, 69 insertions(+), 34 deletions(-) diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue index 99b9ebf..1fa1ed9 100644 --- a/src/views/layout/components/Header/index.vue +++ b/src/views/layout/components/Header/index.vue @@ -4,27 +4,12 @@ <!-- 宸︿晶鑿滃崟 --> <div class="header-left"> <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> - <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + <span :class="item.checked ? 'my-active' : 'my-activeno'" @click="menuChange(item)">{{ item.label }}</span> </div> </div> <!-- 鍙充晶鑿滃崟 --> <div class="header-right"> <div class="menu-right__item search"></div> - <!-- 鐧诲綍鐢ㄦ埛 --> - <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> - <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> - <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> - </el-avatar> - <span style="padding: 0 5px;">{{ user.user.username }}</span> - <i class="el-icon-arrow-down"></i> - <!-- 鐢ㄦ埛鎿嶄綔 --> - <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> - <el-card class="box-card"> - <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> - <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> - </el-card> - </div> - </div> <!-- 娑堟伅 --> <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> @@ -48,6 +33,24 @@ </el-card> </div> </div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <span class="user-span">|</span> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> <div class="menu-right__item btn" @click="loginout"> <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> @@ -60,7 +63,7 @@ 'font-size': '14px', 'font-weight': '650', 'line-height': '45px', - }" :data="channelData" style="width: 100%" @selection-change="handleSelectionChange"> + }" :data="channelData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column width="55"> </el-table-column> <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> @@ -69,20 +72,20 @@ <el-table-column label="鍚敤" min-width="5"> <template slot-scope="scope"> <!-- @change="handleChangeStatus(scope.row)" --> - <el-switch class="switchStyle" - v-model="scope.row.isReceive" - active-color="#3fef9a" + <el-switch class="switchStyle" + v-model="scope.row.isReceive" + active-color="#3fef9a" inactive-color="#000212" :active-value="1" :inactive-value="0" @change="handleSelectionChange(scope.row)"> - + </el-switch> </template> </el-table-column> </el-table> - <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + <el-button type="button" @click="cancelChannel">鍙栨秷</el-button> </el-dialog> <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" @@ -134,21 +137,27 @@ menuLeftList: [ { label: '椹鹃┒鑸�', - checked: true, + checked: false, url: '', id: '1f' }, { label: '瑙嗛宸℃煡', - checked: true, + checked: false, url: '', id: '2f' }, { label: '鎵ф硶绠$悊', - checked: true, + checked: false, url: '', id: '3f', + }, + { + label: '娌圭儫妫�娴�', + checked: false, + url: '', + id: '4f', }, ], flag: { @@ -169,7 +178,17 @@ created() { this.setLoginInfo(); }, + watch:{ + $route() { + this.menuLeftList.map(item=>{ + item.checked = false + }) + }, + }, methods: { + cancelChannel(){ + this.channelSettingVisible=false + }, handleSelectionChange(val) { const userInfo = JSON.parse(sessionStorage.getItem('user')); this.messageColumnSet.userId = userInfo.user.id @@ -310,14 +329,14 @@ } .el-header { - background-color: #071a38; + background-color: #313350; text-align: center; line-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; - color: #4b9bb7; + color: #fff; .header-left { display: flex; @@ -333,15 +352,28 @@ &:hover { cursor: pointer; - color: #fff; + //color: #fff; } } } .my-active { border-radius: 20px; + color: #2f54eb; + background-color: #313350; + } + .my-activeno{ + border-radius: 20px; color: #fff; - background-color: #092c4a; + background-color: #313350; + } + .my-active:hover { + color: #2f54eb; + background-color: #313350; + } + .my-activeno:hover{ + color: #2f54eb; + background-color: #313350; } } @@ -370,13 +402,15 @@ } .user { - margin-left: 20px; - flex: 2; + //margin-left: 20px; + flex: 1; display: flex; align-items: center; justify-content: center; position: relative; - +.user-span{ + padding: 0 10px; +} .user-card { position: absolute; top: 60px; @@ -453,9 +487,10 @@ .user:hover, .btn:hover { - background-color: #092c4a; + //background-color: #092c4a; cursor: pointer; + color: #2f54eb; } } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0