admin-2025-02-19 09:48:21

dist/assets/CartView-DEWuC-_Z.js → dist/assets/CartView-DeFt_k4g.js

@@ -1 +1 @@
-import{_ as u,r as d,c as a,a as n,F as _,b as p,o,t as c}from"./index-Ct7rszg4.js";const m={class:"container cart"},v=["onClick"],f={__name:"CartView",setup(k){const s=d([]),l=r=>{const t=s.value.findIndex(e=>e.id===r.id);t!==-1&&s.value.splice(t,1)},i=()=>{};return(r,t)=>(o(),a("div",m,[t[0]||(t[0]=n("h1",null,"购物车",-1)),(o(!0),a(_,null,p(s.value,e=>(o(),a("div",{key:e.id,class:"cart-item"},[n("h2",null,c(e.name),1),n("p",null,"价格: "+c(e.price),1),n("button",{onClick:C=>l(e)},"移除",8,v)]))),128)),n("button",{onClick:i},"结算")]))}},b=u(f,[["__scopeId","data-v-5355b60e"]]);export{b as default};
+import{_ as u,r as d,c as a,a as n,F as _,b as p,o,t as c}from"./index-Drh2F730.js";const m={class:"container cart"},v=["onClick"],f={__name:"CartView",setup(k){const s=d([]),l=r=>{const t=s.value.findIndex(e=>e.id===r.id);t!==-1&&s.value.splice(t,1)},i=()=>{};return(r,t)=>(o(),a("div",m,[t[0]||(t[0]=n("h1",null,"购物车",-1)),(o(!0),a(_,null,p(s.value,e=>(o(),a("div",{key:e.id,class:"cart-item"},[n("h2",null,c(e.name),1),n("p",null,"价格: "+c(e.price),1),n("button",{onClick:C=>l(e)},"移除",8,v)]))),128)),n("button",{onClick:i},"结算")]))}},b=u(f,[["__scopeId","data-v-5355b60e"]]);export{b as default};

dist/assets/OrderView-DyZOnkq7.js → dist/assets/OrderView-mgVZOSfS.js

@@ -1 +1 @@
-import{_ as o,r as i,c as s,a as e,F as c,b as d,o as a,t as r}from"./index-Ct7rszg4.js";const u={class:"container order"},_={__name:"OrderView",setup(p){const n=i([{id:1,totalPrice:"500元",status:"已支付"},{id:2,totalPrice:"300元",status:"待支付"}]);return(m,l)=>(a(),s("div",u,[l[0]||(l[0]=e("h1",null,"订单",-1)),(a(!0),s(c,null,d(n.value,t=>(a(),s("div",{key:t.id,class:"order-item"},[e("h2",null,"订单编号: "+r(t.id),1),e("p",null,"总金额: "+r(t.totalPrice),1),e("p",null,"状态: "+r(t.status),1)]))),128))]))}},v=o(_,[["__scopeId","data-v-5a9adf85"]]);export{v as default};
+import{_ as o,r as i,c as s,a as e,F as c,b as d,o as a,t as r}from"./index-Drh2F730.js";const u={class:"container order"},_={__name:"OrderView",setup(p){const n=i([{id:1,totalPrice:"500元",status:"已支付"},{id:2,totalPrice:"300元",status:"待支付"}]);return(m,l)=>(a(),s("div",u,[l[0]||(l[0]=e("h1",null,"订单",-1)),(a(!0),s(c,null,d(n.value,t=>(a(),s("div",{key:t.id,class:"order-item"},[e("h2",null,"订单编号: "+r(t.id),1),e("p",null,"总金额: "+r(t.totalPrice),1),e("p",null,"状态: "+r(t.status),1)]))),128))]))}},v=o(_,[["__scopeId","data-v-5a9adf85"]]);export{v as default};

dist/assets/ProductDetailView-D3AXZIHl.js → dist/assets/ProductDetailView-Bb8bMAWW.js

@@ -1 +1 @@
-import{_ as u,r as c,d as l,u as d,c as i,a as o,t as s,o as p}from"./index-Ct7rszg4.js";const _={class:"container product-detail"},m={__name:"ProductDetailView",setup(v){const n=d(),e=c({});l(()=>{const t=n.params.id;e.value={id:t,name:`商品${t}`,description:`这是商品${t}的描述`,price:`${parseInt(t)*100}元`}});const r=t=>{};return(t,a)=>(p(),i("div",_,[a[1]||(a[1]=o("h1",null,"商品详情",-1)),o("h2",null,s(e.value.name),1),o("p",null,s(e.value.description),1),o("p",null,"价格: "+s(e.value.price),1),o("button",{onClick:a[0]||(a[0]=f=>r(e.value))},"加入购物车")]))}},k=u(m,[["__scopeId","data-v-33fcf37a"]]);export{k as default};
+import{_ as u,r as c,d as l,u as d,c as i,a as o,t as s,o as p}from"./index-Drh2F730.js";const _={class:"container product-detail"},m={__name:"ProductDetailView",setup(v){const n=d(),e=c({});l(()=>{const t=n.params.id;e.value={id:t,name:`商品${t}`,description:`这是商品${t}的描述`,price:`${parseInt(t)*100}元`}});const r=t=>{};return(t,a)=>(p(),i("div",_,[a[1]||(a[1]=o("h1",null,"商品详情",-1)),o("h2",null,s(e.value.name),1),o("p",null,s(e.value.description),1),o("p",null,"价格: "+s(e.value.price),1),o("button",{onClick:a[0]||(a[0]=f=>r(e.value))},"加入购物车")]))}},k=u(m,[["__scopeId","data-v-33fcf37a"]]);export{k as default};

dist/assets/ProductListView-dOlZy1ZW.js → dist/assets/ProductListView-BdLlQcwm.js

@@ -1 +1 @@
-import{_ as d,r as l,c as s,a as e,F as p,b as u,o as n,t as i}from"./index-Ct7rszg4.js";const _={class:"container product-list"},m=["onClick"],f={__name:"ProductListView",setup(k){const o=l([{id:1,name:"商品1",description:"这是商品1的描述",price:"100元"},{id:2,name:"商品2",description:"这是商品2的描述",price:"200元"},{id:3,name:"商品3",description:"这是商品3的描述",price:"300元"}]),a=c=>{};return(c,r)=>(n(),s("div",_,[r[0]||(r[0]=e("h1",null,"商品列表",-1)),(n(!0),s(p,null,u(o.value,t=>(n(),s("div",{key:t.id,class:"product-item"},[e("h2",null,i(t.name),1),e("p",null,i(t.description),1),e("p",null,"价格: "+i(t.price),1),e("button",{onClick:v=>a()},"加入购物车",8,m)]))),128))]))}},h=d(f,[["__scopeId","data-v-38a2b793"]]);export{h as default};
+import{_ as d,r as l,c as s,a as e,F as p,b as u,o as n,t as i}from"./index-Drh2F730.js";const _={class:"container product-list"},m=["onClick"],f={__name:"ProductListView",setup(k){const o=l([{id:1,name:"商品1",description:"这是商品1的描述",price:"100元"},{id:2,name:"商品2",description:"这是商品2的描述",price:"200元"},{id:3,name:"商品3",description:"这是商品3的描述",price:"300元"}]),a=c=>{};return(c,r)=>(n(),s("div",_,[r[0]||(r[0]=e("h1",null,"商品列表",-1)),(n(!0),s(p,null,u(o.value,t=>(n(),s("div",{key:t.id,class:"product-item"},[e("h2",null,i(t.name),1),e("p",null,i(t.description),1),e("p",null,"价格: "+i(t.price),1),e("button",{onClick:v=>a()},"加入购物车",8,m)]))),128))]))}},h=d(f,[["__scopeId","data-v-38a2b793"]]);export{h as default};

dist/assets/UserProfileView-BcCxsX8b.js → dist/assets/UserProfileView-DLwgGoyK.js

@@ -1 +1 @@
-import{_ as l,r as t,c as r,a as e,t as o,o as i}from"./index-Ct7rszg4.js";const c={class:"container user-profile"},p={__name:"UserProfileView",setup(u){const a=t({name:"张三",email:"zhangsan@example.com",phone:"13800138000"}),n=()=>{};return(_,s)=>(i(),r("div",c,[s[0]||(s[0]=e("h1",null,"个人中心",-1)),e("h2",null,"用户名: "+o(a.value.name),1),e("p",null,"邮箱: "+o(a.value.email),1),e("p",null,"手机号: "+o(a.value.phone),1),e("button",{onClick:n},"编辑资料")]))}},f=l(p,[["__scopeId","data-v-8107594b"]]);export{f as default};
+import{_ as l,r as t,c as r,a as e,t as o,o as i}from"./index-Drh2F730.js";const c={class:"container user-profile"},p={__name:"UserProfileView",setup(u){const a=t({name:"张三",email:"zhangsan@example.com",phone:"13800138000"}),n=()=>{};return(_,s)=>(i(),r("div",c,[s[0]||(s[0]=e("h1",null,"个人中心",-1)),e("h2",null,"用户名: "+o(a.value.name),1),e("p",null,"邮箱: "+o(a.value.email),1),e("p",null,"手机号: "+o(a.value.phone),1),e("button",{onClick:n},"编辑资料")]))}},f=l(p,[["__scopeId","data-v-8107594b"]]);export{f as default};

dist/assets/index-D2KCecHr.css

@@ -1 +0,0 @@
-body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.container{max-width:768px;margin:0 auto;padding:20px}h1,h2,h3{color:#333}button{background-color:#ff5a5f;border:none;color:#fff;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:10px 2px;cursor:pointer;border-radius:5px}button:hover{background-color:#e74c3c}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.home[data-v-8f8c0e33]{display:flex;flex-direction:column;min-height:100vh}header nav ul[data-v-8f8c0e33]{list-style-type:none;padding:0;display:flex;justify-content:space-around;background-color:#f8f8f8}header nav ul li a[data-v-8f8c0e33]{text-decoration:none;color:#333;padding:10px 20px;display:block}header nav ul li a[data-v-8f8c0e33]:hover{background-color:#ddd}main[data-v-8f8c0e33]{flex:1;padding:20px}.carousel[data-v-8f8c0e33],.featured-products[data-v-8f8c0e33],.categories[data-v-8f8c0e33]{margin-bottom:20px}.carousel-images[data-v-8f8c0e33]{display:flex;overflow-x:scroll;white-space:nowrap}.carousel-images img[data-v-8f8c0e33]{width:300px;height:auto;margin-right:10px}.product-list[data-v-8f8c0e33]{display:flex;flex-wrap:wrap;gap:10px}.product-item[data-v-8f8c0e33]{border:1px solid #ddd;padding:10px;width:200px;box-shadow:0 2px 4px #0000001a}.product-item img[data-v-8f8c0e33]{width:100%;height:auto}.product-item p[data-v-8f8c0e33]{margin-top:5px}footer[data-v-8f8c0e33]{text-align:center;padding:10px;background-color:#f8f8f8}

dist/assets/index-Ms-zvJba.css

@@ -0,0 +1 @@
+body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.container{max-width:768px;margin:0 auto;padding:20px}h1,h2,h3{color:#333}button{background-color:#ff5a5f;border:none;color:#fff;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:10px 2px;cursor:pointer;border-radius:5px}button:hover{background-color:#e74c3c}nav ul[data-v-fa7cd531]{list-style-type:none;padding:0;display:flex;justify-content:space-around;background-color:#f8f8f8}nav ul li a[data-v-fa7cd531]{text-decoration:none;color:#333;padding:10px 20px;display:block}nav ul li a[data-v-fa7cd531]:hover{background-color:#ddd}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}.carousel-images[data-v-ed77547b]{display:flex;overflow:hidden;transition:transform .5s ease-in-out;width:100%;height:400px;position:relative}.carousel-images img[data-v-ed77547b]{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;right:0;bottom:0}

dist/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Prototype Design</title>
-    <script type="module" crossorigin src="/ide/proxy/6001/assets/index-Ct7rszg4.js"></script>
-    <link rel="stylesheet" crossorigin href="/ide/proxy/6001/assets/index-D2KCecHr.css">
+    <script type="module" crossorigin src="/ide/proxy/6006/assets/index-Drh2F730.js"></script>
+    <link rel="stylesheet" crossorigin href="/ide/proxy/6006/assets/index-Ms-zvJba.css">
   </head>
   <body>
     <div id="app"></div>

src/App.vue

@@ -1,7 +1,11 @@
 <template>
+  <Navbar />
   <router-view/>
 </template>
 
+<script setup>
+import Navbar from './components/Navbar.vue';
+</script>
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -11,16 +15,5 @@
   color: #2c3e50;
 }
 
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
+/* 移除原有的 nav 样式，因为 Navbar 组件已经包含了样式 */
 </style>

src/components/Navbar.vue

@@ -0,0 +1,38 @@
+<template>
+  <header>
+    <nav>
+      <ul>
+        <li><router-link to="/">首页</router-link></li>
+        <li><router-link to="/products">全部商品</router-link></li>
+        <li><router-link to="/cart">购物车</router-link></li>
+        <li><router-link to="/orders">我的订单</router-link></li>
+        <li><router-link to="/profile">个人中心</router-link></li>
+      </ul>
+    </nav>
+  </header>
+</template>
+
+<script setup>
+// 这里可以添加任何需要的逻辑
+</script>
+
+<style scoped>
+nav ul {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  justify-content: space-around;
+  background-color: #f8f8f8;
+}
+
+nav ul li a {
+  text-decoration: none;
+  color: #333;
+  padding: 10px 20px;
+  display: block;
+}
+
+nav ul li a:hover {
+  background-color: #ddd;
+}
+</style>

src/views/HomeView.vue

@@ -1,25 +1,14 @@
 <template>
   <div class="container home">
-    <header>
-      <nav>
-        <ul>
-          <li><router-link to="/">首页</router-link></li>
-          <li><router-link to="/products">全部商品</router-link></li>
-          <li><router-link to="/cart">购物车</router-link></li>
-          <li><router-link to="/orders">我的订单</router-link></li>
-          <li><router-link to="/profile">个人中心</router-link></li>
-        </ul>
-      </nav>
-    </header>
     <main>
-      <section class="carousel">
-        <h2>热门商品轮播</h2>
-        <div class="carousel-images">
-          <img src="@/assets/img/project_view.png" alt="Product 1" />
-          <img src="@/assets/img/prompt_view.png" alt="Product 2" />
-          <img src="@/assets/img/upload_view.png" alt="Product 3" />
-        </div>
-      </section>
+<section class="carousel">
+  <h2>热门商品轮播</h2>
+<div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
+  <div v-for="(image, index) in images" :key="index" :style="{ width: '100%', height: '100%' }">
+    <img :src="image.src" :alt="image.alt" style="width: 100%; height: 100%;" />
+  </div>
+</div>
+</section>
       <section class="featured-products">
         <h2>推荐商品</h2>
         <div class="product-list">
@@ -52,87 +41,50 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const addToCart = (product) => {
-  // 在这里实现添加到购物车的逻辑
-}
-</script>
+import { ref, onMounted } from 'vue'
 
-<style scoped>
-.home {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
+import projectView from '../assets/img/project_view.png';
+import promptView from '../assets/img/prompt_view.png';
+import uploadView from '../assets/img/upload_view.png';
 
-header nav ul {
-  list-style-type: none;
-  padding: 0;
-  display: flex;
-  justify-content: space-around;
-  background-color: #f8f8f8;
-}
+const images = [
+  { src: projectView, alt: 'Product 1' },
+  { src: promptView, alt: 'Product 2' },
+  { src: uploadView, alt: 'Product 3' }
+]
 
-header nav ul li a {
-  text-decoration: none;
-  color: #333;
-  padding: 10px 20px;
-  display: block;
-}
+const currentIndex = ref(0)
 
-header nav ul li a:hover {
-  background-color: #ddd;
+const nextImage = () => {
+  currentIndex.value = (currentIndex.value + 1) % images.length
 }
 
-main {
-  flex: 1;
-  padding: 20px;
-}
+onMounted(() => {
+  setInterval(nextImage, 500)
+})
 
-.carousel,
-.featured-products,
-.categories {
-  margin-bottom: 20px;
+const addToCart = (product) => {
+  // 在这里实现添加到购物车的逻辑
 }
-
+</script>
+<style scoped>
 .carousel-images {
   display: flex;
-  overflow-x: scroll;
-  white-space: nowrap;
+  overflow: hidden;
+  transition: transform 0.5s ease-in-out;
+  width: 100%; /* 修改为100%以适应父容器 */
+  height: 400px; /* 确保容器有足够的高度 */
+  position: relative; /* 添加相对定位 */
 }
 
 .carousel-images img {
-  width: 300px;
-  height: auto;
-  margin-right: 10px;
-}
-
-.product-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.product-item {
-  border: 1px solid #ddd;
-  padding: 10px;
-  width: 200px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.product-item img {
-  width: 100%;
-  height: auto;
-}
-
-.product-item p {
-  margin-top: 5px;
-}
-
-footer {
-  text-align: center;
-  padding: 10px;
-  background-color: #f8f8f8;
+  width: 100%; /* 每张图片占据整个容器的宽度 */
+  height: 100%; /* 图片高度占满容器高度 */
+  object-fit: cover; /* 确保图片完全覆盖容器 */
+  position: absolute; /* 添加绝对定位 */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 </style>