💄 调整角色 overlay 样式，修复一些报错

BTMuli · Sep 5, 2023 · e33f824 · e33f824
1 parent 4724592
commit e33f824
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 81 deletions.
diff --git a/src/components/userCharacter/tuc-detail-constellation.vue b/src/components/userCharacter/tuc-detail-constellation.vue
@@ -23,26 +23,27 @@ defineProps<TucDetailConstellationProps>();
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  cursor: pointer;
 }
 
 .tuc-dc-lock {
   position: absolute;
   display: flex;
-  width: 50px;
-  height: 50px;
+  width: 54px;
+  height: 54px;
   align-items: center;
   justify-content: center;
+  padding: 3px;
   border-radius: 50%;
   background-color: rgb(0 0 0 / 50%);
 }
 
 .tuc-dc-icon {
-  width: 50px;
-  height: 50px;
-  padding: 5px;
+  width: 54px;
+  height: 54px;
+  padding: 3px;
+  border: 1px solid rgb(0 0 0/20%);
   border-radius: 50%;
-  background: rgb(0 0 0/ 20%);
+  background: rgb(50 56 68/50%);
 }
 
 .tuc-dc-icon img {

diff --git a/src/components/userCharacter/tuc-detail-desc-constellation.vue b/src/components/userCharacter/tuc-detail-desc-constellation.vue
@@ -56,11 +56,12 @@ function parseDesc(desc: string): string {
   align-items: start;
   justify-content: space-around;
   margin-left: 5px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddc-top {
   height: 20px;
-  color: var(--common-color-blue-2);
+  color: var(--tgc-blue-1);
 }
 
 .tuc-ddc-bottom {
@@ -72,6 +73,6 @@ function parseDesc(desc: string): string {
 }
 
 .tuc-ddc-bottom :nth-child(3) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 </style>
diff --git a/src/components/userCharacter/tuc-detail-desc-relic.vue b/src/components/userCharacter/tuc-detail-desc-relic.vue
@@ -4,7 +4,7 @@
       <span>圣遗物</span>
     </template>
     <template #content>
-      <TucDetailRelic :model-value="props.modelValue" pos="props.modelValue.pos" />
+      <TucDetailRelic :model-value="props.modelValue" :pos="`${props.modelValue.pos}`" />
       <div class="tuc-ddr-content">
         <div class="tuc-ddrc-top">
           <span>{{ props.modelValue.name }}</span>
@@ -48,14 +48,15 @@ const props = defineProps<TucDetailDescRelicProps>();
 
 .tuc-ddrc-top {
   height: 20px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddrc-top :nth-child(1) {
   margin-right: 10px;
 }
 
 .tuc-ddrc-top :nth-child(3) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 
 .tuc-ddrc-bottom {
@@ -69,6 +70,7 @@ const props = defineProps<TucDetailDescRelicProps>();
 }
 
 .tuc-ddrd-title {
+  color: var(--tgc-dark-1);
   font-family: var(--font-title);
   font-size: 16px;
 }

diff --git a/src/components/userCharacter/tuc-detail-desc-weapon.vue b/src/components/userCharacter/tuc-detail-desc-weapon.vue
@@ -49,6 +49,7 @@ const box = computed(() => {
   align-items: start;
   justify-content: space-around;
   margin-left: 5px;
+  color: var(--tgc-dark-1);
 }
 
 .tuc-ddwc-top {
@@ -61,7 +62,7 @@ const box = computed(() => {
 
 .tuc-ddwc-top :nth-child(2),
 .tuc-ddwc-top :nth-child(4) {
-  color: var(--common-color-yellow);
+  color: var(--tgc-yellow-1);
 }
 
 .tuc-ddwc-bottom {

diff --git a/src/components/userCharacter/tuc-detail-desc.vue b/src/components/userCharacter/tuc-detail-desc.vue
@@ -15,25 +15,25 @@
 <style lang="css" scoped>
 .tuc-dd-box {
   padding: 10px;
-  border: 2px solid var(--common-color-grey-2);
+  border: 1px solid rgb(0 0 0 /40%);
   border-radius: 5px;
-  backdrop-filter: blur(20px);
-  background: rgb(255 255 255 / 20%);
+  background: var(--tgc-white-1);
 }
 
 .tuc-dd-title {
   width: 100%;
-  color: var(--common-color-blue);
+  color: var(--tgc-dark-1);
   font-family: var(--font-title);
   font-size: 20px;
   text-align: left;
 }
 
 .tuc-dd-divider {
   width: 100%;
-  height: 2px;
+  height: 1px;
   margin: 5px 0;
-  background: var(--common-color-grey-2);
+  background: var(--tgc-dark-1);
+  opacity: 0.5;
 }
 
 .tuc-dd-content {
@@ -45,19 +45,15 @@
 }
 
 .tuc-dd-desc {
-  overflow: hidden;
   width: 100%;
   max-height: 50px;
   margin-top: 5px;
-  color: var(--common-color-black);
+  color: var(--tgc-dark-1);
   font-family: var(--font-text);
   font-size: 14px;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   text-align: left;
   word-break: break-all;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
 }
 </style>