|
|
@@ -0,0 +1,1025 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>点菜喵点餐系统</title>
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css">
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
|
|
|
+ <style>
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
|
+ -webkit-tap-highlight-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ :root {
|
|
|
+ --primary: #ff6b6b;
|
|
|
+ --primary-light: #ff8e8e;
|
|
|
+ --primary-dark: #e55a5a;
|
|
|
+ --secondary: #4ecdc4;
|
|
|
+ --dark: #333;
|
|
|
+ --gray: #666;
|
|
|
+ --light-gray: #f5f5f5;
|
|
|
+ --white: #fff;
|
|
|
+ --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ --transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
|
|
|
+ color: var(--dark);
|
|
|
+ line-height: 1.6;
|
|
|
+ padding-bottom: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 480px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Header Styles */
|
|
|
+ header {
|
|
|
+ background: var(--white);
|
|
|
+ padding: 15px 0 10px;
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-container {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo i {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-btn {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: var(--light-gray);
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 16px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Search Bar */
|
|
|
+ .search-bar {
|
|
|
+ background: var(--light-gray);
|
|
|
+ border-radius: 25px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin: 12px 15px 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar i {
|
|
|
+ color: var(--gray);
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-bar input {
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ outline: none;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Swiper Banner */
|
|
|
+ .swiper-container {
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 25px;
|
|
|
+ color: var(--white);
|
|
|
+ }
|
|
|
+
|
|
|
+ .slide-1 {
|
|
|
+ background: linear-gradient(45deg, #ff9a9e, #fad0c4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .slide-2 {
|
|
|
+ background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
|
|
|
+ }
|
|
|
+
|
|
|
+ .slide-3 {
|
|
|
+ background: linear-gradient(45deg, #ffecd2, #fcb69f);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide h2 {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ z-index: 2;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-slide p {
|
|
|
+ font-size: 13px;
|
|
|
+ opacity: 0.9;
|
|
|
+ z-index: 2;
|
|
|
+ text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .swiper-pagination-bullet-active {
|
|
|
+ background: var(--primary) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Category Navigation */
|
|
|
+ .category-nav {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 12px;
|
|
|
+ margin: 15px;
|
|
|
+ padding: 15px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-item:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: rgba(255, 107, 107, 0.1);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--primary);
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* IP Entry */
|
|
|
+ .ip-entry {
|
|
|
+ position: fixed;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 100px;
|
|
|
+ z-index: 99;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ip-circle {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 6px 15px rgba(255, 107, 107, 0.4);
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ip-circle:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ip-circle img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ip-text {
|
|
|
+ background: var(--white);
|
|
|
+ color: var(--primary);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-top: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Shop Info Card */
|
|
|
+ .shop-card {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ margin: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-logo {
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: linear-gradient(45deg, #ff9a9e, #fad0c4);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-info {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-name h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rating {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 5px;
|
|
|
+ color: #ff922b;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-tag {
|
|
|
+ background: rgba(255, 107, 107, 0.1);
|
|
|
+ color: var(--primary);
|
|
|
+ padding: 4px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-stats {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-item {
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--light-gray);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-value {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .stat-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--gray);
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Story Section */
|
|
|
+ .story-section {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ margin: 15px;
|
|
|
+ padding: 15px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-header h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: var(--dark);
|
|
|
+ position: relative;
|
|
|
+ padding-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-header h2::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 16px;
|
|
|
+ background: var(--primary);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-header .more {
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-content {
|
|
|
+ display: flex;
|
|
|
+ gap: 15px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-image {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 12px;
|
|
|
+ background: linear-gradient(45deg, #ffecd2, #fcb69f);
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-details {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: var(--primary);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-text {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--gray);
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-meta {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-actions {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .story-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-radius: 20px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .read-btn {
|
|
|
+ background: var(--primary);
|
|
|
+ color: var(--white);
|
|
|
+ }
|
|
|
+
|
|
|
+ .read-btn:hover {
|
|
|
+ background: var(--primary-dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-btn {
|
|
|
+ background: rgba(255, 107, 107, 0.1);
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-btn:hover {
|
|
|
+ background: rgba(255, 107, 107, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Menu Section */
|
|
|
+ .section {
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 15px 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: var(--dark);
|
|
|
+ position: relative;
|
|
|
+ padding-left: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title h2::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ width: 4px;
|
|
|
+ height: 16px;
|
|
|
+ background: var(--primary);
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title .more {
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Menu Item */
|
|
|
+ .menu-list {
|
|
|
+ display: grid;
|
|
|
+ gap: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ background: var(--white);
|
|
|
+ border-radius: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: var(--card-shadow);
|
|
|
+ display: flex;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: linear-gradient(45deg, #ff9a9e, #fad0c4);
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: var(--white);
|
|
|
+ padding: 3px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-info {
|
|
|
+ padding: 12px;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-name {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-name h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-price {
|
|
|
+ color: var(--primary);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--gray);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-stats {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--gray);
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-btn {
|
|
|
+ width: 80px;
|
|
|
+ height: 32px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: var(--white);
|
|
|
+ border: none;
|
|
|
+ border-radius: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 5px;
|
|
|
+ transition: var(--transition);
|
|
|
+ }
|
|
|
+
|
|
|
+ .add-btn:hover {
|
|
|
+ background: var(--primary-dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Bottom Navigation */
|
|
|
+ .bottom-nav {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: var(--white);
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #eee;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ color: var(--gray);
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item.active {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item.active::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 30px;
|
|
|
+ height: 3px;
|
|
|
+ background: var(--primary);
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-item i {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Animation */
|
|
|
+ @keyframes float {
|
|
|
+ 0% { transform: translateY(0); }
|
|
|
+ 50% { transform: translateY(-10px); }
|
|
|
+ 100% { transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ip-circle {
|
|
|
+ animation: float 3s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Responsive */
|
|
|
+ @media (max-width: 480px) {
|
|
|
+ .swiper-container {
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .category-icon {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shop-logo {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container">
|
|
|
+ <!-- Header -->
|
|
|
+ <header>
|
|
|
+ <div class="header-container">
|
|
|
+ <div class="logo">
|
|
|
+ <i class="fas fa-cat"></i>
|
|
|
+ <span>点菜喵</span>
|
|
|
+ </div>
|
|
|
+ <div class="user-actions">
|
|
|
+ <button class="icon-btn">
|
|
|
+ <i class="fas fa-bell"></i>
|
|
|
+ </button>
|
|
|
+ <button class="icon-btn">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="search-bar">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ <input type="text" placeholder="搜索菜品、商家、分类...">
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <!-- Banner Swiper -->
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide slide-1">
|
|
|
+ <h2>新店开业全场8折</h2>
|
|
|
+ <p>仅限今日，限时优惠</p>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide slide-2">
|
|
|
+ <h2>点菜喵会员专享福利</h2>
|
|
|
+ <p>积分兑换免单券</p>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-slide slide-3">
|
|
|
+ <h2>周末限定套餐</h2>
|
|
|
+ <p>双人套餐仅需¥168</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Category Navigation -->
|
|
|
+ <div class="category-nav">
|
|
|
+ <div class="category-item">
|
|
|
+ <div class="category-icon">
|
|
|
+ <i class="fas fa-fire"></i>
|
|
|
+ </div>
|
|
|
+ <div class="category-text">热销</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-item">
|
|
|
+ <div class="category-icon">
|
|
|
+ <i class="fas fa-percent"></i>
|
|
|
+ </div>
|
|
|
+ <div class="category-text">折扣</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-item">
|
|
|
+ <div class="category-icon">
|
|
|
+ <i class="fas fa-box"></i>
|
|
|
+ </div>
|
|
|
+ <div class="category-text">套餐</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-item">
|
|
|
+ <div class="category-icon">
|
|
|
+ <i class="fas fa-tag"></i>
|
|
|
+ </div>
|
|
|
+ <div class="category-text">优惠</div>
|
|
|
+ </div>
|
|
|
+ <div class="category-item">
|
|
|
+ <div class="category-icon">
|
|
|
+ <i class="fas fa-utensils"></i>
|
|
|
+ </div>
|
|
|
+ <div class="category-text">小吃</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- IP Entry -->
|
|
|
+ <div class="ip-entry">
|
|
|
+ <div class="ip-circle">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff" width="40px" height="40px">
|
|
|
+ <path d="M0 0h24v24H0z" fill="none"/>
|
|
|
+ <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="ip-text">点菜喵</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Shop Info Card -->
|
|
|
+ <div class="shop-card">
|
|
|
+ <div class="shop-header">
|
|
|
+ <div class="shop-logo">喵</div>
|
|
|
+ <div class="shop-info">
|
|
|
+ <div class="shop-name">
|
|
|
+ <h2>点菜喵主题餐厅</h2>
|
|
|
+ <div class="rating">
|
|
|
+ <i class="fas fa-star"></i>
|
|
|
+ <span>4.9</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="shop-tags">
|
|
|
+ <span class="shop-tag">网红打卡</span>
|
|
|
+ <span class="shop-tag">人气爆款</span>
|
|
|
+ <span class="shop-tag">宠物友好</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="shop-stats">
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">¥3.5</div>
|
|
|
+ <div class="stat-label">配送费</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">30min</div>
|
|
|
+ <div class="stat-label">配送时间</div>
|
|
|
+ </div>
|
|
|
+ <div class="stat-item">
|
|
|
+ <div class="stat-value">营业中</div>
|
|
|
+ <div class="stat-label">09:00-22:00</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Story Section -->
|
|
|
+ <div class="story-section">
|
|
|
+ <div class="story-header">
|
|
|
+ <h2>菜品故事</h2>
|
|
|
+ <a href="#" class="more">更多故事</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="story-content">
|
|
|
+ <div class="story-image">
|
|
|
+ 酸菜鱼<br>传统工艺
|
|
|
+ </div>
|
|
|
+ <div class="story-details">
|
|
|
+ <div class="story-title">
|
|
|
+ <i class="fas fa-utensils"></i> 酸菜鱼的传奇故事
|
|
|
+ </div>
|
|
|
+ <div class="story-text">
|
|
|
+ 酸菜鱼源于重庆江津，已有百年历史。传说清朝末年，一位渔夫将刚捕获的鱼与自家腌制的酸菜同煮，意外发现其美味。这道菜融合了川菜的麻辣与酸菜的酸爽，鱼肉鲜嫩，汤汁醇厚...
|
|
|
+ </div>
|
|
|
+ <div class="story-meta">
|
|
|
+ <span>阅读 2,856</span>
|
|
|
+ <span>点赞 1,203</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="story-actions">
|
|
|
+ <div class="story-btn read-btn">阅读完整故事</div>
|
|
|
+ <div class="story-btn share-btn">分享故事</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Menu Section -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-title">
|
|
|
+ <h2>热销菜品</h2>
|
|
|
+ <a href="#" class="more">查看全部</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="menu-list">
|
|
|
+ <!-- Menu 1 -->
|
|
|
+ <div class="menu-item">
|
|
|
+ <div class="menu-img">
|
|
|
+ <div class="menu-badge">热销TOP1</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-info">
|
|
|
+ <div class="menu-name">
|
|
|
+ <h3>招牌酸菜鱼</h3>
|
|
|
+ <div class="menu-price">¥68</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-desc">新鲜黑鱼片搭配秘制酸菜，麻辣鲜香</div>
|
|
|
+ <div class="menu-stats">
|
|
|
+ <span>月售 1286份</span>
|
|
|
+ <span>好评率 98%</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu-actions">
|
|
|
+ <button class="add-btn">
|
|
|
+ <i class="fas fa-plus"></i> 加入
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Menu 2 -->
|
|
|
+ <div class="menu-item">
|
|
|
+ <div class="menu-img">
|
|
|
+ <div class="menu-badge">限时8折</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-info">
|
|
|
+ <div class="menu-name">
|
|
|
+ <h3>香辣小龙虾</h3>
|
|
|
+ <div class="menu-price">¥98 <span style="text-decoration:line-through;color:#999;font-size:12px;margin-left:5px">¥128</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-desc">精选大号小龙虾，麻辣鲜香，肉质饱满</div>
|
|
|
+ <div class="menu-stats">
|
|
|
+ <span>月售 856份</span>
|
|
|
+ <span>好评率 97%</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu-actions">
|
|
|
+ <button class="add-btn">
|
|
|
+ <i class="fas fa-plus"></i> 加入
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Menu 3 -->
|
|
|
+ <div class="menu-item">
|
|
|
+ <div class="menu-img">
|
|
|
+ <div class="menu-badge">新品</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-info">
|
|
|
+ <div class="menu-name">
|
|
|
+ <h3>金汤肥牛锅</h3>
|
|
|
+ <div class="menu-price">¥58</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-desc">精选肥牛搭配南瓜金汤，微辣鲜香</div>
|
|
|
+ <div class="menu-stats">
|
|
|
+ <span>月售 523份</span>
|
|
|
+ <span>好评率 99%</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu-actions">
|
|
|
+ <button class="add-btn">
|
|
|
+ <i class="fas fa-plus"></i> 加入
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Menu 4 -->
|
|
|
+ <div class="menu-item">
|
|
|
+ <div class="menu-img">
|
|
|
+ <div class="menu-badge">双人套餐</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-info">
|
|
|
+ <div class="menu-name">
|
|
|
+ <h3>情侣双人餐</h3>
|
|
|
+ <div class="menu-price">¥168</div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-desc">酸菜鱼+小龙虾+2份甜品+2杯饮品</div>
|
|
|
+ <div class="menu-stats">
|
|
|
+ <span>月售 342份</span>
|
|
|
+ <span>好评率 100%</span>
|
|
|
+ </div>
|
|
|
+ <div class="menu-actions">
|
|
|
+ <button class="add-btn">
|
|
|
+ <i class="fas fa-plus"></i> 加入
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<!-- Bottom Navigation -->
|
|
|
+<div class="bottom-nav">
|
|
|
+ <div class="nav-item active">
|
|
|
+ <i class="fas fa-home"></i>
|
|
|
+ <div>首页</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item">
|
|
|
+ <i class="fas fa-search"></i>
|
|
|
+ <div>发现</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item">
|
|
|
+ <i class="fas fa-book-open"></i>
|
|
|
+ <div>故事</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item">
|
|
|
+ <i class="fas fa-shopping-cart"></i>
|
|
|
+ <div>购物车</div>
|
|
|
+ </div>
|
|
|
+ <div class="nav-item">
|
|
|
+ <i class="fas fa-user"></i>
|
|
|
+ <div>我的</div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 初始化轮播图
|
|
|
+ const swiper = new Swiper('.swiper-container', {
|
|
|
+ loop: true,
|
|
|
+ autoplay: {
|
|
|
+ delay: 3000,
|
|
|
+ disableOnInteraction: false,
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 菜单项交互
|
|
|
+ document.querySelectorAll('.add-btn').forEach(button => {
|
|
|
+ button.addEventListener('click', function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const originalText = this.innerHTML;
|
|
|
+ this.innerHTML = '<i class="fas fa-check"></i> 已添加';
|
|
|
+ this.style.background = '#666';
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ this.innerHTML = originalText;
|
|
|
+ this.style.background = '';
|
|
|
+ }, 1500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // IP入口点击事件
|
|
|
+ document.querySelector('.ip-circle').addEventListener('click', function() {
|
|
|
+ alert('点菜喵智能推荐已开启！将为您推荐最合适的菜品~');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 分类导航点击效果
|
|
|
+ document.querySelectorAll('.category-item').forEach(item => {
|
|
|
+ item.addEventListener('click', function() {
|
|
|
+ const icon = this.querySelector('.category-icon');
|
|
|
+ icon.style.background = 'var(--primary)';
|
|
|
+ icon.style.color = 'var(--white)';
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ icon.style.background = '';
|
|
|
+ icon.style.color = '';
|
|
|
+ }, 300);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 故事按钮交互
|
|
|
+ document.querySelector('.read-btn').addEventListener('click', function() {
|
|
|
+ alert('即将打开酸菜鱼的完整故事...');
|
|
|
+ });
|
|
|
+
|
|
|
+ document.querySelector('.share-btn').addEventListener('click', function() {
|
|
|
+ alert('分享菜品故事给好友');
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
