解决了其他附件封面问题

yz3456

2024-05-10 fa3615d2dcad3eb020a7ac59581546a6560e37ae

 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>