feature: live style

jhlive/jhlive.nvue

@@ -9,22 +9,28 @@
 				<text class="top_left_box_text1">{{title}}</text>
 				<text class="top_left_box_text2">{{subtitle}}</text>
 			</view>
-			<image v-if="showFav" class="top_left_box_collect" :src="isFav?collect:notCollect" @click="$emit('onFav', isFav)"></image>
+			<view v-if="showFav" class="top_left_box_collect">
+				<text class="top_left_box_collect_text">{{isFav?textFav:textNotFav}}</text>
+			</view>
+			<!-- <image v-if="showFav" class="top_left_box_collect" :src="isFav?collect:notCollect" @click="$emit('onFav', isFav)"></image> -->
 		</view>
 		<view class="bottom-message">
 			<!-- 对话信息 --> 
 			<!-- <view class="jhim-message-box"> -->
 			<scroll-view scroll-y="true" v-if="showIm" class="jhim-message-box">
 			  <view class="jhim-message" v-for="(item, index) in imMsgs.slice(-10)" :key="index">
-				<text class="jhim-message-text2">{{item.name}}：</text>
-				<text class="jhim-message-text">{{item.text}}</text>
+				<view class="jhim-message-show" >
+					<!-- <text class="jhim-message-text2">{{item.name}}：</text> -->
+					<text class="jhim-message-text">{{item.name}}：{{item.text}}</text>
+				</view>
+				<view class="jhim-message-none"></view>
 			  </view>
 			 </scroll-view>
 			<!-- </view> -->
 			<!-- 下方功能 -->
 			<view v-if="showIm||btns.length" class="bottom-box">
 				<view v-if="showIm&&!imStatus" class="jhim-input-box">
-				  <image class="jhim-icon" :src="inputIcon"/>
+				  <image class="jhim-icon" :src="imgs.chat"/>
 				  <input 
 					class="jhim-input"
 					placeholder="请输入" 
@@ -38,12 +44,12 @@
 				<view class="bottom-box-btns">
 					<!-- <view class="" v-if="isAuthor && showBeauty" @click="btnBeautify"> -->
 					<view v-if="isAuthor&&showBeauty" class="bottom-box-btns-arr" @click="btnBeautify">
-						<image class="btns-icon" :src="beautyIcon"/>
+						<image class="btns-icon" :src="imgs.beauty"/>
 						<text class="btns-text">美颜</text>
 					</view>
 					<!-- <view class="" v-if="isAuthor && showSwitch" @click="btnChangeCamera"> -->
 					<view v-if="isAuthor&&showSwitch" class="bottom-box-btns-arr" @click="btnChangeCamera">
-						<image class="btns-icon" :src="switchIcon"/>
+						<image class="btns-icon" :src="imgs.switch"/>
 						<text class="btns-text">切换</text>
 					</view>
 					<view class="bottom-box-btns-arr" v-for="(item,index) in btns" :key="index" @click="clickBtns(index, item)">
@@ -51,7 +57,7 @@
 						<text v-if="item.title" class="btns-text">{{item.title}}</text>
 					</view>
 					<view v-if="showLike" class="bottom-box-btns-arr" @click="btnLike">
-						<image class="btns-icon" :src="likeIcon"/>
+						<image class="btns-icon" :src="imgs.like"/>
 					</view>
 				</view>
 			</view>
@@ -60,6 +66,7 @@
 </template>
 
 <script>
+	import imgs from './res.js'
 	import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
 	// #ifdef MP-WEIXIN
 	import JhliveApp from './live-wechat';
@@ -77,6 +84,7 @@
 		//#endif
 		data() {
 			return {
+				imgs,
 				imInput: '',
 				userSig: '',
 				beautifyLevel: false,
@@ -101,6 +109,8 @@
 			subtitle: String,
 			isFav: {default: false,type: Boolean}, // 是否显示收藏
 			showFav: {default: false,type: Boolean}, // 是否显示收藏
+			textFav: {default: '已关注',type: String}, 
+			textNotFav: {default: '关注',type: String}, 
 			showBeauty: {default: false,type: Boolean}, // 是否显示美颜
 			showSwitch: {default: false,type: Boolean}, // 是否显示切换摄像头
 			showLike: {default: false,type: Boolean},
@@ -216,7 +226,9 @@
 <style scoped>
 	.container-jhlive {
 		position: relative;
+		/* #ifndef APP-NVUE */
 		display: flex;
+		/* #endif */
 		flex-direction: column;
 		align-items: stretch;
 		background-color: black;
@@ -238,7 +250,9 @@
 		z-index: 100;
 		background-color: rgba(115, 111, 117, 0.4);
 		border-radius: 1000px;
+		/* #ifndef APP-NVUE */
 		display: flex;
+		/* #endif */
 		flex-direction: row;
 		padding: 5px;
 		justify-content: center;
@@ -252,8 +266,15 @@
 		background-color: white;
 	}
     .top_left_box_collect {
-		width: 26px;
-		height: 26px;
+		/* width: 26px;
+		height: 26px; */
+		border-radius: 1000px;
+		padding: 3px 5px;
+		background-color: green;
+	}
+	.top_left_box_collect_text {
+		color: white;
+		font-size: 20rpx;
 	}
 	.top_left_box_text {
 		margin-left: 10px;
@@ -273,42 +294,54 @@
 	
 	.bottom-message {
 		width: 750rpx;
+		/* #ifndef APP-NVUE */
 		display: flex;
+		/* #endif */
 		flex-direction: column;
 		position: absolute;
 		bottom: 0px;
 	}
 	.bottom-box {
-		width: 750rpx;
+		/* #ifndef APP-NVUE */
 		display: flex;
+		/* #endif */
 		flex-direction: row;
 		bottom: 0px;
 		background-color:rgba(0, 0, 0, 0.4);
 	}
 	.jhim-message-box {
-		max-height: 230px;
-	  /* position: absolute; */
-	  /* padding: 5;
-	  left: 5px; */
-	  /* display: flex; */
-	  /* z-index: 100; */
+		max-height: 375rpx;
 	}
 	.jhim-message {
-	  /* flex: 1; */
-	  width: 400rpx;
-	  margin-left: 10px;
-	  margin-right: 10px;
+	  /* #ifndef APP-NVUE */
 	  display: flex;
+	  /* #endif */
 	  flex-direction: row;
 	  align-items: center;
+	  margin-left: 10px;
+	  margin-right: 10px;
+	  margin-bottom: 10px;
+	}
+	.jhim-message-show {
 	  background-color: rgba(115,119,120,0.3);
+	  border-radius: 15px;
 	  padding: 5px;
-	  border-radius: 12px;
-	  margin-bottom: 10px;
+	}
+	.jhim-message-none {
+	  flex: 1;
 	}
 	.jhim-message-text {
+	  max-width: 400rpx;
+	  
 	  color: #fff;
 	  font-size: 14px;
+	  /* #ifndef APP-NVUE */
+	  word-break: break-all;
+	  /* #endif */
+	  /* #ifdef APP-NVUE */
+	  lines: 5; 
+	  word-break: anywhere;
+	  /* #endif */
 	}
 	.jhim-message-text2 {
 	  color: #C8C8C8;
@@ -335,7 +368,7 @@
 	  font-size: 28rpx;
 	}
 	.jhim-logining {
-	  padding: 5px;
+	  padding: 10px;
 	  flex: 1;
 	}
 	.jhim-logining-text {