闲来无事魔改一下异次元商店里售卖的AoPro店铺主题

看啥看

整体效果：

配置：

塞到/app/View/User/Theme/AoPro/Template/Common/Header.tpl这个文件里的62行左右替换掉原来的代码位置，记得要备份

#{if $setting.background_url eq "on"}

/* 变量 */
:root {
  --glass-bg: rgba(255, 255, 255, 0.20);   /* 主体透明度 20 % */
  --glass-border: rgba(255, 255, 255, 0.35);/* 内描边 */
  --glass-highlight: rgba(255, 255, 255, 0.55);/* 内高光 */
  --glass-blur: 16px;                         /* 高斯模糊值 */
  --glass-saturate: 180%;                     /* 饱和度提升 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);/* 外投影 */
  --glass-radius: 12px;                       /* 圆角可选 */
}

/* 玻璃效果的元素 */
.search-header,
.product-list-item,
.category-sidebar,
.notice-container,
.category-card,
.product-card,
.commodity-basic-card,
.purchase-card,
.commodity-desc-card,
.empty-message,
.commodity-draft-card,
.commodity-info-card,
.purchase-container,
.price-section,
.draft-content table td,
.category-item,
.order-item,
.order-total,
.price-item,
.quantity-label {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-radius: var(--glass-radius);
  box-shadow:
    inset 0 0 0 1px var(--glass-border),          /* 内描边 */
    inset 0 1px 0 var(--glass-highlight),         /* 上高光 */
    var(--glass-shadow);                          /* 外投影 */
  transition: transform .30s cubic-bezier(.25,.8,.25,1),
              background .30s ease;
}

/* 悬停流体反馈 */
.product-list-item:hover,
.category-item:hover,
.order-item:hover {
  background: rgba(255, 255, 255, 0.30) !important;
  transform: scale(1.018) translateY(-1px);      /* 微上浮 */
}

/* 激活态颜色 */
.category-card.active .category-card-count,
.category-card.active .category-card-name,
.search-btn:hover i {
  color: rgb(255 148 252);
}

/* 搜索条输入框 */
.search-bar input {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  border-radius: 22px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.60),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 不需要玻璃效果的元素恢复 */
.query-card,
.result-card,
.copyright-footer,
.commodity-header-row,
.commodity-detail-main,
.quantity-control,
.purchase-form,
.commodity-image {
  background: unset !important;
  backdrop-filter: none;
  box-shadow: none;
}

.copyright-text {
  color: rgba(255, 255, 255, 0.85) !important;
}

原配置备份：

/* 背景模式 */
#{if $setting.background_url eq "on"}
.search-header,.product-list-item,.category-sidebar,
.notice-container,.category-card,.product-card,
.commodity-basic-card,.purchase-card,.commodity-desc-card,
.empty-message,.commodity-draft-card,
.commodity-info-card,.purchase-container,
.price-section,
.draft-content table td{
background: rgb(255 255 255 / 70%) !important;
}

    .category-card.active .category-card-count, .category-card.active .category-card-name, .search-btn:hover i {
        color: rgb(255 148 252);
    }

    .product-list-item:hover {
        background: rgb(183 182 182 / 70%) !important;
    }

    .category-item{
        background: rgb(255 255 255 / 70%);
    }

    .category-item.active{
        background: rgb(255 107 149 / 70%);
    }

    .search-bar input{
        background: rgba(255, 255, 255, 0.5);   /* 50% 半透明白色 */
    }
    .query-card,.result-card, .copyright-footer, .commodity-header-row,.commodity-detail-main{
        background: unset !important;
    }
    .order-item{
        background: rgb(255 255 255 / 60%);
    }
    .product-image img{
        opacity: 0.8;
    }
    .quantity-control,.purchase-form,.commodity-image{
        background: unset;
    }
    .order-total,.price-item,.quantity-label{
        background: rgba(255, 255, 255, 0.6);
    }

    .copyright-text{
        color: rgb(255 255 255 / 80%) !important;
    }