159 lines
3.8 KiB
Vue
159 lines
3.8 KiB
Vue
<template>
|
|
<div class="container">
|
|
<!-- 设计图列表 -->
|
|
<div class="design-list">
|
|
<div
|
|
class="design-item"
|
|
v-for="(item, index) in designList"
|
|
:key="index"
|
|
>
|
|
<div class="design-preview">
|
|
<img :src="item.image" alt="preview" />
|
|
</div>
|
|
<div class="design-info">
|
|
<div class="design-title">{{ item.title }}</div>
|
|
<div class="design-author">by:{{ item.author }}</div>
|
|
|
|
<div class="design-stats">
|
|
<div class="stat-item">
|
|
<span class="iconfont">👁</span>
|
|
<span>{{ item.views }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="iconfont">👍</span>
|
|
<span>{{ item.likes }}</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="iconfont">💬</span>
|
|
<span>{{ item.comments }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="design-action">
|
|
<button class="view-btn" @click="viewDesign(index)">查看</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({ layout: 'm' })
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
const designList = ref([
|
|
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
|
|
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
|
|
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity1.png', views: 128, likes: 16, comments: 35 },
|
|
{ title: '高压细水雾灭火推车描述', author: '赵其', image: '/static/images/activity2.png', views: 128, likes: 16, comments: 35 },
|
|
])
|
|
|
|
function viewDesign(index: number) {
|
|
router.push({ path: '/mobile/design-detail', query: { id: String(index) } })
|
|
}
|
|
|
|
onMounted(() => {
|
|
const titleFromQuery = (route.query.titleName as string) || '详情'
|
|
if (titleFromQuery) {
|
|
document.title = decodeURIComponent(titleFromQuery)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 变量定义
|
|
$primary-color: #007aff;
|
|
$text-color: #333;
|
|
$secondary-text: #666;
|
|
$light-text: #999;
|
|
$bg-color: #fff;
|
|
$white: #fff;
|
|
$border-color: #eee;
|
|
$border-radius: 10rpx;
|
|
$mask-bg: rgba(0, 0, 0, 0.5);
|
|
|
|
.container {
|
|
padding: 0;
|
|
background-color: $bg-color;
|
|
position: relative;
|
|
}
|
|
|
|
.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: 20rpx;
|
|
position: relative;
|
|
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.design-preview {
|
|
width: 220rpx;
|
|
height: 160rpx;
|
|
overflow: hidden;
|
|
border: 1px solid $border-color;
|
|
|
|
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: 26rpx;
|
|
padding: 0rpx 25rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|