| | |
|---|
| | | box-shadow: 0px 0px 20px rgba(0,0,0,0.3); |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* AI助手抽屉动画 */ |
|---|
| | | @keyframes slideInRight { |
|---|
| | | from { transform: translate3d(100%, 0, 0); opacity: 0; } |
|---|
| | | to { transform: translate3d(0, 0, 0); opacity: 1; } |
|---|
| | | } |
|---|
| | | |
|---|
| | | @keyframes slideOutRight { |
|---|
| | | from { transform: translate3d(0, 0, 0); opacity: 1; } |
|---|
| | | to { transform: translate3d(100%, 0, 0); opacity: 0; } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ai-drawer-layer { |
|---|
| | | box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15) !important; |
|---|
| | | border-radius: 8px 0 0 8px !important; |
|---|
| | | overflow: hidden; |
|---|
| | | animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1); |
|---|
| | | } |
|---|
| | | |
|---|
| | | .ai-drawer-layer-close { |
|---|
| | | animation: slideOutRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body class="layui-layout-body"> |
|---|
| | |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <!-- 右下角SVG动画 --> |
|---|
| | | <div id="ai-assistant-btn" style="position: fixed; bottom: 40px; right: 20px; z-index: 9999; cursor: pointer;"> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/layui/layui.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/handlebars/handlebars-v4.5.3.js"></script> |
|---|
| | |
|---|
| | | <script> |
|---|
| | | console.log('%c 中扬立库平台 %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;'); |
|---|
| | | $(function () { |
|---|
| | | // 注入AI助手图标 |
|---|
| | | $('#ai-assistant-btn').html(getAiIconHtml(60, 60)); |
|---|
| | | |
|---|
| | | if ("" === localStorage.getItem('token')) { |
|---|
| | | top.location.href = baseUrl + "/login"; |
|---|
| | | } |
|---|
| | |
|---|
| | | var url = logout.getAttribute('href'); |
|---|
| | | logout.setAttribute('href', baseUrl + "/login"); |
|---|
| | | |
|---|
| | | // AI助手图标悬浮提示 |
|---|
| | | $('#ai-assistant-btn').on('mouseenter', function(){ |
|---|
| | | this.index = layer.tips('AI助手', this, { |
|---|
| | | tips: [1, '#333'], // 上方显示，深色背景 |
|---|
| | | time: -1 // 不自动关闭 |
|---|
| | | }); |
|---|
| | | }).on('mouseleave', function(){ |
|---|
| | | layer.close(this.index); |
|---|
| | | }).on('click', function () { |
|---|
| | | layer.open({ |
|---|
| | | type: 2, |
|---|
| | | title: false, // 隐藏默认标题栏，更简洁 |
|---|
| | | closeBtn: 0, // 隐藏关闭按钮，点击遮罩关闭 |
|---|
| | | shadeClose: false, // 改为手动控制关闭，以便播放动画 |
|---|
| | | shade: 0.1, |
|---|
| | | area: ['600px', '100%'], |
|---|
| | | offset: 'r', // 右侧悬浮 |
|---|
| | | anim: -1, // 禁用默认动画，使用CSS动画 |
|---|
| | | isOutAnim: false, |
|---|
| | | skin: 'ai-drawer-layer', // 自定义皮肤 |
|---|
| | | content: 'ai/diagnosis.html', |
|---|
| | | success: function(layero, index){ |
|---|
| | | // 背景模糊效果 |
|---|
| | | var shadeId = layero.attr('id').replace('layui-layer', 'layui-layer-shade'); |
|---|
| | | var $shade = $('#' + shadeId); |
|---|
| | | $shade.css({ |
|---|
| | | 'backdrop-filter': 'blur(3px)', |
|---|
| | | 'transition': 'opacity 0.8s' |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // 点击遮罩关闭（带动画） |
|---|
| | | $shade.on('click', function() { |
|---|
| | | layero.addClass('ai-drawer-layer-close'); |
|---|
| | | $shade.css('opacity', 0); |
|---|
| | | setTimeout(function(){ |
|---|
| | | layer.close(index); |
|---|
| | | }, 400); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }); |
|---|
| | | </script> |
|---|
| | | <script type="text/html" id="menuTpl"> |
|---|
