<template>
  <view class="admin-page">
    <view class="admin-card filter-card">
      <view class="filter-row">
        <view class="filter-item">
          <text class="label">图文搜索：</text>
          <input class="filter-input" placeholder="请输入图文名称" />
        </view>
        <view class="filter-btns">
          <button class="btn primary">查询</button>
          <button class="btn success">添加图文消息</button>
        </view>
      </view>
    </view>
    
    <view class="admin-card content-card">
      <view class="news-list">
        <!-- 模拟图文卡片 -->
        <view class="news-item">
          <image class="cover" src="/static/placeholder.png" mode="aspectFill"></image>
          <view class="news-info">
            <text class="title">hahah</text>
            <text class="id">207</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
// 图文管理逻辑
</script>

<style scoped>
.news-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
}

.news-item {
  width: 240px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
}

.news-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.cover {
  width: 100%;
  height: 140px;
  background-color: #f5f7fa;
}

.news-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 16px;
  color: #303133;
}

.id {
  font-size: 12px;
  color: #2d8cf0;
  margin-top: 5px;
}

.btn.success {
  background-color: #2d8cf0;
  color: #fff;
}
</style>
