newfront/src/views/StrategyView.vue

<template>
  <div class="strategy-view">
    <NavBar />
    <div class="container">
      <h1 class="page-title">攻略指南</h1>
      
      <!-- 介绍说明卡片 -->
      <div class="intro-card">
        <p class="intro-text">
            攻略指南板块有NEUer们可能想知道的各种问题，每个内容下面都设置评论区，供大家自由交流和解惑~
        </p>
        <p class="intro-text">
            为鼓励大家积极投稿，本站投稿者可获得专属访问密码以访问本站加密资源，感谢您的支持~
        </p>
      </div>
      
      <!-- 标签多选区域 -->
      <div class="tag-selection">
        <div class="tag-header">
          <h2 class="tag-title">热门标签</h2>
          <div class="tag-controls">
            <!-- <button class="tag-control-btn" @click="selectAllTags">全选</button> -->
            <button class="tag-control-btn" @click="clearAllTags">清除</button>
          </div>
        </div>
        
        <div class="tags-container">
          <div 
            v-for="tag in strategyTags" 
            :key="tag.id"
            class="tag-chip"
            :class="{ active: selectedTags.includes(tag.id) }"
            @click="toggleTag(tag.id)"
          >
            {{ tag.name }}
            <span v-if="selectedTags.includes(tag.id)" class="check-icon">✓</span>
          </div>
        </div>
      </div>
      
      <!-- 文章列表 -->
      <CardList 
        :searchParams="searchParams"
        :mode="1"
        :pageSize="12"
      />
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import CardList from '@/components/CardList.vue';

export default {
  name: 'StrategyView',
  components: {
    NavBar,
    CardList
  },
  data() {
    return {
      // 已选中的标签ID列表
      selectedTags: [],
      // 攻略指南板块的标签列表（手动指定）
      strategyTags: [
        { id: 11, name: '保研' },
        { id: 12, name: '综测' },
        { id: 13, name: '生活指南' }
      ]
    };
  },
  created() {
    // 设置页面标题
    document.title = '攻略指南 - NEU小站';
  },
  computed: {
    // 搜索参数
    searchParams() {
      const params = {
        section: 0  // 攻略指南板块
      };
      
      // 如果有选中的标签，添加到搜索参数
      if (this.selectedTags.length > 0) {
        params.tags = this.selectedTags;
      }
      
      return params;
    }
  },
  methods: {
    // 切换标签选择状态
    toggleTag(tagId) {
      if (this.selectedTags.includes(tagId)) {
        // 如果已选中，则取消选中
        this.selectedTags = this.selectedTags.filter(id => id !== tagId);
      } else {
        // 如果未选中，则添加到选中列表
        this.selectedTags.push(tagId);
      }
    },
    // 全选标签
    selectAllTags() {
      this.selectedTags = this.strategyTags.map(tag => tag.id);
    },
    // 清除所有选中的标签
    clearAllTags() {
      this.selectedTags = [];
    }
  }
};
</script>

<style scoped lang="scss">
.strategy-view {
  background-color: #f5f5f7;
  min-height: 100vh;
  padding-top: 60px; // 为固定导航栏留出空间
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.page-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #333;
  text-align: center;
}

// 介绍卡片样式
.intro-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  border-left: 4px solid #3273dc;
  position: relative;
  overflow: hidden;
}

.intro-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at top right, rgba(50, 115, 220, 0.08), transparent 70%);
  z-index: 0;
}

.intro-text {
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.intro-text:last-child {
  margin-bottom: 0;
}

// 标签选择区域
.tag-selection {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
//   margin-bottom: 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tag-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.tag-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.tag-controls {
  display: flex;
  gap: 0.8rem;
}

.tag-control-btn {
  padding: 0.6rem 1.2rem;
  border: none;
  background: linear-gradient(to right, #3273dc, #4286f4);
  color: white;
  border-radius: 30px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(50, 115, 220, 0.2);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(50, 115, 220, 0.3);
    background: linear-gradient(to right, #2e69cc, #3b7ce3);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(50, 115, 220, 0.2);
    background: linear-gradient(to right, #2960bd, #356ccc);
  }
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.tag-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background-color: #f1f1f1;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background-color: #e0e0e0;
  }
  
  &.active {
    background-color: #3273dc;
    color: white;
  }
  
  .check-icon {
    font-size: 0.8rem;
  }
}

// 响应式布局
@media (max-width: 768px) {
  .tag-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .page-title {
    font-size: 1.6rem;
    text-align: left;
  }
  
  .tag-selection {
    padding: 1rem;
  }
  
  .intro-card {
    padding: 1.2rem 1rem;
  }
  
  .intro-text {
    font-size: 0.95rem;
  }
}
</style>