Initial commit
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user