|
|
@@ -10,101 +10,103 @@
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 功能区域 -->
|
|
|
- <div class="function-section">
|
|
|
- <div
|
|
|
- class="function-item"
|
|
|
- :class="{ disabled: isPreviewMode }"
|
|
|
- @click="handleFunctionClick('visit')"
|
|
|
- >
|
|
|
- <img src="@/assets/indexPage/visit.png" alt="预约参观" class="function-icon" />
|
|
|
- <span class="function-text">预约参观</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="function-item"
|
|
|
- :class="{ disabled: isPreviewMode }"
|
|
|
- @click="handleFunctionClick('activity')"
|
|
|
- >
|
|
|
- <img src="@/assets/indexPage/activity.png" alt="活动预约" class="function-icon" />
|
|
|
- <span class="function-text">活动预约</span>
|
|
|
- </div>
|
|
|
- <div class="function-item" @click="handleFunctionClick('map')">
|
|
|
- <img src="@/assets/indexPage/map.png" alt="展馆地图" class="function-icon" />
|
|
|
- <span class="function-text">展馆地图</span>
|
|
|
- </div>
|
|
|
- <div class="function-item" @click="handleFunctionClick('introduce')">
|
|
|
- <img src="@/assets/indexPage/introduce.png" alt="展馆介绍" class="function-icon" />
|
|
|
- <span class="function-text">展馆介绍</span>
|
|
|
+ <div class="all-content">
|
|
|
+ <!-- 功能区域 -->
|
|
|
+ <div class="function-section">
|
|
|
+ <div
|
|
|
+ class="function-item"
|
|
|
+ :class="{ disabled: isPreviewMode }"
|
|
|
+ @click="handleFunctionClick('visit')"
|
|
|
+ >
|
|
|
+ <img src="@/assets/indexPage/visit.png" alt="预约参观" class="function-icon" />
|
|
|
+ <span class="function-text">预约参观</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="function-item"
|
|
|
+ :class="{ disabled: isPreviewMode }"
|
|
|
+ @click="handleFunctionClick('activity')"
|
|
|
+ >
|
|
|
+ <img src="@/assets/indexPage/activity.png" alt="活动预约" class="function-icon" />
|
|
|
+ <span class="function-text">活动预约</span>
|
|
|
+ </div>
|
|
|
+ <div class="function-item" @click="handleFunctionClick('map')">
|
|
|
+ <img src="@/assets/indexPage/map.png" alt="展馆地图" class="function-icon" />
|
|
|
+ <span class="function-text">展馆地图</span>
|
|
|
+ </div>
|
|
|
+ <div class="function-item" @click="handleFunctionClick('introduce')">
|
|
|
+ <img src="@/assets/indexPage/introduce.png" alt="展馆介绍" class="function-icon" />
|
|
|
+ <span class="function-text">展馆介绍</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 展览资讯 -->
|
|
|
- <div class="section">
|
|
|
- <div class="section-header">
|
|
|
- <h3 class="section-title">展览资讯</h3>
|
|
|
- <span class="view-more" @click="viewMore('recommended')">查看更多 +</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="news-item"
|
|
|
- v-for="item in newsList"
|
|
|
- :key="item.informationId"
|
|
|
- @click="viewNews(item)"
|
|
|
- >
|
|
|
- <img :src="getInfoImg(item)" alt="展览资讯" class="news-img" />
|
|
|
- <div class="news-content">
|
|
|
- <h4 class="news-title">{{ getTitle(item) }}</h4>
|
|
|
- <span class="news-desc"
|
|
|
- ><el-icon> <SortUp /> </el-icon
|
|
|
- ></span>
|
|
|
+ <!-- 展览资讯 -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h3 class="section-title">展览资讯</h3>
|
|
|
+ <span class="view-more" @click="viewMore('recommended')">查看更多 +</span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="news-item"
|
|
|
+ v-for="item in newsList"
|
|
|
+ :key="item.informationId"
|
|
|
+ @click="viewNews(item)"
|
|
|
+ >
|
|
|
+ <img :src="getInfoImg(item)" alt="展览资讯" class="news-img" />
|
|
|
+ <div class="news-content">
|
|
|
+ <h4 class="news-title">{{ getTitle(item) }}</h4>
|
|
|
+ <span class="news-desc"
|
|
|
+ ><el-icon> <SortUp /> </el-icon
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 推荐展览 -->
|
|
|
- <div class="section">
|
|
|
- <div class="section-header">
|
|
|
- <h3 class="section-title">推荐展览</h3>
|
|
|
- <span class="view-more" @click="viewMore('exhibition')">查看更多 +</span>
|
|
|
- </div>
|
|
|
- <div class="scroll-container">
|
|
|
- <div class="scroll-wrapper">
|
|
|
- <div
|
|
|
- class="exhibition-item"
|
|
|
- v-for="exhibition in exhibitionList"
|
|
|
- :key="exhibition.exhibitId"
|
|
|
- @click="viewExhibition(exhibition)"
|
|
|
- >
|
|
|
- <img :src="getImg(exhibition)" alt="展览" class="exhibition-img" />
|
|
|
- <div class="exhibition-info">
|
|
|
- <h4 class="exhibition-title">{{ getTitle(exhibition) }}</h4>
|
|
|
+ <!-- 推荐展览 -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h3 class="section-title">推荐展览</h3>
|
|
|
+ <span class="view-more" @click="viewMore('exhibition')">查看更多 +</span>
|
|
|
+ </div>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <div class="scroll-wrapper">
|
|
|
+ <div
|
|
|
+ class="exhibition-item"
|
|
|
+ v-for="exhibition in exhibitionList"
|
|
|
+ :key="exhibition.exhibitId"
|
|
|
+ @click="viewExhibition(exhibition)"
|
|
|
+ >
|
|
|
+ <img :src="getImg(exhibition)" alt="展览" class="exhibition-img" />
|
|
|
+ <div class="exhibition-info">
|
|
|
+ <h4 class="exhibition-title">{{ getTitle(exhibition) }}</h4>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 社教活动 -->
|
|
|
- <div class="section">
|
|
|
- <div class="section-header">
|
|
|
- <h3 class="section-title">社教活动</h3>
|
|
|
- <span class="view-more" @click="viewMore('activity')">查看更多 +</span>
|
|
|
- </div>
|
|
|
- <div class="scroll-container">
|
|
|
- <div class="scroll-wrapper">
|
|
|
- <div
|
|
|
- class="activity-item"
|
|
|
- v-for="active in activeList"
|
|
|
- :key="active.activityId"
|
|
|
- @click="viewActivity(active)"
|
|
|
- >
|
|
|
- <div class="active-top">
|
|
|
- <img :src="getIndexImg(active)" alt="活动" class="activity-img" />
|
|
|
- <span class="active-go"
|
|
|
- ><el-icon> <ArrowRight /> </el-icon
|
|
|
- ></span>
|
|
|
- </div>
|
|
|
- <div class="activity-info">
|
|
|
- <h4 class="activity-title">{{ getTitle(active) }}</h4>
|
|
|
+ <!-- 社教活动 -->
|
|
|
+ <div class="section">
|
|
|
+ <div class="section-header">
|
|
|
+ <h3 class="section-title">社教活动</h3>
|
|
|
+ <span class="view-more" @click="viewMore('activity')">查看更多 +</span>
|
|
|
+ </div>
|
|
|
+ <div class="scroll-container">
|
|
|
+ <div class="scroll-wrapper">
|
|
|
+ <div
|
|
|
+ class="activity-item"
|
|
|
+ v-for="active in activeList"
|
|
|
+ :key="active.activityId"
|
|
|
+ @click="viewActivity(active)"
|
|
|
+ >
|
|
|
+ <div class="active-top">
|
|
|
+ <img :src="getIndexImg(active)" alt="活动" class="activity-img" />
|
|
|
+ <span class="active-go"
|
|
|
+ ><el-icon> <ArrowRight /> </el-icon
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div class="activity-info">
|
|
|
+ <h4 class="activity-title">{{ getTitle(active) }}</h4>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -314,12 +316,25 @@ onMounted(() => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.home-container {
|
|
|
+ position: relative;
|
|
|
height: calc(100vh); // 减去底部导航栏高度
|
|
|
- overflow-y: auto;
|
|
|
+ // overflow-y: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // padding-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.all-content {
|
|
|
+ position: absolute;
|
|
|
background: url('@/assets/indexPage/bg.png') no-repeat;
|
|
|
background-size: cover;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 20px;
|
|
|
+ top: 170px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 160px);
|
|
|
+ overflow: auto;
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ z-index: 1000;
|
|
|
+ padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
|
@@ -335,7 +350,6 @@ onMounted(() => {
|
|
|
// 轮播图区域
|
|
|
.carousel-section {
|
|
|
width: 100%;
|
|
|
- margin-bottom: 15px;
|
|
|
|
|
|
.carousel-img {
|
|
|
width: 100%;
|
|
|
@@ -455,6 +469,7 @@ onMounted(() => {
|
|
|
-webkit-line-clamp: 2;
|
|
|
-webkit-box-orient: vertical;
|
|
|
overflow: hidden;
|
|
|
+ font-family: 'heavy';
|
|
|
}
|
|
|
|
|
|
.news-desc {
|
|
|
@@ -519,7 +534,7 @@ onMounted(() => {
|
|
|
.exhibition-item {
|
|
|
position: relative;
|
|
|
flex: 0 0 auto;
|
|
|
- width: 345px;
|
|
|
+ width: 100%;
|
|
|
height: 206px;
|
|
|
margin-right: 10px;
|
|
|
border-radius: 8px;
|
|
|
@@ -536,7 +551,7 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
.exhibition-info {
|
|
|
- width: 345px;
|
|
|
+ width: 100%;
|
|
|
height: 30px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -554,6 +569,7 @@ onMounted(() => {
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
+ font-family: 'heavy';
|
|
|
}
|
|
|
}
|
|
|
}
|