perf: 根据ui优化首页

pages/discovery/discovery.vue

@@ -1,45 +1,52 @@
 <template>
 	<view class="discovery tn-safe-area-inset-bottom" style="max-height: 100vh">
-		
+	<tn-nav-bar customBack>
+		<view slot="back" class='tn-custom-nav-bar__back' >
+			 
+			<image style="width: 30px;height: 28px;margin-left:4px"  @click="reFetchData()" src="../../static/logo.png"></image>
+			 
+		</view>
 	
-	<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
-		<view style="width: 100%;padding-bottom: 0;">
+		<view slot="default" style="display: flex;">
+			<view style="flex:1;">
+				<text :style="{fontSize:(wxFontSize)+'px'}">速立保</text>
+			</view>
+			 
+		</view>
+	</tn-nav-bar>	
+	
+	<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background-color: #f7f7f7;">
+		<view style="width: 100%;padding-bottom: 0;background-color: #fff;">
 			<view style="display: flex;width: 100%;background: linear-gradient(0deg, #fff, #f8f8f">
-				<view style="margin:16px">
-					<image style="width: 56px; height: 50px; margin-right: 12px;" :mode="fit"
-						src="../../static/logo.png"></image>
-				</view>
-				<view style="margin:16px 0;margin-left: -8px;">
-					<view style="font-weight: bold;font-size: 22px;" :style="{fontSize:(fontSize+4)+'px'}">速立保</view>
-					<text style="margin-top:12px;color:#888;font-size:15px" :style="{fontSize:(fontSize-3)+'px'}">生物制药产业一站式产品资源供需平台</text>
+				 
+				<view style="flex:1; margin:16px; text-align: center;border-radius: 47px;" class="bg-slogan">
+					 
+					<text style="margin-top:12px;color:#fff;font-size:17px;margin: 16px;" :style="{fontSize:(fontSize)+'px'}">生物制药产业一站式产品资源供需平台</text>
 				</view>
 			</view>
 			
 			
 		</view>
 		
-		<view style="padding: 0px 0 4px 16px;font-weight: bold;" :style="{fontSize:(fontSize-1)+'px'}">
-			 优质入驻企业 ▼ 
+		<view style="padding: 16px;color:#333;" :style="{fontSize:(fontSize-1)+'px'}">
+			 优质入驻企业
 		</view>
 		
 		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"  v-if="!hideComps">
 			<swiper-item v-for="(item,index) of companyList" :key="item.id" style="position:relative">
-				<text class="tn-icon-close" @click="closeComps" style="position: absolute;right: 0px;color: red;background: #00000066;border-top-right-radius: 0;padding: 0px 2px 2px 6px;font-size: 13px;
-    border-bottom-left-radius: 30px;"></text>
-				<!-- <view style="position: absolute;bottom: 28px;right: 16px;color: #ffffff75;" class="swiper-item uni-bg-red">{{item.company}}</view> -->
+				<text class="tn-icon-close" @click="closeComps" style="position: absolute;right: 0px;color: #fff;background: #00000066;border-top-right-radius: 0;padding: 4px;font-size: 13px;border-bottom-left-radius: 8px;"></text>
 				<image :src="item.picUrl?item.picUrl:'../../static/bg.png'" @click="showImgs(index,companyList)"  mode="aspectFill" style="width: 100%;height: 100%;"></image>
 			</swiper-item>
 		</swiper>
 		<view v-if="hideComps" style="height: 200px;display: flex;align-items: center;justify-content: center;color: #2196f36e;">
 			<text @click="showComps()">〈恢复展示〉</text>
 		</view>
-		<view style="padding: 16px 0 4px 16px;font-weight: bold;"  :style="{fontSize:(fontSize-1)+'px'}">
-			 优质供应 ▼ 
+		<view style="padding: 16px;color:#333;"  :style="{fontSize:(fontSize-1)+'px'}">
+			 优质供应
 		</view>
 		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"  v-if="!hideProds">
 			<swiper-item v-for="(item,index) of prodList" :key="item.id">
-				<text class="tn-icon-close" @click="closeProds" style="position: absolute;right: 0px;color: red;background: #00000066;border-top-right-radius: 0;padding: 0px 2px 2px 6px;font-size: 13px;border-bottom-left-radius: 30px;"></text>
-				<!-- <view style="position: absolute;bottom: 28px;right: 16px;color: #ffffff75;" class="swiper-item uni-bg-red">{{item.company}}</view> -->
+				<text class="tn-icon-close" @click="closeProds" style="position: absolute;right: 0px;color: #fff;background: #00000066;border-top-right-radius: 0;padding: 4px;font-size: 13px;border-bottom-left-radius: 8px;"></text>
 				<image :src="item.picUrl?item.picUrl:'../../static/bg.png'" @click="showImgs(index,prodList)" style="width: 100%;height: 100%;"  mode="aspectFill"></image>
 			</swiper-item>
 			 
@@ -54,14 +61,14 @@
 		<view><text style="font-size:30px">国际产品展示中心</text></view>
 		<view style="margin-top:24px"><text style="font-size:20px;">生物制药产业一站式产品资源供需平台</text></view> -->
 		 
-		<view style="display: flex;margin-top:32px;margin: 24px;">
+		<view style="display: flex;margin-top:32px;margin: 24px 16px;">
 			<view style="flex: 1;padding: 0 0 0 16px;" class="bg01" @click="showAdd">
-				<text style="font-size: 32px;margin-right: 10px;vertical-align: sub;" class="tn-icon-email-fill" ></text>
+				<image src="../../static/tu/needi.png" style="width: 36px;height: 36px; vertical-align: middle;margin-top: -6px;margin-right: 8px;"></image>
 				<text style="line-height: 72px;font-size: 18px;" :style="{fontSize:(fontSize+1)+'px'}">我要什么</text>
 				
 			</view>
 			<view style="flex: 1;padding: 0 0 0 16px;" class="bg02" @click="showAdd2">
-				<text style="font-size: 32px;margin-right: 10px;vertical-align: sub;" class="tn-icon-paperbag-fill" ></text>
+				<image src="../../static/tu/sharei.png" style="width: 36px;height: 36px; vertical-align: middle;margin-top: -6px;margin-right: 8px;"></image>
 				<text style="line-height: 72px;font-size: 18px;" :style="{fontSize:(fontSize+1)+'px'}">我有什么</text>
 			</view>
 		</view>
@@ -200,7 +207,7 @@
 }
 .bg01{
 	color: #fff;
-	background-image: url(./../../static/bg01.png);
+	background-image: url(./../../static/tu/needbg.png);
 	background-size: cover;
 	height: 72px;
 	border-radius: 20px;
@@ -208,12 +215,21 @@
 }
 .bg02{
 	color: #fff;
-	background-image: url(./../../static/bg02.png);
+	background-image: url(./../../static/tu/sharebg.png);
 	background-size: cover;
 	height: 72px;
 	border-radius: 20px;
 }
 
+.bg-slogan{
+    color: #fff;
+    background-image: url(./../../static/tu/slogan-min.png);
+     
+	background-size: cover;
+	    line-height: 40px;
+	    background-repeat: no-repeat;
+}
+
 /* 底部安全边距 start*/
 	.tn-tabbar-height {
 		min-height: 120rpx;

pages/home/home.vue

@@ -21,7 +21,7 @@
 						<view class="justify__author__info" @click="tn('')">
 							<view class="tn-flex tn-flex-row-center">
 								<view class="tn-flex tn-flex-row-center tn-flex-col-center">
-									<view class="" style="width: 5px;height: 5px;background: #E18730;border-radius: 0px 0px 0px 0px;">
+									<view class="" style="width: 5px;height: 5px;background: #E18730;border-radius: 50%;margin-right: 4px;">
 										 
 									</view>
 									<view class="tn-padding-right">
@@ -46,12 +46,7 @@
 					<view
 						class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify tn-flex-col-center tn-flex-row-left"
 						>
-						<!-- <view v-for="(label_item,label_index) in item.label" :key="label_index"
-							class="blogger__desc__label tn-float-left tn-margin-right">
-							<text class="blogger__desc__label--prefix tn-icon-topics-fill"></text>
-							<text class="tn-text-df">{{ label_item }}</text>
-						</view> -->
-						<!-- 不用限制长度了，因为发布的时候限制长度了-->
+						 
 						<text
 							class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df" style="color:#747E87" :style="{fontSize:(wxFontSize-2)+'px'}">{{ item.content }}</text>
 					</view>
@@ -59,8 +54,7 @@
 
 
 					<block v-if="item.imgList">
-						<view v-if="[1,2,4].indexOf(item.imgList.length) != -1" class="tn-padding-top-xs"
-							@click="tn('')">
+						<view v-if="[1,2,4].indexOf(item.imgList.length) != -1" class="tn-padding-top-xs">
 							<image v-for="(image_item,image_index) in item.imgList" :key="image_index"
 								class="blogger__main-image" :class="{
 	            'blogger__main-image--1 tn-margin-bottom-sm': item.imgList.length === 1,
@@ -90,10 +84,9 @@
 					</block>
 					<view v-for="file in item.fileDetailList" style="background-color:#005da60d ;margin-bottom: 4px;padding: 4px 8px;border-radius: 4px;" :key="file.id" v-if="!isImage(file.fileName)">
 						<view>
-							<text class="tn-icon-link" :style="{fontSize:(wxFontSize-4)+'px',color:'#005DA6;'}"></text>
+							<image src="../../static/tu/link.png" style="width: 18px;height: 18px;vertical-align: bottom;"></image>
 							<view style="display: inline;margin-left:8px;color:#005DA6;" :style="{fontSize:(wxFontSize-3)+'px'}" @click="clickLink(file.ftpUrl,file.fileName)">
 								{{file.fileName}}</view>
-
 						</view>
 					</view>
 
@@ -110,37 +103,38 @@
 								@click="showActionSheet(item)"></text>
 								
 							<view v-if="curItem.id==item.id&&showSheet" class="pop-dia" style="position: absolute;
-    background: #ddd;
+    background: #E4F1FB;
     display: block;
     right: 10px;
-    top: 24px;border-radius: 16px;z-index: 900;border-top-right-radius: 0">
-	<text  class="tn-icon-close" style="float: right;padding:8px;color:#333" @click="hideSheet()"></text>
-	<view class="content" style="padding: 24px 36px;font-size: 16px;line-height: 24px; width: calc(100vw - 52px);"
+    top: 24px;border-radius: 6px;z-index: 900;">
+	 
+	<view class="content" style="padding: 8px;font-size: 16px;line-height: 24px; width: 180px;border-radius: 6px;"
 					v-if="!showContact">
-					<button @click="linkTel()" style="border-radius:30px;color:#fff;background-color: #1d60b1;"><text
-							class="tn-icon-service" style="margin-right: 12px;"></text> 联系需方</button>
+					<button @click="linkTel()" style="border: none;border-radius: 0;color: #333333;background-color: #E4F1FB;border-bottom: 1px solid rgb(0 93 166 / 0.2);">
+						 <image src="../../static/tu/call.png" style="width: 26px;height: 26px;margin-right:10px;vertical-align: middle;"> 联系需方</button>
 					<!-- <view>联系我们帮助对接</view> -->
 					<button v-if="!collStatus" @click="addColl"
-						style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
-							class="tn-icon-star" style="margin-right: 12px;"></text>
+						style="border: none;border-radius: 0;color: #333333;background-color: #E4F1FB;border-bottom: 1px solid rgb(0 93 166 / 0.2);" type="default" plain="true">
+						<image src="../../static/tu/coll.png" style="width: 26px;height: 26px;margin-right:10px;vertical-align: middle;">
 						收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;藏</button>
 					<button v-if="collStatus" @click="delColl"
-						style="margin-top:10px;border-radius:30px;" type="default" plain="true"><text
-							class="tn-icon-star-fill" style="margin-right: 12px;"></text> 取消收藏</button>
+						style="border: none;border-radius: 0;color: #333333;background-color: #E4F1FB;border-bottom: 1px solid rgb(0 93 166 / 0.2);" type="default" plain="true">
+						<image src="../../static/tu/coll.png" style="width: 26px;height: 26px;margin-right:10px;vertical-align: middle;"> 取消收藏</button>
 					<button open-type="share"
-						style="margin-top:10px;border-radius:30px;" type="default" plain="true" :data-coupon="curItem"><text
-							class="tn-icon-send" style="margin-right: 12px;"></text>
+						style="border: none;border-radius: 0;color: #333333;background-color: #E4F1FB;" type="default" plain="true" :data-coupon="curItem">
+						<image src="../../static/tu/share.png" style="width: 26px;height: 26px;margin-right:10px;vertical-align: middle;">
 						转&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发</button>
 				</view>
-				<view class="content bg-content" style="padding: 50px 36px;padding-bottom: 32px;font-size: 16px;width: calc(100vw - 52px);line-height: 24px;    border-radius: 16px;
-    border-top-right-radius: 0;"
+				<view class="content " style="background: linear-gradient( 180deg, #DAECFA 0%, #FFFFFF 27%, #FFFFFF 100%);padding: 24px 40px;padding-bottom: 32px;font-size: 16px;width: calc(100vw - 80px);line-height: 24px;border-radius: 12px;"
 					v-if="showContact">
-					<view><text style="font-size: 20px;font-weight: bold;" v-if="curContact.company">{{curContact.company}}</text></view>
-					<view style="margin-top:20px;
-	   font-weight: bold;
-	   font-size: 20px;"><text class="tn-icon-my-formal"></text><text style="margin-left: 6px;">{{curContact.contactPerson}}</text> </view>
-					<view style="margin-top:20px;font-size: 20px;font-weight: bold;" @click="showTel(curContact.contactMethod)"><text class="tn-icon-tel"></text>
-	<text style="margin-left: 4px;">{{curContact.contactMethod}}</text> </view>
+					<view><text style="font-size: 20px;" v-if="curContact.company">{{curContact.company}}</text></view>
+					<view style="margin-top:10px;font-size: 20px;text-align: center">
+						<image src="../../static/tu/person.png" style="width: 25px;height: 25px;vertical-align: middle;">
+					<text style="margin-left: 6px;">{{curContact.contactPerson}}</text> </view>
+					<view style="margin-top:10px;font-size: 20px;text-align: center" @click="showTel(curContact.contactMethod)">
+						<image src="../../static/tu/tel.png" style="width: 25px;height: 25px;vertical-align: middle;">
+						<text style="margin-left: 4px;">{{curContact.contactMethod}}</text> 
+					</view>
 				</view>
 	
 	</view>

pages/index/index.vue

@@ -10,7 +10,7 @@
 				</view>
 			
 				<view slot="default" style="display: flex;">
-					<view style="flex:1;margin-left:25px;">
+					<view style="flex:1;">
 						<text :style="{fontSize:(wxFontSize)+'px'}">我要什么</text>
 					</view>
 					 
@@ -29,7 +29,7 @@
 				</view>
 			
 				<view slot="default" style="display: flex;">
-					<view style="flex:1;margin-left:25px">
+					<view style="flex:1;">
 						<text :style="{fontSize:(wxFontSize)+'px'}">我有什么</text>
 					</view>
 				</view>

unpackage/dist/dev/mp-weixin/pages/discovery/discovery.json

@@ -1,4 +1,6 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "tn-nav-bar": "/tuniao-ui/components/tn-nav-bar/tn-nav-bar"
+  }
 }