youxi-app/pages/template/shop/goods-detail/index.uvue

<template>
	<cl-page>
		<Topbar />

		<cl-banner
			:list="bannerList"
			:height="800"
			:pt="{
				className: '!rounded-none',
				image: {
					className: '!rounded-none'
				}
			}"
		/>

		<view class="card dark:!bg-surface-700" id="info">
			<Info />
		</view>

		<view class="card !py-1 dark:!bg-surface-700">
			<view class="row is-border dark:!border-surface-600">
				<cl-icon name="apps-line"></cl-icon>

				<view class="flex-1 ml-3">
					<cl-text>已选：黑色 128GB + 碎屏险</cl-text>
				</view>

				<cl-icon name="arrow-right-s-line"></cl-icon>
			</view>

			<view class="row is-border !items-start dark:!border-surface-600">
				<cl-icon name="truck-line" :pt="{ className: '!mt-1' }"></cl-icon>

				<view class="flex-1 ml-3">
					<cl-text color="info">预计11月1日 周三 送达</cl-text>
					<cl-text color="info" :pt="{ className: '!mt-1' }">深圳益田假日广场</cl-text>
				</view>
			</view>

			<view class="row">
				<cl-icon name="shield-check-line"></cl-icon>

				<view class="flex-1 ml-3">
					<cl-text color="info">7天无理由退货 · 正品保证 · 极速发货 · 无忧售后</cl-text>
				</view>
			</view>
		</view>

		<view class="card dark:!bg-surface-700" id="comment">
			<Comment />
		</view>

		<view class="card !p-0 dark:!bg-surface-700" id="desc">
			<Desc />
		</view>

		<cl-footer>
			<view class="flex flex-row overflow-visible">
				<view class="flex flex-row mr-auto overflow-visible">
					<view class="flex justify-center items-center px-4">
						<cl-icon name="heart-line" :size="42"></cl-icon>
						<cl-text :pt="{ className: 'text-xs mt-1' }">收藏</cl-text>
					</view>

					<view
						class="flex justify-center items-center px-4 overflow-visible"
						@tap="router.to('/pages/template/shop/shopping-cart')"
					>
						<cl-icon name="shopping-cart-line" :size="42"></cl-icon>
						<cl-text :pt="{ className: 'text-xs mt-1' }">购物车</cl-text>

						<cl-badge
							type="error"
							:value="3"
							position
							:pt="{ className: '!right-[24rpx] !top-[-10rpx] !scale-80' }"
						></cl-badge>
					</view>
				</view>

				<cl-button text border :pt="{ className: '!w-[220rpx]' }">加入购物车</cl-button>
				<cl-button :pt="{ className: '!w-[220rpx]' }">立即购买</cl-button>
			</view>
		</cl-footer>
	</cl-page>
</template>

<script setup lang="ts">
import { router } from "@/cool";
import { ref } from "vue";
import Comment from "./comment.uvue";
import Info from "./info.uvue";
import Desc from "./desc.uvue";
import Topbar from "./topbar.uvue";

const bannerList = ref<string[]>([
	"https://unix.cool-js.com/images/demo/goods/banner-1.jpg",
	"https://unix.cool-js.com/images/demo/goods/banner-2.jpg",
	"https://unix.cool-js.com/images/demo/goods/banner-3.jpg",
	"https://unix.cool-js.com/images/demo/goods/banner-4.jpg"
]);
</script>

<style lang="scss" scoped>
.card {
	@apply p-4 bg-white mb-3;

	.row {
		@apply flex flex-row items-center py-4;

		&.is-border {
			@apply border-b border-t-0 border-l-0 border-r-0 border-solid border-surface-100;
		}
	}
}
</style>