<template>
|
<!-- <view :class="['app', theme]"> -->
|
<view>
|
<view class="page">
|
<u-sticky bgColor="#fff">
|
<view class="card-footer">
|
<view class="user-info">
|
<u-avatar :src="user.avatar" size="60" shape="circle" />
|
<view class="user-text">
|
<text class="nickname">{{ user.username }}</text>
|
<!-- <text class="date">{{ item.date }}</text> -->
|
</view>
|
</view>
|
<view class="opera-info">
|
|
<button class="custom-btn">关注</button>
|
|
<u-icon name="/static/common/share2.png" size="40" color="#999" />
|
</view>
|
</view>
|
</u-sticky>
|
<scroll-view class="content" scroll-y>
|
<view class="swiper-container">
|
<swiper :current="currentNum" @change="onSwiperChange" circular :autoplay="false"
|
class="custom-swiper">
|
<swiper-item v-for="(item, index) in list6" :key="index" class="swiper-item">
|
<image :src="item" mode="aspectFill" class="swiper-image" @tap="previewImage(index)" />
|
</swiper-item>
|
</swiper>
|
|
<!-- 自定义右上角索引 -->
|
<view class="indicator-num">
|
<text class="indicator-num__text">
|
{{ currentNum + 1 }}/{{ list6.length }}
|
</text>
|
|
</view>
|
</view>
|
|
|
<view class="article-content">
|
<view class="title content-item">
|
<text>我是标题标题我是标题标题我是标题标题我是标题标题</text>
|
</view>
|
|
<view class="content-item">
|
<rich-text :nodes="desc"></rich-text>
|
</view>
|
<view class="annotation content-item">
|
<text>4分钟前 美国</text>
|
</view>
|
</view>
|
|
<u-line></u-line>
|
|
<view class="comment">
|
|
<view class="writer-view">
|
<u-icon name="chat-fill" size="60" @click="showCommentLayer"></u-icon>
|
<view class="comment-operation" @click="showCommentLayer">
|
<u-text size="12px" text="说点什么......" margin="0rpx 0rpx 0rpx 20rpx"
|
color="#B9B9B9"></u-text>
|
</view>
|
</view>
|
|
|
<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="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-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>
|
<comment-popup v-model="commentShow" />
|
</view>
|
</template>
|
<script>
|
|
export default {
|
components: {
|
|
},
|
data() {
|
return {
|
commentShow: false,
|
commentContent: '',
|
value1: 0,
|
current: 0,
|
currentNum: 0,
|
desc: `😭……
|
刚从新疆旅游回来，真的踩了好多坑！！打算假期去新疆的姐妹们一定要做好攻略再来！！
|
真的会少踩很多坑！熬夜整理这篇作为普通游客的避坑建议，一定要先看看！！
|
.
|
✅【新疆全年玩法】
|
🚩11-3月：北疆喀纳斯、禾木玩雪；南疆慕士塔格冰川、喀什古城
|
🚩4-5月：伊犁土尔根杏花沟；南疆帕米尔杏花、大西沟杏花、库里塔格沙漠
|
🚩6-8月：伊犁那拉提草原、喀拉峻草原、赛里木湖、独库公路、喀纳斯
|
🚩9-10月：北疆喀纳斯、禾木；南疆胡杨林、罗布人村寨
|
.
|
❇️【自驾or跟团】
|
✔️新疆每天路程比较远，自驾可能有点累，而且景点比较分散，可以选择报个小团，都是年轻人，玩的也自由。
|
❌不建议大团喔，人多且很多时间在等人，并且有好看的风景不能随走随停！
|
.
|
🚘【路线推荐】
|
✨D1：乌市—S201沙漠公路—乌伦古湖—五彩滩一布尔津
|
✨D2：布尔津—禾木桥—禾木村—禾木星空—住禾木
|
✨D3：禾木一观鱼亭一神仙湾月亮湾卧龙湾一住贾登峪/喀纳斯
|
✨D4：贾登峪一乌尔禾魔鬼城—乌尔禾
|
✨D5：乌尔禾一赛里木湖一果子沟大桥—清水河
|
✨D6：清水河—琼库什台-住特克斯
|
✨D7：琼库什台—那拉提
|
✨D8：那拉提—独库公路北段—唐布拉百里画廊—乌鲁木齐<br/>
|
.
|
#新疆是个好地方 #新疆旅行攻略 #新疆旅游 #不翻车旅行 #新疆小团 #新疆定制游 #旅游不踩坑 #新疆环线`,
|
user: {
|
id: 3,
|
username: '图墙精选',
|
avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
|
},
|
list6: [
|
"https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg",
|
"https://img.yzcdn.cn/vant/cat.jpeg",
|
"https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg",
|
],
|
inputValue: '',
|
urls2: [
|
"https://img.yzcdn.cn/vant/cat.jpeg"
|
],
|
}
|
},
|
onLoad(options) {
|
// 尝试读取缓存设置的主题
|
console.log("theme", uni.getStorageSync('theme'))
|
const theme = uni.getStorageSync('theme') || 'light'
|
this.theme = theme
|
|
|
},
|
methods: {
|
onSwiperChange(e) {
|
this.currentNum = e.detail.current;
|
},
|
previewImage(index) {
|
uni.previewImage({
|
current: this.list6[index],
|
urls: this.list6
|
});
|
},
|
click1(e) { console.log('click1', e); },
|
submitComment() {
|
if (!this.inputValue) return;
|
this.comments.push(this.inputValue);
|
this.inputValue = '';
|
},
|
|
showCommentLayer(e) {
|
this.commentShow = true
|
},
|
open() {
|
// console.log('open');
|
},
|
close() {
|
this.commentShow = false
|
// console.log('close');
|
}
|
|
}
|
}
|
</script>
|
|
<style scoped>
|
.page {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #fff;
|
}
|
|
.swiper-container {
|
position: relative;
|
width: 100%;
|
height: 500rpx;
|
}
|
|
.custom-swiper {
|
width: 100%;
|
height: 100%;
|
}
|
|
.swiper-item {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
|
}
|
|
.swiper-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.indicator-num {
|
position: absolute;
|
top: 20rpx;
|
right: 20rpx;
|
padding: 4rpx 12rpx;
|
background-color: rgba(0, 0, 0, 0.4);
|
border-radius: 20rpx;
|
}
|
|
.indicator-num__text {
|
color: #fff;
|
font-size: 24rpx;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.card-footer {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 10rpx;
|
background-color: #FFFFFF;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
|
.user-text {
|
font-size: 30rpx;
|
line-height: 30px;
|
margin-left: 10rpx;
|
|
.nickname {
|
font-weight: bold;
|
display: block;
|
color: #646464;
|
letter-spacing: 2rpx;
|
}
|
|
.date {
|
font-size: 12px;
|
color: #aaa;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
.opera-info {
|
display: flex;
|
align-items: center;
|
|
text {
|
margin-left: 10rpx;
|
font-size: 12px;
|
}
|
}
|
|
.content {
|
.annotation {
|
margin-top: 10rpx;
|
font-size: 20rpx;
|
color: #646464;
|
}
|
}
|
|
.comment {
|
margin: 10rpx;
|
|
// border-top: 1rpx solid #EBEBEB;
|
.writer-view {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.comment-operation {
|
font-size: 18rpx;
|
background-color: #F4F4F6;
|
height: 30px;
|
line-height: 30px;
|
border-radius: 20px;
|
width: 92%;
|
}
|
}
|
|
|
}
|
|
.article-content {
|
padding: 10rpx;
|
font-size: 32rpx;
|
letter-spacing: 1rpx;
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
|
.content-item {
|
margin-bottom: 20rpx;
|
}
|
}
|
|
|
.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-popup {
|
margin: 20rpx;
|
|
.comment-btn-view {
|
margin-top: 20rpx;
|
display: flex;
|
justify-content: space-between;
|
}
|
.comment-btn-icon{
|
display: flex;
|
}
|
.comment-btn{
|
|
}
|
}
|
</style>
|
|
|
<style scoped>
|
.custom-btn {
|
/* background-color: #ff4d4f; */
|
margin: 0 10rpx;
|
/* 自定义背景色 */
|
color: #ff4d4f;
|
/* 字体颜色 */
|
font-size: 20rpx;
|
/* 字体大小 */
|
border-radius: 50rpx;
|
/* 圆角 */
|
padding: 10rpx 20rpx;
|
/* 内边距 */
|
border: 1px solid #ff4d4f;
|
/* 去除边框 */
|
line-height: 1;
|
}
|
|
.custom-btn::after {
|
border: none;
|
/* 去除点击阴影边框 */
|
}
|
</style>
|
|
<style scoped>
|
.page {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.content {
|
flex: 1;
|
overflow-y: auto;
|
padding-bottom: 80rpx;
|
/* 留出评论区高度，避免遮挡 */
|
}
|
</style>
|
