|
@@ -64,11 +64,11 @@
|
|
|
.btn-danger{background:var(--rd);color:#fff;transition:all .15s}.btn-danger:hover:not(:disabled){background:#a01830}.btn-danger:active:not(:disabled){transform:scale(.96)}
|
|
.btn-danger{background:var(--rd);color:#fff;transition:all .15s}.btn-danger:hover:not(:disabled){background:#a01830}.btn-danger:active:not(:disabled){transform:scale(.96)}
|
|
|
.btn-secondary{background:#fff;color:var(--bk);border:1px solid var(--bk);transition:all .15s}.btn-secondary:hover:not(:disabled){background:var(--bk);color:#fff}.btn-secondary:active:not(:disabled){transform:scale(.96)}
|
|
.btn-secondary{background:#fff;color:var(--bk);border:1px solid var(--bk);transition:all .15s}.btn-secondary:hover:not(:disabled){background:var(--bk);color:#fff}.btn-secondary:active:not(:disabled){transform:scale(.96)}
|
|
|
.btn:disabled{opacity:.4;cursor:default}
|
|
.btn:disabled{opacity:.4;cursor:default}
|
|
|
- .media-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#E8EDF8,#dce4f5);border:2px solid #002FA7;border-radius:12px;padding:6px 10px;font-size:24px;cursor:pointer;min-height:44px;min-width:52px;gap:0;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:all .15s}
|
|
|
|
|
- .media-btn:hover{background:linear-gradient(135deg,#002FA7,#1a3fbf);color:#fff;border-color:#002FA7;transform:scale(1.05)}
|
|
|
|
|
- .media-btn:active{transform:scale(.95)}
|
|
|
|
|
- .media-label{font-size:10px;font-weight:600;color:#002FA7;white-space:nowrap;margin-top:-2px}
|
|
|
|
|
- .media-btn:hover .media-label{color:#fff}
|
|
|
|
|
|
|
+ .media-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bk-l);color:var(--bk);border:2px solid var(--bk);border-radius:50%;font-size:28px;font-weight:700;cursor:pointer;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:all .15s;line-height:1}
|
|
|
|
|
+ .media-btn:hover{background:var(--bk);color:#fff;transform:scale(1.05)}
|
|
|
|
|
+ .media-btn:active{transform:scale(.96)}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
.tags{display:flex;gap:6px;padding:6px 14px 10px;flex-wrap:wrap;flex-shrink:0}
|
|
.tags{display:flex;gap:6px;padding:6px 14px 10px;flex-wrap:wrap;flex-shrink:0}
|
|
|
.tag-btn{font-size:12px;padding:5px 12px;border-radius:16px;border:1px solid rgba(0,47,167,.2);background:var(--bk-l);color:var(--bk);cursor:pointer;white-space:nowrap;min-height:36px;display:flex;align-items:center;-webkit-user-select:none;user-select:none}
|
|
.tag-btn{font-size:12px;padding:5px 12px;border-radius:16px;border:1px solid rgba(0,47,167,.2);background:var(--bk-l);color:var(--bk);cursor:pointer;white-space:nowrap;min-height:36px;display:flex;align-items:center;-webkit-user-select:none;user-select:none}
|
|
|
.tag-btn:active{background:rgba(0,47,167,.15)}
|
|
.tag-btn:active{background:rgba(0,47,167,.15)}
|
|
@@ -105,7 +105,7 @@
|
|
|
.login-modal-btn+.login-modal-btn{border-left:1px solid #eee}
|
|
.login-modal-btn+.login-modal-btn{border-left:1px solid #eee}
|
|
|
.login-modal-btn:focus-visible{outline:2px solid var(--bk);outline-offset:-3px}
|
|
.login-modal-btn:focus-visible{outline:2px solid var(--bk);outline-offset:-3px}
|
|
|
.login-modal-btn-primary{color:var(--bk);font-weight:600}
|
|
.login-modal-btn-primary{color:var(--bk);font-weight:600}
|
|
|
-@media(max-width:400px){.input-area{padding:8px 6px;gap:4px}.input-area input{padding:8px 10px;font-size:13px;min-height:40px}.btn{padding:6px 10px;font-size:12px;min-height:40px}.media-btn{min-width:40px;padding:4px 6px;font-size:20px;border-radius:10px}.media-label{font-size:9px}.tags{padding:6px 8px 8px;gap:4px}.tag-btn{font-size:11px;padding:4px 10px}.chat{padding:10px 8px}.msg{max-width:90%}.header h1{font-size:15px}.header .header-title{font-weight:700}.header .sub{font-size:10px}.drug-list{padding:10px 8px}.drug-detail{padding:14px 10px}.search-box{padding:8px 10px}.drug-pager{padding:6px 8px}.pager button,.pager select{padding:4px 6px;font-size:11px}}
|
|
|
|
|
|
|
+@media(max-width:400px){.input-area{padding:8px 6px;gap:4px}.input-area input{padding:8px 10px;font-size:13px;min-height:40px}.btn{padding:6px 10px;font-size:12px;min-height:40px}.media-btn{width:36px;height:36px;font-size:24px}.tags{padding:6px 8px 8px;gap:4px}.tag-btn{font-size:11px;padding:4px 10px}.chat{padding:10px 8px}.msg{max-width:90%}.header h1{font-size:15px}.header .header-title{font-weight:700}.header .sub{font-size:10px}.drug-list{padding:10px 8px}.drug-detail{padding:14px 10px}.search-box{padding:8px 10px}.drug-pager{padding:6px 8px}.pager button,.pager select{padding:4px 6px;font-size:11px}}
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
@@ -119,7 +119,7 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div id="tabChat">
|
|
<div id="tabChat">
|
|
|
<div class="chat" id="chat"><div class="welcome"><p>输入药品名称或问题，AI 从药典知识库中检索回答<br><small style="color:#aaa">支持图片上传识别</small></p></div></div>
|
|
<div class="chat" id="chat"><div class="welcome"><p>输入药品名称或问题，AI 从药典知识库中检索回答<br><small style="color:#aaa">支持图片上传识别</small></p></div></div>
|
|
|
- <div class="tags"><span class="tag-btn" onclick="quickAsk('布洛芬')">布洛芬</span><span class="tag-btn" onclick="quickAsk('甲硝唑')">甲硝唑</span><span class="tag-btn" onclick="quickAsk('阿莫西林禁忌')">阿莫西林禁忌</span><span class="tag-btn" onclick="quickAsk('布洛芬用法用量')">布洛芬用法用量</span><span class="tag-btn" onclick="quickAsk('二甲双胍不良反应')">二甲双胍不良反应</span><span class="tag-btn" onclick="quickAsk('青霉素过敏处理')">青霉素过敏处理</span></div>
|
|
|
|
|
|
|
+ <div class="tags"><span class="tag-btn" onclick="quickAsk('布洛芬')">布洛芬</span><span class="tag-btn" onclick="quickAsk('甲硝唑')">甲硝唑</span><span class="tag-btn" onclick="quickAsk('阿莫西林禁忌')">阿莫西林禁忌</span><span class="tag-btn" onclick="quickAsk('布洛芬用法用量')">布洛芬用法用量</span><span class="tag-btn" onclick="quickAsk('糠酸莫米松不良反应')">糠酸莫米松不良反应</span><span class="tag-btn" onclick="quickAsk('青霉素过敏处理')">青霉素过敏处理</span></div>
|
|
|
<div id="previewArea" style="display:none;padding:8px 14px;background:#fffef5;border-top:1px solid #f0e68c;align-items:center;gap:10px;flex-wrap:wrap">
|
|
<div id="previewArea" style="display:none;padding:8px 14px;background:#fffef5;border-top:1px solid #f0e68c;align-items:center;gap:10px;flex-wrap:wrap">
|
|
|
<span id="previewLabel" style="font-size:13px;color:#666;font-weight:500"></span>
|
|
<span id="previewLabel" style="font-size:13px;color:#666;font-weight:500"></span>
|
|
|
<img id="previewThumb" style="max-width:80px;max-height:60px;border-radius:6px;display:none;border:1px solid #ddd">
|
|
<img id="previewThumb" style="max-width:80px;max-height:60px;border-radius:6px;display:none;border:1px solid #ddd">
|
|
@@ -127,12 +127,10 @@
|
|
|
<button class="btn btn-secondary" style="font-size:12px;padding:4px 12px;min-height:auto" onclick="clearMedia()">✕ 移除附件</button>
|
|
<button class="btn btn-secondary" style="font-size:12px;padding:4px 12px;min-height:auto" onclick="clearMedia()">✕ 移除附件</button>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="input-area">
|
|
<div class="input-area">
|
|
|
- <button class="media-btn" onclick="document.getElementById('imageInput').click()" title="上传图片">📷<span class="media-label">图片</span></button>
|
|
|
|
|
-
|
|
|
|
|
<input type="file" id="imageInput" accept="image/*" onchange="onFilePicked('image')" style="display:none">
|
|
<input type="file" id="imageInput" accept="image/*" onchange="onFilePicked('image')" style="display:none">
|
|
|
-
|
|
|
|
|
<input id="userInput" placeholder="输入药品问题，或上传图片...">
|
|
<input id="userInput" placeholder="输入药品问题，或上传图片...">
|
|
|
<button class="btn btn-danger" id="sendBtn" onclick="send()">发送</button>
|
|
<button class="btn btn-danger" id="sendBtn" onclick="send()">发送</button>
|
|
|
|
|
+ <span style="display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;cursor:pointer" onclick="document.getElementById('imageInput').click()"><button class="media-btn" type="button">+</button></span>
|
|
|
<button class="btn btn-secondary" id="stopBtn" onclick="stopCurrent()" style="display:none">停止</button>
|
|
<button class="btn btn-secondary" id="stopBtn" onclick="stopCurrent()" style="display:none">停止</button>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
liuchengsen