Parcourir la source

最近联系人列表样式调整

Xiao_123 il y a 1 mois
Parent
commit
b158aa2fd4
4 fichiers modifiés avec 47 ajouts et 43 suppressions
  1. 2 1
      pages.json
  2. 40 36
      pages/index/communicate.vue
  3. 1 1
      pages/index/position.vue
  4. 4 5
      static/style/index.scss

+ 2 - 1
pages.json

@@ -36,7 +36,8 @@
 		{
 			"path": "pages/index/communicate",
 			"style": {
-				"navigationBarTitleText": "最近联系人"
+				"navigationBarTitleText": "最近联系人",
+				"navigationStyle": "custom" 
 			}
 		},
 		{

+ 40 - 36
pages/index/communicate.vue

@@ -1,46 +1,50 @@
 <template>
-  <layout-page>
-		<view class="height defaultBgc">
-			<scroll-view class="scrollBox" scroll-y="true" >
-				<view class="box" v-for="item in items" :key="item.id" @tap="handleTo(item)">
-					<view class="box-header">
-						<template v-if="item.unread === '0'">
-							<image
-								class="enterAvatar"
-								:src="getUserAvatar(item?.userInfoVo?.userInfoResp?.avatar, item?.userInfoVo?.userInfoResp?.sex, !item?.userInfoVo && item.channel_id === 'system' ? true : false)"
-							></image>
-						</template>
-						<template v-else>
-							<uni-badge class="uni-badge-left-margin" :text="item.unread" absolute="rightTop" size="small">
+	<view>
+		<Navbar title="最近联系人" />
+		<layout-page style="position: relative;">
+			<view class="commonBackground" style="height: 160px; position: inherit; top: 0;"></view>
+			<view class="height defaultBgc" style="margin-top: -160px;">
+				<scroll-view class="scrollBox" scroll-y="true" >
+					<view class="box" v-for="item in items" :key="item.id" @tap="handleTo(item)">
+						<view class="box-header">
+							<template v-if="item.unread === '0'">
 								<image
 									class="enterAvatar"
 									:src="getUserAvatar(item?.userInfoVo?.userInfoResp?.avatar, item?.userInfoVo?.userInfoResp?.sex, !item?.userInfoVo && item.channel_id === 'system' ? true : false)"
 								></image>
-							</uni-badge>
-						</template>
-					</view>
-					<view class="box-content">
-						<view class="box-content-names">
-							<view class="name">
-								{{ item.thatName }}
-								<text class="nameSub">{{ formatName(item.enterpriseAnotherName) }}</text>
-								<span class="line" v-if="item.postNameCn && item.enterpriseAnotherName"></span>
-								<text class="nameSub">{{ item.postNameCn }}</text>
+							</template>
+							<template v-else>
+								<uni-badge class="uni-badge-left-margin" :text="item.unread" absolute="rightTop" size="small">
+									<image
+										class="enterAvatar"
+										:src="getUserAvatar(item?.userInfoVo?.userInfoResp?.avatar, item?.userInfoVo?.userInfoResp?.sex, !item?.userInfoVo && item.channel_id === 'system' ? true : false)"
+									></image>
+								</uni-badge>
+							</template>
+						</view>
+						<view class="box-content">
+							<view class="box-content-names">
+								<view class="name MiSans-Thin default-text-color">
+									{{ item.thatName }}
+								</view>
+								<view class="color-999 font-size-12 MiSans-Normal">{{ timesTampChange(+item.timestamp.padEnd(13, '0')) }}</view>
+							</view>
+							<view class="color-999 font-size-13 MiSans-Normal ellipsis" style="max-width: 100%;">
+								{{ formatName(item.enterpriseAnotherName) }}
 							</view>
 						</view>
-						<view class="box-content-text">{{ timesTampChange(+item.timestamp.padEnd(13, '0')) }}</view>
 					</view>
-				</view>
-				<image
-					v-if=" items.length===0 "
-					src="https://minio.citupro.com/dev/static/nodata.png"
-					mode="widthFix"
-					style="width: 100%;">
-				</image>
-				<uni-load-more status="noMore" />
-			</scroll-view>
-		</view>
-  </layout-page>
+					<image
+						v-if=" items.length===0 "
+						src="https://minio.citupro.com/dev/static/nodata.png"
+						mode="widthFix"
+						style="width: 100%;">
+					</image>
+					<uni-load-more status="noMore" />
+				</scroll-view>
+			</view>
+		</layout-page>
+	</view>
 </template>
 
 <script setup>
@@ -53,6 +57,7 @@ import { timesTampChange } from '@/utils/date'
 import { userStore } from '@/store/user'
 import { useIMStore } from '@/store/im'
 import { formatName } from '@/utils/getText'
+import Navbar from '@/components/Navbar'
 
 const IM = useIMStore()
 
@@ -159,7 +164,6 @@ async function init () {
   box-sizing: border-box;
 }
 .box {
-	background: #FFF;
 	height: 130rpx;
 	padding: 20rpx;
 	box-sizing: border-box;

+ 1 - 1
pages/index/position.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <Navbar :showLogo="true"></Navbar>
+    <Navbar :showLogo="true" />
     <view class="box defaultBgc">
       <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
         <view>

+ 4 - 5
static/style/index.scss

@@ -22,11 +22,6 @@
 .mt-5 { margin-top: 30rpx; }
 .mt-10 { margin-top: 60rpx; }
 
-// 公共渐变样式
-.commonBackground {
-  background: linear-gradient(180deg, #BCFEDE, #F7F8FA);
-}
-
 .cursor-pointer { cursor: pointer; }
 .font-weight-bold { font-weight: bold; }
 .text-center { text-align: center; }
@@ -108,6 +103,10 @@
 .defaultBgc {
   background-color: #f7f8fa;
 }
+// 公共渐变样式
+.commonBackground {
+  background: linear-gradient(180deg, #BCFEDE, #F7F8FA);
+}
 
 // 火苗
 // 水平左右分