121 lines
2.2 KiB
Vue
121 lines
2.2 KiB
Vue
<template>
|
|
<view class="detail-container">
|
|
<view class="top-area">
|
|
<view class="picture">
|
|
<up-avatar size="60rpx" :src="detailData.authorUrl" />
|
|
</view>
|
|
<view class="info">
|
|
<view>
|
|
{{ detailData.authorName }}
|
|
</view>
|
|
<view class="time">
|
|
{{ detailData.publishTime }}
|
|
</view>
|
|
</view>
|
|
<view class="look">
|
|
<image src="/static/icon/icon-eye.png"></image>{{ detailData.pageView }}
|
|
</view>
|
|
</view>
|
|
<view class="title">
|
|
{{ detailData.title }}
|
|
</view>
|
|
<view class="content">
|
|
{{ detailData.content }}
|
|
</view>
|
|
<view class="img-area" v-for="(item, index) in detailData?.detailsImageUrl?.split(',')" :key="index">
|
|
<image mode="widthFix" :src="item"></image>
|
|
</view>
|
|
<view class="tags-area">
|
|
<view
|
|
class="tag-item"
|
|
v-for="(item, index) in detailData?.topic"
|
|
:key="index"
|
|
:style="{
|
|
backgroundColor: item.color
|
|
}"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { articleDetails } from '@/api/api.js';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
|
|
const detailData = ref()
|
|
|
|
onLoad((options) => {
|
|
getDetail(options.id);
|
|
});
|
|
|
|
const getDetail = async (id) => {
|
|
let _res = await articleDetails({ id });
|
|
detailData.value = _res;
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.detail-container {
|
|
padding: 28rpx 30rpx;
|
|
.top-area {
|
|
display: flex;
|
|
font-weight: bold;
|
|
font-size: 24rpx;
|
|
color: #232323;
|
|
.info {
|
|
margin-left: 12rpx;
|
|
}
|
|
.look {
|
|
margin-left: 36rpx;
|
|
padding-top: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
image {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #232323;
|
|
margin-top: 40rpx;
|
|
}
|
|
.content {
|
|
margin-top: 24rpx;
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
color: #232323;
|
|
}
|
|
.img-area {
|
|
margin-top: 24rpx;
|
|
image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.tags-area {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 36rpx;
|
|
.tag-item {
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
background: #6FA256;
|
|
border-radius: 24rpx;
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
color: #000;
|
|
padding: 0 28rpx;
|
|
margin-right: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|