Initial commit
This commit is contained in:
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="header_top">
|
||||
<handleback></handleback>
|
||||
<div>账户修改</div>
|
||||
<div>玩法说明</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div
|
||||
class="space_between mian_i"
|
||||
@click="
|
||||
handlechange(1);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<div>修改头像</div>
|
||||
<div>
|
||||
去修改
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="space_between mian_i"
|
||||
@click="
|
||||
handlechange(2);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<div>修改昵称</div>
|
||||
<div>
|
||||
去修改
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="space_between mian_i" @click="handlechange(3);playAudio()">
|
||||
<div>修改手机号</div>
|
||||
<div>
|
||||
去修改
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="out" v-if="onchange">
|
||||
<div class="column out_top">
|
||||
<div class="out_title">{{ title }}</div>
|
||||
|
||||
<div class="out_nickname" v-if="title == '修改头像'">
|
||||
<input type="file" @change="uploadImage" />
|
||||
<!-- <div size="small" type="primary" style="font-size: 12px" @click="uploadImage">点击更换头像</div> -->
|
||||
</div>
|
||||
<div class="out_nickname" v-if="title == '修改昵称'">
|
||||
<input type="text" placeholder="请输入昵称" v-model="as" />
|
||||
</div>
|
||||
<div class="out_nickname" v-if="title == '修改手机号'">
|
||||
<input type="text" placeholder="请输入手机号" v-model="phoneNumber" />
|
||||
</div>
|
||||
<div class="out_nickname space_between" v-if="title == '修改手机号'">
|
||||
<input type="text" placeholder="请输入验证码" v-model="code" />
|
||||
<div
|
||||
@click="
|
||||
handlesend();
|
||||
playAudio();
|
||||
"
|
||||
style="width: 30%"
|
||||
>
|
||||
{{ buttonText }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="out_btn space_between">
|
||||
<div
|
||||
class="btn_q center btn_click"
|
||||
@click="
|
||||
onchange = false;
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
取消
|
||||
</div>
|
||||
<div
|
||||
class="btn_a center btn_click"
|
||||
@click="
|
||||
handlesubmit();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserDetails, getcode, updataavatar } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
onchange: false,
|
||||
counting: false,
|
||||
buttonText: "发送验证码",
|
||||
countdownTime: 60,
|
||||
code: "",
|
||||
as: "",
|
||||
phoneNumber: "",
|
||||
title: "修改手机号",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
uploadImage(event) {
|
||||
const file = event.target.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append("file", file);
|
||||
|
||||
updataavatar(formData).then((res) => {
|
||||
if (res.data.code) {
|
||||
console.log("成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
throttle(func, limit) {
|
||||
let inThrottle;
|
||||
return function () {
|
||||
const args = arguments;
|
||||
const context = this;
|
||||
if (!inThrottle) {
|
||||
func.apply(context, args);
|
||||
inThrottle = true;
|
||||
setTimeout(() => (inThrottle = false), limit);
|
||||
}
|
||||
};
|
||||
},
|
||||
handlesend() {
|
||||
const phoneRegex = /^1[3456789]\d{9}$/;
|
||||
|
||||
if (phoneRegex.test(this.phoneNumber)) {
|
||||
if (this.counting) {
|
||||
return;
|
||||
}
|
||||
getcode({
|
||||
phoneNumber: this.phoneNumber,
|
||||
type: "3",
|
||||
}).then((res) => {
|
||||
if (res.data.code) {
|
||||
console.log("成功");
|
||||
}
|
||||
});
|
||||
this.counting = true;
|
||||
this.buttonText = `${this.countdownTime}s`;
|
||||
const interval = setInterval(() => {
|
||||
this.countdownTime--;
|
||||
if (this.countdownTime === 0) {
|
||||
clearInterval(interval);
|
||||
this.counting = false;
|
||||
this.buttonText = "发送验证码";
|
||||
this.countdownTime = 60;
|
||||
} else {
|
||||
this.buttonText = `${this.countdownTime}s`;
|
||||
}
|
||||
}, 1000);
|
||||
} else if (this.phoneNumber == "") {
|
||||
this.$message({
|
||||
message: "请输入手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: "请输入正确的手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
handlechange(res) {
|
||||
if (res == 1) {
|
||||
this.title = "修改头像";
|
||||
} else if (res == 2) {
|
||||
this.title = "修改昵称";
|
||||
} else if (res == 3) {
|
||||
this.title = "修改手机号";
|
||||
}
|
||||
this.onchange = true;
|
||||
},
|
||||
handlesend1() {
|
||||
getcode({
|
||||
phoneNumber: this.phoneNumber,
|
||||
type: "3",
|
||||
}).then((res) => {
|
||||
if (res.data.code) {
|
||||
console.log("成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
handlesubmit() {
|
||||
if (this.title == "修改昵称") {
|
||||
let nickName = { nickName: this.as };
|
||||
updateUserDetails(nickName).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.onchange = false;
|
||||
} else {
|
||||
this.onchange = false;
|
||||
}
|
||||
});
|
||||
} else if (this.title == "修改手机号") {
|
||||
let phoneNumber = { phoneNumber: this.as, code: 6627 };
|
||||
updateUserDetails(phoneNumber).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "修改成功",
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.onchange = false;
|
||||
} else {
|
||||
this.onchange = false;
|
||||
}
|
||||
});
|
||||
} else if (this.title == "修改头像") {
|
||||
this.onchange = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
div:first-child {
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
background: #000000a3;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
.mian_i {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 0 5%;
|
||||
height: 59px;
|
||||
border-bottom: 1px solid #323436;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #727477;
|
||||
}
|
||||
}
|
||||
.out {
|
||||
width: 525px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
.out_top {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
height: 245px;
|
||||
background: #101115;
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
margin-top: 211px;
|
||||
overflow: hidden;
|
||||
justify-content: space-around;
|
||||
padding: 0 32px;
|
||||
.out_title {
|
||||
font-size: 28px;
|
||||
}
|
||||
.out_nickname {
|
||||
width: 100%;
|
||||
|
||||
height: 56px;
|
||||
padding: 0 2% 0 5%;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 35px;
|
||||
border: 1px solid #323436;
|
||||
color: #fff;
|
||||
font-size: 21px;
|
||||
background-color: #323436;
|
||||
text-indent: 10px;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.out_btn {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
position: relative;
|
||||
.btn_q {
|
||||
width: 47%;
|
||||
height: 42px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.5) 0%,
|
||||
rgba(114, 116, 119, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
}
|
||||
.btn_a {
|
||||
width: 47%;
|
||||
height: 42px;
|
||||
background: #1f3a58;
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_top::before {
|
||||
content: ""; /*必须设置content属性*/
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-215deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 41%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<svg @click="handleClose" t="1705470289990" class="icon close" viewBox="0 0 1024 1024" version="1.1" p-id="3432"
|
||||
width="28" height="28">
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477" p-id="3433" />
|
||||
</svg>
|
||||
<div class="advert" @click="goLogin">
|
||||
<img :src="img|fullPath" alt="" class="advert-img" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import browser from "@/utils/brouser";
|
||||
// getToken
|
||||
// import { setToken } from "../../../api/cookie";
|
||||
// import { mapState } from "vuex";
|
||||
export default {
|
||||
// 接收传值
|
||||
props: {
|
||||
img: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 关闭广告
|
||||
handleClose() {
|
||||
this.$bus.$emit("closeAdvert", false);
|
||||
},
|
||||
// 注册
|
||||
goLogin() {
|
||||
this.$bus.$emit("goLogin", 'zc');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 77px;
|
||||
top: 25vh;
|
||||
}
|
||||
.advert {
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.advert-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="header_top space_between">
|
||||
<handleback></handleback>
|
||||
<div>{{ title }}</div>
|
||||
<div>玩法说明</div>
|
||||
</div>
|
||||
|
||||
<div class="main" v-if="type == 'yhxy'">
|
||||
<div class="main_tab space_around">
|
||||
<div class="btn center" :class="key == 1 ? 'active' : ''" @click.stop="handlechange(1); playAudio()">
|
||||
<div class="ic">隐私协议</div>
|
||||
</div>
|
||||
<div class="btn center" :class="key == 2 ? 'active' : ''" @click.stop="handlechange(2); playAudio()">
|
||||
<div class="ic">用户协议</div>
|
||||
</div>
|
||||
<div @mousedown="startDrag" class="slider" ref="slider" :style="{ left: left + 'px' }"></div>
|
||||
</div>
|
||||
<div class="main_content" ref="content" v-html="contents"></div>
|
||||
</div>
|
||||
<div class="main" v-if="type == 'bzzx'">
|
||||
<div class="space_between main_ii_top">
|
||||
<div class="center main_ii_top_left" @click="isselect = true">
|
||||
{{ titleqqq }}
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
<div class="main_ii_top_left_xl" v-if="isselect">
|
||||
<div @click.stop="handlehelptype(item.value)" class="main_ii_top_left_xl_btn center"
|
||||
v-for="(item, index) in helptype" :key="index">
|
||||
{{ item.type }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_ii_center">
|
||||
<div ref="bangzhuzhongxin" v-html="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" v-if="type == 'gywm'">
|
||||
<div class="main_iii">
|
||||
<div class=" mian_iii_center">
|
||||
<div v-for="(item, index) in articleList" :key="index">
|
||||
<div v-if="item.id != 2 && item.id != 5" class="mian_iii_center-name" @click="dianji(item.id)"><span>{{
|
||||
item.title }}</span>
|
||||
<svg t="1720492291090" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg" p-id="4257" width="26" height="26">
|
||||
<path
|
||||
d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752"
|
||||
fill="#bfbfbf" p-id="4258"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-if="item.id === isshow" class="main_content" v-html="item.content"></div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getagreement, getArticle } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
contents: "",
|
||||
isselect: false,
|
||||
helptype: [
|
||||
|
||||
{
|
||||
type: "取回教程",
|
||||
value: 1,
|
||||
}
|
||||
|
||||
],
|
||||
titleqqq: "网站充值教程",
|
||||
dragging: false,
|
||||
startX: 0,
|
||||
left: 4,
|
||||
key: 2,
|
||||
title: "",
|
||||
type: null,
|
||||
data: {
|
||||
about: {
|
||||
qr: [
|
||||
// {
|
||||
// url: "https://img2.baidu.com/it/u=3169331048,4117927422&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200",
|
||||
// name: "QQ客服",
|
||||
// },
|
||||
// {
|
||||
// url: "https://img1.baidu.com/it/u=2426361314,145551708&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200",
|
||||
// name: "QQ2群",
|
||||
// },
|
||||
{
|
||||
url: "123.png",
|
||||
name: "QQ1群",
|
||||
},
|
||||
],
|
||||
// service: [
|
||||
// {
|
||||
// type: "客服热线：",
|
||||
// value: "12345456",
|
||||
// },
|
||||
// {
|
||||
// type: "客服热线：",
|
||||
// value: "12345456",
|
||||
// },
|
||||
// {
|
||||
// type: "客服热线：",
|
||||
// value: "12345456",
|
||||
// },
|
||||
// {
|
||||
// type: "客服热线：",
|
||||
// value: "12345456",
|
||||
// },
|
||||
// ],
|
||||
},
|
||||
},
|
||||
articleList: [],
|
||||
isshow: -1,
|
||||
queryId:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.gettype();
|
||||
this.getArticle()
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
dianji(e) {
|
||||
if(e==this.isshow){
|
||||
this.isshow=-1
|
||||
|
||||
}else{
|
||||
this.isshow = e
|
||||
}
|
||||
|
||||
},
|
||||
getArticle() {
|
||||
getArticle("sydb").then((res) => {
|
||||
this.articleList = res.data.data.contentList;
|
||||
|
||||
});
|
||||
},
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handlehelptype(res) {
|
||||
this.titleqqq = this.helptype[res - 1].type;
|
||||
this.isselect = false;
|
||||
this.getlist(4);
|
||||
},
|
||||
handlechange(res) {
|
||||
this.key = res;
|
||||
// document.getElementsByClassName('main_content').
|
||||
const width = this.$refs.slider.offsetWidth;
|
||||
this.left = width * (res - 1);
|
||||
if (res == 1) {
|
||||
this.getlist(2);
|
||||
} else if (res == 2) {
|
||||
this.getlist(5);
|
||||
}
|
||||
},
|
||||
getlist(stat) {
|
||||
getagreement(stat).then((resa) => {
|
||||
if (resa.data.code == 200) {
|
||||
this.contents = resa.data.data.content;
|
||||
}
|
||||
});
|
||||
},
|
||||
startDrag(event) {
|
||||
const element = this.$refs.slider;
|
||||
element.className = " slider";
|
||||
this.dragging = true;
|
||||
this.startX = event.clientX - this.left;
|
||||
document.addEventListener("mousemove", this.drag);
|
||||
document.addEventListener("mouseup", this.endDrag);
|
||||
},
|
||||
drag(event) {
|
||||
if (this.dragging) {
|
||||
let newLeft = event.clientX - this.startX;
|
||||
if (newLeft < 0) {
|
||||
this.left = 4;
|
||||
} else if (
|
||||
newLeft >
|
||||
this.$refs.slider.parentElement.offsetWidth -
|
||||
this.$refs.slider.offsetWidth
|
||||
) {
|
||||
this.left =
|
||||
this.$refs.slider.parentElement.offsetWidth -
|
||||
this.$refs.slider.offsetWidth;
|
||||
} else {
|
||||
this.left = newLeft;
|
||||
}
|
||||
}
|
||||
},
|
||||
endDrag() {
|
||||
this.dragging = false;
|
||||
const width = this.$refs.slider.offsetWidth;
|
||||
if (this.left < width * 0.75) {
|
||||
this.left = 4;
|
||||
this.key = 1;
|
||||
} else {
|
||||
this.left = width;
|
||||
this.key = 2;
|
||||
}
|
||||
const element = this.$refs.slider;
|
||||
element.classList += " tr";
|
||||
document.removeEventListener("mousemove", this.drag);
|
||||
document.removeEventListener("mouseup", this.endDrag);
|
||||
},
|
||||
gettype() {
|
||||
this.type = localStorage.getItem("help-type");
|
||||
|
||||
if (this.type == "yhxy") {
|
||||
this.title = "隐私协议&用户协议";
|
||||
this.getlist(2);
|
||||
} else if (this.type == "bzzx") {
|
||||
this.title = "帮助中心";
|
||||
this.getlist(4);
|
||||
} else if (this.type == "gywm") {
|
||||
this.title = "关于我们";
|
||||
this.getlist(3);
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
text-align: left !important;
|
||||
|
||||
}
|
||||
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main_tab {
|
||||
margin: 0 auto;
|
||||
width: 203px;
|
||||
height: 42px;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
color: #727477;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 49%;
|
||||
height: 35px;
|
||||
opacity: 1;
|
||||
|
||||
.ic {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 49%;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
background: linear-gradient(-90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slider::before {
|
||||
content: "";
|
||||
/*必须设置content属性*/
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.tr {
|
||||
transition: left 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.main_content {
|
||||
margin-top: 20px;
|
||||
padding: 21px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main_ii_top {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main_ii_center {
|
||||
margin-top: 21px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main_iii {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
background: #101115;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
opacity: 1;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.mian_iii_top {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mian_iii_top_qr {
|
||||
width: 98px;
|
||||
// background-image: url("???");
|
||||
height: 98px;
|
||||
}
|
||||
|
||||
.mian_iii_center {
|
||||
.mian_iii_center-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: #585a60;
|
||||
opacity: 1;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px;
|
||||
margin: 10px 0;
|
||||
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_ii_top_left {
|
||||
width: 224px;
|
||||
height: 42px;
|
||||
background: #323436;
|
||||
border-radius: 70px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.main_ii_top_left_xl {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 45px;
|
||||
|
||||
background: #101115;
|
||||
}
|
||||
|
||||
.main_ii_top_left_xl_btn {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
background: #1f3a58;
|
||||
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,844 @@
|
||||
<template>
|
||||
<div class="home" @click.stop="selectlist = fasle">
|
||||
<div class="header_top">
|
||||
<handleback></handleback>
|
||||
<div>我的背包</div>
|
||||
<div>玩法说明</div>
|
||||
</div>
|
||||
<div class="header column">
|
||||
<div class="header_I left">
|
||||
<div class="header_I_I">饰品总数 : {{ totalOrnamentNumber }}</div>
|
||||
<div class="header_I_I">饰品总价值 : {{ totalOrnamentPrice }}</div>
|
||||
</div>
|
||||
<div class="header_II left" v-if="false">
|
||||
<div class="header_II_I">
|
||||
已选饰品总数 : {{ isAll ? totalOrnamentNumber : recyleMoney.index }}
|
||||
</div>
|
||||
<div class="header_II_I">
|
||||
已选饰品总价值 : {{ isAll ? totalOrnamentPrice : recyleMoney.money }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main column">
|
||||
<div class="main_I space_between">
|
||||
<div class="main_I_I center" @click.stop="selectlist = !selectlist">
|
||||
{{ selected }}
|
||||
<div class="main_I_I_I" v-if="selectlist">
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(0);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
默认排序
|
||||
</div>
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(1);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
按价格从低到高排序
|
||||
</div>
|
||||
<div
|
||||
class="main_I_I_I_I center"
|
||||
@click.stop="
|
||||
handlesort(2);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
按价格从高到低排序
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_I_II">
|
||||
<div class="main_I_II_I">
|
||||
<input
|
||||
type="text"
|
||||
v-model="page.name"
|
||||
name
|
||||
id
|
||||
style="serch"
|
||||
placeholder="请输入饰品名称"
|
||||
/>
|
||||
<svg
|
||||
@click="handlesearch"
|
||||
t="1705982070098"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3285"
|
||||
width="30"
|
||||
height="30"
|
||||
>
|
||||
<path
|
||||
d="M512.034281 76.882018c-240.202711 0-435.165054 194.83136-435.165054 435.124122 0 240.268202 194.96132 435.100586 435.165054 435.100586 59.585073 0 116.371404-12.05557 168.096463-33.743522-13.106506-5.012154-24.790616-14.037714-32.602535-26.979468L544.87013 714.613604c-111.893416 33.626865-236.425687-10.772344-299.55447-115.499547-74.789357-123.859959-34.93465-285.041942 88.921215-359.814925 124.066667-74.738192 285.119713-34.814923 359.861998 89.102341 63.10627 104.58701 44.26311 235.499595-37.545104 318.843792l102.704127 171.745573c8.442276 13.96813 10.727319 29.801746 8.185426 44.703131 108.698654-79.121012 179.662893-206.981075 179.662893-351.687828C947.106214 271.713378 752.261551 76.882018 512.034281 76.882018"
|
||||
fill="#3A97E4"
|
||||
p-id="3286"
|
||||
/>
|
||||
<path
|
||||
d="M385.72862 324.729849c-76.770478 46.324048-101.538581 146.152684-55.153134 223.013213 46.385447 76.905554 146.222269 101.531418 223.180012 55.149041 76.842109-46.310745 101.538581-146.233526 55.153134-223.01219C562.546721 302.902728 462.687386 278.230816 385.72862 324.729849"
|
||||
fill="#3A97E4"
|
||||
p-id="3287"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_II space_between">
|
||||
<div class="main_II_I space_between">
|
||||
<!-- <div
|
||||
class="main_II_I_I center btn_click"
|
||||
@click="
|
||||
openConfirmDelivery();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
提取
|
||||
</div> -->
|
||||
<div
|
||||
v-if="false"
|
||||
class="main_II_I_I center btn_click"
|
||||
@click="
|
||||
openConfirm();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
分解
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_II_II space_between" v-if="false">
|
||||
<div
|
||||
class="main_II_II_I space_between"
|
||||
@click="
|
||||
handleSelectAll();
|
||||
playAudio();
|
||||
"
|
||||
:class="isAll ? 'active' : ''"
|
||||
>
|
||||
<svg
|
||||
t="1707113229515"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3034"
|
||||
>
|
||||
<path
|
||||
d="M673.858 151.948H198.194C88.903 151.948 0 240.852 0 350.142v475.665C0 935.097 88.903 1024 198.194 1024h475.665c109.29 0 198.194-88.903 198.194-198.194V350.142c-0.001-109.29-88.905-198.194-198.195-198.194z m21.419 320.917l-286.283 286.27c-7.742 7.742-17.884 11.613-28.026 11.613s-20.284-3.871-28.026-11.613L176.774 582.968c-15.484-15.471-15.484-40.581 0-56.052 15.484-15.484 40.568-15.484 56.052 0l148.142 148.142 258.258-258.245c15.484-15.484 40.568-15.484 56.052 0 15.483 15.484 15.483 40.581-0.001 56.052z"
|
||||
fill="#727277"
|
||||
p-id="3035"
|
||||
/>
|
||||
<path
|
||||
d="M825.806 0H350.142c-73.597 0-137.813 40.405-171.997 100.113 6.634-0.529 13.281-1.016 20.048-1.016h475.665c138.426 0 251.045 112.619 251.045 251.045v475.665c0 6.768-0.487 13.414-1.016 20.048C983.595 811.671 1024 747.455 1024 673.858V198.194C1024 88.903 935.097 0 825.806 0z"
|
||||
fill="#727277"
|
||||
p-id="3036"
|
||||
/>
|
||||
</svg>
|
||||
全选
|
||||
</div>
|
||||
<div class="main_II_II_II">
|
||||
已选：{{ isAll ? totalOrnamentNumber : recyleMoney.index }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom grade3" @scroll="scroll">
|
||||
<div
|
||||
@click="
|
||||
handleSelect(item);
|
||||
playAudio();
|
||||
"
|
||||
class="bottom_I"
|
||||
:class="item.isselect ? 'selectbg' : ''"
|
||||
:style="{ 'background-image': `url(${item.levelImg})` }"
|
||||
v-for="(item, index) in arr"
|
||||
:key="index"
|
||||
>
|
||||
<div class="bottom_I_I center">
|
||||
<img :src="item.imageUrl|fullPath" alt width="100%" />
|
||||
</div>
|
||||
<div class="textover-f">{{ item.shortName || item.name }}</div>
|
||||
<div>
|
||||
<div class="money-money">
|
||||
<money class="money"></money>
|
||||
{{ item.ornamentsPrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="out" v-if="Confirm">
|
||||
<div class="out_I animate__animated animate__slideInDown" ref="confirmel">
|
||||
{{ isAll ? "确定清空背包吗" : "确定要分解吗？" }}
|
||||
<div class="out_I_I space_between">
|
||||
<div
|
||||
class="out_I_I_I center btn_click"
|
||||
@click="
|
||||
cancelConfirm();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
取消
|
||||
</div>
|
||||
<div
|
||||
class="out_I_I_II center btn_click"
|
||||
@click="
|
||||
handledecompose();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<div v-if="onsubmit">确认</div>
|
||||
<div v-else>
|
||||
<i class="el-icon-loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="out" v-if="confirmDelivery">
|
||||
<div class="out_I animate__animated animate__slideInDown" ref="confirmel">
|
||||
{{
|
||||
isAll
|
||||
? "确定提取背包内所有物品吗"
|
||||
: `确定要提取${selectarr.length}件物品吗？`
|
||||
}}
|
||||
<div class="out_I_I space_between">
|
||||
<div
|
||||
class="out_I_I_I center btn_click"
|
||||
@click="
|
||||
cancelConfirm();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
取消
|
||||
</div>
|
||||
<div
|
||||
class="out_I_I_II center btn_click"
|
||||
@click="
|
||||
handledelivery();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<div v-if="onsubmit">确认</div>
|
||||
<div v-else>
|
||||
<i class="el-icon-loading"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPackSack,
|
||||
decompose,
|
||||
delivery,
|
||||
getUserInfo,
|
||||
packSackGlobalData,
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
onsubmit: true,
|
||||
Confirm: false,
|
||||
confirmDelivery: false,
|
||||
isok: false,
|
||||
isselectall: false,
|
||||
number: 20,
|
||||
selectlist: false,
|
||||
searchTerm: "",
|
||||
selected: "默认排序",
|
||||
arr: [],
|
||||
isAll: false,
|
||||
selectarr: [],
|
||||
page: {
|
||||
page: 1,
|
||||
size: 12,
|
||||
orderByFie: 1,
|
||||
orderByType: 2,
|
||||
name: "",
|
||||
},
|
||||
isOver: "加载中",
|
||||
totalOrnamentNumber: 0,
|
||||
totalOrnamentPrice: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
recyleMoney() {
|
||||
let money = 0;
|
||||
let index = 0;
|
||||
this.arr.forEach((item) => {
|
||||
if (item.isselect == true) {
|
||||
money += item.ornamentsPrice * 1;
|
||||
index++;
|
||||
}
|
||||
});
|
||||
return { money: money.toFixed(2), index };
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getlist();
|
||||
},
|
||||
|
||||
methods: {
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
scroll(e) {
|
||||
this.event = e;
|
||||
if (
|
||||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||||
e.srcElement.scrollHeight
|
||||
) {
|
||||
// console.log(11);
|
||||
|
||||
if (this.isOver == "加载中") {
|
||||
this.page.page++;
|
||||
setTimeout(() => {
|
||||
this.getlist();
|
||||
}, 5);
|
||||
}
|
||||
}
|
||||
},
|
||||
openConfirm() {
|
||||
if (this.selectarr.length == 0) {
|
||||
this.$message({
|
||||
message: "请先选择饰品再操作",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
this.Confirm = true;
|
||||
}
|
||||
},
|
||||
openConfirmDelivery() {
|
||||
if (this.selectarr.length == 0) {
|
||||
this.$message({
|
||||
message: "请先选择饰品再操作",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
this.confirmDelivery = true;
|
||||
}
|
||||
},
|
||||
handledelivery() {
|
||||
if (this.selectarr.length == 0) {
|
||||
this.$message({
|
||||
message: "请先选择饰品再操作",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
const selectedItems = this.arr.filter((item) => item.isselect === true);
|
||||
this.selectarr = selectedItems.map((item) => item.id);
|
||||
delivery({ isAll: this.isAll, packSackIds: this.selectarr }).then(
|
||||
(res) => {
|
||||
if (res.data.code == 200) {
|
||||
if (this.isAll) {
|
||||
this.isAll = false;
|
||||
}
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
// this.getlist();
|
||||
this.confirmDelivery = false;
|
||||
this.arr = this.arr.filter((item) => {
|
||||
return !this.selectarr.includes(item.id);
|
||||
});
|
||||
this.getGlobalData();
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
cancelConfirm() {
|
||||
const element = this.$refs.confirmel;
|
||||
element.className += " animate__slideOutDown";
|
||||
|
||||
setTimeout(() => {
|
||||
this.Confirm = false;
|
||||
this.confirmDelivery = false;
|
||||
}, 400);
|
||||
},
|
||||
handleSelectAll() {
|
||||
if (this.isAll == true) {
|
||||
// 取消全选
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
this.arr[i].isselect = false;
|
||||
}
|
||||
const selectedItems = this.arr.filter((item) => item.isselect === true);
|
||||
this.selectarr = selectedItems.map((item) => item.id);
|
||||
|
||||
// if (this.selectarr.length == this.arr.length) {
|
||||
this.isAll = false;
|
||||
// }
|
||||
} else if (this.isAll == false) {
|
||||
// 全选
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
this.arr[i].isselect = true;
|
||||
}
|
||||
const selectedItems = this.arr.filter((item) => item.isselect === true);
|
||||
this.selectarr = selectedItems.map((item) => item.id);
|
||||
|
||||
if (this.selectarr.length == this.arr.length) {
|
||||
this.isAll = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
handlesort(res) {
|
||||
this.page.page = 1;
|
||||
this.arr = [];
|
||||
if (res === 1) {
|
||||
this.selected = "按价格从低到高排序";
|
||||
this.page.orderByFie = 2;
|
||||
this.page.orderByType = 1;
|
||||
this.getlist();
|
||||
// this.arr.sort((a, b) => a.ornamentsPrice - b.ornamentsPrice);
|
||||
} else if (res === 2) {
|
||||
this.selected = "按价格从高到低排序";
|
||||
this.page.orderByFie = 2;
|
||||
this.page.orderByType = 2;
|
||||
this.getlist();
|
||||
// this.arr.sort((a, b) => b.ornamentsPrice - a.ornamentsPrice);
|
||||
} else if (res === 0) {
|
||||
this.selected = "默认排序";
|
||||
this.page.orderByFie = 1;
|
||||
this.page.orderByType = 2;
|
||||
this.getlist();
|
||||
}
|
||||
this.selectlist = false;
|
||||
},
|
||||
handlesearch() {
|
||||
this.page.page = 1;
|
||||
this.arr = [];
|
||||
this.page.orderByFie = 1;
|
||||
this.page.orderByType = 2;
|
||||
this.getlist();
|
||||
// if (this.searchTerm == "") {
|
||||
// this.getlist();
|
||||
// } else {
|
||||
// let aa = this.arr.filter((item) => {
|
||||
// return item.itemName.includes(this.searchTerm);
|
||||
// });
|
||||
// this.arr = aa;
|
||||
// }
|
||||
},
|
||||
handleSelect(res) {
|
||||
res.isselect = !res.isselect;
|
||||
const selectedItems = this.arr.filter((item) => item.isselect === true);
|
||||
this.selectarr = selectedItems.map((item) => item.id);
|
||||
if (this.selectarr.length == this.totalOrnamentNumber) {
|
||||
this.isAll = true;
|
||||
} else {
|
||||
this.isAll = false;
|
||||
}
|
||||
},
|
||||
handledecompose() {
|
||||
this.onsubmit = false;
|
||||
const selectedItems = this.arr.filter((item) => item.isselect === true);
|
||||
this.selectarr = selectedItems.map((item) => item.id);
|
||||
|
||||
decompose({ isAll: this.isAll, packSackIds: this.selectarr }).then(
|
||||
(res) => {
|
||||
if (res.data.code === 200) {
|
||||
const element = this.$refs.confirmel;
|
||||
element.className += " animate__slideOutUp";
|
||||
if (this.isAll) {
|
||||
this.isAll = false;
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.Confirm = false;
|
||||
this.$message({
|
||||
message: "分解成功",
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
getUserInfo().then((res) => {
|
||||
this.user = res.data.data;
|
||||
this.$store.commit("USER_INFO", res.data.data);
|
||||
});
|
||||
this.onsubmit = true;
|
||||
}, 400);
|
||||
|
||||
this.arr = this.arr.filter((item) => {
|
||||
return !this.selectarr.includes(item.id);
|
||||
});
|
||||
this.getGlobalData();
|
||||
} else {
|
||||
this.Confirm = false;
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
getGlobalData() {
|
||||
packSackGlobalData().then((res) => {
|
||||
console.log("背包统计", res.data);
|
||||
this.totalOrnamentPrice = res.data.data.totalOrnamentPrice;
|
||||
this.totalOrnamentNumber = res.data.data.totalOrnamentNumber;
|
||||
});
|
||||
},
|
||||
getlist() {
|
||||
this.getGlobalData();
|
||||
getPackSack(this.page).then((res) => {
|
||||
console.log("getPackSack", res);
|
||||
let arr = [];
|
||||
arr = res.data.data;
|
||||
if (this.isAll == true) {
|
||||
arr = arr.map((item) => ({ ...item, isselect: true }));
|
||||
} else {
|
||||
arr = arr.map((item) => ({ ...item, isselect: false }));
|
||||
}
|
||||
this.arr.push(...arr);
|
||||
this.isok = true;
|
||||
if (res.data.data.length < this.page.size) {
|
||||
this.isOver = "暂无更多";
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
height: 362px;
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
div:first-child {
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: #000000a3;
|
||||
border-radius: 6px;
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 100px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.header_II {
|
||||
height: 70px;
|
||||
width: 100%;
|
||||
@media (max-width: 550px) {
|
||||
height: 50px;
|
||||
}
|
||||
.header_II_I {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
.header_I {
|
||||
height: 70px;
|
||||
border-bottom: 1px solid #323436;
|
||||
width: 100%;
|
||||
@media (max-width: 550px) {
|
||||
height: 50px;
|
||||
}
|
||||
.header_I_I {
|
||||
width: 49%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
margin-top: 14px;
|
||||
.main_I {
|
||||
width: 100%;
|
||||
.main_I_I {
|
||||
width: 224px;
|
||||
height: 42px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #3fa2c7;
|
||||
background: #10253cb5;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
@media (max-width: 550px) {
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
.main_I_I_I {
|
||||
width: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 44px;
|
||||
background:#10253cb5;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
top: 34px;
|
||||
}
|
||||
|
||||
.main_I_I_I_I {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
opacity: 1;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 11px;
|
||||
height: 30px;
|
||||
}
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_I_II {
|
||||
.main_I_II_I {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
padding: 0 2% 0 5%;
|
||||
border-radius: 1px;
|
||||
background: url('../../../assets/roll_serch.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 8px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@media (max-width: 550px) {
|
||||
width: 185px;
|
||||
height: 30px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 35px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
background-color: transparent;
|
||||
text-indent: 10px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
.main_II_I {
|
||||
width: 227px;
|
||||
@media (max-width: 550px) {
|
||||
width: 160px;
|
||||
}
|
||||
.main_II_I_I {
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #3fa2c7;
|
||||
background: #10253cb5;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II_II {
|
||||
width: 45%;
|
||||
justify-content: right;
|
||||
font-size: 18px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
.main_II_II_I {
|
||||
width: 44%;
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@media (max-width: 550px) {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
svg {
|
||||
path {
|
||||
fill: #3a97e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_II_II_II {
|
||||
// width: 44%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 14px;
|
||||
.bottom_I {
|
||||
// border: 2px solid #727277;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
background-color: rgba(50, 52, 54, 0.25);
|
||||
background-size: 100% 100%;
|
||||
border-radius: 14px;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 13px;
|
||||
@media (max-width: 550px) {
|
||||
height: 125px;
|
||||
|
||||
font-size: 9px;
|
||||
}
|
||||
.bottom_I_I {
|
||||
margin: 0 auto;
|
||||
width: 65%;
|
||||
height: 112px;
|
||||
@media (max-width: 550px) {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.out {
|
||||
width: 525px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 2;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
.out_I {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
height: 168px;
|
||||
margin-top: 210px;
|
||||
background: hsla(0, 0%, 100%, 0.1);
|
||||
border-radius: 21px;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
padding-top: 35px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 120px;
|
||||
font-size: 15px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.out_I_I {
|
||||
width: 87%;
|
||||
margin: 0 auto;
|
||||
margin-top: 35px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.out_I_I_I {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.5) 0%,
|
||||
rgba(114, 116, 119, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.out_I_I_II {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background: #1f3a58;
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_I::before {
|
||||
content: ""; /*必须设置content属性*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-219deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 40%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.selectbg {
|
||||
border: 2px solid #3fa2c7 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,665 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="logo">
|
||||
<img src="@/assets/logo/logo.png" alt />
|
||||
</div>
|
||||
<svg v-if="false" @click="handleClose" t="1705470289990" class="icon close" viewBox="0 0 1024 1024" version="1.1" p-id="3432"
|
||||
width="28" height="28">
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477" p-id="3433" />
|
||||
</svg>
|
||||
<!-- 登录 -->
|
||||
<div class="main_center" v-if="status == 'dl'">
|
||||
<div class="main_top">登录</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="form.phoneNumber" placeholder="请输入账号" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入密码" v-model="form.password" @keyup.enter="handleLogin" />
|
||||
</div>
|
||||
<div class="main_pwd" v-if="false">
|
||||
<div class="main_input_right" @click="
|
||||
handleGo('wjmm');
|
||||
playAudio();
|
||||
">
|
||||
忘记密码
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center_bottom">
|
||||
<div :class="select ? 'select' : ''" @click="handleAgree"></div>
|
||||
<div>
|
||||
我 已 满 18 岁，并 阅 读 和 同 意《 用 户 协 议 》、《 隐 私 政 策
|
||||
》和《 反 洗 钱 协 议 》，承 诺 理 性 消 费。
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_bottom" @click="
|
||||
handleLogin();
|
||||
playAudio();
|
||||
">
|
||||
立即登录
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center" v-if="status == 'wjmm'" v-show="false">
|
||||
<div class="main_top">忘记密码</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="forgetform.phoneNumber" placeholder="请输入手机号" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" placeholder="请输入验证码" v-model="forgetform.code" />
|
||||
<div @click="
|
||||
getyzm();
|
||||
playAudio();
|
||||
" class="yzm">
|
||||
获取验证码
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入新的密码" v-model="forgetform.password" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入确认密码" v-model="forgetform.confirmPassword" />
|
||||
</div>
|
||||
<div class="main_bottom" @click="
|
||||
handleForget();
|
||||
playAudio();
|
||||
">
|
||||
确认
|
||||
</div>
|
||||
<div class="main_bottom_no">
|
||||
已有账号?
|
||||
<span @click="
|
||||
handleGo('dl');
|
||||
playAudio();
|
||||
">去登录</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_center" v-if="status == 'zc'" v-show="false">
|
||||
<div class="main_top">注册</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="registerform.phoneNumber" placeholder="请输入手机号" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" v-model="registerform.nickName" placeholder="请输入昵称" />
|
||||
</div>
|
||||
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入新的密码" v-model="registerform.password" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="password" placeholder="请输入确认密码" v-model="registerform.confirmPassword" />
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" placeholder="请输入验证码" v-model="registerform.code" />
|
||||
<div @click="
|
||||
getyzm();
|
||||
playAudio();
|
||||
" class="yzm">
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_input">
|
||||
<input type="text" placeholder="请输入邀请码" v-model="registerform.parentInvitationCode" />
|
||||
</div>
|
||||
<div class="main_center_bottom">
|
||||
<div :class="select ? 'select' : ''" @click="
|
||||
handleAgree();
|
||||
playAudio();
|
||||
"></div>
|
||||
<div>
|
||||
我 已 满 18 岁，并 阅 读 和 同 意《 用 户 协 议 》、《 隐 私 政 策
|
||||
》和《 反 洗 钱 协 议 》，承 诺 理 性 消 费。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main_bottom" @click="
|
||||
handleRegister();
|
||||
playAudio();
|
||||
">
|
||||
注册
|
||||
</div>
|
||||
<div class="main_bottom_no">
|
||||
已有账号?
|
||||
<span @click="
|
||||
handleGo('dl');
|
||||
playAudio();
|
||||
">去登录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getLogin, getRegister, getcode, changePass } from "../../../api/index";
|
||||
import browser from "@/utils/brouser";
|
||||
// getToken
|
||||
import { setToken } from "../../../api/cookie";
|
||||
import { getUserInfo } from "../../../api/index";
|
||||
// import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
timer: null,
|
||||
second: '',
|
||||
registerform: {
|
||||
code: "",
|
||||
nickName: "",
|
||||
parentInvitationCode: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
forgetform: {
|
||||
code: "",
|
||||
nickName: "",
|
||||
parentInvitationCode: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
status: this.$route.params.type || 'dl',
|
||||
select: false,
|
||||
form: {
|
||||
code: "",
|
||||
nickName: "",
|
||||
parentInvitationCode: "",
|
||||
password: "",
|
||||
phoneNumber: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.disabled ? `重新获取 ( ${this.second} ) s` : "获取验证码";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handleForget() {
|
||||
if (this.forgetform.phoneNumber == "") {
|
||||
this.$message({
|
||||
message: "请输入新密码或手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
} else if (this.forgetform.password == "") {
|
||||
this.$message({
|
||||
message: "请输入密码！",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (this.forgetform.password != this.forgetform.confirmPassword) {
|
||||
this.$message({
|
||||
message: "密码输入不一致，请重新输入！",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
let data = {
|
||||
code: this.forgetform.code,
|
||||
confirmPassword: this.forgetform.confirmPassword,
|
||||
password: this.forgetform.password,
|
||||
phoneNumber: this.forgetform.phoneNumber,
|
||||
};
|
||||
changePass(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "密码重置成功",
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.status == "dl";
|
||||
} else {
|
||||
this.$message({
|
||||
message: "验证码错误，请重试",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
getyzm() {
|
||||
let dataform = {};
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
if (this.status == "zc") {
|
||||
if (this.registerform.phoneNumber == "") {
|
||||
this.$message({
|
||||
message: "请输入用户名或手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
dataform.type = 1;
|
||||
dataform.phoneNumber = this.registerform.phoneNumber;
|
||||
} else if (this.status == "wjmm") {
|
||||
if (this.forgetform.phoneNumber == "") {
|
||||
this.$message({
|
||||
message: "请输入用户名或手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
dataform.phoneNumber = this.forgetform.phoneNumber;
|
||||
dataform.type = 4;
|
||||
}
|
||||
getcode(dataform).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
let that = this;
|
||||
let s = 60; //倒计时间
|
||||
if (!that.timer) {
|
||||
that.second = s;
|
||||
that.disabled = true;
|
||||
that.timer = setInterval(() => {
|
||||
if (that.second > 0 && this.second <= s) {
|
||||
that.second--;
|
||||
} else {
|
||||
that.disabled = false;
|
||||
clearInterval(that.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
this.$message({
|
||||
message: `${res.data.msg}`,
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
}
|
||||
if (res.data.code == 500) {
|
||||
this.$message({
|
||||
message: `${res.data.msg}`,
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handle() { },
|
||||
handleGo(res) {
|
||||
this.status = res;
|
||||
},
|
||||
handleRegister() {
|
||||
if (this.select == false) {
|
||||
this.$message({
|
||||
message: "请点击同意用户协议",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
if (
|
||||
this.registerform.phoneNumber == "" &&
|
||||
this.registerform.nickName == ""
|
||||
) {
|
||||
this.$message({
|
||||
message: "请输入用户名或手机号",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
} else if (this.registerform.password == "") {
|
||||
this.$message({
|
||||
message: "请输入密码",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (
|
||||
this.registerform.confirmPassword != this.registerform.password
|
||||
) {
|
||||
this.$message({
|
||||
message: "两次密码不一致",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (this.registerform.code == "") {
|
||||
this.$message({
|
||||
message: "请获取验证码",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else {
|
||||
if (this.registerform.parentInvitationCode == "f2cs2") {
|
||||
this.registerform.parentInvitationCode = "";
|
||||
}
|
||||
getRegister(this.registerform).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
message: "注册成功",
|
||||
type: "success",
|
||||
customClass: "info_success",
|
||||
});
|
||||
this.status = "dl";
|
||||
} else {
|
||||
this.$message({
|
||||
message: `${res.data.msg}`,
|
||||
type: "warning",
|
||||
customClass: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
handleLogin() {
|
||||
if (this.select == false) {
|
||||
this.$message({
|
||||
message: "请先勾选以下协议",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
} else if (this.select == true) {
|
||||
if (this.form.phoneNumber == "" && this.form.password == "") {
|
||||
this.$message({
|
||||
message: "请输入用户名或密码",
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let data = {
|
||||
username: this.form.phoneNumber,
|
||||
password: this.form.password,
|
||||
equipment: '1'
|
||||
};
|
||||
if (!browser().mobile) {
|
||||
// data.equipment='1'
|
||||
} else if (browser.webapp) {
|
||||
data.equipment = '2'
|
||||
} else {
|
||||
data.equipment = '1'
|
||||
}
|
||||
getLogin(data)
|
||||
.then((res) => {
|
||||
let code = res.data.code;
|
||||
if (code == "200") {
|
||||
this.handleClose();
|
||||
this.exist = 2;
|
||||
|
||||
setToken(res.data.token);
|
||||
this.$store.commit("LOGIN_IS_SHOW", false);
|
||||
// this.$router.back()
|
||||
// window.history.back()
|
||||
this.$message({
|
||||
message: "登录成功",
|
||||
type: "success",
|
||||
customClass: "log_success",
|
||||
});
|
||||
// this.close();
|
||||
//获取用户信息
|
||||
getUserInfo().then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$store.commit("USER_INFO", res.data.data);
|
||||
this.$bus.$emit("islogin", false);
|
||||
this.$router.push("/");
|
||||
try {
|
||||
this.$socket.send("login_userId_" + res.data.data.userId);
|
||||
this.$socket.close();
|
||||
} catch (e) {
|
||||
console.log("socket error", e);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
throw new Error(err.message);
|
||||
});
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
this.$bus.$emit("close", false);
|
||||
},
|
||||
handleAgree() {
|
||||
this.select = !this.select;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
height: 100vh;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
img {
|
||||
width: 238px;
|
||||
height: 110px;
|
||||
margin-top: 70px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_top {
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-size: 28px;
|
||||
margin-top: 7px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main_center {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
|
||||
.main_input {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
margin-top: 21px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: hsla(0,0%,100%,.05);
|
||||
padding: 0 15px;
|
||||
border-radius: .08rem;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #bbb;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.yzm {
|
||||
position: absolute;
|
||||
color: #3a97e4;
|
||||
right: 20px;
|
||||
top: 50%;
|
||||
transform: rotateY("50%");
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.main_pwd {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
height: 31.5px;
|
||||
}
|
||||
|
||||
.main_input_right {
|
||||
width: 140px;
|
||||
height: 42px;
|
||||
background: #101115;
|
||||
box-shadow: 0px 0 12px 0px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50px;
|
||||
opacity: 1;
|
||||
color: #ffffff;
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
font-size: 13.3px;
|
||||
float: right;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.main_center_bottom {
|
||||
margin-top: 21px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.select {
|
||||
background: #3a97e4 !important;
|
||||
border: 2px solid #3a97e4 !important;
|
||||
}
|
||||
|
||||
div:first-child {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #727477;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 1px solid #727477;
|
||||
}
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
width: 95%;
|
||||
color: #ffffff;
|
||||
font-size: 16.8px;
|
||||
text-align: left;
|
||||
word-spacing: -2px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_center1 {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
|
||||
.main_czcg {
|
||||
width: 100%;
|
||||
height: 182px;
|
||||
background: #323436;
|
||||
border-radius: 21px 21px 21px 21px;
|
||||
opacity: 1;
|
||||
padding: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.main_czcg_btn {
|
||||
justify-content: space-between;
|
||||
margin-top: 35px;
|
||||
|
||||
div:first-child {
|
||||
width: 45%;
|
||||
height: 50px;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
border: 3px solid #727477;
|
||||
font-size: 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
font-size: 21px;
|
||||
width: 45%;
|
||||
height: 50px;
|
||||
background: #1f3a58;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
border: 3px solid #3fa2c7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_bottom {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-size: 25px;
|
||||
height: 63px;
|
||||
background: url("../../../assets/loginBtn.png") no-repeat center center;
|
||||
background-size: contain;
|
||||
color: #ffffff;
|
||||
line-height: 63px;
|
||||
margin-top: 28px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 60px;
|
||||
font-size: 18px;
|
||||
line-height: 60px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.main_bottom_no {
|
||||
margin-top: 16px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #3a97e4;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="header_top">
|
||||
<handleback></handleback>
|
||||
<div>站内信</div>
|
||||
<div>玩法说明</div>
|
||||
</div>
|
||||
<div class="head center">
|
||||
<div class="center" @click="handleoperation(1)">全部已读</div>
|
||||
<div class="center" @click="handleoperation(2)">全部删除</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div
|
||||
@click="handleopenmessage(item.id)"
|
||||
v-for="(item,index) in messageList"
|
||||
:key="index"
|
||||
class="main_top space_between"
|
||||
>
|
||||
<div>
|
||||
<div v-if="item.status==='1'">
|
||||
<svg
|
||||
t="1707123532951"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3582"
|
||||
>
|
||||
<path
|
||||
d="M931.2 281.6c-9.6-9.6-22.4-9.6-35.2-6.4V224c0-54.4-41.6-96-96-96H224C169.6 128 128 169.6 128 224v54.4c-12.8-6.4-25.6-3.2-35.2 6.4-19.2 16-28.8 41.6-28.8 67.2v448c0 54.4 41.6 96 96 96h704c54.4 0 96-41.6 96-96V352c0-25.6-9.6-51.2-28.8-70.4zM441.6 678.4c38.4 38.4 99.2 38.4 134.4 0l57.6-57.6 217.6 208H172.8l211.2-211.2 57.6 60.8z m240-102.4l214.4-214.4v422.4L681.6 576zM224 192h576c19.2 0 32 12.8 32 32v112l-297.6 297.6c-12.8 12.8-32 12.8-44.8 0L384 531.2l-192-192V224c0-19.2 12.8-32 32-32z m115.2 384L128 787.2V364.8l211.2 211.2z"
|
||||
fill="#727477"
|
||||
p-id="3583"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="item.status==='0'">
|
||||
<svg
|
||||
t="1707123406935"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3230"
|
||||
>
|
||||
<path
|
||||
d="M890.256587 198.330044c-9.406616-4.568039-21.888393-7.721869-38.638555-7.721869L170.276942 190.608176c-16.749139 0-29.229893 3.154853-38.637532 7.721869-38.692793 15.714913-66.18197 54.079686-66.18197 98.996688l0 426.930509c0 44.617174 27.080861 82.818217 65.365338 98.724489 9.326795 4.675486 21.970261 7.995091 39.454164 7.995091l681.34109 0c17.484926 0 30.127369-3.318582 39.454164-7.995091 38.25787-15.906272 65.367385-54.107315 65.367385-98.724489L956.43958 297.325709C956.43958 252.40973 928.948356 214.044958 890.256587 198.330044zM904.015502 297.325709l0 426.930509c0 6.90527-1.38766 13.486152-3.752618 19.549242-3.371932-3.997034-7.206418-8.074909-11.936333-12.290931L670.393311 537.327852l225.03016-243.454778c2.745643-2.963495 4.920258-5.819542 7.095896-8.673543C903.445497 289.088094 904.015502 293.139364 904.015502 297.325709zM851.618031 243.980757c4.81383 0 9.381032 0.870834 13.813153 2.121314-1.277138 2.582825-3.669726 6.360871-8.156085 11.174504L545.751556 594.316797c-18.652566 20.174482-50.95455 20.174482-69.60814 0L164.62192 257.276574c-4.486358-4.813632-6.878946-8.591679-8.157108-11.174504 4.432121-1.251503 9.000347-2.121314 13.813153-2.121314L851.618031 243.980757zM121.633112 743.804437c-2.365981-6.063089-3.752618-12.642948-3.752618-19.549242L117.880494 297.325709c0-4.186346 0.571028-8.238638 1.468505-12.126178 2.201222 2.855024 4.350253 5.710049 7.123526 8.673543l225.029136 243.454778-217.932217 194.186677C128.838506 735.730551 125.005044 739.807403 121.633112 743.804437zM170.276942 777.60117c-2.556324 0-5.029756-0.379647-7.477605-0.760317 1.413244-1.52268 3.099721-3.235694 5.274336-5.194302l219.374115-195.436134 50.547257 54.677297c19.333093 20.909216 45.244267 32.43676 72.952441 32.43676 27.707151 0 53.619348-11.528568 72.952441-32.43676l50.548281-54.677297 219.346484 195.436134c2.201222 1.958608 3.8877 3.671623 5.301967 5.194302-2.473432 0.38067-4.920258 0.760317-7.478628 0.760317L170.276942 777.60117z"
|
||||
fill="#3a97e4"
|
||||
p-id="3231"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main_top_center textover-f">{{ item.message }}</div>
|
||||
<div>{{ item.sendTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="out" v-if="onView">
|
||||
<div class="out_main animate__animated" ref="viewel">
|
||||
<div class="out_main_close" @click="handleClose">
|
||||
<svg
|
||||
t="1707125075609"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3781"
|
||||
>
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477"
|
||||
p-id="3782"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="Object.keys(viewList).length === 0" class="out_main_ref center">
|
||||
<i class="el-icon-refresh-right"></i>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="out_main_title">站内信</div>
|
||||
<div class="out_main_time">{{ viewList.sendTime }}</div>
|
||||
<div class="out_main_content">{{ viewList.message }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="out" v-if="onOperation">
|
||||
<div class="column owa">
|
||||
<div class="owa_i">温馨提示</div>
|
||||
<div>确定进行操作吗</div>
|
||||
<div class="space_between owa_iii">
|
||||
<div class="btn_c center btn_click" @click="onOperation=false">取消</div>
|
||||
<div class="btn_q center btn_click" @click="handlesubmit">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getMessageList,
|
||||
getMessageView,
|
||||
getMessageOperation
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
messageList: [],
|
||||
onView: false,
|
||||
onOperation: false,
|
||||
viewList: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getlist();
|
||||
},
|
||||
methods: {
|
||||
handlesubmit() {
|
||||
let status = localStorage.getItem("status");
|
||||
let arr = this.messageList.map(item => item.id);
|
||||
let obj = {
|
||||
ids: arr,
|
||||
status: status
|
||||
};
|
||||
getMessageOperation(obj).then(res => {
|
||||
this.getlist();
|
||||
if(res.data.code){
|
||||
console.log("成功")
|
||||
}
|
||||
this.onOperation = false;
|
||||
});
|
||||
},
|
||||
handleoperation(res) {
|
||||
localStorage.setItem("status", res);
|
||||
this.onOperation = true;
|
||||
},
|
||||
handleClose() {
|
||||
const element = this.$refs.viewel;
|
||||
element.classList += " animate__fadeOut";
|
||||
setTimeout(() => {
|
||||
this.onView = false;
|
||||
this.viewList = {};
|
||||
}, 500);
|
||||
},
|
||||
handleopenmessage(res) {
|
||||
this.onView = true;
|
||||
|
||||
getMessageView(res).then(res => {
|
||||
|
||||
setTimeout(() => {
|
||||
this.viewList = res.data.data;
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
getlist() {
|
||||
getMessageList().then(res => {
|
||||
this.messageList = res.data.rows;
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
.main_top {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
height: 49px;
|
||||
background: #101115;
|
||||
border-radius: 7px 7px 7px 7px;
|
||||
font-size: 17px;
|
||||
padding: 0 17px 0 23px;
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.main_top_center {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
div:first-child {
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.out {
|
||||
width: 525px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
.out_main {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
height: 420px;
|
||||
background: #101115;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
margin-top: 211px;
|
||||
padding: 27px;
|
||||
overflow: hidden;
|
||||
justify-content: space-around;
|
||||
.out_main_close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: grab;
|
||||
.icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.out_main_ref {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 25px;
|
||||
animation: xz1 2s infinite linear;
|
||||
}
|
||||
@keyframes xz1 {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
.out_main_title {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.out_main_time {
|
||||
width: 100%;
|
||||
margin: 14px 0 0 0;
|
||||
font-size: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
.out_main_content {
|
||||
margin: 14px 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.owa {
|
||||
width: 95%;
|
||||
height: 245px;
|
||||
margin: 0 auto;
|
||||
margin-top: 210px;
|
||||
background: #101115;
|
||||
border-radius: 21px;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
justify-content: space-between;
|
||||
padding: 35px;
|
||||
position: relative;
|
||||
.owa_i {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.owa_iii {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
font-size: 21px;
|
||||
position: relative;
|
||||
.btn_c {
|
||||
width: 47%;
|
||||
height: 42px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.5) 0%,
|
||||
rgba(114, 116, 119, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
}
|
||||
.btn_q {
|
||||
width: 47%;
|
||||
height: 42px;
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.owa::before {
|
||||
content: ""; /*必须设置content属性*/
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-204deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 40%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.head {
|
||||
justify-content: end;
|
||||
div {
|
||||
margin-left: 10px;
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
border: 2px solid #727477;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #727477;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<swiper></swiper>
|
||||
<banner></banner>
|
||||
<div class="body_title">
|
||||
<div>Games</div>
|
||||
<!-- <button @click="playAudio">音频测试</button> -->
|
||||
<div class="body_btn" >
|
||||
<div class="btn openBox" @click="$router.push('/open');playAudio()">
|
||||
<div class="btns">
|
||||
<div class="btns_icon">
|
||||
<svg
|
||||
t="1705642348773"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3012"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<path
|
||||
d="M544 18.496l375.04 216.512-76.352 44.16a56.832 56.832 0 0 0-24 71.168l3.2 6.4a56.832 56.832 0 0 0 71.168 24l6.4-3.2 55.936-32.32v385.856a64 64 0 0 1-32 55.424L576 987.008V896a64 64 0 0 0-56.512-63.552L512 832a64 64 0 0 0-63.552 56.512L448 896v91.008L100.608 786.496a64 64 0 0 1-32-55.424V328.128l85.44 49.408a56.832 56.832 0 0 0 73.6-14.848l3.968-5.952a56.832 56.832 0 0 0-14.848-73.6l-5.952-3.968L119.68 226.496 480 18.496a64 64 0 0 1 64 0zM511.744 678.4a40.768 40.768 0 0 0-30.272 12.48 43.328 43.328 0 0 0-12.16 32c0 13.056 3.84 23.744 12.16 32.064 8.256 8.32 18.112 13.056 30.272 13.056 12.096 0 22.016-4.16 30.272-12.48a45.12 45.12 0 0 0 12.672-32.64 45.632 45.632 0 0 0-12.16-32 41.984 41.984 0 0 0-30.784-12.48z m6.4-358.4c-41.344 0-73.792 12.48-97.792 37.44-24.64 24.96-36.352 59.392-36.352 103.296h63.744c0-24.96 4.48-44.544 13.952-58.176 10.624-16.64 27.968-24.32 52.48-24.32 19.072 0 34.176 5.312 44.8 16.64 10.048 11.264 15.616 26.688 15.616 46.272 0 14.848-4.992 29.12-15.104 42.24l-6.656 8.256c-36.352 34.432-58.176 59.392-65.408 75.456-7.872 16-11.2 35.584-11.2 58.24V633.6h64.256v-8.32c0-14.272 2.816-26.752 8.384-38.592 5.056-10.688 12.352-20.8 22.4-29.696 26.816-24.96 43.008-40.96 48-46.912 13.44-19.008 20.736-43.392 20.736-73.088 0-36.224-11.2-64.704-33.536-85.504C584.064 330.112 554.496 320 518.144 320z"
|
||||
fill="#25F484"
|
||||
p-id="3013"
|
||||
/>
|
||||
</svg>
|
||||
<!-- <img src="Group 5.png" alt=""> -->
|
||||
</div>
|
||||
<div>玩转盲盒</div>
|
||||
</div>
|
||||
<div class="hudong anima"></div>
|
||||
</div>
|
||||
|
||||
<div class="btn jsjj" @click="$router.push('/pk');playAudio()">
|
||||
<div class="btns">
|
||||
<div class="btns_icon">
|
||||
<svg
|
||||
t="1705642835111"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3146"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<path
|
||||
d="M128 1024H0v-128c16.1792-9.728 34.304-17.2544 48.128-29.6448 37.2736-33.28 72.7552-68.608 108.288-102.4-22.272-28.2624-41.4208-50.1248-57.7536-73.8816-14.3872-20.992-9.2672-43.7248 9.216-56.32 20.48-14.0288 41.6768-9.728 57.7024 11.776 4.4032 5.9392 8.7552 11.9296 14.1824 19.3536 7.424-8.3968 13.6704-15.36 19.5584-22.1696q247.1936-296.96 493.9776-593.92c15.36-18.432 32.1536-29.44 55.808-30.72 34.9184-2.7136 69.7856-4.9152 104.5504-7.8336 32.9216-2.9184 65.792-6.8096 98.6624-10.24h71.68v71.68c-1.7408 10.8032-4.1984 21.504-5.12 32.3584-4.8128 59.4432-7.936 119.0912-14.7968 178.2784a72.1408 72.1408 0 0 1-23.3472 42.6496c-144.128 121.4464-289.3312 241.664-434.2272 362.24-62.0544 51.6608-124.0576 103.424-187.4944 156.3648 5.632 4.7104 9.216 8.1408 13.1584 11.008 28.672 20.7872 34.2528 41.9328 16.6912 63.8464-15.9744 19.968-42.3424 19.5072-67.584-1.1776-18.944-15.36-37.7856-31.232-60.6208-50.1248-33.3312 35.0208-65.792 68.864-97.792 103.168-5.12 5.12-7.3216 12.8512-11.4176 19.0464-7.5776 11.6736-15.5648 23.1424-23.4496 34.6624zM732.16 158.72l-3.9424-3.2768L332.8 506.88l2.2016 5.4784h176.2816l-217.7536 348.9792 442.4704-442.2656h-176.9472zM61.44 0c54.0672 5.12 108.1344 13.6704 162.2528 14.1824 57.088 0.512 100.096 16.9472 133.5296 66.56 31.2832 46.336 70.912 87.04 107.8272 131.3792L237.4144 485.376c-12.0832-9.728-23.296-18.5856-34.2528-27.7504C150.6816 414.0544 97.28 371.456 46.5408 326.0928A85.0432 85.0432 0 0 1 20.48 277.0432C12.9536 213.6576 9.7792 149.7088 4.6592 86.016A222.1056 222.1056 0 0 0 0 61.44V0zM896 1024c-27.8528-55.2448-74.0864-94.72-117.4528-136.6528-6.0416-5.8368-12.288-11.52-18.7904-17.6128-24.1664 18.9952-46.08 39.7824-71.68 54.528-11.3152 6.5536-33.6896 6.5536-43.6736-0.7168s-13.3632-26.9824-15.0016-41.728c-0.768-6.7072 8.9088-15.36 15.36-21.76a170.24 170.24 0 0 1 21.9136-16.0768L568.32 761.8048l208.7936-174.08 66.816 78.3872c6.1952-8.2944 11.0592-15.0016 16.128-21.5552 15.36-19.712 37.0688-23.6544 55.8592-10.24a39.8336 39.8336 0 0 1 8.9088 56.8832c-17.2544 23.0912-36.352 44.8-59.9552 73.6256 36.864 34.4576 72.7552 69.5808 110.4896 102.4 13.9264 12.1344 32.3072 19.2 48.64 28.6208v128z"
|
||||
fill="#3A97E4"
|
||||
p-id="3147"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>急速竞技</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn roll" @click="$router.push('/roll');playAudio()">
|
||||
<div class="btns">
|
||||
<div class="btns_icon">
|
||||
<svg
|
||||
t="1705642864204"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3280"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<path
|
||||
d="M512 1024a512 512 0 1 1 512-512 512.8192 512.8192 0 0 1-512 512z m0-921.6a409.6 409.6 0 1 0 409.6 409.6 410.112 410.112 0 0 0-409.6-409.6z m0 102.4a49.7664 49.7664 0 0 1 51.2 51.2v102.4a51.2 51.2 0 0 1-102.4 0V256a49.7664 49.7664 0 0 1 51.2-51.2z m51.2 460.8a51.2 51.2 0 0 0-102.4 0v102.4a51.2 51.2 0 0 0 102.4 0z m-358.4-153.6a49.7664 49.7664 0 0 1 51.2-51.2h102.4a51.2 51.2 0 0 1 0 102.4H256a49.7664 49.7664 0 0 1-51.2-51.2z m460.8-51.2a51.2 51.2 0 0 0 0 102.4h102.4a51.2 51.2 0 0 0 0-102.4z"
|
||||
fill="#DBAB55"
|
||||
p-id="3281"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>ROLL房</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn zmqx" @click="$router.push('/dream');playAudio()">
|
||||
<div class="btns">
|
||||
<div class="btns_icon">
|
||||
<svg
|
||||
t="1705642886759"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3414"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<path
|
||||
d="M0 549.523l390 345.002V984l-72.262-79.788-223.655-94.955L0 549.523z m1024 0l-94.083 259.734-223.655 94.955L634 984v-89.475l390-345.002zM518.5 217l81.85 165.844 183.02 26.595L650.934 538.53l31.263 182.28L518.5 634.75l-163.698 86.061 31.263-182.28-132.434-129.092 183.02-26.595L518.5 217zM59.1 292.055L195.7 540.46l15.55 105.615-195-199.241L59.1 292.055z m905.8 0l42.85 154.778-195 199.24L828.3 540.46l136.6-248.404zM299.928 39l-13.489 93.154-110.342 122.76v145.371l-67.275-160.63L299.928 39z m424.144 0l191.106 200.656-67.275 160.63V254.913L737.56 132.154 724.072 39z"
|
||||
fill="#6F4FFF"
|
||||
p-id="3415"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>逐梦前行</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body_bottom">
|
||||
<div class="body_bottom_top">
|
||||
<div
|
||||
class="title"
|
||||
v-for="(item,index) in articleList"
|
||||
:key="index"
|
||||
@click="handleTo(item);playAudio()"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
<!-- <div class="body_bottom_bottom">
|
||||
<p>
|
||||
<img src="@/assets/image/gongan.png" alt width="13px" height="13px" /> 鲁公网安备37160202000848
|
||||
</p>
|
||||
<p>鲁ICP备2023012216号-2</p>
|
||||
<p style="margin-top: 21px; font-size:11px;">Monkey CSGO 版权所有</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import swiper from "@/components/swiperUser.vue";
|
||||
import banner from "@/components/bannerUser.vue";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
articleList: ['隐私协议&用户协议','关于我们','帮助中心'],
|
||||
show: true
|
||||
};
|
||||
},
|
||||
components: { swiper, banner },
|
||||
mounted() {
|
||||
// this.getArticle();
|
||||
},
|
||||
methods: {
|
||||
playAudio(){
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handleTo(item) {
|
||||
this.playAudio()
|
||||
console.log('标题',item);
|
||||
if(item=='隐私协议&用户协议'){
|
||||
localStorage.setItem("help-type", 'yhxy');
|
||||
}else if(item=='关于我们'){
|
||||
localStorage.setItem("help-type", 'gywm');
|
||||
}
|
||||
else if(item=='帮助中心'){
|
||||
localStorage.setItem("help-type", 'bzzx');
|
||||
}
|
||||
this.$router.push({
|
||||
path: "/help"
|
||||
});
|
||||
},
|
||||
// getArticle() {
|
||||
// getArticle("sydb").then(res => {
|
||||
// this.articleList = res.data.data.contentList;
|
||||
// });
|
||||
// }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.anima {
|
||||
animation-name: likes; // 动画名称
|
||||
animation-direction: alternate; // 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
|
||||
animation-timing-function: linear; // 动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；
|
||||
animation-delay: 0s; // 动画延迟时间
|
||||
animation-iteration-count: infinite; // 动画播放次数，infinite：一直播放
|
||||
animation-duration: 1s; // 动画完成时间
|
||||
}
|
||||
|
||||
@keyframes likes {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
75% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.hudong {
|
||||
width: 172px !important;
|
||||
height: 123px !important;
|
||||
}
|
||||
|
||||
.body_bottom {
|
||||
margin-top: 55px !important;
|
||||
}
|
||||
.btn {
|
||||
height: 100px !important ;
|
||||
// background: red !important;
|
||||
|
||||
.btns {
|
||||
width: 100px !important;
|
||||
height: 25px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 10px !important;
|
||||
left: 10px !important;
|
||||
bottom: 10px !important;
|
||||
|
||||
.btns_icon {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.openBox {
|
||||
width: 100% !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
.hudong {
|
||||
width: 241px;
|
||||
height: 172px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
// background-image: url("../assets/hudong.png");
|
||||
background-size: 100% 100%;
|
||||
// transform: rotateX(50deg);
|
||||
}
|
||||
.jsjj {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("../../public/Group 16.png");
|
||||
background-size: 100% 100%;
|
||||
// transform: rotateX(50deg);
|
||||
}
|
||||
.roll {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("../../public/Group 5.png");
|
||||
background-size: 100% 100%;
|
||||
// transform: rotateX(50deg);
|
||||
}
|
||||
.zmqx {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("../../public/Group 1.png");
|
||||
background-size: 100% 100%;
|
||||
// transform: rotateX(50deg);
|
||||
}
|
||||
|
||||
.body_title {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.body_title .body_btn .openBox {
|
||||
position: relative;
|
||||
height: 125px;
|
||||
background-image: url("../../public/Group 6.png");
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.body_btn {
|
||||
.btn {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
margin-top: 12px;
|
||||
position: relative;
|
||||
// border: 1px solid red;
|
||||
border-radius: 10px;
|
||||
// box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 4px 4px 11px 1px rgba(0, 0, 0, 0.7);
|
||||
// opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
&:not(:hover) {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
// /* 第一个阴影 */ 4px 4px 6px rgba(0, 0, 0, 0.7);
|
||||
// box-shadow: 20px 20px 60px #141618, -20px -20px 60px #1c1e20;
|
||||
.btns {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
bottom: 14px;
|
||||
width: 140px;
|
||||
height: 35px;
|
||||
background: rgba(16, 17, 21, 0.5);
|
||||
box-shadow: 0px 0 11px 0px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
font-size: 17px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.btns_icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.body_bottom {
|
||||
margin-top: 77px;
|
||||
border-top: 1px solid #323436;
|
||||
.body_bottom_top {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 4;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
}
|
||||
.title::after {
|
||||
border-right: 1px solid #323436;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
right: -18px;
|
||||
color: #323436;
|
||||
line-height: 1;
|
||||
@media (max-width: 550px) {
|
||||
right: -13px;
|
||||
height: 15px;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
}
|
||||
.title:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.shu {
|
||||
color: #323436;
|
||||
}
|
||||
}
|
||||
.body_bottom_bottom {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="creat_bg">
|
||||
<div class="animate__animated animate__fadeInDown" ref="slider">
|
||||
<div
|
||||
class="creat_close"
|
||||
@click="
|
||||
handleclose();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<svg
|
||||
t="1708678106448"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2989"
|
||||
>
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477"
|
||||
p-id="2990"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">下载APP</div>
|
||||
|
||||
<div class="kami">
|
||||
<div class="box">
|
||||
<img src="and.png" alt="" />
|
||||
<div
|
||||
class="cerate_btn center"
|
||||
@click="
|
||||
playAudio();
|
||||
downloadAnd();
|
||||
"
|
||||
>
|
||||
安卓
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<img src="apple.png" alt="" />
|
||||
<div
|
||||
class="cerate_btn center"
|
||||
@click="
|
||||
playAudio();
|
||||
downloadIos();
|
||||
"
|
||||
>
|
||||
ios
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {} from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
computed: {},
|
||||
methods: {
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
downloadAnd() {
|
||||
|
||||
// const blob = new Blob(['http://www.f2cs2.com/download/f2cs2.apk'],{ type: 'application/zip' })
|
||||
// const fileName = 'f2cs2'
|
||||
// const link = document.createElement('a')
|
||||
// link.download = fileName
|
||||
// link.style.display = 'none'
|
||||
// link.href = URL.createObjectURL(blob)
|
||||
// document.body.appendChild(link)
|
||||
// link.click()
|
||||
// URL.revokeObjectURL(link.href)
|
||||
// document.body.removeChild(link)
|
||||
window.open("http://www.f2cs2.com/download/f2cs2.apk");
|
||||
|
||||
},
|
||||
downloadIos() {
|
||||
window.open("http://www.f2cs2.com/download/f2cs2APPLE.mobileconfig");
|
||||
},
|
||||
handleclose() {
|
||||
const element = this.$refs.slider;
|
||||
element.classList += " animate__fadeOutDown";
|
||||
setTimeout(() => {
|
||||
this.$router.back();
|
||||
}, 350);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin-top: 100px;
|
||||
}
|
||||
.kami {
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
background: #101115;
|
||||
border-radius: 20px;
|
||||
// margin-top: 100px;
|
||||
overflow: hidden;
|
||||
// @media (max-width: 550px) {
|
||||
// height: 40px;
|
||||
// }
|
||||
}
|
||||
.kami_input {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
// @media (max-width: 550px) {
|
||||
// height: 40px;
|
||||
// font-size: 15px;
|
||||
// }
|
||||
}
|
||||
.kami_input::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
.creat_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
// margin-left: -262.5px;
|
||||
width: 525px;
|
||||
transform: translateX(-50%);
|
||||
height: 100vh;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
padding: 2% 20px;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
.creat_close {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@media (max-width: 550px) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fjrs {
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.cerate_btn {
|
||||
width: 93.5%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(37, 244, 132, 0.2) 0%,
|
||||
rgba(37, 244, 132, 0.1) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #25f484;
|
||||
font-size: 25px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.result {
|
||||
margin: 0 auto;
|
||||
width: 476px;
|
||||
padding: 32px 0;
|
||||
background: #101115;
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
margin-left: -238px;
|
||||
z-index: 31;
|
||||
@media (max-width: 550px) {
|
||||
width: 340px;
|
||||
margin-left: -170px;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.lvbu {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@media (max-width: 550px) {
|
||||
height: 110px;
|
||||
}
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
height: 130px;
|
||||
background: linear-gradient(
|
||||
-218deg,
|
||||
rgba(37, 244, 132, 0.2) 0%,
|
||||
rgba(32, 29, 48, 0) 38%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
}
|
||||
.result_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #ffff;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.result_center {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.result_money {
|
||||
width: 90%;
|
||||
height: 56px;
|
||||
// background: #323436;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
// color: #25f484;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.result_btn {
|
||||
width: 100%;
|
||||
margin: 14px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 21px;
|
||||
|
||||
.result_btn_B {
|
||||
width: 196px;
|
||||
height: 56px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(37, 244, 132, 0.5) 0%,
|
||||
rgba(37, 244, 132, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 2px solid #25f484;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 550px) {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<!-- 创建房间 -->
|
||||
<div class="creat_bg">
|
||||
<div class="animate__animated animate__fadeInDown" ref="slider">
|
||||
<div
|
||||
class="creat_close"
|
||||
@click="
|
||||
handleclose();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<svg
|
||||
t="1708678106448"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2989"
|
||||
>
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477"
|
||||
p-id="2990"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="title">兑换红包</div>
|
||||
|
||||
<div class="kami">
|
||||
<input
|
||||
type="text"
|
||||
class="kami_input"
|
||||
v-model="kami"
|
||||
placeholder="请输入CDK"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="cerate_btn center"
|
||||
@click="
|
||||
getRedPacket();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
兑换红包
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="result animate__animated animate__fadeInDown"
|
||||
ref="result"
|
||||
v-if="true"
|
||||
> -->
|
||||
<div
|
||||
class="result animate__animated animate__fadeInDown"
|
||||
ref="result"
|
||||
v-if="isResult"
|
||||
>
|
||||
<div class="lvbu"></div>
|
||||
<div class="result_title">领取成功</div>
|
||||
|
||||
<div class="result_money">
|
||||
恭喜获得
|
||||
<money class="money"></money>
|
||||
<div style="color: #25f484">111</div>
|
||||
</div>
|
||||
<div class="result_btn">
|
||||
<div
|
||||
class="result_btn_B btn_click"
|
||||
@click="
|
||||
handleOk();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { receiveRedPacket, getUserInfo } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
kami: "",
|
||||
isResult: false,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener("popstate", () => {
|
||||
this.isResult=false
|
||||
});
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
playAudio(){
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
getRedPacket() {
|
||||
receiveRedPacket(this.kami).then((res) => {
|
||||
console.log("领取红包", res);
|
||||
if (res.data.code == 200) {
|
||||
this.kami = "";
|
||||
this.isResult = true;
|
||||
const state = { title: "title", url: "#" };
|
||||
// console.log('window.histroy',window);
|
||||
window.history.pushState(state, state.title, state.url);
|
||||
getUserInfo().then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$store.commit("USER_INFO", res.data.data);
|
||||
}
|
||||
});
|
||||
// this.handleclose();
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "领取成功",
|
||||
customClass: "log_success",
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: "warning",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleOk() {
|
||||
console.log(1);
|
||||
const element = this.$refs.result;
|
||||
element.classList += " animate__fadeOutDown";
|
||||
setTimeout(() => {
|
||||
this.$router.back();
|
||||
this.isResult = false;
|
||||
}, 350);
|
||||
},
|
||||
handleclose() {
|
||||
const element = this.$refs.slider;
|
||||
element.classList += " animate__fadeOutDown";
|
||||
setTimeout(() => {
|
||||
this.$router.back();
|
||||
}, 350);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
margin-top: 200px;
|
||||
}
|
||||
.kami {
|
||||
margin-top: 14px;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: #101115;
|
||||
border: 2px solid #3fa2c7;
|
||||
border-radius: 20px;
|
||||
// margin-top: 100px;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.kami_input {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.26);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
outline: none;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.kami_input::-webkit-input-placeholder {
|
||||
color: #fff;
|
||||
}
|
||||
.creat_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
// margin-left: -262.5px;
|
||||
width: 525px;
|
||||
transform: translateX(-50%);
|
||||
height: 100vh;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
padding: 2% 20px;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
.creat_close {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@media (max-width: 550px) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fjrs {
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.cerate_btn {
|
||||
width: 93.5%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
#1f3a58 0%,
|
||||
rgba(37, 244, 132, 0.1) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
font-size: 25px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.result {
|
||||
margin: 0 auto;
|
||||
width: 476px;
|
||||
padding: 32px 0;
|
||||
background: #101115;
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
opacity: 1;
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
margin-left: -238px;
|
||||
z-index: 31;
|
||||
@media (max-width: 550px) {
|
||||
width: 340px;
|
||||
margin-left: -170px;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.lvbu {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@media (max-width: 550px) {
|
||||
height: 110px;
|
||||
}
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
height: 130px;
|
||||
background: linear-gradient(
|
||||
-218deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 38%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
}
|
||||
.result_title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
color: #ffff;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.result_center {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.result_money {
|
||||
width: 90%;
|
||||
height: 56px;
|
||||
// background: #323436;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
// color: #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.result_btn {
|
||||
width: 100%;
|
||||
margin: 14px 0 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 21px;
|
||||
|
||||
.result_btn_B {
|
||||
width: 196px;
|
||||
height: 56px;
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 2px solid #3fa2c7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 550px) {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,347 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- 轮播图区域 -->
|
||||
<div class="banner-section">
|
||||
<!-- 左侧轮播图 -->
|
||||
<div class="banner-left">
|
||||
<img
|
||||
src="@/assets/index/图层 82@2x.webp"
|
||||
alt="banner"
|
||||
class="banner-img"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 右侧功能按钮 -->
|
||||
<div class="banner-right">
|
||||
<div class="banner-btn" @click="handleWelfare">
|
||||
<img src="@/assets/index/fuli.webp" alt="福利" class="btn-icon" />
|
||||
<span class="btn-text">福利</span>
|
||||
</div>
|
||||
<div class="banner-btn" @click="handleRanking">
|
||||
<img src="@/assets/index/paihang.webp" alt="排行" class="btn-icon" />
|
||||
<span class="btn-text">排行</span>
|
||||
</div>
|
||||
<div class="banner-btn" @click="customerService">
|
||||
<img src="@/assets/index/kefu.webp" alt="客服" class="btn-icon" />
|
||||
<span class="btn-text">客服</span>
|
||||
</div>
|
||||
<div class="banner-btn" @click="handleMessage">
|
||||
<img src="@/assets/index/xinxi.webp" alt="消息" class="btn-icon" />
|
||||
<span class="btn-text">消息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 游戏模式区域 -->
|
||||
<div class="game-section">
|
||||
<!-- 经典盲盒 -->
|
||||
<router-link to="/open" tag="div" class="game-item game-jingdian">
|
||||
<img src="@/assets/index/jingdian.webp" alt="经典盲盒" />
|
||||
</router-link>
|
||||
|
||||
<!-- 盲盒对战 -->
|
||||
<router-link to="/pk" tag="div" class="game-item game-duizhan">
|
||||
<img src="@/assets/index/duizhan.webp" alt="盲盒对战" />
|
||||
</router-link>
|
||||
|
||||
<!-- 幸运饰品 -->
|
||||
<router-link to="/dream" tag="div" class="game-item game-xingyun">
|
||||
<img src="@/assets/index/xingyun.webp" alt="幸运饰品" />
|
||||
</router-link>
|
||||
|
||||
<!-- ROLL房 -->
|
||||
<router-link to="/roll" tag="div" class="game-item game-roll">
|
||||
<img src="@/assets/index/roll.webp" alt="ROLL房" />
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<!-- 客服按钮 -->
|
||||
<!-- <div class="kf-item" @click="customerService">在线客服</div> -->
|
||||
<!-- <div class="body_bottom">
|
||||
<div class="body_bottom_top">
|
||||
<div
|
||||
class="title"
|
||||
v-for="(item, index) in articleList"
|
||||
:key="index"
|
||||
@click="handleTo(item.id)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="body_bottom_bottom">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import swiper from "@/components/swiperUser.vue";
|
||||
import banner from "@/components/bannerUser.vue";
|
||||
import customer from "../../public/config.json";
|
||||
import { getArticle } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
articleList: [],
|
||||
show: true,
|
||||
};
|
||||
},
|
||||
components: { swiper, banner },
|
||||
mounted() {
|
||||
this.getArticle();
|
||||
},
|
||||
methods: {
|
||||
handleTo(e) {
|
||||
if (e == 2 || e == 5) {
|
||||
localStorage.setItem("help-type", "yhxy");
|
||||
} else if (e == 9) {
|
||||
localStorage.setItem("help-type", "bzzx");
|
||||
} else {
|
||||
localStorage.setItem("help-type", "gywm");
|
||||
}
|
||||
this.$router.push({
|
||||
path: "/help",
|
||||
});
|
||||
},
|
||||
getArticle() {
|
||||
getArticle("sydb").then((res) => {
|
||||
this.articleList = res.data.data.contentList;
|
||||
});
|
||||
},
|
||||
customerService() {
|
||||
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
|
||||
const customerServiceAddress = customer.customerServiceAddress;
|
||||
const url = customerServiceAddress.url;
|
||||
const noCanClose = customerServiceAddress.noCanClose;
|
||||
const kefu_id = customerServiceAddress.kefu_id;
|
||||
const token = customerServiceAddress.token;
|
||||
if (userInfo) {
|
||||
window.location.href = `${url}?noCanClose=${noCanClose}&token=${token}&kefu_id=${kefu_id}&phone=${userInfo.mobile}&nickName=${userInfo.name}`;
|
||||
} else {
|
||||
window.location.href = `${url}?noCanClose=${noCanClose}&token=${token}&kefu_id=${kefu_id}`;
|
||||
}
|
||||
},
|
||||
handleWelfare() {
|
||||
// 跳转到福利页面
|
||||
this.$router.push('/welfare');
|
||||
},
|
||||
handleRanking() {
|
||||
// 跳转到排行榜页面
|
||||
this.$router.push('/welfare');
|
||||
console.log('排行榜');
|
||||
},
|
||||
handleMessage() {
|
||||
this.$router.push('/notifications');
|
||||
// 跳转到消息页面
|
||||
console.log('消息');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
padding-bottom: 80px;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// 轮播图区域
|
||||
.banner-section {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
height: 5.625rem;
|
||||
margin-top: 1.25rem;
|
||||
|
||||
// 左侧轮播图
|
||||
.banner-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.375rem;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧功能按钮
|
||||
.banner-right {
|
||||
flex: 1;
|
||||
// width: 160px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3125rem;
|
||||
align-content: flex-start;
|
||||
|
||||
|
||||
.banner-btn {
|
||||
width: calc(50% - 0.15625rem);
|
||||
// height: 40px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.25rem;
|
||||
background: url('../assets/index/icon-bg.webp') no-repeat right center;
|
||||
background-size: 70% 80%;
|
||||
// background: rgba(255, 255, 255, 0.1);
|
||||
// backdrop-filter: blur(10px);
|
||||
// border-radius: 6px;
|
||||
// border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
|
||||
.btn-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
flex-shrink: 0;
|
||||
// margin-left: -2rem;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 0.75rem;
|
||||
color: #37414F;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 游戏模式区域
|
||||
.game-section {
|
||||
width: 100%;
|
||||
padding: 0 0.75rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 25rem;
|
||||
|
||||
.game-item {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
width: 60%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
// 经典盲盒 - 最上面,横向占满
|
||||
.game-jingdian {
|
||||
top: 4rem;
|
||||
right:4rem;
|
||||
// right: 0;
|
||||
}
|
||||
|
||||
// 盲盒对战 - 在经典盲盒下面,偏右
|
||||
.game-duizhan {
|
||||
top: 9rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
// 幸运饰品 - 在盲盒对战下面,偏左
|
||||
.game-xingyun {
|
||||
top: 15rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
// ROLL房 - 在幸运饰品下面,偏左
|
||||
.game-roll {
|
||||
top: 21rem;
|
||||
right: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 客服按钮
|
||||
.kf-item {
|
||||
position: fixed;
|
||||
bottom: 7.5rem;
|
||||
right: 1.25rem;
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
line-height: 3.75rem;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("../assets/kf_bg.png");
|
||||
font-size: 0.75rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 998;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.body_bottom {
|
||||
margin-top: 77px;
|
||||
border-top: 1px solid #323436;
|
||||
.body_bottom_top {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 4;
|
||||
flex-wrap: wrap;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
}
|
||||
.title::after {
|
||||
border-right: 1px solid #323436;
|
||||
content: "";
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
right: -18px;
|
||||
color: #323436;
|
||||
line-height: 1;
|
||||
@media (max-width: 550px) {
|
||||
right: -13px;
|
||||
height: 15px;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
}
|
||||
.title:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.shu {
|
||||
color: #323436;
|
||||
}
|
||||
}
|
||||
.body_bottom_bottom {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="home" @click.stop="istypeshow = false">
|
||||
<swiper></swiper>
|
||||
<div class="header_top">
|
||||
<handleback>返回</handleback>
|
||||
<div>玩转盲盒</div>
|
||||
<div class="speac"></div>
|
||||
</div>
|
||||
<div class="box_fenlei">
|
||||
<div class="box_type_low">
|
||||
<!-- <div @click.stop="
|
||||
handleChangeType('', '盲盒类别');
|
||||
playAudio();
|
||||
" class="type_btn center" :class="boxPage.boxTypeId == '' ? 'active' : ''">
|
||||
全部
|
||||
</div> -->
|
||||
<div class="type_btn center" :class="item.boxTypeId == currentId ? 'active' : ''"
|
||||
v-for="(item, index) in headernava" :key="index" @click.stop="
|
||||
handleChangeType(item.boxTypeId, item.boxTypeName, index);
|
||||
playAudio();
|
||||
">
|
||||
{{ item.boxTypeName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" @scroll="handleScroll">
|
||||
<div class="box_type">
|
||||
<div class="boxs grade2">
|
||||
<div v-for="(v, index) in www" :key="index" class="boxs_list btn_click" @click.stop="
|
||||
handleGo(v.boxId);
|
||||
playAudio();
|
||||
">
|
||||
<div class="hot" v-if="false">
|
||||
<div class="hots">最新</div>
|
||||
</div>
|
||||
<div class="box_list_img center">
|
||||
<img :src="v.boxImg01 | fullPath" alt width="100%" class="bg1" />
|
||||
<img v-if="v.boxImg02 " :src="v.boxImg02| fullPath" alt width="100%" class="bg2" />
|
||||
</div>
|
||||
<div class="box_list_name">{{ v.boxName }}</div>
|
||||
<div class="box_list_const">
|
||||
<money class="money"></money>
|
||||
{{ v.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiper from "@/components/swiperUser.vue";
|
||||
import { getArticle, getBoxList, getBoxTypeList } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
istypeshow: false,
|
||||
boxTypeList: [],
|
||||
typePage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
boxList: [],
|
||||
tableList: [],
|
||||
boxPage: {
|
||||
boxTypeId: "",
|
||||
boxTypeName: "盲盒类别",
|
||||
gameMouldId: 1,
|
||||
page: 1,
|
||||
size: 10,
|
||||
orderByFie: 2,
|
||||
},
|
||||
getAll: false,
|
||||
isOver: "加载中",
|
||||
scroll: "",
|
||||
headernava: [],
|
||||
www: [],
|
||||
currentId:0
|
||||
};
|
||||
},
|
||||
components: { swiper },
|
||||
mounted() {
|
||||
//this.getTypeList();
|
||||
this.getList();
|
||||
},
|
||||
activated() {
|
||||
let box = document.getElementsByClassName('box')
|
||||
console.log(box);
|
||||
if (this.scroll > 0) {
|
||||
box[0].scrollTo(0, this.scroll);
|
||||
this.scroll = 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChangeType(res, name, index) {
|
||||
this.currentId = res
|
||||
console.log(res, name)
|
||||
this.www = this.boxList[index].boxList;
|
||||
|
||||
},
|
||||
handleScroll(e) {
|
||||
this.event = e;
|
||||
this.scroll = e.srcElement.scrollTop;
|
||||
if (
|
||||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||||
e.srcElement.scrollHeight
|
||||
) {
|
||||
if (this.isOver == "加载中") {
|
||||
this.boxPage.page++;
|
||||
setTimeout(() => {
|
||||
this.getList();
|
||||
}, 5);
|
||||
}
|
||||
}
|
||||
},
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handleilltate() {
|
||||
this.$bus.$emit("is_illustrate", true);
|
||||
setTimeout(() => {
|
||||
getArticle("wzmh").then((res) => {
|
||||
let dream = res.data.data.contentList[0].content;
|
||||
this.$bus.$emit("nr_illustrate", dream);
|
||||
});
|
||||
}, 500);
|
||||
},
|
||||
handleGo(res) {
|
||||
this.$router.push({
|
||||
path: "/openbox",
|
||||
query: {
|
||||
id: res,
|
||||
},
|
||||
});
|
||||
},
|
||||
getTypeList() {
|
||||
if (this.boxTypeList.length == 0) {
|
||||
getBoxTypeList(this.typePage).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
|
||||
console.log(res.data, 'woyao de shuju')
|
||||
this.boxTypeList.push(...res.data.data.records);
|
||||
if (res.data.data.records.length == this.typePage.size) {
|
||||
this.typePage.page++;
|
||||
this.getTypeList();
|
||||
} else {
|
||||
this.getAll = true;
|
||||
}
|
||||
}
|
||||
console.log("玩法列表", this.boxTypeList);
|
||||
});
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
let data={
|
||||
boxType:1
|
||||
}
|
||||
getBoxList(data).then((res) => {
|
||||
|
||||
if (res.data.code == 200) {
|
||||
|
||||
this.headernava = res.data.data
|
||||
this.currentId = this.headernava[0].boxTypeId
|
||||
// this.boxTypelist = res.data.data;
|
||||
/* let arr = res.data.data; */
|
||||
/* arr.map((item) => {
|
||||
return (item.boxNum = 0);
|
||||
}); */
|
||||
this.boxList = res.data.data;
|
||||
console.log(this.boxList, 'woyaode shuju ');
|
||||
this.www = res.data.data[0].boxList;
|
||||
if (res.data.data.length < this.boxPage.size) {
|
||||
this.isOver = "暂无更多";
|
||||
}
|
||||
}
|
||||
});
|
||||
// getBoxList(this.boxPage).then((res) => {
|
||||
// // console.log("箱子列表", res.data.data);
|
||||
// if (res.data.code == 200) {
|
||||
// let arr = res.data.data;
|
||||
// arr.forEach((item) => {
|
||||
// if (this.boxList.get(item.boxTypeId)) {
|
||||
// this.boxList.get(item.boxTypeId).push(item);
|
||||
// } else {
|
||||
// this.boxList.set(item.boxTypeId, [item]);
|
||||
// }
|
||||
// });
|
||||
// console.log("箱子列表map", this.boxList);
|
||||
// if (res.data.data.length < this.boxPage.size) {
|
||||
// this.isOver = "暂无更多";
|
||||
// }
|
||||
// this.boxTypeList.map((item) => {
|
||||
// return (item.children = this.boxList.get(item.id));
|
||||
// });
|
||||
// this.tableList = this.boxTypeList.filter((item) => {
|
||||
// return item.children;
|
||||
// });
|
||||
// console.log("处理后的分类", this.tableList);
|
||||
// }
|
||||
// });
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
getAll(newValue) {
|
||||
if (newValue) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.box_fenlei {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
// height: 42px;
|
||||
// background: url('../../assets/pinxiangBottom_top.png') no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
// opacity: 1;
|
||||
position: absolute;
|
||||
|
||||
|
||||
@media (max-width: 550px) {
|
||||
// height: 30px;
|
||||
font-size: 11px;
|
||||
// top: 126px;
|
||||
}
|
||||
|
||||
.box_type_low {
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
top: 45px;
|
||||
// background: #323436;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
top: 35px;
|
||||
// height: 30px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
// background: linear-gradient(360deg,
|
||||
// rgba(37, 244, 132, 0.5) 0%,
|
||||
// rgba(37, 244, 132, 0.25) 100%);
|
||||
// opacity: 1;
|
||||
// border: 1px solid #3fa2c7;
|
||||
background: url('../../assets/pinxiangBottom_text_bg.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.type_btn {
|
||||
height: 42px;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
// border-radius: 21px;
|
||||
// padding: 10px 20px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.speac {
|
||||
width: 54px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
margin: 0 auto;
|
||||
width: 98%;
|
||||
height: 500px;
|
||||
margin-top: 44px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 535px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
.box_name {
|
||||
background-size: 100% 100%;
|
||||
font-size: 25px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxs {
|
||||
width: 100%;
|
||||
// display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
margin-top: 37px;
|
||||
}
|
||||
|
||||
.box_type {
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.boxs_list {
|
||||
width: 100%;
|
||||
margin-top: 14px;
|
||||
position: relative;
|
||||
padding-top: 1px;
|
||||
background: url('../../assets/gen-box-bg-C9N-vsd0.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 14px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hot {
|
||||
width: 56px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.hots {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: 8px;
|
||||
width: 69px;
|
||||
height: 21px;
|
||||
background: linear-gradient(90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
box-shadow: 0px 3px 7px 0px rgba(37, 244, 132, 0.5);
|
||||
opacity: 1;
|
||||
transform: rotate(-14deg);
|
||||
font-size: 16px;
|
||||
color: #181a1c;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxs {
|
||||
.boxs_list:last-child {
|
||||
// margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_img {
|
||||
width: 88%;
|
||||
// height: 181px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
|
||||
.bg1 {}
|
||||
|
||||
.bg2 {
|
||||
width: 151px;
|
||||
// height: 151px;
|
||||
position: absolute;
|
||||
// left: 50%;
|
||||
// left: 0;
|
||||
// transform: translateX(-50%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.bg2 {
|
||||
// animation: boxscola 2s ease infinite;
|
||||
transition: all 0.2s ease;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_name {
|
||||
margin-top: 22px;
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.box_list_const {
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
width: 89%;
|
||||
// height: 42px;
|
||||
// background: url('../../assets/box_moeny_bg.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
padding-bottom:30px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
// height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.header_top {
|
||||
width: 98%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
div:first-child {}
|
||||
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.home {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
// height: 100vh;
|
||||
// background: #0e1227c4;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,390 @@
|
||||
getDetial() {
|
||||
getFightData(this.id).then(res => { ///////////获取对战数据
|
||||
this.detialList = res.data.data;///////初始化数据
|
||||
this.roomstatus = res.data.data.status;/////房间的状态0为等待
|
||||
this.detialList.boxData = JSON.parse(res.data.data.boxData);////所有宝箱
|
||||
this.detialList.userData = JSON.parse(res.data.data.userData);///所有用户
|
||||
this.detialList.currentPeople = res.data.data.userData.length;///人数
|
||||
this.detialList.boxData = res.data.data.boxData.flatMap(item =>
|
||||
Array.from({ length: item.boxNum }, () => item)
|
||||
);//////////////////处理宝箱数据
|
||||
this.totalround = this.detialList.boxData.length; /////几个宝箱就是几个回合
|
||||
|
||||
this.waitpeople = { people: [] };/////等待的人
|
||||
|
||||
for (let index = 0; index < this.detialList.playerNum; index++) {
|
||||
const obj = (this.joinSeatNumV2.people[index] = { realget: [] });
|
||||
obj.joinSeatNum = index + 1;
|
||||
if (this.detialList.userData[index]) {
|
||||
this.waitpeople.people.push(this.detialList.userData[index]);
|
||||
this.waitpeople.people[index].status = "1";
|
||||
this.waitpeople.people[index].joinSeatNum = index + 1;
|
||||
} else {
|
||||
this.waitpeople.people.push({
|
||||
status: "0",
|
||||
joinSeatNum: index + 1
|
||||
});
|
||||
}
|
||||
}///人数判断有几个人
|
||||
// v2 将用户分配到指定座位
|
||||
// 遍历arr1中的每一项
|
||||
this.joinSeatNumV2.status = res.data.data.status;
|
||||
this.joinSeatNumV2.people.forEach(item1 => {
|
||||
// 遍历arr2中的每一项，寻找joinSeatNum相等的项
|
||||
res.data.data.userData.forEach(item2 => {
|
||||
if (item1.joinSeatNum === item2.joinSeatNum) {
|
||||
// 如果找到相等的项，在arr1的当前项中添加realuser属性，并设置其值为arr2的当前项
|
||||
item1.realuser = item2;
|
||||
}
|
||||
});
|
||||
});
|
||||
//每个人
|
||||
this.joinSeatNumV2.people = this.joinSeatNumV2.people.map(item => ({
|
||||
...item,
|
||||
realdrop: []
|
||||
}));
|
||||
if (this.roomstatus == "0") { /////////如果他的状态时0的话就是等待中
|
||||
///this.get(this.totalround);//总回合数
|
||||
this.deng = setTimeout(() => {
|
||||
this.getDetial()
|
||||
}, 1000);
|
||||
} else if (this.roomstatus == "1") {
|
||||
getpkrealdetial({
|
||||
fightId: this.$route.query.id,
|
||||
rounds: this.totalround
|
||||
}).then(res => {
|
||||
const roundresult = res.data.data.playerGainsOrnamentsData;
|
||||
if (res.data.code === 500) {
|
||||
console.log("结束")
|
||||
} else {
|
||||
this.realround = res.data.data.round;///第几回合
|
||||
if (res.data.data.playerGainsOrnamentsData == null) {
|
||||
this.getpkResult()
|
||||
} else {
|
||||
getBoxdetial({//根据宝箱的id获取宝箱的数据
|
||||
id: this.detialList.boxData[Number(res.data.data.round - 1)].boxId
|
||||
}).then(res => {
|
||||
// const money=
|
||||
this.joinSeatNumV2.people.forEach(item1 => {
|
||||
roundresult.forEach(item2 => {
|
||||
if (item1.joinSeatNum === item2.joinSeatNum) {
|
||||
let drawList = this.generateRandomDrawList(
|
||||
res.data.data.boxOrnamentsList,
|
||||
20
|
||||
);
|
||||
item1.roundresult = drawList;
|
||||
item1.roundresult.push(item2.ornamentsData);
|
||||
item1.realmoney = 0;
|
||||
this.$forceUpdate();
|
||||
setTimeout(() => {
|
||||
item1.realmoney += Number(
|
||||
item2.ornamentsData.ornamentsPrice
|
||||
);
|
||||
item1.realget.unshift(item2.ornamentsData);
|
||||
}, 6200);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
this.begin = false;
|
||||
setTimeout(() => {
|
||||
this.begin = true;
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
this.aaaaa = setTimeout(() => {
|
||||
this.get(this.totalround);//传总回合数
|
||||
|
||||
}, 6000);
|
||||
} else if (this.roomstatus == "2") {
|
||||
/* this.refresh() */
|
||||
clearTimeout(this.deng);
|
||||
this.getpkResult();
|
||||
clearTimeout(this.aaaaa)
|
||||
clearTimeout(this.aaa)
|
||||
this.aaa = null
|
||||
|
||||
clearTimeout(this.timerv2)
|
||||
clearTimeout(this.ding)
|
||||
this.timerv2 = null
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
cleantimer(){
|
||||
clearTimeout(this.timerv2);
|
||||
this.timerv2 = null;
|
||||
},
|
||||
refresh() {
|
||||
location.reload();
|
||||
},
|
||||
|
||||
get(round) {
|
||||
this.timerv2 = setInterval(() => {
|
||||
if (this.realround == null) {
|
||||
|
||||
this.cleantimer();
|
||||
this.getpkResult();
|
||||
|
||||
|
||||
this.refresh()
|
||||
|
||||
} else {
|
||||
|
||||
|
||||
|
||||
getpkrealdetial({
|
||||
fightId: this.$route.query.id,
|
||||
rounds: round
|
||||
}).then(res => {
|
||||
if (res.data.code == 500) {
|
||||
this.cleantimer();
|
||||
|
||||
/* this.aaaa=setTimeout(() => { */
|
||||
this.getpkResult();
|
||||
/* this.getDetial(); */
|
||||
/* this.clearTimeout(this.aaaa)
|
||||
}, 6500); */
|
||||
//
|
||||
} else {
|
||||
const roundresult = res.data.data.playerGainsOrnamentsData;
|
||||
|
||||
this.realround = res.data.data.round;
|
||||
if (res.data.data.playerGainsOrnamentsData == null) {
|
||||
clearTimeout(this.timerv2);
|
||||
this.timerv2 = null;
|
||||
this.getDetial();
|
||||
} else {
|
||||
getBoxdetial({
|
||||
id: this.detialList.boxData[Number(res.data.data.round - 1)]
|
||||
.boxId
|
||||
}).then(res => {
|
||||
// const money=
|
||||
|
||||
this.joinSeatNumV2.people.forEach(item1 => {
|
||||
roundresult.forEach(item2 => {
|
||||
if (item1.joinSeatNum === item2.joinSeatNum) {
|
||||
let drawList = this.generateRandomDrawList(
|
||||
res.data.data.boxOrnamentsList,
|
||||
20
|
||||
);
|
||||
item1.roundresult = drawList;
|
||||
item1.roundresult.push(item2.ornamentsData);
|
||||
this.$forceUpdate();
|
||||
setTimeout(() => {
|
||||
item1.realmoney += Number(
|
||||
item2.ornamentsData.ornamentsPrice
|
||||
);
|
||||
item1.realget.unshift(item2.ornamentsData);
|
||||
}, 6200);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
this.begin = false;
|
||||
setTimeout(() => {
|
||||
this.begin = true;
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
generateRandomDrawList(ornamentsArray, drawListLength) {
|
||||
const drawList = [];
|
||||
|
||||
for (let i = 0; i < drawListLength; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * ornamentsArray.length);
|
||||
drawList.push(ornamentsArray[randomIndex]);
|
||||
}
|
||||
|
||||
return drawList;
|
||||
},
|
||||
formatter(value) {
|
||||
// 格式化函数，可以根据需要自定义
|
||||
return value.toFixed(2); // 格式化为本地数字字符串
|
||||
},
|
||||
|
||||
|
||||
handlejointrue() {
|
||||
let obj = {
|
||||
fightId: this.$route.query.id,
|
||||
joinSeatNum: this.peopleselect,
|
||||
rounds: this.totalround
|
||||
};
|
||||
joinFight(obj).then(() => {
|
||||
this.isjoin = false;
|
||||
this.dings = setTimeout(() => {
|
||||
this.getDetial();
|
||||
clearTimeout(this.dings)
|
||||
}, 500);
|
||||
});
|
||||
},
|
||||
handleJoin(res) {
|
||||
this.peopleselect = res;
|
||||
this.title = "加入房间";
|
||||
this.isjoin = true;
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
///复制分享链接
|
||||
async handlecopy() {
|
||||
const url = window.location.href; // 获取当前地址栏的URL
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = url;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
// 执行复制操作
|
||||
try {
|
||||
const successful = document.execCommand("copy");
|
||||
if (successful) {
|
||||
// 复制成功，使用 Element UI 的 $message 显示通知
|
||||
this.$message({
|
||||
message: "复制成功",
|
||||
type: "success",
|
||||
customClass: "log_success"
|
||||
});
|
||||
} else {
|
||||
// 复制失败，显示错误信息
|
||||
this.$message({
|
||||
message: "浏览器版本过低,请升级浏览器",
|
||||
type: "warning",
|
||||
customClass: "log_warning"
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
this.$message({
|
||||
message: "浏览器版本过低,请升级浏览器",
|
||||
type: "warning",
|
||||
customClass: "log_warning"
|
||||
});
|
||||
}
|
||||
|
||||
// 移除textarea元素
|
||||
document.body.removeChild(textarea);
|
||||
},
|
||||
getrealPeople() { },
|
||||
getpkResult() {
|
||||
clearTimeout(this.aaa)
|
||||
clearTimeout(this.deng);
|
||||
this.aaa = null
|
||||
getFightResult(this.id).then(res => {
|
||||
this.jieshuList = res.data.data;
|
||||
this.jieshuList.winnerGainsOrnamentsData.forEach(item => {
|
||||
let totalPrice = 0;
|
||||
if (item.ornamentsDataList) {
|
||||
item.ornamentsDataList.forEach(ornament => {
|
||||
totalPrice += ornament.ornamentsPrice;
|
||||
});
|
||||
item.totalprize = totalPrice;
|
||||
}
|
||||
});
|
||||
this.ding = setTimeout(() => {
|
||||
if (this.detialList.status == "2") {
|
||||
for (let i = 0; i < this.waitpeople.people.length; i++) {
|
||||
// 遍历 arr2
|
||||
for (
|
||||
let j = 0;
|
||||
j < this.jieshuList.winnerGainsOrnamentsData.length;
|
||||
j++
|
||||
) {
|
||||
// 如果 joinSeatNum 相等
|
||||
if (
|
||||
this.waitpeople.people[i].joinSeatNum ===
|
||||
this.jieshuList.winnerGainsOrnamentsData[j].joinSeatNum
|
||||
) {
|
||||
// 如果 arr1 的当前项没有 result 属性，则添加该属性
|
||||
|
||||
// 将 arr2 的当前项添加到 arr1 的 result 属性中
|
||||
this.waitpeople.people[
|
||||
i
|
||||
].result = this.jieshuList.winnerGainsOrnamentsData[j];
|
||||
this.waitpeople.people[i].winner = true;
|
||||
} else {
|
||||
this.waitpeople.people[i].winner = false;
|
||||
this.waitpeople.people[i].resultcoin = "0.00";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.waitpeople.people.forEach(item => {
|
||||
let resultcoin = 0;
|
||||
if (item.result) {
|
||||
item.result.ornamentsDataList.forEach(ornament => {
|
||||
resultcoin += ornament.ornamentsPrice;
|
||||
});
|
||||
item.resultcoin = resultcoin;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
this.$forceUpdate();
|
||||
}
|
||||
if (this.joinSeatNumV2.status == "2") {
|
||||
for (let i = 0; i < this.joinSeatNumV2.people.length; i++) {
|
||||
// 遍历 arr2
|
||||
for (
|
||||
let j = 0;
|
||||
j < this.jieshuList.winnerGainsOrnamentsData.length;
|
||||
j++
|
||||
) {
|
||||
// 如果 joinSeatNum 相等
|
||||
if (
|
||||
this.joinSeatNumV2.people[i].joinSeatNum ===
|
||||
this.jieshuList.winnerGainsOrnamentsData[j].joinSeatNum
|
||||
) {
|
||||
// 如果 arr1 的当前项没有 result 属性，则添加该属性
|
||||
|
||||
// 将 arr2 的当前项添加到 arr1 的 result 属性中
|
||||
this.joinSeatNumV2.people[
|
||||
i
|
||||
].result = this.jieshuList.winnerGainsOrnamentsData[j];
|
||||
this.joinSeatNumV2.people[i].winner = true;
|
||||
} else {
|
||||
this.joinSeatNumV2.people[i].winner = false;
|
||||
this.joinSeatNumV2.people[i].resultcoin = "0.00";
|
||||
}
|
||||
}
|
||||
}
|
||||
this.joinSeatNumV2.people.forEach(item => {
|
||||
let resultcoin = 0;
|
||||
if (item.result) {
|
||||
item.result.ornamentsDataList.forEach(ornament => {
|
||||
resultcoin += ornament.ornamentsPrice;
|
||||
});
|
||||
item.resultcoin = resultcoin;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 450);
|
||||
|
||||
/* clearTimeout(this.ding) */
|
||||
|
||||
});
|
||||
// 对战结果
|
||||
setInterval(() => {
|
||||
// 遍历arr2，找到arr1中对应的项，并将ornamentsDataList添加到realdrop属性中
|
||||
this.jieshuList.playerGainsOrnamentsData.forEach(item2 => {
|
||||
const foundIndex = this.joinSeatNumV2.people.findIndex(
|
||||
item1 => item1.joinSeatNum === item2.joinSeatNum
|
||||
);
|
||||
if (foundIndex !== -1) {
|
||||
// 如果找到了对应的项，则添加ornamentsDataList到realdrop中
|
||||
this.joinSeatNumV2.people[foundIndex].realdrop.push(
|
||||
...item2.ornamentsDataList
|
||||
);
|
||||
}
|
||||
});
|
||||
}, 700);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="creat_bg" v-if="boxDetail.flag">
|
||||
<div class="animate__animated animate__fadeInDown" ref="slider">
|
||||
<div class="title">盒子包含</div>
|
||||
<div
|
||||
class="creat_close"
|
||||
@click="
|
||||
handleclose();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<svg
|
||||
t="1708678106448"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2989"
|
||||
>
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477"
|
||||
p-id="2990"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="box_bottom grade2">
|
||||
<div
|
||||
class="box_bottom_hzbh"
|
||||
:style="{ 'background-image': `url(${item.levelImg})` }"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<div class="hzbh_img">
|
||||
<img :src="item.imageUrl|fullPath" width="100%" height="100%" />
|
||||
</div>
|
||||
<div class="hzbh_bl">{{ item.oddsResult }}%</div>
|
||||
<div class="hzbh_name textover-f">{{ item.name }}</div>
|
||||
<div class="hzbh_money">
|
||||
<money class="money"></money>
|
||||
{{ item.usePrice }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cerate_btn center"
|
||||
@click="
|
||||
handleclose();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
关闭
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDetail } from "@/api/index";
|
||||
|
||||
export default {
|
||||
props: ["boxDetail"],
|
||||
data() {
|
||||
return {
|
||||
show_box_detail: false,
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
window.addEventListener("popstate", () => {
|
||||
if (this.show_box_detail) {
|
||||
this.show_box_detail = false;
|
||||
}
|
||||
});
|
||||
// this.$bus.$on("show_box_detail", (data) => {
|
||||
// this.show_box_detail = data.flag;
|
||||
|
||||
// });
|
||||
},
|
||||
beforeDestroy() {
|
||||
// this.$bus.$off('show_box_detail')
|
||||
},
|
||||
computed: {},
|
||||
watch: {
|
||||
boxDetail: {
|
||||
handler(newValue) {
|
||||
if (newValue.flag) {
|
||||
const state = { title: "title", url: "#" };
|
||||
console.log("window.histroy", window);
|
||||
window.history.pushState(state, state.title, state.url);
|
||||
getDetail(newValue.boxId).then((res) => {
|
||||
console.log("simpleBoxDetail", res);
|
||||
this.list = res.data.data.boxOrnamentsList;
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
/* 关闭 */
|
||||
handleclose() {
|
||||
const element = this.$refs.slider;
|
||||
element.classList += " animate__fadeOutDown";
|
||||
setTimeout(() => {
|
||||
this.boxDetail.flag=false
|
||||
this.$router.back();
|
||||
}, 350);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box_bottom {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
// display: flex;
|
||||
height: auto;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
.box_bottom_hzbh {
|
||||
position: relative;
|
||||
margin-top: 4px;
|
||||
background-size: 100% 100%;
|
||||
width: 97%;
|
||||
height: 224px;
|
||||
background-color: #1f2023;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
opacity: 1;
|
||||
margin: 1%;
|
||||
&:hover {
|
||||
.hzbh_img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
height: 187px;
|
||||
}
|
||||
|
||||
.hzbh_img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
// height: 168px;
|
||||
width: 168px;
|
||||
height: 126px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 28px;
|
||||
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
.hzbh_name {
|
||||
font-size: 19px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.hzbh_bl {
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 14px;
|
||||
font-weight: bold;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.hzbh_money {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
color: #3fa2c7;
|
||||
margin-top: 12px;
|
||||
font-size: 21px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box_bottom_hydl {
|
||||
position: relative;
|
||||
margin-top: 4px;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
background-color: #1f2023;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
opacity: 1;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
.hydl_img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
// background-color: red;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 125px;
|
||||
font-size: 9px;
|
||||
}
|
||||
.hydl_img {
|
||||
width: 80%;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
// height: 112px;
|
||||
margin: 0 auto;
|
||||
margin-top: 5%;
|
||||
@media (max-width: 550px) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
.hydl_money {
|
||||
margin-top: 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
color: #3fa2c7;
|
||||
// font-size: 14px;
|
||||
.moneys {
|
||||
margin-right: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.creat_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
// margin-left: -262.5px;
|
||||
width: 525px;
|
||||
transform: translateX(-50%);
|
||||
height: 100vh;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
padding: 2% 0;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
.creat_close {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@media (max-width: 550px) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.cerate_btn {
|
||||
width: 93.5%;
|
||||
height: 56px;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
#1f3a58 0%,
|
||||
rgba(37, 244, 132, 0.1) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
font-size: 25px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,905 @@
|
||||
<template>
|
||||
<!-- 创建房间 -->
|
||||
|
||||
<div class="creat_bg">
|
||||
<boxDetail :boxDetail="boxDetail"></boxDetail>
|
||||
<div class="animate__animated animate__fadeInDown" ref="slider">
|
||||
<div class="creat_close" @click="
|
||||
handleclose();
|
||||
playAudio();
|
||||
">
|
||||
<svg t="1708678106448" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2989">
|
||||
<path
|
||||
d="M898.844444 830.577778c22.755556 17.066667 22.755556 51.2 0 73.955555s-51.2 22.755556-73.955555 0L512 591.644444l-312.888889 312.888889c-11.377778 11.377778-22.755556 17.066667-39.822222 17.066667-11.377778 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-22.755556-51.2 0-73.955555l312.888889-312.888889-307.2-318.577778c-11.377778-5.688889-17.066667-22.755556-17.066667-34.133333 0-11.377778 5.688889-28.444444 17.066667-34.133334 22.755556-22.755556 51.2-22.755556 73.955555 0L512 443.733333l312.888889-312.888889c22.755556-22.755556 51.2-22.755556 73.955555 0s22.755556 51.2 0 73.955556l-312.888888 312.888889 312.888888 312.888889z"
|
||||
fill="#727477" p-id="2990" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="creat_number">
|
||||
<div style="width: 57%" class="fjrs">房间人数</div>
|
||||
<div class="creat_number_select space_around">
|
||||
<div class="select_btn center" @click="
|
||||
selectpeople(2);
|
||||
playAudio();
|
||||
" :class="objj.playerNumber == 2 ? 'active' : ''">
|
||||
2人
|
||||
</div>
|
||||
<div class="select_btn center" @click="
|
||||
selectpeople(3);
|
||||
playAudio();
|
||||
" :class="objj.playerNumber == 3 ? 'active' : ''">
|
||||
3人
|
||||
</div>
|
||||
<div class="select_btn center" @click="
|
||||
selectpeople(4);
|
||||
playAudio();
|
||||
" :class="objj.playerNumber == 4 ? 'active' : ''">
|
||||
4人
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="creat_type">
|
||||
<div class="space_between">
|
||||
<div class="create_type_home">
|
||||
房间类别（模式）
|
||||
<div class="create_type_model space_around">
|
||||
<div class="select_btn center" @click="
|
||||
selectmodel(0);
|
||||
playAudio();
|
||||
" :class="objj.model == 0 ? 'active' : ''">
|
||||
欧皇
|
||||
</div>
|
||||
<div class="select_btn center" @click="
|
||||
selectmodel(1);
|
||||
playAudio();
|
||||
" :class="objj.model == 1 ? 'active' : ''">
|
||||
非酋
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="creat_box left">
|
||||
<div
|
||||
v-for="(item, index) in obj.boxData"
|
||||
:key="index"
|
||||
class="center_img"
|
||||
>
|
||||
<div v-if="item.boxNum > 0">
|
||||
<div>
|
||||
<img :src="item.boxImg01" alt width="100%" />
|
||||
</div>
|
||||
<div class="center_number center">{{ item.boxNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="creat_msg space_around">
|
||||
<div>
|
||||
回合数
|
||||
<div>
|
||||
<span style="color: #25f484">{{ totalround }}</span>/12
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
盲盒种类
|
||||
<div>
|
||||
<span style="color: #25f484">{{ obj.boxData.length }}</span>/6
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
盲盒价值
|
||||
<div style="color: #25f484">{{ totalmoney }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="creat_boxlist" @scroll="handleScroll">
|
||||
<div class="boxlist_box" :class="item.boxNum > 0 ? 'active' : ''" v-for="(item, index) in boxList" :key="index">
|
||||
<div class="boxlist_img" @click="getBoxDetail(item.boxId)">
|
||||
<img :src="item.boxImg01|fullPath" alt width="100%" />
|
||||
</div>
|
||||
<div class="boxlist_number">
|
||||
<plusreduce style="width: 100%; height: 100%" :class="item.boxNum > 0 ? 'actives' : ''"></plusreduce>
|
||||
<div class="space_between boxlist_input">
|
||||
<div @click="
|
||||
handleDel(item, index);
|
||||
playAudio();
|
||||
" class="jian"></div>
|
||||
<div class="input_number">{{ item.boxNum }}</div>
|
||||
<div @click="
|
||||
handlePush(item);
|
||||
playAudio();
|
||||
" class="jia"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxlist_money money-money">
|
||||
<money class="money"></money>
|
||||
{{ item.price }}
|
||||
</div>
|
||||
<div class="textover-f center_boxboxlist_name">
|
||||
{{ item.boxName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cerate_btn center" @click="
|
||||
handleCreat();
|
||||
playAudio();
|
||||
">
|
||||
创建
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import boxDetail from "./boxDetail.vue";
|
||||
import {
|
||||
createFight,
|
||||
getUserInfo,
|
||||
getBoxList,
|
||||
/* getBoxTypeList, */
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
components: {
|
||||
boxDetail,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show_create_room: false,
|
||||
istypeshow: false,
|
||||
boxtype: "",
|
||||
selectedmodel: 0,
|
||||
people: 2,
|
||||
isCreat: false,
|
||||
model: 0,
|
||||
boxList: [],
|
||||
changeboxList: [],
|
||||
boxTypeList: [],
|
||||
money: 0,
|
||||
obj: {
|
||||
boxData: [],
|
||||
createNum: 0,
|
||||
},
|
||||
boxobj: {},
|
||||
objj: {
|
||||
/* boxIdAndNumber:null, */
|
||||
|
||||
boxIdAndNumber: {53: 2, 54: 2, 55: 1, 56: 1},
|
||||
model: 0, //模式
|
||||
playerNumber: 2, //人数
|
||||
},
|
||||
boxPage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
gameMouldId: 2,
|
||||
boxTypeId: "",
|
||||
orderByFie: 2,
|
||||
},
|
||||
typePage: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
},
|
||||
isOver: "加载中",
|
||||
boxDetail: {
|
||||
flag: false,
|
||||
boxId: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getBox();
|
||||
this.getuser();
|
||||
/* if (this.boxTypeList.length == 0) {
|
||||
getBoxTypeList(this.typePage).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.boxTypeList.push(...res.data.data.records);
|
||||
if (res.data.data.records.length == this.typePage.size) {
|
||||
this.typePage.page++;
|
||||
this.getTypeList();
|
||||
} else {
|
||||
this.getAll = true;
|
||||
}
|
||||
}
|
||||
console.log("玩法列表", this.boxTypeList);
|
||||
});
|
||||
} */
|
||||
},
|
||||
computed: {
|
||||
totalround() {
|
||||
return this.obj.boxData.reduce((total, box) => total + box.boxNum, 0);
|
||||
},
|
||||
totalmoney() {
|
||||
let bean = 0;
|
||||
this.obj.boxData.forEach((item) => {
|
||||
bean += item.price * item.boxNum;
|
||||
});
|
||||
return bean.toFixed(2);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getBoxDetail(boxId) {
|
||||
console.log(boxId);
|
||||
this.boxDetail.flag = true;
|
||||
this.boxDetail.boxId = boxId;
|
||||
},
|
||||
handleScroll(e) {
|
||||
if (
|
||||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||||
e.srcElement.scrollHeight
|
||||
) {
|
||||
if (this.isOver == "加载中") {
|
||||
this.boxPage.page++;
|
||||
setTimeout(() => {
|
||||
this.getBox();
|
||||
}, 5);
|
||||
}
|
||||
}
|
||||
},
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
//设置房间人数
|
||||
selectpeople(res) {
|
||||
this.objj.playerNumber = res;
|
||||
},
|
||||
//获取用户信息
|
||||
getuser() {
|
||||
getUserInfo().then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.userId = res.data.data.userId;
|
||||
console.log(this.userId);
|
||||
}
|
||||
});
|
||||
},
|
||||
//设置房间类型
|
||||
selectmodel(res) {
|
||||
this.objj.model = res;
|
||||
console.log(this.objj);
|
||||
},
|
||||
//箱子的类别
|
||||
|
||||
//获取全部的箱子
|
||||
getBox() {
|
||||
let data={
|
||||
boxType:2
|
||||
}
|
||||
getBoxList(data).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
console.log("箱子列表", res.data.data);
|
||||
// this.boxTypelist = res.data.data;
|
||||
let arr = res.data.data;
|
||||
arr.map((item) => {
|
||||
return (item.boxNum = 0);
|
||||
});
|
||||
let arr2=[]
|
||||
arr.forEach((item) => {
|
||||
arr2.push(...item.boxList)
|
||||
})
|
||||
this.boxList = arr2
|
||||
this.boxList.map((item) => {
|
||||
return (item.boxNum = 0);
|
||||
});
|
||||
console.log(this.boxList)
|
||||
if (res.data.data.length < this.boxPage.size) {
|
||||
this.isOver = "暂无更多";
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 关闭 */
|
||||
handleclose() {
|
||||
const element = this.$refs.slider;
|
||||
element.classList += " animate__fadeOutDown";
|
||||
setTimeout(() => {
|
||||
this.boxList = [];
|
||||
this.changeboxList = [];
|
||||
this.boxTypelist = [];
|
||||
this.$bus.$emit("show_create_room", false);
|
||||
this.$router.back();
|
||||
this.obj = {
|
||||
boxData: [],
|
||||
createNum: 0,
|
||||
model: 0,
|
||||
};
|
||||
this.boxTypelist = [];
|
||||
}, 350);
|
||||
},
|
||||
//创建房间
|
||||
handleCreat() {
|
||||
/* console.log(this.objj)
|
||||
createFight(this.objj).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "创建成功",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.$router.push({
|
||||
name: "battleroom",
|
||||
query: {
|
||||
id: res.data.data.id,
|
||||
uid: this.userId,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: res.data.msg,
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
}); */
|
||||
if (this.objj.boxIdAndNumber) {
|
||||
const obj = Array.from(this.objj.boxIdAndNumber).reduce(
|
||||
(obj, [key, value]) => Object.assign(obj, { [key]: value }),
|
||||
{}
|
||||
);
|
||||
this.objj.boxIdAndNumber = obj;
|
||||
console.log("创建房间数据", this.objj);
|
||||
// 请求服务器创建对战
|
||||
createFight(this.objj).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.$bus.$emit("show_create_room", false);
|
||||
// this.$router.back()
|
||||
// this.handleclose();
|
||||
// 提示
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "创建成功",
|
||||
customClass: "log_success",
|
||||
});
|
||||
|
||||
// 跳转
|
||||
// this.$router.back()
|
||||
setTimeout(() => {
|
||||
this.$router.replace({
|
||||
name: "battleroom",
|
||||
query: {
|
||||
id: res.data.data.id,
|
||||
uid: this.userId,
|
||||
},
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
console.log("api/fight/createFight 异常");
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: res.data.msg,
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* const round = this.obj.boxData.reduce(
|
||||
(total, box) => total + box.boxNum,
|
||||
0
|
||||
);
|
||||
this.obj.rounds = round;
|
||||
createFight(this.obj).then((res) => {
|
||||
console.log(res)
|
||||
if (res.data.code == 200)
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.data.msg,
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.handleclose();
|
||||
this.$router.push({
|
||||
name: "battleroom",
|
||||
query: {
|
||||
id: res.data.data.id,
|
||||
},
|
||||
});
|
||||
}, 199); */
|
||||
},
|
||||
handleDel(res) {
|
||||
console.log(res)
|
||||
if (res.boxNum <= 0) {
|
||||
return;
|
||||
} else {
|
||||
console.log("减", this.objj.boxIdAndNumber);
|
||||
if (!this.objj.boxIdAndNumber.set) {
|
||||
// console.log('不是map');
|
||||
let map = new Map();
|
||||
let key;
|
||||
for (key in this.objj.boxIdAndNumber) {
|
||||
map.set(key, this.objj.boxIdAndNumber[key]);
|
||||
}
|
||||
|
||||
this.objj.boxIdAndNumber = map;
|
||||
}
|
||||
this.objj.boxIdAndNumber.set(res.boxId, res.boxNum - 1);
|
||||
// console.log(this.objj.boxIdAndNumber);
|
||||
this.$set(res, "boxNum", res.boxNum - 1);
|
||||
// console.log(res);
|
||||
// res.boxNum -= 1;
|
||||
this.$forceUpdate();
|
||||
/* map1.delete(); */
|
||||
this.obj.boxData.forEach((item) => {
|
||||
if (item.boxNum === 0) {
|
||||
let index = this.changeboxList.indexOf(item); // 获取元素在数组中的索引位置
|
||||
this.obj.boxData.splice(index, 1); // 从数组中移除该元素
|
||||
}
|
||||
|
||||
/* else {
|
||||
// // this.$forceUpdate();
|
||||
// // this.totalround = 0;
|
||||
// // this.obj.boxData.forEach(item => {
|
||||
// // this.totalround += item.boxNum;
|
||||
// // });
|
||||
// } */
|
||||
});
|
||||
}
|
||||
},
|
||||
handlePush(res) {
|
||||
if (this.obj.boxData.length == 6 && res.boxNum == 0) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "最多选择6种盲盒",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (this.totalround < 12) {
|
||||
res.boxNum += 1;
|
||||
let index = this.changeboxList.findIndex(
|
||||
(item) => item.boxId === res.boxId
|
||||
);
|
||||
// 如果有就替换，没有就添加
|
||||
if (index !== -1) {
|
||||
this.changeboxList.splice(index, 1, res);
|
||||
} else {
|
||||
this.changeboxList.push(res);
|
||||
}
|
||||
let sum = 0;
|
||||
this.changeboxList.forEach((obj) => {
|
||||
sum += obj.boxNum; // 将每个对象的 value1 值相加到 sum 上
|
||||
this.money += obj.price;
|
||||
});
|
||||
/* console.log(this.changeboxList) */
|
||||
const map1 = new Map();
|
||||
this.changeboxList.forEach((v) => {
|
||||
map1.set(v.boxId, v.boxNum);
|
||||
});
|
||||
|
||||
this.objj.boxIdAndNumber = map1;
|
||||
/* console.log(this.objj.boxIdAndNumber) */
|
||||
|
||||
/* boxobj */
|
||||
this.obj.createNum = sum;
|
||||
this.obj.boxData = this.changeboxList;
|
||||
} else {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: "选择数量超出最大限制",
|
||||
customClass: "log_warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.creat_bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
// margin-left: -262.5px;
|
||||
width: 525px;
|
||||
transform: translateX(-50%);
|
||||
height: 100vh;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
padding: 2% 0;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.creat_close {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
height: 25px;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin: 0;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fjrs {
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.creat_number {
|
||||
width: 93.5%;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
.creat_number_select {
|
||||
width: 57%;
|
||||
height: 42px;
|
||||
margin-top: 1%;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
color: #727477;
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 215px;
|
||||
height: 30px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: linear-gradient(-90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.select_btn {
|
||||
width: 32%;
|
||||
height: 35px;
|
||||
border-radius: 70px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creat_type {
|
||||
width: 93.5%;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
|
||||
.create_type_home {
|
||||
width: 40%;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.create_type_model {
|
||||
margin-top: 1%;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
color: #727477;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 145px;
|
||||
height: 30px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.select_btn {
|
||||
width: 48%;
|
||||
height: 35px;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: linear-gradient(-90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box_type {
|
||||
width: 140px;
|
||||
height: 42px;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.box_type_low {
|
||||
position: absolute;
|
||||
top: 45px;
|
||||
width: 100%;
|
||||
background: #323436;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
animation: xiala 0.3s linear;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
top: 35px;
|
||||
// height: 30px;
|
||||
}
|
||||
|
||||
@keyframes xiala {
|
||||
0% {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
}
|
||||
|
||||
.type_btn {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creat_box {
|
||||
width: 93.5%;
|
||||
height: 98px;
|
||||
background: #101115;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 1%;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.center_img {
|
||||
width: 70px;
|
||||
margin-right: 28px;
|
||||
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 50px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.center_number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
right: -11px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: #3fa2c7;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creat_msg {
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
width: 93.5%;
|
||||
height: 98px;
|
||||
background: #101115;
|
||||
border-radius: 14px;
|
||||
font-size: 18px;
|
||||
line-height: 2;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.creat_boxlist {
|
||||
width: 93.5%;
|
||||
margin: 0 auto;
|
||||
padding: 14px 32px;
|
||||
height: 434px;
|
||||
background-color: #101115;
|
||||
border-radius: 14px;
|
||||
margin-top: 14px;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
padding: 10px 13px;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #3fa2c7 !important;
|
||||
}
|
||||
|
||||
.boxlist_box {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
margin: 0 auto;
|
||||
padding: 6% 0;
|
||||
border: 1px solid #727477;
|
||||
border-radius: 14px;
|
||||
transition: all 0.3s ease;
|
||||
background-color: rgba(114, 116, 119, 0.1);
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.boxlist_img {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 91px;
|
||||
height: 91px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .boxlist_number {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 5%;
|
||||
width: 140px;
|
||||
font-size: 22px;
|
||||
height: 38px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 100px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.boxlist_input {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
height: 38px;
|
||||
|
||||
width: 100%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.input_number {
|
||||
@media (max-width: 550px) {
|
||||
width: 41px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.jian {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.jia {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
.actives {
|
||||
svg {
|
||||
path {
|
||||
fill: #3fa2c7 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxlist_money {
|
||||
margin-top: 5%;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.center_boxboxlist_name {
|
||||
margin-top: 5%;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creat_boxlist::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.creat_boxlist::-webkit-scrollbar-thumb {
|
||||
width: 7px;
|
||||
background: #323436;
|
||||
opacity: 1;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.cerate_btn {
|
||||
position: fixed;
|
||||
top: 70%;
|
||||
right: 20px;
|
||||
z-index: 999;
|
||||
width: 60px !important;
|
||||
height: 60px !important;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(360deg,
|
||||
#1f3a58 0%,
|
||||
rgba(37, 244, 132, 0.1) 100%);
|
||||
opacity: 1;
|
||||
// border: 1px solid #3fa2c7;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 2px 2px 9px #000000a1;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,676 @@
|
||||
<template>
|
||||
<div class="root">
|
||||
|
||||
<div>
|
||||
test01文档流
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<lotteryRounds
|
||||
class="lotteryRounds"
|
||||
:records="lotteryRoundsRecord"
|
||||
:singlePlayTime="speed"
|
||||
@locationChange="resLocationChange"
|
||||
></lotteryRounds>
|
||||
</div>
|
||||
|
||||
<!-- <div style="border: 1px solid greenyellow;">
|
||||
{{ `location:${resLocation.y}` }}
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
test01文档流
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import lotteryRounds from "@/components/pkHome/lotteryRounds.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lotteryRoundsRecord: [
|
||||
{
|
||||
boxId: 3,
|
||||
boxName: "测试1-3",
|
||||
boxPrice: 90,
|
||||
fightId: 827,
|
||||
fightRoundNumber: 1,
|
||||
id: 5620,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
isShow: 0,
|
||||
ornamenName: "AK-47 | 二西莫夫",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
ornamentsPrice: 148.85,
|
||||
source: "0",
|
||||
status: "0",
|
||||
userId: 32,
|
||||
boxInfo: {
|
||||
boxId: 3,
|
||||
boxImg01: "",
|
||||
boxImg02: "",
|
||||
number: 3,
|
||||
ornaments: [
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 28,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/TTRBNCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "M4A4 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3858,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 888.49,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 22,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3606,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 784.18,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 30,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoV2VsbC1Xb3JuKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (破损不堪)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 4177,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 557.22,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 26,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoQmF0dGxlLVNjYXJyZWQp.png",
|
||||
itemName: "AWP | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3854,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 429.61,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 23,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChNaW5pbWFsIFdlYXIp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3713,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 271.31,
|
||||
},
|
||||
{
|
||||
anchorOdds: 1,
|
||||
anchorOddsPercentum: "100.00%",
|
||||
boxId: 3,
|
||||
id: 21,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 1,
|
||||
realOddsPercentum: "100.00%",
|
||||
usePrice: 148.85,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 29,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoTWluaW1hbCBXZWFyKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1985,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 98.74,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 25,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1912,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 47.23,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 24,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "P250 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9059,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 17.69,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 27,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEJhdHRsZS1TY2FycmVkKQ==.png",
|
||||
itemName: "P250 | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9270,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 9.58,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
boxId: 3,
|
||||
boxName: "测试1-3",
|
||||
boxPrice: 90,
|
||||
fightId: 827,
|
||||
fightRoundNumber: 2,
|
||||
id: 5622,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
isShow: 0,
|
||||
ornamenName: "AK-47 | 二西莫夫",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
ornamentsPrice: 148.85,
|
||||
source: "0",
|
||||
status: "0",
|
||||
userId: 32,
|
||||
boxInfo: {
|
||||
boxId: 3,
|
||||
boxImg01: "",
|
||||
boxImg02: "",
|
||||
number: 3,
|
||||
ornaments: [
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 28,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/TTRBNCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "M4A4 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3858,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 888.49,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 22,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3606,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 784.18,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 30,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoV2VsbC1Xb3JuKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (破损不堪)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 4177,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 557.22,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 26,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoQmF0dGxlLVNjYXJyZWQp.png",
|
||||
itemName: "AWP | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3854,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 429.61,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 23,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChNaW5pbWFsIFdlYXIp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3713,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 271.31,
|
||||
},
|
||||
{
|
||||
anchorOdds: 1,
|
||||
anchorOddsPercentum: "100.00%",
|
||||
boxId: 3,
|
||||
id: 21,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 1,
|
||||
realOddsPercentum: "100.00%",
|
||||
usePrice: 148.85,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 29,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoTWluaW1hbCBXZWFyKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1985,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 98.74,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 25,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1912,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 47.23,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 24,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "P250 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9059,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 17.69,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 27,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEJhdHRsZS1TY2FycmVkKQ==.png",
|
||||
itemName: "P250 | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9270,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 9.58,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
boxId: 3,
|
||||
boxName: "测试1-3",
|
||||
boxPrice: 90,
|
||||
fightId: 827,
|
||||
fightRoundNumber: 3,
|
||||
id: 5624,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
isShow: 0,
|
||||
ornamenName: "AK-47 | 二西莫夫",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
ornamentsPrice: 148.85,
|
||||
source: "0",
|
||||
status: "0",
|
||||
userId: 32,
|
||||
boxInfo: {
|
||||
boxId: 3,
|
||||
boxImg01: "",
|
||||
boxImg02: "",
|
||||
number: 3,
|
||||
ornaments: [
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 28,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/TTRBNCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "M4A4 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3858,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 888.49,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 22,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3606,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 784.18,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 30,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoV2VsbC1Xb3JuKQ==.png",
|
||||
itemName: "AWP | 二西莫夫 (破损不堪)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 4177,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 557.22,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 26,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QVdQIHwgQXNpaW1vdiAoQmF0dGxlLVNjYXJyZWQp.png",
|
||||
itemName: "AWP | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3854,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 429.61,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 23,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChNaW5pbWFsIFdlYXIp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3713,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 271.31,
|
||||
},
|
||||
{
|
||||
anchorOdds: 1,
|
||||
anchorOddsPercentum: "100.00%",
|
||||
boxId: 3,
|
||||
id: 21,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/QUstNDcgfCBBc2lpbW92IChGaWVsZC1UZXN0ZWQp.png",
|
||||
itemName: "AK-47 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 3609,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 1,
|
||||
realOddsPercentum: "100.00%",
|
||||
usePrice: 148.85,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 29,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoTWluaW1hbCBXZWFyKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (略有磨损)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1985,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 98.74,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 25,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDkwIHwgQXNpaW1vdiAoRmllbGQtVGVzdGVkKQ==.png",
|
||||
itemName: "P90 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 1912,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 47.23,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 24,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEZpZWxkLVRlc3RlZCk=.png",
|
||||
itemName: "P250 | 二西莫夫 (久经沙场)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9059,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 17.69,
|
||||
},
|
||||
{
|
||||
anchorOdds: 0,
|
||||
anchorOddsPercentum: "0.00%",
|
||||
boxId: 3,
|
||||
id: 27,
|
||||
imageUrl:
|
||||
"https://img.zbt.com/e/steam/item/730/UDI1MCB8IEFzaWltb3YgKEJhdHRsZS1TY2FycmVkKQ==.png",
|
||||
itemName: "P250 | 二西莫夫 (战痕累累)",
|
||||
level: "金色",
|
||||
odds: 1,
|
||||
oddsPercentum: "10.00%",
|
||||
ornamentsId: 9270,
|
||||
ornamentsLevelId: 1,
|
||||
realOdds: 0,
|
||||
realOddsPercentum: "0.00%",
|
||||
usePrice: 9.58,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
speed: 6,
|
||||
//---------------------------------
|
||||
boxItem: 0,
|
||||
// debug 目标位置
|
||||
resLocation: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
lotteryRounds,
|
||||
},
|
||||
methods: {
|
||||
resLocationChange(L) {
|
||||
//console.log("test01位置改变 "+JSON.stringify(L))
|
||||
this.resLocation = L;
|
||||
},
|
||||
onRun(newv) {
|
||||
console.log("speed=" + newv);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lotteryRounds {
|
||||
position: relative;
|
||||
height: 50%;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.boxItem {
|
||||
transition: all 2s linear;
|
||||
}
|
||||
|
||||
.boxItem:hover {
|
||||
transform: translate(0px, 200px);
|
||||
}
|
||||
|
||||
.list_animate {
|
||||
// transition: all 5.5s cubic-bezier(0, 0, 0, 1) 0.1s;
|
||||
// transform: translateY(-1947px);
|
||||
}
|
||||
|
||||
.list_animate:hover {
|
||||
// transition: all 5.5s cubic-bezier(0, 0, 0, 1) 0.1s;
|
||||
// transform: translateY(-1947px);
|
||||
}
|
||||
|
||||
.list_box {
|
||||
width: 92px;
|
||||
height: 98px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<div>汰换</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,675 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- <div>{{list}}</div> -->
|
||||
<div class="header_top">
|
||||
<div style="width:4.5rem"></div>
|
||||
<div @click="playAudio()">ROLL房</div>
|
||||
<div
|
||||
@click="
|
||||
handleilltate();
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
玩法说明
|
||||
</div>
|
||||
</div>
|
||||
<div class="roll_status ">
|
||||
<div
|
||||
@click="
|
||||
handleChange(0);
|
||||
playAudio();
|
||||
"
|
||||
:class="type == 0 ? 'active' : ''"
|
||||
class="status_btn center"
|
||||
>
|
||||
进行中
|
||||
</div>
|
||||
<div
|
||||
@click="
|
||||
handleChange(1);
|
||||
playAudio();
|
||||
"
|
||||
:class="type == 1 ? 'active' : ''"
|
||||
class="status_btn center"
|
||||
>
|
||||
已结束
|
||||
</div>
|
||||
<div
|
||||
@click="
|
||||
handlemy(2);
|
||||
playAudio();
|
||||
"
|
||||
:class="type == 2 ? 'active' : ''"
|
||||
class="status_btn center"
|
||||
>
|
||||
我参与的
|
||||
</div>
|
||||
</div>
|
||||
<div class="roll_type_serch space_between">
|
||||
|
||||
<!-- 官方/主播筛选已隐藏
|
||||
<div class="roll_type space_around">
|
||||
<div
|
||||
@click="
|
||||
handletype(0);
|
||||
playAudio();
|
||||
"
|
||||
class="type_btn center"
|
||||
:class="queryParams.rollType === 0 ? 'active' : ''"
|
||||
>
|
||||
官方
|
||||
</div>
|
||||
<div
|
||||
@click="
|
||||
handletype(1);
|
||||
playAudio();
|
||||
"
|
||||
class="type_btn center"
|
||||
:class="queryParams.rollType === 1 ? 'active' : ''"
|
||||
>
|
||||
主播
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="roll_serch roll_serch_full">
|
||||
<input
|
||||
type="text"
|
||||
v-model="queryParams.rollName"
|
||||
name
|
||||
id
|
||||
style="serch"
|
||||
placeholder="请输入ROLL房名称"
|
||||
/>
|
||||
<div @click="handleserch"
|
||||
class="icon"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="roll_room_list" @scroll="scroll">
|
||||
<div
|
||||
:class="{
|
||||
'roll_room animate__animated finish': item.rollStatus == 1,
|
||||
'roll_room animate__animated anchor':
|
||||
item.rollStatus != 1 && item.rollType == 1,
|
||||
'roll_room animate__animated official':
|
||||
item.rollStatus != 1 && item.rollType == 0,
|
||||
}"
|
||||
v-for="(item, index) in rolllist"
|
||||
:key="index"
|
||||
@click="
|
||||
handleGo(item.id);
|
||||
playAudio();
|
||||
"
|
||||
>
|
||||
<div class="room_type center">{{ item.rollTypeName }}</div>
|
||||
<div class="room_title left">
|
||||
|
||||
<div class="room_name left">{{ item.rollName }}</div>
|
||||
</div>
|
||||
<div class="room_weapon">
|
||||
<div class="room_weapon_back left">
|
||||
<div
|
||||
class="weapon_bg center"
|
||||
v-for="(weapon, weaponindex) in JSON.parse(item.ornamentsList)"
|
||||
:key="weaponindex"
|
||||
:style="{
|
||||
background: `url(${weapon.ornamentsLevelImg}) center no-repeat`,
|
||||
'background-size': '60px 60px',
|
||||
}"
|
||||
>
|
||||
<img :src="weapon.imgUrl | fullPath" alt width="60px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room_detial space_around">
|
||||
<div class="detial_public center">
|
||||
<svg
|
||||
t="1706769767743"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3482"
|
||||
>
|
||||
<path
|
||||
d="M650.24 230.4H921.6c43.52 0 76.8 33.28 76.8 76.8s-33.28 76.8-76.8 76.8H102.4c-43.52 0-76.8-33.28-76.8-76.8s33.28-76.8 76.8-76.8h271.36l-102.4-58.88C235.52 151.04 222.72 102.4 243.2 66.56s69.12-48.64 104.96-28.16L512 133.12l163.84-94.72c35.84-20.48 84.48-7.68 104.96 28.16 20.48 35.84 7.68 84.48-28.16 104.96l-102.4 58.88zM153.6 435.2h716.8c43.52 0 76.8 33.28 76.8 76.8v409.6c0 43.52-33.28 76.8-76.8 76.8H153.6c-43.52 0-76.8-33.28-76.8-76.8V512c0-43.52 33.28-76.8 76.8-76.8z"
|
||||
fill="#3A97E4"
|
||||
p-id="3483"
|
||||
/>
|
||||
</svg>
|
||||
{{ item.ornamentsNum }}
|
||||
</div>
|
||||
<div class="detial_public center">
|
||||
<svg
|
||||
t="1706770215849"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
p-id="3627"
|
||||
>
|
||||
<path
|
||||
d="M164.445091 330.984727c0-95.604364 79.080727-173.102545 176.64-173.102545 97.605818 0 176.686545 77.498182 176.686545 173.102545s-79.127273 173.102545-176.686545 173.102546-176.64-77.498182-176.64-173.102546zM407.272727 808.354909v-11.962182c0-88.250182 45.986909-165.794909 115.339637-211.502545a230.958545 230.958545 0 0 0-100.491637-23.086546H274.850909c-126.045091 0-228.212364 100.072727-228.212364 223.557819v14.42909c0 50.501818 102.167273 50.501818 228.212364 50.501819H415.650909a101.841455 101.841455 0 0 1-8.378182-41.937455z m313.623273-532.852364c-80.942545 0-146.618182 64.325818-146.618182 143.685819s65.675636 143.685818 146.618182 143.685818c80.989091 0 146.618182-64.325818 146.618182-143.685818s-65.582545-143.685818-146.618182-143.685819z m0 0c-80.942545 0-146.618182 64.325818-146.618182 143.685819s65.675636 143.685818 146.618182 143.685818c80.989091 0 146.618182-64.325818 146.618182-143.685818s-65.582545-143.685818-146.618182-143.685819z m-54.923636 335.313455c-104.634182 0-189.44 83.083636-189.44 185.576727v11.962182c0 41.890909 84.805818 41.890909 189.44 41.890909h122.228363c104.587636 0 189.346909-1.536 189.346909-41.890909v-11.962182c0-102.493091-84.759273-185.576727-189.346909-185.576727h-122.228363z m0 0"
|
||||
fill="#727477"
|
||||
p-id="3628"
|
||||
/>
|
||||
</svg>
|
||||
{{ item.currentPeopleNum }} / {{ item.peopleNum }}
|
||||
</div>
|
||||
<div
|
||||
class="detial_public center"
|
||||
style="color: rgba(37, 244, 132, 1)"
|
||||
>
|
||||
<svg
|
||||
t="1706770289544"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="3776"
|
||||
>
|
||||
<path
|
||||
d="M955.733333 511.931733q0 10.922667-0.546133 21.777067-0.512 10.888533-1.604267 21.7088-1.024 10.8544-2.6624 21.640533-1.604267 10.752-3.720533 21.435734t-4.778667 21.265066q-2.628267 10.581333-5.802666 20.957867-3.140267 10.4448-6.826667 20.6848-3.652267 10.24-7.850667 20.343467-4.164267 10.0352-8.8064 19.899733-4.676267 9.8304-9.796266 19.456-5.12 9.591467-10.717867 18.944-5.632 9.3184-11.6736 18.397867-6.0416 9.045333-12.526933 17.783466-6.485333 8.772267-13.4144 17.169067-6.894933 8.430933-14.2336 16.4864-7.304533 8.0896-15.018667 15.7696-7.68 7.714133-15.7696 15.018667-8.055467 7.338667-16.4864 14.2336-8.430933 6.929067-17.169067 13.4144t-17.8176 12.526933q-9.045333 6.0416-18.397866 11.639467-9.3184 5.597867-18.944 10.752-9.591467 5.12-19.456 9.796266-9.8304 4.642133-19.899734 8.8064t-20.309333 7.850667q-10.24 3.652267-20.6848 6.826667-10.4448 3.1744-20.992 5.802666-10.581333 2.6624-21.265067 4.778667-10.683733 2.116267-21.469866 3.720533-10.752 1.604267-21.6064 2.6624-10.820267 1.058133-21.7088 1.604267t-21.777067 0.546133q-10.922667 0-21.777067-0.546133-10.888533-0.546133-21.7088-1.604267-10.8544-1.058133-21.640533-2.6624-10.752-1.604267-21.435733-3.754666-10.683733-2.082133-21.265067-4.744534-10.581333-2.628267-20.992-5.802666-10.410667-3.1744-20.6848-6.826667-10.24-3.6864-20.309333-7.850667-10.069333-4.164267-19.899734-8.8064-9.864533-4.676267-19.456-9.796266-9.6256-5.12-18.944-10.752-9.352533-5.597867-18.432-11.605334-9.045333-6.075733-17.783466-12.561066t-17.169067-13.4144q-8.430933-6.894933-16.4864-14.199467-8.0896-7.338667-15.7696-15.018667-7.714133-7.714133-15.018667-15.803733-7.338667-8.055467-14.2336-16.4864-6.929067-8.3968-13.4144-17.169067-6.485333-8.738133-12.526933-17.783466t-11.639467-18.432q-5.632-9.3184-10.752-18.909867-5.12-9.6256-9.796266-19.456-4.642133-9.864533-8.8064-19.899733-4.1984-10.069333-7.850667-20.343467-3.6864-10.24-6.826667-20.650667-3.1744-10.4448-5.802666-20.992-2.6624-10.581333-4.778667-21.265066-2.116267-10.683733-3.754667-21.435734-1.570133-10.786133-2.628266-21.640533-1.092267-10.820267-1.604267-21.7088Q68.266667 522.820267 68.266667 511.931733t0.546133-21.742933q0.512-10.922667 1.604267-21.742933 1.024-10.820267 2.6624-21.6064 1.604267-10.786133 3.720533-21.435734 2.116267-10.683733 4.778667-21.265066 2.628267-10.581333 5.802666-20.992 3.140267-10.410667 6.826667-20.6848 3.652267-10.24 7.850667-20.309334 4.164267-10.069333 8.8064-19.899733 4.676267-9.864533 9.796266-19.456 5.12-9.591467 10.752-18.944 5.597867-9.352533 11.605334-18.432 6.075733-9.0112 12.561066-17.749333 6.485333-8.772267 13.4144-17.2032 6.894933-8.3968 14.2336-16.4864 7.304533-8.055467 15.018667-15.7696 7.68-7.714133 15.7696-15.018667 8.055467-7.304533 16.4864-14.2336 8.430933-6.894933 17.169067-13.380267t17.8176-12.526933q9.045333-6.075733 18.397866-11.6736 9.3184-5.597867 18.944-10.717867 9.591467-5.12 19.456-9.796266 9.8304-4.642133 19.899734-8.840534 10.069333-4.164267 20.309333-7.850666 10.24-3.652267 20.6848-6.826667 10.4448-3.140267 20.992-5.802667 10.581333-2.628267 21.265067-4.778666 10.683733-2.082133 21.435733-3.6864 10.786133-1.604267 21.640533-2.6624 10.820267-1.092267 21.7088-1.604267Q501.111467 68.266667 512 68.266667q10.922667 0 21.777067 0.546133 10.888533 0.512 21.7088 1.604267 10.8544 1.024 21.6064 2.6624 10.786133 1.604267 21.504 3.720533 10.6496 2.116267 21.230933 4.778667 10.581333 2.628267 20.992 5.802666 10.410667 3.140267 20.6848 6.826667 10.24 3.652267 20.309333 7.850667 10.069333 4.164267 19.899734 8.8064 9.864533 4.642133 19.456 9.796266 9.6256 5.12 18.944 10.717867 9.352533 5.597867 18.432 11.6736 9.045333 6.0416 17.783466 12.526933t17.169067 13.380267q8.430933 6.929067 16.4864 14.2336 8.0896 7.304533 15.7696 15.018667 7.714133 7.714133 15.018667 15.7696 7.338667 8.0896 14.2336 16.4864 6.929067 8.430933 13.4144 17.169066 6.485333 8.772267 12.526933 17.8176t11.639467 18.397867q5.632 9.352533 10.752 18.944t9.796266 19.456q4.642133 9.8304 8.8064 19.899733 4.1984 10.069333 7.850667 20.309334 3.6864 10.24 6.826667 20.6848 3.1744 10.410667 5.802666 20.992 2.6624 10.581333 4.778667 21.265066 2.1504 10.6496 3.754667 21.435734 1.570133 10.786133 2.628266 21.6064 1.092267 10.8544 1.604267 21.7088 0.546133 10.922667 0.546133 21.777066z"
|
||||
fill="#3fa2c7"
|
||||
fill-opacity="0.1"
|
||||
p-id="3777"
|
||||
/>
|
||||
<path
|
||||
d="M71.68 325.973333Q34.133333 414.72 34.133333 511.8976q0 97.211733 37.546667 186.026667 36.283733 85.742933 102.4 151.8592 66.1504 66.116267 151.893333 102.4 88.814933 37.546667 186.026667 37.546666 97.211733 0 186.026667-37.546666 85.742933-36.283733 151.893333-102.4 66.116267-66.116267 102.4-151.893334 37.546667-88.7808 37.546667-185.992533 0-97.1776-37.546667-185.992533-36.283733-85.742933-102.4-151.8592-66.1504-66.116267-151.893333-102.4Q609.211733 34.133333 512 34.133333q-97.211733 0-186.026667 37.546667-85.742933 36.283733-151.893333 102.4-66.116267 66.116267-102.4 151.893333z m62.907733 345.361067Q102.4 595.285333 102.4 511.931733q0-83.319467 32.187733-159.402666 31.061333-73.489067 87.790934-130.184534 56.695467-56.661333 130.184533-87.790933Q428.6464 102.4 512 102.4t159.402667 32.1536q73.5232 31.095467 130.218666 87.790933 56.7296 56.695467 87.790934 130.184534 32.187733 76.0832 32.187733 159.402666 0 83.3536-32.187733 159.402667-31.061333 73.489067-87.790934 130.184533-56.695467 56.7296-130.184533 87.790934-76.0832 32.187733-159.4368 32.187733t-159.402667-32.187733q-73.5232-31.061333-130.218666-87.790934-56.7296-56.661333-87.790934-130.184533z"
|
||||
fill="#3fa2c7"
|
||||
p-id="3778"
|
||||
/>
|
||||
<path
|
||||
d="M584.2944 657.2032H785.066667l-37.7856-16.657067v-248.081066L785.066667 375.466667h-127.931734l-145.646933 145.3056L363.178667 375.466667H238.933333l36.078934 16.9984v248.081066L238.933333 657.2032h199.0656l-35.7376-16.657067v-93.252266l104.106667 138.171733h10.581333l102.741334-138.171733v92.910933l-35.396267 16.9984z"
|
||||
fill="#3fa2c7"
|
||||
p-id="3779"
|
||||
/>
|
||||
</svg>
|
||||
{{ item.totalOrnamentsPrice }}
|
||||
</div>
|
||||
<div
|
||||
class="roll_time"
|
||||
v-if="item.rollStatus === '0'"
|
||||
style="color: rgba(194, 61, 212, 1)"
|
||||
>
|
||||
{{ item.endTime }}
|
||||
</div>
|
||||
<div
|
||||
class="roll_time"
|
||||
v-if="item.rollStatus === '1'"
|
||||
style="color: rgba(78, 78, 78, 1)"
|
||||
>
|
||||
{{ item.endTime }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="room_btn_bg" >
|
||||
<!-- && item.rollType === '0'" -->
|
||||
<div v-if="item.rollStatus === '1'" class="center">
|
||||
<div class="room_btn_yjs center">
|
||||
|
||||
<!-- rollType -->
|
||||
<div style="position: absolute;">已结束</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- && item.rollType === '0' -->
|
||||
<div v-if="item.rollStatus === '0' && item.rollType === '0'">
|
||||
<div class="room_btn_yjs center">
|
||||
|
||||
<div style="position: absolute; margin-left: 15px">查看房间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.rollStatus === '0' && item.rollType === '1'">
|
||||
<div class="room_btn_yjs center">
|
||||
|
||||
<div style="position: absolute; margin-left: 60px">加入房间</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center isnull">
|
||||
{{ rolllength }}
|
||||
<!-- <div class="loader" v-if="isloading">
|
||||
<div class="orbe" style="--index: 0"></div>
|
||||
<div class="orbe" style="--index: 1"></div>
|
||||
<div class="orbe" style="--index: 2"></div>
|
||||
<div class="orbe" style="--index: 3"></div>
|
||||
<div class="orbe" style="--index: 4"></div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRollList, getUserInfo } from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: 0,
|
||||
queryParams: {
|
||||
rollType: 0,
|
||||
rollStatus: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
rollName: "",
|
||||
userId: "",
|
||||
},
|
||||
rolllength: "加载中",
|
||||
rolllist: [],
|
||||
isloading: true,
|
||||
daqweq: "roll",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getlist();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
scroll(e) {
|
||||
if (
|
||||
e.srcElement.scrollTop + e.srcElement.clientHeight >=
|
||||
e.srcElement.scrollHeight
|
||||
) {
|
||||
console.log(1);
|
||||
if (this.rolllength !== "暂无更多Roll房") {
|
||||
this.queryParams.page++;
|
||||
setTimeout(() => {
|
||||
this.getlist();
|
||||
}, 5);
|
||||
}
|
||||
}
|
||||
},
|
||||
playAudio() {
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
handleilltate() {
|
||||
this.$bus.$emit("is_illustrate", true);
|
||||
setTimeout(() => {
|
||||
this.$bus.$emit("nr_illustrate", "roll");
|
||||
}, 100);
|
||||
},
|
||||
handleGo(res) {
|
||||
localStorage.setItem("rollid", res);
|
||||
this.$router.push({
|
||||
name: "rolldetial",
|
||||
// query:{
|
||||
// obj:JSON.stringify(item)
|
||||
// }
|
||||
});
|
||||
},
|
||||
handletype(res) {
|
||||
this.queryParams.rollType = res;
|
||||
this.queryParams.page = 1;
|
||||
this.rolllist = [];
|
||||
this.getlist();
|
||||
},
|
||||
handleserch() {
|
||||
this.rolllist = [];
|
||||
this.queryParams.page = 1;
|
||||
this.getlist();
|
||||
},
|
||||
getMyList() {
|
||||
this.rolllist = [];
|
||||
getUserInfo().then((res) => {
|
||||
this.queryParams.userId = res.data.data.userId;
|
||||
this.getlist();
|
||||
// console.log(res);
|
||||
});
|
||||
// getMyPartRollList().then(res => {
|
||||
// this.rolllist = res.data.rows;
|
||||
// this.isloading = false;
|
||||
// });
|
||||
},
|
||||
handlemy() {
|
||||
this.type = 2;
|
||||
this.rolllist = [];
|
||||
this.queryParams.page = 1;
|
||||
this.queryParams.rollStatus = "";
|
||||
this.getMyList();
|
||||
},
|
||||
handleChange(res) {
|
||||
this.type = res;
|
||||
this.rolllist = [];
|
||||
this.queryParams.rollStatus = res;
|
||||
this.queryParams.userId = "";
|
||||
this.getlist();
|
||||
},
|
||||
getlist() {
|
||||
this.isloading = true;
|
||||
getRollList(this.queryParams).then((res) => {
|
||||
console.log("getRollList", res);
|
||||
if (res.data.total > this.rolllist.length) {
|
||||
this.rolllist.push(...res.data.rows);
|
||||
this.rolllength = "下拉加载更多";
|
||||
this.isloading = false;
|
||||
} else {
|
||||
this.rolllength = "暂无更多Roll房";
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.roll_type_serch {
|
||||
width: 100%;
|
||||
}
|
||||
.roll_type {
|
||||
width: 34%;
|
||||
height: 43px;
|
||||
background: url("../../assets/pinxiangBottom_top.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: rgba(114, 116, 119, 1);
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
|
||||
font-size: 10px;
|
||||
}
|
||||
.type_btn {
|
||||
width: 49%;
|
||||
height: 35px;
|
||||
// border-radius: 70px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
// border-radius: 50px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background: url("../../assets/pinxiangBottom_text_bg.png") no-repeat center
|
||||
center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.roll_serch {
|
||||
width: 64%;
|
||||
height: 42px;
|
||||
padding: 0 2% 0 5%;
|
||||
background: url('../../assets/roll_serch.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 8px;
|
||||
// border: 1px solid #40649e;
|
||||
// border-radius: 70px 70px 70px 70px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.icon{
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
|
||||
font-size: 11px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 35px;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
background-color: transparent;
|
||||
text-indent: 10px;
|
||||
outline: none;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.roll_serch_full {
|
||||
width: 96% !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.roll_status {
|
||||
width: 100%;
|
||||
background: url('../../assets/roll_status.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 52px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
margin-bottom:20px;
|
||||
.status_btn {
|
||||
margin-top: 3%;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
width: 20%;
|
||||
height: 35px;
|
||||
margin-right: 2%;
|
||||
|
||||
opacity: 1;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: url('../../assets/status_btn_active.png') no-repeat center;
|
||||
background-size: 100% 100%;
|
||||
color: #3a97e4;
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.roll_room_list {
|
||||
width: 100%;
|
||||
height: 570px;
|
||||
overflow-y: auto;
|
||||
// border: #c23dd4 1px solid;
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #3fa2c7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
.finish {
|
||||
border: 2px solid #4e4e4e;
|
||||
}
|
||||
.anchor {
|
||||
border: 2px solid #3fa2c7;
|
||||
}
|
||||
.official {
|
||||
// border: 2px solid #c23dd4;
|
||||
}
|
||||
.roll_room {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 300px;
|
||||
margin-top: 2%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
// border-radius: 15px;
|
||||
position: relative;
|
||||
background:url('../../assets/roll-official-bg-DRp1UF5D.png') no-repeat top center;
|
||||
background-size: 100% 100%;
|
||||
transition: all 0.2s linear;
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
.room_type{
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.room_weapon {
|
||||
width: 70%;
|
||||
margin:0 auto;
|
||||
margin-top: 3%;
|
||||
.room_weapon_back {
|
||||
width: 100%;
|
||||
height: 69px;
|
||||
overflow: hidden;
|
||||
overflow-x: scroll;
|
||||
@media (max-width: 550px) {
|
||||
height: 41px;
|
||||
}
|
||||
.weapon_bg {
|
||||
margin-right: 2%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #323436;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
@media (max-width: 550px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
img {
|
||||
margin: 0 auto;
|
||||
@media (max-width: 550px) {
|
||||
width: 35px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.room_weapon_back::-webkit-scrollbar {
|
||||
background: none;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.room_weapon_back::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: #323436;
|
||||
}
|
||||
}
|
||||
.room_title {
|
||||
padding: 0 2%;
|
||||
height: 70px;
|
||||
background: rgba(50, 52, 54, 0.2);
|
||||
margin-top: 30px;
|
||||
@media (max-width: 550px) {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.room_type {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
background: #323436;
|
||||
border-radius: 70px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.room_name {
|
||||
// width: 137px;
|
||||
max-width: 200px;
|
||||
@media (max-width: 550px) {
|
||||
max-width: 250px;
|
||||
}
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.room_btn_bg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 2px;
|
||||
font-size: 21px;
|
||||
line-height: 70px;
|
||||
transform: translateX(-50%);
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
bottom: 2px;
|
||||
}
|
||||
.room_btn_yjs {
|
||||
position: relative;
|
||||
width: 128px;
|
||||
height: 48px;
|
||||
background: url('../../assets/room_btn_yjs.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
// bottom: 10px;
|
||||
.icon {
|
||||
width: 190px;
|
||||
height: 70px;
|
||||
@media (max-width: 550px) {
|
||||
width: 185px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.room_btnn_yjs {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
.room_detial {
|
||||
margin-top: 3%;
|
||||
.roll_time {
|
||||
font-size: 13px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.detial_public {
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@media (max-width: 550px) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.isnull {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
font-size: 12px;
|
||||
color: #878787;
|
||||
}
|
||||
.home {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: 100vh;
|
||||
// background: #0e1227c4;
|
||||
padding: 0 2%;
|
||||
}
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
div:first-child {
|
||||
}
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,459 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="header_top">
|
||||
<handleback></handleback>
|
||||
<div >兑换红包</div>
|
||||
<div>12322</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {} from "@/api/index";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
kami:''
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pay {
|
||||
margin: 0 auto;
|
||||
@media (max-width: 550px) {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
.home {
|
||||
margin: 0 auto;
|
||||
width: 95%;
|
||||
|
||||
.header_top {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
div:first-child {
|
||||
}
|
||||
|
||||
div:last-child {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-decoration: underline;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab {
|
||||
// width: 399px;
|
||||
width: 300px;
|
||||
height: 42px;
|
||||
background: #323436;
|
||||
border-radius: 50px 50px 50px 50px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
transition: all 0.3s linear;
|
||||
|
||||
color: #727477;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
@media (max-width: 550px) {
|
||||
// width: 285px;
|
||||
width: 215px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
// border: 1px solid red;
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 5px;
|
||||
@media (max-width: 550px) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slider {
|
||||
position: absolute;
|
||||
width: 99px;
|
||||
height: 35px;
|
||||
background: linear-gradient(-90deg, #3a97e4 0%, #3fa2c7 100%);
|
||||
border-radius: 70px;
|
||||
transition: left 0.2s ease-in-out;
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #fff;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #fff;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header {
|
||||
margin-top: 29px;
|
||||
}
|
||||
.card {
|
||||
width: 147px;
|
||||
height: 98px;
|
||||
background: #323436;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
color: #727477;
|
||||
font-weight: 700;
|
||||
font-size: 35px;
|
||||
// padding-top: 20px;
|
||||
@media (max-width: 550px) {
|
||||
// padding-top: 20px;
|
||||
|
||||
font-size: 25px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
.prz {
|
||||
width: 98px;
|
||||
height: 35px;
|
||||
background: linear-gradient(90deg, #c23dd4 0%, #6f4fff 100%);
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
@media (max-width: 550px) {
|
||||
width: 70px;
|
||||
height: 25px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin: 0;
|
||||
@media (max-width: 550px) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main_center_bottom {
|
||||
margin-top: 21px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.select {
|
||||
background: #3a97e4 !important;
|
||||
border: 2px solid #3a97e4 !important;
|
||||
}
|
||||
div:first-child {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #727477;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 3px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 1px solid #727477;
|
||||
}
|
||||
}
|
||||
div:last-child {
|
||||
width: 95%;
|
||||
color: #ffffff;
|
||||
font-size: 16.8px;
|
||||
text-align: left;
|
||||
word-spacing: -2px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: #585a60;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
opacity: 1;
|
||||
margin: 0 auto;
|
||||
margin-top: 29px;
|
||||
|
||||
font-size: 21px;
|
||||
padding: 0 66px 0 33px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 20px;
|
||||
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
padding: 0 47px 0 24px;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.2) 0%,
|
||||
rgba(114, 116, 119, 0.1) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
margin: 0 auto;
|
||||
margin-top: 14px;
|
||||
|
||||
font-size: 25px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.actives {
|
||||
color: #fff;
|
||||
|
||||
background: linear-gradient(
|
||||
-90deg,
|
||||
rgba(58, 151, 228, 0.3) 0%,
|
||||
rgba(37, 244, 132, 0.3) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid;
|
||||
// border-image: linear-gradient(
|
||||
// 270deg,
|
||||
// rgba(37.00000159442425, 244.0000006556511, 132.0000073313713, 1),
|
||||
// rgba(58.00000034272671, 151.00000619888306, 228.0000016093254, 1)
|
||||
// )
|
||||
// 1 1;
|
||||
border-left-color: rgba(37, 244, 132, 1);
|
||||
border-right-color: rgba(58, 151, 228, 1);
|
||||
border-top-color: rgba(37, 244, 132, 1);
|
||||
border-bottom-color: rgba(58, 151, 228, 1);
|
||||
}
|
||||
.activess {
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
#1f3a58 0%,
|
||||
rgba(37, 244, 132, 0.1) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.footer {
|
||||
margin-top: 40px;
|
||||
font-size: 18px;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.footer_x {
|
||||
width: 329px;
|
||||
margin: 0 auto;
|
||||
color: #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
width: 237px;
|
||||
}
|
||||
.footer_x_u {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #3fa2c7;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
.footer_d {
|
||||
margin: 0 auto;
|
||||
|
||||
width: 95px;
|
||||
color: #727477;
|
||||
@media (max-width: 550px) {
|
||||
width: 71px;
|
||||
}
|
||||
.footer_d_u {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #727477;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
.out_II {
|
||||
width: 525px;
|
||||
height: 100vh;
|
||||
transform: translateX(-50%);
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
z-index: 2;
|
||||
@media (max-width: 550px) {
|
||||
width: 100%;
|
||||
}
|
||||
.out_II_I {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
height: 315px;
|
||||
background: #101115;
|
||||
border-radius: 23px 23px 23px 23px;
|
||||
margin-top: 211px;
|
||||
overflow: hidden;
|
||||
justify-content: space-around;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 150px;
|
||||
height: 251px;
|
||||
}
|
||||
.out_II_I_I {
|
||||
font-size: 28px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.out_II_I_II {
|
||||
width: 89%;
|
||||
height: 56px;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #323436;
|
||||
border-radius: 35px 35px 35px 35px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 21px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
text-align: center;
|
||||
font-size: 21px;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_II_I_III {
|
||||
width: 89%;
|
||||
height: 56px;
|
||||
input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #323436;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 21px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@media (max-width: 550px) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
input::-webkit-input-placeholder {
|
||||
text-align: center;
|
||||
font-size: 21px;
|
||||
color: #fff;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_II_I_IIII {
|
||||
width: 89%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-size: 21px;
|
||||
|
||||
.btn_c {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
|
||||
background: linear-gradient(
|
||||
360deg,
|
||||
rgba(114, 116, 119, 0.5) 0%,
|
||||
rgba(114, 116, 119, 0.25) 100%
|
||||
);
|
||||
opacity: 1;
|
||||
border: 1px solid #727477;
|
||||
@media (max-width: 550px) {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.btn_s {
|
||||
width: 196px;
|
||||
height: 42px;
|
||||
background: #1f3a58;
|
||||
|
||||
opacity: 1;
|
||||
border: 1px solid #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.out_II_I::before {
|
||||
content: ""; /*必须设置content属性*/
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
-222deg,
|
||||
#1f3a58 0%,
|
||||
rgba(32, 29, 48, 0) 40%,
|
||||
rgba(248, 125, 81, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div>任务中心</div>
|
||||
|
||||
<div class="main">
|
||||
<div
|
||||
class="main_body"
|
||||
v-for="(item, index) in taskdetial"
|
||||
:key="index"
|
||||
:style="{ 'background-image': `url(${item.placardUrl})` }"
|
||||
>
|
||||
<div class="mian_top">{{ item.beginTime }} 天后结束</div>
|
||||
<div class="mian_center">{{ item.taskDescribe }}</div>
|
||||
<div class="main_bottom space_between">
|
||||
<div class="mian_bottom_left space_around">
|
||||
<div class="mian_bottom_left_icon" v-if="item.type == 1">
|
||||
<svg
|
||||
t="1708151121750"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4150"
|
||||
>
|
||||
<path
|
||||
d="M64 756.138667l734.165333 1.194666v100.778667c-0.128 88.704-69.376 161.109333-156.458666 165.674667l-8.490667 0.213333H228.949333a164.48 164.48 0 0 1-117.077333-49.024 166.357333 166.357333 0 0 1-47.616-107.946667L64 856.917333v-100.736z m318.848 78.336a68.096 68.096 0 0 0-14.592 73.941333 67.413333 67.413333 0 0 0 62.293333 41.856 67.882667 67.882667 0 0 0 25.813334-130.517333 67.157333 67.157333 0 0 0-73.514667 14.72zM634.154667 40.96c-25.557333 34.261333-40.704 76.8-40.704 122.88 0 113.109333 91.178667 204.8 203.648 204.8l1.066666-0.042667v327.765334H64V206.848C64 115.242667 137.813333 40.96 228.949333 40.96h405.205334zM247.893333 410.752c-1.92 0-1.92 0-3.370666 4.522667-2.517333 7.936-2.517333 7.936-31.914667 87.466666-27.136 73.6-27.136 73.6-27.136 76.714667 0 3.498667 0 3.498667 18.346667 3.498667 23.296 0 23.296 0 27.392-0.981334 3.242667-0.853333 3.242667-0.853333 5.546666-10.794666 2.474667-10.922667 2.474667-10.922667 4.522667-12.842667 1.322667-1.066667 1.322667-1.066667 21.76-1.066667 30.208 0 30.208 0 32.128 0.853334 2.304 1.152 2.304 1.152 6.4 18.432 1.024 4.565333 1.024 4.565333 5.12 5.418666 4.906667 0.938667 4.906667 0.938667 22.101333 0.938667 18.688 0 18.688 0 22.314667-0.938667 2.986667-0.853333 2.986667-0.853333 2.986667-2.986666 0-3.242667 0-3.242667-28.586667-77.525334-28.416-73.813333-28.416-73.813333-34.304-86.4-1.92-3.968-1.92-3.968-4.181333-3.968-3.114667 0-3.114667 0-9.386667 0.426667-6.357333 0.426667-6.357333 0.426667-9.6 0.426667-3.328 0-3.328 0-10.112-0.597334l-4.138667-0.341333c-3.712-0.256-3.712-0.256-5.888-0.256z m162.474667 2.858667c-31.914667 0-31.914667 0-41.258667 1.194666-2.901333 0.384-2.901333 0.384-3.498666 1.706667l-0.128 1.066667 0.128 1.706666c3.242667 41.472 3.242667 41.472 3.242666 79.146667 0 11.093333 0 11.093333-0.298666 31.530667l-0.256 17.066666c-0.298667 20.352-0.298667 20.352-0.298667 31.445334 0 3.498667 0 3.498667 3.498667 3.498666 7.296 0 7.296 0 21.973333 0.426667 14.634667 0.426667 14.634667 0.426667 21.930667 0.426667 2.56 0 2.56 0 2.56-2.773334 0-5.418667 0-5.418667-1.109334-16.341333l-0.469333-5.12c-0.597333-7.168-0.597333-7.168-0.597333-11.306667 0-4.437333 0-4.437333 5.12-4.437333 4.821333 0 4.821333 0 14.506666 0.554667 9.642667 0.512 9.642667 0.512 14.421334 0.512 28.714667 0 28.714667 0 45.013333-19.072 15.232-18.005333 15.232-18.005333 15.232-47.018667 0-28.330667 0-28.330667-17.749333-45.866667-17.408-17.024-17.408-17.024-45.824-17.877333-17.28-0.426667-17.28-0.426667-36.138667-0.426667z m160.213333 0c-31.914667 0-31.914667 0-41.301333 1.194666-2.858667 0.384-2.858667 0.384-3.413333 1.706667l-0.170667 1.066667 0.128 1.706666c3.242667 41.472 3.242667 41.472 3.242667 79.146667 0 11.093333 0 11.093333-0.298667 31.530667l-0.256 17.066666c-0.298667 20.352-0.298667 20.352-0.298667 31.445334 0 3.498667 0 3.498667 3.498667 3.498666 7.296 0 7.296 0 21.930667 0.426667 14.634667 0.426667 14.634667 0.426667 21.973333 0.426667 2.517333 0 2.517333 0 2.517333-2.773334 0-4.053333 0-4.053333-0.597333-11.221333l-0.469333-5.12c-1.109333-10.88-1.109333-10.88-1.109334-16.426667 0-4.437333 0-4.437333 5.162667-4.437333 4.821333 0 4.821333 0 14.506667 0.554667 9.642667 0.512 9.642667 0.512 14.421333 0.512 28.672 0 28.672 0 45.013333-19.072 15.232-18.005333 15.232-18.005333 15.232-47.018667 0-28.330667 0-28.330667-17.749333-45.866667-17.408-17.024-17.408-17.024-45.866667-17.877333-17.28-0.426667-17.28-0.426667-36.096-0.426667z m-301.568 56.021333c2.517333 4.821333 2.517333 4.821333 7.936 22.101333 5.504 17.92 5.504 17.92 5.504 21.845334 0 1.066667 0 1.066667-0.256 1.706666-0.853333 1.877333-0.853333 1.877333-8.746666 1.877334-8.533333 0-8.533333 0-12.245334-0.213334-7.210667-0.256-7.210667-0.256-7.210666-2.432 0-3.242667 0-3.242667 6.485333-21.930666 5.973333-17.664 5.973333-17.664 8.533333-22.912z m165.973334-17.877333c27.221333 0 27.221333 0 27.221333 27.989333 0 26.282667 0 26.282667-26.026667 26.282667-21.589333 0-21.589333 0-21.589333-2.432 0-3.712 0-3.712-0.298667-10.965334-0.341333-7.253333-0.341333-7.253333-0.341333-10.965333 0-26.154667 0-26.154667 0.853333-27.733333 0.981333-2.133333 0.981333-2.133333 20.181334-2.133334z m160.170666 0c27.264 0 27.264 0 27.264 27.989333 0 26.282667 0 26.282667-26.026666 26.282667-21.632 0-21.632 0-21.632-2.432 0-3.712 0-3.712-0.298667-10.965334l-0.256-8.106666v-2.858667c0-26.154667 0-26.154667 0.810667-27.733333 0.938667-2.133333 0.938667-2.133333 20.138666-2.133334zM797.098667 0C887.04 0 960 73.386667 960 163.84s-72.96 163.84-162.901333 163.84c-89.984 0-162.901333-73.386667-162.901334-163.84S707.157333 0 797.098667 0z m32.384 81.92H776.533333a16.042667 16.042667 0 0 0-16 16.085333v69.12h-36.778666a8.192 8.192 0 0 0-5.973334 13.738667l79.232 86.272a8.106667 8.106667 0 0 0 11.946667 0L888.32 180.906667a8.192 8.192 0 0 0-5.973333-13.696h-36.821334v-69.12a16.042667 16.042667 0 0 0-16-16.128z"
|
||||
fill="#3A97E4"
|
||||
p-id="4151"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mian_bottom_left_icon" v-else>
|
||||
<svg
|
||||
t="1708151380258"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4299"
|
||||
>
|
||||
<path
|
||||
d="M512 42.666667c212.053333 0 384 175.104 384 391.082666a393.898667 393.898667 0 0 1-100.394667 263.765334l-9.386666 10.069333-245.205334 260.266667a38.058667 38.058667 0 0 1-56.490666 1.706666h-0.085334l-242.261333-257.536A393.557333 393.557333 0 0 1 128 433.749333C128 217.770667 299.946667 42.666667 512 42.666667z m0 213.333333a192 192 0 1 0 0 384 192 192 0 0 0 0-384z m32 85.333333v96H640v64h-160V341.333333h64z"
|
||||
fill="#C23DD4"
|
||||
p-id="4300"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="mian_bottom_right center" @click="handleget(item)">
|
||||
<div
|
||||
v-if="item.completionState == 1"
|
||||
class="mian_bottom_right_icon"
|
||||
>
|
||||
<svg
|
||||
t="1708151448051"
|
||||
class="icon"
|
||||
viewBox="0 0 3973 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4452"
|
||||
data-spm-anchor-id="a313x.manage_type_myprojects.0.i16.63743a81JjJsEM"
|
||||
>
|
||||
<path
|
||||
d="M0 1024h3778.56V0H501.76L0 1024z"
|
||||
fill="#3a97e4"
|
||||
fill-opacity="0.2"
|
||||
p-id="4453"
|
||||
data-spm-anchor-id="a313x.manage_type_myprojects.0.i15.63743a81JjJsEM"
|
||||
class="selected"
|
||||
/>
|
||||
<path
|
||||
d="M194.56 1024h3778.56V0H696.32L194.56 1024z"
|
||||
fill="#3a97e4"
|
||||
p-id="4454"
|
||||
data-spm-anchor-id="a313x.manage_type_myprojects.0.i14.63743a81JjJsEM"
|
||||
class="selected"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else-if="item.type == 2" class="mian_bottom_right_icon">
|
||||
<svg
|
||||
t="1708152049249"
|
||||
class="icon"
|
||||
viewBox="0 0 3973 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4694"
|
||||
>
|
||||
<path
|
||||
d="M0 1024h3778.56V0H501.76L0 1024z"
|
||||
fill="#C23DD4"
|
||||
fill-opacity="0.2"
|
||||
p-id="4695"
|
||||
/>
|
||||
<path
|
||||
d="M194.56 1024h3778.56V0H696.32L194.56 1024z"
|
||||
fill="#C23DD4"
|
||||
p-id="4696"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-else class="mian_bottom_right_icon">
|
||||
<svg
|
||||
t="1710059812078"
|
||||
class="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="7182"
|
||||
width="200"
|
||||
height="200"
|
||||
>
|
||||
<path
|
||||
d="M744.448 232.448v24.576L727.04 271.36l-22.528 17.408H356.864V180.224h388.096l-0.512 52.224c0-0.512 0-0.512 0 0"
|
||||
fill="#38CEB1"
|
||||
p-id="7183"
|
||||
></path>
|
||||
<path
|
||||
d="M924.16 855.04c0 16.896-54.784 30.72-71.68 30.72h-619.52c-16.896 0-30.72-13.824-30.72-30.72V275.968c0-16.896 13.824-30.72 30.72-30.72h44.032V250.88c0 22.528 18.432 40.96 40.96 40.96h388.096c22.528 0 40.96-18.432 40.96-40.96v-5.632h105.472c16.896 0 30.72 13.824 30.72 30.72l40.96 26.624V855.04z"
|
||||
fill="#38CEB1"
|
||||
p-id="7184"
|
||||
></path>
|
||||
<path
|
||||
d="M903.68 719.872m-20.48 0a20.48 20.48 0 1 0 40.96 0 20.48 20.48 0 1 0-40.96 0Z"
|
||||
fill="#231815"
|
||||
p-id="7185"
|
||||
></path>
|
||||
<path
|
||||
d="M903.68 773.632c-11.264 0-20.48 9.216-20.48 20.48v61.44c0 16.896-13.824 30.72-30.72 30.72h-680.96c-16.896 0-30.72-13.824-30.72-30.72V245.248c0-16.896 13.824-30.72 30.72-30.72h105.472v36.864c0 22.528 18.432 40.96 40.96 40.96h388.096c22.528 0 40.96-18.432 40.96-40.96v-36.864h105.472c16.896 0 30.72 13.824 30.72 30.72v397.824c0 11.264 9.216 20.48 20.48 20.48s20.48-9.216 20.48-20.48V245.248c0-39.424-32.256-71.68-71.68-71.68h-105.472v-36.864c0-22.528-18.432-40.96-40.96-40.96H318.464c-22.528 0-40.96 18.432-40.96 40.96v36.864H171.52c-39.424 0-71.68 32.256-71.68 71.68V855.04c0 39.424 32.256 71.68 71.68 71.68h680.96c39.424 0 71.68-32.256 71.68-71.68v-61.44c0-10.752-9.216-19.968-20.48-19.968zM318.464 137.216H706.56V250.88H318.464V137.216z"
|
||||
fill="#231815"
|
||||
p-id="7186"
|
||||
></path>
|
||||
<path
|
||||
d="M751.616 401.92l-290.304 290.304-143.36-143.36c-8.192-8.192-20.992-8.192-29.184 0-8.192 8.192-8.192 20.992 0 29.184l143.36 143.36c8.192 8.192 18.432 11.776 29.184 11.776 10.24 0 20.992-4.096 29.184-11.776l290.304-290.304c8.192-8.192 8.192-20.992 0-29.184-8.192-8.192-20.992-8.192-29.184 0z"
|
||||
fill="#231815"
|
||||
p-id="7187"
|
||||
></path>
|
||||
</svg>
|
||||
<!-- <svg
|
||||
t="1708152049249"
|
||||
class="icon"
|
||||
viewBox="0 0 3973 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="4694"
|
||||
>
|
||||
<path
|
||||
d="M0 1024Eh3778.56V0H501.76L0 1024z"
|
||||
fill="#4E4E4E"
|
||||
fill-opacity="0.2"
|
||||
p-id="4695"
|
||||
/>
|
||||
// d= M0 1024Eh3778.56V0H501.76L0 1024z 图标报错
|
||||
<path
|
||||
d="M194.56 1024h3778.56V0H696.32L194.56 1024z"
|
||||
fill="#4E4E4E"
|
||||
p-id="4696"
|
||||
/>
|
||||
</svg> -->
|
||||
</div>
|
||||
<div class="mian_bottom_right_font">
|
||||
<div v-if="item.completionState == 1">领取</div>
|
||||
<div v-if="item.completionState == 2">待完成</div>
|
||||
<div v-if="item.completionState == 3">超时</div>
|
||||
<div v-if="item.completionState == 4">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">*任务完成后5-10分钟才可领取奖励</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { gettaskList, claimTasks } from "@/api/index";
|
||||
// import { creditsRank } from "@/api/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
taskdetial: [
|
||||
// {
|
||||
// imgUrl:
|
||||
// "https://hbimg.huaban.com/7ee3fd0fcae95a3ece1464e9e99a83c35f8dcca481cdb-NTecIK_fw658",
|
||||
// endTime: 365,
|
||||
// describe:
|
||||
// "下载app且完成一笔单笔充值100M币以上金币的玩家，可领取10M币。",
|
||||
// // 1 待领取 2 已领取 待完成 0 已完成
|
||||
// status: 1,
|
||||
// taskname: "下载福利",
|
||||
// type: 1,
|
||||
// },
|
||||
// {
|
||||
// imgUrl: "https://pic2.52pk.com/files/171228/7229806_151902_5671.jpg",
|
||||
// endTime: 365,
|
||||
// describe: "今日消耗000M币金币，领取000M币金币。",
|
||||
// // 1 待领取 2 已领取 待完成 0 已完成
|
||||
// status: 1,
|
||||
// taskname: "今日消耗",
|
||||
// type: 2,
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.gettask();
|
||||
},
|
||||
methods: {
|
||||
playAudio(){
|
||||
this.$store.commit("playAudio");
|
||||
},
|
||||
gettask() {
|
||||
gettaskList().then((res) => {
|
||||
console.log('gettaskList',res);
|
||||
this.taskdetial = res.data;
|
||||
});
|
||||
},
|
||||
handleget(res) {
|
||||
// res.status = 2;
|
||||
claimTasks(res.taskId).then((resa) => {
|
||||
if (resa.data.code == 200) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "领取成功",
|
||||
customClass: "log_success",
|
||||
});
|
||||
this.gettask();
|
||||
} else if(resa.data.code==500) {
|
||||
this.$message({
|
||||
type: "warning",
|
||||
message: resa.data.msg,
|
||||
customClass: "log_warning",
|
||||
});
|
||||
this.gettask();
|
||||
}
|
||||
|
||||
});
|
||||
setTimeout(() => {
|
||||
res.status = 0;
|
||||
clearTimeout();
|
||||
}, 5000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main_body {
|
||||
width: 100%;
|
||||
margin-top: 28px;
|
||||
height: 168px;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// position: relative;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 20px;
|
||||
|
||||
height: 120px;
|
||||
}
|
||||
.mian_top {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
// position: absolute;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 10px;
|
||||
margin-top: 11px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
.mian_center {
|
||||
margin-top: 13px;
|
||||
margin-left: 63px;
|
||||
width: 247px;
|
||||
// height: 36px;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 10px;
|
||||
margin-left: 48px;
|
||||
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
.main_bottom {
|
||||
margin-top: 29px;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
background: rgba(50, 52, 54, 0.2);
|
||||
padding-left: 14px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 24px;
|
||||
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.mian_bottom_left {
|
||||
width: 126px;
|
||||
height: 35px;
|
||||
background: #323436;
|
||||
border-radius: 70px 70px 70px 70px;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
padding: 0 10px;
|
||||
@media (max-width: 550px) {
|
||||
width: 90px;
|
||||
height: 25px;
|
||||
|
||||
font-size: 10px;
|
||||
}
|
||||
.mian_bottom_left_icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
@media (max-width: 550px) {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mian_bottom_right {
|
||||
width: 188px;
|
||||
height: 42px;
|
||||
position: relative;
|
||||
right: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
@media (max-width: 550px) {
|
||||
height: 30px;
|
||||
width: 134px;
|
||||
}
|
||||
.mian_bottom_right_icon {
|
||||
position: absolute;
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.mian_bottom_right_font {
|
||||
position: relative;
|
||||
// transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
font-size: 21px;
|
||||
@media (max-width: 550px) {
|
||||
font-size: 15px;
|
||||
left: 21%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home {
|
||||
width: 95%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bottom {
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
font-size: 14px;
|
||||
color: #3fa2c7;
|
||||
@media (max-width: 550px) {
|
||||
margin-top: 25px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,44 @@
|
||||
import vue from 'vue'
|
||||
|
||||
// 这里就是我们刚刚创建的那个静态组件
|
||||
import toastComponent from './toast.vue'
|
||||
|
||||
// 返回一个 扩展实例构造器
|
||||
const ToastConstructor = vue.extend(toastComponent)
|
||||
const toastDom = new ToastConstructor({
|
||||
el: document.createElement('div'),
|
||||
data() {
|
||||
return {
|
||||
text:'',
|
||||
showWrap:true, // 是否显示组件
|
||||
showContent:true,
|
||||
duration:0 // 作用:在隐藏组件之前,显示隐藏动画
|
||||
}
|
||||
}
|
||||
})
|
||||
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
|
||||
function showToast(text, duration=2000) {
|
||||
toastDom.text=text
|
||||
toastDom.duration=duration
|
||||
toastDom.showWrap=true
|
||||
toastDom.showContent=true
|
||||
document.body.appendChild(toastDom.$el)
|
||||
}
|
||||
function hideToast() {
|
||||
|
||||
|
||||
// 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
|
||||
setTimeout(() => {toastDom.showContent = false} ,toastDom.duration - 2250)
|
||||
// 过了 duration 时间后隐藏整个组件
|
||||
setTimeout(() => {toastDom.showWrap = false} ,toastDom.duration)
|
||||
}
|
||||
|
||||
// 注册为全局组件的函数
|
||||
function registryToast() {
|
||||
// 将组件注册到 vue 的 原型链里去,
|
||||
// 这样就可以在所有 vue 的实例里面使用 this.$toast()
|
||||
vue.prototype.$toast = showToast
|
||||
vue.prototype.$hide = hideToast
|
||||
}
|
||||
|
||||
export default registryToast
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.wrap{
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top:50%;
|
||||
background: rgba(0, 0, 0, 0.623);
|
||||
padding: 30px;
|
||||
border-radius: 5px;
|
||||
transform: translate(-50%,-50%);
|
||||
color:#fff;
|
||||
}
|
||||
.fadein {
|
||||
animation: animate_in 0.25s;
|
||||
}
|
||||
.fadeout {
|
||||
animation: animate_out 0.25s;
|
||||
opacity: 0;
|
||||
}
|
||||
@keyframes animate_in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes animate_out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100%{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user