详情页 样式开发

common/styles/global/components.scss

@@ -192,7 +192,7 @@ view{box-sizing: border-box;}
 	.breadcrumb-text,.breadcrumb-active{font-size: 26rpx;color: #333;}
 	.breadcrumb-active{color: #1752a0;}
 	.breadcrumb-jt{
-		width: 25rpx;height: 25rpx;transform: rotate(270deg);
+		width: 25rpx;height: 25rpx;transform: rotate(270deg);margin: 0 6rpx;
 		@include dljt-no-repeat-cover;background-image: url("@/static/images/common/nav-bar-jt-bottom.svg");}
 }
 
@@ -224,4 +224,31 @@ box-shadow: 0 1rpx 3rpx 0 #227ECE;box-sizing: border-box;padding: 4rpx 10rpx 0;}
     .list-line{width: 50rpx;height: 6rpx;background-color: #1460b6;margin: 20rpx 0;}
     .list-content{font-size: 24rpx;@include multi-line-ellipsis(2);color: #666;line-height: 1.5;}
   }
+}
+
+/* 底部返回按钮*/
+.return-footer-box{
+  display: flex;justify-content: space-between;align-items: center;
+  .footer-right{flex-shrink: 0}
+  .dljt-return-btn{width: 133rpx;height: 40rpx;display: inline-block;margin: 24rpx 0;cursor: pointer;flex-shrink: 0;margin-left: auto;
+   @include dljt-no-repeat-cover;background-image: url("@/static/images/common/return-btn.png");}
+  .dljt-down-btn{width: 238rpx;height: 60rpx;display: inline-block;margin: 24rpx 0;margin-left: auto;
+    @include dljt-no-repeat-cover;background-image: url("@/static/images/common/down-btn.png");}
+  .dljt-down-btn + .dljt-return-btn{margin-left: 16rpx;}
+}
+
+/* 富文本详情页 */
+.dljt-detail-box{
+	height: calc(100vh - 420rpx);box-sizing: border-box;padding: 24rpx;overflow-y: auto;
+	.detail-title{color: #000;text-align: center;font-size: 32rpx;font-weight: bold;line-height: 1.5;}
+	.detail-data{color: #666;text-align: center;font-size: 26rpx;margin-top: 24rpx;}
+	.dljt-editor-box{
+		font-size: 26rpx;font-weight: normal;white-space: pre-wrap;color: #333;word-break: break-all;
+		 img{max-width: 100%;}
+		 .img-center-top{margin: 32rpx auto 0;display: block;}
+		 div[data-w-e-type="video"]{text-align: center}
+		 span{margin: 0;padding: 0;}
+		 p{margin: 16rpx 0;padding: 0;}
+	}
+	.dljt-pdf-box{}
 }

pages/dqgzDangjiangongzuoInfo/dqgzDangjiangongzuoInfo.vue

@@ -1,19 +1,39 @@
 <template>
-	<view v-if="data.info">
-		<!-- 详情页面 -->
-		<view>校园动态</view>
-		<!-- 导航 -->
-		<view>首页>校园动态>学院新闻</view>
-		<!-- 标题 -->
-		<view>{{data.info.title}}</view>
-		<!-- 时间 -->
-		<view>{{formatDate.join('-') }}</view>
-		<!-- 富文本 -->
-		<MtaMpHtml :content="data.info.content" ></MtaMpHtml>
-		
-		<view @click="handleDownFile">文件下载</view>
-		<!-- PDF -->
-		<MtaPDFVue :pdfUrl="pdfUrl"></MtaPDFVue>
+	<view class="dljt-page-box" v-if="data.info">
+		<MtaNavbar></MtaNavbar>
+		<view class="dljt-container-box">
+			<!-- 详情页面 -->
+			<view class="dljt-page-title">校园动态</view>
+			<view class="dljt-page-content-box">
+				<!-- 导航 -->
+				<view class="dljt-breadcrumb-box">
+					<view class="breadcrumb-text">首页</view>
+					<icon class="breadcrumb-jt"></icon>
+					<view class="breadcrumb-text">校园动态</view>
+					<icon class="breadcrumb-jt"></icon>
+					<view class="breadcrumb-active">学院新闻</view>
+				</view>
+				<view class="dljt-detail-box">
+					<!-- 标题 -->
+					<view class="detail-title">{{data.info.title}}</view>
+					<!-- 时间 -->
+					<view class="detail-data">{{formatDate.join('-') }}</view>
+					<!-- 富文本 -->
+					<MtaMpHtml class="dljt-editor-box" :content="data.info.content" ></MtaMpHtml>
+					
+					<!-- PDF -->
+					<MtaPDFVue class="dljt-pdf-box" :pdfUrl="pdfUrl"></MtaPDFVue>
+					
+					<!-- 文件下载 -->
+					<div class="return-footer-box">
+						<view class="dljt-down-btn" @click="handleDownFile"></view>
+					</div>
+					
+				</view>
+			</view>
+		</view>
+		<!-- 底部导航 -->
+		<MtaFooter></MtaFooter>
 	</view>
 </template>
 
@@ -32,7 +52,7 @@
 	import {formatDateToYearMonthDay } from "@/utils/common.js"
   import MtaMpHtml from "@/components/MTAMpHtml/MtaMpHtml.vue"
   import MtaPDFVue from "@/components/MtaPDF.vue";
-
+  import MtaFooter from "@/components/MtaFooter.vue"
 	const data = reactive({
 		info: null,
 		id: null