毕业的时候无聊写了一个报价系统，只用了前端，后端和数据库没写资源-CSDN文库

共1个文件

html：1个

需积分: 1 142 浏览量 2024-12-26 17:54:58 上传评论收藏 4KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

报价系统.zip （1个子文件）

报价系统

index.html 10KB

images

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>服务器配件报价系统</title>  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script> <style> body { font-family: 'Helvetica Neue', sans-serif; margin: 0; padding: 0; background-color: #cba7a7; animation: breathe 5s ease-in-out infinite; } @keyframes breathe { 0% { background-color: #9fb0fa; } 50% { background-color: #b6f7b9; } 100% { background-color: #9fb0fa; } } .navbar-brand { font-size: 1.5rem; font-weight: bold; } /* 添加新的类用于设置配件卡片间距 */ .part-card-spacing { margin-bottom: 20px; } /* 过渡动画样式 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease-in-out; } .fade-enter-from, .fade-leave-to { opacity: 0; } /* 已选配件容器样式 */ .selected-parts-container { display: flex; flex-wrap: wrap; justify-content: flex-start; } /* 美化按钮样式 */ .btn { border-radius: 5px; padding: 10px 20px; font-size: 1rem; cursor: pointer; } .btn-primary { background-color: #007bff; color: #fff; border: none; } .btn-primary:hover { background-color: #0069d9; } .btn-danger { background-color: #dc3545; color: #fff; border: none; } .btn-danger:hover { background-color: #c82333; } .btn-success { background-color: #6b6b6b; color: #fff; border: none; } .btn-success:hover { background-color: #218838; } /* 美化输入框样式 */ input[type="number"] { border: 1px solid #e7e7e7; border-radius: 5px; padding: 5px; font-size: 1rem; } /* 美化卡片样式 */ .card { border: none; border-radius: 5px; box-shadow: 0 0 10px rgba(243, 243, 243, 0.1); } .card-body { padding: 20px; } .card-title { font-size: 1.2rem; font-weight: bold; } .card-text { font-size: 1rem; } /*卡片内容价格颜色*/ .price { font-size: 1.2rem; font-weight: bold; color: #ff0000; } /* 为已选配件的卡片添加间距 */ .selected-part-card { margin: 10px; /* 上下左右各10px的间距 */ } </style> </head> <body> <div id="app"> <nav class="navbar navbar-expand-lg navbar-light"> <div class="container"> <a class="navbar-brand" href="#">服务器配件报价系统</a> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 品牌筛选 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#" @click="filterByBrand('Intel')">英特尔</a></li> <li><a class="dropdown-item" href="#" @click="filterByBrand('AMD')">AMD</a></li> <li><a class="dropdown-item" href="#" @click="filterByBrand('NVIDIA')">英伟达</a></li> <li><a class="dropdown-item" href="#" @click="filterByBrand('Dell')">戴尔</a></li> <li><a class="dropdown-item" href="#" @click="filterByBrand('HP')">惠普</a></li> </ul> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 类型筛选 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#" @click="filterByType('processor')">处理器</a></li> <li><a class="dropdown-item" href="#" @click="filterByType('memory')">内存</a></li> <li><a class="dropdown-item" href="#" @click="filterByType('cooler')">散热器</a></li> <li><a class="dropdown-item" href="#" @click="filterByType('network_card')">网卡</a></li> <li><a class="dropdown-item" href="#" @click="filterByType('storage')">存储设备</a></li> <li><a class="dropdown-item" href="#" @click="filterByType('power_supply')">电源供应器</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container mt-4"> <h2>热门配件推荐</h2> <div class="row"> <div class="col-md-4" v-for="part in filteredParts" :key="part.id"> <div class="card part-card-spacing"> <div class="card-body"> <h5 class="card-title">{{part.name}}</h5> <p class="card-text">{{part.description}}</p> <p class="price">{{part.price}}</p> <input type="number" v-model="part.quantity" min="1" placeholder="数量"> <button class="btn btn-primary" @click="addPartToSelection(part)">添加</button> </div> </div> </div> </div> </div> <div class="container mt-4"> <h2>已选配件</h2> <div class="selected-parts-container"> <transition-group name="fade"> <div class="col-md-4" v-for="selectedPart in selectedParts" :key="selectedPart.id"> <div class="card selected-part-card added-card-spacing"> <div class="card-body"> <h5 class="card-title">{{selectedPart.name}}</h5> <p class="card-text">{{selectedPart.description}}</p> <p class="price">{{selectedPart.price}}</p> <p>数量：{{selectedPart.quantity}}</p> <button class="btn btn-danger" @click="removePartFromSelection(selectedPart.id)">删除</button> </div> </div> </div> </transition-group> </div> <div class="row"> <div class="col-md-6"> <button class="btn btn-success" @click="exportToExcel">导出到 Excel</button> </div> </div> </div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> const app = Vue.createApp document.addEventListener('DOMContentLoaded', () => { const parts = [ { id: 1, name: '英特尔至强处理器', brand: 'Intel', type: 'processor', description: '高性能处理器描述', price: 1000, quantity: 1 }, { id: 2, name: 'AMD 锐龙处理器', brand: 'AMD', type: 'processor', description: '另一种处理器描述', price: 800, quantity: 1 }, { id: 3, name: '酷冷至尊散热器', brand: 'Cooler Master', type: 'cooler', description: '散热效果好', price: 500, quantity: 1 }, { id: 4, name: 'R9-5900hx', brand: 'Intel', type: 'network_card', description: '服务器CPU', price: 870, quantity: 1 }, { id: 5, name: '英特尔网卡', brand: 'Intel', type: 'network_card', description: '高速网络连接', price: 480, quantity: 1 }, { id: 6, name: '英特尔网卡', brand: 'Intel', type: 'network_card', description: '高速网络连接', price: 440, quantity: 1 }, { id:

评论收藏

内容反馈