🎨 代码格式化

src/assets/css/anno-parser.css

@@ -6,25 +6,25 @@
  */
 
 .anno-body {
-  margin: 0 auto;
   width: 800px;
+  margin: 0 auto;
   font-family: var(--font-text);
 }
 
 .anno-title {
-  font-family: var(--font-title);
   color: var(--common-text-title);
+  font-family: var(--font-title);
   font-size: 24px;
 }
 
 .anno-subtitle {
-  font-size: 16px;
   color: var(--common-text-quote);
+  font-size: 16px;
 }
 
 .anno-img {
-  max-width: 100%;
   width: 800px;
+  max-width: 100%;
   height: auto;
   border-radius: 10px;
   margin-bottom: 10px;
@@ -46,13 +46,13 @@
 }
 
 .anno-content :deep(p) {
-  line-height: 2;
   color: #4b5366;
+  line-height: 2;
 }
 
 .anno-content :deep(details) {
-  border: #35acce 2px solid;
   padding: 10px;
+  border: #35acce 2px solid;
   border-radius: 10px;
   margin: 10px;
 }
@@ -71,6 +71,6 @@
 }
 
 .anno-content :deep(td) {
-  line-height: 2;
   padding-left: 10px;
+  line-height: 2;
 }

src/assets/css/post-parser.css

@@ -6,21 +6,21 @@
  */
 
 .mys-post-body {
-  margin: 0 auto;
   width: 800px;
-  font-family: var(--font-text);
+  margin: 0 auto;
   color: var(--post-default-text);
+  font-family: var(--font-text);
 }
 
 .mys-post-title {
-  font-family: var(--font-title);
   color: var(--common-text-title);
+  font-family: var(--font-title);
   font-size: 24px;
 }
 
 .mys-post-subtitle {
-  font-size: 16px;
   color: var(--common-text-quote);
+  font-size: 16px;
 }
 
 .mys-post-content {
@@ -41,8 +41,8 @@
 }
 
 :deep(.mys-post-details) {
-  border: #35acce 2px solid;
   padding: 10px;
+  border: #35acce 2px solid;
   border-radius: 10px;
 }
 
@@ -61,8 +61,8 @@
 }
 
 :deep(.mys-post-img) {
-  max-width: 100%;
   width: 800px;
+  max-width: 100%;
   height: auto;
   border-radius: 10px;
 }
@@ -74,31 +74,31 @@
 }
 
 :deep(.mys-post-iframe) {
+  overflow: hidden;
   width: 800px;
   height: 450px;
-  overflow: hidden;
   border: 0;
   border-radius: 10px;
 }
 
 :deep(.mys-post-link-card) {
+  display: flex;
   width: 800px;
   height: 200px;
   padding: 10px;
   border-radius: 10px;
-  display: flex;
   background: var(--content-bg-2);
 }
 
 :deep(.mys-post-unknown) {
   width: 800px;
+  padding: 10px;
+  border: 2px solid #485466;
+  border-radius: 10px;
+  margin: 10px auto;
   background: #5b738f;
   color: #faf7e8;
   font-family: Consolas, monospace;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 10px auto;
-  border: 2px solid #485466;
 }
 
 :deep(.mys-post-link-card-cover) {
@@ -108,36 +108,36 @@
 }
 
 :deep(.mys-post-link-card-cover) img {
-  max-width: 400px;
   width: auto;
+  max-width: 400px;
   height: 180px;
   border-radius: 10px;
 }
 
 :deep(.mys-post-link-card-content) {
   width: 100%;
-  padding-left: 20px;
   height: 180px;
+  padding-left: 20px;
 }
 
 :deep(.mys-post-link-card-title) {
-  font-size: 20px;
-  font-family: Genshin, serif;
-  color: #546d8b;
   height: 150px;
+  color: #546d8b;
+  font-family: Genshin, serif;
+  font-size: 20px;
 }
 
 :deep(.mys-post-link-card-price) {
+  display: inline-block;
+  color: #ff6d6d;
   font-size: 20px;
   font-weight: bold;
-  color: #ff6d6d;
-  display: inline-block;
 }
 
 :deep(.mys-post-link-card-btn) {
   display: inline-block;
-  float: right;
-  color: #00c3ff;
   margin-right: 20px;
+  color: #00c3ff;
+  float: right;
   text-decoration: none;
 }

src/assets/index.css

@@ -39,13 +39,13 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-  background: #faf7e8;
   border-radius: 5px;
+  background: #faf7e8;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #686868;
   border-radius: 5px;
+  background: #686868;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -63,10 +63,10 @@ html {
 
 /* card action 内的按钮 */
 .card-btn {
-  background: #4a5366;
-  color: #ece5d8;
   border-radius: 50px;
   margin-left: 5px;
+  background: #4a5366;
+  color: #ece5d8;
 }
 
 .card-btn img {

src/assets/themes/dark.css

@@ -17,7 +17,7 @@ html.dark {
   --common-bg-1: #3d424b; /* 一级背景色 */
   --common-bgt-1: #faf7e8; /* 一级背景色对应的文本色 */
   --common-bg-2: #3b3d3b; /* button 背景色 */
-  --common-bgt-2: #faf7e8; /* button 背景色对应的文本色 */
+  --common-bgt-2: #fec90b; /* button 背景色对应的文本色 */
 
   /* text */
   --common-text-title: var(--common-color-white); /* title */

src/assets/themes/default.css

@@ -17,7 +17,7 @@ html.default {
   --common-bg-1: #faf7e8; /* 一级背景色 */
   --common-bgt-1: #3d424b; /* 一级背景色对应的文本色 */
   --common-bg-2: #fec90b; /* button 背景色 */
-  --common-bgt-2: #393b40; /* button 背景色对应的文本色 */
+  --common-bgt-2: #5b738f; /* button 背景色对应的文本色 */
 
   --common-text-title: #393b40; /* title */
   --common-text-content: var(--common-color-blue-2); /* text */

src/components/main/t-backTop.vue

@@ -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;
 }
 
 /* 动画 */

src/components/main/t-calendar.vue

@@ -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>

src/components/main/t-itembox-2.vue

@@ -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>

src/components/main/t-itembox.vue

@@ -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>

src/components/main/t-overlay.vue

@@ -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>

src/components/main/t-pool.vue

@@ -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 {

src/components/main/t-position.vue

@@ -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;
 }
 

src/components/main/t-shareBtn.vue

@@ -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>

src/components/main/t-sidebar.vue

@@ -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>

src/components/main/t-subline.vue

@@ -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 {

src/components/main/t-switchTheme.vue

@@ -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;

src/components/overlay/to-calendar.vue

@@ -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>

src/components/overlay/to-channel.vue

@@ -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>

src/components/overlay/to-confirm.vue

@@ -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>

src/components/overlay/to-loading.vue

@@ -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>

src/components/userAbyss/tua-detail-battle.vue

@@ -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>

src/components/userAbyss/tua-detail-level.vue

@@ -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>

src/components/userAbyss/tua-detail-title.vue

@@ -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>

src/components/userAbyss/tua-detail.vue

@@ -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 {

src/components/userAbyss/tua-overview.vue

@@ -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>

src/components/userCharacter/tuc-detail-constellation.vue

@@ -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%);
 }
 

src/components/userCharacter/tuc-detail-desc-constellation.vue

@@ -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 {

src/components/userCharacter/tuc-detail-desc-relic.vue

@@ -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;
 }
 

src/components/userCharacter/tuc-detail-desc-weapon.vue

@@ -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;
 }
 

src/components/userCharacter/tuc-detail-desc.vue

@@ -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);
+  overflow: hidden;
-  font-size: 14px;
+  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;

src/components/userCharacter/tuc-detail-itembox.vue

@@ -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 {

src/components/userCharacter/tuc-detail-overlay.vue

@@ -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>

src/components/userCharacter/tuc-detail-relic.vue

@@ -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 {

src/components/userCharacter/tuc-role-box.vue

@@ -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) {

src/components/userRecord/tur-avatar-grid.vue

@@ -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>

src/components/userRecord/tur-home-grid.vue

@@ -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>

src/components/userRecord/tur-home-sub.vue

@@ -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) {

src/components/userRecord/tur-overview-grid.vue

@@ -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>

src/components/userRecord/tur-overview-sub.vue

@@ -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);
 }
 

src/components/userRecord/tur-world-grid.vue

@@ -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>

src/components/userRecord/tur-world-sub.vue

@@ -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 {

src/pages/Achievements.vue

@@ -345,16 +345,16 @@ async function exportJson() {
 .left-wrap {
   width: 400px;
   height: calc(100vh - 100px);
-  overflow-y: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 /* 右侧成就 */
 .right-wrap {
   width: calc(100% - 410px);
   height: calc(100vh - 100px);
-  overflow-y: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
 }
 
 .list-empty {
@@ -364,26 +364,26 @@ async function exportJson() {
 
 /* 版本信息 */
 .version-icon-series {
-  font-family: Genshin, serif;
   position: absolute;
   right: 0;
   bottom: 0;
-  text-align: center;
   width: 80px;
-  background: #546d8b;
   border-radius: 10px 0 0;
   border-top: #fff 2px solid;
   border-left: #fff 2px solid;
+  background: #546d8b;
   color: #fec90b;
+  font-family: Genshin, serif;
   font-size: 10px;
+  text-align: center;
 }
 
 .version-icon-single {
-  font-family: Genshin, serif;
   border-radius: 5px;
-  text-align: center;
   color: #ff6d6d;
+  font-family: Genshin, serif;
   font-size: 10px;
+  text-align: center;
 }
 
 .card-left {
@@ -404,25 +404,25 @@ async function exportJson() {
 
 /* 成就进度 */
 .achievement-progress {
-  font-family: Genshin, serif;
   position: absolute;
-  left: 0;
   top: 0;
-  text-align: center;
+  left: 0;
   width: 65px;
+  border-right: #fff 2px solid;
+  border-bottom: #fff 2px solid;
   background: #8ba5c5;
   border-bottom-right-radius: 20px;
-  border-bottom: #fff 2px solid;
-  border-right: #fff 2px solid;
   color: #485466;
+  font-family: Genshin, serif;
   font-size: 10px;
+  text-align: center;
 }
 
 /* 成就完成时间 */
 .right-time {
   margin-right: 10px;
-  font-size: small;
   color: #faf7e8;
+  font-size: small;
 }
 
 /* 成就奖励 */
@@ -439,13 +439,13 @@ async function exportJson() {
   position: absolute;
   bottom: 0;
   left: 0;
+  display: flex;
   width: 100%;
   height: 10px;
+  align-items: center;
+  justify-content: center;
   background: rgb(0 0 0 / 50%);
   color: #faf7e8;
-  display: flex;
   font-size: 8px;
-  justify-content: center;
-  align-items: center;
 }
 </style>

src/pages/Config.vue

@@ -666,27 +666,27 @@ async function updateDB() {
 
 <style lang="css" scoped>
 .config-list {
+  border-radius: 10px;
   margin: 10px;
-  font-family: Genshin-Light, serif;
   background: var(--content-bg-2);
   color: var(--content-text-3);
-  border-radius: 10px;
+  font-family: Genshin-Light, serif;
 }
 
 .config-header {
   margin-top: 10px;
-  font-family: Genshin, serif;
   background: var(--content-bg-2);
   color: #fec90b;
+  font-family: Genshin, serif;
   font-size: large;
 }
 
 .config-icon {
   width: 40px;
   height: 40px;
-  margin-right: 15px;
   padding: 5px;
-  background: var(--content-bg-3);
   border-radius: 10px;
+  margin-right: 15px;
+  background: var(--content-bg-3);
 }
 </style>

src/pages/User/Abyss.vue

@@ -142,19 +142,19 @@ async function shareAbyss(): Promise<void> {
 </script>
 <style lang="css" scoped>
 .ua-box {
-  box-shadow: 0 0 10px 0 var(--common-shadow-4);
   display: flex;
-  justify-content: left;
-  align-items: center;
   height: calc(100vh - 35px);
+  align-items: center;
+  justify-content: left;
   border-radius: 5px;
+  box-shadow: 0 0 10px 0 var(--common-shadow-4);
 }
 
 .ua-tab {
-  font-family: var(--font-text);
-  color: var(--common-text-title);
   width: 100px;
   height: 100%;
+  color: var(--common-text-title);
+  font-family: var(--font-text);
 }
 
 .ua-tab-bottom {
@@ -171,32 +171,32 @@ async function shareAbyss(): Promise<void> {
 }
 
 .ua-window {
-  padding: 10px;
   width: calc(100% - 100px);
   height: 100%;
+  padding: 10px;
 }
 
 .ua-window-item {
   height: 100%;
   padding: 10px;
-  overflow-y: auto;
   border-radius: 5px;
   box-shadow: 0 0 10px var(--common-shadow-2);
+  overflow-y: auto;
 }
 
 .uaw-title {
   display: flex;
   align-items: center;
   color: var(--common-text-title);
-  font-size: 20px;
   font-family: var(--font-title);
+  font-size: 20px;
 }
 
 .uaw-title :nth-child(2n) {
+  margin-right: 10px;
+  margin-left: 10px;
   color: var(--common-color-white);
   text-shadow: 0 0 10px var(--common-color-yellow);
-  margin-left: 10px;
-  margin-right: 10px;
 }
 
 .dark .uaw-title :nth-child(2n) {
@@ -205,32 +205,32 @@ async function shareAbyss(): Promise<void> {
 }
 
 .uaw-o-box {
-  width: 100%;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
   grid-gap: 10px;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .uaw-d-box {
-  width: 100%;
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
   grid-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
 }
 
 .user-empty {
   position: absolute;
   top: calc(50vh - 200px);
   left: calc(50vw - 400px);
-  background: var(--common-shadow-2);
+  display: flex;
-  border-radius: 5px;
   width: 800px;
   height: 400px;
-  display: flex;
   flex-direction: column;
   align-items: center;
-  font-size: 1.5rem;
+  border-radius: 5px;
+  background: var(--common-shadow-2);
   color: var(--common-text-title);
   font-family: var(--font-title);
+  font-size: 1.5rem;
 }
 </style>

src/pages/User/Characters.vue

@@ -122,39 +122,39 @@ function selectRole(role: TGApp.Sqlite.Character.UserRole) {
 <style lang="css" scoped>
 .uc-box {
   width: 100%;
-  border-radius: 5px;
   padding: 10px;
+  border-radius: 5px;
   box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .uc-top {
+  display: flex;
   width: 100%;
   height: 50px;
-  border-radius: 5px;
-  padding: 10px;
-  display: flex;
   align-items: center;
+  padding: 10px;
+  border-radius: 5px;
 }
 
 .uc-top-title {
-  font-family: var(--font-title);
-  font-size: 20px;
   margin-right: 10px;
   color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
 }
 
 .uc-top-btn {
-  font-family: var(--font-text);
   border-radius: 5px;
+  margin-left: 15px;
   background: var(--common-shadow-2);
   color: var(--common-color-white);
-  margin-left: 15px;
+  font-family: var(--font-text);
 }
 
 .uc-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, 180px);
-  grid-gap: 10px v-bind(gridGap);
   padding: 10px;
+  grid-gap: 10px v-bind(gridGap);
+  grid-template-columns: repeat(auto-fill, 180px);
 }
 </style>

src/pages/User/Record.vue

@@ -115,32 +115,32 @@ function getTheme() {
 <style lang="css" scoped>
 .ur-box {
   width: 100%;
-  border-radius: 5px;
   padding: 10px;
+  border-radius: 5px;
   box-shadow: 0 0 10px var(--common-shadow-4);
 }
 
 .ur-top {
+  display: flex;
   width: 100%;
   height: 50px;
-  border-radius: 5px;
-  padding: 10px;
-  display: flex;
   align-items: center;
+  padding: 10px;
+  border-radius: 5px;
 }
 
 .ur-top-title {
-  font-family: var(--font-title);
-  font-size: 20px;
   margin-right: 10px;
   color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 20px;
 }
 
 .ur-top-btn {
-  font-family: var(--font-text);
   border-radius: 5px;
+  margin-left: 15px;
   background: var(--common-shadow-2);
   color: var(--common-color-white);
-  margin-left: 15px;
+  font-family: var(--font-text);
 }
 </style>

src/pages/WIKI/Abyss.vue

@@ -29,17 +29,17 @@ function getUpdated() {
 </script>
 <style lang="css" scoped>
 .hta-title {
-  font-family: var(--font-title);
-  font-size: 20px;
   display: flex;
   align-items: end;
   justify-content: start;
+  font-family: var(--font-title);
+  font-size: 20px;
 }
 
 .hta-title :nth-child(2) {
   margin-left: 10px;
-  font-size: 12px;
   color: #5e7987; /* 淡蓝灰 */
+  font-size: 12px;
 }
 
 .hta-title :nth-child(2):hover {

src/pages/WIKI/Character.vue

@@ -33,8 +33,8 @@ function toOuter(item: TGApp.App.Character.WikiBriefInfo) {
 <style scoped>
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  grid-gap: 20px;
   padding: 20px;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
 }
 </style>

src/pages/WIKI/GCG.vue

@@ -175,18 +175,18 @@ async function searchCard() {
 </script>
 <style lang="css" scoped>
 .cards-tab {
-  font-family: Genshin, serif;
   margin-bottom: 20px;
   color: var(--content-text-3);
+  font-family: Genshin, serif;
 }
 
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  overflow: hidden;
-  grid-gap: 10px;
   padding: 10px;
   border-radius: 0 0 10px 10px;
-  overflow: hidden;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 }
 
 .cards-grid :hover {
@@ -195,21 +195,21 @@ async function searchCard() {
 
 .card-cls {
   position: relative;
+  overflow: hidden;
   width: 140px;
   height: 240px;
-  overflow: hidden;
-  transition: all 0.3s;
   border-radius: 10px;
+  transition: all 0.3s;
 }
 
 .card-cover {
   position: absolute;
-  transition: all 0.3s;
+  z-index: -1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: -1;
+  transition: all 0.3s;
 }
 
 .card-cls:hover .card-cover {
@@ -219,10 +219,10 @@ async function searchCard() {
 
 .card-border {
   position: absolute;
-  border-radius: 10px;
   top: 0;
   left: 0;
   overflow: hidden;
+  border-radius: 10px;
 }
 
 .card-border img {
@@ -242,16 +242,16 @@ async function searchCard() {
   position: absolute;
   bottom: 0;
   left: 0;
+  display: flex;
+  overflow: hidden;
   width: 100%;
   height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 0 10px 10px;
   background: rgb(0 0 0 / 50%);
   color: white;
-  display: flex;
-  font-size: small;
-  overflow: hidden;
   font-family: Genshin, serif;
-  border-radius: 0 0 10px 10px;
+  font-size: small;
-  justify-content: center;
-  align-items: center;
 }
 </style>

src/pages/WIKI/Weapon.vue

@@ -33,8 +33,8 @@ function toOuter(item: TGApp.App.Weapon.WikiBriefInfo) {
 <style scoped>
 .cards-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  grid-gap: 15px;
   padding: 15px;
+  grid-gap: 15px;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
 }
 </style>

src/views/t-anno-json.vue

@@ -60,11 +60,11 @@ onMounted(async () => {
 }
 
 .anno-title {
-  font-size: 20px;
+  margin: 20px 0;
   color: #546d8b;
   font-family: Genshin-Light, serif;
+  font-size: 20px;
   font-weight: 600;
-  margin: 20px 0;
 }
 
 .jv-container {

src/views/t-lottery.vue

@@ -158,34 +158,34 @@ onUpdated(() => {
 </script>
 <style lang="css">
 .lottery-box {
-  margin-bottom: 10px;
   padding: 10px;
+  border-radius: 25px 5px 5px;
+  margin-bottom: 10px;
   background: rgb(255 255 255 / 10%);
   box-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  border-radius: 25px 5px 5px;
 }
 
 .lottery-title {
+  height: 40px;
+  margin-left: 40px;
+  color: var(--content-text-3);
   font-family: Genshin, serif;
   font-size: 20px;
-  height: 40px;
-  color: var(--content-text-3);
-  margin-left: 40px;
 }
 
 .lottery-list {
+  padding: 5px;
+  border-radius: 5px;
+  margin-bottom: 10px;
   background: rgb(0 0 0 / 40%);
   box-shadow: 0 0 10px rgb(255 255 255 / 10%);
-  border-radius: 5px;
-  padding: 5px;
-  margin-bottom: 10px;
   color: #faf7e8;
   font-family: Genshin-Light, serif;
 }
 
 .reward-title {
-  font-size: 16px;
   margin: 10px;
+  font-size: 16px;
 }
 
 .reward-subtitle {
@@ -194,27 +194,27 @@ onUpdated(() => {
 }
 
 .lottery-grid {
-  border-radius: 10px;
   display: grid;
+  border-radius: 10px;
   grid-template-columns: repeat(5, 1fr);
 }
 
 .lottery-sub-list {
-  background: var(--content-bg-2);
-  border-radius: 40px;
-  height: 40px;
-  margin: 5px;
-  font-family: Genshin-Light, serif;
-  align-items: center;
   display: flex;
+  height: 40px;
+  align-items: center;
+  border-radius: 40px;
+  margin: 5px;
+  background: var(--content-bg-2);
+  font-family: Genshin-Light, serif;
 }
 
 .lottery-user-avatar {
   display: inline-block;
+  overflow: hidden;
   width: 30px;
   height: 30px;
   border-radius: 50%;
-  overflow: hidden;
   margin: 5px;
 }
 
@@ -226,24 +226,24 @@ onUpdated(() => {
 
 .lottery-user-nickname {
   display: inline-block;
-  font-size: 14px;
-  font-family: Genshin-Light, "仿宋", serif;
-  color: var(--content-text-3);
   overflow: hidden;
+  color: var(--content-text-3);
+  font-family: Genshin-Light, "仿宋", serif;
+  font-size: 14px;
 }
 
 .lottery-json {
+  border-radius: 25px 5px;
   margin-bottom: 10px;
   background: rgb(255 255 255 / 10%);
   box-shadow: 0 0 10px rgb(0 0 0 / 40%);
-  border-radius: 25px 5px;
-  font-family: Consolas, serif;
   color: #faf7e8;
+  font-family: Consolas, serif;
 }
 
 .jv-container {
-  background: rgb(0 0 0 / 60%) !important;
   border-radius: 25px 5px !important;
+  background: rgb(0 0 0 / 60%) !important;
   box-shadow: 0 0 10px rgb(0 0 0 / 40%) !important;
 }
 

src/views/t-news.vue

@@ -337,16 +337,16 @@ async function searchPost() {
 
 <style lang="css" scoped>
 .news-tab {
-  font-family: Genshin, serif;
   margin-bottom: 20px;
   color: var(--content-text-3);
+  font-family: Genshin, serif;
 }
 
 .news-grid {
-  font-family: Genshin, serif;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  font-family: Genshin, serif;
   grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
 }
 
 .news-card {
@@ -356,51 +356,51 @@ async function searchPost() {
 }
 
 .news-cover {
-  height: 150px;
   overflow: hidden;
+  height: 150px;
 }
 
 .news-cover :hover {
+  cursor: pointer;
   transform: scale(1.1);
   transition: all 0.3s linear;
-  cursor: pointer;
 }
 
 .news-cover img {
-  object-fit: cover;
   width: 100%;
   height: 150px;
+  object-fit: cover;
   transition: all 0.3s linear;
 }
 
 /* switch */
 .switch-btn {
-  font-family: Genshin, serif;
-  background: var(--btn-bg-1);
   height: 40px;
-  margin-right: 10px;
   margin-top: 5px;
+  margin-right: 10px;
+  background: var(--btn-bg-1);
   color: var(--content-text-3);
+  font-family: Genshin, serif;
 }
 
 .switch-chan {
-  font-family: Genshin, serif;
-  background: var(--btn-bg-1);
   height: 40px;
-  margin-right: 10px;
   margin-top: 5px;
+  margin-right: 10px;
+  background: var(--btn-bg-1);
   color: var(--content-text-3);
+  font-family: Genshin, serif;
 }
 
 /* load more */
 .load-news {
-  font-family: Genshin, serif;
-  margin-top: 10px;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding: 10px;
   border-radius: 5px;
+  margin-top: 10px;
+  font-family: Genshin, serif;
   transition: all 0.3s linear;
 }
 

src/views/t-post-json.vue

@@ -54,11 +54,11 @@ onMounted(async () => {
 }
 
 .post-title {
-  font-size: 20px;
+  margin: 20px 0;
   color: #546d8b;
   font-family: Genshin-Light, serif;
+  font-size: 20px;
   font-weight: 600;
-  margin: 20px 0;
 }
 
 .jv-container {