#

components/detailBlock/detailBlock.vue

@@ -14,17 +14,18 @@
 			   </view>
 				<text class="zdwz" style="color: #0056a8;float: right;" @click="zdwz">收起</text> -->
 				<view class="content">
+					
 					<view ref="p" class="p">
-						这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
-						来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会展开显示了。
+						<text style="color: #999999;">教研室概况：</text>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
+						来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会
 					</view>
 					<!-- <text ref="p" class="p">
 						这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
 						来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会展开显示了。
 					</text> -->
-					<text class="btn-more" @click="qqq">
+					<view ref="btnnn" class="btn-more" @click="qqq">
 						{{isAll?'收起':'展开'}}
-					</text>
+					</view> 
 				</view>
 		</view>
 	</view>
@@ -61,9 +62,11 @@
 				this.isAll=!this.isAll
 				if(this.isAll){
 					this.$refs.p.$el.classList.add('is-expanded')
+					this.$refs.btnnn.$el.classList.add('is-zd')
 					console.log(this.$refs.p.$el.classList);
 				}else{
 					this.$refs.p.$el.classList.remove('is-expanded')
+					this.$refs.btnnn.$el.classList.remove('is-zd')
 					console.log(this.$refs.p.$el.classList);
 				}
 			}
@@ -84,14 +87,19 @@
 		.cont{
 			color: #999999;
 			margin-bottom: 10px;
+			text{
+				color: #666666;
+			}
 			.content{
 				// display: flex;
 				// float: left;
 			}
 			.content .p{
 				width: 90%;
+				color: #666666;
 				// max-width: 100%;
 				// display:inline-block;
+				display: block;
 				// float: left;
 				overflow:hidden;
 				text-overflow:ellipsis;
@@ -103,14 +111,21 @@
 			.content .p.is-expanded{
 				overflow:visible;
 				white-space:normal;
+				width: 100%;
+				display: inline-block;
 				/*文字溢出时不再显示省略号*/
 			}
 			.btn-more{
 				float: right;
+				display: inline-block;
 				// width: 60px;
 				transform: translate(0,-100%);
 				color: #0056a8;
 			}	
+			.btn-more.is-zd{
+				transform: none;
+				// transform: translate(0,0);
+			}
 		}
 	}
 </style>

unpackage/dist/dev/mp-weixin/components/detailBlock/detailBlock.js

@@ -152,6 +152,7 @@ exports.default = void 0;
 //
 //
 //
+//
 var _default2 = {
   name: "detailBlock",
   props: {
@@ -183,9 +184,11 @@ var _default2 = {
       this.isAll = !this.isAll;
       if (this.isAll) {
         this.$refs.p.$el.classList.add('is-expanded');
+        this.$refs.btnnn.$el.classList.add('is-zd');
         console.log(this.$refs.p.$el.classList);
       } else {
         this.$refs.p.$el.classList.remove('is-expanded');
+        this.$refs.btnnn.$el.classList.remove('is-zd');
         console.log(this.$refs.p.$el.classList);
       }
     }

unpackage/dist/dev/mp-weixin/components/detailBlock/detailBlock.wxml

@@ -1,2 +1,2 @@
-<view class="detailBlock"><block wx:if="{{!item.isShow}}"><view class="tit">教研室详情</view></block><block wx:else><view class="tit">活动详情</view></block><view class="cont">会议时间：<text>10月7日上午八点(周日)</text></view><view class="cont">活动形式：<text style="color:#0056a8;">线上直播</text></view><view class="cont"><view class="content"><view data-ref="p" class="p vue-ref">这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
-					来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会展开显示了。</view><text data-event-opts="{{[['tap',[['qqq',['$event']]]]]}}" class="btn-more" bindtap="__e">{{''+(isAll?'收起':'展开')+''}}</text></view></view></view>
+<view class="detailBlock"><block wx:if="{{!item.isShow}}"><view class="tit">教研室详情</view></block><block wx:else><view class="tit">活动详情</view></block><view class="cont">会议时间：<text>10月7日上午八点(周日)</text></view><view class="cont">活动形式：<text style="color:#0056a8;">线上直播</text></view><view class="cont"><view class="content"><view data-ref="p" class="p vue-ref"><text style="color:#999999;">教研室概况：</text>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起
+					来。如果需要查看全部内容，可以点击“查看更多按钮，文字内容就会</view><view data-ref="btnnn" data-event-opts="{{[['tap',[['qqq',['$event']]]]]}}" class="btn-more vue-ref" bindtap="__e">{{''+(isAll?'收起':'展开')+''}}</view></view></view></view>

unpackage/dist/dev/mp-weixin/components/detailBlock/detailBlock.wxss

@@ -37,8 +37,13 @@
   color: #999999;
   margin-bottom: 10px;
 }
+.detailBlock .cont text {
+  color: #666666;
+}
 .detailBlock .cont .content .p {
   width: 90%;
+  color: #666666;
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -47,12 +52,19 @@
 .detailBlock .cont .content .p.is-expanded {
   overflow: visible;
   white-space: normal;
+  width: 100%;
+  display: inline-block;
   /*文字溢出时不再显示省略号*/
 }
 .detailBlock .cont .btn-more {
   float: right;
+  display: inline-block;
   -webkit-transform: translate(0, -100%);
           transform: translate(0, -100%);
   color: #0056a8;
 }
+.detailBlock .cont .btn-more.is-zd {
+  -webkit-transform: none;
+          transform: none;
+}