好看的前端页面 vue

### Vue 美观前端页面设计示例 #### 搜索页面设计 为了创建一个既美观又实用的搜索页面，可以采用Vue 2框架来构建。此页面不仅提供基础的搜索功能，还集成了实时搜索建议、全网热搜榜、视频榜以及电视剧榜等功能模块[^1]。通过这些特性，用户能够获得更加丰富的互动体验。 对于页面美学方面，设计师们引入了渐变背景和毛玻璃效果等视觉元素，使得整个界面看起来更为现代且吸引人。这类设计方案非常适合初学者用来熟悉Vue组件化开发模式的同时，也适用于实际项目中的借鉴应用。 ```html <template> <div class="search-page"> <!-- 渐变背景 --> <div class="gradient-bg"></div> <!-- 搜索框及相关功能区 --> <section class="search-section"> <input type="text" v-model="query" placeholder="请输入关键词..." @keyup.enter="performSearch"/> <ul v-if="suggestions.length > 0 && query !== ''"> <li v-for="(item, index) in suggestions.slice(0,5)" :key="index">{{ item }}</li> </ul> <!-- 各类榜单展示区域 --> <div class="hot-lists"> <h3>热门搜索</h3> <ol> <li v-for="(hotItem, idx) in hotItems" :key="idx">{{ hotItem.name }}</li> </ol> <h3>视频排行榜</h3> <ol> <li v-for="(video, vidIdx) in videoRanking" :key="vidIdx">{{ video.title }}</li> </ol> <h3>电视剧排行榜</h3> <ol> <li v-for="(tvShow, tvIdx) in tvShows" :key="tvIdx">{{ tvShow.title }}</li> </ol> </div> </section> <!-- 底部版权信息或其他固定内容 --> <footer></footer> </div> </template> <script> export default { data() { return { query: '', suggestions: [], hotItems: [ {name:'今日热点'}, ... ], videoRanking:[ {title:"最热影片"}, ... ], tvShows:[ {title:"热播剧集"}, ... ] }; }, methods:{ performSearch(){ console.log('执行搜索:', this.query); } } }; </script> <style scoped> /* 添加CSS代码实现上述提到的效果 */ .gradient-bg{ background-image: linear-gradient(to bottom right,#ff7e5f ,#feb47b ); position:absolute; top:0;left:0;right:0;bottom:0;z-index:-1; } .search-section ul li:hover,.hot-lists ol li:hover{opacity:.8;} .hot-lists h3{text-align:center;margin-bottom:.5em;font-size:larger;color:#fff;} .mg-blur-effect{/*此处定义毛玻璃样式*/filter:blur(2px);} </style> ``` #### 账单页面布局与样式 另一个值得一看的例子是基于Vue 2所制作的新手友好型账单管理页面。这里实现了诸如账单详情列表呈现、标签页之间的平滑转换以及依据不同类型的数据项而变化的内容显示逻辑等功能[^2]。这样的案例有助于加深理解Vue的核心概念如数据绑定、条件渲染及动态样式的运用技巧。 ```html <template> <div id="bill-app"> <header> <nav> <ul> <li><a href="#" @click.prevent="currentTab='income'">收入</a></li> <li><a href="#" @click.prevent="currentTab='expense'">支出</a></li> </ul> </nav> </header> <main> <section v-show="currentTab==='income'" class="tab-content income"> <h2>本月收入明细</h2> <table> <tr v-for="entry in incomes" :key="entry.id"> <td>{{ entry.date }}</td> <td>{{ entry.amount | currency}}</td> <td>{{ entry.description }}</td> </tr> </table> </section> <section v-show="currentTab==='expense'" class="tab-content expense"> <h2>本月支出记录</h2> <!-- 类似于上面表格结构 --> </section> </main> <footer>&copy; Copyright Info Here</footer> </div> </template> <script> import moment from 'moment'; // ...其他必要的导入语句... new Vue({ el:'#bill-app', data:{ incomes:[ /* 收入条目数组 */], expenses:[ /* 支出条目数组 */], currentTab:'income' }, filters:{currency(value){return `¥${value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g,',')}`}}, mounted(){this.fetchData();}, // 初始化加载数据的方法... }); </script> <style lang="scss"> @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); body,h1,p,a{font-family:'Roboto',sans-serif;line-height:1.6;text-align:left;} .tab-content table{width:100%;border-collapse:collapse;border-spacing:0;} th, td {padding:.5rem .75rem;border:solid 1px #ddd;} .income tr:nth-child(even),.expense tr:nth-child(odd){ background-color:#f9f9f9; transition:all ease-in-out .3s; &:hover{transform:scaleY(.98);box-shadow:0 0 10px rgba(0,0,0,.1)} } </style> ```