1015 lines
26 KiB
Vue
1015 lines
26 KiB
Vue
<!-- 滑动切换选项卡+吸顶演示（待完善） -->
|
||
<template>
|
||
<view class="content">
|
||
<scroll-view v-if="getVideoData.length>0" scroll-y="true" class="scroll-Y" @scrolltolower="loadMore">
|
||
<view class="top-view">
|
||
<image class="info-cover" style="width: 100%;" src="../../static/suggest-banner4.png"></image>
|
||
<!-- 用户头像关注 -->
|
||
<view class="u-flex-wrap"
|
||
style="padding-top: 18rpx;padding-bottom: 18rpx;position: relative;align-items: center;display: flex;flex-direction: row;justify-content: flex-end;">
|
||
<view class="info-avatar">
|
||
<u-avatar :src="order.artificerImg" size="135" style="border: 3rpx solid #ffffff;">
|
||
</u-avatar>
|
||
<!--<view class="pingfen keyuyue">
|
||
<view class="flex">
|
||
<view class="timea-fu">
|
||
评分
|
||
</view>
|
||
<view class="timea-time">{{ordersScore}}</view>
|
||
</view>
|
||
</view>-->
|
||
<image class="dideo-kuang"
|
||
:src="order.technicianType=='3'?'../../static/vip/grade4.png':order.technicianType=='4'?'../../static/vip/grade6.png':'../../static/vip/grade5.png'"
|
||
mode="">
|
||
</image>
|
||
<!--<span>{{order.technicianTypeName}}</span>-->
|
||
<view class="dvideo-name" v-if="order.length!=0">
|
||
<text class="dvideo-name-word">{{order.artificerName}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="flex pingfenlist">
|
||
<view class="timea-fu">
|
||
评分
|
||
</view>
|
||
<view class="timea-time">{{ordersScore}}</view>
|
||
</view>
|
||
<view class="oder-mian-guan" style="margin-right: 20px;">
|
||
<view :class="[isFollow?'activeG':'activeQ']" @click="guanzhu(order)">
|
||
<span class="oder-mian-text">收藏</span>
|
||
</view>
|
||
</view>
|
||
<!-- <view style="margin-right: 50rpx;">
|
||
<u-tag v-if='showedit' text="关注" mode="dark" shape="" bg-color="#f5991e" @click="UserEdit" />
|
||
<view v-if='!showedit' style="height: 45rpx;"></view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 用户名 -->
|
||
<view class="header-bottom-foot" style="margin-top: 30rpx;">
|
||
<view><image class="header-bottom-foot-title" src="../../static/dituzhaoren1.png" ></image></view>
|
||
<view class="header-bottom-foot-view">
|
||
<image class="header-bottom-foot-view-img1" src="../../static/servicePackage/idCard.png" mode=""></image>
|
||
<span>实名认证</span>
|
||
</view>
|
||
<view class="header-bottom-foot-view" style="margin: 0px 7px;">
|
||
<image class="header-bottom-foot-view-img2" src="../../static/servicePackage/money.png" mode=""></image>
|
||
<span>资质认证</span>
|
||
</view>
|
||
<view class="header-bottom-foot-view">
|
||
<image class="header-bottom-foot-view-img3" src="../../static/servicePackage/shuangyue.png" mode=""></image>
|
||
<span>平台担保</span>
|
||
</view>
|
||
</view>
|
||
<!-- 简介-->
|
||
<view class="header-bottom-foot">
|
||
<text class="dvideo-concent">{{order.content==''?'暂无简介':order.content}}</text>
|
||
</view>
|
||
|
||
</view>
|
||
<template class="template-view">
|
||
<view class="scroll-list" v-for="(item,index) in getVideoData" :key="index">
|
||
<view class="scroll-left">
|
||
<span class="scroll-left-day">{{item.day}}</span>
|
||
<span class="scroll-left-mon">{{item.month}}月</span>
|
||
</view>
|
||
<view class="scroll-right">
|
||
<view class="scroll-right-title">
|
||
{{item.content}}
|
||
</view>
|
||
<view class="data-list">
|
||
<view class="videoHovers" @click="towxh5Video(item,index)">
|
||
<image src="@/static/bofang.png"></image>
|
||
</view>
|
||
<view class="playState">
|
||
<img :src="item.picPath" style="border-radius: 10px;width: 100%; height: 100%;"></img>
|
||
</view>
|
||
</view>
|
||
<view class="scroll-bottom">
|
||
<view class="pinglun" @click="toComment(index)">
|
||
<image src="../../static/pinglun.png" mode=""></image>
|
||
<span>{{item.pls}}</span>
|
||
</view>
|
||
<view class="pinglun" style="margin-left: 20px;" @click="cLike(item,index);">
|
||
<image v-if="item.sfdz==0" src="../../static/guanzhu.png" mode=""></image>
|
||
<image v-if="item.sfdz==1" src="@/static/img/index/xin.png" mode=""></image>
|
||
<span>{{item.dzs}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="t-loading-box" v-if="loadingType!=3" @click="loadMore">
|
||
<view class="t-line"></view>
|
||
<view class="t-loading-text">
|
||
<view class="loading" v-if="loadingType==2"></view>
|
||
<text>{{loadingText[loadingType]}}</text>
|
||
</view>
|
||
<view class="t-line"></view>
|
||
</view>
|
||
</template>
|
||
</scroll-view>
|
||
<empty v-if="getVideoData.length==0"></empty>
|
||
<uni-popup style="width: 100%;height: 100vh;" type="center" ref="bofang" @touchmove.stop.prevent="moveHandle">
|
||
<view style="width: 100%;height: 100%;position: relative;">
|
||
<video
|
||
id="myVideo"
|
||
style="width: 100%;height: 100%;"
|
||
:loop="true"
|
||
:muted="false"
|
||
:show-fullscreen-btn='false'
|
||
:enable-play-gesture='true'
|
||
:autoplay="false"
|
||
:show-play-btn='false'
|
||
:show-center-play-btn='false'
|
||
:http-cache="true"
|
||
@click="jieshu"
|
||
:src="filePath"></video>
|
||
<view class="videoConten">{{contentVideo}}</view>
|
||
<view class="videoHover" v-if="playShow==true" @click="kaishi">
|
||
<image src="@/static/bofang.png"></image>
|
||
</view>
|
||
<view class="guanbi" @click="guanbi">
|
||
<image src="@/static/closeimg.png"></image>
|
||
</view>
|
||
<view class="userInfo">
|
||
<!-- 1.头像 -->
|
||
<image @click="tozuozhe(artificerItem)" class="userAvatar" :src="artificerItem.artificerImg" mode="aspectFill"></image>
|
||
<!-- 2.上线或者下单 -->
|
||
<view v-if="artificerItem.onLine == 1" class="comment list-view" @click="tozuozhe(artificerItem)" style="opacity: 0.9; margin-top: 17px;">
|
||
<image src="@/static/img/index/lijiyuyue.png" style="width:40px; height:40px; position: absolute; right: 7px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">预约</text>
|
||
</view>
|
||
<view v-if="artificerItem.onLine == 2" class="comment list-view" @click="shangxian" style="opacity: 0.9; margin-top: 17px;">
|
||
<image src="@/static/img/index/qingtashangxian.png" style="width:40px; height:40px; position: absolute; right: 7px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">上线</text>
|
||
</view>
|
||
<!-- 3.点赞 -->
|
||
<view class="list-view" @click="cLike(artificerItem,k);" style="opacity: 0.9; margin-top: 17px;">
|
||
<image v-if="artificerItem.sfdz==1" src="@/static/img/index/xin.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
||
<image v-if="artificerItem.sfdz==0" src="@/static/img/index/xin-2.png" style="width: 40px; height: 40px; position: absolute; right: 6px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; text-align: center; margin-top: 40px; font-weight: bold;" :class="{'likeNumActive':artificerItem.sfdz}">{{artificerItem.dzs}}</text>
|
||
</view>
|
||
<!-- 4.评论 -->
|
||
<view class="comment list-view" @click="toComment(k)" style="opacity: 0.9; margin-top: 17px;">
|
||
<image src="@/static/img/index/liaotian-2.png" style="width:38px; height:36px; position: absolute; right: 7px;"></image>
|
||
<text style="color: #FFFFFF; margin-top: 5px; font-size: 14px; font-weight: bold; text-align: center; margin-top: 40px;">{{artificerItem.pls}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup class="uni-popup" type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle">
|
||
<view class="popup-content" :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px;'">
|
||
<CComment ref="ccRef" :showPopup="showPopup" :userInfo="userInfo" :tableData="tableData" :tableTotal="tableTotal" likeFun="likeFun" @replyFun="replyFun" @deleteFun="deleteFun" :deleteMode="deleteMode"></CComment>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import empty from '@/components/empty.vue';
|
||
import CComment from "@/components/XJ-comment/index";
|
||
export default {
|
||
components:{CComment,empty},
|
||
data() {
|
||
return {
|
||
isFollow: false,
|
||
Information:'',
|
||
loadingType: 0,
|
||
membertype: '',
|
||
showedit: true, //信息编辑按钮
|
||
artificerId: '',
|
||
latitude: '',
|
||
longitude: '',
|
||
order: [],
|
||
myId: '',
|
||
page:1,
|
||
limit:10,
|
||
playShow:false,
|
||
filePath:'',
|
||
contentVideo:'',
|
||
artificerImg:'',
|
||
artificerItem:{},
|
||
videoId:'',
|
||
getVideoData:[],
|
||
//上拉状态文字
|
||
loadingText : ["上拉或点击加载更多","已加载全部数据",'加载中',''],
|
||
ordersScore:'',
|
||
showPopup:false,
|
||
ccRef: null,
|
||
userInfo: {
|
||
id: 120,
|
||
user_name: "🍁",
|
||
user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp",
|
||
},
|
||
tableTotal: 4,
|
||
tableData: [],
|
||
deleteMode: "all",
|
||
windowWidth: 0,
|
||
windowHeight: 0,
|
||
heightNum: 1.18,
|
||
deleteHeight: 0,
|
||
boxStyle:{//视频，图片封面样式🌟💗
|
||
'height': 0,
|
||
'width': 0,
|
||
},
|
||
k: 0,
|
||
}
|
||
},
|
||
|
||
onLoad(e) {
|
||
if(this.platform == 'ios' && (model !== 'iPhone6' || model !== 'iPhone6s' || model !== 'iPhone7' || model !== 'iPhone8')){
|
||
this.deleteHeight = 0//有 tabbar的 修改这里可以改变视频高度
|
||
}
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
this.windowHeight = uni.getSystemInfoSync().windowHeight;
|
||
this.boxStyle.width = this.windowWidth + 'px';//给宽度加px
|
||
this.boxStyle.height = this.windowHeight - this.deleteHeight;//有 tabbar的 修改这里可以改变视频高度
|
||
this.artificerId = e.artificerId;
|
||
this.latitude = uni.getStorageSync('latitude');
|
||
this.longitude = uni.getStorageSync('longitude');
|
||
this.myId = uni.getStorageSync('userId');
|
||
this.getData();
|
||
this.getVideo();
|
||
},
|
||
onPullDownRefresh: function() {
|
||
this.page = 1;
|
||
this.getVideo();
|
||
},
|
||
methods: {
|
||
guanzhu(item) {// 关注
|
||
let oldIsFollow = this.isFollow;
|
||
let that = this;
|
||
|
||
let data = {
|
||
artificerId: that.artificerId,
|
||
userId: that.myId,
|
||
classify: item.myCollectCount==1?'0':'1'
|
||
}
|
||
that.$Request.postJson("/app/artificer/insertCollect", data).then(res => {
|
||
if (res.code == 0) {
|
||
if (oldIsFollow) {
|
||
uni.showToast({
|
||
title: '取消成功',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '收藏成功',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
setTimeout(function() {
|
||
that.getData()
|
||
}, 500)
|
||
});
|
||
},
|
||
// 加载更多
|
||
loadMore: async function() {
|
||
//loadingType: 0.数据未加载完 1.数据全部加载完了 2.数据加载中
|
||
if (this.loadingType == 0) {
|
||
this.loadingType = 2
|
||
//模拟数据请求
|
||
setTimeout(() => {
|
||
this.page++;
|
||
this.loadingType = 0;
|
||
this.getVideo()
|
||
}, 1000)
|
||
}
|
||
},
|
||
getVideo(){
|
||
var that=this;
|
||
// 1.这里引入后端请求数据
|
||
var data={
|
||
createBy:this.artificerId,
|
||
userId:this.myId,
|
||
page: this.page,
|
||
limit:this.limit,
|
||
}
|
||
this.$Request.get("/app/shipinquan/getArticlelist", data).then(res => {
|
||
if (res.code == 0) {
|
||
// that.getVideoData = res.data.list||{}
|
||
if (res.data) {
|
||
if (this.page == 1) this.getVideoData = []; //如果是第一页需手动制空列表
|
||
this.getVideoData = [...this.getVideoData, ...res.data.list]; //追加新数据
|
||
this.getVideoData = this.getVideoData.map(item => {
|
||
let parts = item.createTime.split('-');
|
||
let month = parseInt(parts[1], 10);
|
||
let day = parseInt(parts[2], 10);
|
||
return {
|
||
...item,
|
||
day:day>=10?day:'0'+day,
|
||
month:month>=10?month:'0'+month
|
||
};
|
||
});
|
||
console.log("getVideoData",this.getVideoData)
|
||
uni.stopPullDownRefresh()
|
||
}else{
|
||
this.loadingType=1
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 详情
|
||
getData() {
|
||
this.$Request.get("/app/artificer/selectArtificerById", {
|
||
artificerId: this.artificerId,
|
||
latitude: this.latitude,
|
||
longitude: this.longitude,
|
||
userId: this.myId
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.order = res.data || {}
|
||
var num=Number.isInteger(this.order.ordersScore)
|
||
if(num==true){
|
||
this.ordersScore=this.order.ordersScore+'.0'
|
||
}else{
|
||
this.ordersScore=this.order.ordersScore
|
||
}
|
||
if (res.data.myCollectCount == 1) {
|
||
this.isFollow = true
|
||
} else {
|
||
this.isFollow = false
|
||
}
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
|
||
},
|
||
guanbi(){
|
||
this.playShow=false;
|
||
const videoContext = uni.createVideoContext('myVideo', this);
|
||
videoContext.pause(); // 播放视频
|
||
this.$refs.bofang.close("center");
|
||
},
|
||
jieshu(){
|
||
this.playShow=true;
|
||
const videoContext = uni.createVideoContext('myVideo', this);
|
||
videoContext.pause(); // 播放视频
|
||
},
|
||
kaishi(){
|
||
this.playShow=false;
|
||
const videoContext = uni.createVideoContext('myVideo', this);
|
||
videoContext.src = this.filePath; // 设置视频源
|
||
videoContext.play(); // 播放视频
|
||
},
|
||
towxh5Video(item,index){
|
||
this.playShow=true;
|
||
this.filePath=item.filePath;
|
||
this.contentVideo=item.content;
|
||
this.artificerItem=item;
|
||
this.videoId=item.id;
|
||
this.k=index;
|
||
this.$refs.bofang.open("center");
|
||
},
|
||
tozuozhe(item){
|
||
// console.log("itemitemitemitemitem",item)
|
||
uni.reLaunch({
|
||
url:'/pages/therapist/orderDetail?artificerId='+item.createBy+'&classifyId='+'undefined'
|
||
})
|
||
this.currents = 1//点击头像以后就会切换
|
||
},
|
||
cLike(item,index){
|
||
var data={
|
||
createBy:uni.getStorageSync('userId'),
|
||
shipinquanId:item.id,
|
||
}
|
||
if(item.sfdz=='0'){
|
||
this.$Request.post("/app/shipinquan/addDianzan", data).then(res => {
|
||
if (res.code == 0) {
|
||
this.getVideoData[index].dzs += 1;
|
||
this.getVideoData[index].sfdz = '1';
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
|
||
}else{//取消点赞
|
||
this.$Request.post("/app/shipinquan/delDianzan", data).then(res => {
|
||
if (res.code == 0) {
|
||
this.getVideoData[index].dzs -= 1;
|
||
this.getVideoData[index].sfdz = '0';
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
likeFun(params, callback) {//评论点赞返回
|
||
// console.log("likeFun", params);
|
||
// Implement your logic for likeFun
|
||
},
|
||
toComment(index){
|
||
// 注意点击评论之后会执行这里
|
||
/*
|
||
（1）先加载缓冲
|
||
（2）获取当前视频 ID 信息
|
||
（3）🌟🌟🌟🌟重要🌟🌟🌟🌟
|
||
- 一定要记得看 index.vue 里面
|
||
uni.setStorageSync("user",this.peopleList[i]);
|
||
这个东西，用于存储当前用户信息。在 插件里面会使用到这个东西，
|
||
记得写一下。
|
||
|
||
（4）打开评论
|
||
*/
|
||
uni.showToast({
|
||
title: '加载中...',
|
||
icon: 'none',
|
||
position: 'bottom',
|
||
duration: 300
|
||
})
|
||
this.k = index;
|
||
uni.setStorageSync("videoID",this.getVideoData[index].id);
|
||
this.videoID = this.getVideoData[index].id;
|
||
this.$refs.pinglun.open('bottom');
|
||
this.getPingL(this.videoID);
|
||
},
|
||
shangxian(){//请TA上线
|
||
var data={
|
||
userId: this.artificerId,
|
||
byUserId: this.myId
|
||
}
|
||
this.$Request.post("/app/message/insertUpMessage", data).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '提醒成功！'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
icon:'error',
|
||
title: '提醒失败！'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
getPingL(shipinquanId){//获取评论列表
|
||
var data={
|
||
page: this.page,
|
||
limit:310,
|
||
shipinquanId:shipinquanId
|
||
}
|
||
this.$Request.get("/app/shipinquan/contentlist", data).then(res => {
|
||
if (res.code == 0) {
|
||
var msg = res.data.records||{}
|
||
this.tableTotal=res.data.total;
|
||
var list=[];
|
||
// for (let i = 0; i < msg.length; i++) {
|
||
// list.push(msg[i])
|
||
// }
|
||
|
||
this.tableData = msg.map(item => {
|
||
return {
|
||
...item,
|
||
parent_id: null,
|
||
reply_id: null,
|
||
reply_name: null,
|
||
user_name: item.userName,
|
||
user_avatar: item.userPhoto?item.userPhoto:'../../static/logo.png',
|
||
user_content: item.content,
|
||
is_like: true,
|
||
like_count: 8,
|
||
create_time: item.createTime
|
||
};
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
replyFun(params, callback) {
|
||
// console.log("replyFun", params);
|
||
if(params.params.user_content==''){
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
icon:'error',
|
||
title:'请填写发布评论'
|
||
})
|
||
}else{
|
||
var data={
|
||
createBy:uni.getStorageSync('userId'),
|
||
content:params.params.user_content,
|
||
shipinquanId:this.videoID,
|
||
}
|
||
this.$Request.post("/app/shipinquan/addContent",data).then(res => {
|
||
if (res.code == 0) {
|
||
setTimeout(() => this.getPingL(this.videoID), 500);
|
||
this.showPopup==true;
|
||
uni.hideLoading();
|
||
this.getVideoData[this.k].pls++
|
||
// callback(this.videoID);
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
deleteFun({ params, mode }, callback) {
|
||
|
||
console.log("deleteFun", { params, mode });
|
||
// 当请求成功, 调用callback执行评论删除;
|
||
switch (this.deleteMode) {
|
||
case "bind":
|
||
// 逻辑: 调用接口进行评论内容修改 update
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
case "only":
|
||
// 逻辑: 调用接口删除一个评论 delete
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
default:
|
||
// all
|
||
// 逻辑: 调用接口删除多个评论 [delete]
|
||
// Demo如下:
|
||
// axios.post("http://xxx/delete", { ids: params }).then((res) => {
|
||
// if (res.code === 0) {
|
||
// callback(res);
|
||
// }
|
||
// });
|
||
setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
|
||
break;
|
||
}
|
||
},
|
||
closeScrollview(){
|
||
// 点击评论里面的叉叉，就会关闭评论
|
||
this.$refs.pinglun.close('bottom');
|
||
},
|
||
//编辑信息
|
||
UserEdit() {
|
||
uni.navigateTo({
|
||
url: ""
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.uni-popup{
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: auto;
|
||
}
|
||
.popup-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #242424;
|
||
border-top-left-radius: 10px;
|
||
border-top-right-radius: 10px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.dvideo-concent{
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
padding:26rpx 0;
|
||
}
|
||
.header-bottom-foot-view-img1{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.header-bottom-foot-view-img2{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.header-bottom-foot-view-img3{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.header-bottom-foot-view image{
|
||
margin-right: 3px;
|
||
}
|
||
.header-bottom-foot-title{
|
||
width: 65px;
|
||
height: 17px;
|
||
margin-right: 8rpx;
|
||
margin-top: 4rpx;
|
||
}
|
||
.header-bottom-foot-view-img2{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.header-bottom-foot-view-img3{
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
.header-bottom-foot-view image{
|
||
margin-right: 3px;
|
||
}
|
||
.header-bottom-foot-view{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 80px;
|
||
height: 22px;
|
||
line-height: 22px;
|
||
background-color: rgba(8, 162, 138, 0.1);
|
||
border-radius: 8px;
|
||
font-weight: 400;
|
||
font-size: 11px;
|
||
color: #029D88;
|
||
}
|
||
.header-bottom-foot{
|
||
width: 86%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.dvideo-name{
|
||
width: 88%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin:10rpx auto;
|
||
}
|
||
.dvideo-name-word{
|
||
width:150rpx;
|
||
height:20rpx;
|
||
line-height: 50rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
.pingfenlist{
|
||
width: 130rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
color: #129d88;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
border: 1px solid #d0f4ed;
|
||
margin-right:10rpx;
|
||
}
|
||
.timea-fu{
|
||
font-size: 26rpx;
|
||
}
|
||
.timea-time{
|
||
font-size: 26rpx;
|
||
}
|
||
.oder-mian-text{
|
||
padding-left:50rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
.oder-mian-guan{
|
||
width: 130rpx;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
color: #1bb097;
|
||
display: flex;
|
||
/* align-items: center; */
|
||
background-color: #fff;
|
||
border-radius: 30rpx;
|
||
border: 1px solid #d0f4ed;
|
||
}
|
||
.u-flex-wrap{
|
||
background: linear-gradient(0deg, #ffffff,#efffff);
|
||
}
|
||
.activeQ{
|
||
background: url('../../static/follow.png')16rpx 10rpx;
|
||
background-repeat: no-repeat;
|
||
background-size:30rpx 30rpx;
|
||
}
|
||
.activeG{
|
||
background: url('../../static/follow2.png') 16rpx 10rpx;
|
||
background-repeat: no-repeat;
|
||
background-size:30rpx 30rpx;
|
||
}
|
||
|
||
.t-loading-box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: row;
|
||
line-height:80upx;
|
||
font-size: 26upx;
|
||
width: 100%;
|
||
padding-bottom:20upx;
|
||
color: #888888;
|
||
.t-loading-text{
|
||
padding: 0 10upx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
}
|
||
.loading {
|
||
width:25upx;
|
||
height:25upx;
|
||
border:2.5upx solid #888888;
|
||
border-bottom:#ffffff 2.5upx solid;
|
||
border-radius:50%;
|
||
margin-right: 15upx;
|
||
animation:grace-rotate360 1200ms infinite linear;
|
||
}
|
||
.t-line{
|
||
margin: 0px;
|
||
border-bottom: 1px solid rgb(212, 212, 212);
|
||
width: 20px;
|
||
transform: scaleY(0.5);
|
||
border-top-color: rgb(212, 212, 212);
|
||
border-right-color: rgb(212, 212, 212);
|
||
border-left-color: rgb(212, 212, 212);
|
||
}
|
||
}
|
||
@keyframes grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
|
||
.content{
|
||
width: 100%;
|
||
/* height: 100vh; */
|
||
/* overflow: scroll; */
|
||
}
|
||
.top-view {
|
||
width:100%;
|
||
background-color: #fff;
|
||
border-bottom: 6px solid #f7f7f7;
|
||
}
|
||
.playState{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.pinglun span{
|
||
color: #333;
|
||
font-size: 14px;
|
||
margin-left: 5px;
|
||
}
|
||
.pinglun image{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.pinglun{
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.scroll-bottom{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
}
|
||
.scroll-right-title{
|
||
font-size:28rpx;
|
||
color: #000;
|
||
word-break: break-all;
|
||
}
|
||
.data-list{
|
||
width: 100%;
|
||
/* height: 200px; */
|
||
position: relative;
|
||
margin: 10px 0px;
|
||
}
|
||
.scroll-right{
|
||
width: 77%;
|
||
display: flex!important;
|
||
flex-direction: column !important;
|
||
}
|
||
.scroll-left-mon{
|
||
color: #999;
|
||
font-size: 12px;
|
||
margin-top: 5px;
|
||
margin-left: 5px;
|
||
}
|
||
.scroll-left-day{
|
||
color: #000000;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
.scroll-left{
|
||
width: 20%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
.scroll-list{
|
||
width: 98%;
|
||
padding: 0px 10px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
}
|
||
.swiper-item-view{
|
||
width: 70%;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 1; /* 定义文本的行数 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
word-break: break-all;
|
||
text-align: center;
|
||
}
|
||
.videoConten{
|
||
width: 70%;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
margin-bottom: 60px;
|
||
/* height: 30px; */
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2; /* 定义文本的行数 */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
word-break: break-all;
|
||
margin-left: 15px;
|
||
color: #fff;
|
||
}
|
||
/* /deep/.uni-scroll-view-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
} */
|
||
.guanbi{
|
||
width: 30px;
|
||
height: 30px;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
margin-top: 15px;
|
||
margin-right: 9px;
|
||
}
|
||
.guanbi image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
/deep/.uni-popup__wrapper-box{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.videoHovers{
|
||
width: 60px;
|
||
height: 60px;
|
||
position: absolute;
|
||
/* top: 0px;
|
||
margin-top: 20%;
|
||
margin-left: 40%; */
|
||
top: 45%;
|
||
margin-left: 45%;
|
||
z-index: 99;
|
||
}
|
||
.videoHover{
|
||
width: 76px;
|
||
height: 76px;
|
||
position: absolute;
|
||
top: 0px;
|
||
margin-top: 70%;
|
||
margin-left: 40%;
|
||
}
|
||
.videoHover image,.videoHovers image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.template-view {
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
|
||
.scroll-view_H {
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.scroll-view-item {
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.scroll-view-item_H {
|
||
display: inline-block;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
line-height: 300rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
}
|
||
.pingfen {
|
||
margin-left: 15px;
|
||
margin-top: 31px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.headset-text2 {
|
||
background: linear-gradient(90deg, #f8f8f8, #dfdfdf);
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
border-radius: 5rpx 30rpx 30rpx 30rpx;
|
||
width: 72rpx;
|
||
padding: 5rpx 15rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.headset-img {
|
||
width: 120rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
top: 1rpx;
|
||
left: -1rpx;
|
||
|
||
}
|
||
|
||
.headset-line {
|
||
|
||
display: flex;
|
||
position: relative;
|
||
}
|
||
|
||
.banner-view {
|
||
background-color: #007AFF;
|
||
color: white;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.paging-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.swiper {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-cover {
|
||
width: 100%;
|
||
/*height: 460rpx;*/
|
||
}
|
||
|
||
.info-avatar {
|
||
padding: 16rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
top: -56rpx;
|
||
margin-left: 50rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
.dideo-kuang{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
position: absolute;
|
||
left:2rpx;
|
||
top:2rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.userInfo{
|
||
position: absolute;
|
||
bottom:110px;
|
||
right: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 18;
|
||
}
|
||
.userAvatar{
|
||
border-radius: 500%;
|
||
border-style: solid;
|
||
border-width: 2px;
|
||
border-color: #ffffff;
|
||
width : 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.list-view{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
</style> |