弹窗实现

pages/study/index.vue

@@ -175,7 +175,9 @@
 						<text class="text">说明</text>
 					</view>
 					<view class="body_down">
+						<view class="text_ele">
 						请各位选课的同学提前阅读本课程的 “教学大纲与计划”、“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组每位同学在网上学习的活动轨迹都会自动被系统记录將作为大家个人线上参与的评价依据;请大家务必......
+						</view>
 					</view>
 				</view>
 				<view class="body_item">
@@ -266,7 +268,7 @@
 				</view>
 				<view class="item_check">
 					<u-checkbox-group>
-						<u-checkbox v-model="checked" shape="square" label="下次进入不在弹窗"></u-checkbox>
+						<u-checkbox v-model="checked" :checked="isChecked" shape="square" label="下次进入不在弹窗" @change="checkedBox"></u-checkbox>
 					</u-checkbox-group>
 				</view>
 			</view>
@@ -290,6 +292,7 @@
 				planDown: false,
 				upContent: false,
 				checked: false,
+				isChecked: false,
 				learnModal: false,
 				Applistatus:'',
 				autonomyStatusShow: false,
@@ -432,9 +435,14 @@
 			},
 			onLearnModal() {
 				this.learnModal = true
+				this.isChecked = localStorage.getItem("checkedTrue") === "false"
+			},
+			checkedBox(value){
+				this.checked = value
 			},
 			outLearnModal() {
 				this.learnModal = false
+				localStorage.setItem("checkedTrue",!this.checked)
 			},
 			reSetList() {
 				this.studyList.forEach(item=>{
@@ -728,6 +736,12 @@
 				if (this.tabIndex == 1 && this.studyList.length == 0) {
 					this.getLearning()
 				} else if (this.tabIndex == 2) {
+					if(localStorage.getItem("checkedTrue")!=null){
+						this.learnModal = localStorage.getItem("checkedTrue") === "true"
+						this.isChecked = localStorage.getItem("checkedTrue") === "false"
+					}else{
+						this.learnModal = true
+					}
 					//this.history()
 				} else if (this.tabIndex == 0 && this.couresList.length == 0) {
 					this.loadBoeData()
@@ -1010,7 +1024,7 @@
 				padding: 40rpx 28rpx 32rpx 40rpx;
 				position: relative;
 				.name{
-					height: 44rpx;
+					// height: 44rpx;
 					font-weight: 600;
 					font-size: 32rpx;
 					color: #FFFFFF;
@@ -1018,7 +1032,8 @@
 					margin-bottom: 20rpx;
 				}
 				.job{
-					height: 40rpx;
+					// height: 40rpx;
+					flex-wrap: wrap;
 					font-weight: 400;
 					font-size: 28rpx;
 					color: #FFFFFF;
@@ -1135,7 +1150,17 @@
 				border-radius: 8rpx;
 				font-weight: 400;
 				font-size: 28rpx;
-				color: #333333;
+				text-align: left;
+				.text_ele{
+					overflow: hidden;
+					word-break:break-all;
+					text-overflow: ellipsis;
+					-webkit-box-orient: vertical; 
+					display: -webkit-box;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					-webkit-line-clamp: 6;
+				}
 			}
 			.body_plan{
 				margin: 32rpx 30rpx 30rpx 28rpx;