submit

src/pages/ticket-details/index.vue

@@ -106,14 +106,34 @@
         </template>
       </display-box>
     </div>
-    <div class="content8">
+    <div class="content8" @click="returnTicket">
       退票
     </div>
+    <div class="content9" v-if="dialog">
+    <div class="wrap1">
+      <div class="wrap1_1">是否进行退票?</div>
+      <div class="wrap1_2">2人：某某、某某某</div>
+      <div class="wrap1_3">预约日期：2023年12月16日</div>
+      <div class="wrap1_4">
+        <div class="wrap1_4_1" @click="cancel">取消</div>
+        <div class="wrap1_4_2">确定</div>
+      </div>
+      <div class="wrap1_5">*确认后将不再出现在票库</div>
+    </div>
+    </div>
   </div>
 </template>
 <script setup>
+import {ref} from 'vue'
 import displayBox from '../../components/display-box/index.vue'
 import dashedLine from '../../components/dashed-line/index.vue'
+const dialog=ref(false)
+const cancel=()=>{
+  dialog.value=false
+}
+const returnTicket=()=>{
+  dialog.value=true
+}
 </script>
 <style scoped lang="scss">
 .box-left{
@@ -129,6 +149,81 @@ import dashedLine from '../../components/dashed-line/index.vue'
   background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
   background-size: 100%;
   padding: 32rpx 42rpx 0 42rpx;
+  .content9{
+    display: flex;
+    justify-content: center;
+   padding-top: 400rpx;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    .wrap1{
+      width: 510rpx;
+      height: 352rpx;
+      background-color: #fff;
+      border-radius: 20rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .wrap1_5{
+        margin-top: 12rpx;
+        box-sizing: border-box;
+        text-align: right;
+          padding-right: 48rpx;
+        width: 100%;
+      font-size: 16rpx;
+        color:#FF5C62;
+      }
+      .wrap1_4{
+        margin-top: 62rpx;
+        box-sizing: border-box;
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
+        padding-left: 34rpx;
+        padding-right: 34rpx;
+        .wrap1_4_2{
+          border-radius: 30rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #F7963B;
+          color: #fff;
+          width: 210rpx;
+          height: 60rpx;
+        }
+        .wrap1_4_1{
+          border-radius: 30rpx;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #000;
+          color: #fff;
+          width: 210rpx;
+          height: 60rpx;
+        }
+      }
+      .wrap1_3{
+        font-size: 24rpx;
+        color: #B29E92;
+      }
+      .wrap1_2{
+        margin-bottom: 16rpx;
+        font-size: 24rpx;
+        color: #B29E92;
+      }
+      .wrap1_1{
+        margin-top: 48rpx;
+        margin-bottom: 16rpx;
+
+        font-size: 28rpx;
+        color: #FF5C62;
+      }
+    }
+  }
   .content8{
     margin: 0 auto;
     border-radius: 30rpx;