/shop前端更改v2

src/views/Shop.vue

@@ -2,13 +2,14 @@
   <div class="shop-page">
     <!-- 导航栏 -->
     <nav class="navbar">
+      <!-- 移除 nav-left 部分 -->
       <div class="nav-center">
         <h1 class="nav-title">积分商城</h1>
       </div>
       <div class="nav-right">
         <el-button 
           type="text" 
-          @click="$router.push('/points')"
+          @click="$router.push('#')"
           class="points-btn"
         >
           <el-icon><Coin /></el-icon>
@@ -429,9 +430,10 @@ onMounted(() => {
 <style scoped>
 .shop-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(to bottom, #ffae00, #f3f3f3);
 }
 
+/* 导航栏保持白色背景 */
 .navbar {
   display: flex;
   align-items: center;
@@ -445,14 +447,24 @@ onMounted(() => {
   z-index: 100;
 }
 
-.nav-left,
-.nav-right {
-  flex: 1;
+.nav-center {
+  position: absolute;
+  left: 0;
+  right: 0;
+  text-align: center;
+  pointer-events: none; /* 允许点击穿透到下方元素 */
+}
+
+.nav-title {
+  margin: 0 auto;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  display: inline-block; /* 使文本能够真正居中 */
 }
 
 .nav-right {
-  display: flex;
-  justify-content: flex-end;
+  margin-left: auto; /* 将积分按钮推到最右侧 */
 }
 
 .back-btn,
@@ -461,27 +473,28 @@ onMounted(() => {
   font-size: 14px;
 }
 
-.nav-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 500;
-  color: #333;
-}
-
+/* 搜索栏参与渐变 */
 .search-section {
   padding: 16px;
-  background: white;
-  border-bottom: 1px solid #eee;
+  background: transparent;
+  border-bottom: none;
 }
 
 .search-input {
   width: 100%;
 }
 
+.search-input :deep(.el-input__wrapper) {
+  border-radius: 1000px;
+  background-color: rgba(255,255,255,0.8);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+/* 分类筛选参与渐变 */
 .category-section {
-  background: white;
+  background: transparent;
   padding: 16px 0;
-  border-bottom: 1px solid #eee;
+  border-bottom: none;
 }
 
 .category-list {
@@ -501,14 +514,18 @@ onMounted(() => {
   cursor: pointer;
   transition: all 0.3s;
   min-width: 60px;
+  background: rgba(255,255,255,0.8);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 
 .category-item:hover {
-  background: #f0f9ff;
+  background: rgba(240,249,255,0.9);
 }
 
 .category-item.active {
-  background: #409eff;
+  background: rgba(64,158,255,0.9);
   color: white;
 }
 
@@ -516,8 +533,10 @@ onMounted(() => {
   font-size: 12px;
 }
 
+/* 商品列表参与渐变 */
 .products-section {
   padding: 16px;
+  background: transparent;
 }
 
 .section-header {
@@ -531,6 +550,7 @@ onMounted(() => {
   margin: 0;
   font-size: 16px;
   color: #333;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
 .sort-btn {
@@ -540,6 +560,7 @@ onMounted(() => {
   color: #666;
   font-size: 14px;
   cursor: pointer;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
 
 .products-grid {
@@ -552,19 +573,20 @@ onMounted(() => {
 .product-card {
   width: 163px;
   height: 217px;
-  background: white;
+  background: rgba(255,255,255,0.9);
   border-radius: 12px;
   overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   flex-direction: column;
+  backdrop-filter: blur(2px);
 }
 
 .product-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
 }
 
 .product-image {
@@ -650,7 +672,7 @@ onMounted(() => {
   justify-content: center;
   color: white;
   cursor: pointer;
-  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
+  box-shadow: 0 4px 12px rgba(64,158,255,0.4);
   z-index: 1000;
 }
 
@@ -658,6 +680,7 @@ onMounted(() => {
   height: 100%;
   display: flex;
   flex-direction: column;
+  background: white;
 }
 
 .empty-cart {