Initial WordPress theme

page-books.php

@@ -0,0 +1,29 @@
+<?php
+get_header();
+$cfg = gx_asset_config();
+?>
+<div class="pt-24 min-h-screen bg-apple-grey animate-fade-in">
+  <div class="max-w-7xl mx-auto px-6 pb-20">
+    <div class="flex flex-col items-center text-center mb-16 pt-8">
+      <span class="bg-white border border-gray-200 text-gray-500 font-bold px-4 py-1.5 rounded-full text-xs mb-6 uppercase tracking-wider shadow-sm">Official Store</span>
+      <h1 class="text-4xl md:text-6xl font-semibold text-apple-dark mb-6">官方出版商城</h1>
+      <p class="text-xl text-gray-500 max-w-2xl font-light">针对天津专升本考纲编写，每年更新。累计销量突破 500,000 册。</p>
+    </div>
+    <div class="flex justify-center gap-4 mb-12 flex-wrap">
+      <?php foreach (array('全部','公共课','专业课','模拟卷','内部讲义') as $i => $cat): ?>
+      <button class="px-6 py-2 rounded-full text-sm font-medium transition-all <?php echo $i === 0 ? 'bg-black text-white shadow-lg' : 'bg-white text-gray-600 hover:bg-gray-100'; ?>"><?php echo esc_html($cat); ?></button>
+      <?php endforeach; ?>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+      <?php foreach ($cfg['books'] as $book): ?>
+      <div class="bg-white rounded-[2rem] p-8 flex flex-col items-center text-center shadow-sm hover:shadow-2xl hover:-translate-y-1 transition-all duration-300 group relative overflow-hidden">
+        <?php if (!empty($book['tag'])): ?><div class="absolute top-6 left-6 bg-red-500 text-white text-[10px] font-bold px-2 py-1 rounded-md"><?php echo esc_html($book['tag']); ?></div><?php endif; ?>
+        <div class="w-full aspect-[4/3] flex items-center justify-center mb-8 mt-4 gx-book gx-book-card-image max-w-[200px]"><img src="<?php echo esc_url($book['image']); ?>" alt="<?php echo esc_attr($book['title']); ?>"></div>
+        <div class="mt-auto w-full"><h3 class="text-xl font-bold text-apple-dark mb-2 truncate"><?php echo esc_html($book['title']); ?></h3><div class="flex items-center justify-center gap-3 mb-6"><span class="text-red-500 font-bold text-lg">¥<?php echo esc_html($book['price']); ?></span><span class="text-gray-400 text-sm line-through">¥<?php echo esc_html($book['old']); ?></span></div><button data-gx-modal-open="#gx-buy-modal" class="w-full py-3 rounded-full bg-apple-blue text-white font-medium text-sm hover:bg-apple-blue-hover transition-colors shadow-md hover:shadow-lg">立即购买</button></div>
+      </div>
+      <?php endforeach; ?>
+    </div>
+  </div>
+</div>
+<div id="gx-buy-modal" class="gx-modal"><div class="gx-modal-backdrop"></div><div class="gx-modal-panel p-8 text-center"><button data-gx-modal-close class="absolute top-4 right-4 p-2 rounded-full hover:bg-gray-100">×</button><h3 class="text-2xl font-bold text-gray-900 mb-2">扫码添加客服</h3><p class="text-gray-500 mb-6">添加微信客服，了解购买详情</p><div class="bg-gray-50 rounded-2xl p-6 inline-block"><img src="<?php echo esc_url($cfg['customer_service_qrcode']); ?>" alt="客服二维码" class="w-64 h-64 rounded-lg"></div><p class="text-sm text-gray-400 mt-6">工作时间：周一至周日 9:00-21:00</p></div></div>
+<?php get_footer(); ?>