上传文本域组件，继续完成课程详情评价页面

2025-06-23 14:43:19 +08:00
parent 17f12b5fb9 8af971b2f3
commit 1ba4ebe14f
3 changed files with 315 additions and 0 deletions
@@ -0,0 +1,144 @@
+<template>
+	<view class="max_page detail-main">
+		<nav-bar :is_seat="false"></nav-bar>
+		<view class="fixed_search_div">
+			<view class="back_div" @click="common.navigateBack()">
+				<view class="back-icon"></view>
+			</view>
+		</view>
+		<view class="detail-body">
+			<view class="title font_pf">发表评价</view>
+			<view class="body-content">
+				<view class="picture">
+					<view class="pic-item" v-for="item in 4" :key="item">
+						<image class="w_100" src="/src/static/images/test/touxiang.png" mode="widthFix"></image>
+					</view>
+				</view>
+				<view class="tips font_pf">最多可添加4张图片</view>
+				<view class="num">
+					<view class="num-pic">
+						<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>
+					</view>
+				</view>
+				<view class="num">平分</view>
+				<view class="num">平分</view>
+			</view>
+		</view>
+		<view class="btn-box font_pf">
+			<uv-button type="primary">去学习</uv-button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import { getCourseDetailApi } from '@/api/courseDetail.js';
+// import {formatDate2} from '@/common/common.js'
+import common from '@/common/common';
+const num = ref(0);
+// tab栏
+onLoad((params) => {});
+</script>
+
+<style lang="scss" scoped>
+.detail-main {
+	background-color: #f6f8ff;
+}
+.detail-body {
+	box-sizing: border-box;
+	min-height: calc(100vh - (var(--status-bar-height)+37rpx));
+	padding: 29rpx 37rpx;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.title {
+	color: #000000;
+	font-size: 34rpx;
+	height: 34rpx;
+	font-weight: 600;
+	margin-bottom: 30rpx;
+}
+.body-content {
+	// flex: 1;
+	background-color: #ffffff;
+	border-radius: 15rpx;
+	padding: 36rpx;
+}
+.picture {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+.pic-item {
+	width: 170rpx;
+	height: 170rpx;
+	border-radius: 8rpx;
+	background-color: red;
+	margin-bottom: 24rpx;
+}
+.tips {
+	color: #666666;
+	font-size: 24rpx;
+	margin-bottom: 28rpx;
+}
+.num-pic {
+	width: 92rpx;
+	height: 92rpx;
+}
+.num-box {
+}
+.btn-box {
+	position: fixed;
+	bottom: 0;
+	// height: 187rpx;
+	width: 100%;
+	display: flex;
+	padding-bottom: 30rpx;
+	justify-content: space-evenly;
+	:deep(.uv-button) {
+		border-radius: 14rpx;
+		width: 616rpx;
+		height: 80rpx;
+	}
+}
+.fixed_search_div {
+	padding: calc(10rpx + var(--status-bar-height)) 15rpx 24rpx 30rpx;
+	display: flex;
+	align-items: center;
+	.back_div {
+		margin-right: 10rpx;
+		.back-icon {
+			position: relative;
+			width: 40rpx;
+			height: 40rpx;
+			cursor: pointer;
+		}
+
+		.back-icon::before,
+		.back-icon::after {
+			content: '';
+			position: absolute;
+			transition: all 0.3s ease;
+		}
+
+		.back-icon::after {
+			top: 25%;
+			left: 25%;
+			width: 40%;
+			height: 40%;
+			border-top: 4rpx solid #2b2c2e;
+			border-left: 4rpx solid #2b2c2e;
+			transform: rotate(-45deg);
+		}
+	}
+}
+</style>