Переглянути джерело

更新应用配置和文档,优化活动信息展示样式

lzj 4 днів тому
батько
коміт
a032601326

Різницю між файлами не показано, бо вона завелика
+ 700 - 27
README.md


+ 28 - 8
index_fenbao/HuoHuaLiYong/YanXue/HuoHuaLiYong.vue

@@ -34,7 +34,7 @@
 			</view>
 			<view class="yx_box" @click="researchBtn(research.id)">
 				<view style="position: absolute; left: 6rpx; top: 6rpx"><image style="width: 160rpx; height: 240rpx" :src="research.image"></image></view>
-				<view style="margin-left: 200rpx">
+				<view class="info">
 					<view class="wwd">{{ research.title }}</view>
 					<view class="time">活动时间:{{ (research.start_time && research.start_time.split(' ')[0]) || '' }}</view>
 				</view>
@@ -126,7 +126,7 @@
 				<view style="position: absolute; left: 6rpx; top: 6rpx">
 					<image style="width: 164rpx; height: 240rpx" :src="youJingList.image"></image>
 				</view>
-				<view style="margin-left: 200rpx">
+				<view class="info">
 					<view class="wwd">{{ youJingList.title }}</view>
 					<!-- <view class="time">文物路线一览表</view> -->
 				</view>
@@ -252,13 +252,20 @@ export default {
 	width: 92%;
 	height: 252rpx;
 	display: flex;
-	justify-content: space-around;
+	justify-content: flex-start;
 	align-items: center;
 	margin: auto;
 	margin-top: 34rpx;
 	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
 	background-size: 100% 100%;
 }
+.info {
+	margin-left: 200rpx;
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
 .gg_box {
 	width: 92%;
 	margin: auto;
@@ -305,30 +312,43 @@ export default {
 	margin-left: 50rpx !important;
 }
 .wwd {
-	width: 300rpx;
-	font-size: 36rpx;
+	font-size: 28rpx;
 	font-weight: 400;
 	color: #444444;
 	line-height: 52rpx;
+	white-space: wrap;
+	/* 限制两行 */
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+	/* text-overflow: ellipsis; */
 }
 .time {
-	width: 300rpx;
 	font-size: 28rpx;
 	color: rgba(68, 68, 68, 0.6);
 	line-height: 44rpx;
 	margin-top: 12rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .baoming {
 	display: flex;
-	/* width: 116rpx; */
+	flex: 0 0 116rpx;
+	width: 116rpx;
 	height: 56rpx;
 	line-height: 56rpx;
 	justify-content: center;
 	align-items: center;
-	margin-left: 32rpx;
+	margin: 0 20rpx;
 	font-size: 28rpx;
 	color: #eba869;
 	border: 2rpx solid #eba869;
+	border-radius: 8rpx;
+	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
 }
 .map_tit {
 	display: flex;

+ 26 - 5
index_fenbao/HuoHuaLiYong/YanXue/YanXue.vue

@@ -5,9 +5,9 @@
 			<view style="position: absolute; left: 6rpx; top: 6rpx">
 				<image style="width: 160rpx; height: 240rpx" :src="item.image"></image>
 			</view>
-			<view style="margin-left: 200rpx">
+			<view class="info">
 				<view class="wwd">{{ item.title }}</view>
-				<view class="time">活动时间:{{ item.start_time.split(' ')[0] }}</view>
+				<view class="time">活动时间:{{ (item.start_time || "").split(" ")[0] || "" }}</view>
 			</view>
 			<view class="baoming">
 				<text>报名</text>
@@ -33,7 +33,6 @@ export default {
 		// 文物研学
 		activityLists() {
 			this.$api.activityLists({ main_body_id: 1, type: 1 }, function (res) {
-				// console.log(res, '文物研学');
 				that.research = res.data;
 			});
 		},
@@ -62,33 +61,55 @@ export default {
 	height: 252rpx;
 	display: flex;
 	align-items: center;
+	/* keep children in a row and space for fixed button */
 	margin: auto;
 	margin-top: 34rpx;
 	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
 	background-size: 100% 100%;
 }
+.info {
+	margin-left: 200rpx;
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0; /* allow text to shrink and ellipsis if needed */
+}
 .wwd {
-	font-size: 36rpx;
+	font-size: 28rpx;
 	font-weight: 400;
 	color: #444444;
 	line-height: 52rpx;
+	white-space: wrap;
+	/* 限制两行 */
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 .time {
 	font-size: 28rpx;
 	color: rgba(68, 68, 68, 0.6);
 	line-height: 44rpx;
 	margin-top: 12rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .baoming {
 	display: flex;
+	flex: 0 0 116rpx; /* do not grow/shrink, fixed basis */
 	width: 116rpx;
 	height: 56rpx;
 	line-height: 56rpx;
 	justify-content: center;
 	align-items: center;
-	margin-left: 32rpx;
+	margin: 0 20rpx;
 	font-size: 28rpx;
 	color: #eba869;
 	border: 2rpx solid #eba869;
+	box-sizing: border-box;
+	overflow: hidden;
+	white-space: nowrap;
+	border-radius: 8rpx;
 }
 </style>

+ 30 - 8
pages/index/index.vue

@@ -86,7 +86,7 @@
 			<view style="position: absolute; left: 6rpx; top: 6rpx">
 				<image style="width: 160rpx; height: 240rpx" :src="research.image"></image>
 			</view>
-			<view style="margin-left: 200rpx">
+			<view class="info">
 				<view class="wwd">{{ research.title }}</view>
 				<view class="time">活动时:{{ (research.start_time && research.start_time.split(' ')[0]) || '' }}</view>
 			</view>
@@ -197,7 +197,7 @@ export default {
 		that.information = [];
 		this.gitRankingList();
 		this.user = this.$common.userInfo();
-		if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null || this.user === false) {
+		if (this.user === undefined || this.user === null || !Object.keys(this.user).length) {
 			/* 跳转到登录页 */
 			this.loginShow=true;
 			// this.$common.toLogin();
@@ -449,7 +449,7 @@ export default {
 </script>
 
 <style>
-/deep/.u-swiper-indicator__wrapper__dot--active {
+::v-deep .u-swiper-indicator__wrapper__dot--active {
 	width: 5px !important;
 }
 .box {
@@ -577,34 +577,56 @@ export default {
 	display: flex;
 	align-items: center;
 	padding-right: 10rpx;
-	justify-content: space-around;
+	justify-content: flex-start;
 	margin: auto;
 	margin-top: 34rpx;
 	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
 	background-size: 100% 100%;
 }
+.info {
+	margin-left: 200rpx;
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
 .wwd {
-	font-size: 36rpx;
+	font-size: 28rpx;
 	font-weight: 400;
 	color: #444444;
 	line-height: 52rpx;
+	white-space: wrap;
+	/* 限制两行 */
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
 }
 .time {
 	font-size: 28rpx;
 	color: rgba(68, 68, 68, 0.6);
 	line-height: 44rpx;
 	margin-top: 12rpx;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 .baoming {
 	display: flex;
-	width: 145rpx;
+	flex: 0 0 116rpx;
+	width: 116rpx;
 	height: 56rpx;
 	line-height: 56rpx;
 	justify-content: center;
 	align-items: center;
+	margin: 0 20rpx;
 	font-size: 28rpx;
 	color: #eba869;
 	border: 2rpx solid #eba869;
+	border-radius: 8rpx;
+	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
 }
 .hd_btm {
 	width: 90%;
@@ -672,10 +694,10 @@ export default {
 	margin-top: 10rpx;
 	margin-left: 10rpx;
 }
-/deep/.u-notice-bar.data-v-24c07869 {
+::v-deep .u-notice-bar.data-v-24c07869 {
 	border: 2rpx solid #ebc9a9;
 }
-/deep/.u-notice-bar.data-v-6862e5d8 {
+::v-deep .u-notice-bar.data-v-6862e5d8 {
 	border: 2rpx solid #ebc9a9;
 }
 .box-guanzhu3{