fix(样式): 修复屏幕高度不够时，背景图截断的问题
This commit is contained in:
hzj
parent
737ff22320
commit
66f4ff209c
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<MobileHeader title="Admin Center" :isHomePage="true">
|
||||
<template v-slot:extraFunction>
|
||||
<div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
|
||||
@ -106,7 +107,9 @@
|
||||
transition: all 0.3s ease-out;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
|
||||
Total recharge for the month:
|
||||
</div>
|
||||
<div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
|
||||
${{ totalRechargeDetail[0]?.totalAmount || 0 }}
|
||||
</div>
|
||||
@ -133,14 +136,19 @@
|
||||
<img :src="agency.userAvatar" alt="" style="width: 36px; border-radius: 50%" />
|
||||
<div style="margin-left: 8px">
|
||||
<div style="font-weight: 700">{{ agency.name }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.account }}</div>
|
||||
<div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
|
||||
ID:{{ agency.account }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<img
|
||||
src="../assets/icon/arrow.png"
|
||||
alt=""
|
||||
style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
|
||||
style="
|
||||
width: 24px;
|
||||
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
||||
"
|
||||
:class="{ rotated: aIndex == selectedAgencyIndex }"
|
||||
/>
|
||||
</div>
|
||||
@ -168,6 +176,7 @@
|
||||
<div ref="Agloadmore" v-if="showAgLoading"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -346,6 +355,21 @@ const formatPrice = (value) => {
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.tabName {
|
||||
@ -357,15 +381,6 @@ const formatPrice = (value) => {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 添加页面样式 */
|
||||
.fullPage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.info-fade-enter-from,
|
||||
.info-fade-leave-to {
|
||||
transform: translateY(-10px);
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<MobileHeader title="Item Distribution" />
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
@ -138,6 +139,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -321,12 +323,22 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 添加页面样式 */
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<!-- Recharge.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
|
||||
|
||||
@ -122,8 +123,8 @@
|
||||
thecoin seller account.
|
||||
</p>
|
||||
<p>
|
||||
3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can confrm
|
||||
the account lD at the topof the page.
|
||||
3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
|
||||
confrm the account lD at the topof the page.
|
||||
</p>
|
||||
<p>
|
||||
4、lf the lD account you enter is a coinseller account, the coin will be sent to
|
||||
@ -134,6 +135,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -187,13 +189,20 @@ const checkUserId = async () => {
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
@ -67,12 +68,22 @@
|
||||
<img
|
||||
:src="userProfile.userAvatar"
|
||||
alt=""
|
||||
style="width: 10%; margin: 10px; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
|
||||
style="
|
||||
width: 10%;
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
/>
|
||||
<div style="">
|
||||
<div style="font-weight: 700; display: flex; align-items: center">
|
||||
{{ userProfile.userNickname }}
|
||||
<img src="../assets/icon/sellerTab.png" alt="" style="height: 20px; margin-left: 5px" />
|
||||
<img
|
||||
src="../assets/icon/sellerTab.png"
|
||||
alt=""
|
||||
style="height: 20px; margin-left: 5px"
|
||||
/>
|
||||
</div>
|
||||
<div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</div>
|
||||
</div>
|
||||
@ -138,6 +149,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -279,13 +291,20 @@ watch(selectedCountry, (New, Old) => {
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<div>
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Country&Region">
|
||||
@ -71,81 +72,93 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useCountryStore } from "@/stores/country";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useCountryStore } from '@/stores/country'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const route = useRoute();
|
||||
const route = useRoute()
|
||||
|
||||
const countryStore = useCountryStore();
|
||||
const { list: countryList, selectedCountry } = storeToRefs(countryStore); //国家信息
|
||||
const countryStore = useCountryStore()
|
||||
const { list: countryList, selectedCountry } = storeToRefs(countryStore) //国家信息
|
||||
|
||||
const groupIndex = ref(-1); //选中的首字母区域
|
||||
const countryIndex = ref(-1); //选中区域的第几个
|
||||
const groupIndex = ref(-1) //选中的首字母区域
|
||||
const countryIndex = ref(-1) //选中区域的第几个
|
||||
|
||||
const selectC = (gIndex, cIndex, country) => {
|
||||
groupIndex.value = gIndex;
|
||||
countryIndex.value = cIndex;
|
||||
countryStore.setCountry(country);
|
||||
}; //选择国家
|
||||
groupIndex.value = gIndex
|
||||
countryIndex.value = cIndex
|
||||
countryStore.setCountry(country)
|
||||
} //选择国家
|
||||
|
||||
const groupedCountries = computed(() => {
|
||||
const groups = {};
|
||||
const groups = {}
|
||||
countryList.value.forEach((item) => {
|
||||
let firstLetter = item.countryName.charAt(0)?.toUpperCase() || "#"; //获取首字母转大写
|
||||
const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : "#"; //处理特殊字符
|
||||
let firstLetter = item.countryName.charAt(0)?.toUpperCase() || '#' //获取首字母转大写
|
||||
const normalizedLetter = /[A-Z]/.test(firstLetter) ? firstLetter : '#' //处理特殊字符
|
||||
|
||||
if (!groups.hasOwnProperty(normalizedLetter)) {
|
||||
groups[normalizedLetter] = [];
|
||||
groups[normalizedLetter] = []
|
||||
}
|
||||
groups[normalizedLetter].push(item);
|
||||
});
|
||||
groups[normalizedLetter].push(item)
|
||||
})
|
||||
|
||||
let resCountryList = Object.keys(groups)
|
||||
.sort()
|
||||
.map((letter) => ({
|
||||
letter,
|
||||
countries: groups[letter].sort((a, b) => a.countryName.localeCompare(b.countryName)),
|
||||
}));
|
||||
}))
|
||||
|
||||
let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || "#"; //当前选中的国家的首字母
|
||||
let firstLetter = selectedCountry.value.countryName.charAt(0)?.toUpperCase() || '#' //当前选中的国家的首字母
|
||||
resCountryList.forEach((resitem, gIndex) => {
|
||||
if (resitem.letter == firstLetter) {
|
||||
resitem.countries.forEach((citem, cIndex) => {
|
||||
if (citem.countryName == selectedCountry.value.countryName) {
|
||||
groupIndex.value = gIndex;
|
||||
countryIndex.value = cIndex;
|
||||
groupIndex.value = gIndex
|
||||
countryIndex.value = cIndex
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
return resCountryList;
|
||||
});
|
||||
return resCountryList
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const countryListStr = sessionStorage.getItem("countryList");
|
||||
selectedCountry.value = sessionStorage.getItem("selectedCountry");
|
||||
const countryListStr = sessionStorage.getItem('countryList')
|
||||
selectedCountry.value = sessionStorage.getItem('selectedCountry')
|
||||
if (countryListStr) {
|
||||
countryList.value = JSON.parse(countryListStr);
|
||||
countryList.value = JSON.parse(countryListStr)
|
||||
|
||||
// 可选：清除临时存储
|
||||
// sessionStorage.removeItem('tempCountryList');
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: black;
|
||||
font-family: 'SF Pro';
|
||||
}
|
||||
|
||||
.fullPage {
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user