gypsy-crm-frontend-vu/pages/ib/promotion.vue

<template>
  <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
    <cwg-header title="推广素材" />

    <!-- 顶部 Tabs -->
    <cwg-asset-tabs v-model="activeTab" :tabs="tabsConfig" />

    <view class="main-container">
      <!-- 工具栏：筛选与排序 -->
      <view class="toolbar">
      </view>

      <!-- 视频 (Tab 3) -->
      <view v-if="activeTab === 3" class="media-grid">
        <view class="media-card" v-for="item in videoList" :key="item.id">
          <view class="media-cover">
            <image class="cover-img" :src="item.cover" mode="aspectFill"></image>
            <view class="play-btn">
              <cwg-icon name="crm-play" :size="32" color="#fff" />
            </view>
            <view v-if="item.isNew" class="badge-new">新</view>
          </view>
          <view class="media-info">
            <view class="info-row">
              <text class="label">语言</text>
              <text class="value">{{ item.languages }}</text>
            </view>
            <view class="info-row">
              <text class="label">长宽比</text>
              <text class="value tag">{{ item.aspectRatio }}</text>
            </view>
            <view class="info-row">
              <text class="label">类型</text>
              <text class="value tag">{{ item.type }}</text>
            </view>
          </view>
          <view class="media-actions">
            <checkbox class="action-checkbox" style="transform:scale(0.8)" />
            <button class="action-btn main-btn">选择视频</button>
            <button class="action-btn icon-btn">
              <cwg-icon name="crm-download" :size="18" color="#333" />
            </button>
          </view>
        </view>
      </view>

      <!-- GIFs (Tab 5) -->
      <view v-if="activeTab === 5" class="media-grid">
        <view class="media-card" v-for="item in gifList" :key="item.id">
          <view class="media-cover checkerboard">
            <image class="cover-img contain" :src="item.cover" mode="aspectFit"></image>
            <view v-if="item.isNew" class="badge-new">新</view>
          </view>
          <view class="media-info">
            <view class="info-title">{{ item.title }}</view>
            <view class="info-desc">{{ item.desc }}</view>
            <view class="info-row mt-10">
              <text class="label">语言</text>
              <text class="value">{{ item.languages }}</text>
            </view>
            <view class="info-row">
              <text class="label">尺寸</text>
              <text class="value">{{ item.size }}</text>
            </view>
            <view class="info-row">
              <text class="label">类型</text>
              <text class="value tag">{{ item.type }}</text>
            </view>
          </view>
          <view class="media-actions">
            <checkbox class="action-checkbox" style="transform:scale(0.8)" />
            <button class="action-btn main-btn">选择GIF</button>
            <button class="action-btn icon-btn">
              <cwg-icon name="crm-download" :size="18" color="#333" />
            </button>
          </view>
        </view>
      </view>

      <!-- 标志 (Tab 6) -->
      <view v-if="activeTab === 6" class="media-grid logo-grid">
        <view class="media-card logo-card" v-for="item in logoList" :key="item.id">
          <view class="logo-cover" :class="item.theme">
            <image class="logo-img" :src="item.cover" mode="aspectFit"></image>
          </view>
          <view class="media-actions logo-actions">
            <button class="action-btn main-btn">下载</button>
          </view>
        </view>
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const activeTab = ref(3)

const tabsConfig = computed(() => [
  { text: '视频 (790)', value: 3 },
  { text: 'GIFs (30)', value: 5 },
  { text: '标志 (4)', value: 6 },
])

// 模拟数据：视频
const videoList = ref([
  {
    id: 1,
    isNew: true,
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=A%20person%20writing%20in%20a%20notebook%20on%20a%20wooden%20desk%20with%20a%20laptop%20and%20headphones%2C%20top-down%20view&image_size=landscape_16_9',
    languages: '中文（简体）、孟加拉语、英语 +2',
    aspectRatio: '纵向',
    type: "Exness' unique features"
  },
  {
    id: 2,
    isNew: true,
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=A%20person%20using%20a%20trading%20app%20on%20a%20smartphone%20with%20a%20laptop%20in%20the%20background&image_size=landscape_16_9',
    languages: '中文（简体）、孟加拉语、英语 +2',
    aspectRatio: '纵向',
    type: "Fast execution"
  },
  {
    id: 3,
    isNew: false,
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=A%20professional%20trading%20setup%20with%20multiple%20monitors%20displaying%20charts&image_size=landscape_16_9',
    languages: '英语、西班牙语、葡萄牙语',
    aspectRatio: '横向',
    type: "Trading conditions"
  }
])

// 模拟数据：GIFs
const gifList = ref([
  {
    id: 1,
    isNew: true,
    title: '节省交易成本',
    desc: '提供小点差和热门资产的无隔夜利息交易，助您保留更多收益。',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=A%20clean%20financial%20trading%20chart%20with%20green%20and%20blue%20lines%20on%20a%20dark%20background%20with%20currency%20symbols&image_size=square',
    languages: '英语、印尼语、西班牙语（拉丁美洲） +2',
    size: '300x300、300x600、728x90',
    type: 'Lower your trading cost'
  },
  {
    id: 2,
    isNew: true,
    title: '掌控您的外汇交易',
    desc: '以小点差和灵活杠杆交易直盘、交叉盘及小众外汇对。',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=A%20minimalist%20blue%20line%20chart%20on%20a%20white%20background%20with%20UK%20and%20EU%20flags&image_size=square',
    languages: '英语、印尼语、西班牙语（拉丁美洲） +2',
    size: '300x300、300x600、728x90',
    type: '外汇'
  }
])

// 模拟数据：标志
const logoList = ref([
  {
    id: 1,
    theme: 'light',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=The%20word%20EXNESS%20in%20black%20bold%20minimalist%20typography%20on%20a%20white%20background&image_size=landscape_16_9'
  },
  {
    id: 2,
    theme: 'dark',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=The%20word%20EXNESS%20in%20white%20bold%20minimalist%20typography%20on%20a%20dark%20navy%20background&image_size=landscape_16_9'
  },
  {
    id: 3,
    theme: 'light',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=The%20word%20IB%20EXNESS%20in%20black%20bold%20minimalist%20typography%20on%20a%20white%20background&image_size=landscape_16_9'
  },
  {
    id: 4,
    theme: 'dark',
    cover: 'https://coresg-normal.trae.ai/api/ide/v1/text_to_image?prompt=The%20word%20IB%20EXNESS%20in%20white%20bold%20minimalist%20typography%20on%20a%20dark%20navy%20background&image_size=landscape_16_9'
  }
])
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.promotion-page {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.main-container {
  padding: px2rpx(20);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: px2rpx(20);

  .filter-btn {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: px2rpx(8) px2rpx(16);
    border-radius: px2rpx(4);
    font-size: px2rpx(14);
    color: var(--bs-heading-color);
  }

  .sort-group {
    display: flex;
    border: 1px solid #e4e7ed;
    border-radius: px2rpx(4);
    overflow: hidden;
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;

    .sort-item {
      padding: px2rpx(8) px2rpx(16);
      font-size: px2rpx(14);
      color: var(--bs-heading-color);
      border-right: 1px solid #e4e7ed;
      cursor: pointer;

      &:last-child {
        border-right: none;
      }

      &.active {
        background-color: #f5f5f5;
        font-weight: 500;
        color: var(--bs-heading-color);
      }
    }
  }
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(px2rpx(320), 1fr));
  gap: px2rpx(20);

  &.logo-grid {
    grid-template-columns: repeat(auto-fill, minmax(px2rpx(400), 1fr));
  }
}

.media-card {
  background: #fff;
  border-radius: px2rpx(8);
  border: 1px solid #ebeef5;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .media-cover {
    position: relative;
    height: px2rpx(220);
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;

    &.checkerboard {
      background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
        linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
      background-size: 20px 20px;
      background-position: 0 0, 10px 10px;
      background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    }

    .cover-img {
      width: 100%;
      height: 100%;

      &.contain {
        object-fit: contain;
      }
    }

    .play-btn {
      position: absolute;
      width: px2rpx(50);
      height: px2rpx(50);
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
    }

    .badge-new {
      position: absolute;
      top: px2rpx(10);
      right: px2rpx(10);
      background-color: #d32f2f;
      color: var(--bs-emphasis-color);
      font-size: px2rpx(12);
      padding: px2rpx(2) px2rpx(8);
      border-radius: px2rpx(4);
    }
  }

  .media-info {
    padding: px2rpx(16);
    flex: 1;

    .info-title {
      font-size: px2rpx(16);
      font-weight: bold;
      color: var(--bs-heading-color);
      margin-bottom: px2rpx(8);
    }

    .info-desc {
      font-size: px2rpx(13);
      color: var(--bs-heading-color);
      line-height: 1.5;
      margin-bottom: px2rpx(12);
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: px2rpx(10) 0;
      border-bottom: 1px solid var(--bs-border-color);
      font-size: px2rpx(13);

      &.mt-10 {
        margin-top: px2rpx(10);
      }

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      .label {
        color: var(--bs-heading-color);
      }

      .value {
        color: var(--bs-heading-color);
        font-weight: 500;
        text-align: right;

        &.tag {
          background-color: #f5f5f5;
          padding: px2rpx(2) px2rpx(8);
          border-radius: px2rpx(12);
          font-weight: normal;
        }
      }
    }
  }

  .media-actions {
    display: flex;
    align-items: center;
    padding: px2rpx(16);
    gap: px2rpx(10);
    border-top: 1px solid #ebeef5;

    &.logo-actions {
      justify-content: center;
    }

    .action-checkbox {
      flex-shrink: 0;
    }

    .action-btn {
      height: px2rpx(36);
      line-height: px2rpx(36);
      font-size: px2rpx(14);
      margin: 0;
      border-radius: px2rpx(4);
      background-color: #f5f5f5;
      color: var(--bs-heading-color);
      border: none;

      &::after {
        border: none;
      }

      &.main-btn {
        flex: 1;
      }

      &.icon-btn {
        width: px2rpx(36);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.logo-card {
  .logo-cover {
    height: px2rpx(260);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: px2rpx(40);

    &.light {
      background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
    }

    &.dark {
      background-color: #0b101e;
    }

    .logo-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>