web-资源中心修改

schoolNewsWeb/src/views/resource-center/components/ResourceHead.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="resource-head">
+    <div class="head-title">资源中心</div>
+    <div class="breadcrumb">
+      <span class="breadcrumb-label">当前位置：</span>
+      <div class="breadcrumb-nav">
+        <span class="breadcrumb-item">资源中心</span>
+        <span class="separator">/</span>
+        <span class="breadcrumb-item">{{ categoryName }}</span>
+        <span class="separator" v-if="showArticleMode">/</span>
+        <span class="breadcrumb-item active" v-if="showArticleMode">正文</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  categoryName?: string;
+  showArticleMode?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  categoryName: '党史学习',
+  showArticleMode: false
+});
+</script>
+
+<style lang="scss" scoped>
+.resource-head {
+  width: 100%;
+  height: 250px;
+  background: url('@/assets/imgs/resource-head-bg.jpg') center/cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.head-title {
+  font-family: 'MiSans VF', 'PingFang SC';
+  font-weight: 630;
+  font-size: 40px;
+  line-height: 1.2;
+  letter-spacing: 0.05em;
+  color: #FFFFFF;
+  text-align: center;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  height: 24px;
+}
+
+.breadcrumb-label {
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: #F1F1F1;
+  margin-right: 4px;
+}
+
+.breadcrumb-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.breadcrumb-item {
+  font-family: 'PingFang SC';
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: #FFFFFF;
+  
+  &.active {
+    color: #FFFFFF;
+  }
+}
+
+.separator {
+  font-family: 'PingFang SC';
+  font-size: 14px;
+  color: #C9CDD4;
+}
+</style>
+