如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
以下是一个复杂的电商商品详情页实现，包含图片轮播、商品信息展示、规格选择、数量调整、加入购物车、立即购买等多个功能模块，使用 Vue2 实现。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>电商商品详情页 - Vue2实现</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background: #f8f8f8; min-height: 100vh; display: flex; justify-content: center; align-items: center; } #app { max-width: 900px; background: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: hidden; } .carousel { position: relative; width: 100%; height: 300px; overflow: hidden; } .carousel img { width: 100%; height: 100%; object-fit: cover; } .carousel-buttons { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); } .carousel-buttons button { background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 10px; cursor: pointer; } .carousel-buttons button:hover { background: rgba(0, 0, 0, 0.7); } .product-details { padding: 20px; } .product-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .product-price { color: #e53935; font-size: 20px; margin-bottom: 10px; } .product-description { font-size: 14px; color: #666; margin-bottom: 20px; } .product-options { margin-bottom: 20px; } .option-group { margin-bottom: 10px; } .option-group label { display: inline-block; margin-right: 10px; } .option-group span { cursor: pointer; padding: 5px 10px; margin-right: 10px; border: 1px solid #ddd; border-radius: 5px; user-select: none; } .option-group span.active { background: #007bff; color: white; border-color: #007bff; } .quantity-control { display: flex; align-items: center; gap: 10px; } .quantity-control button { width: 30px; height: 30px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .quantity-control input { width: 50px; text-align: center; border: 1px solid #ddd; border-radius: 5px; padding: 5px; } .actions { display: flex; gap: 10px; margin-top: 20px; } .actions button { flex: 1; padding: 10px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; } .actions .cart { background: #007bff; color: white; } .actions .buy { background: #e53935; color: white; } </style> </head> <body> <div id="app"> <div class="carousel"> <img :src="images[currentImage]" alt="商品图片"> <div class="carousel-buttons"> <button @click="prevImage">‹</button> <button @click="nextImage">›</button> </div> </div> <div class="product-details"> <div class="product-title">{{ product.name }}</div> <div class="product-price">¥{{ product.price }}</div> <div class="product-description">{{ product.description }}</div> <div class="product-options"> <div class="option-group"> <label>规格：</label> <span v-for="option in product.specifications" :key="option" :class="{ active: selectedSpecification === option }" @click="selectSpecification(option)"> {{ option }} </span> </div> </div> <div class="quantity-control"> <button @click="decreaseQuantity">-</button> <input type="number" v-model="quantity" min="1"> <button @click="increaseQuantity">+</button> </div> <div class="actions"> <button class="cart" @click="addToCart">加入购物车</button> <button class="buy" @click="buyNow">立即购买</button> </div> </div> </div> <script> new Vue({ el: '#app', data: { images: [ 'https://via.placeholder.com/900x300?text=商品图片1', 'https://via.placeholder.com/900x300?text=商品图片2', 'https://via.placeholder.com/900x300?text=商品图片3' ], currentImage: 0, product: { name: '高端智能手机', price: 4999, description: '这是一款高端智能手机，性能卓越，设计精美，适合追求品质的用户。', specifications: ['64GB', '128GB', '256GB'] }, selectedSpecification: '64GB', quantity: 1 }, methods: { prevImage() { this.currentImage = (this.currentImage + this.images.length - 1) % this.images.length; }, nextImage() { this.currentImage = (this.currentImage + 1) % this.images.length; }, selectSpecification(option) { this.selectedSpecification = option; }, increaseQuantity() { this.quantity++; }, decreaseQuantity() { if (this.quantity > 1) { this.quantity--; } }, addToCart() { alert(`已加入购物车：${this.product.name}（${this.selectedSpecification}） x ${this.quantity}`); }, buyNow() { alert(`立即购买：${this.product.name}（${this.selectedSpecification}） x ${this.quantity}`); } } }); </script> </body> </html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 页面功能： 图片轮播：用户可以左右切换商品图片，动态展示多张商品图片。商品信息展示：展示商品名称、价格和描述。规格选择：用户可以选择不同规格（如存储大小）。数量调整：用户可以通过按钮或输入框修改购买数量。加入购物车：点击按钮将商品加入购物车并提示成功。立即购买：点击按钮立即购买并跳转到下单流程。
