|
|
|
|
@ -0,0 +1,194 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-containere">
|
|
|
|
|
<div class="material">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
|
|
<span>任务素材</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
根据内容主题，利用推荐的三个AI工具，撰写相关的文章。
|
|
|
|
|
<br />
|
|
|
|
|
1、撰写博客文章：假设你是一个美食博客的作者，想要撰写一篇关于“如何推荐外地游客品尝本地美食”的文章。
|
|
|
|
|
<br />
|
|
|
|
|
2、编写产品描述：你是一家电子商务公司的营销人员，需要为一款新型智能手表编写产品描述，突出其独特功能和设计。
|
|
|
|
|
<br />
|
|
|
|
|
3、撰写研究报告摘要：你是一名研究人员，需要为一篇关于“可持续发展城市”的研究报告撰写摘要。
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="material">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>任务提交</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
|
|
<el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" :on-change="handleChange" :show-file-list="true" accept=".png,.jpg,.jpeg" :limit="1">
|
|
|
|
|
<el-button type="primary" class="uploadBtn">+任务提交</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="material" style="margin-top: 20px">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
|
|
|
|
|
<span>大模型参考工具</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/1723156589-image.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<div class="title">讯飞写作</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快速生成新闻稿件、种草文案、品宣策划、工作总结、心得体会等各类文本内容。它支持AI对话写作、多场景模板、AI工具润色改写扩写缩写续写、AI文生图图生图、素材辅助写作等功能，全面提升用户的写作效率。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">讯飞写作是科大讯飞推出的一款智能AI写作助手，它基于科大讯飞的星火大模型，专注于写作、创作、学习等办公场景的应用，为各行各业提供AIGC新质生产力工具。用户可以通过讯飞写作快...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href=" https://huixie.iflyrec.com/" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/1723156589-image.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<div class="title">火山写作</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器、小红书文案生成器、SEO元标签、知乎回答、电商产品描述等，以支持内容创作和营销活动。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">火山写作是由字节跳动推出的一款中英文AI写作助手，它集成了创作、润色、纠错、改写、翻译等多种功能，旨在帮助用户提高写作质量和效率。此外，火山写作还提供了一系列实用工具，比如博客文章生成器...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href="https://www.writingo.net/" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/1723156589-image.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<!-- <div class="icon">
|
|
|
|
|
<div class="iconItem">AI工具</div>
|
|
|
|
|
<span>＞</span>
|
|
|
|
|
<div class="iconItem">AI写作对话</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="title">豆包AI</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合、日常生活与工作规划、个性化AI智能体创建等功能。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">豆包AI是由字节跳动公司开发的一款多功能人工智能助手，它具备强大的对话能力、个性化互动、文案创作与优化、文档阅读与深度分析、文本到图片生成、AI音乐生成、学习辅助工具、信息搜索与整合...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href="https://www.doubao.com/chat/" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup></script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.app-containere {
|
|
|
|
|
margin: 10px 4px 10px 10px;
|
|
|
|
|
border: 1px solid #0452c6;
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
padding: 25px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
.material {
|
|
|
|
|
.title {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
span {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.case {
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
// width: calc(100% - 100px);
|
|
|
|
|
width: 500px;
|
|
|
|
|
// background: #fff;
|
|
|
|
|
background: #002c5b;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 1px solid #003e7c;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.bgItem {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
img {
|
|
|
|
|
// 186px
|
|
|
|
|
width: 258px;
|
|
|
|
|
height: 134px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
scale: 0.8;
|
|
|
|
|
}
|
|
|
|
|
background-color: #e6e8ed;
|
|
|
|
|
width: 240px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
// padding: 20px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
|
|
|
|
|
}
|
|
|
|
|
.detail {
|
|
|
|
|
width: 300px;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
span {
|
|
|
|
|
color: #f1404b;
|
|
|
|
|
}
|
|
|
|
|
.iconItem {
|
|
|
|
|
background-color: #f1404b;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
display: block;
|
|
|
|
|
background-color: #e7e6e8;
|
|
|
|
|
color: #333;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.btn:hover {
|
|
|
|
|
background-color: #000;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
.tooltip {
|
|
|
|
|
max-width: 260px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
HeHaonan
2 years ago
