|
@@ -0,0 +1,927 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="container" :style="'overflow:' + (showPage ? 'hidden' : 'visible')" v-if="info">
|
|
|
|
|
+ <!-- 作者信息区域 -->
|
|
|
|
|
+ <view class="author">
|
|
|
|
|
+ <img mode="aspectFill" :src="info.coverImg" />
|
|
|
|
|
+ <view class="author_name">{{ info.hotel_name }}</view>
|
|
|
|
|
+ <view class="author_btn">关注</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 轮播图区域 -->
|
|
|
|
|
+ <swiper indicator-color="#ccc" indicator-active-color="#096562" indicator-dots autoplay circular class="swiper">
|
|
|
|
|
+ <swiper-item class="swiper_item" v-for="(item, current) in info.hotelFileInfoList" :key="item.id" @click="handleClickSwiper(info.hotelFileInfoList, current)">
|
|
|
|
|
+ <img mode="aspectFill" class="img" :src="item.url" />
|
|
|
|
|
+ </swiper-item>
|
|
|
|
|
+ </swiper>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 推文信息区域 -->
|
|
|
|
|
+ <view class="tweet">
|
|
|
|
|
+ <view class="tweet_title">{{ info.hposition }}</view>
|
|
|
|
|
+ <view class="tweet_msg">{{ info.remark }}</view>
|
|
|
|
|
+ <view class="tweet_info">{{ info.openTime.slice(5, 10) }} {{ info.hotelTownshipName }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 关联民宿区域 -->
|
|
|
|
|
+ <view class="and">
|
|
|
|
|
+ <!-- 每一个关联民宿区域 -->
|
|
|
|
|
+ <view class="and_box" v-for="item in info.houseList.slice(0, 2)" :key="item.id">
|
|
|
|
|
+ <img mode="aspectFill" :src="item.fileInfoList[0].url" />
|
|
|
|
|
+ <view class="box_detail">
|
|
|
|
|
+ <view class="detail_name">
|
|
|
|
|
+ {{ item.hName }}
|
|
|
|
|
+ <img class="img" src="../../static/index/like.png" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail_leave">
|
|
|
|
|
+ {{ item.hName }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail_num">
|
|
|
|
|
+ <view class="num_rate">{{ item.number.toFixed(1) }}分</view>
|
|
|
|
|
+ <view class="num_comment">{{ item.number }}条评论</view>
|
|
|
|
|
+ <view class="num_price">
|
|
|
|
|
+ ¥{{ item.price }}
|
|
|
|
|
+ <text>起</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 关联民宿查看全部区域 -->
|
|
|
|
|
+ <view class="and_all" @click="handleClickALL">查看全部 >></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 点赞人数区域 -->
|
|
|
|
|
+ <view class="like">
|
|
|
|
|
+ <uv-avatar-group :urls="info.hotelFileInfoList" keyName="url" size="30" gap="0.3" maxCount="10"></uv-avatar-group>
|
|
|
|
|
+ <view class="like_text" @click="handleGoPage('/pages/likeList/likeList')">{{ info.roomNumber }}人已赞</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 评论总条数区域 -->
|
|
|
|
|
+ <view class="total">共15条评论</view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 评论输入框区域 -->
|
|
|
|
|
+ <view class="input_box">
|
|
|
|
|
+ <input type="text" confirm-type="send" placeholder="爱评论的人运气都不差" @confirm="handleInput" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 评论列表区域 -->
|
|
|
|
|
+ <view class="comment_list">
|
|
|
|
|
+ <!-- 每一个评论区域 -->
|
|
|
|
|
+ <view class="comment_box" v-for="item in info.houseList.slice(0, 3)" :key="item.id">
|
|
|
|
|
+ <view class="box_left">
|
|
|
|
|
+ <img mode="aspectFill" :src="item.fileInfoList[0].url" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="box_right">
|
|
|
|
|
+ <view class="right_name">{{ item.hName }}</view>
|
|
|
|
|
+ <view class="right_content">{{ item.hConfig }}</view>
|
|
|
|
|
+ <view class="right_time">{{ item.createDate.slice(6, 11) }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 查看全部评论区域 -->
|
|
|
|
|
+ <view class="comment_all" @click="handleClickComment">查看全部评论 >></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 相关推文区域 -->
|
|
|
|
|
+ <view class="related" v-if="info.houseList.length">
|
|
|
|
|
+ <view class="related_title">相关推文</view>
|
|
|
|
|
+ <!-- 相关推文列表区域 -->
|
|
|
|
|
+ <view class="related_list">
|
|
|
|
|
+ <!-- 每一个推文区域 -->
|
|
|
|
|
+ <view class="related_box" v-for="item in info.houseList.slice(0, 2)" :key="item.id">
|
|
|
|
|
+ <img mode="aspectFill" :src="item.fileInfoList[0].url" />
|
|
|
|
|
+ <view class="box_content">{{ item.hConfig }}</view>
|
|
|
|
|
+ <view class="box_info">
|
|
|
|
|
+ <img class="img" mode="aspectFill" :src="item.fileInfoList[0].url" />
|
|
|
|
|
+ <view class="info_name">{{ item.hName }}</view>
|
|
|
|
|
+ <img class="img2" mode="aspectFill" src="../../static/index/like.png" />
|
|
|
|
|
+ <view class="info_count">{{ item.number }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 乡镇信息区域 -->
|
|
|
|
|
+ <view class="box_town">{{ item.hName }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 底部点赞 评论 收藏区域 -->
|
|
|
|
|
+ <view class="tab">
|
|
|
|
|
+ <!-- 点赞 -->
|
|
|
|
|
+ <view class="tab_box">
|
|
|
|
|
+ <img class="img" src="../../static/index/upvote.png" />
|
|
|
|
|
+ 123
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 评论 -->
|
|
|
|
|
+ <view class="tab_box" @click="handleClickComment">
|
|
|
|
|
+ <img class="img2" src="../../static/index/comment.png" />
|
|
|
|
|
+ 123
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 收藏 -->
|
|
|
|
|
+ <view class="tab_box">
|
|
|
|
|
+ <img class="img" src="../../static/index/like.png" />
|
|
|
|
|
+ 123
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 点击评论弹窗区域 -->
|
|
|
|
|
+ <uv-popup ref="popup" bgColor="none" :safeAreaInsetBottom="false">
|
|
|
|
|
+ <view class="body_pop">
|
|
|
|
|
+ <!-- 评论总数区域 -->
|
|
|
|
|
+ <view class="pop_title">
|
|
|
|
|
+ 共25条评论
|
|
|
|
|
+ <img class="pop_icon" src="../../static/index/close3.png" @click="handleClosePop" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 评论列表区域 -->
|
|
|
|
|
+ <view class="pop_list" v-if="commentList.length">
|
|
|
|
|
+ <!-- 每一条评论区域 -->
|
|
|
|
|
+ <view class="pop_item" v-for="item in commentList" :key="item.id">
|
|
|
|
|
+ <!-- 用户区域 -->
|
|
|
|
|
+ <view class="item_user" @click="handleComment(item)">
|
|
|
|
|
+ <img mode="aspectFill" :src="item.headPhoto" />
|
|
|
|
|
+ <view class="user_info">
|
|
|
|
|
+ {{ item.userName }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 评价内容区域 -->
|
|
|
|
|
+ <view class="item_content" @click="handleComment(item)">
|
|
|
|
|
+ <view class="content_top">
|
|
|
|
|
+ {{ item.content }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="content_bottom">
|
|
|
|
|
+ {{ item.dateTime }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 二级评论区域 -->
|
|
|
|
|
+ <view class="item_child">
|
|
|
|
|
+ <CommentChild v-if="item.commentVoList" :list="item.commentVoList" :commentParentId="info.id" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 评论输入框区域 -->
|
|
|
|
|
+ <view class="body_input">
|
|
|
|
|
+ <view class="input_box">
|
|
|
|
|
+ <input type="text" placeholder="说点什么呢~" @confirm="handleInputPop" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uv-popup>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 点击关联民宿弹窗区域 -->
|
|
|
|
|
+ <uv-popup ref="popup_bind" bgColor="none" :safeAreaInsetBottom="false">
|
|
|
|
|
+ <view class="body_pop">
|
|
|
|
|
+ <!-- 评论总数区域 -->
|
|
|
|
|
+ <view class="pop_title">
|
|
|
|
|
+ 全部
|
|
|
|
|
+ <img class="pop_icon" src="../../static/index/close3.png" @click="handleClosePopBind" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 关联民宿列表区域 -->
|
|
|
|
|
+ <view class="pop_list" v-if="bindList.length">
|
|
|
|
|
+ <!-- 每一个民宿区域 -->
|
|
|
|
|
+ <view class="pop_item_bind" v-for="item in bindList" :key="item.id">
|
|
|
|
|
+ <img mode="aspectFill" :src="item.url" />
|
|
|
|
|
+ <view class="box_detail">
|
|
|
|
|
+ <view class="detail_name">
|
|
|
|
|
+ {{ item.hName }}
|
|
|
|
|
+ <img class="img" src="../../static/index/like.png" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail_leave">
|
|
|
|
|
+ {{ item.hName }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="detail_num">
|
|
|
|
|
+ <view class="num_rate">{{ item.number.toFixed(1) }}分</view>
|
|
|
|
|
+ <view class="num_comment">{{ item.number }}条评论</view>
|
|
|
|
|
+ <view class="num_price">
|
|
|
|
|
+ ¥{{ item.price }}
|
|
|
|
|
+ <text>起</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </uv-popup>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+import CommentChild from '@/components/commentChild2.vue'
|
|
|
|
|
+export default {
|
|
|
|
|
+ components: { CommentChild },
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ // 滚动穿透控制
|
|
|
|
|
+ showPage: false,
|
|
|
|
|
+ hotelId: '',
|
|
|
|
|
+ startTime: '',
|
|
|
|
|
+ endTime: '',
|
|
|
|
|
+ info: null,
|
|
|
|
|
+ commentList: [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 1,
|
|
|
|
|
+ headPhoto: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1374205869tmp_ec40ba855cc6003b2a47877a654dceaf9fc74230a8e9cf25.jpg',
|
|
|
|
|
+ userName: '张三',
|
|
|
|
|
+ dateTime: '2023-09-22 16:54:38',
|
|
|
|
|
+ content: '策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬',
|
|
|
|
|
+ commentVoList: [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 11,
|
|
|
|
|
+ headPhoto: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1374205869tmp_ec40ba855cc6003b2a47877a654dceaf9fc74230a8e9cf25.jpg',
|
|
|
|
|
+ userName: '小王',
|
|
|
|
|
+ commentName: '老六',
|
|
|
|
|
+ dateTime: '2023-09-22 16:54:38',
|
|
|
|
|
+ content: '策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬',
|
|
|
|
|
+ commentVoList: [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 111,
|
|
|
|
|
+ headPhoto: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1374205869tmp_ec40ba855cc6003b2a47877a654dceaf9fc74230a8e9cf25.jpg',
|
|
|
|
|
+ userName: '小王',
|
|
|
|
|
+ commentName: '老六',
|
|
|
|
|
+ dateTime: '2023-09-22 16:54:38',
|
|
|
|
|
+ content: '策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬',
|
|
|
|
|
+ commentVoList: []
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 2,
|
|
|
|
|
+ headPhoto: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/1374205869tmp_ec40ba855cc6003b2a47877a654dceaf9fc74230a8e9cf25.jpg',
|
|
|
|
|
+ userName: '李四',
|
|
|
|
|
+ dateTime: '2023-09-22 16:54:38',
|
|
|
|
|
+ content: '呜呜呜呜呜呜吾问无为谓策划斯哈斯是回家哦啊好啦干哈会离开是尴尬尬',
|
|
|
|
|
+ commentVoList: []
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ bindList: [
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 1,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '开心',
|
|
|
|
|
+ number: 5,
|
|
|
|
|
+ price: 166
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 2,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '健康',
|
|
|
|
|
+ number: 6,
|
|
|
|
|
+ price: 186
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 3,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '幸福',
|
|
|
|
|
+ number: 9,
|
|
|
|
|
+ price: 126
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 4,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '开心',
|
|
|
|
|
+ number: 5,
|
|
|
|
|
+ price: 166
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 5,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '健康',
|
|
|
|
|
+ number: 6,
|
|
|
|
|
+ price: 186
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 6,
|
|
|
|
|
+ url: 'https://chtech.ncjti.edu.cn/hotelReservation/fileload/download/14479079250812_2.jpg',
|
|
|
|
|
+ hName: '幸福',
|
|
|
|
|
+ number: 9,
|
|
|
|
|
+ price: 126
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ onLoad(options) {
|
|
|
|
|
+ this.hotelId = options.id
|
|
|
|
|
+ this.getTimes()
|
|
|
|
|
+ this.getHotelInfo()
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ // 获取民宿信息
|
|
|
|
|
+ async getHotelInfo(id) {
|
|
|
|
|
+ const res = await this.$myRequest({
|
|
|
|
|
+ url: '/mhotel/ahpgetHouseByHotelId.action',
|
|
|
|
|
+ data: {
|
|
|
|
|
+ hotelId: id ? id : this.hotelId,
|
|
|
|
|
+ userId: uni.getStorageSync('userInfo').id,
|
|
|
|
|
+ queryStartTime: this.startTime,
|
|
|
|
|
+ queryEndTime: this.endTime
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ // console.log(res)
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ this.info = res.data.data
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击轮播图图片回调
|
|
|
|
|
+ handleClickSwiper(urls, current) {
|
|
|
|
|
+ const temList = urls.map((ele) => ele.url)
|
|
|
|
|
+ uni.previewImage({
|
|
|
|
|
+ urls: temList,
|
|
|
|
|
+ current
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ handleInput(e) {
|
|
|
|
|
+ console.log(e)
|
|
|
|
|
+ console.log(999)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 评论弹窗输入框回调
|
|
|
|
|
+ handleInputPop(e) {
|
|
|
|
|
+ console.log(e)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击底部tab评论按钮回调
|
|
|
|
|
+ handleClickComment() {
|
|
|
|
|
+ this.showPage = true
|
|
|
|
|
+ this.$refs.popup.open('bottom')
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击评论弹窗关闭图标回调
|
|
|
|
|
+ handleClosePop() {
|
|
|
|
|
+ this.showPage = false
|
|
|
|
|
+ this.$refs.popup.close()
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击关联民宿查看全部按钮回调
|
|
|
|
|
+ handleClickALL() {
|
|
|
|
|
+ this.showPage = true
|
|
|
|
|
+ this.$refs.popup_bind.open('bottom')
|
|
|
|
|
+ },
|
|
|
|
|
+ // 点击关联民宿弹窗关闭图标回调
|
|
|
|
|
+ handleClosePopBind() {
|
|
|
|
|
+ this.showPage = false
|
|
|
|
|
+ this.$refs.popup_bind.close()
|
|
|
|
|
+ },
|
|
|
|
|
+ handleGoPage(url) {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ handleComment() {},
|
|
|
|
|
+ // 获取今明两天的日期 YYYY-MM-DD
|
|
|
|
|
+ getTimes() {
|
|
|
|
|
+ // 今天
|
|
|
|
|
+ let today = new Date()
|
|
|
|
|
+ // 明天
|
|
|
|
|
+ let tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)
|
|
|
|
|
+ let late = new Date(today.getTime() + 24 * 60 * 60 * 1000 * 14)
|
|
|
|
|
+
|
|
|
|
|
+ this.startTime = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, 0)}-${today.getDate().toString().padStart(2, 0)}`
|
|
|
|
|
+ this.endTime = `${tomorrow.getFullYear()}-${(tomorrow.getMonth() + 1).toString().padStart(2, 0)}-${tomorrow.getDate().toString().padStart(2, 0)}`
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+.container {
|
|
|
|
|
+ min-height: 100vh;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .author {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ height: 100rpx;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 50rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .author_name {
|
|
|
|
|
+ margin-left: 15rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .author_btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ width: 107rpx;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ color: #096562;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ border-radius: 69rpx;
|
|
|
|
|
+ border: 1rpx solid #096562;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .swiper {
|
|
|
|
|
+ height: 495rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .swiper_item {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 440rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tweet {
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
|
+
|
|
|
|
|
+ .tweet_title {
|
|
|
|
|
+ line-height: 50rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tweet_msg {
|
|
|
|
|
+ margin-top: 10rpx;
|
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tweet_info {
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ height: 55rpx;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .and {
|
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
|
+
|
|
|
|
|
+ .and_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 150rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 126rpx;
|
|
|
|
|
+ height: 150rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_detail {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-evenly;
|
|
|
|
|
+ padding: 0 23rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .detail_name {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail_leave {
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail_num {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .num_rate {
|
|
|
|
|
+ color: #ff5733;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .num_comment {
|
|
|
|
|
+ margin-left: 15rpx;
|
|
|
|
|
+ color: #a6a6a6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .num_price {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #ff5733;
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ margin-left: 5rpx;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #a6a6a6;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .and_all {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ color: #096562;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .like {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ height: 108rpx;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .like_text {
|
|
|
|
|
+ margin-left: 18rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .total {
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ line-height: 60rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .input_box {
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 66rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ border-radius: 47rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+
|
|
|
|
|
+ input {
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding: 0 33rpx;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .comment_list {
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .comment_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding-top: 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .box_left {
|
|
|
|
|
+ width: 75rpx;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 60rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_right {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
|
+
|
|
|
|
|
+ .right_name {
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ }
|
|
|
|
|
+ .right_content {
|
|
|
|
|
+ margin-top: 12rpx;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ }
|
|
|
|
|
+ .right_time {
|
|
|
|
|
+ margin: 12rpx 0 20rpx;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .comment_all {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
|
+ color: #096562;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .related {
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ padding-bottom: 130rpx;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .related_title {
|
|
|
|
|
+ line-height: 105rpx;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ }
|
|
|
|
|
+ .related_list {
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
|
|
+ grid-auto-rows: auto;
|
|
|
|
|
+ gap: 40rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .related_box {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 335rpx;
|
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 335rpx;
|
|
|
|
|
+ height: 463rpx;
|
|
|
|
|
+ border-radius: 10rpx 10rpx 0 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_content {
|
|
|
|
|
+ padding: 10rpx 60rpx 10rpx 20rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_info {
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 50rpx;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info_name {
|
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .img2 {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ width: 28rpx;
|
|
|
|
|
+ height: 28rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .info_count {
|
|
|
|
|
+ margin-left: 5rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_town {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 405rpx;
|
|
|
|
|
+ left: 22rpx;
|
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 43rpx;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ border-radius: 42rpx;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-evenly;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 110rpx;
|
|
|
|
|
+ border-top: 1rpx solid #e6e6e6;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .tab_box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ width: 200rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
|
+ width: 45rpx;
|
|
|
|
|
+ height: 45rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .img2 {
|
|
|
|
|
+ margin-right: 10rpx;
|
|
|
|
|
+ width: 35rpx;
|
|
|
|
|
+ height: 35rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .body_pop {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ max-height: 955rpx;
|
|
|
|
|
+ border-radius: 22rpx 22rpx 0 0;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+
|
|
|
|
|
+ .pop_title {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 110rpx;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .pop_icon {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 35rpx;
|
|
|
|
|
+ right: 35rpx;
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pop_list {
|
|
|
|
|
+ padding: 110rpx 20rpx 30rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .pop_item {
|
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
|
+ padding-bottom: 10rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
|
|
+
|
|
|
|
|
+ .item_user {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 70rpx;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 60rpx;
|
|
|
|
|
+ height: 60rpx;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .user_info {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-left: 18rpx;
|
|
|
|
|
+ height: 70rpx;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item_content {
|
|
|
|
|
+ margin-left: 80rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .content_top {
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .content_bottom {
|
|
|
|
|
+ margin: 10rpx 0;
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .content_key {
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .item_child {
|
|
|
|
|
+ margin-left: 50rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pop_item_bind {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ height: 150rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 126rpx;
|
|
|
|
|
+ height: 150rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box_detail {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: space-evenly;
|
|
|
|
|
+ padding: 0 23rpx;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .detail_name {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+
|
|
|
|
|
+ .img {
|
|
|
|
|
+ width: 40rpx;
|
|
|
|
|
+ height: 40rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail_leave {
|
|
|
|
|
+ color: #808080;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .detail_num {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .num_rate {
|
|
|
|
|
+ color: #ff5733;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .num_comment {
|
|
|
|
|
+ margin-left: 15rpx;
|
|
|
|
|
+ color: #a6a6a6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .num_price {
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #ff5733;
|
|
|
|
|
+
|
|
|
|
|
+ text {
|
|
|
|
|
+ margin-left: 5rpx;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ color: #a6a6a6;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .body_input {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 118rpx;
|
|
|
|
|
+ border-top: 1rpx solid #cccccc;
|
|
|
|
|
+ background-color: #fff;
|
|
|
|
|
+
|
|
|
|
|
+ .input_box {
|
|
|
|
|
+ width: 710rpx;
|
|
|
|
|
+ border-radius: 77rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
|
+
|
|
|
|
|
+ input {
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|