7 changed files with 408 additions and 77 deletions
@ -0,0 +1,116 @@ |
|||||
|
<template> |
||||
|
<div class="preview_color"> |
||||
|
<div class="top" :style="{backgroundColor:themeColor}">品牌LOGO</div> |
||||
|
<div class="bottom flex"> |
||||
|
<div class="left"> |
||||
|
<span class="desc">获取帮助</span> |
||||
|
<div class="left-item">常见问题</div> |
||||
|
<div class="left-item">联系客服</div> |
||||
|
<div class="left-item">报告样例</div> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<p class="scroll" >正在检测文章的滚动条</p> |
||||
|
<div class="tab flex" :style="{backgroundColor:navColor}"> |
||||
|
<div class="tab_item" :style="{backgroundColor:tabColor}">检测论文</div> |
||||
|
<div class="tab_item">下载检测报告</div> |
||||
|
<div class="tab_item">下载检测报告</div> |
||||
|
</div> |
||||
|
<div class="right_bot column"> |
||||
|
<b>检测上传板块</b> |
||||
|
<button :style="{backgroundColor:themeColor}">提交论文</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: ['themeColor','navColor','tabColor'], |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.preview_color{ |
||||
|
width: 100%; |
||||
|
.top{ |
||||
|
padding: 12px 27px; |
||||
|
color: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 12px 12px 0 0; |
||||
|
} |
||||
|
.bottom{ |
||||
|
font-size: 12px; |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
.left{ |
||||
|
width: 100px; |
||||
|
text-align: center; |
||||
|
padding: 14px; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 7px; |
||||
|
.desc{ |
||||
|
display: block; |
||||
|
color: #626573; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.left-item{ |
||||
|
padding: 7px 9px; |
||||
|
border-radius: 4px; |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid #475DB9; |
||||
|
font-size: 12px; |
||||
|
font-weight: normal; |
||||
|
line-height: 13px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #3B4D98; |
||||
|
} |
||||
|
} |
||||
|
.right{ |
||||
|
flex: 1; |
||||
|
.scroll{ |
||||
|
background: #E9F6FD; |
||||
|
padding: 7px 14px; |
||||
|
box-sizing: border-box; |
||||
|
line-height: 28px; |
||||
|
font-size: 12px; |
||||
|
line-height: 13px; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #626573; |
||||
|
} |
||||
|
.tab{ |
||||
|
color: #fff; |
||||
|
.tab_item{ |
||||
|
padding: 8px 12px; |
||||
|
} |
||||
|
} |
||||
|
.right_bot{ |
||||
|
padding: 25px 24px 17px; |
||||
|
background: #FFFFFF; |
||||
|
b{ |
||||
|
display: block; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
button{ |
||||
|
font-family: Microsoft YaHei UI; |
||||
|
border-radius: 4px; |
||||
|
border: none; |
||||
|
padding: 7px 10px; |
||||
|
color: #fff; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,80 @@ |
|||||
|
/** |
||||
|
* 复制文本到剪贴板 |
||||
|
* @param {string} text 要复制的文本 |
||||
|
* @param {Object} options 配置选项 |
||||
|
* @param {string} options.successMsg 成功提示信息 |
||||
|
* @param {string} options.errorMsg 失败提示信息 |
||||
|
* @param {Vue} options.vm Vue实例(用于调用$message) |
||||
|
* @returns {Promise<boolean>} 是否复制成功 |
||||
|
*/ |
||||
|
export function copyToClipboard(text, options = {}) { |
||||
|
const { |
||||
|
successMsg = '复制成功', |
||||
|
errorMsg = '复制失败，请手动复制', |
||||
|
vm = null |
||||
|
} = options; |
||||
|
|
||||
|
return new Promise((resolve) => { |
||||
|
// 创建textarea元素
|
||||
|
const textarea = document.createElement('textarea'); |
||||
|
textarea.value = text; |
||||
|
textarea.style.position = 'fixed'; // 防止页面滚动
|
||||
|
document.body.appendChild(textarea); |
||||
|
textarea.select(); |
||||
|
|
||||
|
try { |
||||
|
// 执行复制命令
|
||||
|
const successful = document.execCommand('copy'); |
||||
|
if (successful) { |
||||
|
if (vm && vm.$Message) { |
||||
|
vm.$Message.success(successMsg); |
||||
|
} else { |
||||
|
console.log(successMsg); |
||||
|
} |
||||
|
resolve(true); |
||||
|
} else { |
||||
|
throw new Error('Copy command was unsuccessful'); |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.error('复制失败:', err); |
||||
|
if (vm && vm.$Message) { |
||||
|
vm.$Message.error(errorMsg); |
||||
|
} else { |
||||
|
console.error(errorMsg); |
||||
|
} |
||||
|
resolve(false); |
||||
|
} finally { |
||||
|
document.body.removeChild(textarea); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* @param {string} text 要复制的文本 |
||||
|
* @param {Object} options 配置选项 |
||||
|
* @returns {Promise<boolean>} 是否复制成功 |
||||
|
*/ |
||||
|
export async function modernCopyToClipboard(text, options = {}) { |
||||
|
const { |
||||
|
successMsg = '复制成功', |
||||
|
errorMsg = '复制失败，请手动复制', |
||||
|
vm = null |
||||
|
} = options; |
||||
|
|
||||
|
try { |
||||
|
// 使用现代剪贴板API
|
||||
|
await navigator.clipboard.writeText(text); |
||||
|
if (vm && vm.$Message) { |
||||
|
vm.$Message.success(successMsg); |
||||
|
} else { |
||||
|
console.log(successMsg); |
||||
|
} |
||||
|
return true; |
||||
|
} catch (err) { |
||||
|
console.error(errorMsg, err); |
||||
|
// 现代API失败后回退到传统方法
|
||||
|
return copyToClipboard(text, options); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
export default modernCopyToClipboard; |
||||
@ -0,0 +1,19 @@ |
|||||
|
import modernCopyToClipboard from '@/utils/clipboard'; |
||||
|
|
||||
|
export default { |
||||
|
install(Vue) { |
||||
|
Vue.directive('clipboard', { |
||||
|
bind(el, binding) { |
||||
|
el.style.cursor = 'pointer'; |
||||
|
el.addEventListener('click', async () => { |
||||
|
const text = binding.value || el.innerText; |
||||
|
const options = { |
||||
|
vm: binding.instance, |
||||
|
...(binding.arg || {}) |
||||
|
}; |
||||
|
await modernCopyToClipboard(text, options); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
Loading…
Reference in new issue