128 lines
3.7 KiB
Vue
128 lines
3.7 KiB
Vue
<script setup>
|
||
import {ref, reactive} from "vue";
|
||
import XSquareCarouselImage from "../../../components/XSquareCarouselImage.vue";
|
||
import {toPage} from "../../../utils/uils.js";
|
||
|
||
const {data} = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: null,
|
||
}
|
||
});
|
||
|
||
const current = ref(0);
|
||
</script>
|
||
|
||
<template>
|
||
<!--领取素材-->
|
||
<view class="!flex gap-[24rpx] !mb-[28rpx]">
|
||
<view
|
||
v-for="(item,index) in data.children.material"
|
||
@click="current=index"
|
||
:class="['tab-item', index===current?'cur':'']">
|
||
素材{{ index + 1 }}
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="true">
|
||
<view class="block">
|
||
<view class="block-title">
|
||
标题:
|
||
</view>
|
||
<view class="block-info">
|
||
{{ data.children.material[current].title }}
|
||
</view>
|
||
</view>
|
||
<view class="block">
|
||
<view class="block-title">
|
||
话题:
|
||
</view>
|
||
<view class="block-info">
|
||
#话题1 #话题2 #话题3 #话题4 #话题5
|
||
</view>
|
||
</view>
|
||
<view class="block">
|
||
<view class="block-title">
|
||
正文:
|
||
</view>
|
||
<view class="block-info">
|
||
{{ data.children.material[current].content }}
|
||
</view>
|
||
</view>
|
||
<view class="block">
|
||
<view class="block-title">
|
||
素材:
|
||
</view>
|
||
<view class="block-info">
|
||
<x-square-carousel-image :list="data.children.material[current].material_arr"></x-square-carousel-image>
|
||
</view>
|
||
</view>
|
||
<view class="block">
|
||
<view class="block-title">
|
||
评论区案例:
|
||
</view>
|
||
<view class="block-info">
|
||
<view>
|
||
<view>评论1：我用的也是这款，早tb可以购买噢~我用的也是这款，早tb可以购买噢~</view>
|
||
<view class="!flex gap-[20rpx] flex-wrap">
|
||
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill"
|
||
src="/static/images/test.png"></image>
|
||
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill"
|
||
src="/static/images/test.png"></image>
|
||
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill"
|
||
src="/static/images/test.png"></image>
|
||
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill"
|
||
src="/static/images/test.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<tui-button size="28" @click="toPage('/pages/downloadMaterials/index')">
|
||
<tui-icon size="20" color="#fff" name="bottom"></tui-icon>
|
||
<view class="!ml-[20rpx]">一键下载</view>
|
||
</tui-button>
|
||
</template>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.tab-item {
|
||
padding: 12rpx 26rpx;
|
||
border-radius: 9999rpx;
|
||
background-color: #F7F8FA;
|
||
font-size: 24rpx;
|
||
color: #4E5969;
|
||
transition: 500ms;
|
||
}
|
||
|
||
.cur {
|
||
background-color: #E8F3FF;
|
||
color: #165DFF;
|
||
}
|
||
|
||
.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: 160rpx;
|
||
}
|
||
|
||
.block-info {
|
||
color: rgb(78, 89, 105);
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 140%;
|
||
letter-spacing: 0;
|
||
}
|
||
}
|
||
</style>
|