feat(页面布局): 优化搜索页面和实时资讯页面的布局样式

- 在搜索页面添加返回按钮并调整输入框样式
- 重新设计实时资讯页面的搜索区域布局
- 新增index2.vue组件用于文章列表展示
- 调整多个页面的间距和边距样式

src/components/articleList/index2.vue

@@ -0,0 +1,320 @@
+<template>
+  <view class="list" v-if="data.length">
+    <view class="listItem" v-for="item in props.data" :key="item.id" @click="handleClick(item)">
+      <view class="listItemHeader">
+        <view class="ListItemImg" v-if="item.picture">
+          <image :src="item.picture" class="ListItemImage" mode="widthFix" style="width: 204rpx" />
+          <image class="ListItemBg" :src="item.picture" style="width: 100%; height: 100%" />
+          <view class="tag" v-if="item.newType !== 'search'">{{ item.tag }}</view>
+        </view>
+        <view class="listItemHeaderContent">
+          <view v-if="!isLogin">
+            <text :class="['listItemTitle']">{{ item.title.slice(0, 3) }}</text>
+            <text :class="['listItemTitle', isLogin ? '' : 'mohu']">
+              {{ item.title.slice(3, item.title.length) }}
+            </text></view
+          >
+          <view v-else>
+            <view :class="['listItemTitle1']" v-html="item.title"> </view>
+          </view>
+          <view :class="['listItemAbstract', isLogin ? '' : 'mohu']" v-if="item.newType !== 'search'" v-html="item.summary"></view>
+          <view :class="['listItemAbstract', isLogin ? '' : 'mohu']" v-else v-html="item.MarkInRedContent || item.abstract"></view>
+        </view>
+      </view>
+
+      <!-- <view class="tabContainer">
+        <view class="tag">{{ item.tag }}</view>
+      </view> -->
+
+      <view :class="['listItemContent', isLogin ? '' : 'mohu']">
+        <view style="display: flex">
+          <view class="tag">{{ item.tag }}</view>
+          <view class="listItemTime" style="margin-left: 10rpx">{{ item.time }}</view>
+        </view>
+
+        <view class="r_option">
+          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/eye_icon%402x.png"></image>
+          <text class="option_text">{{ item.readNums }}</text>
+
+          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/like_icon%402x.png"></image>
+          <text class="option_text">{{ item.likeNums }}</text>
+
+          <image class="option_icon" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png"></image>
+          <text class="option_text">{{ item.shareNums }}</text>
+        </view>
+      </view>
+
+      <!-- <view class="listItemFooter" v-if="item.needpay"></view> -->
+    </view>
+  </view>
+
+  <u-empty mode="news" v-else> </u-empty>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { onShow, onLoad } from "@dcloudio/uni-app";
+
+const emit = defineEmits(["handleListJump", "onClick"]);
+const isLogin = ref(uni.getStorageSync("token"));
+
+const props = defineProps({
+  // 列表内容
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+console.log("props ===>", props.data);
+const handleListJump = (item) => {
+  emit("handleListJump", item);
+};
+
+// 点击新闻传给父组件
+const handleClick = (item: any) => {
+  emit("onClick", item);
+};
+</script>
+
+<style lang="scss" scoped>
+.list {
+  box-sizing: border-box;
+  background-color: #fff;
+  padding: 0 40rpx 30rpx 40rpx;
+  border-radius: 10rpx;
+  font-family: "SourceHanSansCN-Regular";
+
+  .listItem {
+    border-bottom: 2rpx solid rgba(51, 51, 51, 0.1);
+    box-sizing: border-box;
+    padding: 30rpx 0;
+
+    .listItemHeader {
+      display: flex;
+      justify-content: space-between;
+
+      .ListItemImg {
+        width: 204rpx;
+        height: 204rpx;
+        border-radius: 9rpx;
+        overflow: hidden;
+        background-color: #c4c4c4;
+        flex-shrink: 0;
+        position: relative;
+        margin-right: 12rpx;
+
+        .ListItemImage {
+          width: 100%;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          z-index: 9;
+        }
+
+        .ListItemBg {
+          filter: blur(30rpx);
+        }
+
+        .tag {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          box-sizing: border-box;
+          padding: 6rpx 16rpx;
+          border-radius: 4rpx;
+          background-color: #e7303f;
+          // font-size: 20rpx;
+          font-size: var(--h6-font-size);
+          color: #fff;
+          z-index: 9;
+        }
+      }
+
+      .listItemHeaderContent {
+        // width: 100%;
+        box-sizing: border-box;
+        padding-left: 0rpx;
+        display: flex;
+        flex-direction: column;
+
+        .listItemTitle1 {
+          font-size: 32rpx;
+          font-size: var(--h1-font-size);
+          color: #333;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          word-break: break-all;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #192236;
+          line-height: 45rpx;
+          text-align: left;
+          font-style: normal;
+        }
+        .listItemTitle {
+          // font-size: 32rpx;
+          // font-size: var(--h1-font-size);
+          // color: #333;
+          // display: -webkit-box;
+          // -webkit-box-orient: vertical;
+          // -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          word-break: break-all;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #192236;
+          line-height: 45rpx;
+          text-align: left;
+          font-style: normal;
+
+          // text-align: left;
+          &.noAbstract {
+            -webkit-line-clamp: 4;
+          }
+
+          .isVip {
+            display: inline-block;
+            width: 50rpx;
+            height: 29rpx;
+            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
+            background-size: cover;
+          }
+        }
+
+        .listItemTitleContent {
+          // font-size: 32rpx;
+          font-size: var(--h1-font-size);
+          // color: #333;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          // font-weight: bold;
+
+          .isVip {
+            display: inline-block;
+            width: 50rpx;
+            height: 29rpx;
+            background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/icon_vip.png);
+            background-size: cover;
+            box-sizing: border-box;
+            margin-right: 12rpx;
+          }
+        }
+
+        .listItemAbstract {
+          box-sizing: border-box;
+          padding-top: 12rpx;
+          // font-size: 26rpx;
+          font-size: var(--h3-font-size);
+          color: rgba(51, 51, 51, 0.6);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #2d3849;
+          line-height: 33rpx;
+          text-align: left;
+          font-style: normal;
+        }
+      }
+    }
+
+    .listItemContent {
+      // font-size: 20rpx;
+      font-size: var(--h6-font-size);
+      color: #b9b9b9;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 21rpx 0 0 0;
+
+      .listItemData {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .dataItem {
+          margin-right: 12rpx;
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .tabContainer {
+      display: flex;
+      box-sizing: border-box;
+      padding-top: 21rpx;
+
+      .tag {
+        box-sizing: border-box;
+        padding: 6rpx 16rpx;
+        border-radius: 4rpx;
+        background-color: #e7303f;
+        // font-size: 20rpx;
+        font-size: var(--h6-font-size);
+        color: #fff;
+      }
+    }
+
+    .listItemFooter {
+      height: 74rpx;
+      margin-top: 15rpx;
+      background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/vip_sub_2.png);
+      background-size: cover;
+    }
+  }
+}
+
+.listItemTitleContentText {
+  font-family: "SourceHanSansCN-Medium";
+}
+
+.r_option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+
+  .option_icon {
+    width: 24rpx;
+    height: 24rpx;
+  }
+
+  .option_text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #192236;
+    line-height: 33rpx;
+    text-align: justify;
+    font-style: normal;
+  }
+}
+
+.mohu {
+  filter: blur(7rpx);
+}
+</style>

src/pages/realtimeInfo/index.vue

@@ -79,11 +79,11 @@
     </view>
 
     <view style="background-color: white; margin-top: 40rpx">
+      <view style="width: 100vw; display: flex; justify-content: space-between; align-items: center">
+        <indexMenuTitle title="编辑精选 Top20" style="margin-top: 10rpx"></indexMenuTitle>
         <view class="r_sreach">
           <!-- <image class="top_bk" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png"></image> -->
-
+          <!-- <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image> -->
-        <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png"> </image>
-
           <view class="sreach" @click="goSreach">
             <view class="sreach_icon">
               <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
@@ -93,7 +93,7 @@
             </view>
           </view>
         </view>
-      <indexMenuTitle title="编辑精选 Top20"></indexMenuTitle>
+      </view>
       <RankList :newsList="newsList"></RankList>
     </view>
 
@@ -468,7 +468,7 @@ onMounted(async () => {
   // top: 10px;
   // left: 0;
   // z-index: 9999;
-  background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png");
+  // background: url("https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/top_bg.png");
 }
 
 .logo_text {
@@ -482,9 +482,12 @@ onMounted(async () => {
   padding: 0rpx 30rpx;
   background-color: #fff;
   border-radius: 100rpx;
-  width: 80vw;
+  // width: 90vw;
-  height: 68rpx;
+  height: 63rpx;
   margin-left: 20rpx;
+  border: 1px solid #e7e7e7;
+  margin-top: 5rpx;
+  // box-shadow: 0 0 10rpx rgba(97, 97, 97, 0.1);
 }
 
 .sreach_icon {

src/pages/sreachReq/index.vue

@@ -20,7 +20,9 @@
 
     <!-- 搜索 start -->
     <view class="sreach">
-      <view style="width: 75vw; margin-left: 50rpx">
+      <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon" @click="handleBack" />
+
+      <view style="width: 75vw">
         <u-input
           v-model="keyWord"
           @change="handleChange"
@@ -46,7 +48,7 @@
         v-if="screenList.length === 0"
         text="无搜索结果"
         width="157"
-        height="50"
+        height="100"
         icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"></u-empty>
     </view>
 
@@ -68,7 +70,7 @@
 import { ref, watch } from "vue";
 import { Session } from "@/utils/storage";
 import { onShow, onLoad } from "@dcloudio/uni-app";
-import List from "@/components/articleList/index.vue";
+import List from "@/components/articleList/index2.vue";
 import { searchNews, unlockColumn } from "@/api";
 import { extractText, formatTimestamp } from "@/utils/util";
 import LoginPopup from "@/components/loginPopup/index.vue";
@@ -246,7 +248,7 @@ onShow(() => {
     display: flex;
     align-items: center;
     // height: 60rpx;
-    gap: 20rpx;
+    // gap: 20rpx;
     box-sizing: border-box;
     padding: 12rpx 0;
     position: sticky;
@@ -262,6 +264,7 @@ onShow(() => {
     border-radius: 20rpx;
     padding: 0 20rpx;
     border-radius: 100rpx;
+    margin-left: 10rpx;
   }
 
   :deep(.u-input) {
@@ -306,7 +309,11 @@ onShow(() => {
     color: #828b92;
   }
 }
-
+.back_icon {
+  width: 50rpx;
+  height: 50rpx;
+  margin-left: 10rpx;
+}
 .custom-bav-bar {
   width: 100%;
   height: 88rpx;
@@ -316,11 +323,6 @@ onShow(() => {
   justify-content: center;
   position: relative;
 
-  .back_icon {
-    width: 40rpx;
-    height: 40rpx;
-  }
-
   .logo_icon {
     width: 168rpx;
     height: 40rpx;
@@ -351,5 +353,6 @@ onShow(() => {
   line-height: 45rpx;
   text-align: right;
   font-style: normal;
+  margin-left: 50rpx;
 }
 </style>