Initial commit

pages/truckRent/modal.vue

@@ -0,0 +1,112 @@
+<template>
+  <view class="custom-modal" v-if="show">
+    <view class="modal-overlay" @click="closeModal"></view>
+    <view class="modal-container">
+      <view class="modal-header">提示</view>
+      <view class="modal-content">请确认退还车辆有无无忧包?</view>
+      <view class="modal-footer">
+        <button class="btn cancel" @click="handleCancel">无</button>
+        <button class="btn confirm" @click="handleConfirm">有</button>
+      </view>
+    </view>
+  </view>
+</template>
+    
+    <script>
+export default {
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.show = true;
+    },
+    closeModal() {
+      this.show = false;
+    },
+    handleCancel() {
+      console.log("点击了无");
+      this.$emit("submit", false);
+      this.closeModal();
+    },
+    handleConfirm() {
+      console.log("点击了有");
+      this.$emit("submit", true);
+      this.closeModal();
+    },
+  },
+};
+</script>
+    
+    <style>
+.custom-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+}
+
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.modal-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+  font-size: 32rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 20rpx;
+}
+
+.modal-content {
+  font-size: 28rpx;
+  text-align: center;
+  margin-bottom: 30rpx;
+  color: #666;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn {
+  flex: 1;
+  margin: 0 40rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  text-align: center;
+}
+
+.cancel {
+  background-color: #f0f0f0;
+  color: #333;
+}
+
+.confirm {
+  background-color: #007aff;
+  color: #fff;
+}
+</style>