样式调整

china

2023-05-11 c7bc3eb18e1fda4254ca0195e2133d2ed978de11

 src/layout/index.vue

@@ -16,7 +16,7 @@
</template>

<script>
import RightPanel from '@/components/RightPanel'
import RightPanel from '@/components/RuoYi/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
@@ -52,8 +52,37 @@
    },
    variables() {
      return variables;
    },

    // 2023-04-17，定义接收websocket消息
    getWsMsg (){
      // return this.$store.websocket.state.webSocketMsg;
      return this.$store.state.user.webSocketMsg;
    }
  },
  // 2023-04-17
  watch: {
    getWsMsg:{
      handler: function(newVal) {
        // console.log(newVal)
        // alert('接收到webSocket推送:'+ newVal);
        this.$notify({
          title: '新消息提醒：',  //标题
          // message: '这是一条不会自动关闭的消息',  //内容
          duration: 0,  //设置弹框消失事件
          position:'bottom-right',  // 设置弹框在屏幕的哪个角弹出（只能设置4个角）
          type: 'info',  //给标题前加一个小图标
          offset: 100,  //偏移量：距离四个角的偏移程度（默认偏移了16px）
          dangerouslyUseHTMLString: true,  //是否支持弹出框内传入 HTML 片段
          message: '<strong>这是 <i>HTML</i> 片段</strong>' + newVal,   //开启后，这里可以写html
          showClose: true,  //隐藏关闭按钮（右上角的x  默认为true，显示）
          onClose() {console.log('关闭啦', event)},  // 手动关闭时的回调函数
        });
        this.$store.state.app.tts.speak("有新消息提醒，请点击查看");
      }
    }
  },

  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@@ -108,4 +137,65 @@
  .mobile .fixed-header {
    width: 100%;
  }

  // mike, 2023-04-11
  .noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently not supported by any browser */
  }
  .main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 25px;
  }

  .app-main {
    width: 100%;
    display: flex;
  }

  .app-container {
    /*50 = navbar  */
    flex: 1;
    height: calc(100vh - 198px);
    border-radius:10px;
    overflow: auto;
    //scrollbar-width: none; /* Firefox */
    //-ms-overflow-style: none; /* IE 10+ */
    //&::-webkit-scrollbar {
    //  display: none; /* Chrome Safari */
    //}
    .box-card{
      .el-card__body{
        //padding-top: 0;
        .el-form-item--small.el-form-item{
          margin-top: 20px;
          margin-bottom: 0;
        }
        .el-form-item--mini.el-form-item{
          margin-top: 20px;
          margin-bottom: 0;
        }
      }
    }
  }

  .sidebar-box {
    margin: 0 20px 0 0 ;
    .box-card{
      min-height: 300px;
      max-height: calc(100vh - 198px);
      overflow: auto;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE 10+ */
      &::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
    }
  }
</style>