feat：商品详情的样式调整

pages/goods/components/DateSelector/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <view class="date-selector" @click="showCalendar">
+    <view class="date-item">
+      <view class="date-label">入住日期</view>
+      <view class="date-box">
+        <view class="date-content">
+          <text class="date-text">{{ checkInDate }}</text>
+          <text class="day-text">{{ checkInDay }}</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="nights-info">
+      <text class="nights-text">{{ nights }}晚</text>
+    </view>
+
+    <view class="date-item">
+      <view class="date-label">退房日期</view>
+      <view class="date-box">
+        <view class="date-content">
+          <text class="date-text">{{ checkOutDate }}</text>
+          <text class="day-text">{{ checkOutDay }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+// 定义事件
+const emit = defineEmits(["showCalendar"]);
+
+// 定义方法
+const showCalendar = () => {
+  emit("showCalendar");
+};
+
+// Props定义
+const props = defineProps({
+  checkInDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkOutDate: {
+    type: String,
+    default: "08月25日",
+  },
+  checkInDay: {
+    type: String,
+    default: "周一",
+  },
+  checkOutDay: {
+    type: String,
+    default: "周一",
+  },
+  nights: {
+    type: Number,
+    default: 1,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.date-selector {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin: 24rpx 0 12rpx;
+  padding: 12rpx 0;
+}
+
+.date-item {
+  flex: 1;
+  position: relative;
+}
+
+.date-label {
+  position: absolute;
+  top: -12rpx;
+  left: 24rpx;
+  font-size: 20rpx;
+  color: #999999;
+  background: #ffffff;
+  padding: 0 8rpx;
+  z-index: 1;
+}
+
+.date-box {
+  padding: 20rpx 24rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  border: 2rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.date-content {
+  display: flex;
+  align-items: baseline;
+  gap: 8rpx;
+}
+
+.date-text {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333333;
+}
+
+.day-text {
+  font-size: 20rpx;
+  color: #666666;
+}
+
+.nights-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 80rpx;
+  margin: 0 16rpx;
+  margin-bottom: 20rpx;
+}
+
+.nights-text {
+  font-size: 24rpx;
+  color: #666666;
+}
+</style>