fix: 新分支迁移mp

apps/web-ele/src/views/mp/components/wx-music/wx-music.vue

@@ -42,16 +42,21 @@ defineExpose({
       :underline="false"
       target="_blank"
       :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+      class="block"
     >
-      <div class="mp-card__body rounded-sm bg-background p-2.5">
-        <div class="mp-card__avatar">
-          <img :src="thumbMediaUrl" alt="" />
+      <div
+        class="bg-background flex items-center rounded-sm border border-[#e8e8e8] p-4 transition hover:border-black/10 hover:shadow-sm"
+      >
+        <div
+          class="mr-3 h-12 w-12 overflow-hidden rounded-full border border-transparent"
+        >
+          <img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
         </div>
-        <div class="mp-card__detail">
-          <div class="mp-card__title" style="margin-bottom: unset">
+        <div class="flex-1">
+          <div class="mb-3 text-base font-medium text-[#000000d9]">
             {{ title }}
           </div>
-          <div class="mp-card__info" style="height: unset">
+          <div class="line-clamp-3 h-16 overflow-hidden text-sm text-black/45">
             {{ description }}
           </div>
         </div>
@@ -59,10 +64,3 @@ defineExpose({
     </ElLink>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
-
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
-</style>