2626 <div v-else class =" image-placeholder" >
2727 <Icon :name =" item.icon" color =" var(--vp-c-text-1)" size =" 5em" />
2828 </div >
29- <div
30- v-if =" item.free?.valueOf() === false"
31- class =" price-corner-tag paid"
32- >
33- <span class =" price-corner-text" >Not Free</span >
34- </div >
3529 <div v-if =" item.expired" class =" expired-overlay" >
36- <span class =" expired-text" >已过期</span >
30+ <span class =" expired-text" >已过期,不适用 </span >
3731 </div >
3832 </div >
3933 <div class =" card-content" >
@@ -105,14 +99,31 @@ const filteredItems = computed(() => {
10599})
106100
107101const colors = {
108- ' mysql' : { color: ' #006484' , backgroundColor: ' rgba(0, 100, 132, 0.1)' , borderColor: ' rgba(0, 100, 132, 0.2)' },
102+ ' unfree' : {
103+ color: ' #ff5733' ,
104+ backgroundColor: ' rgba(255, 87, 51, 0.1)' ,
105+ borderColor: ' rgba(255, 87, 51, 0.2)' ,
106+ },
107+ ' mysql' : {
108+ color: ' #006484' ,
109+ backgroundColor: ' rgba(0, 100, 132, 0.1)' ,
110+ borderColor: ' rgba(0, 100, 132, 0.2)'
111+ },
109112 ' pgsql' : {
110113 color: ' #336699' ,
111114 backgroundColor: ' rgba(51, 102, 153, 0.1)' ,
112115 borderColor: ' rgba(51, 102, 153, 0.2)'
113116 },
114- ' 后端' : { color: ' #009485' , backgroundColor: ' rgba(0,148,133,0.1)' , borderColor: ' rgba(0,148,133,0.2)' },
115- ' 前端' : { color: ' #a855f7' , backgroundColor: ' rgba(168, 85, 247, 0.1)' , borderColor: ' rgba(168, 85, 247, 0.2)' },
117+ ' 后端' : {
118+ color: ' #009485' ,
119+ backgroundColor: ' rgba(0,148,133,0.1)' ,
120+ borderColor: ' rgba(0,148,133,0.2)'
121+ },
122+ ' 前端' : {
123+ color: ' #a855f7' ,
124+ backgroundColor: ' rgba(168, 85, 247, 0.1)' ,
125+ borderColor: ' rgba(168, 85, 247, 0.2)'
126+ },
116127}
117128
118129const handleCardClick = (item : PluginItem ) => {
@@ -254,27 +265,6 @@ const handleCardClick = (item: PluginItem) => {
254265 border : 1px solid var (--vp-c-border );
255266}
256267
257- .price-corner-tag {
258- position : absolute ;
259- top : 0 ;
260- right : 0 ;
261- color : white ;
262- padding : 0 0.6rem ;
263- font-size : 0.75rem ;
264- font-weight : 500 ;
265- border-bottom-left-radius : 4px ;
266- transform : translate (1px , -1px );
267- z-index : 1 ;
268- }
269-
270- .price-corner-tag.paid {
271- background : #ff5733 ;
272- }
273-
274- .price-corner-text {
275- text-transform : uppercase ;
276- }
277-
278268.search-container {
279269 position : relative ;
280270 width : 50% ;
@@ -304,10 +294,11 @@ const handleCardClick = (item: PluginItem) => {
304294 left : 0 ;
305295 width : 100% ;
306296 height : 100% ;
307- background-color : rgba (0 , 0 , 0 , 0.6 );
297+ background-color : rgba (0 , 0 , 0 , 0.5 );
308298 display : flex ;
309299 align-items : center ;
310300 justify-content : center ;
301+ z-index : 2 ;
311302}
312303
313304.expired-overlay-card {
@@ -316,7 +307,7 @@ const handleCardClick = (item: PluginItem) => {
316307 left : 0 ;
317308 width : 100% ;
318309 height : 100% ;
319- background-color : rgba (0 , 0 , 0 , 0.6 );
310+ background-color : rgba (0 , 0 , 0 , 0.5 );
320311 z-index : 3 ;
321312 pointer-events : none ;
322313}
@@ -325,6 +316,7 @@ const handleCardClick = (item: PluginItem) => {
325316 color : white ;
326317 font-size : 1.5rem ;
327318 font-weight : bold ;
319+ text-shadow : 0 0 5px black ;
328320}
329321
330322@media (max-width : 767px ) {
0 commit comments