提出评价

src/App.vue

@@ -66,6 +66,9 @@ view {
 .fz-30 {
 	font-size: 30rpx;
 }
+.fz-28 {
+	font-size: 28rpx;
+}
 .fz-24 {
 	font-size: 24rpx;
 }
@@ -80,6 +83,13 @@ view {
 .flex {
 	display: flex;
 }
+.flex-jcsb {
+	display: flex;
+	justify-content: space-between;
+}
+.tar{
+	text-align: right;
+}
 .fw-600 {
 	font-weight: 600;
 }

src/pages/courseDetail/submit.vue

@@ -20,14 +20,23 @@
 						<img class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix" />
 					</view>
 					<view class="num-box">
-						<view class="">综合评分</view>
-						<view class="">
-							<uv-slider v-model="num" min="0" max="10"></uv-slider>
+						<view class="font_pf fz-28 c-666">综合评分</view>
+						<view class="slider-box">
+							<uv-slider step="1" activeColor="#0066FF" :blockSize="14" v-model="num" min="0" max="10"></uv-slider>
+						</view>
+						<view class="flex-jcsb">
+							<view class="font_pf fz-30 c-000">0</view>
+							<view class="font_pf fz-30 c-000 tar">10</view>
 						</view>
 					</view>
 				</view>
-				<view class="num">平分</view>
-				<view class="num">平分</view>
+				<view class="tab">
+					<view class="tab-btn" :class="activeTab == 1 ? 'is-active' : ''" @click="changeTab(1)">建议</view>
+					<view class="tab-btn" :class="activeTab == 2 ? 'is-active' : ''" @click="changeTab(2)">提问</view>
+				</view>
+				<view class="input-textarea">
+					<uv-textarea v-model="aaa" :placeholder="activeTab == 1?'请输入你的建议...':'请输入你的问题...'"></uv-textarea>
+				</view>
 			</view>
 		</view>
 		<view class="btn-box font_pf">
@@ -43,6 +52,11 @@ import { getCourseDetailApi } from '@/api/courseDetail.js';
 // import {formatDate2} from '@/common/common.js'
 import common from '@/common/common';
 const num = ref(0);
+const activeTab = ref(1);
+const aaa = ref('')
+const changeTab = (type) => {
+	activeTab.value = type;
+};
 // tab栏
 onLoad((params) => {});
 </script>
@@ -53,7 +67,7 @@ onLoad((params) => {});
 }
 .detail-body {
 	box-sizing: border-box;
-	min-height: calc(100vh - (var(--status-bar-height)+37rpx));
+	min-height: calc(100vh - (var(--status-bar-height)+50rpx));
 	padding: 29rpx 37rpx;
 	width: 100%;
 	display: flex;
@@ -90,11 +104,57 @@ onLoad((params) => {});
 	font-size: 24rpx;
 	margin-bottom: 28rpx;
 }
+.num {
+	display: flex;
+	width: 100%;
+	// height: 92rpx;
+	justify-content: space-between;
+	margin-bottom: 40rpx;
+}
 .num-pic {
 	width: 92rpx;
 	height: 92rpx;
+	padding-top: 20rpx;
+	margin-right: 20rpx;
 }
 .num-box {
+	flex: 1;
+	display: flex;
+	// height: 100%;
+	justify-content: space-between;
+	flex-direction: column;
+}
+.slider-box {
+	width: 100%;
+	:deep(.uv-slider) {
+		width: 100%;
+	}
+	:deep(uni-slider) {
+		margin: 0 16rpx 10rpx 0;
+	}
+	:deep(.uni-slider-tap-area) {
+		padding: 10rpx 0;
+	}
+	:deep(.uni-slider-thumb) {
+		border: 2px solid #0066ff;
+	}
+}
+.tab {
+	display: flex;
+}
+.tab-btn {
+	width: 78rpx;
+	height: 36rpx;
+	font-size: 22rpx;
+	color: #999999;
+	text-align: center;
+	border-radius: 8rpx;
+	border: 2rpx solid #999999;
+	margin-right: 30rpx;
+}
+.is-active {
+	color: #0066ff;
+	border: 2rpx solid #0066ff;
 }
 .btn-box {
 	position: fixed;
@@ -110,6 +170,13 @@ onLoad((params) => {});
 		height: 80rpx;
 	}
 }
+.c-666 {
+	color: #666666;
+}
+.c-000 {
+	font-weight: 600;
+	color: #000;
+}
 .fixed_search_div {
 	padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
 	display: flex;