no message
This commit is contained in:
71
pages/Home/ToolList.vue
Normal file
71
pages/Home/ToolList.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<div v-for="item in list" class="tools" @click="checkTool(item)">
|
||||
<span class="tool-card" :class="item.active?'checkedBg':''">
|
||||
<span class="content">
|
||||
<img :src="`/logo/${item.img}_${item.active ? 'checkd' : 'un'}.png`" />
|
||||
<span>{{ item.name }}</span>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['list'],
|
||||
data() {
|
||||
return {
|
||||
ischeck: 'check',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.list.forEach(item => {
|
||||
this.$set(item, 'active', false)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
checkTool(item) {
|
||||
this.list.forEach(i => this.$set(i, 'active', false)) // 重置其他项
|
||||
this.$set(item, 'active', true)
|
||||
this.$emit('tool-selected', item.name) // 发送工具名称
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr); // 4列布局
|
||||
gap: 20px; // 网格间距
|
||||
|
||||
.tools {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 10px 16px;
|
||||
display: inline-block;
|
||||
|
||||
.content {
|
||||
@include display-flex;
|
||||
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tools .checkedBg {
|
||||
color: $white;
|
||||
background: linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
153
pages/Home/Toolbar.vue
Normal file
153
pages/Home/Toolbar.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div :id="id">
|
||||
<div class="bar-list">
|
||||
<div class="top-box">
|
||||
<div>
|
||||
<img :src="`/logo/${tool.img}_check.png`" />
|
||||
<span class="title-text .gradient-color">
|
||||
{{tool.name}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="more pointer" v-if="!tagList.length">
|
||||
View more<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="tagList.length">
|
||||
<div class="tags" ref="tagsContainer" @mousedown="startDrag" @mousemove="onDrag" @mouseup="stopDrag"
|
||||
@mouseleave="stopDrag">
|
||||
<div class="tag-item" v-for="(item,index) in 10">
|
||||
AI Image & illustration Generation
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="more pointer" v-if="tagList.length">
|
||||
View more<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="item-card">
|
||||
<div class="card-caontainer" v-for="(item,index) in 8">
|
||||
<div class="title">
|
||||
<img src="/logo/collect.png" />
|
||||
<span>
|
||||
Skywork
|
||||
</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
Latest ToolsLatest ToolsLatest ToolsLatest Tools
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['tool','id'],
|
||||
data() {
|
||||
return {
|
||||
isDragging: false,
|
||||
startX: 0,
|
||||
scrollLeft: 0,
|
||||
tagList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startDrag(e) {
|
||||
this.isDragging = true;
|
||||
this.startX = e.pageX - this.$refs.tagsContainer.offsetLeft;
|
||||
this.scrollLeft = this.$refs.tagsContainer.scrollLeft;
|
||||
},
|
||||
onDrag(e) {
|
||||
if (!this.isDragging) return;
|
||||
e.preventDefault();
|
||||
const x = e.pageX - this.$refs.tagsContainer.offsetLeft;
|
||||
const walk = (x - this.startX) * 2; // 调整滑动速度
|
||||
this.$refs.tagsContainer.scrollLeft = this.scrollLeft - walk;
|
||||
},
|
||||
stopDrag() {
|
||||
this.isDragging = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bar-list {
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
@include display-flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title-text {
|
||||
|
||||
font-weight: 600;
|
||||
font-size: $larg-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
// cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||||
// cursor: grab;
|
||||
/* 显示抓取手势 */
|
||||
|
||||
&:active {
|
||||
// cursor: grabbing;
|
||||
/* 抓取中状态 */
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
text-align: right;
|
||||
color: $grey-color;
|
||||
font-size: $mid-font-size;
|
||||
}
|
||||
|
||||
.item-card {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.card-caontainer {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
border: 1px solid #E2E8F0;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: $main-font-color;
|
||||
font-size: $big-font-size;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
color: $grey-color;
|
||||
// line-height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
305
pages/Home/index.vue
Normal file
305
pages/Home/index.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div id="home-page">
|
||||
<IntegratedLayout>
|
||||
<div class="top-title">
|
||||
<div class="first-text gradient-color">
|
||||
AIToolsFinder
|
||||
</div>
|
||||
<div class="second-text">
|
||||
Get global AI tools in one stop
|
||||
</div>
|
||||
<div class="third-text">
|
||||
It includes over a <span class="special">thousand global AI tools</span>, covering writing, images,
|
||||
videos, audio, programming,
|
||||
music, design, chatting, etc., and recommends learning platforms, frameworks and models
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<input type="text" placeholder="Please enter the key words">
|
||||
<i class="el-icon-search gradient-color search-icon pointer"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex">
|
||||
<div class="left-card card-box">
|
||||
<el-carousel indicator-position="outside">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
||||
</div>
|
||||
<div class="right-card card-box">
|
||||
<div class="clearfix">
|
||||
<img src="/logo/hot.png" />
|
||||
Popular Tools
|
||||
</div>
|
||||
<div class="line">
|
||||
|
||||
</div>
|
||||
<div class="pop-item">
|
||||
<div v-for="item in pop_tools" class="box">
|
||||
<div class="img-box">
|
||||
<img src="/logo/bottom-logo.png" />
|
||||
</div>
|
||||
<div>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-list">
|
||||
<ToolList :list="list" @tool-selected="scrollToTool"></ToolList>
|
||||
</div>
|
||||
<div class="line">
|
||||
</div>
|
||||
<div class="toolbar" v-for="tool in list">
|
||||
<Toolbar :tool="tool" :id="`tool-${tool.name}`"></Toolbar>
|
||||
</div>
|
||||
|
||||
</IntegratedLayout>
|
||||
<!-- <el-backtop target=".scroll-container" :bottom="100">
|
||||
<div>
|
||||
<img src="/logo/back-top.png" />
|
||||
</div>
|
||||
</el-backtop> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ToolList from './ToolList.vue'
|
||||
import Toolbar from './Toolbar.vue'
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
ToolList,
|
||||
Toolbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pop_tools: [{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
{
|
||||
name: 'Gemini',
|
||||
src: ''
|
||||
},
|
||||
],
|
||||
list: [{
|
||||
name: 'AI Image Tool',
|
||||
img: 'image'
|
||||
},
|
||||
{
|
||||
name: 'AI Office Tools',
|
||||
img: 'office'
|
||||
},
|
||||
{
|
||||
name: 'AI Video Tool',
|
||||
img: 'Video'
|
||||
},
|
||||
{
|
||||
name: 'AI Programming Tools',
|
||||
img: 'program'
|
||||
},
|
||||
{
|
||||
name: 'AI Chat Assistant',
|
||||
img: 'chat'
|
||||
},
|
||||
{
|
||||
name: 'AI Writing Tool',
|
||||
img: 'write'
|
||||
},
|
||||
{
|
||||
name: 'AI learning Website',
|
||||
img: 'learn'
|
||||
},
|
||||
{
|
||||
name: 'AI Design Tool',
|
||||
img: 'design'
|
||||
},
|
||||
{
|
||||
name: 'AI Search Engine',
|
||||
img: 'search'
|
||||
},
|
||||
{
|
||||
name: 'AI Development Platform',
|
||||
img: 'develop'
|
||||
},
|
||||
{
|
||||
name: 'AI Audio Tool',
|
||||
img: 'audio'
|
||||
},
|
||||
{
|
||||
name: 'AI Model Evaluation',
|
||||
img: 'model'
|
||||
},
|
||||
{
|
||||
name: 'AI Prompt Command',
|
||||
img: 'prompt'
|
||||
},
|
||||
{
|
||||
name: 'AI Content Detection',
|
||||
img: 'content'
|
||||
},
|
||||
{
|
||||
name: 'AI Agent',
|
||||
img: 'agent'
|
||||
},
|
||||
{
|
||||
name: 'Model Training',
|
||||
img: 'train'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollToTool(toolName) {
|
||||
const target = document.getElementById(`tool-${toolName}`)
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#home-page {
|
||||
flex: 1;
|
||||
overflow-y: auto; // 必须启用滚动
|
||||
position: relative; // 添加相对定位
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain; // 控制图片自适应
|
||||
background-position: top center;
|
||||
background-image: url('/logo/mask.png');
|
||||
}
|
||||
|
||||
|
||||
|
||||
.top-title {
|
||||
@include flex-center;
|
||||
flex-direction: column;
|
||||
font-weight: bold;
|
||||
height: 400px;
|
||||
margin-top: 180px;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.first-text {
|
||||
line-height: 90px;
|
||||
font-size: $huge-font-size2;
|
||||
}
|
||||
|
||||
.second-text {
|
||||
margin: 18px 0;
|
||||
font-size: $huge-font-size3;
|
||||
}
|
||||
|
||||
.third-text {
|
||||
width: 716px;
|
||||
height: 81px;
|
||||
font-weight: 500;
|
||||
color: $grey-color;
|
||||
font-size: $normal-font-size;
|
||||
|
||||
.special {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr; // 4列布局
|
||||
gap: 20px; // 网格间距
|
||||
margin: 0 auto;
|
||||
height: 366px;
|
||||
|
||||
.card-box {
|
||||
background: $white;
|
||||
box-shadow: 0px 18px 33px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12px;
|
||||
border: 1px solid #FFFFFF;
|
||||
}
|
||||
|
||||
.left-card {
|
||||
// min-width: 805px;
|
||||
}
|
||||
|
||||
.right-card {
|
||||
padding: 20px;
|
||||
// min-width: 372px;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
font-size: $larg-font-size;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 15px 0;
|
||||
background: #FFFFFF;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #E2E8F0;
|
||||
@include flex-center;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.15);
|
||||
cursor: pointer;
|
||||
@include gradient-border($linear-gradient-start, $linear-gradient-end);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.pop-item {
|
||||
display: grid;
|
||||
grid-auto-rows: 1fr;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px; // 新增间距控制
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tool-list {
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin: 60px auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user