From 14764dd7679369a650ad1d60be62aacc863755a1 Mon Sep 17 00:00:00 2001
From: tj <1378534974@qq.com>
Date: 星期四, 22 五月 2025 16:29:01 +0800
Subject: [PATCH] 3
---
sub-pages/film-list/film-official-detail.vue | 171 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 116 insertions(+), 55 deletions(-)
diff --git a/sub-pages/film-list/film-official-detail.vue b/sub-pages/film-list/film-official-detail.vue
index 8531ea6..1561de8 100644
--- a/sub-pages/film-list/film-official-detail.vue
+++ b/sub-pages/film-list/film-official-detail.vue
@@ -1,66 +1,83 @@
<template>
- <view class="container">
+ <view>
+ <view class="container">
+ <view class="movie-title">
+ <view><u-text text="破.地狱" size="30"></u-text></view>
+ <view><u-text text="The Last Dance" size="20"></u-text></view>
+ </view>
- <view class="movie-title">
- <view><u-text text="破.地狱" size="30"></u-text></view>
- <view><u-text text="The Last Dance" size="20"></u-text></view>
- </view>
+ <scroll-view scroll-y class="content">
+ <view class="movie-info">
- <scroll-view scroll-y class="content">
- <view class="movie-info">
-
- <image class="movie-poster" src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg"
- mode="aspectFill" />
- <view class="movie-details">
- <view class="scene-number">
- <text>片场</text>
- <text>17</text>
+ <image class="movie-poster"
+ src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg" mode="aspectFill" />
+ <view class="movie-details">
+ <view class="scene-number">
+ <text>片场</text>
+ <text>17</text>
+ </view>
+ <view class="movie-tags">
+ <text class="tag">剧情/家庭</text>
+ <text class="tag">中国香港</text>
+ <text class="tag">2024</text>
+ </view>
+ <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
</view>
- <view class="movie-tags">
- <text class="tag">剧情/家庭</text>
- <text class="tag">中国香港</text>
- <text class="tag">2024</text>
+ </view>
+
+ <view class="movie-desc">
+ <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
+ <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
+ <text
+ class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
+ </view>
+
+ <view class="map-container">
+ <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
+ scale="16" show-location></map>
+ </view>
+ <view>
+ <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
+ lineColor="#2979ff" activeStyle="color: #2979ff">
+ <view slot="left" style="padding-left: 4px;" @tap="">
+ <u-icon name="/static/common/order.png" size="40" bold></u-icon>
+ </view>
+ <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
+ <u-icon name="list" size="40" bold></u-icon>
+ </view>
+ </u-tabs>
+ <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
+ <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
+ <film-official-timeline></film-official-timeline>
+ </swiper-item>
+ </swiper>
+ </view>
+ <view class="comment">
+
+ <comment-item avatar="https://img.yzcdn.cn/vant/cat.jpeg" nickname="图墙精选" :isAuthor="true"
+ content="如果路线里全是常规景区，没一个特殊的点位，那就是普通团，除非他的住宿安排的很好。。要不然和普通团没任何区别，都是去景区挤，然后上车赶路" :images="urls2" date="2天前"
+ address="湖北" :likes="30" @reply="showCommentLayer" />
+ </view>
+ </scroll-view>
+
+ <view class="back-to-top" @click="scrollToTop">
+ <u-icon name="arrow-up" size="24" color="#666666" />
+ </view>
+
+ <view class="comment-box">
+
+ <view class="input-row">
+ <view class="comment-input" @click="showCommentLayer">
+ <u-text size="12px" text="说点什么......" margin="0rpx 0rpx 0rpx 20rpx" color="#B9B9B9"
+ confirmType="send"></u-text>
</view>
- <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
+ <u-icon name="heart" size="60" color="#B9B9B9" label="11"></u-icon>
+ <u-icon name="star" size="60" color="#B9B9B9" label="22"></u-icon>
+ <u-icon name="chat" size="60" color="#B9B9B9" label="33"></u-icon>
</view>
</view>
-
- <view class="movie-desc">
- <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
- <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
- <text
- class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
- </view>
-
- <view class="map-container">
- <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
- scale="16" show-location></map>
- </view>
- <view>
- <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
- lineColor="#2979ff" activeStyle="color: #2979ff">
- <view slot="left" style="padding-left: 4px;" @tap="">
- <u-icon name="/static/common/order.png" size="40" bold></u-icon>
- </view>
- <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
- <u-icon name="list" size="40" bold></u-icon>
- </view>
- </u-tabs>
- <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
- <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
- <film-official-timeline></film-official-timeline>
- </swiper-item>
- </swiper>
- </view>
-
- <view class="comment-section">
- <u-button class="comment-btn" type="primary" plain>我要发言</u-button>
- </view>
- </scroll-view>
-
- <view class="back-to-top" @click="scrollToTop">
- <u-icon name="arrow-up" size="24" color="#666666" />
</view>
+ <comment-popup v-model="commentShow" />
</view>
</template>
<script>
@@ -114,6 +131,8 @@
{ name: '距离' },
{ name: '城市' },
],
+
+ commentShow: false,
};
},
methods: {
@@ -131,6 +150,9 @@
},
onSwiperChange(e) {
this.current = e.detail.current; // 同步 tabs
+ },
+ showCommentLayer(e) {
+ this.commentShow = true
},
}
};
@@ -270,4 +292,43 @@
/* 允许滚动内容 */
}
}
+</style>
+<style lang="scss" scoped>
+.comment-box {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20rpx 20rpx;
+ background-color: #fff;
+ box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
+ z-index: 999;
+ height: 100rpx;
+
+ .input-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 80%;
+
+ .comment-input {
+ width: 300rpx;
+ background-color: #F4F4F6;
+ border-radius: 50rpx;
+ height: 60rpx;
+ display: flex;
+ align-items: center;
+ }
+ }
+
+ .flex-input {
+ flex: 1;
+ margin-right: 10rpx;
+ }
+}
+
+.comment{
+ margin: 10rpx;
+ margin-bottom: 180rpx;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3