🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
- 其他爆火文章：vue3+element plus实现商品后台管理系统
💙一. 作者想说的话
❤️
本项目是普通基本页面，花费了我一天的时间完成，项目是我独家制作，但是图片素材都是我网上找的，如有侵权，请联系删除。
❤️
💙
我在源代码中也是删减了部分，尽量的不造成侵权行为！因此，图片和真实源代码略有不同，这些都是正常的，我也是怕一些人进行非法拷贝，这个请谅解哈。
💙
🧡
不懂运行的小伙伴一定要私信我，好好研究研究一个项目运行起来了就挺好，没必要一篇一篇找。然后全部都运行不起来。
🧡
💚
本人也是大学生，编码习惯不是特别的规范，用于交流学习讨论，目的在于提高大家的前端编程水平哈。能里强的可以绕道了。
💚
❤️
兄弟们，源码在上面，直接免费下载即可。然后把appid改成你们自己的即可
❤️
目录
💙一. 作者想说的话
🧡二 .首页界面
💜2.1 首页图片
💛2.2 首页html源码
💜2.3 首页css源码
💜三. 卡券套餐界面
💚 3.1 卡券套餐界面图片
💛3.2 卡券html源码
💚3.3 卡券套餐css源码
💚四. 我的订单界面
💜4.1 我的订单图片
💜4.2 我的订单html
💙4.3 我的订单css
💛五. 个人中心界面
❤️5.1 个人中心界面图片
💜5.2 个人中心界面html
💚5.3 个人中心界面的css
💙六. 总结概括
🧡二 .首页界面
💜2.1 首页图片
没有连接任何网络接口，下载改一下appid就可以直接用，源码就可以使用。
- 这里的自助预定是v-for循环的
- 图片等等你们都可以自行替换
💛2.2 首页html源码
大家多看看注释，因为注释有利于你认识主体的结构。
你也可以下载好上面的源码，直接运行。
<template><!-- 上面的导航栏界面 --><view class="swper"><image src="../../static/swiper.jpg"></image></view><!-- 中间的主体部分 --><view class="bigbox"><!-- 这里循环4次，循环出4个小盒子，每个小盒子里放一张图片 --><view class="smallbox" v-for="item in 4"><image src="../../static/one.jpg"></image></view></view><!-- 下部分的图片 --><view class="img"><image src="../../static/swiper1.jpg"></image></view><!-- 版权声明部分 --><view class="text">本系统由csdn潜意识起点制作完成</view>
</template>💜2.3 首页css源码
<style scoped>.swper{width: 750rpx;height: 330rpx;background-color: #f1ab21;display: flex;justify-content: center;align-items: center;}.swper image{width: 720rpx;height: 300rpx;border-radius: 20rpx;}.bigbox{width: 750rpx;height: 380rpx;display:grid;grid-template-columns: 1fr 1fr;gap: 5rpx;}.smallbox{width: 370rpx;height: 180rpx;margin-top: 10rpx;margin-left: 10rpx;}.smallbox image{width: 100%;height: 100%;}.img{width: 730rpx;height:400rpx;background-color: chocolate;}.img image{width: 100%;height: 100%;}.text{font-size: 20px;color: #c7c7c7;width: 750rpx;height: 80rpx;text-align: center;line-height: 80rpx;}
</style>💜三. 卡券套餐界面
💚 3.1 卡券套餐界面图片
💕这里没用到v-for循环，也可用v-for循环。结构会比较好些。其他的也是非常的简单的。大家可以自行修改总结。💕
💛3.2 卡券html源码
❣️源码如图所示，大家自行更改。❣️
<template><view class="bigbox"><!-- 第一个盒子 --><view class="box"><view class="lefttop"><view class="wz1">2小时</view><view class="wz2">可用时长：2小时</view><view class="wz3">可用范围：包间</view><view class="wz4">有效期至：不限制</view></view><view class="righttop"><view class="wz5">28.8元</view><button class="but">购买</button></view><view class="lefbutton"><view class="wz6" v-for="item in 3">该卡券能在一，二，三，四，五，六，日，全天可用</view></view></view><!-- 第二个盒子 --><view class="box"><view class="lefttop"><view class="wz1">4小时</view><view class="wz2">可用时长：4小时</view><view class="wz3">可用范围：包间</view><view class="wz4">有效期至：不限制</view></view><view class="righttop"><view class="wz5">38.8元</view><button class="but">购买</button></view><view class="lefbutton"><view class="wz6" v-for="item in 3">该卡券能在一，二，三，四，五，六，日，全天可用</view></view></view><!-- 版权声明部分 --><view class="text">本系统由csdn潜意识起点制作完成</view> </view>
</template>💚3.3 卡券套餐css源码
<style scoped>.box{width:720rpx;height: 450rpx;border-radius: 15rpx;background-color: #ffffff;margin-top: 20rpx;margin-left: 15rpx;display:grid;grid-template-columns: 1fr 1fr;border: #d6d6d6 solid 1px;}.bigbox{background-color: #f6f6f6;}.righttop{display: flex;justify-content: center;align-items: center;flex-direction: column;}.lefbutton{/* 这里1就是从第一列开始,3就是要占几格+1 */grid-column: 1/3;}.wz1{font-size: 50rpx;padding-top: 30rpx;padding-left:30rpx;}.wz2{font-size: 30rpx;color: #fda314;padding-left:30rpx;padding-top: 20rpx;padding-bottom: 20rpx;}.wz3{font-size: 26rpx;margin-left:30rpx;}.wz4{font-size: 26rpx;margin-left:30rpx;}.wz5{font-size: 40rpx;color: #fda314;padding-bottom: 30rpx;}.wz6{color: gray;font-size: 20rpx;margin-left: 30rpx;}.but{color: aliceblue;background-color: #fda314;border-radius: 60rpx;width: 150rpx;}.text{font-size: 20px;color: #c7c7c7;width: 750rpx;height: 80rpx;text-align: center;line-height: 80rpx;}
</style>
💚四. 我的订单界面
💜4.1 我的订单图片
💜4.2 我的订单html
<template><view class="bigbox"><image src="../../static/tx.jpg"></image><view>您还未登录呦！</view><button class="but">登录</button></view><!-- 版权声明部分 --><view class="text">本系统由csdn潜意识起点制作完成</view>
</template>💙4.3 我的订单css
<style scoped>.bigbox{width: 400rpx;height: 400rpx;margin: 0 auto;margin-top: 150rpx;display: flex;flex-direction:column;justify-content: center;align-items: center;}.bigbox image{width: 150rpx;height: 150rpx;margin-bottom: 30rpx;}.but{color: aliceblue;background-color: #fda314;border-radius: 60rpx;margin-top: 30rpx;}.text{font-size: 20px;color: #c7c7c7;width: 750rpx;height: 80rpx;text-align: center;line-height: 80rpx;}
</style>
💛五. 个人中心界面
❤️5.1 个人中心界面图片
💜5.2 个人中心界面html
<template><view class="top"><image src="../../static/tx.jpg"></image><view>请点击登录</view></view><view class="middle"><view class="middlebox" v-for="item in 2"><view class="wz1">0</view><view class="wz2">我的卡包</view></view></view><button class="but">登录</button>
</template>💚5.3 个人中心界面的css
<style scoped>.top{width: 750rpx;height:200rpx;display:flex;align-items: center;margin-top: 50rpx;}.top image{width: 200rpx;height: 100%;margin-right: 30rpx;}.middle{width: 750rpx;height: 180rpx;display: grid;grid-template-columns: 1fr 1fr;text-align: center;padding-top: 80rpx;}.wz1{font-weight: 800;font-size: 30rpx;}.but{color: aliceblue;background-color: #fda314;border-radius: 60rpx;margin-top: 30rpx;}
</style>
💙六. 总结概括
❤️
Vue 3 作为一个现代化的前端框架，提供了强大的功能和灵活性，适用于从小型项目到大型企业级应用的开发。通过学习和使用 Vue 3，开发者可以构建高效、可维护和可扩展的前端应用。
❤️
💜
本次vue3让我学到的很多的东西，学会了基本的页面搭建。
💜
💙
完成一个 Vue 3 项目是一次深刻的学习经历，它不仅提升了我的前端开发技能，也加深了我对现代 Web 开发实践的理解。Vue 3 的 Composition API 提供了更大的灵活性和组织代码的新方式，使得状态管理和逻辑复用变得更加简洁和高效。
💙
💚
项目中，我充分利用了 Vue 3 的响应式系统和组件化特性，构建了一个既动态又用户友好的界面。通过 TypeScript 的集成，我享受到了类型安全的便利，减少了运行时错误的可能性。同时，Vue Router 和 Pinia 的使用，让我在路由管理和状态管理方面得心应手。
💚
❤️
在性能方面，Vue 3 的优化给了我深刻印象，更快的渲染速度和更小的体积，使得应用加载迅速，用户体验更佳。此外，Vue CLI 和 Vue Devtools 等工具的辅助，极大地提升了开发效率和调试的便捷性。
❤️
💚
总结来说，Vue 3 不仅是一个强大的前端框架，更是一个充满潜力的生态系统。通过这个项目，我更加自信地掌握了前端开发的核心技能，并对构建大型应用充满了信心。未来，我期待将这些经验应用到更多项目中，不断提升自己的技术水平。
💚
🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
