gx

src/components/list-right-img.vue

@@ -13,7 +13,7 @@
       </div>
     </div>
     <div class="right">
-      <img src="@/assets/cc3.png" alt="" />
+      <img :src="newData.imgUrl" alt="" />
     </div>
   </div>
 </template>
@@ -30,9 +30,9 @@ const quanwen = () => {
 .list-1 {
   display: flex;
   min-height: 70px;
-  justify-content: space-around;
-  padding-left: 12px;
-  padding-right: 12px;
+  justify-content:space-between;
+  padding-left: 16px;
+  padding-right: 16px;
 
   .left {
     width: 230px;
@@ -77,7 +77,8 @@ const quanwen = () => {
 
     .yesDevelop {
       display: inline-block;
-      width: 231px;
+      // width: 231px;
+      width: 61vw;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;

src/views/znyt.vue

@@ -81,27 +81,15 @@ const mainList = reactive([
   },
   {
     id: 2,
-    title: "老有康养",
+    title: "幼有善育",
   },
   {
     id: 3,
-    title: "老有康养",
+    title: "学有优教",
   },
   {
     id: 4,
-    title: "老有康养",
-  },
-  {
-    id: 5,
-    title: "老有康养",
-  },
-  {
-    id: 6,
-    title: "老有康养",
-  },
-  {
-    id: 7,
-    title: "老有康养",
+    title: "劳有所得",
   },
 ]);
 const chooseId = ref("1");
@@ -111,48 +99,44 @@ const choose = (id) => {
 };
 const records = reactive({
   list: [
-    {
-      id: 1,
-      display: 0,
-      title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或",
-      createdAt: "11月27日",
-      eye: "8888",
-    },
     {
       id: 1,
       display: 1,
-      title: "“三问”个人养老金：是什么、怎么缴、如何领？红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或或或或或或或或",
+      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
       createdAt: "11月27日",
+      imgUrl: "/src/assets/cc4.png",
       eye: "8888",
     },
     {
-      id: 1,
+      id: 2,
+      display: 1,
+      title: "100场社区活动——教你轻松玩转智能手机",
+      createdAt: "11月27日",
+      imgUrl: "/src/assets/cc3.png",
+      eye: "8888",
+    },
+    {
+      id: 3,
       display: 0,
       title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！",
       createdAt: "11月27日",
       eye: "8888",
     },
     {
-      id: 1,
+      id: 4,
       display: 1,
-      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
+      title: "100场社区活动——教你轻松玩转智能手机",
       createdAt: "11月27日",
+      imgUrl: "/src/assets/cc3.png",
       eye: "8888",
     },
     {
-      id: 1,
+      id: 5,
       display: 0,
       title: "2023年养老金政策震撼发布！你的养老金将发生这样的变化！",
       createdAt: "11月27日",
       eye: "8888",
     },
-    {
-      id: 1,
-      display: 1,
-      title: "“三问”个人养老金：是什么、怎么缴、如何领？",
-      createdAt: "11月27日",
-      eye: "8888",
-    },
   ],
 });
 </script>
@@ -297,12 +281,13 @@ const records = reactive({
   display: none;
 }
 .line {
-  width: 100%;
+  width: 100vw;
   height: 0px;
   border-radius: 0px 0px 0px 0px;
   opacity: 1;
   border: 1px solid #f1f1f1;
   margin-top: 16px;
   margin-bottom: 16px;
+  text-align: center;
 }
 </style>