优化页面
This commit is contained in:
pengxiaolong
@@ -22,7 +22,6 @@ import Advertisement from "../../components/Advertisement/Advertisement";
|
||||
import contentList from "../../components/contentList/contentList";
|
||||
import tabBar from "../../components/tabBar/tabBar";
|
||||
import TUIlogin from "../../components/TUILogin.js";
|
||||
import TencentCloudChat from "@tencentcloud/chat";
|
||||
import { useCounterStore } from '@/stores/counter'
|
||||
const counter = useCounterStore()
|
||||
export default {
|
||||
@@ -62,6 +61,7 @@ export default {
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
goAdvertisement() {
|
||||
|
||||
@@ -8,13 +8,18 @@
|
||||
src="../../static/Fork.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="Title">发布新PK</view>
|
||||
<view class="Titlecss">
|
||||
<view class="Star"></view>
|
||||
<view class="Title"></view>
|
||||
<view class="Star"></view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="Individual"> -->
|
||||
<view class="NameAnchor">
|
||||
<input
|
||||
class="NameAnchorcss"
|
||||
cursor-color="#ffffff"
|
||||
placeholder-style="color:#ffffff"
|
||||
cursor-color="#666666"
|
||||
placeholder-style="color:#666666"
|
||||
@input="NameAnchor"
|
||||
placeholder="主播名称"
|
||||
/>
|
||||
@@ -30,10 +35,9 @@
|
||||
<view class="Coins country">
|
||||
<wht-select
|
||||
style="width: 350rpx"
|
||||
backgroundColor="#fff70065"
|
||||
borderRadius="20"
|
||||
backgroundColor="#ffffff"
|
||||
placeholderColor="#ffffff"
|
||||
textColor="#7cba59"
|
||||
textColor="#666666"
|
||||
borderColor="#ffffff"
|
||||
@change="country"
|
||||
:options="Country"
|
||||
@@ -47,10 +51,9 @@
|
||||
<view class="Gendercss">
|
||||
<wht-select
|
||||
style="width: 300rpx"
|
||||
backgroundColor="#ffaa0082"
|
||||
borderRadius="20"
|
||||
placeholderColor="#ffffff"
|
||||
textColor="#ffffff"
|
||||
backgroundColor="#ffffff"
|
||||
placeholderColor="#666666"
|
||||
textColor="#666666"
|
||||
borderColor="#ffffff"
|
||||
@change="gender"
|
||||
:options="Gender"
|
||||
@@ -86,7 +89,7 @@
|
||||
<view class="goldCoin">
|
||||
<view class="number-box">
|
||||
<view class="number-box-title">金币数量:</view>
|
||||
<uni-number-box background="#2bff001e" v-model="numberCoins"></uni-number-box>
|
||||
<uni-number-box background="#03ABA8" v-model="numberCoins"></uni-number-box>
|
||||
<view class="number-box-title">单位:</view>
|
||||
<view class="number-box-unit">K</view>
|
||||
</view>
|
||||
@@ -110,7 +113,7 @@
|
||||
<view class="goldCoin">
|
||||
<view class="number-box">
|
||||
<view class="number-box-title">选择场数:</view>
|
||||
<uni-number-box background="#2bff001e" v-model="numberCoins"></uni-number-box>
|
||||
<uni-number-box background="#03ABA8" v-model="numberCoins"></uni-number-box>
|
||||
<view class="number-box-title">次</view>
|
||||
</view>
|
||||
<view v-if="numberCoins === '' && Hint === true" class="Hint"
|
||||
@@ -120,8 +123,6 @@
|
||||
<!-- ··························································································· -->
|
||||
<view class="Remarkscss">
|
||||
<uni-easyinput
|
||||
:styles="styles"
|
||||
:placeholderStyle="placeholderStyle"
|
||||
type="textarea"
|
||||
v-model="remarks"
|
||||
placeholder="备注"
|
||||
@@ -157,12 +158,6 @@ export default {
|
||||
datetimesingle: "", //日期
|
||||
id: null, //用户id
|
||||
sendingTime: "", //发送时间
|
||||
placeholderStyle: "color:#ffffff;font-size:14px",
|
||||
styles: {
|
||||
backgroundColor: "#2bff001e",
|
||||
color: "#ffffff",
|
||||
borderColor: "#00bd069d",
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -335,7 +330,8 @@ export default {
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-image: linear-gradient(135deg, #00ff4025, #00d5ff3b);
|
||||
background-image: url(https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/bgv.png);
|
||||
background-size: 100% 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 1300rpx;
|
||||
@@ -343,31 +339,33 @@ export default {
|
||||
box-shadow: 0 0 10rpx #ccc;
|
||||
}
|
||||
.Fork {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
margin-top: 20rpx;
|
||||
/* margin-bottom: 40rpx; */
|
||||
margin-left: 90%;
|
||||
}
|
||||
.Title {
|
||||
.Titlecss{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
font-size: 70rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
/* 设置渐变背景 */
|
||||
background-image: linear-gradient(135deg, #ffff00, #00d9ff);
|
||||
/* 关键属性组合 */
|
||||
-webkit-background-clip: text; /* 兼容 iOS/Android */
|
||||
background-clip: text;
|
||||
/* 文字颜色设为透明 */
|
||||
color: transparent;
|
||||
/* 防止背景溢出 */
|
||||
display: inline-block;
|
||||
padding: 8rpx 16rpx;
|
||||
text-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.2);
|
||||
height: 70rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Star{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-image: url(../../static/star.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.Title {
|
||||
width: 430rpx;
|
||||
height: 70rpx;
|
||||
background-image: url(../../static/Publishpk.png);
|
||||
background-size: 100% 200%;
|
||||
background-position: 0 100%;
|
||||
margin-left: 26rpx;
|
||||
margin-right: 26rpx;
|
||||
}
|
||||
.Individual {
|
||||
display: flex;
|
||||
@@ -385,12 +383,9 @@ export default {
|
||||
.NameAnchorcss {
|
||||
width: 99%;
|
||||
height: 85rpx;
|
||||
background-image: linear-gradient(135deg, #d9ff007a, #00ffb364);
|
||||
border-top: 2rpx solid #ffbf0049;
|
||||
border-bottom: 2rpx solid #125b003a;
|
||||
border-left: 2rpx solid #ffbf0050;
|
||||
border-right: 2rpx solid #125b0036;
|
||||
border-radius: 30rpx;
|
||||
background-color: #ffffff;
|
||||
border: 1rpx solid #BFBFBF;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color:#ffffff;
|
||||
}
|
||||
@@ -455,23 +450,16 @@ export default {
|
||||
text-align: center;
|
||||
}
|
||||
.number-box-title {
|
||||
/* margin-right: 20rpx; */
|
||||
/* 设置渐变背景 */
|
||||
background-image: linear-gradient(135deg, #00ff227a, #a200ff64);
|
||||
/* 关键属性组合 */
|
||||
-webkit-background-clip: text; /* 兼容 iOS/Android */
|
||||
background-clip: text;
|
||||
/* 文字颜色设为透明 */
|
||||
color: transparent;
|
||||
/* 防止背景溢出 */
|
||||
display: inline-block;
|
||||
padding: 8rpx 16rpx;
|
||||
color: #191919;
|
||||
font-size: 30rpx;
|
||||
margin-right: 22rpx;
|
||||
margin-left: 17rpx;
|
||||
}
|
||||
.number-box-unit {
|
||||
color: #ffb30067;
|
||||
color: #03ABA8;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border: 1rpx solid #ff9d006f;
|
||||
border: 1rpx solid #03ABA8;
|
||||
border-radius: 50%;
|
||||
line-height: 48rpx;
|
||||
text-align: center;
|
||||
@@ -492,13 +480,9 @@ export default {
|
||||
margin-left: 5%;
|
||||
}
|
||||
.Publishcss {
|
||||
background-image: linear-gradient(135deg, #00ffb354, #c300ff37);
|
||||
background-image: linear-gradient(135deg, #4FCACD, #5FDBDE);
|
||||
/* color: #33ff00; */
|
||||
color: #ffffff;
|
||||
border-bottom: 2rpx solid #c300ff37;
|
||||
border-top: 2rpx solid #00ffb354;
|
||||
border-right: 2rpx solid #c300ff37;
|
||||
border-left: 2rpx solid #00ffb354;
|
||||
font-weight: bold;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
416
pages/PKMessageprocessing/PKMessageprocessing.vue
Normal file
416
pages/PKMessageprocessing/PKMessageprocessing.vue
Normal file
@@ -0,0 +1,416 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="background">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
src="../../static/HomeBackground.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Navigation">
|
||||
<view class="Return" @click="goBack">
|
||||
<image class="Return" src="../../static/Return.png" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="Content">
|
||||
<!-- 发布者 -->
|
||||
<view class="sender">
|
||||
<view class="sengderIcon">
|
||||
<image class="Icon" :src="SenderData.anchorIcon" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view class="Individual">
|
||||
<view class="name">{{ SenderData.anchorId }}</view>
|
||||
|
||||
<view class="GenderAndAge">
|
||||
<view class="male" v-if="SenderData.sex === '1'">
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/male.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
|
||||
<view class="female" v-else>
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/female.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nation">{{ SenderData.country }}</view>
|
||||
</view>
|
||||
<view class="Time">PK时间:{{ formatDate(SenderData.pkTime) }}</view>
|
||||
<view class="SessionAndGoldCoin">
|
||||
<view class="goldCoin">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/gold.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="goldcard">
|
||||
<view class="goldnumber">{{ SenderData.coin }}</view>
|
||||
<view class="goldtext">金币</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Session">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/session.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="goldcard">
|
||||
<view class="goldnumber">{{ SenderData.pkNumber }}</view>
|
||||
<view class="goldtext">PK场数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 被邀请者 -->
|
||||
<view class="sender">
|
||||
<view class="sengderIcon">
|
||||
<image class="Icon" :src="ReceiverData.anchorIcon" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view class="Individual">
|
||||
<view class="name">{{ ReceiverData.anchorId }}</view>
|
||||
|
||||
<view class="GenderAndAge">
|
||||
<view class="male" v-if="ReceiverData.sex === '1'">
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/male.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
|
||||
<view class="female" v-else>
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/female.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nation">{{ ReceiverData.country }}</view>
|
||||
</view>
|
||||
<view class="Time">PK时间:{{ formatDate(ReceiverData.pkTime) }}</view>
|
||||
<view class="SessionAndGoldCoin">
|
||||
<view class="goldCoin">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/gold.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view>
|
||||
<view class="goldnumber">{{ ReceiverData.coin }}</view>
|
||||
<view class="goldtext">金币</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Session">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/session.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view>
|
||||
<view class="goldnumber">{{ ReceiverData.pkNumber }}</view>
|
||||
<view class="goldtext">PK场数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="button">
|
||||
<button class="accept" @click="operation(1)">接受邀请</button>
|
||||
<button class="reject" @click="operation(2)">拒绝邀请</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from "../../components/request.js";
|
||||
import formatDate from "../../components/formatDate.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customData: {},
|
||||
SenderData: {},
|
||||
ReceiverData: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.customData = JSON.parse(options.customData);
|
||||
this.getPkyourInfo();
|
||||
this.getPkmineInfo();
|
||||
},
|
||||
methods: {
|
||||
//发布者
|
||||
async getPkyourInfo() {
|
||||
const res = await request({
|
||||
url: "pk/pkInfoDetail",
|
||||
method: "POST",
|
||||
data: {
|
||||
id: this.customData.pkIdA,
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
this.SenderData = res.data;
|
||||
console.log(this.SenderData);
|
||||
});
|
||||
},
|
||||
//被邀请者
|
||||
async getPkmineInfo() {
|
||||
const res = await request({
|
||||
url: "pk/pkInfoDetail",
|
||||
method: "POST",
|
||||
data: {
|
||||
id: this.customData.pkIdB,
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
this.ReceiverData = res.data;
|
||||
console.log(this.ReceiverData);
|
||||
});
|
||||
},
|
||||
|
||||
goBack() {
|
||||
wx.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
formatDate: formatDate,
|
||||
async operation(status) {
|
||||
console.log("``````", this.customData);
|
||||
console.log(status);
|
||||
|
||||
const res = await request({
|
||||
url: "pk/pkInfoDetail",
|
||||
method: "POST",
|
||||
data: {
|
||||
pkIdA: this.customData.pkIdA,
|
||||
pkIdB: this.customData.pkIdB,
|
||||
userIdA: this.customData.userIdA,
|
||||
userIdB: this.customData.userIdB,
|
||||
pkTime: this.customData.pkTime,
|
||||
pkNumber: this.customData.pkNumber,
|
||||
status: status,
|
||||
},
|
||||
userInfo: false,
|
||||
}).then((res) => {
|
||||
console.log(res.data);
|
||||
const Hinttext = status === 1 ? "接受邀请成功" : "拒绝邀请成功";
|
||||
if (res.code === 200) {
|
||||
wx.showToast({
|
||||
title: Hinttext,
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
wx.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}else {
|
||||
wx.showToast({
|
||||
title: "操作失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 60rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.Return {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.Content {
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.sender {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.sengderIcon {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.Individual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 34.35rpx;
|
||||
}
|
||||
.name {
|
||||
font-size: 30.53rpx;
|
||||
color: #161616;
|
||||
margin-right: 16.22rpx;
|
||||
}
|
||||
.nation {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
font-size: 17.18rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 29.58rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.male {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-color: #5bced1;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.female {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-color: #f3876f;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.age {
|
||||
font-size: 17.18rpx;
|
||||
color: #fff;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
.Time {
|
||||
color: #666666;
|
||||
font-size: 26.72rpx;
|
||||
margin-top: 48.7rpx;
|
||||
}
|
||||
.goldCoin {
|
||||
background-image: url("../../static/Backgroundofgoldcoins.png");
|
||||
width: 334.83rpx;
|
||||
height: 124.05rpx;
|
||||
margin-right: 21rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Session {
|
||||
background-image: url("../../static/Fieldnumberbackground.png");
|
||||
width: 334.83rpx;
|
||||
height: 124.05rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.SessionAndGoldCoin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.goldtext {
|
||||
font-size: 28.63rpx;
|
||||
color: #929292;
|
||||
}
|
||||
.goldnumber {
|
||||
font-size: 34.35rpx;
|
||||
color: #161616;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goldcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 150rpx;
|
||||
}
|
||||
.accept {
|
||||
width: 325.38rpx;
|
||||
height: 77.29rpx;
|
||||
margin-right: 35.5rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #03aba8;
|
||||
color: #03aba8;
|
||||
font-size: 28.63rpx;
|
||||
line-height: 77.29rpx;
|
||||
}
|
||||
.reject {
|
||||
width: 325.38rpx;
|
||||
height: 77.29rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #03aba8;
|
||||
border: 1rpx solid #03aba8;
|
||||
color: #fff;
|
||||
font-size: 28.63rpx;
|
||||
line-height: 77.29rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +1,83 @@
|
||||
<template>
|
||||
<view class="Navigation">
|
||||
<image
|
||||
src="../../static/Navigationimg.png"
|
||||
mode="scaleToFill"
|
||||
class="Navigationimg"
|
||||
/>
|
||||
<image
|
||||
@click="Returnfunc"
|
||||
src="../../static/Return.png"
|
||||
mode="scaleToFill"
|
||||
class="Return"
|
||||
/>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="individual">
|
||||
<view class="anchor">
|
||||
<!-- <image
|
||||
src="{{item.anchorIcon}}"
|
||||
mode="scaleToFill"
|
||||
/> -->
|
||||
</view>
|
||||
<view>
|
||||
<view>主播名称{{ item.anchorId }}</view>
|
||||
<view>主播性别{{ item.sex === 1 ? "男" : "女" }}</view>
|
||||
<view> 国家{{ item.country }}</view>
|
||||
<view class="background">
|
||||
<image
|
||||
style="width: 100%; height: 100%"
|
||||
src="../../static/HomeBackground.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="Navigation">
|
||||
<view class="Return" @click="Returnfunc">
|
||||
<image class="Return" src="../../static/Return.png" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view>pk场数:3场</view>
|
||||
<view>金币{{ item.coin }}</view>
|
||||
<view>PK时间{{ formatDate(item.pkTime) }}</view>
|
||||
<view>pk场数</view>
|
||||
<view class="Content">
|
||||
<!-- 发布者 -->
|
||||
<view class="sender">
|
||||
<view class="sengderIcon">
|
||||
<image class="Icon" :src="item.anchorIcon" mode="scaleToFill" />
|
||||
</view>
|
||||
|
||||
<view>主播备注{{ item.remark }}</view>
|
||||
<button @click="openChat()">聊了个天</button>
|
||||
<button @click="open()">立即邀请PK</button>
|
||||
<view class="Individual">
|
||||
<view class="name">{{ item.anchorId }}</view>
|
||||
|
||||
<view class="GenderAndAge">
|
||||
<view class="male" v-if="item.sex === '1'">
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/male.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
|
||||
<view class="female" v-else>
|
||||
<view>
|
||||
<image
|
||||
style="width: 20rpx; height: 20rpx"
|
||||
src="../../static/female.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="age"> 21 </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nation">{{ item.country }}</view>
|
||||
</view>
|
||||
<view class="Time">PK时间:{{ formatDate(item.pkTime) }}</view>
|
||||
<view class="SessionAndGoldCoin">
|
||||
<view class="goldCoin">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/gold.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="goldcard">
|
||||
<view class="goldnumber">{{ item.coin }}</view>
|
||||
<view class="goldtext">金币</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="Session">
|
||||
<image
|
||||
style="width: 72rpx; height: 72rpx; margin-left: 36rpx; margin-right: 32rpx"
|
||||
src="../../static/session.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="goldcard">
|
||||
<view class="goldnumber">{{ item.pkNumber }}</view>
|
||||
<view class="goldtext">PK场数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button">
|
||||
<button class="accept" @click="openChat()">聊了个天</button>
|
||||
<button class="reject" @click="open()">立即邀请</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹窗 -->
|
||||
<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
|
||||
@@ -145,7 +189,6 @@ export default {
|
||||
this.userlist();
|
||||
},
|
||||
invite() {
|
||||
|
||||
// if (this.item.pkTime !== this.list[this.InvitingPartyEventindex].pkTime) {
|
||||
// uni.showToast({
|
||||
// icon: "none",
|
||||
@@ -216,43 +259,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式定义 */
|
||||
.Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200rpx;
|
||||
}
|
||||
.Navigationimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.Return {
|
||||
position: absolute;
|
||||
left: 60rpx;
|
||||
bottom: 40rpx;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.individual {
|
||||
display: flex;
|
||||
/* justify-content: center; */
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
.anchor {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background-color: rgba(0, 0, 255, 0.369);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.popup-content {
|
||||
width: 500rpx;
|
||||
height: 700rpx;
|
||||
@@ -332,4 +338,180 @@ export default {
|
||||
.NameMoney_Name {
|
||||
text-align: left;
|
||||
}
|
||||
.background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.Navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 60rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.Return {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.Content {
|
||||
position: absolute;
|
||||
top: 200rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.sender {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 80rpx;
|
||||
}
|
||||
.sengderIcon {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.Individual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 34.35rpx;
|
||||
}
|
||||
.name {
|
||||
font-size: 30.53rpx;
|
||||
color: #161616;
|
||||
margin-right: 16.22rpx;
|
||||
}
|
||||
.nation {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
font-size: 17.18rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
line-height: 29.58rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.male {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-color: #5bced1;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.female {
|
||||
width: 56.3rpx;
|
||||
height: 29.58rpx;
|
||||
background-color: #f3876f;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 6rpx 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.age {
|
||||
font-size: 17.18rpx;
|
||||
color: #fff;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
.Time {
|
||||
color: #666666;
|
||||
font-size: 26.72rpx;
|
||||
margin-top: 48.7rpx;
|
||||
}
|
||||
.goldCoin {
|
||||
background-image: url("../../static/Backgroundofgoldcoins.png");
|
||||
width: 334.83rpx;
|
||||
height: 124.05rpx;
|
||||
margin-right: 21rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.Session {
|
||||
background-image: url("../../static/Fieldnumberbackground.png");
|
||||
width: 334.83rpx;
|
||||
height: 124.05rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.SessionAndGoldCoin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.goldtext {
|
||||
font-size: 28.63rpx;
|
||||
color: #929292;
|
||||
}
|
||||
.goldnumber {
|
||||
font-size: 34.35rpx;
|
||||
color: #161616;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goldcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 645rpx;
|
||||
}
|
||||
.accept {
|
||||
width: 325.38rpx;
|
||||
height: 77.29rpx;
|
||||
margin-right: 35.5rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #03aba8;
|
||||
color: #03aba8;
|
||||
font-size: 28.63rpx;
|
||||
line-height: 77.29rpx;
|
||||
}
|
||||
.reject {
|
||||
width: 325.38rpx;
|
||||
height: 77.29rpx;
|
||||
border-radius: 50rpx;
|
||||
background-color: #03aba8;
|
||||
border: 1rpx solid #03aba8;
|
||||
color: #fff;
|
||||
font-size: 28.63rpx;
|
||||
line-height: 77.29rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user