| 
					
				 | 
			
			
				@@ -1,179 +0,0 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <div class="container"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <custom-header name="视频相册集"></custom-header> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <div class="content"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            <div class="box"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                <div class="box-title"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    <div class="title"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <img src="@/assets/img/home/video-icon.png" alt="" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <span>巡园航拍</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    <div class="more"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        更多 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <el-icon><ArrowRightBold /></el-icon> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                <div class="video"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            <div class="photo-list"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                <el-timeline> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    <el-timeline-item 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :class="{'timeline-item':activity.content}" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        v-for="(activity, index) in activities" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :key="index" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :icon="activity.icon" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :type="activity.type" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :color="activity.color" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :size="activity.size" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :hollow="activity.hollow" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        :timestamp="activity.timestamp" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        placement="top" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <template v-slot:dot> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <img v-if="activity.content" class="dot-active" src="@/assets/img/home/timeline-active.png" alt="" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <img v-else class="dot-img" src="@/assets/img/home/timeline-defalut.png" alt="" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <span class="solar-terms">{{ activity.content }}</span> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        <div class="photo"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <img class="img" @click="handleImg" src="@/assets/img/mine/img-photo.png" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <img class="img" src="@/assets/img/home/photo-img1.png" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                            <img class="img" src="@/assets/img/home/photo-img2.png" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    </el-timeline-item> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                </el-timeline> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    <popup class="popup" v-model:show="showImg"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <img src="@/assets/img/mine/photo-img-bg.png" alt=""> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    </popup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<script setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import customHeader from "@/components/customHeader.vue"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import { Popup } from 'vant'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-import {ref} from "vue" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const showImg = ref(false) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const handleImg = () =>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    showImg.value = true 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const activities = [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        content: "立春", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        timestamp: "2025.03.11", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        timestamp: "2018-04-03", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        content: "立夏", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        timestamp: "2018-04-03", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        timestamp: "2018-04-03", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        timestamp: "2018-04-03 ", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-]; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<style lang="scss" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-.container { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    height: calc(100vh - 40px); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    .content { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        height: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        padding: 8px 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        overflow: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        .box { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .box-title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                justify-content: space-between; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                .title { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        width: 20px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        height: 13px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        margin-right: 4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    span { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        font-size: 18px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        font-weight: 500; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                .more { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    align-items: center; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    color: #999999; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .video { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                background: url('@/assets/img/home/video-bg.png') no-repeat center center /100% 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                height: 152px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                border-radius: 12px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                margin-top: 8px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        .photo-list { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            margin-top: 20px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .dot-img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                width: 12px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                height: 12px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                margin-left: -1px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .dot-active { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                width: 22px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                height: 22px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                margin-left: -6px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                margin-top: -4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            ::v-deep{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                .el-timeline-item__tail{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    border-left: 1px dashed #CCCCCC; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .timeline-item{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                ::v-deep{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    .el-timeline-item__timestamp{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                        margin-left: 40px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .solar-terms{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                font-size: 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                font-weight: 500; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                position: absolute; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                top: -2px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            .photo { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                display: flex; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                .img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    width: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    height: 100px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    border-radius: 8px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    object-fit: cover; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                .img + .img { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                    margin-left: 8px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-.popup{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    background: transparent; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    max-width: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    img{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</style> 
			 |