UI Optimize

client/components.d.ts

@@ -47,8 +47,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
-    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']

client/src/components/index/FilmList.vue

@@ -260,7 +260,9 @@ watchEffect(() => {
   position: absolute;
   width: 0;
   height: 0;
-  border-width: 6px;
+  bottom: -5px;
+  right: -5px;
+  border-width: 5px;
   border-style: solid;
 }
 </style>
@@ -377,9 +379,7 @@ watchEffect(() => {
   }
 
   .cus_remark::after {
-    bottom: -6px;
-    right: -6px;
-    border-color: transparent transparent transparent #67d9e8cc;
+    border-color: transparent transparent transparent rgb(103 217 232 / 0.5);
   }
 
   .card-external-title {
@@ -485,14 +485,12 @@ watchEffect(() => {
     top: 8px;
     font-size: 12px;
     padding: 3px 6px;
-    background-color: #ff69b4fa; /* 粉红色 */
+    background-color: #FF69B4C7; /* 粉红色 */
   }
 
   /* 核心：画小三角 */
   .cus_remark::after {
-    bottom: -6px;
-    right: -7px;
-    border-color: transparent transparent transparent #ff69b4fa;
+    border-color: transparent transparent transparent #FF69B480;
   }
 }
 </style>

client/src/style.css

@@ -20,6 +20,7 @@
     --text-title-color: #FBA518;
     --text-content-color: #9499a0;
     --text-content-color-light: rgba(255, 255, 255, 0.6);
+    --text-content-color-highlight: rgb(255, 255, 255);
 
     /*公共颜色*/
 
@@ -44,6 +45,8 @@
 
     --bg-fill-light: #8d00fb1a;
 
+    --border-color-light: rgba(255, 255, 255, 0.1);
+    --border-color-highlight: rgba(255, 255, 255, 0.25);
 }
 
 
@@ -135,6 +138,20 @@ button:focus-visible {
     color: rgba(255, 255, 255, 0.75);
 }
 
+/*单行文本溢出*/
+.single-line {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/*多行文本溢出*/
+.multi-line {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    word-break: break-all;
+}
 
 /*滚动条样式*/
 @media (min-width: 768px) {

client/src/views/index/Home.vue

@@ -50,8 +50,8 @@
             <h3 class="hot_title">🔥热播{{ item.nav.name }}</h3>
             <template v-for="(m,i) in item.hot.slice(0,12)">
               <div class="content_right_item">
-                <a :href="`/filmDetail?link=${m.mid}`"><b class="top_item">{{ i + 1 + '.' }}</b>
-                  <span>{{ m.name }}</span></a>
+                <a :href="`/filmDetail?link=${m.mid}`"><b class="top_item" :style="{ backgroundColor: i==0?'#B931FC':i==1?'#FF71CD':i==2?'#59D5E0':'#FEEE917C' }" >{{ i + 1 + '.' }}</b>
+                  <span class="single-line">{{ m.name }}</span></a>
               </div>
             </template>
           </el-col>
@@ -175,7 +175,7 @@ a {
 }
 
 .nav_category > a:hover {
-  color: #1890ff;
+  color: #FFBB64;
 }
 
 .nav_ul > li {
@@ -198,13 +198,15 @@ a {
 
 .content_right {
   width: 100%;
-  padding-left: 18px;
+  padding: 0 20px;
+  border: 1px solid var(--border-color-light);
+  border-radius: 8px;
 }
 
 .content_right_item {
   display: flex;
   padding-left: 10px;
-  border-bottom: 1px solid rgb(46, 46, 46);
+  border-bottom: 1px solid var(--border-color-highlight);
 }
 
 .content_right_item > a {
@@ -215,27 +217,37 @@ a {
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
-  -o-text-overflow: ellipsis;
+  justify-content: start;
   white-space: nowrap;
 }
 
 .hot_title {
   text-align: left;
   margin: 8px 0;
+  color: #FFBB64;
 }
 
 :deep(.top_item) {
-  color: red;
-  /*font-style: oblique 10deg;*/
   font-style: italic;
-  /*font-family: Inter;*/
   margin-right: 6px;
+  padding: 2px 3px 0 3px;
+  line-height: 100%;
+  border-radius: 5px;
 }
 
-.content_right_item a span:hover {
-  color: orange;
+.content_right_item span{
+  font-size: 14px;
+  font-weight: bold;
+  display: inline-block;
+  max-width: 80%;
+  transition: transform 0.3s ease;
+  line-height: 100%;
 }
 
+.content_right_item:hover span {
+  color: #FFBB64;
+  transform: translateX(10px);
+}
 
 </style>