Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2026-04-06 07:25:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 代码格式化

Browse Source
This commit is contained in:
BTMuli
2023-06-26 20:56:08 +08:00
parent 8e8c01c40c
commit 2591e86e2e
54 changed files with 437 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/main/t-backTop.vue
View File

@@ -61,16 +61,16 @@ onMounted(() => {
.back-top:hover {
border-radius: 50%;
box-shadow: 0 0 10px 5px var(--back-top-shadow);
cursor: pointer;
transform: scale(0.9);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 10px 5px var(--back-top-shadow);
}
.back-top img {
transition: all 0.3s ease-in-out;
width: 60px;
height: 60px;
transition: all 0.3s ease-in-out;
}
/* 动画 */

18
src/components/main/t-calendar.vue
View File

@@ -148,21 +148,21 @@ function getContents(day: number): void {
</script>
<style lang="css" scoped>
.calendar-box {
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
}
.calendar-title {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
display: flex;
align-items: center;
justify-content: start;
column-gap: 2rem;
padding-bottom: 5px;
color: var(--common-text-title);
column-gap: 2rem;
font-family: var(--font-title);
font-size: 20px;
}
.calendar-title-left {
@@ -180,20 +180,20 @@ function getContents(day: number): void {
}
.calendar-btn {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
border-radius: 5px;
}
.calendar-btn-selected {
border-radius: 5px;
background: var(--common-bg-2);
color: var(--common-bgt-2);
border-radius: 5px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
</style>

18
src/components/main/t-itembox-2.vue
View File

@@ -37,30 +37,30 @@ const props = defineProps<TItemBox2Props>();
<style lang="css" scoped>
.tib2-box {
position: relative;
height: v-bind(props[ "modelValue"][ "height"]);
width: v-bind(props[ "modelValue"][ "width"]);
display: flex;
width: v-bind(props[ "modelValue"][ "width"]);
height: v-bind(props[ "modelValue"][ "height"]);
border-radius: 5px;
background: rgb(20 20 20 / 30%);
}
.tib2-left {
overflow: hidden;
width: v-bind(props[ "modelValue"][ "height"]);
height: v-bind(props[ "modelValue"][ "height"]);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
border-top-left-radius: 5px;
}
.tib2-bg,
.tib2-icon {
position: absolute;
top: 0;
overflow: hidden;
width: v-bind(props[ "modelValue"][ "height"]);
height: v-bind(props[ "modelValue"][ "height"]);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
border-top-left-radius: 5px;
}
.tib2-bg img,
@@ -82,12 +82,12 @@ const props = defineProps<TItemBox2Props>();
}
.tib2-right {
margin-left: 5px;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
font-size: calc(0.2 * v-bind(props[ "modelValue"][ "height"]));
margin-left: 5px;
color: var(--common-color-white);
overflow: hidden;
font-size: calc(0.2 * v-bind(props[ "modelValue"][ "height"]));
}
</style>

38
src/components/main/t-itembox.vue
View File

@@ -78,10 +78,10 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: v-bind(modelValue[ "size"]);
height: v-bind(modelValue[ "size"]);
border-radius: 5px;
overflow: hidden;
}
.tib-bg img {
@@ -92,9 +92,9 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
.tib-icon {
position: relative;
overflow: hidden;
width: v-bind(modelValue[ "size"]);
height: v-bind(modelValue[ "size"]);
overflow: hidden;
border-radius: 5px;
}
@@ -108,25 +108,25 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
position: absolute;
top: 0;
left: 0;
display: flex;
width: v-bind(modelValue[ "size"]);
height: v-bind(modelValue[ "size"]);
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.tib-lt {
position: absolute;
top: 0;
left: 0;
padding: 5px;
display: flex;
width: v-bind(modelValue[ "ltSize"]);
height: v-bind(modelValue[ "ltSize"]);
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
padding: 5px;
}
.tib-lt img {
@@ -139,33 +139,33 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
position: absolute;
top: 0;
right: 0;
display: flex;
width: v-bind(modelValue[ "rtSize"]);
height: v-bind(modelValue[ "rtSize"]);
background: rgb(0 0 0 / 40%);
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-title);
justify-content: center;
background: rgb(0 0 0 / 40%);
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
color: var(--common-color-white);
font-family: var(--font-title);
}
.tib-inner {
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100%;
height: v-bind(getInnerHeight);
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
background: rgb(20 20 20 / 40%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
color: var(--common-color-white);
font-size: v-bind(getInnerFont);
font-family: var(--font-title);
font-size: v-bind(getInnerFont);
}
.tib-inner img {
@@ -179,8 +179,8 @@ const getOuterFont = computed(() => `${props.modelValue.outerHeight / 2}px`);
bottom: 0;
width: 100%;
height: v-bind(getOuterHeight);
text-align: center;
color: var(--common-text-title);
font-size: v-bind(getOuterFont);
text-align: center;
}
</style>

10
src/components/main/t-overlay.vue
View File

@@ -86,15 +86,15 @@ watch(
.tolo-box {
position: fixed;
left: 0;
z-index: 100;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 50%);
justify-content: center;
backdrop-filter: blur(v-bind(blurVal));
z-index: 100;
background: rgb(0 0 0 / 50%);
}
</style>

36
src/components/main/t-pool.vue
View File

@@ -219,45 +219,45 @@ onUnmounted(() => {
<style lang="css" scoped>
.pool-box {
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
}
.pool-title {
display: flex;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
display: flex;
}
.pool-title img {
width: 25px;
height: 25px;
transform: translate(0, 2px);
margin-right: 10px;
border-radius: 50%;
margin-right: 10px;
background: var(--common-shadow-2);
transform: translate(0, 2px);
}
.pool-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
grid-gap: 20px;
margin-top: 10px;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}
.pool-card {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
border-radius: 5px;
}
.pool-list {
font-family: var(--font-title);
background: inherit;
color: inherit;
font-family: var(--font-title);
}
.pool-voice-icon {
@@ -267,20 +267,20 @@ onUnmounted(() => {
}
.pool-cover {
margin: 0 20px 10px;
display: flex;
overflow: hidden;
width: calc(100% - 40px);
height: auto;
overflow: hidden;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
border-radius: 5px;
margin: 0 20px 10px;
}
.pool-cover img {
width: 100%;
transition: all 0.5s;
border-radius: 10px;
transition: all 0.5s;
}
.pool-cover :hover {
@@ -290,16 +290,16 @@ onUnmounted(() => {
}
.pool-character {
margin: 0 20px;
display: flex;
width: 100%;
height: 70px;
display: flex;
margin: 0 20px;
}
.pool-icon-grid {
display: grid;
grid-template-columns: repeat(4, 70px);
grid-column-gap: 10px;
grid-template-columns: repeat(4, 70px);
}
.pool-icon {

22
src/components/main/t-position.vue
View File

@@ -138,19 +138,19 @@ onUnmounted(() => {
<style lang="css" scoped>
.position-box {
margin-bottom: 10px;
padding: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 0 10px var(--common-shadow-4);
}
.position-title {
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
display: flex;
align-items: center;
justify-content: start;
color: var(--common-text-title);
font-family: var(--font-title);
font-size: 20px;
}
.position-title img {
@@ -161,27 +161,27 @@ onUnmounted(() => {
.position-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 1fr));
grid-gap: 20px;
margin-top: 10px;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(calc(400px + 2rem), 1fr));
}
.position-card {
border-radius: 5px;
background: var(--common-bg-1);
color: var(--common-bgt-1);
border-radius: 5px;
}
.position-list {
font-family: var(--font-title);
background: inherit;
color: inherit;
font-family: var(--font-title);
}
.position-list :deep(img) {
border-radius: 5px;
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: contain;
transition: all 0.3s;
}
@@ -192,8 +192,8 @@ onUnmounted(() => {
}
.position-card-text {
min-width: 200px;
display: inline-block;
min-width: 200px;
align-items: center;
}

10
src/components/main/t-shareBtn.vue
View File

@@ -25,9 +25,9 @@ async function shareContent() {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
border-radius: 50%;
border: var(--theme-switch-icon) 2px solid;
border-radius: 50%;
cursor: pointer;
}
.share-box:hover {
@@ -35,12 +35,12 @@ async function shareContent() {
}
.share-btn {
display: flex;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
justify-content: center;
padding-right: 2px;
margin: 5px;
}
</style>

8
src/components/main/t-sidebar.vue
View File

@@ -195,27 +195,27 @@ async function switchTheme() {
}
.side-list {
font-family: var(--font-title);
height: 100%;
font-family: var(--font-title);
}
.bottom-menu {
position: absolute;
width: 100%;
bottom: 0;
width: 100%;
}
.side-icon {
width: 24px;
height: 24px;
margin-right: 32px;
border-radius: 5px;
margin-right: 32px;
}
.side-icon-mini {
width: 36px;
height: 36px;
transform: translateX(-6px);
margin-right: 20px;
transform: translateX(-6px);
}
</style>

8
src/components/main/t-subline.vue
View File

@@ -15,15 +15,15 @@ defineProps({
</script>
<style lang="css" scoped>
.tsl-box {
background: var(--common-shadow-2);
display: flex;
align-items: center;
height: 30px;
align-items: center;
padding: 0 10px;
margin: 5px 0;
border-radius: 5px;
font-family: var(--font-text);
margin: 5px 0;
background: var(--common-shadow-2);
color: var(--common-color-white);
font-family: var(--font-text);
}
.tsl-box img {

6
src/components/main/t-switchTheme.vue
View File

@@ -48,9 +48,9 @@ async function listenOnTheme() {
position: absolute;
top: 20px;
left: 20px;
cursor: pointer;
border-radius: 50%;
border: var(--theme-switch-icon) 2px solid;
border-radius: 50%;
cursor: pointer;
}
.switch-box:hover {
@@ -58,9 +58,9 @@ async function listenOnTheme() {
}
.switch-btn {
display: flex;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;

50
src/components/overlay/to-calendar.vue
View File

@@ -95,30 +95,30 @@ function toDetail(item: TGApp.App.Calendar.Item) {
.box-div {
height: 200px;
background: rgb(255 255 255 / 30%);
align-items: center;
padding: 10px;
border-radius: 5px;
background: rgb(255 255 255 / 30%);
color: #faf7e8;
align-items: center;
}
.toc-top {
height: 100px;
width: 100%;
display: flex;
width: 100%;
height: 100px;
}
.toc-icon {
height: 100px;
width: 100px;
height: 100px;
}
.toc-material-grid {
display: grid;
margin-left: 10px;
font-family: Genshin, serif;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
.toc-line {
@@ -127,13 +127,13 @@ function toDetail(item: TGApp.App.Calendar.Item) {
}
.toc-bottom {
background: rgb(0 0 0 / 30%);
padding: 3px 10px;
width: 420px;
border-radius: 5px;
display: flex;
justify-content: space-between;
width: 420px;
align-items: center;
justify-content: space-between;
padding: 3px 10px;
border-radius: 5px;
background: rgb(0 0 0 / 30%);
}
.toc-bottom img {
@@ -142,20 +142,20 @@ function toDetail(item: TGApp.App.Calendar.Item) {
}
.toc-src-box {
display: flex;
width: 300px;
height: 50px;
display: flex;
justify-content: left;
align-items: center;
justify-content: left;
}
.toc-src-text {
height: 50px;
font-size: 20px;
font-family: Genshin-Light, serif;
display: flex;
justify-content: center;
height: 50px;
align-items: center;
justify-content: center;
font-family: Genshin-Light, serif;
font-size: 20px;
}
.toc-btn-img {
@@ -164,22 +164,22 @@ function toDetail(item: TGApp.App.Calendar.Item) {
}
.close-div {
height: 60px;
width: 100%;
display: flex;
justify-content: center;
width: 100%;
height: 60px;
align-items: center;
justify-content: center;
}
.close-btn {
border-radius: 50%;
display: flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgb(255 255 255 / 30%);
color: #faf7e8;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>

34
src/components/overlay/to-channel.vue
View File

@@ -105,32 +105,32 @@ function toChannel(link: string) {
}
.toc-top {
padding: 10px;
border-radius: 5px;
background: rgb(255 255 255 / 30%);
padding: 10px;
}
.toc-title {
color: var(--common-color-blue);
font-family: var(--font-title);
font-size: 20px;
color: var(--common-color-blue);
}
.toc-list {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 10px;
grid-gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
.toc-list-item {
cursor: pointer;
display: flex;
background: rgb(0 0 0 / 20%);
border-radius: 5px;
align-items: center;
justify-content: start;
border-radius: 5px;
background: rgb(0 0 0 / 20%);
color: var(--common-color-black);
cursor: pointer;
transition: all 0.5s linear;
}
@@ -142,34 +142,34 @@ function toChannel(link: string) {
.toc-list-item img {
width: 45px;
height: 45px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin-right: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.toc-list-item span {
margin-right: 10px;
font-family: var(--font-title);
font-size: 16px;
margin-right: 10px;
}
.toc-close {
height: 60px;
width: 100%;
display: flex;
justify-content: center;
width: 100%;
height: 60px;
align-items: center;
justify-content: center;
}
.toc-close-btn {
border-radius: 50%;
display: flex;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgb(255 255 255 / 30%);
color: #faf7e8;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>

50
src/components/overlay/to-confirm.vue
View File

@@ -97,83 +97,83 @@ const onConfirm = () => {
<style scoped>
.confirm-div {
position: absolute;
width: 40vw;
height: 20vh;
top: 40vh;
left: 30vw;
background: var(--content-bg-2);
border-radius: 10px;
padding: 10px;
display: flex;
width: 40vw;
height: 20vh;
flex-direction: column;
align-items: center;
padding: 10px;
border-radius: 10px;
background: var(--content-bg-2);
}
.confirm-box {
border-radius: 10px;
width: 100%;
height: 100%;
border-radius: 10px;
}
.confirm-title {
font-family: Genshin, serif;
text-align: center;
height: 20%;
width: 100%;
color: var(--content-text-2);
height: 20%;
margin: 10px;
color: var(--content-text-2);
font-family: Genshin, serif;
font-size: 30px;
text-align: center;
}
.confirm-subtitle {
border-top: 1px solid var(--btn-bg-2);
font-family: Genshin-Light, serif;
text-align: center;
height: 20%;
width: 100%;
height: 20%;
border-top: 1px solid var(--btn-bg-2);
color: var(--content-text-2);
font-family: Genshin-Light, serif;
font-size: 20px;
text-align: center;
}
.confirm-input {
font-family: Genshin-Light, serif;
text-align: center;
height: 20%;
width: 100%;
height: 20%;
color: var(--content-text-2);
font-family: Genshin-Light, serif;
font-size: 20px;
text-align: center;
}
.confirm-btn-box {
position: absolute;
height: 40%;
width: 100%;
display: flex;
justify-content: space-around;
width: 100%;
height: 40%;
align-items: flex-end;
justify-content: space-around;
}
.confirm-btn {
display: flex;
width: 30%;
min-width: 150px;
min-height: 30px;
align-items: center;
border-radius: 50px;
background: var(--btn-bg-2);
color: var(--btn-text-1);
border-radius: 50px;
display: flex;
align-items: center;
}
.btn-icon {
margin: 5px;
width: 25px;
height: 25px;
margin: 5px;
}
.btn-text {
width: calc(100% - 70px);
text-align: center;
font-family: Genshin-Light, serif;
font-size: 20px;
text-align: center;
}
</style>

30
src/components/overlay/to-loading.vue
View File

@@ -56,54 +56,54 @@ watch(
min-width: 800px;
min-height: 300px;
padding: 15px;
border-radius: 15px;
background: rgb(255 255 255 / 5%);
box-shadow: 0 0 10px rgb(0 0 0 / 50%);
border-radius: 15px;
}
.tol-box {
width: 100%;
padding: 10px;
display: flex;
width: 100%;
box-sizing: content-box;
border: #f4d8a8 1px solid;
color: #f4d8a8;
border-radius: 5px;
flex-direction: column;
justify-content: center;
align-items: center;
justify-content: center;
padding: 10px;
border: #f4d8a8 1px solid;
border-radius: 5px;
color: #f4d8a8;
}
.tol-title {
display: flex;
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
justify-content: center;
font-family: Genshin, serif;
font-size: 2rem;
font-weight: 600;
}
.tol-subtitle {
width: 100%;
text-align: center;
font-size: 1rem;
height: 25px;
font-family: Genshin-Light, serif;
font-size: 1rem;
text-align: center;
}
.tol-img {
display: flex;
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
}
.tol-img:deep(img) {
max-height: 200px;
max-width: 100%;
max-height: 200px;
border-radius: 5px;
}
</style>

8
src/components/userAbyss/tua-detail-battle.vue
View File

@@ -22,15 +22,15 @@ const props = defineProps<TuaDetailBattleProps>();
<style lang="css" scoped>
.tud-db-icons-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin-bottom: 10px;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.tud-db-time {
width: 100%;
text-align: left;
font-size: 12px;
color: var(--common-text-quote);
font-size: 12px;
text-align: left;
}
</style>

2
src/components/userAbyss/tua-detail-level.vue
View File

@@ -17,9 +17,9 @@ const props = defineProps<TuaDetailLevelProps>();
</script>
<style lang="css" scoped>
.tud-dl-divider {
border-radius: 5px;
width: 100%;
height: 1px;
border-radius: 5px;
background: var(--common-text-content);
}
</style>

10
src/components/userAbyss/tua-detail-title.vue
View File

@@ -36,25 +36,25 @@ const getFontSize: ComputedRef<string> = computed(() => {
</script>
<style lang="css" scoped>
.tud-t-box {
height: 30px;
width: 100%;
display: flex;
width: 100%;
height: 30px;
align-items: center;
justify-content: space-between;
font-family: v-bind(getFont);
}
.tud-t-title {
font-size: v-bind(getFontSize);
color: var(--common-text-content);
font-size: v-bind(getFontSize);
}
.tud-t-val {
display: flex;
align-items: center;
color: var(--common-color-white);
font-family: var(--font-text);
font-size: v-bind(getFontSize);
color: var(--common-color-white);
text-shadow: 0 0 10px var(--common-color-yellow);
}
@@ -66,7 +66,7 @@ const getFontSize: ComputedRef<string> = computed(() => {
.tud-t-val img {
width: 20px;
height: 20px;
object-fit: cover;
margin-right: 5px;
object-fit: cover;
}
</style>

6
src/components/userAbyss/tua-detail.vue
View File

@@ -27,10 +27,10 @@ const props = defineProps<TuaDetailProps>();
<style lang="css" scoped>
.tuad-box {
width: 100%;
margin-bottom: 10px;
border-radius: 5px;
background: var(--common-shadow-1);
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
background: var(--common-shadow-1);
}
.tuad-index-box {

14
src/components/userAbyss/tua-overview.vue
View File

@@ -38,27 +38,27 @@ const props = withDefaults(defineProps<TAOProps>(), {
</script>
<style lang="css" scoped>
.tuao-box {
display: flex;
width: 100%;
height: auto;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
background: var(--common-shadow-1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tuao-title {
color: var(--common-text-content);
font-family: var(--font-title);
font-size: 20px;
color: var(--common-text-content);
}
.tuao-val-text {
color: var(--common-color-white);
font-family: var(--font-text);
font-size: 20px;
color: var(--common-color-white);
text-shadow: 0 0 10px var(--common-color-yellow);
}
@@ -69,7 +69,7 @@ const props = withDefaults(defineProps<TAOProps>(), {
.tuao-val-icons {
display: grid;
grid-template-columns: repeat(v-bind(iconNum), 1fr);
column-gap: 10px;
grid-template-columns: repeat(v-bind(iconNum), 1fr);
}
</style>

14
src/components/userCharacter/tuc-detail-constellation.vue
View File

@@ -17,31 +17,31 @@ defineProps<TucDetailConstellationProps>();
</script>
<style lang="css" scoped>
.tuc-dc-box {
display: flex;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
.tuc-dc-lock {
position: absolute;
display: flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgb(0 0 0 / 50%);
display: flex;
justify-content: center;
align-items: center;
}
.tuc-dc-icon {
width: 50px;
height: 50px;
border-radius: 50%;
padding: 5px;
border-radius: 50%;
background: rgb(0 0 0/ 20%);
}

4
src/components/userCharacter/tuc-detail-desc-constellation.vue
View File

@@ -50,16 +50,16 @@ function parseDesc(desc: string): string {
<style lang="css" scoped>
.tuc-ddc-content {
display: flex;
height: 100%;
flex-direction: column;
align-items: start;
justify-content: space-around;
height: 100%;
margin-left: 5px;
}
.tuc-ddc-top {
color: var(--common-color-blue-2);
height: 20px;
color: var(--common-color-blue-2);
}
.tuc-ddc-bottom {

4
src/components/userCharacter/tuc-detail-desc-relic.vue
View File

@@ -39,10 +39,10 @@ const props = defineProps<TucDetailDescRelicProps>();
<style lang="css" scoped>
.tuc-ddr-content {
display: flex;
height: 100%;
flex-direction: column;
align-items: start;
justify-content: space-around;
height: 100%;
margin-left: 5px;
}
@@ -63,8 +63,8 @@ const props = defineProps<TucDetailDescRelicProps>();
}
.tuc-ddrc-bottom img {
height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
}

2
src/components/userCharacter/tuc-detail-desc-weapon.vue
View File

@@ -44,10 +44,10 @@ const box = computed(() => {
<style lang="css" scoped>
.tuc-ddw-content {
display: flex;
height: 100%;
flex-direction: column;
align-items: start;
justify-content: space-around;
height: 100%;
margin-left: 5px;
}

28
src/components/userCharacter/tuc-detail-desc.vue
View File

@@ -15,46 +15,46 @@
<style lang="css" scoped>
.tuc-dd-box {
padding: 10px;
border-radius: 5px;
border: 2px solid var(--common-color-grey-2);
background: rgb(255 255 255 / 20%);
border-radius: 5px;
backdrop-filter: blur(20px);
background: rgb(255 255 255 / 20%);
}
.tuc-dd-title {
width: 100%;
color: var(--common-color-blue);
font-family: var(--font-title);
font-size: 20px;
color: var(--common-color-blue);
width: 100%;
text-align: left;
}
.tuc-dd-divider {
width: 100%;
height: 2px;
background: var(--common-color-grey-2);
margin: 5px 0;
background: var(--common-color-grey-2);
}
.tuc-dd-content {
display: flex;
flex-wrap: wrap;
justify-content: start;
align-items: center;
height: 60px;
flex-wrap: wrap;
align-items: center;
justify-content: start;
}
.tuc-dd-desc {
font-family: var(--font-text);
font-size: 14px;
overflow: hidden;
width: 100%;
max-height: 50px;
margin-top: 5px;
color: var(--common-color-black);
width: 100%;
font-family: var(--font-text);
font-size: 14px;
overflow-y: scroll;
text-align: left;
word-break: break-all;
max-height: 50px;
overflow: hidden;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;

2
src/components/userCharacter/tuc-detail-itembox.vue
View File

@@ -20,10 +20,10 @@ defineProps<TucDetailItemBoxProps>();
</script>
<style lang="css" scoped>
.tuc-dib-box {
position: relative;
width: 60px;
height: 60px;
border-radius: 5px;
position: relative;
}
.tuc-dib-bg {

34
src/components/userCharacter/tuc-detail-overlay.vue
View File

@@ -204,18 +204,18 @@ function switchBg() {
position: relative;
width: 500px;
height: 620px;
background: rgb(255 255 255 / 30%);
border-radius: 5px;
padding: 10px;
border-radius: 5px;
background: rgb(255 255 255 / 30%);
}
.tuc-do-bg {
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
width: 100%;
height: 100%;
margin: 0 auto;
}
.tuc-do-bg img {
@@ -226,45 +226,45 @@ function switchBg() {
.tuc-do-quote {
position: absolute;
bottom: 5px;
right: 10px;
bottom: 5px;
color: var(--common-color-grey-2);
font-family: var(--font-text);
font-size: 12px;
color: var(--common-color-grey-2);
}
.tuc-do-costume {
position: absolute;
z-index: 1;
top: 5px;
right: 10px;
z-index: 1;
}
.tuc-do-costume-name {
position: absolute;
width: 100%;
top: 5px;
left: 0;
text-align: center;
width: 100%;
color: var(--common-color-white);
font-family: var(--font-text);
font-size: 16px;
color: var(--common-color-white);
text-align: center;
text-shadow: 0 0 10px var(--common-color-yellow);
}
.tuc-do-show {
position: absolute;
width: calc(100% - 20px);
display: flex;
width: calc(100% - 20px);
flex-wrap: wrap;
justify-content: space-around;
align-items: start;
justify-content: space-around;
}
.tuc-do-left {
position: relative;
width: 50%;
height: 400px;
position: relative;
}
.tuc-do-right {
@@ -280,8 +280,8 @@ function switchBg() {
/* 左侧显示区域 */
.tuc-dol-item {
position: absolute;
cursor: pointer;
border-radius: 5px;
cursor: pointer;
}
/* 排列武器跟5个圣遗物 */
@@ -318,9 +318,9 @@ function switchBg() {
/* 右侧显示区域 */
.tuc-dor-box {
position: relative;
width: 100%;
height: 100%;
position: relative;
}
.tuc-dor-item {
@@ -344,17 +344,17 @@ function switchBg() {
}
.tuc-dor-item:nth-child(4) {
bottom: 130px;
right: 10px;
bottom: 130px;
}
.tuc-dor-item:nth-child(5) {
bottom: 50px;
right: 40px;
bottom: 50px;
}
.tuc-dor-item:nth-child(6) {
bottom: 0;
right: 100px;
bottom: 0;
}
</style>

10
src/components/userCharacter/tuc-detail-relic.vue
View File

@@ -21,19 +21,19 @@ const props = defineProps<TucDetailRelicProps>();
</script>
<style lang="css" scoped>
.tuc-dr-box {
position: relative;
width: 60px;
height: 60px;
border-radius: 5px;
background: rgb(0 0 0 /20%);
position: relative;
}
.tuc-dr-bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tuc-dr-bg:nth-child(1) {
@@ -47,11 +47,11 @@ const props = defineProps<TucDetailRelicProps>();
}
.tuc-dr-icon {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tuc-dr-icon img {

26
src/components/userCharacter/tuc-role-box.vue
View File

@@ -91,10 +91,10 @@ function getAvatarName() {
</script>
<style lang="css" scoped>
.tuc-rb-box {
position: relative;
padding: 5px;
border: 1px inset var(--common-shadow-4);
border-radius: 5px;
position: relative;
cursor: pointer;
transition: all 0.3s;
}
@@ -105,18 +105,18 @@ function getAvatarName() {
.tuc-rb-top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
align-items: center;
justify-content: space-between;
}
.tuc-rb-bottom {
position: relative;
align-items: center;
width: 100%;
margin-top: 5px;
height: 80px;
align-items: center;
border-radius: 5px;
margin-top: 5px;
}
.tuc-rbb-bg {
@@ -129,36 +129,36 @@ function getAvatarName() {
.tuc-rbb-bg img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 5px;
object-fit: contain;
}
.tuc-rbb-lock {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
background: var(--common-shadow-4);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
border-radius: 5px;
backdrop-filter: blur(5px);
background: var(--common-shadow-4);
}
.tuc-rbb-fetter {
position: absolute;
top: 5px;
left: 5px;
display: flex;
width: calc(100% - 10px);
height: 20px;
display: flex;
justify-content: start;
align-items: center;
justify-content: start;
border-radius: 5px;
color: var(--common-color-yellow);
background: rgb(0 0 0 / 50%);
color: var(--common-color-yellow);
}
.tuc-rbb-fetter :nth-child(1) {

4
src/components/userRecord/tur-avatar-grid.vue
View File

@@ -20,8 +20,8 @@ const data = computed(() => JSON.parse(<string>props.modelValue) as TGApp.Sqlite
<style lang="css" scoped>
.tur-ag-box {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
grid-gap: 10px;
margin-bottom: 10px;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
</style>

4
src/components/userRecord/tur-home-grid.vue
View File

@@ -24,8 +24,8 @@ const homes = computed(() => {
<style lang="css" scoped>
.tur-hg-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 100%;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
}
</style>

18
src/components/userRecord/tur-home-sub.vue
View File

@@ -57,27 +57,27 @@ onMounted(async () => {
</script>
<style lang="css" scoped>
.tur-hs-box {
border-radius: 5px;
position: relative;
border-radius: 5px;
}
.tur-hs-name {
position: absolute;
top: 10px;
right: 10px;
color: var(--common-color-white);
font-family: var(--font-text);
font-size: 16px;
color: var(--common-color-white);
text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
.tur-hs-title {
padding: 10px;
font-family: var(--font-title);
font-size: 20px;
display: flex;
align-items: center;
padding: 10px;
color: var(--common-color-white);
font-family: var(--font-title);
font-size: 20px;
text-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
@@ -88,20 +88,20 @@ onMounted(async () => {
}
.tur-hs-text-grid {
padding: 10px;
width: 100%;
display: flex;
width: 100%;
justify-content: space-between;
padding: 10px;
background: rgb(0 0 0 / 40%);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
text-align: center;
color: var(--common-color-white);
text-align: center;
}
.tur-hs-text :nth-child(1) {
font-family: var(--font-text);
color: var(--common-color-yellow);
font-family: var(--font-text);
}
.tur-hs-text :nth-child(2) {

4
src/components/userRecord/tur-overview-grid.vue
View File

@@ -33,8 +33,8 @@ const data = computed(() => JSON.parse(<string>props.modelValue) as TGApp.Sqlite
<style lang="css" scoped>
.tur-og-box {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
width: 100%;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
</style>

12
src/components/userRecord/tur-overview-sub.vue
View File

@@ -22,27 +22,27 @@ defineProps<TAOProps>();
</script>
<style lang="css" scoped>
.tur-os-box {
display: flex;
width: 100%;
height: auto;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5px;
border-radius: 5px;
background: var(--common-shadow-1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tur-os-title {
color: var(--common-text-content);
font-family: var(--font-title);
font-size: 20px;
color: var(--common-text-content);
}
.tur-os-text {
color: var(--common-color-white);
font-family: var(--font-text);
font-size: 20px;
color: var(--common-color-white);
text-shadow: 0 0 10px var(--common-color-yellow);
}

4
src/components/userRecord/tur-world-grid.vue
View File

@@ -30,8 +30,8 @@ function getData() {
<style lang="css" scoped>
.tur-wg-box {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
width: 100%;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
</style>

12
src/components/userRecord/tur-world-sub.vue
View File

@@ -82,11 +82,11 @@ async function listenOnTheme() {
</script>
<style lang="css" scoped>
.tur-ws-box {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
background: var(--common-shadow-1);
}
@@ -102,23 +102,23 @@ async function listenOnTheme() {
}
.tur-ws-content {
color: var(--common-text-content);
width: calc(100% - 60px);
height: 100%;
color: var(--common-text-content);
}
.tur-ws-title {
border-bottom: 1px inset var(--common-text-content);
font-family: var(--font-title);
font-size: 20px;
border-bottom: 1px inset var(--common-text-content);
}
.tur-ws-sub {
display: flex;
align-items: center;
justify-content: start;
font-family: var(--font-text);
font-size: 14px;
justify-content: start;
}
.tur-ws-sub img {