867 lines
23 KiB
Vue
867 lines
23 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="true" :title="userobj.nickName" :border-bottom="false" :background="bgc" title-color='#333'
|
||
title-size='44' height='40'></u-navbar>
|
||
</u-navbar>
|
||
<!-- 头部 -->
|
||
<view class="avattop">
|
||
<button>
|
||
<image :src="imageSrc" mode=""></image>
|
||
</button>
|
||
<view class="name"> {{userobj.nickName == undefined ? '' : userobj.nickName}} </view>
|
||
</view>
|
||
<view class="tongji">
|
||
<view class="">
|
||
<text class="cu">{{obj.focusCount == undefined ? 0 : obj.focusCount}}</text>
|
||
<text class="xi">关注</text>
|
||
</view>
|
||
<view class="">
|
||
<text class="cu">{{obj.fansCount == undefined ? 0 : obj.fansCount}}</text>
|
||
<text class="xi">粉丝</text>
|
||
</view>
|
||
<view class="">
|
||
<text class="cu">{{obj.friendCount == undefined ? 0 : obj.friendCount}}</text>
|
||
<text class="xi">朋友</text>
|
||
</view>
|
||
<view class="">
|
||
<text class="cu">{{obj.likeCount == undefined ? 0 : obj.likeCount}}</text>
|
||
<text class="xi">获赞</text>
|
||
</view>
|
||
<view class="" style="width: 30%;"></view>
|
||
</view>
|
||
<view class="bot">
|
||
<view class="nav">
|
||
<view :class="['nav-item', currentTab === 0 ? 'active' : '']" @tap="switchTab(0)">笔记</view>
|
||
<view :class="['nav-item', currentTab === 1 ? 'active' : '']" @tap="switchTab(1)">喜欢</view>
|
||
</view>
|
||
<swiper class="feed-swiper" :current="currentTab" :circular="false" duration="300" @change="onSwiperChange">
|
||
<swiper-item>
|
||
<scroll-view class="feed" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
||
<view class="waterfall-container">
|
||
<view class="waterfall-left">
|
||
<view class="demo-warter" v-for="(item, index) in feedLists.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load
|
||
v-if="!isVideo(firstMedia(item))"
|
||
threshold="-450"
|
||
border-radius="0"
|
||
:image="firstMedia(item)"
|
||
:index="index"
|
||
></u-lazy-load>
|
||
<view v-else class="video-holder">
|
||
<video
|
||
class="feed-video"
|
||
:src="firstMedia(item)"
|
||
:poster="item.cover || firstMedia(item)"
|
||
autoplay
|
||
controls
|
||
playsinline
|
||
webkit-playsinline
|
||
muted
|
||
></video>
|
||
</view>
|
||
<view class="dizhi">
|
||
{{item.title && item.title.length > 10 ? item.title.slice(0,20) + '...' : item.title}}
|
||
</view>
|
||
<view class="cont">
|
||
<view class="lt">
|
||
<image :src="item.userAvatar" mode="aspectFill"></image>
|
||
{{item.nickName && item.nickName.length > 4 ? item.nickName.slice(0,20) + '...' : item.nickName}}
|
||
</view>
|
||
<view class="rt">
|
||
<image v-if="item.isLiked == true" src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
|
||
<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uypbgeMkBQw7XWmzKmm6" mode=""></image>
|
||
{{ item.likes }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="waterfall-right">
|
||
<view class="demo-warter" v-for="(item, index) in feedLists.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load
|
||
v-if="!isVideo(firstMedia(item))"
|
||
threshold="-450"
|
||
border-radius="0"
|
||
:image="firstMedia(item)"
|
||
:index="index"
|
||
></u-lazy-load>
|
||
<view v-else class="video-holder">
|
||
<video
|
||
class="feed-video"
|
||
:src="firstMedia(item)"
|
||
:poster="item.cover || firstMedia(item)"
|
||
autoplay
|
||
controls
|
||
playsinline
|
||
webkit-playsinline
|
||
muted
|
||
></video>
|
||
</view>
|
||
<view class="dizhi">
|
||
{{item.title && item.title.length > 10 ? item.title.slice(0,20) + '...' : item.title}}
|
||
</view>
|
||
<view class="cont">
|
||
<view class="lt">
|
||
<image :src="item.userAvatar" mode="aspectFill"></image>
|
||
{{item.nickName && item.nickName.length > 4 ? item.nickName.slice(0,20) + '...' : item.nickName}}
|
||
</view>
|
||
<view class="rt">
|
||
<image v-if="item.isLiked == true" src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
|
||
<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uypbgeMkBQw7XWmzKmm6" mode=""></image>
|
||
{{ item.likes }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||
当前没有更多关注动态咯...
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
<swiper-item>
|
||
<scroll-view class="feed" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
||
<view class="waterfall-container">
|
||
<view class="waterfall-left">
|
||
<view class="demo-warter" v-for="(item, index) in feedList.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load
|
||
v-if="!isVideo(firstMedia(item))"
|
||
threshold="-450"
|
||
border-radius="0"
|
||
:image="firstMedib(item)"
|
||
:index="index"
|
||
></u-lazy-load>
|
||
<view v-else class="video-holder">
|
||
<video
|
||
class="feed-video"
|
||
:src="firstMedib(item)"
|
||
:poster="item.cover || firstMedia(item)"
|
||
autoplay
|
||
controls
|
||
playsinline
|
||
webkit-playsinline
|
||
muted
|
||
></video>
|
||
</view>
|
||
<view class="dizhi">
|
||
{{item.bstName && item.bstName.length > 10 ? item.bstName.slice(0,20) + '...' : item.bstName}}
|
||
</view>
|
||
<view class="cont">
|
||
<view class="lt">
|
||
<image :src="item.bstUserAvatar" mode="aspectFill"></image>
|
||
{{ item.bstUserName && item.bstUserName.length > 4 ? item.bstUserName.slice(0,20) + '...' : item.bstUserName}}
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="waterfall-right">
|
||
<view class="demo-warter" v-for="(item, index) in feedList.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
|
||
<u-lazy-load
|
||
v-if="!isVideo(firstMedib(item))"
|
||
threshold="-450"
|
||
border-radius="0"
|
||
:image="firstMedib(item)"
|
||
:index="index"
|
||
></u-lazy-load>
|
||
<view v-else class="video-holder">
|
||
<video
|
||
class="feed-video"
|
||
:src="firstMedib(item)"
|
||
:poster="item.cover || firstMedib(item)"
|
||
autoplay
|
||
controls
|
||
playsinline
|
||
webkit-playsinline
|
||
muted
|
||
></video>
|
||
</view>
|
||
<view class="dizhi">
|
||
{{item.bstName && item.bstName.length > 10 ? item.bstName.slice(0,20) + '...' : item.bstName}}
|
||
</view>
|
||
<view class="cont">
|
||
<view class="lt">
|
||
<image :src="item.bstUserAvatar" mode="aspectFill"></image>
|
||
{{item.bstUserName && item.bstUserName.length > 4 ? item.bstUserName.slice(0,20) + '...' : item.bstUserName}}
|
||
</view>
|
||
<view class="rt">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||
当前没有更多数据咯...
|
||
</view>
|
||
</scroll-view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- <tab-bar :indexs='2'></tab-bar> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#E2EFDF",
|
||
},
|
||
userobj:{},
|
||
imageSrc:'',
|
||
token:'',
|
||
picdomain:'',
|
||
logoflag:true,
|
||
currentTab: 1,
|
||
feedList: [],//喜欢
|
||
feedLists: [],//笔记
|
||
pageNum:1,
|
||
total:0,
|
||
isRefreshing:false,
|
||
obj:{},
|
||
userId:''
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '绿小能',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '绿小能',
|
||
query: '',
|
||
path: '/pages/index/index'
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
console.log(option);
|
||
this.userId = option.id
|
||
this.pageNum = 1
|
||
this.getinfo()
|
||
this.gettiken()
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
methods: {
|
||
// 请求关注粉丝统计
|
||
getgzfslist(){
|
||
this.$u.get(`/app/user/${this.userId}`).then(res => {
|
||
if(res.code == 200){
|
||
this.obj = res.data
|
||
}
|
||
})
|
||
},
|
||
// 请求笔记列表
|
||
geibiji(){
|
||
this.$u.get(`/app/feed/list?userId=${this.userId}&pageNum=${this.pageNum}&pageSize=20`).then(res =>{
|
||
if(res.code == 200){
|
||
this.total = res.total
|
||
if(this.pageNum == 1){
|
||
this.feedLists = res.rows
|
||
}else{
|
||
this.feedLists = this.feedLists.concat(res.rows)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 请求点赞的动态列表
|
||
getzdlist(){
|
||
this.$u.get(`/app/like/list?userId=${this.userId}&bstType=1&pageNum=${this.pageNum}&pageSize=20`).then(res =>{
|
||
if(res.code == 200){
|
||
this.total = res.total
|
||
if(this.pageNum == 1){
|
||
this.feedList = res.rows
|
||
this.pageNum ++
|
||
}else{
|
||
this.feedList = this.feedList.concat(res.rows)
|
||
this.pageNum ++
|
||
}
|
||
console.log(this.feedList);
|
||
}
|
||
})
|
||
},
|
||
// 点击图文进行跳转详情
|
||
btngonglue(item){
|
||
console.log(item);
|
||
uni.navigateTo({
|
||
url:'/page_user/dongtai/dongtaixq?id=' + item.id
|
||
})
|
||
},
|
||
// 点击关注，粉丝，朋友跳转
|
||
btnjy(num){
|
||
if(num == 1){
|
||
uni.navigateTo({
|
||
url:'/page_newyemian/gereninfo/guanzhu'
|
||
})
|
||
}else if(num == 2){
|
||
uni.navigateTo({
|
||
url:'/page_newyemian/gereninfo/fensi'
|
||
})
|
||
}else if(num == 3){
|
||
uni.navigateTo({
|
||
url:'/page_newyemian/gereninfo/pengyou'
|
||
})
|
||
}
|
||
},
|
||
// 点击昵称修改名称
|
||
editName(){
|
||
const currentName = this.userobj.nickName || ''
|
||
uni.showModal({
|
||
title: '修改昵称',
|
||
editable: true,
|
||
placeholderText: '请输入昵称',
|
||
content: currentName,
|
||
confirmText: '保存',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const newName = (res.content || '').trim()
|
||
if (newName.length > 10) {
|
||
uni.showToast({
|
||
title: '名称已超过限制',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}else{
|
||
if (!newName || newName === currentName) return
|
||
this.$u.put(`/app/user/updateBasicInfo`, { nickName: newName }).then((r) => {
|
||
if (r.code === 200) {
|
||
this.getinfo()
|
||
uni.showToast({ title: '已更新', icon: 'success',duration:3000})
|
||
}else if(res.code == 401){
|
||
uni.reLaunch({
|
||
url:'/pages/login/login'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 判断获取的数据是否为视频（通过后缀名）
|
||
isVideo(url) {
|
||
if (!url || typeof url !== 'string') return false
|
||
const lower = url.split('?')[0].toLowerCase()
|
||
return ['.mp4','.mov','.m4v','.mkv','.avi','.wmv','.flv','.webm','.3gp'].some(ext => lower.endsWith(ext))
|
||
},
|
||
firstMedia(item) {
|
||
if (!item || !item.picture) return ''
|
||
if (Array.isArray(item.picture)) {
|
||
return item.picture[0] || ''
|
||
}
|
||
return item.picture.split(',').map(url => url.trim()).find(url => !!url) || ''
|
||
},
|
||
firstMedib(item) {
|
||
if (!item || !item.bstPicture) return ''
|
||
if (Array.isArray(item.bstPicture)) {
|
||
return item.bstPicture[0] || ''
|
||
}
|
||
return item.bstPicture.split(',').map(url => url.trim()).find(url => !!url) || ''
|
||
},
|
||
// 头部tab点击切换
|
||
switchTab(index) {
|
||
this.currentTab = index
|
||
this.pageNum = 1
|
||
},
|
||
// 轮播图左右滑动切换事件
|
||
onSwiperChange(e) {
|
||
this.currentTab = e.detail.current
|
||
this.pageNum = 1
|
||
if(e.detail.current == 1){
|
||
this.getzdlist()
|
||
}else if(e.detail.current == 0){
|
||
this.geibiji()
|
||
}
|
||
},
|
||
// 上拉加载更多数据
|
||
handqixing() {
|
||
console.log('底部');
|
||
if(this.currentTab == 1){
|
||
if(this.feedList.length < this.total){
|
||
this.getzdlist()
|
||
}
|
||
}else if(this.currentTab == 0){
|
||
if(this.feedLists.length < this.total){
|
||
this.geibiji()
|
||
}
|
||
}
|
||
},
|
||
// 下拉刷新最新的数据
|
||
onRefresh() {
|
||
this.isRefreshing = true
|
||
setTimeout(() => {
|
||
this.pageNum = 1
|
||
this.isRefreshing = false
|
||
if(this.currentTab == 1){
|
||
this.getzdlist()
|
||
}else if(this.currentTab == 0){
|
||
this.geibiji()
|
||
}
|
||
}, 300)
|
||
},
|
||
// 点击设置进行跳转
|
||
btnsz(){
|
||
uni.navigateTo({
|
||
url:'/page_newyemian/sehzhi'
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getinfo() {
|
||
this.$u.get(`/app/user/${this.userId}`).then((res) => {
|
||
if (res.code == 200) {
|
||
this.userobj = res.data
|
||
this.getzdlist()
|
||
this.getgzfslist()
|
||
this.imageSrc = res.data.avatar
|
||
this.logoflag = false
|
||
}else if(res.code == 401){
|
||
this.logoflag = true
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您还未登录，是否前去登录？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取七牛云token
|
||
gettiken() {
|
||
this.$u.get("/common/qiniu/uploadInfo").then(res => {
|
||
this.token = res.token
|
||
this.picdomain = res.domain
|
||
})
|
||
},
|
||
// 获取修改头像
|
||
getImage(e){
|
||
let that = this
|
||
uni.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
filePath: e.detail.avatarUrl,
|
||
name: 'file',
|
||
header: {
|
||
accept: 'application/json'
|
||
},
|
||
formData: {
|
||
token: that.token,
|
||
},
|
||
success: (res) => {
|
||
that.imageSrc = that.picdomain + '/' + JSON.parse(res.data).key
|
||
console.log(that.imageSrc);
|
||
let data = {
|
||
avatar:that.imageSrc
|
||
}
|
||
that.$u.put(`/app/user/updateBasicInfo`,data).then(res => {
|
||
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 跳转意见反馈
|
||
btnyjfk(){
|
||
uni.navigateTo({
|
||
url:'/page_user/opinion'
|
||
})
|
||
},
|
||
// 跳转帮助与客服
|
||
btnkf(){
|
||
uni.navigateTo({
|
||
url:'/page_user/kefu'
|
||
})
|
||
},
|
||
// 跳转到详情
|
||
btnxq(num){
|
||
if(num == 1){
|
||
uni.navigateTo({
|
||
url:'/page_user/yinsixq?tit=' + '隐私政策' + '&id=' + 2
|
||
})
|
||
}else if(num == 2){
|
||
uni.navigateTo({
|
||
url:'/page_user/yinsixq?tit=' + '用户协议' + '&id=' + 1
|
||
})
|
||
}else if(num == 3){
|
||
uni.navigateTo({
|
||
url:'/page_user/yinsixq?tit=' + '关于我们' + '&id=' + 3
|
||
})
|
||
}else if(num == 4){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您确定要退出登录吗？',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
uni.clearStorage().then(() => {
|
||
// 成功清空所有本地存储
|
||
console.log('所有本地存储数据已清空')
|
||
}).catch((error) => {
|
||
// 处理错误
|
||
console.error('清空本地存储失败', error)
|
||
})
|
||
uni.reLaunch({
|
||
url:'/pages/login/login'
|
||
})
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #E2EFDF;
|
||
box-sizing: border-box;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
.waterfall-container {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
padding: 0 20rpx;
|
||
.waterfall-left,
|
||
.waterfall-right {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.demo-warter {
|
||
border-radius: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
background-color: #ffffff;
|
||
padding-bottom: 20rpx;
|
||
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.1);
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.video-holder{
|
||
width: 100%;
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
overflow: hidden;
|
||
background-color: #000;
|
||
}
|
||
.feed-video{
|
||
width: 100%;
|
||
display: block;
|
||
object-fit: cover;
|
||
}
|
||
.shuju{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
justify-content: flex-end;
|
||
view{
|
||
font-size: 14rpx;
|
||
color: #3D3D3D;
|
||
margin-left: 32rpx;
|
||
image{
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.cont{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
padding: 0 18rpx;
|
||
margin-top: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.lt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.rt{
|
||
display: flex;
|
||
align-items: center;
|
||
image{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 8rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.dizhi{
|
||
margin-top: 16rpx;
|
||
padding-left: 18rpx;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
.bot{
|
||
width: 100%;
|
||
height: 74vh;
|
||
background: #fff;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin-top: 30rpx;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
overflow: hidden;
|
||
.nav {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 70rpx;
|
||
margin-bottom: 20rpx;
|
||
padding-top: 20rpx;
|
||
.nav-item {
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
padding: 12rpx 6rpx;
|
||
&.active {
|
||
color: #48893B !important;
|
||
position: relative;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
}
|
||
.feed-swiper { flex: 1;height: 63vh;overflow: scroll; }
|
||
.feed {
|
||
width: 750rpx;
|
||
margin: auto;
|
||
height: 63vh;
|
||
overflow: scroll;
|
||
padding-bottom: 100rpx;
|
||
.feed-card {
|
||
padding: 24rpx 40rpx;
|
||
box-sizing: border-box;
|
||
.card-header {
|
||
display: flex;
|
||
.avatar {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 50%;
|
||
margin-right: 16rpx;
|
||
}
|
||
.meta { flex: 1; }
|
||
.name-row { display: flex; align-items: center; justify-content: space-between; }
|
||
.name { font-weight: 600; color: #333; }
|
||
.follow-btn {
|
||
padding: 6rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
background: #00c27a;
|
||
color: #fff;
|
||
&.followed { background: #f0f0f0; color: #666; }
|
||
}
|
||
.time { color: #999; font-size: 24rpx; }
|
||
}
|
||
.card-content {
|
||
margin-top: 12rpx;
|
||
padding-left: 90rpx;
|
||
.text { color: #333; }
|
||
.thumb { width: 98px; height: 98px; border-radius: 12rpx; margin-top: 12rpx; }
|
||
.video-thumb { width: 98px; height: 98px; margin-top: 12rpx; border-radius: 12rpx; overflow: hidden; }
|
||
.video-thumb video { width: 98px; height: 98px; object-fit: cover; display: block; }
|
||
// 单图：等比缩放，最大宽度100%
|
||
.thumb-single {
|
||
margin-top: 12rpx;
|
||
image { width: 98px; height: 98px; border-radius: 12rpx; display: block; }
|
||
video { width: 98px; height: 98px; border-radius: 12rpx; object-fit: cover; display: block; }
|
||
}
|
||
// 多图：正方形九宫格，自适应裁剪
|
||
.thumb-grid {
|
||
margin-top: 12rpx;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 98px);
|
||
gap: 10rpx;
|
||
.grid-item {
|
||
position: relative;
|
||
width: 98px; height: 98px;
|
||
image, video {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
width: 98px; height: 98px;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dizhi{
|
||
font-weight: 600;
|
||
font-size: 26rpx;
|
||
color: #1EC28B;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 10rpx;
|
||
padding-left: 90rpx;
|
||
.qian{
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.hou{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
.card-actions {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 32rpx;
|
||
color: #666;
|
||
padding-left: 90rpx;
|
||
image{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.action { display: flex; align-items: center; }
|
||
.num { margin-left: 8rpx; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tongji{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 690rpx;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
image{
|
||
width: 106rpx;
|
||
height: 66rpx;
|
||
}
|
||
view{
|
||
text-align: center;
|
||
.cu{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
display: block;
|
||
}
|
||
.xi{
|
||
font-size: 28rpx;
|
||
color: #767676;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
button{
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
border-radius: 50%;
|
||
background-color: #D8D8D8;
|
||
position: relative;
|
||
left: -260rpx;
|
||
image{
|
||
border-radius: 50%;
|
||
width: 136rpx;
|
||
height: 136rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
.zhengce{
|
||
width: 670rpx;
|
||
height: 420rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
||
margin-top: 28rpx;
|
||
border-radius: 20rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
box-sizing: border-box;
|
||
view{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
padding-bottom: 28rpx;
|
||
box-sizing: border-box;
|
||
padding-top: 28rpx;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
image{
|
||
width: 18rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.avattop{
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 40rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
.name{
|
||
position: absolute;
|
||
left: 220rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.kefu{
|
||
width: 690rpx;
|
||
height: 166rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
|
||
border-radius: 20rpx;
|
||
padding: 42rpx 22rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: auto;
|
||
margin-top: 32rpx;
|
||
.lt{
|
||
text-align: left;
|
||
width: 48%;
|
||
.ltxx{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
.one{
|
||
.ones{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
font-weight: 600;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
}
|
||
image{
|
||
width: 84rpx;
|
||
height: 84rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |