815 lines
25 KiB
Plaintext
815 lines
25 KiB
Plaintext
<template>
|
||
<view class="container">
|
||
<video id="videoId" :style="videoSize" :src="src" autoplay="true" :show-fullscreen-btn="false" @play="playing"
|
||
@pause="pausing" @ended="videoEnd" @timeupdate="timeupdate" :show-play-btn="false" controls="false" @click="stoping"
|
||
:enable-progress-gesture="false" :show-center-play-btn="false"></video>
|
||
<!-- 用户操作 -->
|
||
<userinfo class="user-info" :style="{ top: fixTop }" :list="list" :cart="cart_type" :comment="is_comment" :num="comment_num"
|
||
@openCart="openPopup"></userinfo>
|
||
<!-- 视频信息 -->
|
||
<cover-view class="info-box" @click="stopClick">
|
||
<view class="video-info-box">
|
||
<image class="image-play" src="../../static/videoIcon.png" mode=""></image>
|
||
<text class="video-slip">视频</text>
|
||
<text class="time">{{ time_count }}s</text>
|
||
</view>
|
||
<view>
|
||
<text class="name">@{{ list.member_nickname }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="title">{{ list.article_title }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="centent">{{ list.article_content }}</text>
|
||
</view>
|
||
<view class="label-box">
|
||
<block v-for="(item,index) in list.label" :key="index">
|
||
<text class="label" :style="{ width: labelLen[index] * 40 + 'rpx' }">{{ item.name }}</text>
|
||
</block>
|
||
</view>
|
||
</cover-view>
|
||
<!-- 单个商品 -->
|
||
<cover-view class="good-one" :style="{ bottom: fixTop - 100 }" v-if="cart_len == 1 && cart_type">
|
||
<view class="one-list" v-for="(item,index) in list.goods" :key="index" @click="goGoodInfo(item.goods_id)">
|
||
<image class="one-image" :src="item.goods_image" mode=""></image>
|
||
<view class="one-box">
|
||
<text class="title-one">{{ item.goods_advword }}</text>
|
||
<text class="content-one">{{ item.goods_name }}</text>
|
||
<text class="good-price">￥{{ item.goods_promotion_price }}</text>
|
||
</view>
|
||
</view>
|
||
</cover-view>
|
||
<!-- 遮罩层 -->
|
||
<cover-view class="mask" @click.stop="stopClick" :style="videoSize" v-if="is_edit || is_comment || cart_type && cart_len >= 2">
|
||
<!-- 评论 -->
|
||
<cover-view class="content-box" v-if="is_comment" ref="contentBox">
|
||
<view class="content-title">
|
||
<text class="tips">评论</text>
|
||
<text class="close-down" @click="closeComment">×</text>
|
||
</view>
|
||
<scroller class="comment-list">
|
||
<view class="" v-for="(item,index) in commentList" :key="index">
|
||
<view class="comment-list-box">
|
||
<view class="comment-list-header">
|
||
<image class="avatar" :src="item.member_avatar" mode=""></image>
|
||
<view>
|
||
<text class="comment-title">{{ item.member_nickname }}</text>
|
||
<text class="comment-time">{{ item.create_time }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="reply" @click="openKeyInput(item,index)">回复</text>
|
||
</view>
|
||
<view class="content-main">
|
||
<text class="content-style">{{ item.content }}</text>
|
||
</view>
|
||
<view class="more-content-box">
|
||
<!-- <view class="child-box" v-for="(child,cid) in allList[item.id]" :key="cid">
|
||
<view class="info">
|
||
<image :src="child.member_avatar" mode=""></image>
|
||
<text>{{ child.member_nickname }}</text>
|
||
<text v-if="0">{{ child.reply_member_nickname }}</text>
|
||
</view>
|
||
<view class="child_content">{{ child.content }}</view>
|
||
</view> -->
|
||
<view class="more-comment" v-if="item.reply_count">
|
||
展开更多回复
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="send-box">
|
||
<input class="send-val" type="text" :placeholder="edit_text" placeholder-class="placeholder-class"
|
||
disabled="true" @blur="blue" @click="openKeyInput" value="" />
|
||
<text class="btn-send">发送</text>
|
||
</view>
|
||
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
|
||
<loading-indicator class="indicator"></loading-indicator>
|
||
<text class="indicator-text">努力加载中</text>
|
||
</loading>
|
||
</scroller>
|
||
</cover-view>
|
||
<!-- 评论框 -->
|
||
<cover-view class="edit-box" :style="videoSize" v-if="is_edit">
|
||
<view class="input-main" :style="{ bottom: editTop }">
|
||
<input class="edit-input" type="text" value="" :focus="is_focus" :placeholder=" edit_text_other ? edit_text_other : edit_text"
|
||
placeholder-class="placeholder-class" v-model="send_value" />
|
||
<text class="btn-send" @click="sendComment">发送</text>
|
||
</view>
|
||
<view></view>
|
||
</cover-view>
|
||
<!-- 购物车 -->
|
||
<cover-view class="cart-box" v-if="cart_type">
|
||
<view class="cart-title">
|
||
<text class="tips">全部商品</text>
|
||
<text class="close-down" @click="cart_type = false">×</text>
|
||
</view>
|
||
<scroller class="cart-list">
|
||
<view class="" v-for="(item,index) in list.goods" :key="index">
|
||
<view class="cart-list-header" @click="goGoodInfo(item.goods_id)">
|
||
<image class="goods-img" :src="item.goods_image" mode=""></image>
|
||
<view class="goods-info">
|
||
<text class="good-title">{{ item.goods_advword }}</text>
|
||
<text class="good-price">{{ item.goods_promotion_price }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<loading v-if="0" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
|
||
<loading-indicator class="indicator"></loading-indicator>
|
||
<text class="indicator-text">努力加载中</text>
|
||
</loading>
|
||
</scroller>
|
||
</cover-view>
|
||
</cover-view>
|
||
<!-- 返回按钮 -->
|
||
<cover-image class="close" @click="goBack" src="../../static/close.png">
|
||
</cover-image>
|
||
<!-- 暂停按钮 -->
|
||
<cover-image class="pause" :style="{ top: fixTop + 100 }" @click="stoping" src="../../static/videoPlay.png"
|
||
v-if="!is_play">
|
||
</cover-image>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import userinfo from "../components/userinfo/index" // 点赞组件
|
||
const temp_url = "https://dmmall.sdbairui.com/api/";
|
||
export default {
|
||
components: {
|
||
userinfo
|
||
},
|
||
data() {
|
||
return {
|
||
videoSize: {},
|
||
fixTop: 0,
|
||
editTop: 0,
|
||
list: {},
|
||
labelLen: [],
|
||
cart_len: 0, // 购物车个数
|
||
cart_type: false, // 显示购物车
|
||
is_comment: false, // 显示评论
|
||
is_edit: false, // 显示输入
|
||
is_focus: false, //
|
||
comment_num: 0, // 评论数
|
||
edit_text: "有爱评论，说点好听的 ~",
|
||
edit_text_other: "有爱评论，说点好听的 ~",
|
||
pid: 0, // 主键
|
||
reply_id: 0, // 回复id
|
||
page: 0,
|
||
comment_id: 0,
|
||
send_value: "", // 评论
|
||
commentList: [], // 评论列表
|
||
src: "",
|
||
is_play: true,
|
||
time_count: 0,
|
||
linear: null,
|
||
loadinging: false,
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
this.article_id = option.id;
|
||
this.getVideoInfo(option.id);
|
||
this.getInfo();
|
||
},
|
||
onReady() {
|
||
this.videoBox = uni.createVideoContext("videoId", this);
|
||
},
|
||
onBackPress() {
|
||
if (this.cart_type) {
|
||
this.cart_type = !this.cart_type;
|
||
} else if (this.is_edit) {
|
||
this.is_edit = !this.is_edit;
|
||
} else if (this.is_comment) {
|
||
this.is_comment = !this.is_comment;
|
||
} else {
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
methods: {
|
||
moveHandle() {
|
||
return false;
|
||
},
|
||
// 获取信息
|
||
getVideoInfo(article_id) {
|
||
uni.request({
|
||
url: temp_url + "article/articleInfo",
|
||
method: "POST",
|
||
data: {
|
||
article_id: article_id
|
||
},
|
||
header: {
|
||
Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
|
||
},
|
||
success: (res) => {
|
||
this.list = res.data.data.info;
|
||
this.src = res.data.data.info.video_path;
|
||
this.cart_len = res.data.data.info.goods.length;
|
||
console.log(this.cart_len);
|
||
let item = res.data.data.info.label;
|
||
let arr = [];
|
||
item.forEach(data => {
|
||
let str = escape(data.name);
|
||
if (str.indexOf('%u')) {
|
||
// console.log(data.name);
|
||
arr.push(Math.floor(data.name.length / 2));
|
||
} else {
|
||
arr.push(data.name.length);
|
||
}
|
||
})
|
||
this.labelLen = arr;
|
||
}
|
||
})
|
||
},
|
||
// 获取评论
|
||
getComment() {
|
||
uni.request({
|
||
url: temp_url + "article/articleCommentList",
|
||
method: "POST",
|
||
data: {
|
||
article_id: this.article_id,
|
||
page: this.page,
|
||
},
|
||
success: (res) => {
|
||
if (res.data.errCode == 0) {
|
||
// console.log(res.data);
|
||
this.commentList = res.data.data;
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 发布评论
|
||
sendComment() {
|
||
if (this.send_value.length == 0) {
|
||
this.$u.toast("内容不能为空！");
|
||
return;
|
||
}
|
||
uni.request({
|
||
url: temp_url + "article/articleAddComment",
|
||
method: "POST",
|
||
data: {
|
||
article_id: this.article_id,
|
||
content: this.send_value,
|
||
pid: this.pid,
|
||
reply_id: this.reply_id,
|
||
},
|
||
header: {
|
||
Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
|
||
},
|
||
success: (res) => {
|
||
this.is_edit = false;
|
||
if (res.data.errCode == 0) {
|
||
this.send_value = "";
|
||
this.comment_num = res.data.num;
|
||
let p_id = res.data.data.data.pid;
|
||
console.log(this.pid,this.reply_id,this.comment_id);
|
||
if (res.data.data.data.pid) {
|
||
this.commentList[this.comment_id].reply_count = true;
|
||
console.log(this.allList[p_id]);
|
||
if (this.allList[p_id]) {
|
||
this.allList[p_id].push(res.data.data);
|
||
} else {
|
||
this.allList[p_id] = [];
|
||
this.allList[p_id].push(res.data.data);
|
||
}
|
||
console.log(this.allList);
|
||
} else {
|
||
this.commentList.unshift(res.data.data.data);
|
||
}
|
||
// console.log(this.commentList);
|
||
} else if (res.data.errCode == 401) {
|
||
uni.showToast({
|
||
title: "您还没有登录，请先登录！",
|
||
icon: "none",
|
||
// success: () => {
|
||
// setTimeout(function() {
|
||
// this.$u.route("/pageA/login/login")
|
||
// }, 2000)
|
||
// }
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none"
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取手机信息
|
||
getInfo() {
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.videoSize = {
|
||
width: "750rpx",
|
||
height: res.screenHeight + "px",
|
||
}
|
||
this.fixTop = "400rpx";
|
||
this.fixTop = res.screenHeight / 3;
|
||
// #ifdef H5
|
||
this.fixTop = 400 + 'rpx'
|
||
// #endif
|
||
}
|
||
})
|
||
},
|
||
// 播放
|
||
playing(e) {
|
||
// console.log(e);
|
||
if (e.type == "play") {}
|
||
},
|
||
pausing(e) {
|
||
if (e.type == "pause") {
|
||
this.is_play = false;
|
||
}
|
||
},
|
||
// 结束
|
||
videoEnd(e) {
|
||
// console.log(e);
|
||
if (e.type == "ended") {
|
||
this.is_play = false;
|
||
this.time_count = 0;
|
||
}
|
||
},
|
||
// 暂停
|
||
stoping() {
|
||
this.is_play = !this.is_play;
|
||
if (this.is_play) {
|
||
this.videoBox.play();
|
||
} else {
|
||
this.videoBox.pause();
|
||
}
|
||
},
|
||
// 监听视频
|
||
timeupdate(e) {
|
||
this.time_count = parseInt(e.detail.duration) - parseInt(e.detail.currentTime);
|
||
// console.log(e.detail.currentTime,e.detail.duration);
|
||
if (e.detail.duration == e.detail.currentTime) {
|
||
// this.is_play = false;
|
||
}
|
||
// let num = parseInt((e.detail.currentTime/e.detail.duration)*100);
|
||
// this.linear = num + "%";
|
||
// console.log(this.time_count);
|
||
},
|
||
// 打开弹窗
|
||
openPopup(data) {
|
||
// console.log(data);
|
||
if (this.cart_len >= 2) {
|
||
|
||
}
|
||
this.cart_type = data.cart;
|
||
this.is_comment = data.comment;
|
||
if (this.is_comment) {
|
||
this.page = 0;
|
||
this.getComment();
|
||
// this.is_play = true;
|
||
}
|
||
},
|
||
// 打开评论输入
|
||
openKeyInput(data, index) {
|
||
console.log(data);
|
||
let me = this;
|
||
this.is_focus = true;
|
||
setTimeout(() => {
|
||
this.is_edit = true;
|
||
}, 500)
|
||
uni.onKeyboardHeightChange(function(res) {
|
||
console.log(res);
|
||
if (res.height == 0) {
|
||
me.is_focus = false;
|
||
me.is_edit = false;
|
||
} else {
|
||
me.editTop = res.height;
|
||
}
|
||
})
|
||
this.comment_id = index;
|
||
if (data.id) {
|
||
this.edit_text_other = "回复@" + data.member_nickname;
|
||
this.pid = data.id;
|
||
this.reply_id = data.member_id;
|
||
} else {
|
||
this.edit_text_other = "有爱评论，说点好听的 ~";
|
||
this.pid = "";
|
||
this.reply_id = "";
|
||
}
|
||
// console.log(this.pid, this.edit_text_other);
|
||
},
|
||
blue() {
|
||
this.is_focus = false;
|
||
},
|
||
// 关闭评论
|
||
closeComment() {
|
||
this.is_comment = false;
|
||
this.is_edit = false;
|
||
// console.log(this.is_comment,this.is_play);
|
||
// if (!this.is_comment && this.is_play) {
|
||
// console.log(1);
|
||
// this.is_play = false;
|
||
// }
|
||
},
|
||
// 下拉加载
|
||
onloading(e) {
|
||
console.log(e);
|
||
this.loadinging = true;
|
||
setTimeout(() => {
|
||
this.loadinging = false;
|
||
}, 2000)
|
||
},
|
||
// 跳转
|
||
goGoodInfo(id) {
|
||
uni.navigateTo({
|
||
url: "/pageB/sdetails/index?id=" + id + "&type=" + 1,
|
||
})
|
||
},
|
||
// stop
|
||
stopClick(event) {
|
||
event.stopPropagation();
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
position: relative;
|
||
}
|
||
|
||
/* 关闭 */
|
||
.close {
|
||
position: fixed;
|
||
top: 100rpx;
|
||
right: 70rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
/* 暂停 */
|
||
.pause {
|
||
z-index: 99;
|
||
position: fixed;
|
||
left: 330rpx;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
|
||
/* 用户操作 */
|
||
.user-info {
|
||
position: fixed;
|
||
right: 30rpx;
|
||
}
|
||
|
||
/* 底部信息 */
|
||
.info-box {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.video-info-box {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
width: 160rpx;
|
||
height: 40rpx;
|
||
padding: 4rpx 10rpx;
|
||
margin-bottom: 20rpx;
|
||
color: #666666;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(255, 255, 255, .6);
|
||
}
|
||
|
||
.good-one {
|
||
position: fixed;
|
||
right: 160rpx;
|
||
width: 420rpx;
|
||
padding: 20rpx;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.one-list {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.one-image {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.one-box {
|
||
justify-content: space-around;
|
||
color: #333;
|
||
}
|
||
|
||
.title-one {
|
||
width: 200rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
lines: 1;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.content-one {
|
||
width: 200rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
lines: 2;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.mask {
|
||
z-index: 999999;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.content-box {
|
||
z-index: 99;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 700rpx;
|
||
padding-bottom: 50rpx;
|
||
margin-bottom: 88rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.content-title {
|
||
justify-content: space-between;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
height: 88rpx;
|
||
padding: 0 20rpx;
|
||
background-color: #ECECEC;
|
||
}
|
||
|
||
.comment-list {
|
||
margin-bottom: 50rpx;
|
||
}
|
||
|
||
.comment-list-box {
|
||
padding: 20rpx 30rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.content-main {
|
||
flex-direction: row;
|
||
padding-left: 100rpx;
|
||
}
|
||
|
||
|
||
.content-style {
|
||
width: 600rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
lines: 2;
|
||
}
|
||
|
||
.more-content-box {
|
||
margin-left: 100rpx;
|
||
}
|
||
|
||
.more-comment {
|
||
margin: 10rpx 0;
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.comment-list-header {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.avatar {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.comment-title {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.comment-time,
|
||
.reply {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.send-box {
|
||
z-index: 10000;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
padding: 10rpx 30rpx;
|
||
border-top-width: 1rpx;
|
||
border-color: #ececec;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.send-val {
|
||
width: 600rpx;
|
||
height: 88rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.btn-send {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.close-down {
|
||
padding: 10rpx;
|
||
font-size: 50rpx;
|
||
text-align: center;
|
||
color: #333;
|
||
}
|
||
|
||
.edit-box {
|
||
z-index: 1000;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.input-main {
|
||
position: fixed;
|
||
left: 0;
|
||
/* #ifdef H5 */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 750rpx;
|
||
padding: 0 20rpx;
|
||
line-height: 80rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.edit-input {
|
||
width: 600rpx;
|
||
height: 80rpx;
|
||
padding: 0 10rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.cart-box {
|
||
z-index: 99;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 750rpx;
|
||
height: 700rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.cart-title {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 88rpx;
|
||
padding: 0 20rpx;
|
||
border-color: #f2f2f2;
|
||
border-bottom-width: 1rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.cart-list {}
|
||
|
||
.cart-list-header {
|
||
padding: 20rpx;
|
||
flex-direction: row;
|
||
border-bottom-width: 1rpx;
|
||
border-bottom-color: #ececec;
|
||
}
|
||
|
||
.goods-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.goods-info {
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.good-title {
|
||
width: 500rpx;
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
lines: 2;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.good-price {
|
||
font-size: 28rpx;
|
||
color: #FF3131;
|
||
}
|
||
|
||
.image-play {
|
||
width: 22rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.video-slip {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.time {
|
||
color: #666;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.name {
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.title {
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.centent {
|
||
width: 500rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
lines: 2;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.label-box {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.label {
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
padding: 4rpx 10rpx;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 10rpx;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
line-height: 38rpx;
|
||
color: #666666;
|
||
border-radius: 10rpx;
|
||
background-color: rgba(255, 255, 255, .6);
|
||
}
|
||
|
||
.loading {
|
||
width: 750rpx;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.indicator-text {
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
color: #999;
|
||
}
|
||
|
||
.indicator {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.placeholder-class {
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
</style>
|