index.blade.php 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. {{-- resources/views/library/course/index.blade.php
  2. 课程栏目首页。
  3. 区块:Hero → 统计条 → 最新课程 → 开放报名 → 历史课程预览
  4. --}}
  5. @extends('layouts.library')
  6. @section('title', __('library.course') . ' · ' . __('library.site_name'))
  7. @push('styles')
  8. @vite('resources/css/modules/library-course.css')
  9. @endpush
  10. @section('breadcrumb')
  11. <li class="breadcrumb-item">
  12. <a href="{{ route('library.home') }}">{{ __('library.home') }}</a>
  13. </li>
  14. <li class="breadcrumb-item active">{{ __('library.course') }}</li>
  15. @endsection
  16. {{-- Hero --}}
  17. @section('hero')
  18. <section class="hero-section"
  19. style="background-image: url('{{ URL::asset('assets/images/hero-1.jpg') }}')">
  20. <div class="hero-overlay"></div>
  21. <div class="hero-content">
  22. <h1 class="hero-title">{{ __('library.course_hero_title') }}</h1>
  23. <p class="hero-subtitle">{{ __('library.course_hero_subtitle') }}</p>
  24. <div class="search-box">
  25. <x-ui.search-input
  26. :placeholder="__('library.course_search_placeholder')"
  27. size="lg" />
  28. </div>
  29. </div>
  30. </section>
  31. @endsection
  32. @section('content')
  33. <div class="page-body">
  34. <div class="container-xl">
  35. {{-- ── 统计条 ── --}}
  36. <div class="course-stats">
  37. <div class="course-stat">
  38. <div class="course-stat__value">{{ $stats['total'] }}</div>
  39. <div class="course-stat__label">{{ __('library.course_stat_total') }}</div>
  40. </div>
  41. <div class="course-stat">
  42. <div class="course-stat__value">{{ $stats['open'] }}</div>
  43. <div class="course-stat__label">{{ __('library.course_stat_open') }}</div>
  44. </div>
  45. <div class="course-stat">
  46. <div class="course-stat__value">{{ $stats['closed'] }}</div>
  47. <div class="course-stat__label">{{ __('library.course_stat_closed') }}</div>
  48. </div>
  49. </div>
  50. {{-- ── 一、最新课程 ── --}}
  51. <div class="lib-section">
  52. <div class="lib-section__header">
  53. <h2 class="lib-section__title">
  54. <i class="ti ti-trending-up"></i>
  55. {{ __('library.course_section_latest') }}
  56. </h2>
  57. </div>
  58. @if($latestCourses->isNotEmpty())
  59. <div class="course-grid">
  60. @foreach($latestCourses as $course)
  61. <x-library.course-card :course="$course" />
  62. @endforeach
  63. </div>
  64. @else
  65. <div class="wiki-card">
  66. <x-ui.empty-state :title="__('library.course_no_latest')" />
  67. </div>
  68. @endif
  69. </div>
  70. {{-- ── 二、开放报名 ── --}}
  71. <div class="lib-section">
  72. <div class="lib-section__header">
  73. <h2 class="lib-section__title">
  74. <i class="ti ti-calendar-event"></i>
  75. {{ __('library.course_section_open') }}
  76. </h2>
  77. </div>
  78. @if($openCourses->isNotEmpty())
  79. <div class="course-list">
  80. @foreach($openCourses as $course)
  81. <x-library.course-row :course="$course" />
  82. @endforeach
  83. </div>
  84. @else
  85. <div class="wiki-card">
  86. <x-ui.empty-state :title="__('library.course_no_open')" />
  87. </div>
  88. @endif
  89. </div>
  90. {{-- ── 三、历史课程 ── --}}
  91. <div class="lib-section">
  92. <div class="lib-section__header">
  93. <h2 class="lib-section__title">
  94. <i class="ti ti-history"></i>
  95. {{ __('library.course_section_history') }}
  96. </h2>
  97. <a href="{{ route('library.course.history') }}" class="lib-section__more">
  98. {{ __('library.course_view_all') }} <i class="ti ti-arrow-right"></i>
  99. </a>
  100. </div>
  101. @if($historyCourses->isNotEmpty())
  102. <div class="course-list">
  103. @foreach($historyCourses as $course)
  104. <x-library.course-row :course="$course" />
  105. @endforeach
  106. </div>
  107. @else
  108. <div class="wiki-card">
  109. <x-ui.empty-state :title="__('library.course_no_history')" />
  110. </div>
  111. @endif
  112. </div>
  113. </div>
  114. </div>
  115. @endsection