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