Commit 0eb1adfa authored by 毛线's avatar 毛线

优化交互

parent b5d502b2
<template> <template>
<div class="bg"> <div class="bg">
<img src="@/assets/images/temp/bg/fish/background.png" alt="" class="bg-img"> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png" alt="" class="bg-img">
<!-- 背景 --> <!-- 背景 -->
</div> </div>
</template> </template>
......
<template>
<div class="center-img-box">
<div class="bg">
<img class="text-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Golden%20Koi%20Club.png" alt="">
</div>
<img class="icon right" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png" alt="">
<img class="icon left" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png" alt="">
</div>
</template>
<script>
export default {
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.center-img-box {
position: relative;
.bg {
background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_group.png);
background-size: 100% 100%;
height: 100%;
width: 100%;
overflow: auto;
.text-img {
height: 57px;
display: block;
margin: auto;
margin-top: 8px;
}
}
.icon {
position: absolute;
height: 60px;
top: 0;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
}
</style>
<template> <template>
<div class="header"> <div class="header">
<div class="left-block"> <div class="left-block">
<img class="left-block-bg1" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Pattern.png" alt="">
<img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png" alt="" class="logo"> <img src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png" alt="" class="logo">
<div class="data"> <div class="data">
{{ time | filterData }} {{ time | filterData }}
...@@ -12,24 +13,24 @@ ...@@ -12,24 +13,24 @@
<div class="bar"> <div class="bar">
<div class="input-box"> <div class="input-box">
<div class="input-img"> <div class="input-img">
<img src="./static/gold-coin.png" alt=""> <img src="@/assets/images/temp/header/gold-coin.png" alt="">
</div> </div>
<div class="value"> <div class="value">
{{ userInfo.goldCredit }} {{ userInfo.goldCredit }}
</div> </div>
</div> </div>
<div class="input-box"> <div class="input-box">
<div class="input-img" style="width: 54px; top: -12px; left: -8px"> <div class="input-img" style="width: 54px; top: -10px; left: -8px">
<img src="./static/red-coin.png" alt=""> <img src="@/assets/images/temp/header/red-coin.png" alt="">
</div> </div>
<div class="value"> <div class="value">
{{ userInfo.redCredit }} {{ userInfo.redCredit }}
</div> </div>
</div> </div>
<div class="center-bg"/> <CenterBox class="center-bg"/>
<div class="profile btn" @click="click().profile()"> <div class="profile btn" @click="click().profile()">
<img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img"> <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
<img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img"> <img v-else src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head1.png" alt="" class="profile-img">
<template v-if="userInfo.id"> <template v-if="userInfo.id">
<img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img"> <img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img">
</template> </template>
...@@ -60,6 +61,8 @@ import dayjs from 'dayjs' ...@@ -60,6 +61,8 @@ import dayjs from 'dayjs'
import screenfull from 'screenfull' import screenfull from 'screenfull'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Confirm from '@/components/dialog/confirm' import Confirm from '@/components/dialog/confirm'
import CenterBox from './components/center-box'
export default { export default {
filters: { filters: {
filterData(time) { filterData(time) {
...@@ -71,6 +74,7 @@ export default { ...@@ -71,6 +74,7 @@ export default {
}, },
components: { components: {
Confirm, Confirm,
CenterBox,
}, },
data() { data() {
// 卡片 // 卡片
...@@ -158,6 +162,8 @@ export default { ...@@ -158,6 +162,8 @@ export default {
params, params,
}).then(({ data }) => { }).then(({ data }) => {
console.log('退出游戏页面') console.log('退出游戏页面')
}).catch(() => {
location.reload()
}) })
}, },
}, },
...@@ -175,10 +181,14 @@ export default { ...@@ -175,10 +181,14 @@ export default {
left: 0; left: 0;
top: 0; top: 0;
width: 170px; width: 170px;
height: 140px; height: 139px;
background-image: url(./static/left-block-bg.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_logo_01.png?t=1);
background-size: 100% 100%; background-size: 100% 100%;
z-index: 1; z-index: 1;
.left-block-bg1 {
position: absolute;
width: 130px;
}
.logo { .logo {
width: 136px; width: 136px;
margin: 8px 0 0; margin: 8px 0 0;
...@@ -245,12 +255,12 @@ export default { ...@@ -245,12 +255,12 @@ export default {
.input-box { .input-box {
padding-left: 28px; padding-left: 28px;
position: relative; position: relative;
margin-top: 20px; margin-top: 18px;
margin-left: 16px; margin-left: 16px;
.input-img { .input-img {
position: absolute; position: absolute;
left: 0; left: 0;
top: -8px; top: -6px;
width: 44px; width: 44px;
height: 44px; height: 44px;
img { img {
...@@ -258,21 +268,18 @@ export default { ...@@ -258,21 +268,18 @@ export default {
} }
} }
.value { .value {
height: 28px;
width: 90px; width: 90px;
background-image: url(./static/value-bg.png); background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%202.png);
background-size: 100% 100%; background-size: 100% 100%;
padding: 6px;
font-size: 14px; font-size: 14px;
padding-right: 8px; padding-right: 8px;
text-align: right; text-align: right;
color: white; color: white;
box-sizing: border-box; box-sizing: border-box;
line-height: 32px;
} }
} }
.center-bg { .center-bg {
background-image: url(./static/bar-content-bg.png);
background-size: 100% 100%;
width: 310px; width: 310px;
height: 76px; height: 76px;
margin-left: 10px; margin-left: 10px;
......
This diff is collapsed.
This diff is collapsed.
...@@ -43,5 +43,32 @@ ...@@ -43,5 +43,32 @@
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png", "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_logo_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Pattern.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Vector%20Smart%20Object%20copy%202.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_group.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_l02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/-s-eye_glow_r02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Golden%20Koi%20Club.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Logout%20Button1.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameSecond/background3.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_credit_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_di_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bottom_01.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Bonus.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Layer%20970.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/vip.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/pic_02.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_object.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/photo-camera-interface-symbol-for-button.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/mobileKeyboard/arrowIcon.png",
"https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%208%20copy.png"
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment