diff --git a/public/image/yujing.png b/public/image/yujing.png new file mode 100644 index 0000000..dea6d73 Binary files /dev/null and b/public/image/yujing.png differ diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index faff57d..10d7a12 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -1,19 +1,47 @@ @@ -21,11 +49,25 @@ export default { data() { return { + activeTypeName: 0, + xiaoxiType: [ + { label: '已读', value: '1' }, + { label: '未读', value: '2' } + ], + list: [ + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + { messageContent: '电梯系统：电梯门异常关闭', createTime: '2023-05-25' }, + ], + visible: false, Orgname: '', departmentName: '', name: '', - year:'', - pNameAndDepartmentNameAndPostName:'' + year: '', + pNameAndDepartmentNameAndPostName: '' } }, mounted() { @@ -37,6 +79,17 @@ this.year = nowDate.getFullYear() }, methods: { + xiaoxiTypeClick(tab, event) { + console.log('77777777777777', tab, event) + this.$set(this, 'activeTypeName', tab.name) + // this.getList(tab.name) + }, + handleReturn() { + this.visible = false; + }, + getMessageInfoList() { + this.visible = true + }, logout() { // this.$router.push({ path: '/home' }) window.opener = null @@ -70,15 +123,15 @@ } } - .breadcrumb-container { - display: flex; - align-items: center; - color: #fff; - font-size: 26px; - line-height: 60px; - margin: 0; - float: left; - } + .breadcrumb-container { + display: flex; + align-items: center; + color: #fff; + font-size: 26px; + line-height: 60px; + margin: 0; + float: left; + } .right-menu { float: right; @@ -168,15 +221,172 @@ font-size: 14px; color: #666; } - ::v-deep .el-badge__content{position: relative; + + ::v-deep .el-badge__content { + position: relative; height: 20px; line-height: 20px; padding: 0 6px; - } + } + ::v-deep .el-badge__content.is-fixed { position: absolute; top: 17px; right: 14px; -} - + } + + .app-web { + z-index: 900; + } + + .webswrap { + background-color: rgba(51, 51, 48, 0.6); + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 999; + } + + .webs { + z-index: 1000; + /* background: url('/dapingmu/dapingmu_box.png') center top no-repeat; + background-size: 100% 100%; */ + background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important; + /* background-image: linear-gradient( + to right, + rgba(105,3,6,0.9) 0%, + rgba(123,6,10,0.9) 25%, + rgba(123,6,10,0.9) 75%, + rgba(105,3,6,0.9) 100%); */ + // border: 1px solid #9c070c; + border: 1px solid #9c4f07; + position: fixed; + top: 50px; + right: 10px; + bottom: 10px; + /* bottom: 10px; */ + overflow-y: auto !important; + overflow-x: hidden; + width: 300px; + min-height: 400px; + margin: 0; + padding: 0; + } + + .top { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #9c070c; + } + + .top .title { + color: #f7ee02; + font-size: 16px; + font-weight: bold; + } + + .closes { + text-align: right; + padding: 10px; + position: absolute; + right: 10px; + top: 10px; + z-index: 900; + } + + .close { + font-size: 18px; + color: #fff; + } + + .web { + padding: 10px; + text-align: center; + } + + /* .lanmus{border-bottom: 1px solid #9c070c;} */ + ul, + li { + list-style: none; + } + + .lanmus ul { + margin: 0; + padding: 0; + /* display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start; */ + } + + .lanmus li { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + color: #fae1e1; + text-align: left; + border-bottom: 1px solid #9f0608 !important; + cursor: pointer; + } + + .lanmus li .iconfont {} + + .lanmus li .btnbox { + flex: 1; + /* background-image: linear-gradient(#7c070a, #7b060a, #7c070a) !important; border-radius: 10px;*/ + /* border-bottom: 1px solid #9f0608 !important; */ + font-size: 12px; + color: #fae1e1; + margin: 5px; + text-align: left; + padding: 5px; + } + + .lanmus li .btnbox:hover { + background-image: linear-gradient(#7b060a, #9c070c, #7b060a) !important; + + color: #f7ebc3; + } + + + /* el-tabs样式 */ + .tabgongzuo-form { + /* padding: 0; */ + color: #4cc6f4; + + >>>.el-tabs__nav-wrap::after { + background-color: #aa1e0a !important; + } + + /* 设置滑块颜色 */ + >>>.el-tabs__active-bar { + background-color: #13fbfe !important; + color: #13fbfe !important; + } + + /* 设置滑块停止位置 */ + >>>.el-tabs__active-bar.is-top { + position: absolute !important; + z-index: 1; + } + + /* 设置当前选中样式 */ + >>>.el-tabs__item.is-active { + color: #13fbfe !important; + z-index: 2; + } + + /* 设置未被选中样式 */ + >>>.el-tabs__item { + box-sizing: border-box; + position: relative !important; + color: #fff !important; + z-index: 2; + } + } + \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue index 74059ff..d82b259 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -1,5 +1,5 @@ + background-color: #07C160; + } + + .iconbox_blue { + background-color: #3f9bfa; + } + + .iconbox_zi { + background-color: #6421ff; + } + + .iconbox_fen { + background-color: #9b2efb; + } + + .tops .topbox .mids .rights { + flex: 1; + padding: 2px 0 2px 10px; + } + + .tops .topbox .mids .rights .note { + color: #333; + font-size: 14px; + padding: 0 0 3px 0; + } + + .tops .topbox .mids .rights .note span { + font-size: 20px; + padding: 0 5px; + } + + /* 饼图部分 */ + .tbars { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: flex-start; + margin: 0; + padding: 20px 0 0 0; + } + + .tbar { + width: 25%; + margin: 0 20px 0 0; + background-color: #fff; + box-shadow: 0px 0px 10px #E9E9E9; + border-radius: 5px; + padding: 10px; + } + + .tbar:last-of-type { + margin: 0; + } + + .tbar0 { + border-bottom: 0px solid #032ab8; + } + + .tbar .title { + font-size: 20px; + padding: 10px 20px; + font-weight: bold; + color: #333; + font-size: 16px; + border-bottom: 1px solid #ececee; + } + + .tbar .title span { + padding: 0 10px 0 0; + } + + .tbar .bar { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: center; + margin: 0; + padding: 0px; + height: 190px; + + } + + .con { + padding: 20px 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-around; + } + + .news { + width: 25%; + margin: 0 20px 0 0; + background-color: #fff; + box-shadow: 0px 0px 10px #E9E9E9; + border-radius: 5px; + padding: 10px; + } + + .news:last-of-type { + margin: 0; + } + + .news .title { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + padding: 10px 10px 10px 20px; + border-bottom: 1px solid #ececee; + } + + .news .title .newstits { + font-weight: bold; + color: #333; + font-size: 16px; + } + + .news .title .more { + text-align: right; + cursor: pointer; + color: #6c6a6a; + font-size: 14px; + } + + .news .content { + padding: 10px 0; + height: 210px; + overflow: hidden; + } + + .news .content .newsli { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + margin: 0px 0px; + padding: 5px 10px; + border-bottom: 1px solid #ececee; + } + + .news .content .newsli .dot { + padding: 0px 8px 0 0; + font-size: 18px; + height: 25px; + line-height: 25px; + color: #047cf7; + } + + .news .content .newsli .tit { + padding: 0px 0; + font-size: 14px; + flex: 3; + height: 25px; + overflow: hidden; + line-height: 25px; + cursor: pointer; + } + + // .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} + .news .content .newsli .time { + padding: 0px 0; + color: #666666; + text-align: right; + font-size: 14px; + width: 100px; + height: 25px; + line-height: 25px; + } + \ No newline at end of file