From 5501b9849b4902f9e03ca8818e26c023913c1370 Mon Sep 17 00:00:00 2001 From: jiangping <jp@doumee.com> Date: 星期三, 11 九月 2024 16:47:34 +0800 Subject: [PATCH] 最新版本 --- admin/src/components/common/CommonHeader.vue | 118 +++++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 94 insertions(+), 24 deletions(-) diff --git a/admin/src/components/common/CommonHeader.vue b/admin/src/components/common/CommonHeader.vue index 10523a8..4174818 100644 --- a/admin/src/components/common/CommonHeader.vue +++ b/admin/src/components/common/CommonHeader.vue @@ -2,17 +2,35 @@ <div class="common-header"> <div class="header"> <div class="logo"> - <div>{{title}}</div> + <div class="title">{{ title }}</div> + <div class="list"> + <div class="item active"> + <div>鏈嶅姟涓績</div> + <div class="linellae"></div> + </div> + <div class="item">瀹夐槻涓績</div> + <div class="item">娑堥槻涓績</div> + <div class="item">鑳界涓績</div> + <div class="item">椹鹃┒鑸�</div> + </div> <!-- <div class="title-en">Diagnosis of Intelligent Manufacturing Integrated Service Platfrom</div> --> </div> <div class="user"> <el-dropdown v-if="isLogined" trigger="click"> <span class="el-dropdown-link"> <!-- <img v-if="userInfo != null" :src="userInfo.avatar == null ? `${require('@/assets/avatar/man.png')}` : userInfo.avatar" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> --> - <img v-if="userInfo != null" style="width: 30px !important;" src="@/assets/avatar/man.png" alt="">{{userInfo | displayName}}<i class="el-icon-arrow-down el-icon--right"></i> + <img + v-if="userInfo != null" + style="width: 30px !important" + src="@/assets/avatar/man.png" + alt="" + />{{ userInfo | displayName + }}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> - <el-dropdown-item @click.native="changePwd">淇敼瀵嗙爜</el-dropdown-item> + <el-dropdown-item @click.native="changePwd" + >淇敼瀵嗙爜</el-dropdown-item + > <el-dropdown-item @click.native="logout">閫�鍑虹櫥褰�</el-dropdown-item> </el-dropdown-menu> </el-dropdown> @@ -25,15 +43,37 @@ @confirm="confirmChangePwd" @close="visible.changePwd = false" > - <el-form :model="changePwdData.form" ref="changePwdDataForm" :rules="changePwdData.rules"> + <el-form + :model="changePwdData.form" + ref="changePwdDataForm" + :rules="changePwdData.rules" + > <el-form-item label="鍘熷瀵嗙爜" prop="oldPwd" required> - <el-input v-model="changePwdData.form.oldPwd" type="password" placeholder="璇疯緭鍏ュ師濮嬪瘑鐮�" maxlength="30" show-password></el-input> + <el-input + v-model="changePwdData.form.oldPwd" + type="password" + placeholder="璇疯緭鍏ュ師濮嬪瘑鐮�" + maxlength="30" + show-password + ></el-input> </el-form-item> <el-form-item label="鏂板瘑鐮�" prop="newPwd" required> - <el-input v-model="changePwdData.form.newPwd" type="password" placeholder="璇疯緭鍏ユ柊瀵嗙爜" maxlength="30" show-password></el-input> + <el-input + v-model="changePwdData.form.newPwd" + type="password" + placeholder="璇疯緭鍏ユ柊瀵嗙爜" + maxlength="30" + show-password + ></el-input> </el-form-item> <el-form-item label="纭鏂板瘑鐮�" prop="confirmPwd" required> - <el-input v-model="changePwdData.form.confirmPwd" type="password" placeholder="璇峰啀娆¤緭鍏ユ柊瀵嗙爜" maxlength="30" show-password></el-input> + <el-input + v-model="changePwdData.form.confirmPwd" + type="password" + placeholder="璇峰啀娆¤緭鍏ユ柊瀵嗙爜" + maxlength="30" + show-password + ></el-input> </el-form-item> </el-form> </GlobalAlertWindow> @@ -53,7 +93,7 @@ default: true } }, - data () { + data() { return { title: process.env.VUE_APP_TITLE, visible: { @@ -94,7 +134,7 @@ }, filters: { // 灞曠ず鍚嶇О - displayName (userInfo) { + displayName(userInfo) { if (userInfo == null) { return '' } @@ -107,14 +147,14 @@ methods: { ...mapMutations(['setUserInfo', 'switchCollapseMenu', 'clearUserInfo']), // 淇敼瀵嗙爜 - changePwd () { + changePwd() { this.visible.changePwd = true this.$nextTick(() => { this.$refs.changePwdDataForm.resetFields() }) }, // 纭畾淇敼瀵嗙爜 - confirmChangePwd () { + confirmChangePwd() { if (this.isWorking.changePwd) { return } @@ -138,7 +178,7 @@ this.visible.changePwd = false }) .catch(e => { - this.$tip.apiFailed(e) + // this.$tip.apiFailed(e) }) .finally(() => { this.isWorking.changePwd = false @@ -146,7 +186,7 @@ }) }, // 閫�鍑虹櫥褰� - logout () { + logout() { logout() .then(() => { this.clearUserInfo() @@ -155,7 +195,7 @@ window.location.reload() }) .catch(e => { - this.$tip.apiFailed(e) + // this.$tip.apiFailed(e) }) } } @@ -165,7 +205,32 @@ <style scoped lang="scss"> @import "@/assets/style/variables.scss"; .common-header { - background-color: #1457C7; + background-color: #2080f7; +} +.list{ + flex: 1; + display: flex; + align-items: center; + margin-left: 60px; + .item{ + margin-right: 40px; + font-size: 16px; + font-weight: 400; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + height: 40px; + cursor: pointer; + .linellae{ + width: 64px; + height: 2px; + background: #FFFFFF; + } + } + .active{ + font-weight: 500; + } } .header { overflow: hidden; @@ -175,16 +240,21 @@ justify-content: space-between; .logo { - background: url('../../assets/images/top_ic_chilun@2x.png') no-repeat; + /* background: url("../../assets/images/top_ic_chilun@2x.png") no-repeat; */ box-sizing: border-box; - min-width: 280px; - height: 70px; - padding: 17px 30px; + min-width: 360px; + height: 56px; + padding: 10px 30px; // flex-shrink: 0; line-height: 36px; font-size: 22px; font-weight: 600; color: #fff; + display: flex; + align-items: center; + .title{ + width: 200px; + } // display: inline; .title-en { font-size: 11px; @@ -193,15 +263,15 @@ } } .user { - width: 712px; + width: 212px; box-sizing: border-box; - height: 70px; + height: 56px; padding-right: 25px; - background: url('../../assets/images/top_ic_bolang@2x.png') no-repeat; + background: url("../../assets/images/top_ic_bolang@2x.png") no-repeat; flex-shrink: 0; text-align: right; .el-dropdown { - top: 10px; + top: 2px; color: #fff; } img { @@ -216,7 +286,7 @@ .el-dropdown-menu { width: 140px; .el-dropdown-menu__item:hover { - background: #E3EDFB; + background: #e3edfb; color: $primary-color; } } -- Gitblit v1.9.3