feat: 修改铸造页面的样式

frontend/pages/castlove/craft-select.vue

@@ -135,16 +135,16 @@ export default {
       categoryList: [{ name: "星卡" }, { name: "吧唧" }, { name: "海报" }],
       cardListMap: {
         星卡: [
+            {
+              name: "镭射卡",
+              image: "/static/castlove/leisheka.png",
+              comingSoon: false,
+            },
           {
             name: "光栅卡",
             image: "/static/castlove/guangshanka.png",
             comingSoon: false,
           },
-          {
-            name: "镭射卡",
-            image: "/static/castlove/leisheka.png",
-            comingSoon: false,
-          },
 
           {
             name: "拍立得",
@@ -268,6 +268,12 @@ export default {
     currentCenterIndex() {
       return Math.floor(this.currentCardCount / 2);
     },
+    // 各分类的初始 selectedIndex
+    // 与 data() 中的初始值语义保持一致,统一为"默认第 2 张"
+    // 后续如需让每个分类回到"各自的中心",可在此处按分类返回不同值
+    defaultSelectedIndex() {
+      return 1;
+    },
   },
   methods: {
     // 根据 type 字符串定位到对应分类索引
@@ -280,11 +286,8 @@ export default {
     },
     selectCategory(index) {
       this.selectedCategoryIndex = index;
-      // 切换分类后,根据新分类的卡片数量重置中心索引
+      // 切换分类后,重置为该分类的初始状态(回到刚进入时的样子)
-      // (直接读 cardListMap 避免依赖 computed 在同 tick 内的更新)
+      this.selectedIndex = this.defaultSelectedIndex;
-      const newCount =
-        this.cardListMap[this.categoryList[index]?.name]?.length || 0;
-      this.selectedIndex = Math.floor(newCount / 2);
       this.dragOffset = 0;
       this.isDragging = false;
     },
@@ -528,14 +531,21 @@ export default {
 
 .card-name {
   position: absolute;
-  bottom: 0;
+  bottom: -16rpx;
   left: 32rpx;
+  background: linear-gradient(
+    93.1deg,
+    rgba(224, 180, 247, 0.71) -12.06%,
+    rgba(178, 246, 204, 0.71) 52.09%,
+    rgba(98, 178, 244, 0.71) 163.5%
+  );
+  backdrop-filter: blur(11.699999809265137px);
   color: #fffabd;
-
   text-shadow: -1px 1px 4px #ce0909d6;
-
+  font-size: 28rpx;
-  font-size: 32rpx;
   font-weight: 400;
+  padding: 0 16rpx;
+  border-radius: 16rpx;
 }
 
 .text-panel {