feat:订单详情页面组件封装

pages/order/components/NoticeInfo/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <view class="notice-info mb12">
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_clock.png"></image>
+        取景点
+      </view>
+      <view class="notice-content">文本内容文本内容文本内容文本内容</view>
+    </view>
+
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_card.png"></image>
+        使用处
+      </view>
+      <view class="notice-content">
+        <text class="notice-item">· 文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容文本内容文本内容</text>
+        <text class="notice-item">· 文本内容文本内容文本内容</text>
+      </view>
+    </view>
+
+    <view class="notice-section">
+      <view class="notice-title">
+        <image class="notice-icon" src="./images/icon_arrow.png"></image>
+        退改说明
+      </view>
+      <view class="notice-content">符合条件可退款</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+// No dynamic data required for this static example
+</script>
+
+<style scoped lang="scss">
+@import './styles/index.scss';
+</style>

pages/order/components/NoticeInfo/prompt.md

@@ -0,0 +1,14 @@
+## 游玩须知组件
+
+组件名称：游玩须知组件
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片，高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.notice-info
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/order/components/NoticeInfo/styles/index.scss

@@ -0,0 +1,39 @@
+.notice-info {
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 16px 18px;
+}
+
+.notice-section {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.notice-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.notice-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 10px;
+}
+
+.notice-content {
+  font-size: 12px;
+  color: #666;
+  padding-left: 28px;
+}
+
+.notice-item {
+  display: block;
+  margin-bottom: 5px;
+}