<template> <view class="flex-col page"> <view class="flex-col"> <view class="flex-col justify-start items-end text-wrapper"><text class="font text">编辑</text></view> <view class="flex-col section"> <view class="flex-row justify-between self-stretch group"> <text class="font text_2">商品类</text> <text class="font text_3">服务类</text> </view> <view class="self-end section_2"></view> </view> <view class="flex-col section_3"> <view class="flex-row list-item mt-16" v-for="(item, index) in items" :key="index"> <image class="shrink-0 self-start image_2 image_3" src="https://ide.code.fun/api/image?token=670f0f3f1511d900114aa2f0&name=3f81d5886d1e216ce7cc53687e0c5499.png" /> <image class="shrink-0 image" src="https://ide.code.fun/api/image?token=670f0f3f1511d900114aa2f0&name=efb4111919edad55b0130dca640e611e.png" /> <view class="flex-col flex-1 group_2"> <text class="font_2 text_4">【非遗手工艺体验】纸笺加工技艺-流沙笺团扇制作体验</text> <view class="flex-row justify-between items-center section_4 mt-7"> <view class="flex-col items-start"> <text class="font_3 text_5">仿真丝团扇;上午场(09:30-12:00)</text> <text class="font_3 text_6 mt-6">日期:2024-10-15</text> </view> <image class="image_4" src="https://ide.code.fun/api/image?token=670f0f3f1511d900114aa2f0&name=ca9cf42222294d2fd1264864434d6576.png" /> </view> </view> </view> </view> </view> <view class="flex-row justify-between items-center section_5 mt-569"> <view class="flex-row items-center"> <image class="shrink-0 image_2" src="https://ide.code.fun/api/image?token=670f0f3f1511d900114aa2f0&name=3f81d5886d1e216ce7cc53687e0c5499.png" /> <text class="font text_10 ml-10">全选</text> </view> <view class="flex-col justify-start items-center text-wrapper_3"><text class="text_11">下单</text></view> </view> </view> </template> <script setup> import { ref } from 'vue' const items = ref([null,null]) </script> <style lang="scss" scoped> .mt-7 { margin-top: 13.13rpx; } .mt-569 { margin-top: 1066.88rpx; } .page { background-color: #f8e8c1; width: 100%; overflow-y: auto; overflow-x: hidden; height: 100%; } .text-wrapper { padding: 25.24rpx 0 25.73rpx; background-color: #f5f5dc; } .font { font-size: 30rpx; font-family: Open Sans; line-height: 27.69rpx; color: #323232; } .text { margin-right: 30.77rpx; line-height: 27.79rpx; } .section { padding-left: 133.29rpx; padding-right: 116.25rpx; background-color: #fffef8; } .group { padding: 21.64rpx 0 18.17rpx; } .text_2 { line-height: 27.6rpx; } .text_3 { margin-right: 10.26rpx; } .section_2 { background-color: #fb8b05; width: 112.5rpx; height: 5.63rpx; } .section_3 { margin: 16.88rpx 16.88rpx 0 15rpx; padding: 24.38rpx 18.75rpx 33.75rpx; background-color: #fffef8; border-radius: 18.75rpx; } .list-item:first-child { margin-top: 0; } .image_2 { width: 37.5rpx; height: 37.5rpx; } .image_3 { margin-top: 108.75rpx; } .image { margin-left: 39.38rpx; width: 121.88rpx; height: 172.5rpx; } .group_2 { margin: 3.07rpx 17.76rpx 7.5rpx 22.5rpx; } .font_2 { font-size: 26.25rpx; font-family: Open Sans; } .text_4 { color: #323233; line-height: 31.88rpx; } .section_4 { margin-right: 4.74rpx; padding: 12.94rpx 9.83rpx 13.09rpx; background-color: #f5f5dc; border-radius: 9.38rpx; } .font_3 { font-size: 22.5rpx; font-family: Open Sans; color: #6b6e72; } .text_5 { line-height: 22.5rpx; } .text_6 { margin-left: 3.51rpx; line-height: 20.55rpx; } .image_4 { margin-right: 5.17rpx; width: 22.5rpx; height: 22.5rpx; } .section_5 { padding: 16.88rpx 18.75rpx 18.75rpx; background-color: #fffef8; } .text_10 { line-height: 27.64rpx; } .text-wrapper_3 { margin-right: 7.5rpx; padding: 22.44rpx 0 23.59rpx; background-color: #ffd45a; border-radius: 75rpx; width: 219.38rpx; height: 76.88rpx; } .text_11 { color: #ffffff; font-size: 33.75rpx; font-family: Open Sans; line-height: 30.84rpx; } @import url(../../../common/css/global.css); </style>