From da3659412d1eaaa021dc9aafa3326edca5aa672c Mon Sep 17 00:00:00 2001
From: zoujiandong <10130823232@qq.com>
Date: Wed, 3 Dec 2025 09:58:56 +0800
Subject: [PATCH] 11111

---
 pages.json                            |   20 +-
 pages_app/video/video.vue             | 2439 +++++++++++++------------
 pages_app/videoDetail/videoDetail.vue |   11 +-
 pages_app/zhinan/zhinan.vue           | 2069 +++++++++++----------
 4 files changed, 2314 insertions(+), 2225 deletions(-)

diff --git a/pages.json b/pages.json
index c7a6c79..1cf7d3e 100644
--- a/pages.json
+++ b/pages.json
@@ -9,16 +9,16 @@
 		}
 	},
 	"pages": [
-		// {
-		// 	"path": "pages/loading/loading",
-		// 	"style": {
-		// 		"navigationBarTitleText": "",
-		// 		"navigationStyle": "custom",
-		// 		"app": {
-		// 			"bounce": "none"
-		// 		}
-		// 	}
-		// },
+		{
+			"path": "pages/loading/loading",
+			"style": {
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"app": {
+					"bounce": "none"
+				}
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
diff --git a/pages_app/video/video.vue b/pages_app/video/video.vue
index 6b9b816..e5d552c 100644
--- a/pages_app/video/video.vue
+++ b/pages_app/video/video.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="navbox">
+  <view class="navbox">
     <view class="status_bar"></view>
     <uni-nav-bar
       left-icon="left"
@@ -10,1423 +10,1470 @@
       backgroundColor="#eeeeee"
     >
       <template #right>
-        <view class="nav-actions" >
+        <view class="nav-actions">
           <view class="collect-img" @click="goSearch">
             <image class="img-icon" :src="searchImg" mode="aspectFill" />
           </view>
-         <view class="collect-img" @click="goMeet">
-            <image
-              class="img-icon"
-              :src="meetImg"
-              mode="aspectFill"
-            />
-          </view> 
+          <view class="collect-img" @click="goMeet">
+            <image class="img-icon" :src="meetImg" mode="aspectFill" />
+          </view>
         </view>
       </template>
     </uni-nav-bar>
   </view>
 
-	<view class="video-page">
-		<!-- Header -->
-		
-		<!-- Fixed Banner Swiper -->
-		<view class="banner-container">
-			
-			<view class="swipemask" >
-				<view class="banner-subtitle" v-if="bannerList.length>0">{{bannerList[currentBannerIndex].name}}</view>	
-				<view class="dotbox">
-					<view class="circle" :class="{active:currentBannerIndex==index} "v-for="(banner, index) in bannerList" 
-					:key="banner.id"></view>
-				</view>
-			</view>
-			<swiper 
-				class="banner-swiper"
-				:indicator-dots="false"
-				:autoplay="true"
-				:interval="5000"
-				:duration="300"
-				indicator-color="rgba(255,255,255,0.4)"
-				indicator-active-color="#fff"
-				circular
-				@change="onSwiperChange"
-			>
-			  
-				<swiper-item 
-					v-for="(banner, index) in bannerList" 
-					:key="banner.id"
-					@click="playBannerVideo(banner)"
-				>
-					<view class="banner-item">
-						<up-image 
-							class="banner-image" 
-							:src="docUrl+banner.imgpath" 
-							mode="aspectFill"
-							:loadingIcon="lazyVideoImg"
-							:errorIcon="lazyVideoImg"
-							:lazy-load="true"
-							width="100%"
-							height="400rpx"
-						>
-						<template #error>
-							<image :src="lazyVideoImg" class="banner-image" mode="aspectFill"></image>
-						</template>
-						<template #loading>
-							<image :src="lazyVideoImg" class="banner-image" mode="aspectFill"></image>
-						</template>
-						</up-image>
-						
-					</view>
-				</swiper-item>
-			</swiper>
-		</view>
+  <view class="video-page">
+    <!-- Header -->
 
-		<!-- Fixed Filter Tabs -->
-		<view class="filter-tabs-container">
-			<view class="filter-tabs">
-				<view 
-					class="tab-item"
-					@click="showAllVideoPopup=!showAllVideoPopup"
-				>
-					<up-image  :src="isAllActive?allOnImg:allImg" width="30rpx" height="30rpx" ></up-image>
-					<text class="tab-text" :class="{active:isAllActive}">{{typeName}}</text>
-					<up-image  :src="isAllActive?selectOnImg:selectImg" width="30rpx" height="30rpx" ></up-image>
-				</view>
-				<view class="right">
-					<view
-						class="tab-item"
-						@click="toggleSort"
-					>
-						<text class="tab-text active">{{sort==2?'最新':'最热'}}</text>
-						<view class="newbox">
-							<up-image  :src="sort==2?upImg:downImg" width="20rpx" height="26rpx" ></up-image>
-						</view>
-					</view>
-					<view class="bar"></view>
-					<view 
-						class="tab-item"
-						@click="showFilterPopup"
-					>
-						<text class="tab-text " :class="{active:isFilterActive}">筛选</text>
-						<view class="filterbox">
-							<up-image  :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
+    <!-- Fixed Banner Swiper -->
+    <view class="banner-container">
+      <view class="swipemask">
+        <view class="banner-subtitle" v-if="bannerList.length > 0">{{
+          bannerList[currentBannerIndex].name
+        }}</view>
+        <view class="dotbox">
+          <view
+            class="circle"
+            :class="{ active: currentBannerIndex == index }"
+            v-for="(banner, index) in bannerList"
+            :key="banner.id"
+          ></view>
+        </view>
+      </view>
+      <swiper
+        class="banner-swiper"
+        :indicator-dots="false"
+        :autoplay="true"
+        :interval="5000"
+        :duration="300"
+        indicator-color="rgba(255,255,255,0.4)"
+        indicator-active-color="#fff"
+        circular
+        @change="onSwiperChange"
+      >
+        <swiper-item
+          v-for="(banner, index) in bannerList"
+          :key="banner.id"
+          @click="playBannerVideo(banner)"
+        >
+          <view class="banner-item">
+            <up-image
+              class="banner-image"
+              :src="docUrl + banner.imgpath"
+              mode="aspectFill"
+              :loadingIcon="lazyVideoImg"
+              :errorIcon="lazyVideoImg"
+              :lazy-load="true"
+              width="100%"
+              height="400rpx"
+            >
+              <template #error>
+                <image
+                  :src="lazyVideoImg"
+                  class="banner-image"
+                  mode="aspectFill"
+                ></image>
+              </template>
+              <template #loading>
+                <image
+                  :src="lazyVideoImg"
+                  class="banner-image"
+                  mode="aspectFill"
+                ></image>
+              </template>
+            </up-image>
+          </view>
+        </swiper-item>
+      </swiper>
+    </view>
 
-		<!-- Main Content -->
-		<scroll-view
-			class="scroll-view"
-			scroll-y="true"
-			refresher-enabled="true"
-			:refresher-triggered="refreshing"
-			@refresherrefresh="onRefresh"
-			@scrolltolower="onLoadMore"
-			lower-threshold="100"
-		>
+    <!-- Fixed Filter Tabs -->
+    <view class="filter-tabs-container">
+      <view class="filter-tabs">
+        <view class="tab-item" @click="showAllVideoPopup = !showAllVideoPopup">
+          <up-image
+            :src="isAllActive ? allOnImg : allImg"
+            width="30rpx"
+            height="30rpx"
+          ></up-image>
+          <text class="tab-text" :class="{ active: isAllActive }">{{
+            typeName
+          }}</text>
+          <up-image
+            :src="isAllActive ? selectOnImg : selectImg"
+            width="30rpx"
+            height="30rpx"
+          ></up-image>
+        </view>
+        <view class="right">
+          <view class="tab-item" @click="toggleSort">
+            <text class="tab-text active">{{
+              sort == 2 ? "最新" : "最热"
+            }}</text>
+            <view class="newbox">
+              <up-image
+                :src="sort == 2 ? upImg : downImg"
+                width="20rpx"
+                height="26rpx"
+              ></up-image>
+            </view>
+          </view>
+          <view class="bar"></view>
+          <view class="tab-item" @click="showFilterPopup">
+            <text class="tab-text" :class="{ active: isFilterActive }"
+              >筛选</text
+            >
+            <view class="filterbox">
+              <up-image
+                :src="isFilterActive ? filterOn : filter"
+                width="30rpx"
+                height="30rpx"
+              ></up-image>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
 
-			<!-- Video List -->
-			<view class="video-list">
-				<view 
-					class="video-item"
-					v-for="(video, index) in videoList"
-					:key="video.id || video.uuid"
-					@click="playVideo(video)"
-				>
-					<view class="video-thumbnail">
-						<up-image
-                      :src="docUrl + video.imgpath"
-                      class="poster-image"
-                    mode="aspectFill"
-                    :loadingIcon="lazyImg"
-                    :errorIcon="lazyImg"
-                   :lazy-load="true"
-                    width="100%"
-                    height="220rpx"
-                   
-                  >
-					<template #error>
-						<image :src="lazyImg" class="poster-image" mode="aspectFill"></image>
-					</template>
-					<template #loading>
-						<image :src="lazyImg" class="poster-image" mode="aspectFill"></image>
-					</template>
-					</up-image>
-						
-					</view>
-					<view class="video-info">
-						<view class="video-title">{{video.title || video.name}}</view>
-						<view class="video-meta">
-							<text class="author">{{video.public_name}}</text>
-							<view class="stats">
-								<uni-icons type="eye" size="14" color="#999"></uni-icons>
-								<text class="view-count">{{formatNumber(video.readnum)}}</text>
-							</view>
-						</view>
-						
-					</view>
-				</view>
-			</view>
+    <!-- Main Content -->
+    <scroll-view
+      class="scroll-view"
+      scroll-y="true"
+      refresher-enabled="true"
+      :refresher-triggered="refreshing"
+      @refresherrefresh="onRefresh"
+      @scrolltolower="onLoadMore"
+      lower-threshold="100"
+    >
+      <!-- Video List -->
+      <view class="video-list">
+        <view
+          class="video-item"
+          v-for="(video, index) in videoList"
+          :key="video.id || video.uuid"
+          @click="playVideo(video)"
+        >
+          <view class="video-thumbnail">
+            <up-image
+              :src="docUrl + video.imgpath"
+              class="poster-image"
+              mode="aspectFill"
+              :loadingIcon="lazyImg"
+              :errorIcon="lazyImg"
+              :lazy-load="true"
+              width="100%"
+              height="220rpx"
+            >
+              <template #error>
+                <image
+                  :src="lazyImg"
+                  class="poster-image"
+                  mode="aspectFill"
+                ></image>
+              </template>
+              <template #loading>
+                <image
+                  :src="lazyImg"
+                  class="poster-image"
+                  mode="aspectFill"
+                ></image>
+              </template>
+            </up-image>
+          </view>
+          <view class="video-info">
+            <view class="video-title">{{ video.title || video.name }}</view>
+            <view class="video-meta">
+              <text class="author">{{ video.public_name }}</text>
+              <view class="stats">
+                <uni-icons type="eye" size="14" color="#999"></uni-icons>
+                <text class="view-count">{{
+                  formatNumber(video.readnum)
+                }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
 
-			<!-- Loading More -->
-			<uni-load-more 
-				v-if="videoList.length > 0"
-				:status="loadMoreStatus"
-				:content-text="{ 
-					contentdown: '上拉加载更多',
-					contentrefresh: '正在加载...',
-					contentnomore: '没有更多数据了'
-				}"
-			></uni-load-more>
+      <!-- Loading More -->
+      <uni-load-more
+        v-if="videoList.length > 0"
+        :status="loadMoreStatus"
+        :content-text="{
+          contentdown: '上拉加载更多',
+          contentrefresh: '正在加载...',
+          contentnomore: '没有更多数据了',
+        }"
+      ></uni-load-more>
 
-			<!-- Empty State -->
-			<view class="empty-state" v-if="videoList.length === 0 && !loading">
-				<image src="/static/empty-video.png" mode="aspectFit"></image>
-				<text>暂无视频内容</text>
-			</view>
-		</scroll-view>
-		<view class="btnbox" @click="goPatientVideo">
-			<up-image  :src="videoImg" width="44rpx" height="44rpx" ></up-image>
-			 患教视频
-			
-		</view>
-		<!-- 筛选弹窗 -->
-		<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
-			<view class="filter-content" @click.stop>
-				<!-- 筛选标签网格 -->
-				<view class="filter-tags">
-					<view 
-						class="tag-item" 
-						v-for="(tag, index) in filterTags" 
-						:key="index"
-						:class="{ active: tag.selected }"
-						@click="toggleTag(index)"
-					>
-						{{ tag.NAME }}
-					</view>
-				</view>
-				
-				<!-- 底部按钮 -->
-				<view class="filter-buttons">
-					<view class="btn-reset" @click="resetFilter">重置</view>
-					<view class="btn-confirm" @click="confirmFilter">确定</view>
-				</view>
-			</view>
-		</view>
-		
-		
-		<!-- 全部视频弹窗 -->
-		<view class="all-video-popup" v-if="showAllVideoPopup" @click="closeAllVideoPopup">
-			<view class="popup-content" @click.stop>
-				
-				<view class="popup-body">
-					<view class="category-sidebar">
-						<view 
-							class="category-item" 
-							:class="{ active: selectedCategory === category.value }"
-							v-for="category in categoryList" 
-							:key="category.value"
-							@click="selectCategory(category.value)"
-						>
-							<view class="category-label">{{ category.label }}</view>
-							<view class="category-date" v-if="category.value !== '全部' && category.originalDate">
-								{{ formatDate(category.originalDate) }}
-							</view>
-						</view>
-					</view>
-					<view class="content-area">
-						<view class="content-list">
-						
-							
-							<view 
-								class="content-item"
-								 
-								v-for="item in filteredContent" 
-								:key="item.uuid"
-								:class="{active:selectYearContent.uuid==item.uuid}"
-								@click="selectContent(item)"
-							>
-								{{formatName(item.name) }}
-							</view>
-							<view v-if="filteredContent.length === 0" class="empty-content">
-								<text>该分类暂无内容</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+      <!-- Empty State -->
+      <view class="empty-state" v-if="videoList.length === 0 && !loading">
+        <image src="/static/empty-video.png" mode="aspectFit"></image>
+        <text>暂无视频内容</text>
+      </view>
+    </scroll-view>
+    <view class="btnbox" @click="goPatientVideo">
+      <up-image :src="videoImg" width="44rpx" height="44rpx"></up-image>
+      患教视频
+    </view>
+    <!-- 筛选弹窗 -->
+    <view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
+      <view class="filter-content" @click.stop>
+        <!-- 筛选标签网格 -->
+        <view class="filter-tags">
+          <view
+            class="tag-item"
+            v-for="(tag, index) in filterTags"
+            :key="index"
+            :class="{ active: tag.selected }"
+            @click="toggleTag(index)"
+          >
+            {{ tag.NAME }}
+          </view>
+        </view>
+
+        <!-- 底部按钮 -->
+        <view class="filter-buttons">
+          <view class="btn-reset" @click="resetFilter">重置</view>
+          <view class="btn-confirm" @click="confirmFilter">确定</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 全部视频弹窗 -->
+    <view
+      class="all-video-popup"
+      v-if="showAllVideoPopup"
+      @click="closeAllVideoPopup"
+    >
+      <view class="popup-content" @click.stop>
+        <view class="popup-body">
+          <view class="category-sidebar">
+            <view
+              class="category-item"
+              :class="{ active: selectedCategory === category.value }"
+              v-for="category in categoryList"
+              :key="category.value"
+              @click="selectCategory(category.value)"
+            >
+              <view class="category-label">{{ category.label }}</view>
+              <view
+                class="category-date"
+                v-if="category.value !== '全部' && category.originalDate"
+              >
+                {{ formatDate(category.originalDate) }}
+              </view>
+            </view>
+          </view>
+          <view class="content-area">
+            <view class="content-list">
+              <view
+                class="content-item"
+                v-for="item in filteredContent"
+                :key="item.uuid"
+                :class="{ active: selectYearContent.uuid == item.uuid }"
+                @click="selectContent(item)"
+              >
+                {{ formatName(item.name) }}
+              </view>
+              <view v-if="filteredContent.length === 0" class="empty-content">
+                <text>该分类暂无内容</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import { ref, onMounted, computed,reactive } from 'vue';
-	import { onShow } from "@dcloudio/uni-app";
-	import api from '@/api/api.js';
-    import allImg from "@/static/video_all.png"
-	import allOnImg from "@/static/video_select.png"
-	import selectImg from "@/static/all_video.png"
-	import selectOnImg from "@/static/select_video.png"
-	import filter from "@/static/cb_screen_no.png"
-	import filterOn from "@/static/cb_screen_yes.png"
-	import upImg from "@/static/cb_up.png"
-	import downImg from "@/static/cb_down.png"
-	import videoImg from "@/static/patient_video.png"
-	import  docUrl from '@/utils/docUrl';
-	import  navTo from '@/utils/navTo';
-	import searchImg from "@/static/search.png"
-	import lazyImg from "@/static/default_video.png"
-	import lazyVideoImg from "@/static/videoPlaceholder.png";
-	import meetImg from "@/static/videoIcon.png"
-	import formatNumber from '@/utils/formatNumber.js';
-	import navBar from '@/components/navBar/navBar.vue';
-    const isAllActive=ref(false)
-	// 响应式数据
-	const videoList = ref([]);
-	const bannerVideo = ref(null);
-	const activeTab = ref(1); // 默认选中"最新"
-	const loading = ref(false);
-	const refreshing = ref(false);
-	const loadMoreStatus = ref('more'); // more, loading, noMore
-	const currentPage = ref(1);
-	const pageSize = ref(10);
-	const hasMoreData = ref(true);
-	const filteredContent=ref([])
-	const sort =ref(2);
-	const keywords=ref('');
-	const typeUuid=ref('');
-	const typeName=ref('全部视频')
-	// Banner相关数据
-	const bannerList = ref([]);
-	const currentBannerIndex = ref(0);
-	const isFilterActive=ref(false)
-	const showFilter = ref(false);
-	const yearList=ref([]);
-	const selectYearContent=reactive({})
-	const goSearch=()=>{
-		uni.sendNativeEvent('goHomeSearch', {
-			msg: 'goHomeSearch'
-		},ret => {
-			console.log(ret);
-		})
-	}
-	const goMeet=()=>{
-		uni.navigateTo({
-			url: '/pages_app/liveReplay/liveReplay?from=video'
-		});
-	}
-	// 筛选弹窗相关数据
-	const filterTags = ref([
-		{ name: '指南解读', selected: false },
-		{ name: '病例分析', selected: false },
-		{ name: '学术讲座', selected: false },
-		{ name: '手术视频', selected: false },
-		{ name: '研究进展', selected: false },
-		{ name: '肝病治疗', selected: false },
-		{ name: '肝癌诊断', selected: false },
-		{ name: '肝移植', selected: false },
-		{ name: '微创手术', selected: false },
-		{ name: '免疫治疗', selected: false },
-		{ name: '靶向治疗', selected: false },
-		{ name: '化疗方案', selected: false }
-	]);
-	
-	// 全部视频弹窗相关数据
-	const showAllVideoPopup = ref(false);
-	const selectedCategory = ref('全部');
-	const categoryList = ref([
-		{ value: 'all', label: '全部' }
-	]);
-	
-	// 分类内容数据 - 将根据API返回的类型动态生成
-	const contentByCategory = ref({
-		all: []
-	});
-	
-	// 存储API返回的原始类型数据
-	const videoTypesData = ref([]);
-	// 页面加载
-	onMounted(() => {
-		
-	});
-    const formatName=(name)=>{
-		let index=name.lastIndexOf('-');
-		if(index>-1){
-			return name.substring(index+1,name.length);
-		}
-		return name;
-	}
-	onShow(() => {
-		// 调用真实API获取数据
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-		loadBannerData();
-		loadVideoTags();
-		loadVideoTypes();
-		
-		// 延迟加载"全部"分类的视频数据，确保类型数据先加载完成
-		setTimeout(() => {
-			loadCategoryVideos('all');
-		}, 500);
-	});
+import { ref, onMounted, computed, reactive } from "vue";
+import { onShow,onBackPress} from "@dcloudio/uni-app";
+import api from "@/api/api.js";
+import allImg from "@/static/video_all.png";
+import allOnImg from "@/static/video_select.png";
+import selectImg from "@/static/all_video.png";
+import selectOnImg from "@/static/select_video.png";
+import filter from "@/static/cb_screen_no.png";
+import filterOn from "@/static/cb_screen_yes.png";
+import upImg from "@/static/cb_up.png";
+import downImg from "@/static/cb_down.png";
+import videoImg from "@/static/patient_video.png";
+import docUrl from "@/utils/docUrl";
+import navTo from "@/utils/navTo";
+import searchImg from "@/static/search.png";
+import lazyImg from "@/static/default_video.png";
+import lazyVideoImg from "@/static/videoPlaceholder.png";
+import meetImg from "@/static/videoIcon.png";
+import formatNumber from "@/utils/formatNumber.js";
+import navBar from "@/components/navBar/navBar.vue";
+const isAllActive = ref(false);
+// 响应式数据
+const videoList = ref([]);
+const bannerVideo = ref(null);
+const activeTab = ref(1); // 默认选中"最新"
+const loading = ref(false);
+const refreshing = ref(false);
+const loadMoreStatus = ref("more"); // more, loading, noMore
+const currentPage = ref(1);
+const pageSize = ref(10);
+const hasMoreData = ref(true);
+const filteredContent = ref([]);
+const sort = ref(2);
+const keywords = ref("");
+const typeUuid = ref("");
+const typeName = ref("全部视频");
+// Banner相关数据
+const bannerList = ref([]);
+const currentBannerIndex = ref(0);
+const isFilterActive = ref(false);
+const showFilter = ref(false);
+const yearList = ref([]);
+const selectYearContent = reactive({});
+onBackPress(() => {
+  try {
+    uni.sendNativeEvent(
+      "goTabbarPage",
+      {
+        msg: "home",
+      },
+      (ret) => {
+        console.log(ret);
+      }
+    );
+  } catch (e) {
+    console.log(e);
+  }
+  plus.runtime.quit();
+  return true;
+});
+const goSearch = () => {
+  uni.sendNativeEvent(
+    "goHomeSearch",
+    {
+      msg: "goHomeSearch",
+    },
+    (ret) => {
+      console.log(ret);
+    }
+  );
+};
+const goMeet = () => {
+  uni.navigateTo({
+    url: "/pages_app/liveReplay/liveReplay?from=video",
+  });
+};
+// 筛选弹窗相关数据
+const filterTags = ref([
+  { name: "指南解读", selected: false },
+  { name: "病例分析", selected: false },
+  { name: "学术讲座", selected: false },
+  { name: "手术视频", selected: false },
+  { name: "研究进展", selected: false },
+  { name: "肝病治疗", selected: false },
+  { name: "肝癌诊断", selected: false },
+  { name: "肝移植", selected: false },
+  { name: "微创手术", selected: false },
+  { name: "免疫治疗", selected: false },
+  { name: "靶向治疗", selected: false },
+  { name: "化疗方案", selected: false },
+]);
 
-	// 加载轮播数据
-	const loadBannerData = async () => {
-		try {
-			const response = await api.videoRoll({});
-			console.log('轮播API原始响应:', response);
-			 bannerList.value=response.data;
-		
-		} catch (error) {
-			console.error('加载轮播数据失败:', error);
-			// 使用模拟数据作为备用
-			
-		}
-	};
+// 全部视频弹窗相关数据
+const showAllVideoPopup = ref(false);
+const selectedCategory = ref("全部");
+const categoryList = ref([{ value: "all", label: "全部" }]);
 
-	// 加载视频标签
-	const loadVideoTags = async () => {
-		try {
-			const response = await api.videoTagList({
-				type:2
-			});
-			console.log('标签API原始响应:', response);
-			
-			if(response.code==200){
-				filterTags.value=response.data;
-				console.log(22222)
-				console.log(filterTags.value)
-			}
-		} catch (error) {
-			console.error('加载视频标签失败:', error);
-		}
-	};
+// 分类内容数据 - 将根据API返回的类型动态生成
+const contentByCategory = ref({
+  all: [],
+});
 
-	// 加载视频类型
-	const loadVideoTypes = async () => {
-		try {
-			const response = await api.expertVideoTypeList({
-				
-			});
-			console.log('类型API原始响应:', response);
-			if(response.code==200){
-				yearList.value=response.data;
-				let all=[{uuid:'',name:'全部视频'}];
-				filteredContent.value=all.concat((response.data[0]).list);
-				console.log(33)
-				let arr=response.data.map(item=>{
-					return {
-						value:item.name,
-						label:item.name
-					}
-				})
-				categoryList.value=arr
-			}
-			console.log(2222)
-			console.log(categoryList.value)
-		} catch (error) {
-			console.error('加载视频类型失败:', error);
-		}
-	};
+// 存储API返回的原始类型数据
+const videoTypesData = ref([]);
+// 页面加载
+onMounted(() => {});
+const formatName = (name) => {
+  let index = name.lastIndexOf("-");
+  if (index > -1) {
+    return name.substring(index + 1, name.length);
+  }
+  return name;
+};
+onShow(() => {
+  // 调用真实API获取数据
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+  loadBannerData();
+  loadVideoTags();
+  loadVideoTypes();
 
-	// 加载分类视频数据
-	const loadCategoryVideos = async (categoryValue) => {
-		try {
-			console.log('加载分类视频:', categoryValue);
-			
-			let response;
-			if (categoryValue === '全部') {
-				// 加载所有视频
-				response = await api.videoByKeyWordsNew({
-					page: 1,
-					pageSize: 20,
-					keywords: '',
-					sort: 0,
-					typeUuid: '',
-					tags: ''
-				});
-			} else {
-				// 根据日期分类加载对应的视频类型数据
-				// 找到该日期对应的视频类型
-				const typesForDate = videoTypesData.value.filter(type => type.create_date === categoryValue);
-				console.log(`日期 ${categoryValue} 对应的视频类型:`, typesForDate);
-				
-				if (typesForDate.length > 0) {
-					// 获取这些类型的UUID列表
-					const typeUuids = typesForDate.map(type => type.id || type.uuid || type.value).join(',');
-					console.log('类型UUID列表:', typeUuids);
-					
-					// 加载特定类型的视频
-					response = await api.videoByKeyWordsNew({
-						page: 1,
-						pageSize: 20,
-						keywords: '',
-						sort: 0,
-						typeUuid: typeUuids,
-						tags: ''
-					});
-				} else {
-					console.warn(`未找到日期 ${categoryValue} 对应的视频类型`);
-					contentByCategory.value[categoryValue] = [];
-					return;
-				}
-			}
-			
-			console.log('分类视频API响应:', response);
-			
-			// 检查响应结构
-			let videoData = {};
-			if (response && response.data) {
-				if (response.data.code === 200) {
-					videoData = response.data.data || {};
-				} else if (response.code === 200) {
-					videoData = response.data || {};
-				}
-			} else if (response && response.code === 200) {
-				videoData = response.data || {};
-			}
-			
-			console.log('解析后的分类视频数据:', videoData);
-			
-			if (videoData && videoData.list) {
-				const { list } = videoData;
-				// 更新对应分类的内容
-				contentByCategory.value[categoryValue] = list.map(video => ({
-					id: video.id || video.uuid,
-					title: video.title || video.name,
-					name: video.name || video.title
-				}));
-				
-				console.log(`分类 ${categoryValue} 的内容:`, contentByCategory.value[categoryValue]);
-			}
-		} catch (error) {
-			console.error('加载分类视频失败:', error);
-		}
-	};
+  // 延迟加载"全部"分类的视频数据，确保类型数据先加载完成
+  setTimeout(() => {
+    loadCategoryVideos("all");
+  }, 500);
+});
 
-	// 加载视频数据
-	const loadVideoData = async (isRefresh = false) => {
-		if (loading.value && !isRefresh) return;
-		
-		loading.value = true;
-		
-		try {
-			// 调用真实API
-			//const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.id).join(',');
-			console.log('请求参数:', {
-				page: currentPage.value,
-				pageSize: pageSize.value,
-				keywords: keywords.value,
-				sort: sort.value,
-				typeUuid:typeUuid.value,
-				tags: keywords.value
-			});
-			
-			const response = await api.videoByKeyWordsNew({
-				page: currentPage.value,
-				pageSize: pageSize.value,
-				keywords: keywords.value,
-				sort: sort.value,
-				typeUuid:typeUuid.value,
-			});
-			
-			console.log('视频列表API原始响应:', response);
-			
-			// 检查响应结构
-			let videoData = {};
-			if (response && response.data) {
-				if (response.data.code === 200) {
-					videoData = response.data.data || {};
-				} else if (response.code === 200) {
-					videoData = response.data || {};
-				}
-			} else if (response && response.code === 200) {
-				videoData = response.data || {};
-			}
-			
-			console.log('解析后的视频数据:', videoData);
-			
-			if (videoData && videoData.list) {
-				const { list, pageNumber,totalPage } = videoData;
-				console.log('视频列表数据:', list);
-				
-				if (isRefresh) {
-					videoList.value = list || [];
-					currentPage.value = 1;
-				} else {
-					videoList.value = [...videoList.value, ...(list || [])];
-				}
-				
-				//const { list, pageNumber,totalPage } = videoData;
-				hasMoreData.value = totalPage>pageNumber;
-				loadMoreStatus.value = hasMoreData.value ? 'more' : 'noMore';
-			} else {
-				throw new Error(response?.message || '获取数据失败');
-			}
-			
-		} catch (error) {
-			console.error('加载视频失败:', error);
-			
-		} finally {
-			loading.value = false;
-			refreshing.value = false;
-		}
-	};
+// 加载轮播数据
+const loadBannerData = async () => {
+  try {
+    const response = await api.videoRoll({});
+    console.log("轮播API原始响应:", response);
+    bannerList.value = response.data;
+  } catch (error) {
+    console.error("加载轮播数据失败:", error);
+    // 使用模拟数据作为备用
+  }
+};
 
-	// 使用模拟数据加载视频列表
-	const loadMockVideoData = async (isRefresh = false) => {
-		if (loading.value && !isRefresh) return;
-		loading.value = true;
-		try {
-			const mockData = await getMockVideoData(currentPage.value, pageSize.value);
-			if (isRefresh) {
-				videoList.value = mockData.list;
-				currentPage.value = 1;
-			} else {
-				videoList.value = [...videoList.value, ...mockData.list];
-			}
-			hasMoreData.value = mockData.hasMore;
-			loadMoreStatus.value = hasMoreData.value ? 'more' : 'noMore';
-		} finally {
-			loading.value = false;
-			refreshing.value = false;
-		}
-	};
+// 加载视频标签
+const loadVideoTags = async () => {
+  try {
+    const response = await api.videoTagList({
+      type: 2,
+    });
+    console.log("标签API原始响应:", response);
 
-	// 下拉刷新
-	const onRefresh = () => {
-		refreshing.value = true;
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
+    if (response.code == 200) {
+      filterTags.value = response.data;
+      console.log(22222);
+      console.log(filterTags.value);
+    }
+  } catch (error) {
+    console.error("加载视频标签失败:", error);
+  }
+};
 
-	// 上拉加载更多
-	const onLoadMore = () => {
-		if (!hasMoreData.value || loading.value) return;
-		
-		loadMoreStatus.value = 'loading';
-		currentPage.value++;
-		loadVideoData();
-	};
+// 加载视频类型
+const loadVideoTypes = async () => {
+  try {
+    const response = await api.expertVideoTypeList({});
+    console.log("类型API原始响应:", response);
+    if (response.code == 200) {
+      yearList.value = response.data;
+      let all = [{ uuid: "", name: "全部视频" }];
+      filteredContent.value = all.concat(response.data[0].list);
+      console.log(33);
+      let arr = response.data.map((item) => {
+        return {
+          value: item.name,
+          label: item.name,
+        };
+      });
+      categoryList.value = arr;
+    }
+    console.log(2222);
+    console.log(categoryList.value);
+  } catch (error) {
+    console.error("加载视频类型失败:", error);
+  }
+};
 
-	// 切换标签
-	const switchTab = (tabIndex) => {
-		activeTab.value = tabIndex;
-		// 可以根据标签加载不同的数据
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
+// 加载分类视频数据
+const loadCategoryVideos = async (categoryValue) => {
+  try {
+    console.log("加载分类视频:", categoryValue);
 
-	// 播放视频
-	const playVideo = (video) => {
-		const videoId = video.id || video.uuid;
-		
-		navTo({
-			url: `/pages_app/videoDetail/videoDetail?id=${videoId}`
-		});
-	};
+    let response;
+    if (categoryValue === "全部") {
+      // 加载所有视频
+      response = await api.videoByKeyWordsNew({
+        page: 1,
+        pageSize: 20,
+        keywords: "",
+        sort: 0,
+        typeUuid: "",
+        tags: "",
+      });
+    } else {
+      // 根据日期分类加载对应的视频类型数据
+      // 找到该日期对应的视频类型
+      const typesForDate = videoTypesData.value.filter(
+        (type) => type.create_date === categoryValue
+      );
+      console.log(`日期 ${categoryValue} 对应的视频类型:`, typesForDate);
 
-	
+      if (typesForDate.length > 0) {
+        // 获取这些类型的UUID列表
+        const typeUuids = typesForDate
+          .map((type) => type.id || type.uuid || type.value)
+          .join(",");
+        console.log("类型UUID列表:", typeUuids);
 
-	// 搜索
-	// const goSearch = () => {
-	// 	uni.navigateTo({
-	// 		url: '/pages_app/search/search'
-	// 	});
-	// };
+        // 加载特定类型的视频
+        response = await api.videoByKeyWordsNew({
+          page: 1,
+          pageSize: 20,
+          keywords: "",
+          sort: 0,
+          typeUuid: typeUuids,
+          tags: "",
+        });
+      } else {
+        console.warn(`未找到日期 ${categoryValue} 对应的视频类型`);
+        contentByCategory.value[categoryValue] = [];
+        return;
+      }
+    }
 
-	// 跳转到患教视频列表
-	const goPatientVideo = () => {
-		navTo({
-			url: '/pages_app/patientVideo/patientVideo'
-		});
-	};
+    console.log("分类视频API响应:", response);
 
-	// 搜索视频
-	const searchVideos = async (keywords) => {
-		if (!keywords || keywords.trim() === '') {
-			loadVideoData(true);
-			return;
-		}
-		
-		try {
-			console.log('搜索关键词:', keywords.trim());
-			const response = await api.videoByKeyWordsNew({
-				keywords: keywords.trim(),
-				page: 1,
-				pageSize: pageSize.value
-			});
-			
-			console.log('搜索API原始响应:', response);
-			
-			// 检查响应结构
-			let searchData = {};
-			if (response && response.data) {
-				if (response.data.code === 200) {
-					searchData = response.data.data || {};
-				} else if (response.code === 200) {
-					searchData = response.data || {};
-				}
-			} else if (response && response.code === 200) {
-				searchData = response.data || {};
-			}
-			
-			console.log('解析后的搜索数据:', searchData);
-			
-			if (searchData && searchData.list) {
-				const { list,totalPage,pageNumber} = searchData;
-				videoList.value = list || [];
-				hasMoreData.value = totalPage>pageNumber;
-				console.log('hasMoreData:'+hasMoreData.value)
-				loadMoreStatus.value = hasMoreData.value ? 'more' : 'noMore';
-				currentPage.value = 1;
-			}
-		} catch (error) {
-			console.error('搜索视频失败:', error);
-			uni.showToast({
-				title: '搜索失败，请重试',
-				icon: 'none'
-			});
-		}
-	};
+    // 检查响应结构
+    let videoData = {};
+    if (response && response.data) {
+      if (response.data.code === 200) {
+        videoData = response.data.data || {};
+      } else if (response.code === 200) {
+        videoData = response.data || {};
+      }
+    } else if (response && response.code === 200) {
+      videoData = response.data || {};
+    }
 
-	
-	const onSwiperChange = (e) => {
-		currentBannerIndex.value = e.detail.current;
-	};
+    console.log("解析后的分类视频数据:", videoData);
 
-	const playBannerVideo = (banner) => {
-		const videoId = banner.id || banner.uuid;
-		
-		navTo({
-			url: `/pages_app/videoDetail/videoDetail?id=${videoId}`
-		});
-	};
-	
-	// 全部视频弹窗相关方法
-	const openAllVideoPopup = () => {
-		showAllVideoPopup.value = true;
-	};
-	
-	const closeAllVideoPopup = () => {
-		showAllVideoPopup.value = false;
-	};
-	const selectCategory = async (categoryValue) => {
-		selectedCategory.value = categoryValue;
-		console.log(yearList.value)
-		console.log('选择分类:', categoryValue);
-		let all=[{uuid:'',name:'全部视频'}];
-		 for (var i = 0; i < yearList.value.length; i++) {
-			
-		 	 if(categoryValue==yearList.value[i].name){
-				 console.log(yearList.value[i]);
-				 filteredContent.value=categoryValue=='全部'?all.concat(yearList.value[i].list):yearList.value[i].list;
-				 console.log(filteredContent.value)
-				 break;
-			 }
-		 }
-	};
+    if (videoData && videoData.list) {
+      const { list } = videoData;
+      // 更新对应分类的内容
+      contentByCategory.value[categoryValue] = list.map((video) => ({
+        id: video.id || video.uuid,
+        title: video.title || video.name,
+        name: video.name || video.title,
+      }));
 
-	const selectContent = (content) => {
-		// 这里可以根据选中的内容进行相应的操作
-		console.log('选中内容:', content);
-		closeAllVideoPopup();
-		Object.assign(selectYearContent,content);
-		typeUuid.value=content.uuid;
-		typeName.value=content.name;
-		isAllActive.value=true;
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
-	// 筛选弹窗相关方法
-	const showFilterPopup = () => {
-		showFilter.value = true;
-	};
-	
-	const hideFilterPopup = () => {
-		showFilter.value = false;
-	};
-	
-	const toggleTag = (index) => {
-		filterTags.value[index].selected = !filterTags.value[index].selected;
-		isFilterActive.value = filterTags.value.some(tag => tag.selected);
-	};
-	
-	const resetFilter = () => {
-		// 清空所有已选标签
-		filterTags.value.forEach(tag => tag.selected = false);
-		// 关闭筛选激活态
-		isFilterActive.value = false;
-		// 清空关键字
-		keywords.value = '';
-		// 刷新列表数据（可按需保留或移除）
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
-	
-	const confirmFilter = () => {
-		let str='';
-		const selectedTags = filterTags.value.filter(tag => tag.selected);
-		console.log('选中的筛选标签:', selectedTags);
-		for (var i = 0; i < selectedTags.length; i++) {
-			  if(str){
-				str+=","+selectedTags[i].NAME
-			  }else{
-				str=selectedTags[i].NAME 
-			  }
-			
-			
-			
-		}
-		keywords.value=str;
-		console.log('keywords:'+keywords.value)
-		isFilterActive.value=true;
-		hideFilterPopup();
-		// 根据选中的标签重新加载数据
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
+      console.log(
+        `分类 ${categoryValue} 的内容:`,
+        contentByCategory.value[categoryValue]
+      );
+    }
+  } catch (error) {
+    console.error("加载分类视频失败:", error);
+  }
+};
 
-	// 模拟数据 - 实际开发时替换为真实API
-	const getMockVideoData = (page, size) => {
-		return new Promise((resolve) => {
-			setTimeout(() => {
-				const mockList = [];
-				const startIndex = (page - 1) * size;
-				
-				for (let i = 0; i < size; i++) {
-					const index = startIndex + i;
-					mockList.push({
-						id: `video_${index}`,
-						title: index === 0 ? '《2025年版慢加急性肝衰竭指南》解读' : 
-							   index % 4 === 1 ? '自身免疫性肝病专栏｜免疫治疗的双刃剑——1例自…' :
-							   index % 4 === 2 ? '徐医感染：硬化出血发热路，关关难过关关过' :
-							   index % 4 === 3 ? '徐医感染：一场呼吸的迷局' : 
-							   '南京市第二医院疑难肝病病理读片会暨疑难肝病MDT',
-						thumbnail: '/static/video-thumb-' + (index % 4 + 1) + '.png',
-						author: index % 3 === 0 ? '首都医…' : 
-								index % 3 === 1 ? '徐州医…' : '南京市…',
-						viewCount: Math.floor(Math.random() * 2000) + 100,
-						duration: '15:30'
-					});
-				}
-				
-				resolve({
-					list: mockList,
-					hasMore: page <2 // 模拟5页数据
-				});
-			}, 1000);
-		});
-	};
-	// 返回
-	const goBack = () => {
-		uni.navigateBack({
-			fail() {
-				uni.redirectTo({
-					url: '/pages/index/index'
-				});
-			}
-		});
-}
-	const toggleSort = () => {
-		sort.value = sort.value === 1 ? 2 : 1; // 1=最新, 2=最热（与后端约定）
-		currentPage.value = 1;
-		hasMoreData.value = true;
-		loadVideoData(true);
-	};
+// 加载视频数据
+const loadVideoData = async (isRefresh = false) => {
+  if (loading.value && !isRefresh) return;
 
+  loading.value = true;
+
+  try {
+    // 调用真实API
+    //const selectedTags = filterTags.value.filter(tag => tag.selected).map(tag => tag.id).join(',');
+    console.log("请求参数:", {
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      keywords: keywords.value,
+      sort: sort.value,
+      typeUuid: typeUuid.value,
+      tags: keywords.value,
+    });
+
+    const response = await api.videoByKeyWordsNew({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      keywords: keywords.value,
+      sort: sort.value,
+      typeUuid: typeUuid.value,
+    });
+
+    console.log("视频列表API原始响应:", response);
+
+    // 检查响应结构
+    let videoData = {};
+    if (response && response.data) {
+      if (response.data.code === 200) {
+        videoData = response.data.data || {};
+      } else if (response.code === 200) {
+        videoData = response.data || {};
+      }
+    } else if (response && response.code === 200) {
+      videoData = response.data || {};
+    }
+
+    console.log("解析后的视频数据:", videoData);
+
+    if (videoData && videoData.list) {
+      const { list, pageNumber, totalPage } = videoData;
+      console.log("视频列表数据:", list);
+
+      if (isRefresh) {
+        videoList.value = list || [];
+        currentPage.value = 1;
+      } else {
+        videoList.value = [...videoList.value, ...(list || [])];
+      }
+
+      //const { list, pageNumber,totalPage } = videoData;
+      hasMoreData.value = totalPage > pageNumber;
+      loadMoreStatus.value = hasMoreData.value ? "more" : "noMore";
+    } else {
+      throw new Error(response?.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("加载视频失败:", error);
+  } finally {
+    loading.value = false;
+    refreshing.value = false;
+  }
+};
+
+// 使用模拟数据加载视频列表
+const loadMockVideoData = async (isRefresh = false) => {
+  if (loading.value && !isRefresh) return;
+  loading.value = true;
+  try {
+    const mockData = await getMockVideoData(currentPage.value, pageSize.value);
+    if (isRefresh) {
+      videoList.value = mockData.list;
+      currentPage.value = 1;
+    } else {
+      videoList.value = [...videoList.value, ...mockData.list];
+    }
+    hasMoreData.value = mockData.hasMore;
+    loadMoreStatus.value = hasMoreData.value ? "more" : "noMore";
+  } finally {
+    loading.value = false;
+    refreshing.value = false;
+  }
+};
+
+// 下拉刷新
+const onRefresh = () => {
+  refreshing.value = true;
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
+
+// 上拉加载更多
+const onLoadMore = () => {
+  if (!hasMoreData.value || loading.value) return;
+
+  loadMoreStatus.value = "loading";
+  currentPage.value++;
+  loadVideoData();
+};
+
+// 切换标签
+const switchTab = (tabIndex) => {
+  activeTab.value = tabIndex;
+  // 可以根据标签加载不同的数据
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
+
+// 播放视频
+const playVideo = (video) => {
+  const videoId = video.id || video.uuid;
+
+  navTo({
+    url: `/pages_app/videoDetail/videoDetail?id=${videoId}`,
+  });
+};
+
+// 搜索
+// const goSearch = () => {
+// 	uni.navigateTo({
+// 		url: '/pages_app/search/search'
+// 	});
+// };
+
+// 跳转到患教视频列表
+const goPatientVideo = () => {
+  navTo({
+    url: "/pages_app/patientVideo/patientVideo",
+  });
+};
+
+// 搜索视频
+const searchVideos = async (keywords) => {
+  if (!keywords || keywords.trim() === "") {
+    loadVideoData(true);
+    return;
+  }
+
+  try {
+    console.log("搜索关键词:", keywords.trim());
+    const response = await api.videoByKeyWordsNew({
+      keywords: keywords.trim(),
+      page: 1,
+      pageSize: pageSize.value,
+    });
+
+    console.log("搜索API原始响应:", response);
+
+    // 检查响应结构
+    let searchData = {};
+    if (response && response.data) {
+      if (response.data.code === 200) {
+        searchData = response.data.data || {};
+      } else if (response.code === 200) {
+        searchData = response.data || {};
+      }
+    } else if (response && response.code === 200) {
+      searchData = response.data || {};
+    }
+
+    console.log("解析后的搜索数据:", searchData);
+
+    if (searchData && searchData.list) {
+      const { list, totalPage, pageNumber } = searchData;
+      videoList.value = list || [];
+      hasMoreData.value = totalPage > pageNumber;
+      console.log("hasMoreData:" + hasMoreData.value);
+      loadMoreStatus.value = hasMoreData.value ? "more" : "noMore";
+      currentPage.value = 1;
+    }
+  } catch (error) {
+    console.error("搜索视频失败:", error);
+    uni.showToast({
+      title: "搜索失败，请重试",
+      icon: "none",
+    });
+  }
+};
+
+const onSwiperChange = (e) => {
+  currentBannerIndex.value = e.detail.current;
+};
+
+const playBannerVideo = (banner) => {
+  const videoId = banner.id || banner.uuid;
+
+  navTo({
+    url: `/pages_app/videoDetail/videoDetail?id=${videoId}`,
+  });
+};
+
+// 全部视频弹窗相关方法
+const openAllVideoPopup = () => {
+  showAllVideoPopup.value = true;
+};
+
+const closeAllVideoPopup = () => {
+  showAllVideoPopup.value = false;
+};
+const selectCategory = async (categoryValue) => {
+  selectedCategory.value = categoryValue;
+  console.log(yearList.value);
+  console.log("选择分类:", categoryValue);
+  let all = [{ uuid: "", name: "全部视频" }];
+  for (var i = 0; i < yearList.value.length; i++) {
+    if (categoryValue == yearList.value[i].name) {
+      console.log(yearList.value[i]);
+      filteredContent.value =
+        categoryValue == "全部"
+          ? all.concat(yearList.value[i].list)
+          : yearList.value[i].list;
+      console.log(filteredContent.value);
+      break;
+    }
+  }
+};
+
+const selectContent = (content) => {
+  // 这里可以根据选中的内容进行相应的操作
+  console.log("选中内容:", content);
+  closeAllVideoPopup();
+  Object.assign(selectYearContent, content);
+  typeUuid.value = content.uuid;
+  typeName.value = content.name;
+  isAllActive.value = true;
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
+// 筛选弹窗相关方法
+const showFilterPopup = () => {
+  showFilter.value = true;
+};
+
+const hideFilterPopup = () => {
+  showFilter.value = false;
+};
+
+const toggleTag = (index) => {
+  filterTags.value[index].selected = !filterTags.value[index].selected;
+  isFilterActive.value = filterTags.value.some((tag) => tag.selected);
+};
+
+const resetFilter = () => {
+  // 清空所有已选标签
+  filterTags.value.forEach((tag) => (tag.selected = false));
+  // 关闭筛选激活态
+  isFilterActive.value = false;
+  // 清空关键字
+  keywords.value = "";
+  // 刷新列表数据（可按需保留或移除）
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
+
+const confirmFilter = () => {
+  let str = "";
+  const selectedTags = filterTags.value.filter((tag) => tag.selected);
+  console.log("选中的筛选标签:", selectedTags);
+  for (var i = 0; i < selectedTags.length; i++) {
+    if (str) {
+      str += "," + selectedTags[i].NAME;
+    } else {
+      str = selectedTags[i].NAME;
+    }
+  }
+  keywords.value = str;
+  console.log("keywords:" + keywords.value);
+  isFilterActive.value = true;
+  hideFilterPopup();
+  // 根据选中的标签重新加载数据
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
+
+// 模拟数据 - 实际开发时替换为真实API
+const getMockVideoData = (page, size) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      const mockList = [];
+      const startIndex = (page - 1) * size;
+
+      for (let i = 0; i < size; i++) {
+        const index = startIndex + i;
+        mockList.push({
+          id: `video_${index}`,
+          title:
+            index === 0
+              ? "《2025年版慢加急性肝衰竭指南》解读"
+              : index % 4 === 1
+              ? "自身免疫性肝病专栏｜免疫治疗的双刃剑——1例自…"
+              : index % 4 === 2
+              ? "徐医感染：硬化出血发热路，关关难过关关过"
+              : index % 4 === 3
+              ? "徐医感染：一场呼吸的迷局"
+              : "南京市第二医院疑难肝病病理读片会暨疑难肝病MDT",
+          thumbnail: "/static/video-thumb-" + ((index % 4) + 1) + ".png",
+          author:
+            index % 3 === 0
+              ? "首都医…"
+              : index % 3 === 1
+              ? "徐州医…"
+              : "南京市…",
+          viewCount: Math.floor(Math.random() * 2000) + 100,
+          duration: "15:30",
+        });
+      }
+
+      resolve({
+        list: mockList,
+        hasMore: page < 2, // 模拟5页数据
+      });
+    }, 1000);
+  });
+};
+// 返回
+const goBack = () => {
+  uni.navigateBack({
+    fail() {
+      uni.redirectTo({
+        url: "/pages/index/index",
+      });
+    },
+  });
+};
+const toggleSort = () => {
+  sort.value = sort.value === 1 ? 2 : 1; // 1=最新, 2=最热（与后端约定）
+  currentPage.value = 1;
+  hasMoreData.value = true;
+  loadVideoData(true);
+};
 </script>
 
 <style scoped lang="scss">
-	$primary-color: #ff6b6b;
-	$theme-color: #8B2316;
-	$white: #fff;
-	$gray-bg: #f5f5f5;
-	$gray-light: #eee;
-	$gray-medium: #999;
-	$gray-dark: #666;
-	$text-color: #333;
-	
-	// 尺寸变量
-	$border-radius: 8px;
-	$border-radius-small: 6px;
-	$padding: 15px;
-	$padding-small: 10px;
-	.img-icon{
-		width: 42rpx;
-		height: 42rpx;
-	}
-	.nav-actions{
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 20rpx;
-	}
+$primary-color: #ff6b6b;
+$theme-color: #8b2316;
+$white: #fff;
+$gray-bg: #f5f5f5;
+$gray-light: #eee;
+$gray-medium: #999;
+$gray-dark: #666;
+$text-color: #333;
+
+// 尺寸变量
+$border-radius: 8px;
+$border-radius-small: 6px;
+$padding: 15px;
+$padding-small: 10px;
+.img-icon {
+  width: 42rpx;
+  height: 42rpx;
+}
+.nav-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20rpx;
+}
 .video-page {
-	background-color: #f5f5f5;
-	height: 100vh;
-	display: flex;
-	overflow: hidden;
-	flex-direction: column;
-	.btnbox{
-		width:100%;
-		position: fixed;
-		bottom:0;
-		height: 100rpx;
-		background-color: #00cbc0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		color:#fff;
-		font-size: 30rpx;
-	}
+  background-color: #f5f5f5;
+  height: 100vh;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  .btnbox {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    height: 100rpx;
+    background-color: #00cbc0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 30rpx;
+  }
 }
 
 /* Header Styles */
 .header {
-	background-color: #fff;
-	height: 88rpx;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 30rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
-	position: relative;
-	z-index: 100;
+  background-color: #fff;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 30rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 100;
 }
 
-.header-left, .header-right {
-	display: flex;
-	align-items: center;
+.header-left,
+.header-right {
+  display: flex;
+  align-items: center;
 }
 
 .header-title {
-	font-size: 36rpx;
-	font-weight: 600;
-	color: #8B4513;
+  font-size: 36rpx;
+  font-weight: 600;
+  color: #8b4513;
 }
 
 /* Scroll View */
 .scroll-view {
-	position: fixed;
-	bottom:0rpx;
-	height: calc(100vh - var(--status-bar-height) - 54px - 430rpx); /* 固定高度，减去固定的banner和Filter Tabs空间 */
-	background-color: #f5f5f5;
-	margin-bottom: 200rpx;
-	top: calc(var(--status-bar-height) + 54px + 400rpx); /* 为固定的banner和Filter Tabs留出空间 */
+  position: fixed;
+  bottom: 0rpx;
+  height: calc(
+    100vh - var(--status-bar-height) - 54px - 430rpx
+  ); /* 固定高度，减去固定的banner和Filter Tabs空间 */
+  background-color: #f5f5f5;
+  margin-bottom: 200rpx;
+  top: calc(
+    var(--status-bar-height) + 54px + 400rpx
+  ); /* 为固定的banner和Filter Tabs留出空间 */
 }
 
 /* Banner Styles */
 .banner-section {
-	position: relative;
-	height: 400rpx;
-	margin-bottom: 20rpx;
+  position: relative;
+  height: 400rpx;
+  margin-bottom: 20rpx;
 }
-.bar{
-	width:2rpx;
-	margin:0 26rpx 0 30rpx;
-	height: 32rpx;
-	background-color: #666;
+.bar {
+  width: 2rpx;
+  margin: 0 26rpx 0 30rpx;
+  height: 32rpx;
+  background-color: #666;
 }
 .banner-image {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .banner-overlay {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background: linear-gradient(transparent, rgba(0,0,0,0.7));
-	padding: 60rpx 30rpx 30rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  padding: 60rpx 30rpx 30rpx;
 }
 
 .banner-title {
-	color: #fff;
-	font-size: 32rpx;
-	font-weight: 600;
-	line-height: 1.4;
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 /* Filter Tabs */
 .filter-tabs {
-	background-color: #fff;
-	display: flex;
-	justify-content: space-between;
-	padding: 30rpx 30rpx;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 30rpx 30rpx;
 }
 
 .tab-item {
-	display: flex;
-	align-items: center;
-	
-	padding: 10rpx 0;
+  display: flex;
+  align-items: center;
+
+  padding: 10rpx 0;
 }
 
-.tab-item:last-child{
-	margin-right: 0;
+.tab-item:last-child {
+  margin-right: 0;
 }
-.right{
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
+.right {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .tab-item.active .tab-text {
-	color: #E74C3C;
-	font-weight: 600;
+  color: #e74c3c;
+  font-weight: 600;
 }
 
 .tab-text {
-	margin: 0 8rpx;
-	font-size: 28rpx;
-	color: #666;
+  margin: 0 8rpx;
+  font-size: 28rpx;
+  color: #666;
 }
-.tab-item:first-child .tab-text{
-	max-width:295rpx;
-	display: inline-block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+.tab-item:first-child .tab-text {
+  max-width: 295rpx;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .tab-item .tab-text.active {
-	color: #8B2316;
-	
+  color: #8b2316;
 }
 /* Fixed Banner Container */
 .banner-container {
-	position: fixed;
-	top: calc(var(--status-bar-height) + 44px); /* uni-nav-bar height */
-	left: 0;
-	right: 0;
-	z-index: 50;
-	background-color: #fff;
-	.swipemask{
-		width:100%;
-		z-index:3;
-		box-sizing:border-box;
-		position: absolute;
-		bottom:0;
-		padding:0 20rpx;
-		height: 80rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background-color: rgba(0,0,0,0.7);
-		.dotbox{
-			display:flex;
-			align-items: center;
-			
-			.circle{
-				margin:0 4rpx;
-				width:16rpx;
-				height:16rpx;
-				background-color: #eee;
-				border-radius: 50%;
-			}
-			.circle.active{
-				background-color: #8B2316;
-			}
-		}
-	}
+  position: fixed;
+  top: calc(var(--status-bar-height) + 44px); /* uni-nav-bar height */
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background-color: #fff;
+  .swipemask {
+    width: 100%;
+    z-index: 3;
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    padding: 0 20rpx;
+    height: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: rgba(0, 0, 0, 0.7);
+    .dotbox {
+      display: flex;
+      align-items: center;
+
+      .circle {
+        margin: 0 4rpx;
+        width: 16rpx;
+        height: 16rpx;
+        background-color: #eee;
+        border-radius: 50%;
+      }
+      .circle.active {
+        background-color: #8b2316;
+      }
+    }
+  }
 }
 
 /* Fixed Filter Tabs Container */
 .filter-tabs-container {
-	position: fixed;
-	top: calc(var(--status-bar-height) + 44px + 400rpx); /* banner-container top + banner height */
-	left: 0;
-	right: 0;
-	z-index: 40;
-	background-color: #fff;
-	border-bottom: 1rpx solid #f0f0f0;
+  position: fixed;
+  top: calc(
+    var(--status-bar-height) + 44px + 400rpx
+  ); /* banner-container top + banner height */
+  left: 0;
+  right: 0;
+  z-index: 40;
+  background-color: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
 .banner-swiper {
-	height: 400rpx;
+  height: 400rpx;
 }
 
 .banner-item {
-	position: relative;
-	width: 100%;
-	height: 400rpx;
+  position: relative;
+  width: 100%;
+  height: 400rpx;
 }
 
 .banner-image {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .banner-content {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	padding: 40rpx 30rpx;
-	background: linear-gradient(transparent, rgba(0,0,0,0.7));
-	display: flex;
-	align-items: flex-end;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 40rpx 30rpx;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+  display: flex;
+  align-items: flex-end;
 }
 
 .doctor-avatar {
-	width: 80rpx;
-	height: 80rpx;
-	border-radius: 50%;
-	margin-right: 20rpx;
-	overflow: hidden;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+  overflow: hidden;
 }
 
 .doctor-avatar image {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .banner-info {
-	flex: 1;
+  flex: 1;
 }
 
 .banner-title {
-	font-size: 32rpx;
-	font-weight: 600;
-	color: #fff;
-	margin-bottom: 8rpx;
-	line-height: 1.3;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 8rpx;
+  line-height: 1.3;
 }
 
 .banner-subtitle {
-	font-size: 24rpx;
-	color: rgba(255,255,255,0.8);
-	white-space: nowrap; /* 单行显示 */
-	overflow: hidden; /* 隐藏溢出 */
-	text-overflow: ellipsis; /* 超出显示省略号 */
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.8);
+  white-space: nowrap; /* 单行显示 */
+  overflow: hidden; /* 隐藏溢出 */
+  text-overflow: ellipsis; /* 超出显示省略号 */
 }
 
 /* Video List */
 .video-list {
-	padding: 0 20rpx;
-	margin-top: 100rpx; /* 为固定的Filter Tabs留出空间 */
-	display: flex;
-	flex-wrap: wrap;
-	/* 卡片间距 */
+  padding: 0 20rpx;
+  margin-top: 100rpx; /* 为固定的Filter Tabs留出空间 */
+  display: flex;
+  flex-wrap: wrap;
+  /* 卡片间距 */
 }
-.video-list .video-item:nth-child(2n+2) {
-	margin-left: 16rpx;
+.video-list .video-item:nth-child(2n + 2) {
+  margin-left: 16rpx;
 }
 
 .video-item {
-	background-color: #fff;
-	border-radius: 16rpx;
-	margin-bottom: 0;
-	margin-top: 16rpx;
-	overflow: hidden;
-	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
-	width: calc(50% - 8rpx); /* 两列布局，减半gap */
-	min-width: 300rpx; /* 确保最小宽度 */
-	flex-shrink: 0; /* 防止收缩 */
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 0;
+  margin-top: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  width: calc(50% - 8rpx); /* 两列布局，减半gap */
+  min-width: 300rpx; /* 确保最小宽度 */
+  flex-shrink: 0; /* 防止收缩 */
 }
 
 .video-thumbnail {
-	position: relative;
-	height: 200rpx;
+  position: relative;
+  height: 200rpx;
 }
 
 .video-thumbnail image {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
-
-
 .video-duration {
-	margin-top: 8rpx;
+  margin-top: 8rpx;
 }
 
 .video-duration text {
-	font-size: 22rpx;
-	color: #999;
+  font-size: 22rpx;
+  color: #999;
 }
 
 .video-info {
-	padding: 24rpx;
+  padding: 24rpx;
 }
 
 .video-title {
-	font-size: 28rpx;
-	font-weight: 400;
-	color: #333;
-	line-height: 1.4;
-	margin-bottom: 16rpx;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
-	line-clamp: 2;
-	overflow: hidden;
-	height: 2.8em; /* 固定2行高度：1.4 * 2 = 2.8em */
+  font-size: 28rpx;
+  font-weight: 400;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 16rpx;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  height: 2.8em; /* 固定2行高度：1.4 * 2 = 2.8em */
 }
 
 .video-meta {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .author {
-	font-size: 24rpx;
-	color: #999;
-	white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-	  margin-right: 20rpx;
+  font-size: 24rpx;
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 20rpx;
 }
 
 .stats {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .view-count {
-	font-size: 24rpx;
-	color: #999;
-	margin-left: 8rpx;
+  font-size: 24rpx;
+  color: #999;
+  margin-left: 8rpx;
 }
 
 /* Empty State */
 .empty-state {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 100rpx 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
 }
 
 .empty-state image {
-	width: 200rpx;
-	height: 200rpx;
-	margin-bottom: 30rpx;
-	opacity: 0.5;
+  width: 200rpx;
+  height: 200rpx;
+  margin-bottom: 30rpx;
+  opacity: 0.5;
 }
 
 .empty-state text {
-	color: #999;
-	font-size: 28rpx;
+  color: #999;
+  font-size: 28rpx;
 }
-.newbox{
-	margin-top: -12rpx;
+.newbox {
+  margin-top: -12rpx;
 }
 
 /* 全部视频弹窗样式 */
 .all-video-popup {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	
-	z-index: 1000;
-	display: flex;
-	
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: 1000;
+  display: flex;
 }
 
 .popup-content {
-	width: 100%;
-	margin-top: calc(var(--status-bar-height) + 44px + 400rpx + 117rpx);
-	height: calc(100vh - var(--status-bar-height) - 44px - 400rpx - 117rpx);
-	background-color: #fff;
-	
-	overflow: scroll;
-	
+  width: 100%;
+  margin-top: calc(var(--status-bar-height) + 44px + 400rpx + 117rpx);
+  height: calc(100vh - var(--status-bar-height) - 44px - 400rpx - 117rpx);
+  background-color: #fff;
+
+  overflow: scroll;
 }
 
 .popup-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 30rpx;
-	border-bottom: 1rpx solid #f0f0f0;
-	background-color: #f8f8f8;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  background-color: #f8f8f8;
 }
 
 .header-title {
-	font-size: 32rpx;
-	font-weight: 600;
-	color: #333;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
 }
 
 .header-right {
-	padding: 10rpx;
-	cursor: pointer;
+  padding: 10rpx;
+  cursor: pointer;
 }
 
 .popup-body {
-	display: flex;
-	height: 100%;
+  display: flex;
+  height: 100%;
 }
 
 .category-sidebar {
-	width: 200rpx;
-	background-color: #f8f8f8;
-	border-right: 1rpx solid #f0f0f0;
-	overflow-y: auto;
+  width: 200rpx;
+  background-color: #f8f8f8;
+  border-right: 1rpx solid #f0f0f0;
+  overflow-y: auto;
 }
 
 .category-item {
-	padding: 30rpx 20rpx;
-	font-size: 28rpx;
-	color: #666;
-	border-bottom: 1rpx solid #f0f0f0;
-	cursor: pointer;
-	transition: all 0.3s ease;
+  padding: 30rpx 20rpx;
+  font-size: 28rpx;
+  color: #666;
+  border-bottom: 1rpx solid #f0f0f0;
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .category-item:hover {
-	background-color: #e8f4fd;
+  background-color: #e8f4fd;
 }
 
 .category-item.active {
-	background-color: #fff;
-	color: #8B2316;
-	
+  background-color: #fff;
+  color: #8b2316;
 }
 
 .category-label {
-	font-size: 28rpx;
-	font-weight: 500;
+  font-size: 28rpx;
+  font-weight: 500;
 }
 
 .category-date {
-	font-size: 22rpx;
-	color: #999;
-	margin-top: 4rpx;
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 4rpx;
 }
 
 .content-area {
-	flex: 1;
-	padding: 20rpx;
-	overflow-y: auto;
+  flex: 1;
+  padding: 20rpx;
+  overflow-y: auto;
 }
 
 .content-list {
-	display: flex;
-	flex-direction: column;
-	gap: 20rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
 }
 
 .content-item {
-	padding: 20rpx;
-	background-color: #f8f8f8;
-	border-radius: 10rpx;
-	font-size: 26rpx;
-	color: #333;
-	cursor: pointer;
-	transition: all 0.3s ease;
-	border: 2rpx solid transparent;
+  padding: 20rpx;
+  background-color: #f8f8f8;
+  border-radius: 10rpx;
+  font-size: 26rpx;
+  color: #333;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2rpx solid transparent;
 }
 
-
-
 .content-item.active {
-	
-	color: #8B2316;
+  color: #8b2316;
 }
 
 .empty-content {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 200rpx;
-	color: #999;
-	font-size: 28rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200rpx;
+  color: #999;
+  font-size: 28rpx;
 }
 // 筛选弹窗样式
 .filter-popup {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	// background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	justify-content: center;
-	
-	z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
 
-	.filter-content {
-		margin-top:calc(var(--status-bar-height) + 44px + 400rpx + 117rpx);
-	      overflow-y:scroll;
-		background-color: $white;
-		// border-radius: 20rpx 20rpx 0 0;
-		padding: 20rpx 30rpx 60rpx;
-		width: 100%;
-		max-height: 80vh;
-		
-		.filter-tags {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 20rpx;
-			margin-bottom: 60rpx;
-			max-height: 65vh;
-			overflow-y: auto;
-			
-			.tag-item {
-				background-color: #f8f8f8;
-				color: $gray-dark;
-				padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
-				border-radius: 30rpx;
-				font-size: 26rpx;
-				border: 2rpx solid #efefef;
-				transition: all 0.3s ease;
-				width: 152rpx; /* 固定宽度 */
-				text-align: center; /* 文本居中 */
-				
-				&.active {
-					background-color: #fff;
-					color: $theme-color;
-					border-color: $theme-color;
-				}
-			}
-		}
-		
-		.filter-buttons {
-			display: flex;
-			gap: 20rpx;
-			position: fixed;
-			bottom: 30rpx;
-			left: 30rpx;
-			right: 30rpx;
-			background-color: #fff; /* 背景色为白色 */
-			
-			.btn-reset,
-			.btn-confirm {
-				flex: 1;
-				height: 70rpx;
-				border-radius: 14rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 32rpx;
-				font-weight: 500;
-			}
-			
-			.btn-reset {
-				background-color: $white;
-				color: $theme-color;
-				border: 2rpx solid $theme-color;
-			}
-			
-			.btn-confirm {
-				border: 2rpx solid $theme-color;
-				background-color: $theme-color;
-				color: $white;
-			}
-		}
-	}
+  z-index: 9999;
+
+  .filter-content {
+    margin-top: calc(var(--status-bar-height) + 44px + 400rpx + 117rpx);
+    overflow-y: scroll;
+    background-color: $white;
+    // border-radius: 20rpx 20rpx 0 0;
+    padding: 20rpx 30rpx 60rpx;
+    width: 100%;
+    max-height: 80vh;
+
+    .filter-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20rpx;
+      margin-bottom: 60rpx;
+      max-height: 65vh;
+      overflow-y: auto;
+
+      .tag-item {
+        background-color: #f8f8f8;
+        color: $gray-dark;
+        padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
+        border-radius: 30rpx;
+        font-size: 26rpx;
+        border: 2rpx solid #efefef;
+        transition: all 0.3s ease;
+        width: 152rpx; /* 固定宽度 */
+        text-align: center; /* 文本居中 */
+
+        &.active {
+          background-color: #fff;
+          color: $theme-color;
+          border-color: $theme-color;
+        }
+      }
+    }
+
+    .filter-buttons {
+      display: flex;
+      gap: 20rpx;
+      position: fixed;
+      bottom: 30rpx;
+      left: 30rpx;
+      right: 30rpx;
+      background-color: #fff; /* 背景色为白色 */
+
+      .btn-reset,
+      .btn-confirm {
+        flex: 1;
+        height: 70rpx;
+        border-radius: 14rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 32rpx;
+        font-weight: 500;
+      }
+
+      .btn-reset {
+        background-color: $white;
+        color: $theme-color;
+        border: 2rpx solid $theme-color;
+      }
+
+      .btn-confirm {
+        border: 2rpx solid $theme-color;
+        background-color: $theme-color;
+        color: $white;
+      }
+    }
+  }
 }
 </style>
diff --git a/pages_app/videoDetail/videoDetail.vue b/pages_app/videoDetail/videoDetail.vue
index f6dba56..256ea9e 100644
--- a/pages_app/videoDetail/videoDetail.vue
+++ b/pages_app/videoDetail/videoDetail.vue
@@ -40,11 +40,13 @@
     class="player-wrapper"
     :src="videoSrc"
     :videoHeight="220"
+    :videoWidth="videoWidth"
     :seekTime="0"
     @fullscreenchange="onFullscreenChange"
   />
   <!-- 标签切换 -->
-  <cover-view class="tabs" v-if="from != 'download'" :style="{ opacity: isFullScreen ? 0: 1 }">
+  
+  <cover-view class="tabs" v-if="from != 'download'" :style="{ opacity:isFullScreen?0:1, width: videoWidth + 'px' }" >
     <cover-view
       class="tab"
       :class="{ active: activeTab === 'info' }"
@@ -958,7 +960,6 @@ $theme-color: #8b2316;
   position: relative;
   top: calc(var(--status-bar-height) + 44px);
   z-index: 0;
-
   overflow: hidden;
 }
 .share-img {
@@ -1034,7 +1035,7 @@ $theme-color: #8b2316;
 }
 .intro {
   // background: #fff;
-  padding: 30rpx 28rpx 100rpx;
+  padding: 40rpx 28rpx 100rpx;
   // margin-top: calc(var(--status-bar-height) + 44px + 220px + 88rpx);
   // height: calc(100vh - var(--status-bar-height) - 44px - 220px - 88rpx);
   // overflow-y: scroll;
@@ -1056,9 +1057,7 @@ $theme-color: #8b2316;
     .video-author {
       font-size: 26rpx;
       color: #666;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      
     }
   }
 
diff --git a/pages_app/zhinan/zhinan.vue b/pages_app/zhinan/zhinan.vue
index da467b3..8493906 100644
--- a/pages_app/zhinan/zhinan.vue
+++ b/pages_app/zhinan/zhinan.vue
@@ -1,5 +1,5 @@
 <template>
-	<!-- <uni-nav-bar
+  <!-- <uni-nav-bar
 		left-icon="left" 
 		title="诊疗指南" 
 		@clickLeft="goBack" 
@@ -9,538 +9,588 @@
 		:border="false" 
 		backgroundColor="#eeeeee"
 	></uni-nav-bar> -->
-	<navBar title="诊疗指南"/>
-	<view class="zhinan-page" v-if="tab=='zhinan'">
-		<!-- 导航栏 -->
-		
-		
-		<!-- 固定搜索栏 -->
-		<view class="search-container-fixed filter-bar">
-			<view class="search-box" @click="goSearch">
-				<uni-icons type="search" size="16" color="#999"></uni-icons>
-				<text class="search-text">搜索</text>
-			</view>
-			
-			<view class="divider"></view>
-			<view class="filter-item" @click="showFilterPopup">
-				<text>筛选</text>
-				<up-image  :src="isFilterActive ? filterOn : filter" width="30rpx" height="30rpx" ></up-image>
-			</view>
-		</view>
-		
-		<!-- 指南分类网格 -->
-		<view class="guidelines-grid">
-			<view 
-				class="guideline-item" 
-				v-for="(item, index) in guidelineCategories" 
-				:key="index"
-				@click="enterCategory(item)"
-			>
-				<view class="item-image" >
-					<image :src="docUrl+item.imgs" mode="widthFix" class="category-icon"></image>
-				</view>
-				<view class="item-content">
-					<text class="category-title">{{ item.name }}</text>
-					<text class="category-count">(共{{ item.total }}份)</text>
-				</view>
-			</view>
-		</view>
-		 <view class="total">
-			 <up-image  :src="star1" width="85rpx" height="9rpx" ></up-image>
-		     <view class="count"> {{total}}份文献</view>
-		  <up-image  :src="star2" width="85rpx" height="9rpx" ></up-image>
-		 </view>
-	
-	</view>
-	<view class="qikan-page" v-else-if="tab=='qikan'">
-		<!-- 导航头部 -->
-		
-		
-		<!-- 主要内容区域 -->
-		<view class="main-content">
-			<!-- 标签切换区域 -->
-			<view class="tab-section">
-				<view class="tab-container">
-					<view 
-						class="tab-item" 
-						:class="{ active: activeTab === 'daichawenxian' }"
-						@click="switchTabQikan('daichawenxian')"
-					>
-						<text class="tab-text">代查文献</text>
-						<view class="tab-underline" >
-							<up-image  :src="activeImg" width="48rpx" height="18rpx" v-if="activeTab === 'daichawenxian'"></up-image>
-						</view>
-					</view>
-					<view 
-						class="tab-item" 
-						:class="{ active: activeTab === 'yingwenwenxian' }"
-						@click="switchTabQikan('yingwenwenxian')"
-					>
-						<text class="tab-text">英文文献</text>
-						<view class="tab-underline">
-							<up-image  :src="activeImg" width="48rpx" height="18rpx"  v-if="activeTab === 'yingwenwenxian'"></up-image>
-						</view>
-					</view>
-				</view>
-			</view>
-			
-			<!-- 代查文献内容 -->
-			<view class="content-section" v-if="activeTab === 'daichawenxian'">
-				<!-- 顶部图标和说明 -->
-				
-				 <up-image  :src="paperImg" width="100%" ></up-image>
-				<!-- 表单区域 -->
-				<view class="form-section">
-					<!-- 接收邮箱 -->
-					<view class="form-group formemail">
-						<view class="form-label">
-							<text>接收邮箱</text>
-							<text class="required">*</text>
-						</view>
-						<view class="input-container">
-							<input 
-								class="form-input"
-								type="text"
-								placeholder="请输入文献接收邮箱"
-								v-model="formData.email"
-							/>
-						</view>
-					</view>
-					<!-- 文献单元列表 -->
-					<view 
-						class="from-cell literature-item" 
-						v-for="(literature, index) in literatureList" 
-						:key="literature.id"
-					>
-						<!-- 文献类型标签 -->
-						<view class="form-group wenxian">
-							<view class="tag-container">
-								<view class="tag-item active">文献{{ index + 1 }}</view>
-							</view>
-						</view>
-						
-						<view class="formbox">
-							<!-- 文献名称 -->
-							<view class="form-group">
-								<view class="form-label">
-									<text>文献名称</text>
-									<text class="required">*</text>
-								</view>
-								<view class="input-container">
-									<textarea 
-										class="form-textarea"
-										type="text"
-										placeholder="不支持关键字/广泛查询"
-										v-model="literature.literatureName"
-									/>
-								</view>
-							</view>
-							
-							<!-- 作者 -->
-							<view class="form-group">
-								<view class="form-label">
-									<text>作者</text>
-								</view>
-								<view class="input-container">
-									<input 
-										class="form-input"
-										type="text"
-										placeholder="请输入作者姓名"
-										v-model="literature.author"
-									/>
-								</view>
-							</view>
-							
-							<!-- 期刊名称 -->
-							<view class="form-group">
-								<view class="form-label">
-									<text>期刊名称</text>
-								</view>
-								<view class="input-container">
-									<input 
-										class="form-input"
-										type="text"
-										placeholder="请输入期刊名称"
-										v-model="literature.journalName"
-									/>
-								</view>
-							</view>
-						</view>
-						
-						<!-- 删除按钮 -->
-						<view class="delbox" v-if="literatureList.length > 1" @click="removeLiterature(index)">
-							<up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
-						</view>
-						
-						<!-- 文献分隔线 -->
-						<view class="literature-divider" v-if="index < literatureList.length - 1"></view>
-					</view>
-					<!-- 添加代查文献按钮 -->
-					<view class="add-literature-section" v-if="literatureList.length < 5">
-						<view class="add-button" @click="addLiterature">
-							<up-icon name="plus" size="18" color="#4A90E2"></up-icon>
-							<text class="add-text">添加代查文献</text>
-						</view>
-						<view class="limit-tip">
-							<view class="imgbox">
-								<up-image :src="countImg" width="186rpx" height="74rpx"></up-image>
-							</view>
-							<view class="count">还可添加{{ 5 - literatureList.length }}篇</view>
-						</view>
-					</view>
-				</view>
-				
-				<!-- 常见问题 -->
-				<view class="faq-section">
-					<up-image  :src="questionImg" width="100%" mode="widtFix" height="540rpx"></up-image>
-					
-				</view>
-				<view class="tips">
-					<view class="title">注意</view>
-					<view class="row">每次至多提交5篇文献代查</view>
-					<view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
-					<view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
-				</view>
-				<view class="btnbox">
-					<up-image  :src="submitImg" width="100%" height="160rpx" mode="widtFix"></up-image>
-					
-				</view>
-			</view>
-			
-			<!-- 英文文献内容（暂时显示占位内容） -->
-			<view class="content-section" v-if="activeTab === 'yingwenwenxian'">
-				<view class="placeholder-content">
-					<uni-icons type="info" size="60" color="#999"></uni-icons>
-					<text class="placeholder-text">英文文献功能正在开发中...</text>
-				</view>
-			</view>
-		</view>
-		
-		
-	</view>
-	
-	
-	
-	<!-- 筛选弹窗 -->
-	<view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
-		<view class="filter-content" @click.stop>
-			<!-- 筛选标签网格 -->
-			<view class="filter-tags">
-				<view 
-					class="tag-item" 
-					v-for="(tag, index) in filterTags" 
-					:key="index"
-					:class="{ active: tag.selected }"
-					@click="toggleTag(index)"
-				>
-					{{ tag.NAME }}
-			</view>
-			</view>
-			
-			<!-- 底部按钮 -->
-			<view class="filter-buttons">
-				<view class="btn-reset" @click="resetFilter">重置</view>
-				<view class="btn-confirm" @click="confirmFilter">确定</view>
-			</view>
-		</view>
-	</view>
+  <navBar title="诊疗指南" />
+  <view class="zhinan-page" v-if="tab == 'zhinan'">
+    <!-- 导航栏 -->
+
+    <!-- 固定搜索栏 -->
+    <view class="search-container-fixed filter-bar">
+      <view class="search-box" @click="goSearch">
+        <uni-icons type="search" size="16" color="#999"></uni-icons>
+        <text class="search-text">搜索</text>
+      </view>
+
+      <view class="divider"></view>
+      <view class="filter-item" @click="showFilterPopup">
+        <text>筛选</text>
+        <up-image
+          :src="isFilterActive ? filterOn : filter"
+          width="30rpx"
+          height="30rpx"
+        ></up-image>
+      </view>
+    </view>
+
+    <!-- 指南分类网格 -->
+    <view class="guidelines-grid">
+      <view
+        class="guideline-item"
+        v-for="(item, index) in guidelineCategories"
+        :key="index"
+        @click="enterCategory(item)"
+      >
+        <view class="item-image">
+          <image
+            :src="docUrl + item.imgs"
+            mode="widthFix"
+            class="category-icon"
+          ></image>
+        </view>
+        <view class="item-content">
+          <text class="category-title">{{ item.name }}</text>
+          <text class="category-count">(共{{ item.total }}份)</text>
+        </view>
+      </view>
+    </view>
+    <view class="total">
+      <up-image :src="star1" width="85rpx" height="9rpx"></up-image>
+      <view class="count"> {{ total }}份文献</view>
+      <up-image :src="star2" width="85rpx" height="9rpx"></up-image>
+    </view>
+  </view>
+  <view class="qikan-page" v-else-if="tab == 'qikan'">
+    <!-- 导航头部 -->
+
+    <!-- 主要内容区域 -->
+    <view class="main-content">
+      <!-- 标签切换区域 -->
+      <view class="tab-section">
+        <view class="tab-container">
+          <view
+            class="tab-item"
+            :class="{ active: activeTab === 'daichawenxian' }"
+            @click="switchTabQikan('daichawenxian')"
+          >
+            <text class="tab-text">代查文献</text>
+            <view class="tab-underline">
+              <up-image
+                :src="activeImg"
+                width="48rpx"
+                height="18rpx"
+                v-if="activeTab === 'daichawenxian'"
+              ></up-image>
+            </view>
+          </view>
+          <view
+            class="tab-item"
+            :class="{ active: activeTab === 'yingwenwenxian' }"
+            @click="switchTabQikan('yingwenwenxian')"
+          >
+            <text class="tab-text">英文文献</text>
+            <view class="tab-underline">
+              <up-image
+                :src="activeImg"
+                width="48rpx"
+                height="18rpx"
+                v-if="activeTab === 'yingwenwenxian'"
+              ></up-image>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 代查文献内容 -->
+      <view class="content-section" v-if="activeTab === 'daichawenxian'">
+        <!-- 顶部图标和说明 -->
+
+        <up-image :src="paperImg" width="100%"></up-image>
+        <!-- 表单区域 -->
+        <view class="form-section">
+          <!-- 接收邮箱 -->
+          <view class="form-group formemail">
+            <view class="form-label">
+              <text>接收邮箱</text>
+              <text class="required">*</text>
+            </view>
+            <view class="input-container">
+              <input
+                class="form-input"
+                type="text"
+                placeholder="请输入文献接收邮箱"
+                v-model="formData.email"
+              />
+            </view>
+          </view>
+          <!-- 文献单元列表 -->
+          <view
+            class="from-cell literature-item"
+            v-for="(literature, index) in literatureList"
+            :key="literature.id"
+          >
+            <!-- 文献类型标签 -->
+            <view class="form-group wenxian">
+              <view class="tag-container">
+                <view class="tag-item active">文献{{ index + 1 }}</view>
+              </view>
+            </view>
+
+            <view class="formbox">
+              <!-- 文献名称 -->
+              <view class="form-group">
+                <view class="form-label">
+                  <text>文献名称</text>
+                  <text class="required">*</text>
+                </view>
+                <view class="input-container">
+                  <textarea
+                    class="form-textarea"
+                    type="text"
+                    placeholder="不支持关键字/广泛查询"
+                    v-model="literature.literatureName"
+                  />
+                </view>
+              </view>
+
+              <!-- 作者 -->
+              <view class="form-group">
+                <view class="form-label">
+                  <text>作者</text>
+                </view>
+                <view class="input-container">
+                  <input
+                    class="form-input"
+                    type="text"
+                    placeholder="请输入作者姓名"
+                    v-model="literature.author"
+                  />
+                </view>
+              </view>
+
+              <!-- 期刊名称 -->
+              <view class="form-group">
+                <view class="form-label">
+                  <text>期刊名称</text>
+                </view>
+                <view class="input-container">
+                  <input
+                    class="form-input"
+                    type="text"
+                    placeholder="请输入期刊名称"
+                    v-model="literature.journalName"
+                  />
+                </view>
+              </view>
+            </view>
+
+            <!-- 删除按钮 -->
+            <view
+              class="delbox"
+              v-if="literatureList.length > 1"
+              @click="removeLiterature(index)"
+            >
+              <up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
+            </view>
+
+            <!-- 文献分隔线 -->
+            <view
+              class="literature-divider"
+              v-if="index < literatureList.length - 1"
+            ></view>
+          </view>
+          <!-- 添加代查文献按钮 -->
+          <view class="add-literature-section" v-if="literatureList.length < 5">
+            <view class="add-button" @click="addLiterature">
+              <up-icon name="plus" size="18" color="#4A90E2"></up-icon>
+              <text class="add-text">添加代查文献</text>
+            </view>
+            <view class="limit-tip">
+              <view class="imgbox">
+                <up-image
+                  :src="countImg"
+                  width="186rpx"
+                  height="74rpx"
+                ></up-image>
+              </view>
+              <view class="count"
+                >还可添加{{ 5 - literatureList.length }}篇</view
+              >
+            </view>
+          </view>
+        </view>
+
+        <!-- 常见问题 -->
+        <view class="faq-section">
+          <up-image
+            :src="questionImg"
+            width="100%"
+            mode="widtFix"
+            height="540rpx"
+          ></up-image>
+        </view>
+        <view class="tips">
+          <view class="title">注意</view>
+          <view class="row">每次至多提交5篇文献代查</view>
+          <view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
+          <view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
+        </view>
+        <view class="btnbox">
+          <up-image
+            :src="submitImg"
+            width="100%"
+            height="160rpx"
+            mode="widtFix"
+          ></up-image>
+        </view>
+      </view>
+
+      <!-- 英文文献内容（暂时显示占位内容） -->
+      <view class="content-section" v-if="activeTab === 'yingwenwenxian'">
+        <view class="placeholder-content">
+          <uni-icons type="info" size="60" color="#999"></uni-icons>
+          <text class="placeholder-text">英文文献功能正在开发中...</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 筛选弹窗 -->
+  <view class="filter-popup" v-if="showFilter" @click="hideFilterPopup">
+    <view class="filter-content" @click.stop>
+      <!-- 筛选标签网格 -->
+      <view class="filter-tags">
+        <view
+          class="tag-item"
+          v-for="(tag, index) in filterTags"
+          :key="index"
+          :class="{ active: tag.selected }"
+          @click="toggleTag(index)"
+        >
+          {{ tag.NAME }}
+        </view>
+      </view>
+
+      <!-- 底部按钮 -->
+      <view class="filter-buttons">
+        <view class="btn-reset" @click="resetFilter">重置</view>
+        <view class="btn-confirm" @click="confirmFilter">确定</view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import { ref, onMounted } from 'vue';
-	import { onShow } from "@dcloudio/uni-app";
-	import upImg from "@/static/cb_up.png"
-	import downImg from "@/static/cb_up.png"
-	import filter from "@/static/cb_screen_no.png"
-	import filterOn from "@/static/cb_screen_yes.png"
-	import star1 from "@/static/xingxing1.png"
-	import star2 from "@/static/xingxing2.png"
-	import paperImg from "@/static/paper_bg.png"
-	import activeImg from "@/static/route.png"
-	import emailImg from "@/static/email_bg.png"
-	import countImg from "@/static/sheng_bg.png"
-	import questionImg from "@/static/paper_question.png"
-	import submitImg from "@/static/paper_submit.png"
-	import delImg from "@/static/delete_paper.png"
-	import api from '@/api/api.js'
-	import docUrl from "@/utils/docUrl.js"
-     import navTo from '@/utils/navTo.js';
-    import navBar from "@/components/navBar/navBar.vue"
-	const total=ref(0);
-	const tab=ref('zhinan')
-	// 响应式数据
-	const searchText = ref('');
-	const guidelineCategories = ref([]);
-	const isFilterActive=ref(false)
-	// 指南库检索结果（如需在列表页使用）
-	const searchLibraryList = ref([]);
-	const filterTags = ref([]);
-	const keywords = ref('');
-	// 页面加载
-	onMounted(() => {
-		loadGuideTypes();
-		loadSearchLibrary();
-		loadGuideTags();
-	});
-	const showFilter=ref(false);
-	// 筛选弹窗相关方法
-	const showFilterPopup = () => {
-		showFilter.value = true;
-	};
-	const goSearch=()=>{
-		uni.sendNativeEvent('goHomeSearch', {
-			msg: 'goHomeSearch'
-		},ret => {
-			console.log(ret);
-		})
-	}
-	const hideFilterPopup = () => {
-		showFilter.value = false;
-	};
-	
-	const toggleTag = (index) => {
-		filterTags.value[index].selected = !filterTags.value[index].selected;
-		isFilterActive.value = filterTags.value.some(tag => tag.selected);
-	};
-	
-	const resetFilter = () => {
-		// 清空所有已选标签
-		filterTags.value.forEach(tag => tag.selected = false);
-		// 关闭筛选激活态
-		isFilterActive.value = false;
-		// 清空关键字
-		keywords.value = '';
-		// 刷新列表数据（可按需保留或移除）
-		// currentPage.value = 1;
-		// hasMoreData.value = true;
-		//loadVideoData(true);
-	};
-	
-	const confirmFilter = () => {
-		const selectedTags = filterTags.value.filter(tag => tag.selected);
-		console.log('选中的筛选标签:', selectedTags);
-		for (var i = 0; i < selectedTags.length; i++) {
-			  if(keywords.value){
-				  keywords.value+=","+selectedTags[i].NAME
-			  }else{
-				  keywords.value=selectedTags[i].NAME 
-			  }
-			
-		 navTo({
-			 url:'/pages_app/hot/hot?keywords='+encodeURIComponent(keywords.value)
-		 })
-			
-		}
-		isFilterActive.value=true;
-		hideFilterPopup();
-		// 根据选中的标签重新加载数据
-		
-	};
+import { ref, onMounted } from "vue";
+import { onShow, onBackPress } from "@dcloudio/uni-app";
+import upImg from "@/static/cb_up.png";
+import downImg from "@/static/cb_up.png";
+import filter from "@/static/cb_screen_no.png";
+import filterOn from "@/static/cb_screen_yes.png";
+import star1 from "@/static/xingxing1.png";
+import star2 from "@/static/xingxing2.png";
+import paperImg from "@/static/paper_bg.png";
+import activeImg from "@/static/route.png";
+import emailImg from "@/static/email_bg.png";
+import countImg from "@/static/sheng_bg.png";
+import questionImg from "@/static/paper_question.png";
+import submitImg from "@/static/paper_submit.png";
+import delImg from "@/static/delete_paper.png";
+import api from "@/api/api.js";
+import docUrl from "@/utils/docUrl.js";
+import navTo from "@/utils/navTo.js";
+import navBar from "@/components/navBar/navBar.vue";
+const total = ref(0);
+const tab = ref("zhinan");
+// 响应式数据
+const searchText = ref("");
+const guidelineCategories = ref([]);
+const isFilterActive = ref(false);
+// 指南库检索结果（如需在列表页使用）
+const searchLibraryList = ref([]);
+const filterTags = ref([]);
+const keywords = ref("");
+onBackPress(() => {
+  try {
+    uni.sendNativeEvent(
+      "goTabbarPage",
+      {
+        msg: "home",
+      },
+      (ret) => {
+        console.log(ret);
+      }
+    );
+  } catch (e) {
+    console.log(e);
+  }
+  plus.runtime.quit();
+  return true;
+});
+// 页面加载
+onMounted(() => {
+  loadGuideTypes();
+  loadSearchLibrary();
+  loadGuideTags();
+});
+const showFilter = ref(false);
+// 筛选弹窗相关方法
+const showFilterPopup = () => {
+  showFilter.value = true;
+};
+const goSearch = () => {
+  uni.sendNativeEvent(
+    "goHomeSearch",
+    {
+      msg: "goHomeSearch",
+    },
+    (ret) => {
+      console.log(ret);
+    }
+  );
+};
+const hideFilterPopup = () => {
+  showFilter.value = false;
+};
 
-	onShow(() => {
-		// 页面显示时可以刷新数据
-		loadGuideTags();
-	});
+const toggleTag = (index) => {
+  filterTags.value[index].selected = !filterTags.value[index].selected;
+  isFilterActive.value = filterTags.value.some((tag) => tag.selected);
+};
 
-	// 加载指南分类（guideType）
-	const loadGuideTypes = async () => {
-		try {
-			const res = await api.guideType({});
-		    guidelineCategories.value=res.data;
-			for (var i = 0; i < res.data.length; i++) {
-				total.value=total.value+res.data[i].total
-			}
-			
-		} catch (e) {
-			console.error('加载指南分类失败:', e);
-		}
-	};
+const resetFilter = () => {
+  // 清空所有已选标签
+  filterTags.value.forEach((tag) => (tag.selected = false));
+  // 关闭筛选激活态
+  isFilterActive.value = false;
+  // 清空关键字
+  keywords.value = "";
+  // 刷新列表数据（可按需保留或移除）
+  // currentPage.value = 1;
+  // hasMoreData.value = true;
+  //loadVideoData(true);
+};
 
-	// 调用治疗指南列表（searchLibraryU）
-	const loadSearchLibrary = async () => {
-		try {
-			const res = await api.searchLibraryU({
-				   page: 1,
-				 pageSize: 20,
-				 type:1,
-				  keywords:'',
-			});
-			if(res && res.code === 200) {
-				searchLibraryList.value = res.data
-			}
-			
-		} catch (e) {
-			console.error('加载指南库失败:', e);
-		}
-	};
+const confirmFilter = () => {
+  const selectedTags = filterTags.value.filter((tag) => tag.selected);
+  console.log("选中的筛选标签:", selectedTags);
+  for (var i = 0; i < selectedTags.length; i++) {
+    if (keywords.value) {
+      keywords.value += "," + selectedTags[i].NAME;
+    } else {
+      keywords.value = selectedTags[i].NAME;
+    }
 
-	// 加载指南标签列表
-	const loadGuideTags = async () => {
-		try {
-			const res = await api.guideTag({
-				type:3
-			});
-			console.log('指南标签API响应:', res);
-			if(res && res.code === 200 && res.data) {
-				// 将API返回的标签数据转换为筛选标签格式
-				filterTags.value = res.data.map(tag => ({
-					...tag,
-					selected: false
-				}));
-				console.log('指南标签加载成功:', filterTags.value);
-			}
-		} catch (e) {
-			console.error('加载指南标签失败:', e);
-		}
-	};
+    navTo({
+      url: "/pages_app/hot/hot?keywords=" + encodeURIComponent(keywords.value),
+    });
+  }
+  isFilterActive.value = true;
+  hideFilterPopup();
+  // 根据选中的标签重新加载数据
+};
 
-	// 进入指南分类
-	const enterCategory = (item) => {
-		navTo({
-			url: `/pages_app/zhinanList/zhinanList?typeUuid=${item.uuid}&title=${item.name}`
-		});
-	};
+onShow(() => {
+  // 页面显示时可以刷新数据
+  loadGuideTags();
+});
 
-	// 显示筛选对话框
-	const showFilterDialog = () => {
-		console.log('显示筛选');
-		// 可以实现筛选弹窗
-	};
+// 加载指南分类（guideType）
+const loadGuideTypes = async () => {
+  try {
+    const res = await api.guideType({});
+    guidelineCategories.value = res.data;
+    for (var i = 0; i < res.data.length; i++) {
+      total.value = total.value + res.data[i].total;
+    }
+  } catch (e) {
+    console.error("加载指南分类失败:", e);
+  }
+};
 
-	// 切换底部标签
-	const switchTab = (tabName) => {
-		console.log('切换到:', tabName);
-		tab.value=tabName;
-	};
+// 调用治疗指南列表（searchLibraryU）
+const loadSearchLibrary = async () => {
+  try {
+    const res = await api.searchLibraryU({
+      page: 1,
+      pageSize: 20,
+      type: 1,
+      keywords: "",
+    });
+    if (res && res.code === 200) {
+      searchLibraryList.value = res.data;
+    }
+  } catch (e) {
+    console.error("加载指南库失败:", e);
+  }
+};
 
-	// 返回
-	const goBack = () => {
-		uni.navigateBack({
-			fail() {
-				uni.redirectTo({
-					url: '/pages/index/index'
-				});
-			}
-		});
-	};
-	// 响应式数据
-	const activeTab = ref('daichawenxian');
-	
-	// 表单数据
-	const formData = ref({
-		email: '',
-		literatureName: '',
-		author: '',
-		journalName: ''
-	});
-	
-	// 文献列表数据
-	const literatureList = ref([
-		{
-			id: 1,
-			literatureName: '',
-			author: '',
-			journalName: ''
-		}
-	]);
-	
-	// 常见问题数据
-	const faqList = ref([
-		{
-			question: '如何查找文献？',
-			answer: '请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。',
-			expanded: false
-		},
-		{
-			question: '查找需要多长时间？',
-			answer: '通常在1-3个工作日内完成文献查找并发送到您的邮箱。',
-			expanded: false
-		},
-		{
-			question: '支持哪些文献类型？',
-			answer: '支持国内外期刊论文、会议论文、学位论文等多种文献类型。',
-			expanded: false
-		}
-	]);
-	
-	// 切换顶部标签
-	const switchTabQikan = (tab) => {
-		activeTab.value = tab;
-	};
-	
-	// 切换底部导航
-	const switchBottomTab = (tab) => {
-		if (tab === 'zhinan') {
-			uni.navigateTo({
-				url: '/pages_app/zhinan/zhinan'
-			});
-		} else if (tab === 'tools') {
-			uni.showToast({
-				title: '功能开发中',
-				icon: 'none'
-			});
-		}
-	};
-	
-	// 添加文献
-	const addLiterature = () => {
-		if (literatureList.value.length >= 5) {
-			uni.showToast({
-				title: '最多只能添加5篇文献',
-				icon: 'none'
-			});
-			return;
-		}
-		
-		const newLiterature = {
-			id: Date.now(), // 使用时间戳作为唯一ID
-			literatureName: '',
-			author: '',
-			journalName: ''
-		};
-		
-		literatureList.value.push(newLiterature);
-		
-		uni.showToast({
-			title: '添加成功',
-			icon: 'none'
-		});
-	};
-	
-	// 删除文献
-	const removeLiterature = (index) => {
-		if (literatureList.value.length <= 1) {
-			uni.showToast({
-				title: '至少保留一篇文献',
-				icon: 'none'
-			});
-			return;
-		}
-		
-		literatureList.value.splice(index, 1);
-		
-		uni.showToast({
-			title: '删除成功',
-			icon: 'none'
-		});
-	};
-	
-	// 切换FAQ展开状态
-	const toggleFaq = (index) => {
-		faqList.value[index].expanded = !faqList.value[index].expanded;
-	};
+// 加载指南标签列表
+const loadGuideTags = async () => {
+  try {
+    const res = await api.guideTag({
+      type: 3,
+    });
+    console.log("指南标签API响应:", res);
+    if (res && res.code === 200 && res.data) {
+      // 将API返回的标签数据转换为筛选标签格式
+      filterTags.value = res.data.map((tag) => ({
+        ...tag,
+        selected: false,
+      }));
+      console.log("指南标签加载成功:", filterTags.value);
+    }
+  } catch (e) {
+    console.error("加载指南标签失败:", e);
+  }
+};
+
+// 进入指南分类
+const enterCategory = (item) => {
+  navTo({
+    url: `/pages_app/zhinanList/zhinanList?typeUuid=${item.uuid}&title=${item.name}`,
+  });
+};
+
+// 显示筛选对话框
+const showFilterDialog = () => {
+  console.log("显示筛选");
+  // 可以实现筛选弹窗
+};
+
+// 切换底部标签
+const switchTab = (tabName) => {
+  console.log("切换到:", tabName);
+  tab.value = tabName;
+};
+
+// 返回
+const goBack = () => {
+  uni.navigateBack({
+    fail() {
+      uni.redirectTo({
+        url: "/pages/index/index",
+      });
+    },
+  });
+};
+// 响应式数据
+const activeTab = ref("daichawenxian");
+
+// 表单数据
+const formData = ref({
+  email: "",
+  literatureName: "",
+  author: "",
+  journalName: "",
+});
+
+// 文献列表数据
+const literatureList = ref([
+  {
+    id: 1,
+    literatureName: "",
+    author: "",
+    journalName: "",
+  },
+]);
+
+// 常见问题数据
+const faqList = ref([
+  {
+    question: "如何查找文献？",
+    answer:
+      "请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。",
+    expanded: false,
+  },
+  {
+    question: "查找需要多长时间？",
+    answer: "通常在1-3个工作日内完成文献查找并发送到您的邮箱。",
+    expanded: false,
+  },
+  {
+    question: "支持哪些文献类型？",
+    answer: "支持国内外期刊论文、会议论文、学位论文等多种文献类型。",
+    expanded: false,
+  },
+]);
+
+// 切换顶部标签
+const switchTabQikan = (tab) => {
+  activeTab.value = tab;
+};
+
+// 切换底部导航
+const switchBottomTab = (tab) => {
+  if (tab === "zhinan") {
+    uni.navigateTo({
+      url: "/pages_app/zhinan/zhinan",
+    });
+  } else if (tab === "tools") {
+    uni.showToast({
+      title: "功能开发中",
+      icon: "none",
+    });
+  }
+};
+
+// 添加文献
+const addLiterature = () => {
+  if (literatureList.value.length >= 5) {
+    uni.showToast({
+      title: "最多只能添加5篇文献",
+      icon: "none",
+    });
+    return;
+  }
+
+  const newLiterature = {
+    id: Date.now(), // 使用时间戳作为唯一ID
+    literatureName: "",
+    author: "",
+    journalName: "",
+  };
+
+  literatureList.value.push(newLiterature);
+
+  uni.showToast({
+    title: "添加成功",
+    icon: "none",
+  });
+};
+
+// 删除文献
+const removeLiterature = (index) => {
+  if (literatureList.value.length <= 1) {
+    uni.showToast({
+      title: "至少保留一篇文献",
+      icon: "none",
+    });
+    return;
+  }
+
+  literatureList.value.splice(index, 1);
+
+  uni.showToast({
+    title: "删除成功",
+    icon: "none",
+  });
+};
+
+// 切换FAQ展开状态
+const toggleFaq = (index) => {
+  faqList.value[index].expanded = !faqList.value[index].expanded;
+};
 </script>
 
 <style lang="scss" scoped>
 // SCSS Variables
-$primary-color: #8B2316;
+$primary-color: #8b2316;
 $bg-color: #f5f5f5;
 $white: #fff;
 $text-primary: #333;
 $text-secondary: #666;
 $text-light: #999;
 $primary-color: #ff6b6b;
-$theme-color: #8B2316;
+$theme-color: #8b2316;
 $white: #fff;
 $gray-bg: #f5f5f5;
 $gray-light: #eee;
@@ -554,578 +604,571 @@ $border-radius: 8px;
 $border-radius-small: 6px;
 $padding: 15px;
 $padding-small: 10px;
-$accent-color: #4A90E2;
+$accent-color: #4a90e2;
 .zhinan-page {
-	background-color: $bg-color;
-	min-height: 100vh;
-	padding-top: 20rpx; // 导航栏高度
+  background-color: $bg-color;
+  min-height: 100vh;
+  padding-top: 20rpx; // 导航栏高度
 }
 
 // 固定搜索容器
 .search-container-fixed {
-	position: fixed;
-	top: calc(var(--status-bar-height) + 44px); // 导航栏高度
-	left: 0;
-	right: 0;
-	z-index: 90;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 30rpx 30rpx;
-	background-color: $white;
-	gap: 20rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: calc(var(--status-bar-height) + 44px); // 导航栏高度
+  left: 0;
+  right: 0;
+  z-index: 90;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 30rpx 30rpx;
+  background-color: $white;
+  gap: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 // 筛选栏
 .filter-bar {
-	background-color: $white;
-	display: flex;
-	align-items: center;
-	border-bottom: 1px solid $gray-light;
+  background-color: $white;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $gray-light;
 
-	.search-box {
-		flex: 1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 5px;
+  .search-box {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
 
-		.search-text {
-			font-size: 14px;
-			color: $gray-medium;
-		}
-	}
+    .search-text {
+      font-size: 14px;
+      color: $gray-medium;
+    }
+  }
 
-	.divider {
-		width: 1px;
-		height: 16px;
-		background-color: $gray-medium;
-		margin: 0 $padding;
-	}
+  .divider {
+    width: 1px;
+    height: 16px;
+    background-color: $gray-medium;
+    margin: 0 $padding;
+  }
 
-	.filter-item {
-		flex:1;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		gap: 3px;
-		font-size: 14px;
-		color: #999;
-	}
+  .filter-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    font-size: 14px;
+    color: #999;
+  }
 }
 
 // 指南网格
 .guidelines-grid {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 30rpx;
-	
-	margin:0 30rpx;
-	margin-top: calc(var(--status-bar-height) + 44px + 106rpx); // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)
+  display: flex;
+  flex-wrap: wrap;
+  padding: 30rpx;
 
-	.guideline-item {
-		margin-top: 20rpx;
-		width: calc(33.333% - 14rpx);
-		background-color: $white;
-		margin-left: 20rpx;
-		overflow: hidden;
-		
-		transition: transform 0.2s ease;
-        &:nth-child(3n+1){
-			margin-left: 0;
-		}
-		&:active {
-			transform: scale(0.98);
-		}
+  margin: 0 30rpx;
+  margin-top: calc(
+    var(--status-bar-height) + 44px + 106rpx
+  ); // 为固定搜索栏留出空间 (搜索栏高度约80rpx + 边距)
 
-		.item-image {
-			width: 100%;
-	
-			overflow: hidden; /* 防止溢出 */
-		}
+  .guideline-item {
+    margin-top: 20rpx;
+    width: calc(33.333% - 14rpx);
+    background-color: $white;
+    margin-left: 20rpx;
+    overflow: hidden;
 
-			.category-icon {
-			width: 100%;
-			height:320rpx; /* 高度自适应 */
-			display: block; /* 去除底部间隙 */
-		}
+    transition: transform 0.2s ease;
+    &:nth-child(3n + 1) {
+      margin-left: 0;
+    }
+    &:active {
+      transform: scale(0.98);
+    }
 
-		.item-content {
-			padding: 20rpx 16rpx;
-			text-align: center;
+    .item-image {
+      width: 100%;
 
-			.category-title {
-				display: block;
-				font-size: 26rpx;
-				color: $text-primary;
-				line-height: 1.4;
-				margin-bottom: 8rpx;
-			}
+      overflow: hidden; /* 防止溢出 */
+    }
 
-			.category-count {
-				font-size: 22rpx;
-				color: $text-light;
-			}
-		}
-	}
+    .category-icon {
+      width: 100%;
+      height: 320rpx; /* 高度自适应 */
+      display: block; /* 去除底部间隙 */
+    }
+
+    .item-content {
+      padding: 20rpx 16rpx;
+      text-align: center;
+
+      .category-title {
+        display: block;
+        font-size: 26rpx;
+        color: $text-primary;
+        line-height: 1.4;
+        margin-bottom: 8rpx;
+      }
+
+      .category-count {
+        font-size: 22rpx;
+        color: $text-light;
+      }
+    }
+  }
 }
 
 // 底部导航
 .bottom-tabbar {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 100rpx;
-	background-color: $white;
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	border-top: 1rpx solid #f0f0f0;
-	z-index: 100;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 100rpx;
+  background-color: $white;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-top: 1rpx solid #f0f0f0;
+  z-index: 100;
 
-	.tab-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		flex: 1;
-		height: 100rpx;
-		gap: 8rpx;
-         &.active {
-				color: #fff;
-				background-color: #8B2316;
-			}
-		.tab-icon {
-			width: 44rpx;
-			height: 44rpx;
-		}
+  .tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 100rpx;
+    gap: 8rpx;
+    &.active {
+      color: #fff;
+      background-color: #8b2316;
+    }
+    .tab-icon {
+      width: 44rpx;
+      height: 44rpx;
+    }
 
-		.tab-text {
-			font-size: 32rpx;
-			color: $text-secondary;
-			&.active {
-							color: #fff;
-							
-						}
-		}
-	}
-	.tab-item:nth-child(2){
-		border-right: 2rpx solid #eee;
-		border-left: 2rpx solid #eee;
-	}
+    .tab-text {
+      font-size: 32rpx;
+      color: $text-secondary;
+      &.active {
+        color: #fff;
+      }
+    }
+  }
+  .tab-item:nth-child(2) {
+    border-right: 2rpx solid #eee;
+    border-left: 2rpx solid #eee;
+  }
 }
 
 // 为网格添加底部边距，避免被tabbar遮挡
 .guidelines-grid {
-	padding-bottom:0rpx;
-	background-color: $white;
+  padding-bottom: 0rpx;
+  background-color: $white;
 }
-.total{
-	margin-top: 0rpx;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding-bottom:40rpx;
-	.count{
-		margin-top: 50rpx;
-		font-size: 30rpx;
-		color:#999;
-	}
+.total {
+  margin-top: 0rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 40rpx;
+  .count {
+    margin-top: 50rpx;
+    font-size: 30rpx;
+    color: #999;
+  }
 }
 
 .qikan-page {
-	background:#f6f6f6;
-	min-height: 100vh;
-	padding-top:0rpx;
-	padding-bottom: 100rpx; // 为底部导航预留空间
+  background: #f6f6f6;
+  min-height: 100vh;
+  padding-top: 0rpx;
+  padding-bottom: 100rpx; // 为底部导航预留空间
 }
 
 .main-content {
-	flex: 1;
+  flex: 1;
 }
 
 // 标签切换区域 - 固定在顶部
 .tab-section {
-	position: fixed;
-	top: $nav-height; // 140rpx
-	left: 0;
-	right: 0;
-	z-index: 80;
-	background-color: #a5d9fe;
-	padding: 0 30rpx;
-	
-	
-	.tab-container {
-		display: flex;
-		align-items: center;
-		height: 100rpx;
-		
-		.tab-item {
-			position: relative;
-			margin-right: 60rpx;
-			padding: 20rpx 0;
-			
-			.tab-text {
-				font-size: 32rpx;
-				color:#333!important;
-				font-weight: 500;
-			}
-			
-			&.active {
-				.tab-text {
-					color: $primary-color;
-					font-weight: 600;
-				}
-			}
-			
-			.tab-underline {
-				position: absolute;
-				bottom:15rpx;
-				left: 50%;
-				right: 0;
-				transform: translateX(-50%);
-				height: 18rpx;
-				
-				
-			}
-		}
-	}
+  position: fixed;
+  top: $nav-height; // 140rpx
+  left: 0;
+  right: 0;
+  z-index: 80;
+  background-color: #a5d9fe;
+  padding: 0 30rpx;
+
+  .tab-container {
+    display: flex;
+    align-items: center;
+    height: 100rpx;
+
+    .tab-item {
+      position: relative;
+      margin-right: 60rpx;
+      padding: 20rpx 0;
+
+      .tab-text {
+        font-size: 32rpx;
+        color: #333 !important;
+        font-weight: 500;
+      }
+
+      &.active {
+        .tab-text {
+          color: $primary-color;
+          font-weight: 600;
+        }
+      }
+
+      .tab-underline {
+        position: absolute;
+        bottom: 15rpx;
+        left: 50%;
+        right: 0;
+        transform: translateX(-50%);
+        height: 18rpx;
+      }
+    }
+  }
 }
 
 // 内容区域
 .content-section {
-	background-color: $bg-color;
-	min-height: calc(100vh - 340rpx);
-	margin-top: 100rpx; // 为固定的标签切换区域留出空间
+  background-color: $bg-color;
+  min-height: calc(100vh - 340rpx);
+  margin-top: 100rpx; // 为固定的标签切换区域留出空间
 }
 
 // 头部横幅
 .header-banner {
-	background: linear-gradient(135deg, #87CEEB, #B0E0E6);
-	margin: 20rpx 30rpx;
-	border-radius: 20rpx;
-	padding: 40rpx 30rpx;
-	
-	.banner-content {
-		display: flex;
-		align-items: center;
-		
-		.icon-container {
-			position: relative;
-			margin-right: 30rpx;
-			
-			.sparkle-icon {
-				position: absolute;
-				top: -10rpx;
-				right: -10rpx;
-				font-size: 24rpx;
-			}
-		}
-		
-		.banner-text {
-			flex: 1;
-			
-			.main-title {
-				font-size: 48rpx;
-				font-weight: bold;
-				color: $text-primary;
-				margin-bottom: 10rpx;
-			}
-			
-			.sub-title {
-				font-size: 24rpx;
-				color: $text-secondary;
-				line-height: 1.4;
-			}
-		}
-	}
+  background: linear-gradient(135deg, #87ceeb, #b0e0e6);
+  margin: 20rpx 30rpx;
+  border-radius: 20rpx;
+  padding: 40rpx 30rpx;
+
+  .banner-content {
+    display: flex;
+    align-items: center;
+
+    .icon-container {
+      position: relative;
+      margin-right: 30rpx;
+
+      .sparkle-icon {
+        position: absolute;
+        top: -10rpx;
+        right: -10rpx;
+        font-size: 24rpx;
+      }
+    }
+
+    .banner-text {
+      flex: 1;
+
+      .main-title {
+        font-size: 48rpx;
+        font-weight: bold;
+        color: $text-primary;
+        margin-bottom: 10rpx;
+      }
+
+      .sub-title {
+        font-size: 24rpx;
+        color: $text-secondary;
+        line-height: 1.4;
+      }
+    }
+  }
 }
 
 // 表单区域
 .form-section {
-	
-	margin: -156rpx 30rpx  20rpx;
-	border-radius: 20rpx;
-	padding: 0rpx 0rpx ;
-	.wenxian{
-		margin-top: 40rpx;
-		
-		
-		overflow: hidden;
-	}
-	.from-cell{
-		position: relative;
-		.delbox{
-			top:10rpx;
-			right:30rpx;
-			position: absolute;
-		}
-	}
-	.formbox{
-		padding:30rpx 30rpx 30rpx;
-		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0;
-		background-size: 100% 148rpx;
-		border-radius: 10rpx;
-		position: relative;
-		z-index:8;
-	}
-	.formemail{
-		padding:0 30rpx;
-		height: 148rpx;
-		display: flex;
-		align-items:center;
-		border-radius: 20rpx;
-		background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0!important;
-		background-size: cover!important;
-	}
-	
-	// 文献分隔线
-	.literature-divider {
-		height: 20rpx;
-		margin: 20rpx 0;
-		background-color: #f0f0f0;
-		border-radius: 10rpx;
-	}
-	
-	.form-group {
-	
-		margin-bottom: 40rpx;
-		display: flex;
-		
-		background-size: 100% 652rpx;
-		overflow: hidden;
-		&:last-child {
-			margin-bottom: 0;
-		}
-		
-		.form-label {
-			display: flex;
-			align-items: center;
-			width:160rpx;
-			font-size: 28rpx;
-			color: $text-primary;
-			font-weight: 500;
-			
-			.required {
-				color: #ff4757;
-				margin-left: 8rpx;
-			}
-		}
-		
-		.input-container {
-			flex:1;
-			.form-input,.form-textarea{
-				width: 100%;
-				height: 80rpx;
-				padding: 0 20rpx;
-				background:#f6f6f6;
-				border: 2rpx solid $border-color;
-				border-radius: 12rpx;
-				font-size: 28rpx;
-				color: $text-primary;
-				background-color: $white;
-				box-sizing: border-box;
-				&::placeholder {
-					color: $text-light;
-				}
-				
-				&:focus {
-					border-color: $accent-color;
-				}
-			}
-			.form-textarea{
-				padding:20rpx;
-				height: 200rpx;
-			}
-		}
-		
-		.tag-container {
-			.tag-item {
-				display: inline-block;
-				padding: 16rpx 32rpx;
-				background-color: #008aff;
-				color: $white;
-				border-radius: 10rpx 10rpx 0 0;
-				font-size: 24rpx;
-				font-weight: 500;
-			}
-		}
-	}
-	.from-cell .form-group:nth-child(1){
-		margin-bottom: 0;
-	}
-	.formbox  .form-group:nth-child(1){
-		margin-bottom: 40rpx;
-	}
-	
+  margin: -156rpx 30rpx 20rpx;
+  border-radius: 20rpx;
+  padding: 0rpx 0rpx;
+  .wenxian {
+    margin-top: 40rpx;
+
+    overflow: hidden;
+  }
+  .from-cell {
+    position: relative;
+    .delbox {
+      top: 10rpx;
+      right: 30rpx;
+      position: absolute;
+    }
+  }
+  .formbox {
+    padding: 30rpx 30rpx 30rpx;
+    background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0;
+    background-size: 100% 148rpx;
+    border-radius: 10rpx;
+    position: relative;
+    z-index: 8;
+  }
+  .formemail {
+    padding: 0 30rpx;
+    height: 148rpx;
+    display: flex;
+    align-items: center;
+    border-radius: 20rpx;
+    background: #fff url("@/static/email_bg.png") no-repeat 0rpx 0 !important;
+    background-size: cover !important;
+  }
+
+  // 文献分隔线
+  .literature-divider {
+    height: 20rpx;
+    margin: 20rpx 0;
+    background-color: #f0f0f0;
+    border-radius: 10rpx;
+  }
+
+  .form-group {
+    margin-bottom: 40rpx;
+    display: flex;
+
+    background-size: 100% 652rpx;
+    overflow: hidden;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .form-label {
+      display: flex;
+      align-items: center;
+      width: 160rpx;
+      font-size: 28rpx;
+      color: $text-primary;
+      font-weight: 500;
+
+      .required {
+        color: #ff4757;
+        margin-left: 8rpx;
+      }
+    }
+
+    .input-container {
+      flex: 1;
+      .form-input,
+      .form-textarea {
+        width: 100%;
+        height: 80rpx;
+        padding: 0 20rpx;
+        background: #f6f6f6;
+        border: 2rpx solid $border-color;
+        border-radius: 12rpx;
+        font-size: 28rpx;
+        color: $text-primary;
+        background-color: $white;
+        box-sizing: border-box;
+        &::placeholder {
+          color: $text-light;
+        }
+
+        &:focus {
+          border-color: $accent-color;
+        }
+      }
+      .form-textarea {
+        padding: 20rpx;
+        height: 200rpx;
+      }
+    }
+
+    .tag-container {
+      .tag-item {
+        display: inline-block;
+        padding: 16rpx 32rpx;
+        background-color: #008aff;
+        color: $white;
+        border-radius: 10rpx 10rpx 0 0;
+        font-size: 24rpx;
+        font-weight: 500;
+      }
+    }
+  }
+  .from-cell .form-group:nth-child(1) {
+    margin-bottom: 0;
+  }
+  .formbox .form-group:nth-child(1) {
+    margin-bottom: 40rpx;
+  }
 }
 
 // 添加文献区域
 .add-literature-section {
-	position: relative;
-	margin-top: 40rpx;
-	padding-top: 40rpx;
-	border-top: 2rpx solid $border-color;
-	
-	.add-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 80rpx;
-		margin:0 20rpx;
-		border: 2rpx solid #0197f1;
-		border-radius:40rpx;
-		background-color: rgba(74, 144, 226, 0.05);
-		
-		.add-text {
-			margin-left: 10rpx;
-			font-size: 28rpx;
-			color: #0197f1;
-			font-weight: 500;
-		}
-	}
-	
-	.limit-tip {
-		position: absolute;
-		right:0;
-		top:-10rpx;
-		text-align: center;
-		margin-top: 20rpx;
-		font-size: 24rpx;
-		color: #fff;
-		
-	    width: 186rpx;
-		height:74rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-sizing: border-box;
-		.imgbox{
-			top:0;
-			position: absolute;
-		}
-		.count{
-			margin-top: -20rpx;
-			position: relative;
-			z-index:3;
-		}
-	}
+  position: relative;
+  margin-top: 40rpx;
+  padding-top: 40rpx;
+  border-top: 2rpx solid $border-color;
+
+  .add-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 80rpx;
+    margin: 0 20rpx;
+    border: 2rpx solid #0197f1;
+    border-radius: 40rpx;
+    background-color: rgba(74, 144, 226, 0.05);
+
+    .add-text {
+      margin-left: 10rpx;
+      font-size: 28rpx;
+      color: #0197f1;
+      font-weight: 500;
+    }
+  }
+
+  .limit-tip {
+    position: absolute;
+    right: 0;
+    top: -10rpx;
+    text-align: center;
+    margin-top: 20rpx;
+    font-size: 24rpx;
+    color: #fff;
+
+    width: 186rpx;
+    height: 74rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    .imgbox {
+      top: 0;
+      position: absolute;
+    }
+    .count {
+      margin-top: -20rpx;
+      position: relative;
+      z-index: 3;
+    }
+  }
 }
 
 // 常见问题区域
 .faq-section {
-	margin: 0rpx 30rpx;
-	background-color: $white;
-	border-radius: 20rpx;
-	padding: 1rpx 1rpx;
-	
+  margin: 0rpx 30rpx;
+  background-color: $white;
+  border-radius: 20rpx;
+  padding: 1rpx 1rpx;
 }
-.tips{
-	font-size: 24rpx;
-	margin:30rpx 30rpx;
-	color:#999;
+.tips {
+  font-size: 24rpx;
+  margin: 30rpx 30rpx;
+  color: #999;
 }
-.btnbox{
-  margin:0 30rpx;
+.btnbox {
+  margin: 0 30rpx;
 }
 // 占位内容
 .placeholder-content {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 400rpx;
-	
-	.placeholder-text {
-		margin-top: 30rpx;
-		font-size: 28rpx;
-		color: $text-light;
-	}
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400rpx;
+
+  .placeholder-text {
+    margin-top: 30rpx;
+    font-size: 28rpx;
+    color: $text-light;
+  }
 }
 // 筛选弹窗样式
 .filter-popup {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	// background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	justify-content: center;
-	
-	z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  // background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
 
-	.filter-content {
-		margin-top:247rpx;
-	      overflow-y:scroll;
-		background-color: $white;
-		// border-radius: 20rpx 20rpx 0 0;
-		padding: 20rpx 30rpx 60rpx;
-		width: 100%;
-		max-height: 80vh;
-		
-		.filter-tags {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 20rpx;
-			margin-bottom: 60rpx;
-			max-height: 65vh;
-			overflow-y: auto;
-			
-			.tag-item {
-				background-color: #f8f8f8;
-				color: $gray-dark;
-				padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
-				border-radius: 30rpx;
-				font-size: 26rpx;
-				border: 2rpx solid #efefef;
-				transition: all 0.3s ease;
-				width: 152rpx; /* 固定宽度 */
-				text-align: center; /* 文本居中 */
-				
-				&.active {
-					background-color: #fff;
-					color: $theme-color;
-					border-color: $theme-color;
-				}
-			}
-		}
-		
-		.filter-buttons {
-			display: flex;
-			gap: 20rpx;
-			position: fixed;
-			bottom: 30rpx;
-			left: 30rpx;
-			right: 30rpx;
-			background-color: #fff; /* 背景色为白色 */
-			
-			.btn-reset,
-			.btn-confirm {
-				flex: 1;
-				height: 70rpx;
-				border-radius: 14rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 32rpx;
-				font-weight: 500;
-			}
-			
-			.btn-reset {
-				background-color: $white;
-				color: $theme-color;
-				border: 2rpx solid $theme-color;
-			}
-			
-			.btn-confirm {
-				border: 2rpx solid $theme-color;
-				background-color: $theme-color;
-				color: $white;
-			}
-		}
-	}
+  z-index: 9999;
+
+  .filter-content {
+    margin-top: 247rpx;
+    overflow-y: scroll;
+    background-color: $white;
+    // border-radius: 20rpx 20rpx 0 0;
+    padding: 20rpx 30rpx 60rpx;
+    width: 100%;
+    max-height: 80vh;
+
+    .filter-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20rpx;
+      margin-bottom: 60rpx;
+      max-height: 65vh;
+      overflow-y: auto;
+
+      .tag-item {
+        background-color: #f8f8f8;
+        color: $gray-dark;
+        padding: 8rpx 0; /* 去掉左右padding，仅保留上下 */
+        border-radius: 30rpx;
+        font-size: 26rpx;
+        border: 2rpx solid #efefef;
+        transition: all 0.3s ease;
+        width: 152rpx; /* 固定宽度 */
+        text-align: center; /* 文本居中 */
+
+        &.active {
+          background-color: #fff;
+          color: $theme-color;
+          border-color: $theme-color;
+        }
+      }
+    }
+
+    .filter-buttons {
+      display: flex;
+      gap: 20rpx;
+      position: fixed;
+      bottom: 30rpx;
+      left: 30rpx;
+      right: 30rpx;
+      background-color: #fff; /* 背景色为白色 */
+
+      .btn-reset,
+      .btn-confirm {
+        flex: 1;
+        height: 70rpx;
+        border-radius: 14rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 32rpx;
+        font-weight: 500;
+      }
+
+      .btn-reset {
+        background-color: $white;
+        color: $theme-color;
+        border: 2rpx solid $theme-color;
+      }
+
+      .btn-confirm {
+        border: 2rpx solid $theme-color;
+        background-color: $theme-color;
+        color: $white;
+      }
+    }
+  }
 }
-
 </style>