119 lines
3.8 KiB
Vue
119 lines
3.8 KiB
Vue
<script setup>
|
|
import fmt from "../../../static/images/fmt.png";
|
|
import linkIcon from '../../../static/icons/link.png';
|
|
import XImage from "../../../components/XImage.vue";
|
|
import XSquareCarouselImage from "../../../components/XSquareCarouselImage.vue";
|
|
import HF_ICON from "../../../static/icons/icon-wrapper.png";
|
|
import { copy } from "../../../utils/uils.js";
|
|
import { computed } from "vue";
|
|
|
|
const { data, home } = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
home: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const list = computed(() => data.comment_arr?.flatMap(v => v.children ? [v, ...v.children] : [v]));
|
|
</script>
|
|
|
|
<template>
|
|
<!--任务详情-->
|
|
<view class="w-full">
|
|
<view class="title">
|
|
案例概览
|
|
</view>
|
|
<view class="block items-center" v-if="data.case_url">
|
|
<view class="block-title">任务案例:</view>
|
|
<view class="block-info w-full overflow-hidden">
|
|
<view class="text-[#165DFF] !flex items-center gap-[10rpx]">
|
|
<image class="!size-[24rpx] flex-shrink-0" :src="linkIcon"></image>
|
|
<text class="ellipsis-1 flex-grow">
|
|
{{ data.case_url }}
|
|
</text>
|
|
<view @click="copy(data.case_url)"
|
|
class="nowrap flex-shrink !py-[7rpx] !px-[32rpx] rounded-full bg-[#E8F3FF]"
|
|
style="font-size: 24rpx">
|
|
复制
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="block">
|
|
<view class="block-title">素材案例:</view>
|
|
<view class="block-info !grid grid-cols-3 gap-[20rpx]">
|
|
<x-square-carousel-image v-if="data.case_images_arr.length > 0" :list="data.case_images_arr"
|
|
:show-s-y="true">
|
|
</x-square-carousel-image>
|
|
</view>
|
|
</view>
|
|
<view class="block">
|
|
<view class="block-title">评论区案例:</view>
|
|
<view class="test-24r text-[#4E5969]">
|
|
<view v-for="(v, index) in list">
|
|
<view>
|
|
评论{{ index + 1 }}:
|
|
<text v-if="v.pid" class="text-[rgba(134,144,156)]">
|
|
<image class="!size-[20rpx]" src="/static/icons/msgback.png"></image>
|
|
回复{{
|
|
list.findIndex(k => k.pid === v.pid)
|
|
}}
|
|
</text>
|
|
{{ v.intro }}
|
|
</view>
|
|
<view class="!flex gap-[20rpx] flex-wrap !my-[10rpx]">
|
|
<view class="!w-[96rpx] !h-[96rpx] !aspect-square" v-for="k in v.image_arr">
|
|
<x-image :style="{
|
|
width: '96rpx',
|
|
height: '96rpx',
|
|
}" :src="k" :list="v.image_arr">
|
|
</x-image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.title {
|
|
color: rgb(29, 33, 41);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.block {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
|
|
.block-title {
|
|
flex-shrink: 0;
|
|
color: rgb(134, 144, 156);
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
width: 130rpx;
|
|
}
|
|
|
|
.block-info {
|
|
color: rgb(78, 89, 105);
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
}
|
|
}
|
|
</style>
|