154 lines
3.0 KiB
Vue
154 lines
3.0 KiB
Vue
<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>
|