web-home

schoolNewsWeb/src/views/public/banner/BannerAdd.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="banner-add"></div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss" scoped>
+</style>

schoolNewsWeb/src/views/public/banner/BannerCard.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="banner-card">
+    <div class="banner-content" @click="handleLearn">
+      <!-- <img :src="FILE_DOWNLOAD_URL + props.banner.imageUrl" alt="banner" class="banner-image"> -->
+       <span>test</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Banner } from '@/types';
+import { FILE_DOWNLOAD_URL } from '@/config';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const props = defineProps<{
+    banner: Banner;
+}>();
+
+function handleLearn() {
+    if (props.banner.linkType === 1) {
+        router.push(`/resource/${props.banner.linkID}`);
+    } else if (props.banner.linkType === 2) {
+        router.push(`/course/${props.banner.linkID}`);
+    } else if (props.banner.linkType === 3) {
+        window.open(props.banner.linkUrl, '_blank');
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-card {
+  width: 100%;
+  height: 100%;
+
+  .banner-content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    background-color: red;
+
+    .banner-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+      display: block;
+    }
+
+    .banner-overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 60px 120px;
+      display: flex;
+      align-items: flex-end;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
+
+      .learn-btn {
+        width: 120px;
+        height: 39px;
+        background: #FFFFFF;
+        border-radius: 12px;
+        border: none;
+        font-family: 'PingFang SC';
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 22.4px;
+        color: #C62828;
+        cursor: pointer;
+        transition: all 0.3s;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.9);
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+  }
+}
+</style>

schoolNewsWeb/src/views/public/banner/index.ts

@@ -0,0 +1,3 @@
+// 导出目录下组件
+export { default as BannerAdd } from './BannerAdd.vue';
+export { default as BannerCard } from './BannerCard.vue';