182 lines
3.9 KiB
Vue
182 lines
3.9 KiB
Vue
<template>
|
|
<view class="design-list">
|
|
<view class="design-item" v-for="(item, index) in items" :key="index">
|
|
<view class="design-preview">
|
|
<image :src="item.image" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="design-info">
|
|
<view class="design-title">{{ item.title }}</view>
|
|
<view class="design-author">by:{{ item.author }}</view>
|
|
|
|
<view class="design-stats">
|
|
<view class="stat-item">
|
|
<text class="iconfont">👁</text>
|
|
<text>{{ item.views }}</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="iconfont">👍</text>
|
|
<text>{{ item.likes }}</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="iconfont">💬</text>
|
|
<text>{{ item.comments }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="design-action">
|
|
<button class="view-btn">查看</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "RecommendItem",
|
|
props: {
|
|
currentTab: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
items: [
|
|
{
|
|
id: 1,
|
|
title: "高压细水雾灭火推车描述",
|
|
author: "赵其",
|
|
image: "/static/images/activity1.png",
|
|
views: 128,
|
|
likes: 16,
|
|
comments: 35,
|
|
url: "/pages/drawings/detail?id=1",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "高压细水雾灭火推车描述",
|
|
author: "赵其",
|
|
image: "/static/images/activity2.png",
|
|
views: 128,
|
|
likes: 16,
|
|
comments: 35,
|
|
url: "/pages/drawings/detail?id=2",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "室内CAD模型设计室内CAD模型设计",
|
|
author: "张泽",
|
|
image: "/static/images/activity1.png",
|
|
views: 95,
|
|
likes: 12,
|
|
comments: 28,
|
|
url: "/pages/models/detail?id=1",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "CAD设计规范文档",
|
|
author: "李华",
|
|
image: "/static/images/activity2.png",
|
|
views: 156,
|
|
likes: 23,
|
|
comments: 42,
|
|
url: "/pages/documents/detail?id=1",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
viewDetail(item) {
|
|
console.log("View detail for:", item.title);
|
|
uni.navigateTo({
|
|
url: item.url,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 变量定义
|
|
$primary-color: #007aff;
|
|
$text-color: #333;
|
|
$secondary-text: #666;
|
|
$light-text: #999;
|
|
$bg-color: #f0f4f9;
|
|
$white: #fff;
|
|
$border-color: #eee;
|
|
$border-radius: 15rpx;
|
|
.design-list {
|
|
// padding: 10rpx 20rpx;
|
|
|
|
.design-item {
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
background-color: $white;
|
|
border-radius: $border-radius;
|
|
border: 1px solid $border-color;
|
|
padding: 17rpx 10rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.design-preview {
|
|
width: 220rpx;
|
|
height: 168rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.design-info {
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
|
|
.design-title {
|
|
font-size: 27rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.design-author {
|
|
font-size: 25rpx;
|
|
color: $light-text;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
.design-stats {
|
|
display: flex;
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
font-size: 24rpx;
|
|
color: $light-text;
|
|
|
|
.iconfont {
|
|
margin-right: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.design-action {
|
|
position: absolute;
|
|
right: 20rpx;
|
|
bottom: 20rpx;
|
|
|
|
.view-btn {
|
|
background-color: $primary-color;
|
|
color: $white;
|
|
font-size: 25rpx;
|
|
padding: 0rpx 25rpx !important;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|