Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-16 09:58:13 +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;