🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
- 其他爆火文章：微信小程序完整笔记
- 其他爆火文章：vue3+element plus实现商品后台管理系统
💙一. 作者想说的话
❤️
本项目是普通基本页面，花费了我一天的时间完成，项目是我独家制作，但是图片素材都是我网上找的，如有侵权，请联系删除。
❤️
💙
我在源代码中也是删减了部分，尽量的不造成侵权行为！因此，图片和真实源代码略有不同，这些都是正常的，我也是怕一些人进行非法拷贝，这个请谅解哈。
💙
🧡
不懂运行的小伙伴一定要私信我，好好研究研究一个项目运行起来了就挺好，没必要一篇一篇找。然后全部都运行不起来。
🧡
💚
本人也是大学生，编码习惯不是特别的规范，用于交流学习讨论，目的在于提高大家的前端编程水平哈。能里强的可以绕道了。
💚
❤️
兄弟们，源码在上面，直接免费下载即可。然后把appid改成你们自己的即可
❤️
目录
🧡二 .首页界面
💜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 不仅是一个强大的前端框架，更是一个充满潜力的生态系统。通过这个项目，我更加自信地掌握了前端开发的核心技能，并对构建大型应用充满了信心。未来，我期待将这些经验应用到更多项目中，不断提升自己的技术水平。
💚
🤹♀️潜意识起点：个人主页
🎙座右铭：得之坦然，失之淡然。
💎擅长领域：大前端
是的，我需要您的：
🧡点赞❤️关注💙收藏💛
是我持续下去的动力！
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
