From bd40473c9c634005bc7e62e7fc901bcd8b598fa0 Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期五, 02 二月 2024 15:20:26 +0800
Subject: [PATCH] 提交了修改
---
ruoyi-ui/src/views/index.vue | 72 ++++++++++++++++++++++--------------
1 files changed, 44 insertions(+), 28 deletions(-)
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index 965fe11..cd85ff8 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -2,6 +2,11 @@
<div class="app-container">
<div class="image-container">
<img class="bottom-image" src="../assets/images/shouye.png" alt="Bottom Image">
+ <div class="notification-box" :class="{ 'has-new-message': hasNewMessage }">
+ <div class="left-section">娑堟伅閫氱煡</div>
+ <el-button class="right-section " type="text" @click="handleClick">鐐瑰嚮杩涘叆</el-button>
+ <div class="new-message-dot" v-if="hasNewMessage"></div>
+ </div>
</div>
</div>
@@ -15,52 +20,63 @@
dicts: ['sys_normal_disable'],
data(){
return {
-
+ hasNewMessage:false,
};
+ },
+ created() {},
+ methods:{
+ handleClick(){
+ this.$router.push('/views/shouye');
+ }
}
-
};
</script>
<style scoped>
.app-container{
- background-color: #FEF7FC;
-}
+ background-color: #FEF7FC;
+ }
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.bottom-image {
- z-index: -1; /* 璁剧疆搴曞眰鍥剧墖鐨勫眰绾т负1 */
+ position: relative;
width: 100%;
height: 100%;
- /*position: absolute;*/
- top: 0;
+ z-index: 1;
}
-.text-box1 {
- position: absolute;
- top: 17.5%;
- left: 47.5%;
- transform: translate(-50%, -50%);
- width: 320px;
-}
-.text-box1 ::placeholder{
- color:#000000;
- font-size: 15px;
- font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI;
-}
-.text-box2 {
+.notification-box {
position: absolute;
- top: 51%;
- left: 80%;
- transform: translate(-50%, -50%);
- width: 345px;
+ top: 760px;
+ left: 150px;
+ display: flex;
+ align-items: center;
+ width: 20%;
+ height: 8%;
+ background-color: rgba(227, 219, 219, 0.51);
+ padding: 10px;
+ /*color: white;*/
+ z-index: 2; /* 璁剧疆閫氱煡妗嗗眰绾т负2锛屾瘮鍥剧墖楂� */
}
-.text-box2 ::placeholder{
- color:#000000;
- font-size: 15px;
- font-family: Microsoft YaHei UI-Light, Microsoft YaHei UI;
+
+.left-section {
+ flex-grow: 1;
+}
+
+.right-section {
+ margin-left: 10px;
+}
+
+.new-message-dot {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ width: 8px;
+ height: 8px;
+ background-color: red;
+ border-radius: 50%;
}
</style>
--
Gitblit v1.9.1