1.15

components/ty-paper/ty-paper.vue

@@ -0,0 +1,99 @@
+<template>
+	<view class="page">
+		<view class="top u-flex u-row-between">
+			<view class="u-flex">
+				<text class="fen">教材级别</text>
+				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
+				</image>
+			</view>
+			<view class="u-flex">
+				<text class='fen'>教学层次</text>
+				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
+				</image>
+			</view>
+			<view class="u-flex">
+				<text class='fen'>专业分类</text>
+				<image src="/static/images/down.png" style="width: 12rpx;height: 8rpx;margin-left: 8rpx;" mode="">
+				</image>
+			</view>
+			<view class="" class='fen'>获奖教材</view>
+			<view class="new">新书推荐</view>
+		</view>
+		<view class="u-flex u-row-between" style="flex-wrap: wrap;">
+			<view class="" v-for="(item,index) in 5" :key="index" style="margin-top: 26rpx;">
+				<image src="/static/logo.png" style="width: 334rpx;height: 460rpx;" mode=""></image>
+				<view class="title">新时代大学生劳动教育教…</view>
+				<view class="writer">丁爱萍，林秀丽</view>
+				<view class="" style="margin-top: 8rpx;">
+					<text class="ding">定价</text>
+					<text class="money">¥38.5</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+	.title {
+		font-size: 28rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin-top: 20rpx;
+	}
+
+	.writer {
+		font-size: 24rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #444444;
+		margin-top: 8rpx;
+	}
+
+	.money {
+		font-size: 28rpx;
+		font-family: SFPro, SFPro;
+		font-weight: 400;
+		color: #CC3300;
+	}
+
+	.ding {
+		font-size: 24rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #222222;
+	}
+
+	.page {
+		width: 750rpx;
+		background: #FFFFFF;
+		border-radius: 28rpx 28rpx 0rpx 0rpx;
+		padding: 28rpx 24rpx;
+	}
+
+	.top {
+		.fen {
+			font-size: 24rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			color: #444444;
+		}
+
+		.new {
+			font-size: 24rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			color: #06A971;
+		}
+	}
+</style>

pages.json

@@ -130,6 +130,30 @@
 				"enablePullDownRefresh" : false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/video",
+			"style" : 
+			{
+				"navigationBarTitleText" : "",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/stylebook",
+			"style" : 
+			{
+				"navigationBarTitleText" : "样书申请",
+				"enablePullDownRefresh" : false
+			}
+		},
+		{
+			"path" : "pages/index/contribute",
+			"style" : 
+			{
+				"navigationBarTitleText" : "投稿",
+				"enablePullDownRefresh" : false
+			}
 		}
 	],
 	"globalStyle": {

pages/index/bookinfo.vue

@@ -1,7 +1,9 @@
 <template>
 	<view class="page">
 		<view class="padd">
-			<image src="/static/logo.png" style="width: 542rpx;height: 750rpx;" mode=""></image>
+			<view class="wrap">
+				<u-swiper :list="list1" mode='number' height='750' indicator-pos="bottomRight"></u-swiper>
+			</view>
 			<view class="back" style="margin-top: 24rpx;">
 				<view class="">九年级化学上册电子课本目录(义务教育教科</view>
 				<view class="item-jian">教材级别：公共体育教材</view>
@@ -18,7 +20,35 @@
 				<view class="abount">相关系列</view>
 				<view class="updown" @click="toupdown">系列下载</view>
 			</view>
-			<view class=""></view>
+			<view class="" style="margin-top: 24rpx;">
+				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
+					<swiper-item v-for="(item,index) in 3" :key="index">
+						<view class="u-flex u-row-between">
+							<view class="">
+								<image src="/static/logo.png" style="width: 196rpx;height: 280rpx;" mode=""></image>
+								<view class="u-line-1">腰部功能强化训…</view>
+								<view class="">
+									定价：¥28.5
+								</view>
+							</view>
+							<view class="">
+								<image src="/static/logo.png" style="width: 196rpx;height: 280rpx;" mode=""></image>
+								<view class="u-line-1">腰部功能强化训…</view>
+								<view class="">
+									定价：¥28.5
+								</view>
+							</view>
+							<view class="">
+								<image src="/static/logo.png" style="width: 196rpx;height: 280rpx;" mode=""></image>
+								<view class="u-line-1">腰部功能强化训…</view>
+								<view class="">
+									定价：¥28.5
+								</view>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+			</view>
 		</view>
 		<view class="height"></view>
 		<view class="content">
@@ -83,7 +113,7 @@
 						<view class="u-flex">
 							<view class="selling">资源售价</view>
 							<view class="money5">¥48.5</view>
-							<view class="button4"  @click="show=true">付费下载</view>
+							<view class="button4" @click="show=true">付费下载</view>
 						</view>
 					</view>
 					<view class="courseware">课件</view>
@@ -103,7 +133,7 @@
 		</view>
 		<view class="" style=" height: 166rpx;"></view>
 		<view class="bottom u-flex">
-			<view class="left">样书申请</view>
+			<view class="left" @click="stylebook">样书申请</view>
 			<view class="right">在线试读</view>
 		</view>
 		<u-popup v-model="show" mode="bottom" border-radius="24">
@@ -168,16 +198,30 @@
 					name: '资料',
 				}],
 				current: 0,
-				show: false
+				show: false,
+				list1: [{
+						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
+						title: '身无彩凤双飞翼，心有灵犀一点通'
+					},
+					{
+						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
+						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
+					}
+				],
 			};
 		},
 		methods: {
 			change(index) {
 				this.current = index;
 			},
-			toupdown(){
+			toupdown() {
+				uni.navigateTo({
+					url: '/pages/index/updown'
+				})
+			},
+			stylebook() {
 				uni.navigateTo({
-					url:'/pages/index/updown'
+					url: '/pages/index/stylebook'
 				})
 			}
 		}
@@ -319,6 +363,11 @@
 		text-align: center;
 	}
 
+	.wrap {
+		height: 750rpx;
+		padding: 0 106rpx;
+	}
+
 	.back {
 		padding: 0 0 40rpx 0;
 		background: #fff;

pages/index/contribute.vue

@@ -0,0 +1,227 @@
+<template>
+	<view class="page">
+		<view class="stylebookbox">
+			<view class="apply">投稿</view>
+			<view class="stylebook">
+				感谢您的信任，选择向我们投稿！（带*号的项为必填项，其他为非必填项）
+			</view>
+			<view class="dotted">
+				<image src="/static/images/dotted.png" style="width: 654rpx;height: 4rpx;" mode=""></image>
+			</view>
+			<!-- 姓名 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的姓名</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 电话 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的电话</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 邮箱 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的邮箱</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 学校 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您所在的学校名称</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 选题名称 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">选题名称</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 稿件状态 -->
+			<view class="item">
+				<view class="name">
+					<text style="color: rgba(34, 34, 34, 1);">稿件状态</text>
+				</view>
+				<view class="box u-flex" style="padding-right: 28rpx;">
+					<input placeholder-style="font-size: 26rpx;" class="input" type="text"
+						style="width: 100%;padding: 28rpx;" placeholder="请选择" :disabled="true" />
+					<u-icon name="arrow-down-fill" size='12' color='rgba(150, 150, 150, 1)'></u-icon>
+				</view>
+			</view>
+			<view class="item">
+				<view class="name">
+					<text style="color: rgba(34, 34, 34, 1);">最迟出版时间</text>
+				</view>
+				<view class="box u-flex" style="padding: 0 28rpx;" @click="show=true">
+					<image src="/static/images/calendar.png" style="width: 44rpx;height: 44rpx;" mode=""></image>
+					<u-calendar v-model="show" mode="date" @click="change"></u-calendar>
+				</view>
+			</view>
+			<!-- 经费情况 -->
+			<view class="item">
+				<view class="name">
+					<text style="color: rgba(34, 34, 34, 1);">经费情况</text>
+				</view>
+				<view class="box u-flex" style="padding-right: 28rpx;">
+					<input placeholder-style="font-size: 26rpx;" class="input" type="text"
+						style="width: 100%;padding: 28rpx;" placeholder="请选择" :disabled="true" />
+					<u-icon name="arrow-down-fill" size='12' color='rgba(150, 150, 150, 1)'></u-icon>
+				</view>
+			</view>
+			<!-- 上传 -->
+			<view class="item">
+				<view class="name">
+					<text style="color: rgba(34, 34, 34, 1);">作者简介及目录上传</text>
+				</view>
+				<view class="uploading">
+					<image src="../../static/images/uploading.png" style="width: 64rpx;height: 64rpx;" mode=""></image>
+					<view class="up" style="margin-top: 16rpx;">选择文件</view>
+					<view class="up">（不超过10M）</view>
+				</view>
+			</view>
+			<view class="btn">
+				提交
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+						name: '教材用书',
+						disabled: false
+					},
+					{
+						name: '学习参考',
+						disabled: false
+					},
+					{
+						name: '其他',
+						disabled: false
+					}
+				],
+				show: false,
+			};
+		},
+		methods: {
+			change(e) {
+				console.log(e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uploading {
+		width: 184rpx;
+		height: 184rpx;
+		border: 2rpx solid rgba(151, 151, 151, 0.3);
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 22rpx;
+
+		.up {
+			font-size: 20rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			color: #222222;
+		}
+	}
+
+	.btn {
+		// width: 614rpx;
+		height: 82rpx;
+		background: #06A971;
+		border-radius: 8rpx;
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-top: 48rpx;
+		line-height: 82rpx;
+		text-align: center;
+	}
+
+	.address {
+		font-size: 26rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #222222;
+	}
+
+	.item {
+		margin-top: 44rpx;
+
+		.name {
+			font-size: 26rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			color: #CF1534;
+		}
+
+		.box {
+			margin-top: 24rpx;
+			height: 72rpx;
+			border: 2rpx solid rgba(151, 151, 151, 0.3);
+		}
+	}
+
+	.page {
+		background-color: rgba(246, 246, 246, 1);
+		width: 750rpx;
+		min-height: 100vh;
+		padding: 20rpx 28rpx 68rpx;
+	}
+
+	.stylebookbox {
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 38rpx 20rpx 44rpx;
+
+		.apply {
+			font-size: 32rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			color: #222222;
+			text-align: center;
+		}
+
+		.stylebook {
+			font-size: 26rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			color: #222222;
+			margin-top: 50rpx;
+		}
+
+		.dotted {
+			// margin-top: 30rpx;
+		}
+	}
+</style>

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page">
 		<view class="index-navbar">
-			<view class="" style="position: relative;;">
+			<view class="" style="position: relative;">
 				<u-navbar title-width='300' title='' :is-back="false" :border-bottom="false"
 					:background="{background:'rgba(0,0,0,0)'}" :isFixed="true">
 					<view class="u-flex u-row-between" style="padding: 0  28rpx ;width: 100vw;">
@@ -17,7 +17,7 @@
 							<image src="../../static/images/release.png"
 								style="width: 24rpx; height: 24rpx;margin-right: 8rpx;" mode="">
 							</image>
-							<text>投稿</text>
+							<text @click='contribute'>投稿</text>
 						</view>
 					</view>
 				</u-navbar>
@@ -55,7 +55,7 @@
 						<view class="bottom1">
 							<text class="ding">定价</text>
 							<text class="money">¥38.5</text>
-						</view>
+						</view>                                                               
 					</view>
 				</view>
 			</view>
@@ -75,8 +75,11 @@
 			</view>
 			<view class="" style="height: 30rpx;"></view>
 		</view>
+		<view v-if="curret==1" style="position: relative;z-index: 200;" class="">
+			<ty-paper></ty-paper>
+		</view>
 		<view v-if="curret==3" style="position: relative;z-index: 200;" class="">
-			<ty-video></ty-video>
+			<ty-video></ty-video>    
 		</view>
 	</view>
 </template>
@@ -107,6 +110,11 @@
 				uni.navigateTo({
 					url:'/pages/index/bookinfo'
 				})
+			},
+			contribute(){
+				uni.navigateTo({
+					url:'/pages/index/contribute'
+				})
 			}
 		}
 	}

pages/index/stylebook.vue

@@ -0,0 +1,198 @@
+<template>
+	<view class="page">
+		<view class="stylebookbox">
+			<view class="apply">样书申请</view>
+			<view class="stylebook">
+				欢迎您申请我们的国优、国规样书
+			</view>
+			<view class="dotted">
+				<image src="/static/images/dotted.png" style="width: 654rpx;height: 4rpx;" mode=""></image>
+			</view>
+			<!-- 姓名 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的姓名</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 电话 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的电话</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 邮箱 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您的邮箱</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 学校 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您所在的学校名称</text>
+				</view>
+				<view class="box u-flex">
+					<input type="text" style="width: 100%;" />
+				</view>
+			</view>
+			<!-- 样书 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">样书用途</text>
+				</view>
+				<!-- 				<view class="box u-flex"> -->
+				<view class="" style="margin-top: 38rpx;">
+					<u-radio-group :wrap='true'>
+						<u-radio shape="square" active-color="rgba(6, 169, 113, 1)" v-for="(item, index) in list"
+							:key="index" :name="item.name" v-model="item.disabled">
+							{{item.name}}
+						</u-radio>
+					</u-radio-group>
+				</view>
+				<!-- </view> -->
+			</view>
+			<!-- 地址 -->
+			<view class="item">
+				<view class="name">
+					<text>*</text>
+					<text style="color: rgba(34, 34, 34, 1);">您所在的学校名称</text>
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 40rpx;">
+					<view class="address">姓名：</view>
+					<view class="box u-flex " style="margin-top: 0rpx;width: 500rpx;">
+						<input type="text" style="width: 100%;" />
+					</view>
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 40rpx;">
+					<view class="address">所在地区：</view>
+					<view class="box u-flex " style="margin-top: 0rpx;width: 500rpx;">
+						<input type="text" style="width: 100%;" />
+					</view>
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 40rpx;">
+					<view class="address">详细地址：</view>
+					<view class="box u-flex " style="margin-top: 0rpx;width: 500rpx;">
+						<input type="text" style="width: 100%;" />
+					</view>
+				</view>
+				<view class="u-flex u-row-between" style="margin-top: 40rpx;">
+					<view class="address">手机号码：</view>
+					<view class="box u-flex " style="margin-top: 0rpx;width: 500rpx;">
+						<input type="text" style="width: 100%;" />
+					</view>
+				</view>
+			</view>
+			<view class="btn">
+				提交
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+						name: '教材用书',
+						disabled: false
+					},
+					{
+						name: '学习参考',
+						disabled: false
+					},
+					{
+						name: '其他',
+						disabled: false
+					}
+				],
+			};
+		}
+	}
+</script>
+ 
+<style lang="scss">
+	.btn{
+		// width: 614rpx;
+		height: 82rpx;
+		background: #06A971;
+		border-radius: 8rpx;
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		margin-top: 48rpx;
+		line-height: 82rpx;
+		text-align: center;
+	}
+	.address {
+		font-size: 26rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #222222;
+	}
+
+	.item {
+		margin-top: 44rpx;
+
+		.name {
+			font-size: 26rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			color: #CF1534;
+		}
+
+		.box {
+			margin-top: 24rpx;
+			height: 72rpx;
+			border: 2rpx solid rgba(151, 151, 151, 0.3);
+		}
+	}
+
+	.page{
+		background-color: rgba(246, 246, 246, 1);
+		width: 750rpx;
+		min-height: 100vh;
+		padding: 20rpx 28rpx 68rpx;
+	}
+
+	.stylebookbox {
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		padding: 38rpx 20rpx 44rpx;
+
+		.apply {
+			font-size: 32rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 500;
+			color: #222222;
+			text-align: center;
+		}
+
+		.stylebook {
+			font-size: 26rpx;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			color: #222222;
+			margin-top: 50rpx;
+		}
+
+		.dotted {
+			// margin-top: 30rpx;
+		}
+	}
+</style>

pages/index/video.vue

@@ -0,0 +1,231 @@
+<template>
+	<view class="page">
+		<view class="video">
+			<image src="../../static/logo.png" style="width: 750rpx;height: 456rpx;" mode=""></image>
+			<image v-if="current==1" src="/static/images/play.png" mode="" class="ding"></image>
+			<image v-if="current==0" src="/static/images/free.png" mode="" class="free"></image>
+		</view>
+		<view class="">
+			<u-tabs active-color='#06A971' :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+			<view class="" style="border-top: 2rpx solid rgba(151, 151, 151, 0.1);" v-if="current==0">
+				<view class="">
+					<view class="" style="padding:  0 28rpx;">
+						<view class="titles">25考研数学定制VIP领学3班·S班</view>
+						<view class="teacher">
+							<text>课程讲师：</text>
+							<text>武忠祥 刘金峰 姜晓千</text>
+						</view>
+						<view class="money">
+							<text>¥</text>
+							<text>48.5</text>
+						</view>
+					</view>
+					<view class="back"></view>
+					<view class="introduce">
+						<view class="titles" style="margin-top: 0;">
+							课程介绍
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="catalogue" v-if="current==1">
+				<view class="section u-flex u-row-between">
+					<view class="">
+						<text class="tong">章节1</text>
+						<text class="tong" style="margin-left: 20rpx;">高等数学通用</text>
+					</view>
+					<view class="look">
+						观看
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="bottom" style="display: flex;justify-content: space-between;">
+			<view class="button1 u-flex u-row-center" v-if="current==0">
+				<view class="">免费试看</view>
+				<image src="/static/images/slice.png" style="width: 32rpx; height: 32rpx;margin-left: 12rpx;" mode=""></image>
+			</view>
+			<view class="button2" v-if="current==0">
+				立即订阅
+			</view>
+			<view class="button" v-if="current==1">
+				立即学习
+			</view>
+		</view>
+	</view>
+</template>  
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '课程介绍',
+				}, {
+					name: '目录',
+				}],
+				current: 0,
+				show: false
+			};
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			},
+			toupdown() {
+				uni.navigateTo({
+					url: '/pages/index/updown'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.button1 {
+		width: 336rpx;
+		height: 88rpx;
+		background: #EEEEEE;
+		border-radius: 12rpx;
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #444444;
+		text-align: center;
+		line-height: 88rpx;
+	}
+
+	.button2 {
+		width: 336rpx;
+		height: 88rpx;
+		background: #06A971;
+		border-radius: 12rpx;
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 88rpx;
+	}
+
+	.introduce {
+		padding: 32rpx 28rpx;
+	}
+
+	.back {
+		height: 20rpx;
+		background: #F5F5F5;
+	}
+
+	.money {
+		font-size: 28rpx;
+		font-family: SFPro, SFPro;
+		font-weight: 500;
+		color: #CC3300;
+		margin-top: 28rpx;
+		margin-bottom: 40rpx;
+	}
+
+	.teacher {
+		font-size: 24rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #777777;
+		margin-top: 24rpx;
+	}
+
+	.titles {
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #222222;
+		margin-top: 30rpx;
+	}
+
+	.tong {
+		font-size: 26rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #333333;
+	}
+
+	.look {
+		width: 64rpx;
+		height: 36rpx;
+		background: #06A971;
+		border-radius: 6rpx;
+		font-size: 20rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 36rpx;
+	}
+
+	.bottom {
+		width: 750rpx;
+		height: 166rpx;
+		background: #FFFFFF;
+		position: fixed;
+		padding: 16rpx 28rpx 62rpx;
+		bottom: 0;
+		left: 0;
+	}
+
+	.catalogue {
+		border-top: 2rpx solid rgba(151, 151, 151, 0.1);
+		padding: 10rpx 28rpx;
+	}
+
+	.section {
+		width: 702rpx;
+		height: 84rpx;
+		background: #F4F4F4;
+		border-radius: 8rpx;
+		padding: 24rpx 20rpx 24rpx 24rpx;
+		margin-top: 20rpx;
+	}
+
+	.button {
+		width: 694rpx;
+		height: 88rpx;
+		background: #06A971;
+		border-radius: 12rpx;
+		font-size: 32rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 88rpx;
+	}
+
+	.page {
+		height: 100vh;
+	}
+
+	.video {
+		width: 750rpx;
+		height: 456rpx;
+		position: relative;
+	}
+
+	.ding {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 90rpx;
+		height: 90rpx;
+		margin-left: -45rpx;
+		margin-top: -45rpx;
+	}
+
+	.free {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 290rpx;
+		height: 88rpx;
+		margin-left: -145rpx;
+		margin-top: -44rpx;
+	}
+</style>

pages/success.vue

@@ -12,10 +12,43 @@
 			交易已完成
 		</view>
 		<view class="order">
-
+			<view class="">订单信息</view>
+			<view class="" style="display: flex;margin-top: 32rpx;">
+				<view class="box">
+					<image style="width: 120rpx;height: 160rpx;" src="/static/logo.png" mode=""></image>
+				</view>
+				<view class="flexc" style="">
+					<view class="">
+						<view class="title">运动体能实训指导</view>
+						<view class="">资源类型：付费资源</view>
+					</view>
+					<view class="">¥324.5</view>
+				</view>
+			</view>
+			<view class="bottom" style="text-align: right;">
+				<text class="fu">实付</text>
+				<text class="yuan" style="font-size: 8rpx;">¥</text>
+				<text class="money1">325.00</text>
+			</view>
 		</view>
 		<view class="info">
-
+			<view class="">订单信息</view>
+			<view class="order1">
+				<text class="info1">订单编号</text>
+				<text class="math">239020283892034</text>
+			</view>
+			<view class="order1">
+				<text class="info1">下单时间</text>
+				<text class="math">239020283892034</text>
+			</view>
+			<view class="order1">
+				<text class="info1">支付时间</text>
+				<text class="math">2023-11-12 18:23:12</text>
+			</view>
+			<view class="order1">
+				<text class="info1">支付方式</text>
+				<text class="math">微信支付</text>
+			</view>
 		</view>
 	</view>
 </template>
@@ -47,9 +80,93 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+	.order1 {
+		margin-top: 40rpx;
+	}
+
+	.info1 {
+		font-size: 28rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #555555;
+	}
+
+	.math {
+		font-size: 28rpx;
+		font-family: SFPro, SFPro;
+		font-weight: 400;
+		color: #333333;
+		margin-left: 44rpx;
+	}
+
+	.bottom {
+		border-top: 2rpx solid rgba(151, 151, 151, 0.2);
+		padding-top: 26rpx;
+		margin-top: 32rpx;
+	}
+
+	.fu {
+		font-size: 26rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #222222;
+		margin-right: 20rpx;
+	}
+
+	.money1 {
+		font-size: 36rpx;
+		font-family: JDZhengHT, JDZhengHT;
+		font-weight: 400;
+		color: #222222;
+	}
+
+	.money {
+		font-size: 32rpx;
+		font-family: SFPro, SFPro;
+		font-weight: 400;
+		color: #333333;
+	}
+
+	.yuan {
+		font-size: 26rpx;
+		font-family: JDZhengHT, JDZhengHT;
+		font-weight: 300;
+		color: #222222;
+	}
+
+	.fu {
+		font-size: 24rpx;
+		font-family: PingFangSC, PingFang SC;
+		font-weight: 400;
+		color: #444444;
+		margin-top: 12rpx;
+	}
+
+	.box {
+		width: 160rpx;
+		height: 160rpx;
+		border: 1rpx solid rgba(151, 151, 151, 0.2);
+		padding: 0 20rpx;
+	}
+
+	.title {
+		font-size: 28rpx;
+		font-family: PingFangHK, PingFangHK;
+		font-weight: 400;
+		color: #333333;
+	}
+
+	.felxc {
+		display: flex;
+		justify-content: space-between;
+		flex-direction: column;
+		margin-left: 20rpx;
+		padding: 4rpx 0;
+	}
+
 	.page {
-		height: 95vh;
+		height: 100vh;
 		position: relative;
 		z-index: 1;
 		background: #F4F5F7;
@@ -58,7 +175,7 @@
 
 	.order {
 		width: 694rpx;
-		height: 592rpx;
+		// height: 592rpx;
 		background: #FFFFFF;
 		border-radius: 20rpx;
 		padding: 30rpx 20rpx;
@@ -72,7 +189,8 @@
 		margin-top: 12rpx;
 		margin-bottom: 38rpx;
 	}
-	.info{
+
+	.info {
 		width: 694rpx;
 		height: 420rpx;
 		background: #FFFFFF;