Vue.js+HTML+CSS 完整支付成功页面教程：从0到100%还原支付确认页面！」 「一步步打造支付成功页面：适合新手的 Vue.js 互动支付页面教程！」 「前端项目实战：使用 Vue.js

编程语言 2024-11-04 19:07:52 阅读次数: 0

效果图

在这里插入图片描述

博客大纲

## 目录
1. [前言](#前言)
2. [项目概述](#项目概述)
3. [项目准备](#项目准备)
4. [代码实现](#代码实现)
   - 4.1 [HTML 结构](#html-结构)
   - 4.2 [CSS 样式](#css-样式)
   - 4.3 [Vue.js 数据绑定](#vuejs-数据绑定)
5. [功能解释](#功能解释)
6. [总结](#总结)

正文内容

前言

在本教程中，我们将使用 HTML、CSS 和 Vue.js 来创建一个支付成功页面。这个页面包含支付成功的确认图标、付款成功的消息以及预定信息展示。这个教程适合 Vue.js 新手以及希望学习组件化页面构建的前端开发者。

项目概述

本项目将构建一个模拟支付成功的页面，页面内容包括：

  • 支付成功图标和成功提示消息
  • 用户的预定信息卡片展示

项目准备

在开始之前，请确保您的开发环境中已经包含了以下内容：

  • 一个简单的 HTML 编辑器（例如 VS Code）
  • 引入了 Vue.js 2 的 CDN 资源（无需安装）

代码实现

4.1 HTML 结构

在 HTML 中，我们将页面划分为三大部分：

  • 页面头部：显示“预定信息”标题
  • 成功图标：显示支付成功的图标和提示文字
  • 信息卡片：展示用户的预定详情
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付成功 - Vue 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    /* 样式代码将放在这里 */
  </style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">预定信息</div>

  <!-- Success Icon -->
  <div class="success-icon">
    <img src="https://cdn-icons-png.flaticon.com/512/190/190411.png" alt="支付成功">
  </div>
  <div class="success-message">付款成功！</div>

  <!-- Venue Card -->
  <div class="info-card">
    <div class="info-section">
      <span class="info-title">预定人</span>
      <span class="info-detail">{
   
   { reservationInfo.name }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">手机号码</span>
      <span class="info-detail">{
   
   { reservationInfo.phone }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">预定时间</span>
      <span class="info-detail">{
   
   { reservationInfo.date }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">总计时段</span>
      <span class="info-detail">{
   
   { reservationInfo.duration }}</span>
    </div>
  </div>
</div>
</body>
</html>
4.2 CSS 样式

以下是该页面的 CSS 样式，确保页面的设计美观。样式主要使用了渐变背景、边框圆角以及一些对齐属性，使页面看起来更具吸引力。

body {
    
    
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
  margin: 0;
  padding: 0;
}
#app {
    
    
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  position: relative;
  text-align: center;
}
.header {
    
    
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.success-icon {
    
    
  width: 100px;
  height: 100px;
  background-color: #ffecb3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  position: relative;
}
.success-icon img {
    
    
  width: 60%;
  height: 60%;
}
.success-message {
    
    
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}
.info-card {
    
    
  background: linear-gradient(120deg, #66ccff, #0099cc);
  color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: left;
}
.info-section {
    
    
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.info-section:last-child {
    
    
  border-bottom: none;
}
.info-title {
    
    
  font-size: 14px;
  color: #fff;
}
.info-detail {
    
    
  font-size: 14px;
  color: #fff;
}
4.3 Vue.js 数据绑定

在 Vue 实例中，我们设置了 reservationInfo 数据对象，用于展示页面中的预定信息。数据对象中的值会通过双向绑定的方式展示在页面上。

<script>
  new Vue({
    
    
    el: '#app',
    data: {
    
    
      reservationInfo: {
    
    
        name: "张三",
        phone: "13912341234",
        date: "07/21 星期日 15:00-17:00",
        duration: "120分钟"
      }
    }
  });
</script>

功能解释

  1. 页面结构：

    • 头部：显示了页面标题。
    • 成功图标：图标区域居中对齐，并使用了黄色背景和勾选图标，表示支付成功。
    • 信息卡片：展示了用户的详细预定信息，卡片使用渐变背景和圆角设计。

  2. 样式设计：

    • 使用了渐变背景色使页面更具吸引力。
    • 圆角和阴影使得页面看起来更有层次感。

  3. 数据绑定：

    • 使用 Vue.js 的 data 选项绑定预定信息，确保数据可以动态更新。

总结

通过本教程，你学习到了如何使用 HTML、CSS 和 Vue.js 来创建一个支付成功页面，了解了页面结构的布局、样式的设计和数据的动态绑定。这种设计适合在实际的支付确认场景中应用。希望本教程能帮助你更好地掌握 Vue.js 在实际项目中的应用。

这个教程将为你提供从基础到实现的完整指导，非常适合新手学习 Vue.js 开发。希望对你有帮助！

完整代码


<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>支付成功 - Vue 示例</title>
  <script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
  <style>
    body {
      
      
      font-family: Arial, sans-serif;
      background-color: #f7f8fa;
      margin: 0;
      padding: 0;
    }
    #app {
      
      
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      font-size: 14px;
      position: relative;
      text-align: center;
    }
    .header {
      
      
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .success-icon {
      
      
      width: 100px;
      height: 100px;
      background-color: #ffecb3;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      position: relative;
    }
    .success-icon img {
      
      
      width: 60%;
      height: 60%;
    }
    .success-message {
      
      
      font-size: 18px;
      color: #333;
      margin-bottom: 20px;
    }
    .info-card {
      
      
      background: linear-gradient(120deg, #66ccff, #0099cc);
      color: #fff;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      text-align: left;
    }
    .info-section {
      
      
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .info-section:last-child {
      
      
      border-bottom: none;
    }
    .info-title {
      
      
      font-size: 14px;
      color: #fff;
    }
    .info-detail {
      
      
      font-size: 14px;
      color: #fff;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- Header -->
  <div class="header">预定信息</div>

  <!-- Success Icon -->
  <div class="success-icon">
    <img src="https://cdn-icons-png.flaticon.com/512/190/190411.png" alt="支付成功">
  </div>
  <div class="success-message">付款成功！</div>

  <!-- Venue Card -->
  <div class="info-card">
    <div class="info-section">
      <span class="info-title">预定人</span>
      <span class="info-detail">{
   
   { reservationInfo.name }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">手机号码</span>
      <span class="info-detail">{
   
   { reservationInfo.phone }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">预定时间</span>
      <span class="info-detail">{
   
   { reservationInfo.date }}</span>
    </div>
    <div class="info-section">
      <span class="info-title">总计时段</span>
      <span class="info-detail">{
   
   { reservationInfo.duration }}</span>
    </div>
  </div>
</div>

<script>
  new Vue({
      
      
    el: '#app',
    data: {
      
      
      reservationInfo: {
      
      
        name: "张三",
        phone: "13912341234",
        date: "07/21 星期日 15:00-17:00",
        duration: "120分钟"
      }
    }
  });
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/143496554
今日推荐
周排行
Sping整合ActiveMQ（五.常见错误分析）
jquery ajax发送请求实例模板
北风设计模式课程---24、迭代模式
[Luogu] 兽径管理
1030 Travel Plan （30 分）(dijkstra算法+dfs+边权)
springboot-shiro中的问题
数据访问安全代理 CASB
RocketMQ与Kafka对比
Rider 2019.3.3 发布，跨平台 .NET IDE
Ubuntu切换root su -
每日归档
更多
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022