fix: 新分支迁移mp

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

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ElImage } from 'element-plus';
-
 /** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
@@ -22,13 +20,13 @@ defineExpose({
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
-      <!-- TODO @hw：第一篇文章（头条）图片是铺满，不过要限制高度；第二篇文章开始（次条），图片是在右侧，也是需要限制宽高 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
-          <div class="news-content flex items-center justify-center">
-            <ElImage
-              :src="article.picUrl || article.thumbUrl"
-              class="material-img"
+          <div class="news-content">
+            <img
+              :src="article.picUrl"
+              :preview="false"
+              class="material-img flex w-[100px] items-center justify-center"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -40,12 +38,13 @@ defineExpose({
       <a v-else :href="article.url" target="_blank">
         <div class="news-main-item">
           <div class="news-content-item">
-            <div class="news-content-item-title">{{ article.title }}</div>
-            <div class="news-content-item-img flex items-center justify-center">
+            <div class="news-content-item-img">
+              <div class="news-content-item-title">{{ article.title }}</div>
+
               <img
-                :src="article.picUrl || article.thumbUrl"
-                class="material-img"
-                height="100%"
+                :src="article.picUrl"
+                class="h-[70px] w-[70px] object-cover"
+                alt="文章图片"
               />
             </div>
           </div>
@@ -56,12 +55,15 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 
 .news-home {
   width: 100%;
   margin: auto;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .news-main {
@@ -83,42 +85,34 @@ defineExpose({
   display: inline-block;
   width: 98%;
   padding: 1%;
-  font-size: 12px;
+  font-size: 16px;
   color: #fff;
   white-space: normal;
-  background-color: black;
-  opacity: 0.65;
+  margin-left: 10px;
 }
 
 .news-main-item {
-  padding: 5px 0;
   background-color: #fff;
-  border-top: 1px solid #eaeaea;
 }
 
 .news-content-item {
+  padding: 10px;
+  box-sizing: border-box;
   position: relative;
 }
 
 .news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  margin-left: 1%;
-  font-size: 10px;
-  white-space: normal;
+  flex: 1;
+  font-size: 14px;
 }
 
 .news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  margin-right: 1%;
-  background-color: #acadae;
+  display: flex;
+  align-items: center;
 }
 
 .material-img {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
+  width: auto;
+  object-fit: cover;
 }
 </style>