Initial commit of akmon project

pages/mt/topics.uvue

@@ -0,0 +1,42 @@
+<template>
+  <view :class="['mt-topics', isLargeScreen ? 'large' : 'small']">
+    <text class="mt-title">{{ t('mt.topics.title') }}</text>
+    <scroll-view>
+      <view v-for="topic in topics" :key="topic.id" class="mt-topic-item" @tap="goToTopic(topic.id)">
+        <image :src="topic.cover_image_url" class="mt-topic-cover" />
+        <view class="mt-topic-info">
+          <text class="mt-topic-title">{{ topic.title }}</text>
+          <text class="mt-topic-desc">{{ topic.description }}</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="uts">
+import { ref, onLoad } from 'uni-app'
+import { t } from '@/i18n/mt'
+import { isLargeScreen } from '@/utils/responsive'
+import { getTopics } from '@/composables/use-topics'
+
+const topics = ref([])
+
+onLoad(() => {
+  getTopics().then(res => { topics.value = res })
+})
+
+function goToTopic(id: string) {
+  uni.navigateTo({ url: `/pages/mt/topic-detail.uvue?id=${id}` })
+}
+</script>
+<style lang="scss">
+.mt-topics {
+  padding: 24rpx;
+  &.large { max-width: 900rpx; margin: 0 auto; }
+  .mt-title { font-size: 40rpx; font-weight: bold; margin-bottom: 24rpx; }
+  .mt-topic-item { display: flex; gap: 16rpx; margin-bottom: 24rpx; align-items: center; }
+  .mt-topic-cover { width: 120rpx; height: 120rpx; border-radius: 12rpx; }
+  .mt-topic-info { flex: 1; }
+  .mt-topic-title { font-size: 32rpx; font-weight: 500; }
+  .mt-topic-desc { color: #888; font-size: 24rpx; }
+}
+</style>