You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1015 lines
30 KiB
1015 lines
30 KiB
<template>
|
|
<view class="attention overflow-hd">
|
|
<view class="attention-h">
|
|
<view class="nav-bar">
|
|
<view class="nav_max" :style="{'width': titleWidth}">
|
|
<view class="attention-scarch flex al-item-center" @click="search">
|
|
<view class="input_box flex">
|
|
<text class="iconfont icon-search"></text>
|
|
<!-- <input disabled="true" placeholder="大家都在搜..." type="text" v-model="searchVlaue" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex flex1 j-center">
|
|
<view class="item position-r" @tap="goto" data-url='/diary/attention/attention' data-opentype="redirectTo">
|
|
<text class="txt font-w">关注</text>
|
|
<text class="heng position-a"></text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/evernote/evernote' data-opentype="redirectTo">
|
|
<text class="txt n-tv">笔记</text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/video/video' data-opentype="redirectTo">
|
|
<text class="txt n-tv">视频</text>
|
|
</view>
|
|
<!-- #ifdef MP -->
|
|
<view class="item position-r" @tap="goto" data-url='/diary/live/live' data-opentype="redirectTo">
|
|
<text class="txt n-tv">直播</text>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="" :style="{'height': hearHeight + 'px'}"></view>
|
|
<view class="swe-h" v-if="interestedList.length > 0">
|
|
左滑发现更多感兴趣的人
|
|
</view>
|
|
<view class="swer-list" v-if="interestedList.length > 0">
|
|
<scroll-view :scroll-x="true" class="scroll-list" @scrolltolower="scrollList">
|
|
<block v-for="(item, idx) in interestedList" :key="item.id">
|
|
<view class="scroll-view-item ">
|
|
<view class="scroll-view-item-c">
|
|
<image v-if="item.headimg" class="scroll-list-img" :src="item.headimg" mode="" @tap="goto" :data-url="'/diary/info/info?id=' + item.id"></image>
|
|
<!-- <text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text> -->
|
|
<text class="scroll-list-title pt" @tap="goto" :data-url="'/diary/info/info?id=' + item.id">{{item.nickname}}</text>
|
|
<text class="scroll-list-xq pt color-gray">你可能感兴趣</text>
|
|
<view v-if="item.focuds == 0" class="scroll-list-gz ygz flex al-item-center j-center" :style="{'border-color':'#0A5D3B', 'color':'#0A5D3B'}" @click="attention(item.id, idx)">
|
|
已关注
|
|
</view>
|
|
<view v-else class="scroll-list-gz flex al-item-center j-center" style=" background: linear-gradient(150deg, #00AE68 0%, #096742 100%);" @click="attention(item.id, idx)">
|
|
<text style="font-size: 34rpx;margin-right: 8rpx;">+ </text> 关注
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="attention-list-box">
|
|
<block v-for="(item, idx) in followNoteList" :key="item.id" >
|
|
<view class="attention-list-box-c" >
|
|
<view class="list-box-title">
|
|
<view class="list-box-title-l">
|
|
<image v-if="item.headimg" class="list-box-img" :src="item.headimg" mode="" @tap="goto" :data-url="'/diary/info/info?id=' + item.mid"></image>
|
|
<!-- <text v-else style="font-size: 80rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text> -->
|
|
<text class="list-box-title-t" @tap="goto" :data-url="'/diary/info/info?id=' + item.mid">{{item.nickname}}</text>
|
|
</view>
|
|
<view class="list-box-title-r color-gray">{{ getTimes(item.createtime) }}</view>
|
|
</view>
|
|
<view :id="'city' + idx" class="list-box-img-list" @click="toDetail(item.id)">
|
|
<block v-for="(pics, idx) in item.pics" :key="idx">
|
|
<image v-if="pics" class="list-img" :src="pics" mode=""></image>
|
|
<view v-else style="width: 220rpx;height: 220rpx;text-align: center;line-height: 220rpx;">
|
|
<text style="font-size: 160rpx; color: #ccc;" class="iconfont icon-tupianjiazaishibai"></text>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="list-box-tip-c">
|
|
<view class="list-box-tip-c-l" v-if="item.topiclist.length > 0">
|
|
<view class="tip-c-l-cont" v-for="(topic,idx) in item.topiclist" :key="topic.id" @tap="goto" :data-url="'/diary/topic/topic?id='+topic.id">
|
|
<!-- <image class="tip-c-l-img" src="../../admin/images/comwithdrawlog.png" mode=""></image> -->
|
|
<text class="tip-c-l-img-t" :style="{'background-color': t('color1')}">#</text>
|
|
<text style="flex: 1;">{{topic.topic_name}}</text>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <text class="list-box-tip-c-jia" :style="{'background-color': t('color1')}"></text> -->
|
|
</view>
|
|
<view class="tip-c-l-cont-t con-hi" v-if="item.title">{{item.title}}</view>
|
|
<view class="list-box-tip-con" @click="toDetail(item.id)">
|
|
<text :class="isShowText == false ? 'con-hi': 'con-sw'">{{item.content}}</text>
|
|
<view class="list-box-tip-con-btn" :style="{'color': '#0A5D3B'}">
|
|
<text>{{'详情'}}</text>
|
|
<!-- <text class="icon-st iconfont" :class="isShowText == false ? 'icon-xia': 'icon-shang'" :style="{'color': t('color1')}"></text> -->
|
|
</view>
|
|
</view>
|
|
<view class="list-box-tip-bto">
|
|
<view class="list-box-tip-bto-title">
|
|
<button open-type="share" class="bto-title-l" @click="pinlunIdx = idx">
|
|
<text class="icons-t iconfont icon-fenxiang"></text>
|
|
<!-- <text class="color-gray" style="padding-left: 6rpx;">24</text> -->
|
|
</button>
|
|
<view class="bto-title-r">
|
|
<view class="bto-title-r-icon" style="margin-right: 30rpx;" @click="zan(item.id, idx)">
|
|
<text v-if="item.iszan == 0" class="icons-t iconfont icon-aixin"></text>
|
|
<text v-else class="icons-t iconfont icon-aixin_shixin" :style="{'color': 'red'}"></text>
|
|
<text class="color-gray" style="padding-left: 6rpx;">{{item.zan}}</text>
|
|
</view>
|
|
<view class="bto-title-r-icon" style="margin-right: 30rpx;" @click="hoarding(item.id, idx)">
|
|
<text v-if="item.isfavorite == 0" class="icons-t iconfont icon-shoucang"></text>
|
|
<text v-else class="icons-t iconfont icon-Collection" :style="{'color': 'red'}"></text>
|
|
<text class="color-gray" style="padding-left: 6rpx;">{{item.favorite_count}}</text>
|
|
</view>
|
|
<view class="bto-title-r-icon" @tap="commentClick(idx)">
|
|
<text class="icons-t iconfont icon-xiaoxi"></text>
|
|
<text class="color-gray" style="padding-left: 6rpx;">{{item.pinglun_count}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box-tip-bto-review" v-if="item.pinglunlist.length > 0">
|
|
|
|
<view class="bto-review-con" v-for="(plixs, idx) in item.pinglunlist" :key="idx">
|
|
<text class="bto-review-titl" >{{plixs.nickname + '：'}}</text>
|
|
<rich-text class="bto-review-tx" :nodes="plixs.content"></rich-text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<view class="add" :style="{'background-color': t('color1')}" @click="addShow= true"></view>
|
|
<view class="add_box" @click="addShow = false" v-if="addShow">
|
|
<view class="content" @click.stop="">
|
|
<view class="item" @click="toAdd('diary')">
|
|
发布笔记
|
|
</view>
|
|
<view class="item" @click="toAdd('video')">
|
|
发布视频
|
|
</view>
|
|
<view class="item" @click="addShow= false">
|
|
取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--评论-->
|
|
<view class="plbox-show-mk" v-if="showcomment" @touchmove.stop.prevent="moveHandle">
|
|
<view class="plbox" :style="menuindex > -1 ? 'bottom:110rpx':''">
|
|
<view class="plbox_title"><text class="plbox_title-t1">评论</text><text class="plbox_title-t2">({{followNoteList[pinlunIdx].pinglun_count}})</text></view>
|
|
<image :src="event_rul + '/static/img/static/img/close.png'" class="plbox-close" @tap.stop="commentClick"/>
|
|
<scroll-view class="plbox_content" scroll-y="true" @scrolltolower="getmorecomment">
|
|
<block v-for="(item, idx) in followNoteList[pinlunIdx].pinglunlist" :key="item.id">
|
|
<view class="plbox_content-item">
|
|
<view class="plbox_content-item-f1 flex0"><image :src="item.headimg" class="plbox_content-item-f1-img"></image></view>
|
|
<view class="plbox_content-item-f2 flex-col">
|
|
<text class="plbox_content-item-f2-t1">{{item.nickname}}</text>
|
|
<view class="plbox_content-item-f2-t2 plbox_content-plcontent">
|
|
<!-- <text class="plbox_content-plcontent-text">{{item.content}}</text> -->
|
|
<rich-text class="bto-review-tx" :nodes="item.content"></rich-text>
|
|
|
|
</view>
|
|
<view class="plbox_content-item-f2-t3">
|
|
<!-- <text class="plbox_content-item-f2-t3-x1">{{}}</text> -->
|
|
<!-- <view class="plbox_content-item-f2-t3-x2" ><text class="plbox_content-item-f2-phuifu" @tap="replyClick" :data-id="item.id" :data-nickname="item.nickname">回复</text></view> -->
|
|
<!-- <view class="plbox_content-item-f2-pzan" @tap="pzan" :data-id="item.id" :data-index="idx"><image :src="event_rul +'/static/img/static/img/zan-' + (item.iszan==1?'2':'1') + '.png'" class="plbox_content-item-f2-pzan-img"/><text class="plbox_content-item-f2-pzan-txt">{{item.zan}}</text></view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<view v-if="nomore"><text class="comment-nomore">没有更多数据了</text></view>
|
|
<view v-if="followNoteList[pinlunIdx].pinglunlist.length == 0"><text class="comment-nodata">暂无评论!</text></view>
|
|
<view class="" style="display: flex; justify-content: center;align-items: center;" :style="{color: t('color1')}">
|
|
<view class="" style="display: flex; align-items: center;padding: 10rpx;" @click="toDetail(followNoteList[pinlunIdx].id)" >
|
|
查看更多
|
|
<text class="iconfont icon-lujing136" :style="{color: t('color1')}" style="font-size: 40rpx; padding-left: 10rpx;"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<loading v-if="loading"></loading>
|
|
<view style="height:160rpx"></view>
|
|
<!-- <view class="plbox-replyshadow" v-if="hfid!=0" @tap.stop="replyshadowClick"></view> -->
|
|
<view class="pinglun">
|
|
<image @tap="toggleFaceBox" class="pinglun-faceicon" :src="event_rul + '/static/img/static/img/face-icon.png'"></image>
|
|
<input @confirm="sendMessage" @focus="onInputFocus" @input="messageChange" class="pinglun-input" confirmHold="true" confirmType="send" cursorSpacing="20" type="text" :value="message" :placeholder="messageholder"/>
|
|
<view class="pinglun-buybtn" @tap="sendcomment(item)"><text class="pinglun-buybtn-txt">发表</text></view>
|
|
</view>
|
|
<wxface v-if="faceshow" @selectface="selectface"></wxface>
|
|
</view>
|
|
</view>
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="!isData"></nomore>
|
|
<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
|
|
<view class="tsinfo" v-show='!isNote'>
|
|
<!-- :style="{'background-image': 'url('+ event_rul +'/static/img/static/icon/9d3ab5fa33dedcde23ba05c8e9cdf999.png)'}" -->
|
|
<text>发布笔记,让大家开始认识你吧</text>
|
|
</view>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return{
|
|
navHeight: 0,
|
|
titleWidth: 0,
|
|
opt:{},
|
|
loading:false,
|
|
isData: true,
|
|
searchVlaue: '',
|
|
hearHeight: 0,
|
|
isShowText: false,
|
|
fenx: false,
|
|
shouc: false,
|
|
addShow:false,
|
|
pages: 1,
|
|
interestedList: [], // 感兴趣的人
|
|
isInterested: true,
|
|
followNoteList: [], // 关主人的笔记
|
|
followNotePages: 1,
|
|
inTWXT: '',
|
|
pageScroll: 0, // 页面跳到的位置
|
|
|
|
//评论
|
|
showcomment:false,
|
|
menuindex:-1,
|
|
pinlunIdx: 0,
|
|
nomore: false,
|
|
nodata:false,
|
|
faceshow: false,
|
|
pagenum:1,
|
|
hfid:0,
|
|
messageholder:'发表评论',
|
|
message: '',
|
|
animation:'',
|
|
isNote:1,
|
|
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.opt = app.getopts(opt);
|
|
let elemetn
|
|
// #ifdef MP-WEIXIN
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
elemetn = res.statusBarHeight
|
|
}
|
|
})
|
|
this.titleWidth = menuButtonInfo.left + 'px'
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
|
|
// console.log(menuButtonInfo,elemetn, 'navheight')
|
|
// #endif
|
|
// #ifndef MP
|
|
this.navHeight = 45 + 'px'
|
|
this.titleWidth = '100vw'
|
|
// #endif
|
|
|
|
|
|
|
|
this.getInterested()
|
|
this.getFollowNote()
|
|
|
|
|
|
},
|
|
onReady() {
|
|
let query = uni.createSelectorQuery().in(this)
|
|
query.select('.attention-h').boundingClientRect()
|
|
query.exec(res => {
|
|
this.hearHeight = res[0].height
|
|
// console.log(res, 'yuansu------')
|
|
})
|
|
},
|
|
onReachBottom(e) {
|
|
if(this.isData) {
|
|
this.getFollowNote()
|
|
}
|
|
// console.log(e, '----')
|
|
},
|
|
onShareAppMessage:function(){
|
|
return this._sharewx({title:this.followNoteList[this.pinlunIdx].title,pic:this.followNoteList[this.pinlunIdx].pics[0]});
|
|
},
|
|
onShareTimeline:function(){
|
|
var sharewxdata = this._sharewx({title:this.followNoteList[this.pinlunIdx].title,pic:this.followNoteList[this.pinlunIdx].pics[0]});
|
|
var query = (sharewxdata.path).split('?')[1];
|
|
return {
|
|
title: sharewxdata.title,
|
|
imageUrl: sharewxdata.imageUrl,
|
|
query: query
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
this.pageScroll = e.scrollTop
|
|
},
|
|
methods:{
|
|
|
|
search() {
|
|
uni.navigateTo({
|
|
url:'/diary/search/search?keyword='+this.searchVlaue
|
|
})
|
|
},
|
|
|
|
toAdd(e){
|
|
this.addShow = false;
|
|
|
|
uni.navigateTo({
|
|
url:'/diary/issue/issue?type='+e
|
|
})
|
|
},
|
|
addZero(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
},
|
|
getTimes(time) {
|
|
let times = new Date(time*1000)
|
|
let year = times.getFullYear()
|
|
let month = this.addZero(times.getMonth() + 1)
|
|
let date = this.addZero(times.getDate())
|
|
let hoursys = this.addZero(times.getHours())
|
|
let minutesys = this.addZero(times.getMinutes())
|
|
let secondsys = this.addZero(times.getSeconds())
|
|
|
|
let dateNow = new Date().getTime(); // 获取当前时间
|
|
let timeDiff = dateNow - (time * 1000); //时间差的毫秒数
|
|
let days = Math.floor(timeDiff / (24 * 3600 * 1000)); // 计算出天数
|
|
let leavel1 = timeDiff % (24 * 3600 * 1000); // 计算天数后剩余的时间
|
|
let hours = Math.floor(leavel1 / (3600 * 1000)); // 计算天数后剩余的小时数
|
|
let leavel2 = timeDiff % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
|
|
let minutes = Math.floor(leavel2 / (60 * 1000));
|
|
// console.log(days, hours,minutes, 'mmmmmmmmmmm999999999999',times)
|
|
return days > 0 ? year +'.'+ month +'.'+ date + ' ' +hoursys +':' + minutesys : (24 > hours && hours > 0) ? hours + '小时前' : minutes > 0 ? minutes + '分钟前' : '刚刚'
|
|
|
|
},
|
|
// 详情页
|
|
toDetail(id){
|
|
uni.navigateTo({
|
|
url:'/activity/luntan/detail?id='+id
|
|
})
|
|
this.showcomment = false
|
|
},
|
|
// 点击关注
|
|
attention(id, idxs) {
|
|
app.post('ApiMy/addFollow',{follow_id:id,type:'user'}, res => {
|
|
|
|
if(res.msg == '已关注') {
|
|
|
|
this.interestedList[idxs].focuds = 0
|
|
this.$forceUpdate()
|
|
}else {
|
|
|
|
this.interestedList[idxs].focuds = 1
|
|
this.$forceUpdate()
|
|
}
|
|
// console.log(res,this.interestedList, '--关注--')
|
|
})
|
|
},
|
|
// 感兴趣的人
|
|
getInterested() {
|
|
this.loading = true
|
|
app.post('ApiMy/Interested',{pagenum:this.pages}, res => {
|
|
// console.log(res, 'garen-----')
|
|
this.isNote = res.isNote
|
|
if(res.datalist.length > 0) {
|
|
this.interestedList = [...this.interestedList, ...res.datalist]
|
|
this.interestedList.forEach((item, idx) => {
|
|
this.interestedList[idx].focuds = 1
|
|
})
|
|
this.pages++
|
|
}else {
|
|
this.isInterested = false
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 左滑加载更多
|
|
scrollList(e) {
|
|
if(this.isInterested) {
|
|
this.getInterested()
|
|
}
|
|
// console.log(e, 'zuohua jiaz ------')
|
|
},
|
|
// 关主人的笔记
|
|
getFollowNote() {
|
|
this.loading = true
|
|
app.post('ApiMy/followNote',{pagenum:this.followNotePages}, res => {
|
|
// console.log(res, 'getFollowNote-----')
|
|
if(res.datalist.length > 0) {
|
|
this.followNoteList = [...this.followNoteList, ...res.datalist]
|
|
this.followNotePages++
|
|
}else {
|
|
this.isData = false
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 收藏
|
|
hoarding(id, idx) {
|
|
app.post('ApiShop/addfavorite',{proid: id,type:'note'}, res => {
|
|
if (res.msg == '已取消') {
|
|
this.followNoteList[idx].isfavorite = 0
|
|
this.followNoteList[idx].favorite_count -= 1
|
|
|
|
}else {
|
|
this.followNoteList[idx].isfavorite = 1
|
|
this.followNoteList[idx].favorite_count += 1
|
|
}
|
|
// console.log(res, 'hoarding-----')
|
|
})
|
|
},
|
|
// 点赞
|
|
zan(id, idx) {
|
|
app.post('ApiLuntan/zan',{id: id}, res => {
|
|
if(res.type == 1) {
|
|
this.followNoteList[idx].iszan = 1
|
|
this.followNoteList[idx].zan += 1
|
|
}else {
|
|
this.followNoteList[idx].iszan = 0
|
|
this.followNoteList[idx].zan -= 1
|
|
}
|
|
|
|
// console.log(res, 'zan-----')
|
|
})
|
|
},
|
|
// 阻止滑动穿透
|
|
moveHandle() {
|
|
return
|
|
},
|
|
// 回复
|
|
replyClick:function(e){
|
|
var id = e.currentTarget.dataset.id
|
|
this.message = '';
|
|
this.hfid = e.currentTarget.dataset.id;
|
|
this.messageholder = '回复 '+e.currentTarget.dataset.nickname+'：';
|
|
},
|
|
// 弹出评论
|
|
commentClick:function(num){
|
|
var that = this;
|
|
this.pinlunIdx = num
|
|
this.showcomment = !this.showcomment;
|
|
if(this.showcomment){
|
|
// this.getcommentlist();
|
|
}
|
|
},
|
|
getmorecomment: function () {
|
|
this.pagenum = this.pagenum + 1;
|
|
if(!this.nomore && !this.nodata){
|
|
this.getcommentlist(true);
|
|
}
|
|
},
|
|
|
|
// 评论
|
|
replyshadowClick:function(){
|
|
this.hfid = 0;
|
|
this.message = '';
|
|
this.messageholder = '发表评论';
|
|
},
|
|
// 表情显示
|
|
toggleFaceBox: function () {
|
|
this.faceshow = !this.faceshow
|
|
},
|
|
onInputFocus: function (e) {
|
|
this.faceshow = false
|
|
},
|
|
messageChange: function (e) {
|
|
this.message = e.detail.value;
|
|
this.trimMessage = e.detail.value.trim();
|
|
},
|
|
selectface: function (face) {
|
|
this.message = "" + this.message + face;
|
|
this.trimMessage = this.message.trim();
|
|
},
|
|
// 发表评论
|
|
sendcomment(){
|
|
let message = this.message;
|
|
app.showLoading('提交中');
|
|
app.post('ApiLuntan/subpinglun',{id:this.followNoteList[this.pinlunIdx].id,type:"0",content:message}, res => {
|
|
app.showLoading(false)
|
|
if(res.msg == '发表评论成功') {
|
|
this.followNoteList = []
|
|
this.followNotePages = 1
|
|
this.getFollowNote()
|
|
this.message = '';
|
|
this.hfid = 0;
|
|
this.messageholder = '发表评论';
|
|
this.faceshow = false;
|
|
this.showcomment = false
|
|
this.isData = true
|
|
uni.showToast({
|
|
title: '发表成功',
|
|
duration:2000
|
|
})
|
|
|
|
let id = '#city' + this.pinlunIdx
|
|
uni.pageScrollTo({
|
|
selector: id,
|
|
duration: 300
|
|
}, 1000)
|
|
}else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: res.msg,
|
|
showCancel: false,selector:id
|
|
});
|
|
}
|
|
|
|
// console.log(res,'gagallllfabbb6666-----' )
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tsinfo{
|
|
position: fixed;
|
|
right: 140rpx;
|
|
top: 66%;
|
|
z-index: 10;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 76rpx;
|
|
border-radius: 8rpx;
|
|
background-size: 100%;
|
|
background-color: rgba(255,255,255, .8);
|
|
border: 2rpx solid #0A5D3B;
|
|
animation: tsinfo 1.2s infinite;
|
|
text{
|
|
position: relative;
|
|
padding:0 16rpx;
|
|
color: #0A5D3B;
|
|
font-size: 26rpx;
|
|
letter-spacing:2rpx;
|
|
}
|
|
|
|
}
|
|
.tsinfo::after {
|
|
content: '';
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-top: 2rpx solid #0A5D3B;
|
|
border-right: 2rpx solid #0A5D3B;
|
|
background-color: rgba(255,255,255, .8);
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -8rpx;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
|
|
.add {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
border-radius: 28rpx;
|
|
border:6rpx solid #fff;
|
|
background-image: linear-gradient(to bottom right, #00AE68, #096742);
|
|
position: fixed;
|
|
right: 24rpx;
|
|
top: 65%;
|
|
}
|
|
.add:after {
|
|
content: '';
|
|
width: 50%;
|
|
height: 4rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.add:before {
|
|
content: '';
|
|
width: 4rpx;
|
|
height: 50%;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.add_box{
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
z-index: 9999999;
|
|
|
|
.content{
|
|
background-color: #fff;
|
|
padding-bottom: 20rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.item{
|
|
padding: 30rpx;
|
|
// border-bottom: 1px solid red;
|
|
}
|
|
}
|
|
}
|
|
.attention {
|
|
|
|
.color-gray {
|
|
color: #999;
|
|
}
|
|
.attention-h {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
}
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index:9;
|
|
padding: 20rpx 72rpx 20rpx 24rpx;
|
|
box-sizing: border-box;
|
|
.nav_max{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
margin: 0 18rpx;
|
|
.txt{
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
z-index: 2;
|
|
}
|
|
.n-tv {
|
|
color: #999;
|
|
}
|
|
.heng{
|
|
bottom: -6rpx;
|
|
width: 44rpx;
|
|
border-radius: 4rpx;
|
|
height: 6rpx;
|
|
background-color: #0A5D3B;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.con-hi {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
.attention-scarch {
|
|
|
|
padding-left: 4rpx;
|
|
.input_box{
|
|
display: flex;
|
|
.iconfont{
|
|
font-size: 50rpx;
|
|
}
|
|
input{
|
|
flex: 1;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.swe-h {
|
|
padding: 20rpx 24rpx;
|
|
}
|
|
|
|
.swer-list {
|
|
|
|
.scroll-list {
|
|
width: calc(100% + 24rpx);
|
|
padding: 0 24rpx;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
.scroll-view-item {
|
|
width: 260rpx;
|
|
height: 340rpx;
|
|
margin-left:20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
|
|
.scroll-view-item-c {
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.pt {
|
|
width: 100%;
|
|
padding-top: 20rpx;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
.scroll-list-img {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 300rpx;
|
|
}
|
|
|
|
.scroll-list-title {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
}
|
|
.scroll-list-xq {
|
|
font-size: 20rpx;
|
|
}
|
|
.scroll-list-gz {
|
|
width: 160rpx;
|
|
height: 60rpx;
|
|
font-size: 24rpx;
|
|
margin-top: 20rpx;
|
|
color: #fff;
|
|
border-radius: 200rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.ygz {
|
|
border: 2rpx solid #ccc;
|
|
color: #999;
|
|
}
|
|
}
|
|
.scroll-view-item:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.attention-list-box {
|
|
|
|
.attention-list-box-c {
|
|
width: 100%;
|
|
padding: 0 24rpx;
|
|
margin: 20rpx 0;
|
|
background-color: #fff;
|
|
|
|
.list-box-title {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.list-box-title-l {
|
|
display: flex;
|
|
align-items: center;
|
|
.list-box-img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 300rpx;
|
|
|
|
}
|
|
.list-box-title-t {
|
|
padding-left: 20rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-box-img-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
// justify-content: center;
|
|
|
|
.list-img {
|
|
width: 226rpx;
|
|
height: 226rpx;
|
|
margin-left: calc((100% - 678rpx)/2);
|
|
border-radius: 10rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.list-img:nth-child(3n + 1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.list-box-tip-c {
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// align-items: center;
|
|
|
|
.list-box-tip-c-l {
|
|
width: 100%;
|
|
padding: 10rpx 0;
|
|
overflow-x: scroll;
|
|
display: flex;
|
|
white-space: nowrap;
|
|
|
|
.tip-c-l-cont:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.tip-c-l-cont {
|
|
padding: 6rpx 0;
|
|
margin-left: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.tip-c-l-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
height: 20rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.tip-c-l-img-t {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
.list-box-tip-c-jia {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
}
|
|
.list-box-tip-c-jia:after {
|
|
content: '';
|
|
width: 50%;
|
|
height: 4rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.list-box-tip-c-jia:before {
|
|
content: '';
|
|
width: 4rpx;
|
|
height: 50%;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
.tip-c-l-cont-t {
|
|
margin-top: 12rpx;
|
|
font-weight: bold;
|
|
}
|
|
.list-box-tip-con {
|
|
padding:20rpx 0 40rpx;
|
|
// min-height: 80rpx;
|
|
line-height: 40rpx;
|
|
position: relative;
|
|
|
|
.con-sw {
|
|
|
|
}
|
|
|
|
.list-box-tip-con-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
|
|
.icon-st {
|
|
padding: 0 6rpx;
|
|
position: static;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-box-tip-bto {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-box-tip-bto-title {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.icons-t {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.bto-title-l {
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.bto-title-r {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.bto-title-r-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-box-tip-bto-review {
|
|
padding: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #f6f6f6;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 10rpx;
|
|
|
|
|
|
.bto-review-con {
|
|
padding: 6rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
.bto-review-titl {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.bto-review-tx {
|
|
// padding-left: 14rpx;
|
|
// text-overflow: ellipsis;
|
|
// white-space: nowrap;
|
|
// overflow: hidden;
|
|
// word-wrap: break-word;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 评论
|
|
.wxfaceimg {
|
|
vertical-align: middle;
|
|
}
|
|
.pinglun{width:750rpx;padding:0 20rpx;margin:0 auto;display:flex;flex-direction:row;align-items:center;position:absolute;bottom:0;left:0;right:0;height:100rpx;background:#fff;z-index:8;border-top:1px solid #f7f7f7}
|
|
.pinglun-faceicon { width:46rpx;height:46rpx; margin-left: 10rpx;margin-right:18rpx}
|
|
.pinglun-input{flex:1;color:#000;font-size:32rpx;padding:0;line-height:100rpx}
|
|
.pinglun-buybtn{margin-left:0.08rpx;background:#FD4A46;height:60rpx;line-height:60rpx;padding:0 30rpx;border-radius:6rpx}
|
|
.pinglun-buybtn-txt{color:#fff;font-size:28rpx;height:60rpx;line-height:60rpx;}
|
|
|
|
.plbox{width:750rpx;height:700rpx;padding:20rpx 20rpx;background:#fff;z-index:6;position:fixed;z-index: 33;left: 0;bottom: 0;}
|
|
.plbox-show-mk {width: 100%; height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, .4);z-index: 9999999;}
|
|
.plbox-replyshadow{position:absolute;z-index:7;background:rgba(0,0,0,0.4);width:750rpx;flex:1;left:0;right:0;top:0;bottom:0;}
|
|
.plbox-close{position:absolute;top:10rpx;right:10rpx;z-index:7;width:50rpx;height:50rpx;padding:10rpx;}
|
|
.plbox_title{height:60rpx;line-height:60rpx;margin-bottom:20rpx;display:flex;flex-direction:row}
|
|
.plbox_title-t1{font-size:28rpx;color:#000;font-weight:bold}
|
|
.plbox_title-t2{font-size:28rpx;color:#000;font-weight:bold}
|
|
.plbox_content{height:500rpx;overflow:scroll;display:flex;}
|
|
.plbox_content-plcontent{display:flex;flex-direction:row;vertical-align: middle;color:#111}
|
|
.plbox_content-plcontent-text{ color:#111;font-size:28rpx}
|
|
.plbox_content-plcontent-image{ width:44rpx;height:44rpx;vertical-align: inherit;}
|
|
.plbox_content-item{flex:1;margin-bottom:20rpx;display:flex;flex-direction:row}
|
|
.plbox_content-item-f1{width:80rpx;}
|
|
.plbox_content-item-f1-img{width:60rpx;height:60rpx;border-radius:50%}
|
|
.plbox_content-item-f2{flex:1}
|
|
.plbox_content-item-f2-t1{font-size:28rpx}
|
|
.plbox_content-item-f2-t2{color:#000;margin:10rpx 0;line-height:60rpx;}
|
|
.plbox_content-item-f2-t3{display:flex;flex-direction:row;flex:1}
|
|
.plbox_content-item-f2-t3-x1{color:#999;font-size:26rpx;}
|
|
.plbox_content-item-f2-t3-x2{flex:1;display:flex;flex-direction:row;}
|
|
.plbox_content-item-f2-pzan{display:flex;flex-direction:row}
|
|
.plbox_content-item-f2-pzan-img{width:32rpx;height:32rpx;margin-right:10rpx}
|
|
.plbox_content-item-f2-pzan-txt{font-size:28rpx;color:#666}
|
|
.plbox_content-item-f2-phuifu{margin-left:6px;color:#507DAF;font-size:26rpx}
|
|
.plbox_content-relist{flex:1;background:#f5f5f5;padding:20rpx 20rpx 10rpx 20rpx;margin-bottom:20rpx}
|
|
.plbox_content-relist-item2{font-size:24rpx;margin-bottom:10rpx}
|
|
.plbox_content-relist-headimg{width:30rpx;height:30rpx;border-radius:15rpx;margin-right:8rpx}
|
|
.plbox_content-relist-nickname{color:#333;font-size:24rpx}
|
|
.plbox_content-relist-f2{margin-top:10rpx}
|
|
|
|
@keyframes tsinfo {
|
|
0% {transform: translateX(8rpx);}
|
|
50% {transform: translateX(-8rpx);}
|
|
100% {transform: translateX(8rpx);}
|
|
}
|
|
</style>
|
|
|