xuye929/AIProd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后期修改完善，上线版本

Browse Source
This commit is contained in:
qiuxiao
2025-11-12 18:11:11 +08:00
parent c54f9c9976
commit 8f57683dd5
98 changed files with 2110 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
pages/ToolDetail/index.vue
View File

@ -12,22 +12,18 @@
</div>
<!--标题-->
<p class="title-text">{{ tool_detail.name || '' }}</p>
<!--评分-->
<div class="rate-box">
<Rate v-model="tool_detail.rating" readonly />
<div class="flex" style="gap: 20px">
<ThumbBtn
:like-count="tool_detail.likeCount || 0"
:id="tool_detail.id"
type="tool"
@like-success="refreshToolDetail"
/>
<CommentBtn :comment-count="commentCount" />
</div>
</div>
<!--工具内容-->
<div class="tool-content">
<div class="left-content flex flex-col">
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_star.png" alt="">
<span>Score: </span>
</div>
<div class="item-content color-01">
{{ (tool_detail.rating || 0).toFixed(1) }}
</div>
</div>
<div class="terms-item">
<div class="item-title">
<img src="/ToolDetail/icon_note.png" alt="">
@ -42,20 +38,31 @@
<img src="/ToolDetail/icon_clock.png" alt="">
<span>Data update: </span>
</div>
<div class="item-content">{{ tool_detail.updatedAt || '' }}</div>
<div class="item-content">{{ formatPublishTime(tool_detail.updatedAt || '') }}</div>
</div>
<div class="tags">
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it.value }}</div>
</div>
</div>
<div class="right-content">
<div class="card-website-view">
<iframe :src="tool_detail.url || ''" style="width: 100%; height: 100%; pointer-events: none"></iframe>
<div class="flex flex-top-right mb-20 mr-25">
<div class="flex gap-20">
<ThumbBtn
:like-count="tool_detail.likeCount || 0"
:id="tool_detail.id"
type="tool"
@like-success="refreshToolDetail"
/>
<CommentBtn :comment-count="commentCount" />
<a :href="tool_detail.url || ''" class="link-button">
<img src="/ToolDetail/icon_link.png" alt="" class="wh-16" />
<span>Visit website</span>
</a>
</div>
</div>
<div class="card-website-view">
<iframe :src="tool_detail.url || ''" class="scaled-iframe"></iframe>
</div>
<a :href="tool_detail.url || ''" class="link-button">
<img src="/ToolDetail/icon_link.png" alt="" style="width: 16px; height: 16px" />
<span>Visit website</span>
</a>
</div>
</div>
@ -67,6 +74,7 @@
:tool-slug="tool_slug || ''"
:category-slug="category_slug || ''"
:tool_content="tool_detail.description || ''"
:category-name="category_name || ''"
/>
</MyTabPane>
<MyTabPane label="Comment" name="comment"></MyTabPane>
@ -100,16 +108,18 @@ export default {
data() {
return {
activeName: 'product',
tool_slug: null,
tool_slug: '',
tool_detail: {},
commentCount: 0,
other_tools: [],
category_slug: null,
category_slug: '',
category_name: '',
}
},
mounted() {
this.tool_slug = this.$route.query.tool_slug;
this.category_slug = this.$route.query.category_slug;
this.category_name = this.$route.query.category_name || '';
this.getAsyncToolDetailData();
this.getAsyncOtherTools();
},
@ -119,6 +129,7 @@ export default {
if (to.query.tool_slug !== from.query.tool_slug) {
this.tool_slug = to.query.tool_slug;
this.category_slug = to.query.category_slug;
this.category_name = to.query.category_name || '';
this.resetAndReloadData();
}
}
@ -128,6 +139,21 @@ export default {
async refreshToolDetail() {
await this.getAsyncToolDetailData();
},
formatPublishTime(timeString) {
if (!timeString) return '';
const date = new Date(timeString);
const months = [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];
const month = months[date.getMonth()];
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${month} ${day} ${year}`;
},
// 获取详情数据
async getAsyncToolDetailData() {
if (this.tool_slug) {
@ -184,22 +210,34 @@ export default {
</script>
<style scoped lang="scss">
.gap-20 {
gap: 20px;
}
.mb-20 {
margin-bottom: 20px;
}
.mr-25 {
margin-right: 25px;
}
.color-01 {
color: #7B61FF;
}
.tool-detail {
flex: 1;
overflow-y: auto;
position: relative;
.content {
padding-top: 100px;
padding-top: 25px;
padding-bottom: 100px;
min-height: 100vh;
.bread-menu {
font-size: $mid-font-size;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
font-weight: 600;
.crumbs {
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
}
}
@ -207,37 +245,23 @@ export default {
.title-text {
font-size: 34px;
color: #1E293B;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
margin-top: 55px;
}
.rate-box {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
.btn-wrapper {
display: flex;
align-items: center;
gap: 20px;
}
margin-top: 16px;
margin-bottom: 20px;
}
.tool-content {
display: flex;
margin-top: 20px;
margin-bottom: 20px;
gap: 50px;
.left-content {
padding-top: 12px;
gap: 50px;
gap: 20px;
flex: 1;
.terms-item {
margin-bottom: 30px;
margin-bottom: 20px;
display: flex;
align-items: flex-start;
gap: 7px;
@ -247,7 +271,7 @@ export default {
align-items: center;
gap: 8px;
color: #1E293B;
font-family: 'Poppins-Medium', serif;
font-family: 'Poppins-Medium';
img {
width: 24px;
@ -256,7 +280,7 @@ export default {
}
.item-content {
font-family: 'Poppins-Regular', serif;
font-family: 'Poppins-Regular';
color: #64748B;
}
}
@ -290,7 +314,14 @@ export default {
border-radius: 16px;
box-shadow: 0 10px 30px 0 #0000000d;
padding: 19px 25px;
margin-bottom: 28px;
.scaled-iframe {
width: 1000%;
height: 1000%;
transform: scale(0.1);
transform-origin: 0 0;
pointer-events: none;
border: none;
}
}
.link-button {
@ -300,7 +331,7 @@ export default {
border-radius: 12px;
margin: auto;
color: #fff;
font-family: 'Poppins-SemiBold', serif;
font-family: 'Poppins-SemiBold';
font-weight: 600;
display: flex;
align-items: center;