样式修改

common/styles/global/components.scss

@@ -16,11 +16,11 @@ view{box-sizing: border-box;}
 
 /***** 页面背景图 *****/
 //  no-repeat  cover
-@mixin ezy-no-repeat-cover($position: center) {
+@mixin dljt-no-repeat-cover($position: center) {
   background-position: $position;background-size: cover;background-repeat: no-repeat;
 }
 //  no-repeat  contain
-@mixin ezy-no-repeat-contain($position: center) {
+@mixin dljt-no-repeat-contain($position: center) {
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
@@ -70,7 +70,7 @@ view{box-sizing: border-box;}
 	padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;box-sizing: border-box;position: relative;
 	.nav-bar-icon{
 		width: 24rpx;height: 38rpx;
-		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover();
 	}
 	.nav-bar-title{font-size: 36rpx;color: #333;}
 	// 考试数字
@@ -95,7 +95,7 @@ view{box-sizing: border-box;}
 	}
 	.nav-bar-icon{
 		width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: calc(32rpx + var(--status-bar-height));
-		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover();
 	}
 	.bar-ml10{margin-left: 10rpx;}
 	.nav-bar-btn{font-size: 24rpx;position: absolute;right: 20rpx;
@@ -103,28 +103,31 @@ view{box-sizing: border-box;}
 }
 // 仅一个返回按钮
 .phone-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
-		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include dljt-no-repeat-cover();
 	}
 
 /******************** 网站组件样式 ********************/
+// 顶部菜单
 .dljt-navBar-box{
-	width: 100%;height: 140rpx;@include ezy-no-repeat-cover();
+	width: 100%;height: 140rpx;@include dljt-no-repeat-cover();
 	display: flex;align-items: center;justify-content: space-between;
 	background-image: url("@/static/images/common/dljt-navBar-bj.png");
+	position: fixed;top: 0;
 	.uni-navbar--shadow{box-shadow: none;border-bottom: 0;}
 	.uni-navbar__header-btns{display: none;}
 	.uni-navbar__header-container{justify-content: space-between;align-items: center;width: 100%;}
 	.dljt-logo-box{
-		width: 495rpx;height: 110rpx;@include ezy-no-repeat-cover();
+		width: 495rpx;height: 110rpx;@include dljt-no-repeat-cover();
 		background-image: url("@/static/images/common/website-logo.gif");
 	}
 	.dljt-menu-box{
-		width: 60rpx;height: 44rpx;@include ezy-no-repeat-cover();
+		width: 60rpx;height: 44rpx;@include dljt-no-repeat-cover();
 		background-image: url("@/static/images/common/menu-icon.png");
 	}
 }
 .head-collapse-box{
-		width: 100%;height: 100vh!important;background-color: #0041b7!important;
+		width: 100%;height: calc(100vh - 100rpx)!important;background-color: #0041b7!important;overflow-y: auto;
+		position: absolute;top: 0;left: 0;right: 0;bottom: 100rpx;z-index: 99;
 		.uni-collapse-item__title-box{background-color: #0041b7!important;font-size: 32rpx;color: #fff;}
 		.uni-collapse-item--animation{
 			transform: rotate(270deg);
@@ -141,3 +144,71 @@ view{box-sizing: border-box;}
 		.head-item-text{background-color: #45bcf4;margin:0 16rpx 16rpx;font-size: 32rpx;
 		border-radius: 8rpx;color: #fff;padding: 32rpx 16rpx;box-sizing: border-box;}
 	}
+	
+// 底部footer
+.dljt-footer-box{
+	width: 100%;height: 100rpx;background: #fff;z-index: 99999;
+	position: fixed;bottom: 0;left: 0;right: 0;font-size: 0;
+	display: flex;align-items: center;border-top: 1rpx solid #89b0db;background-color: #fff;
+	.footer-item{
+		width: 25%;font-size: 28rpx;color: #333;text-align: center;
+		display: flex;flex-direction: column;align-items: center;}
+	icon{width: 48rpx;height: 48rpx;@include dljt-no-repeat-cover();margin-bottom: 2rpx;}
+	.active{color: #003399;}
+	.sy-cion{background-image: url("@/static/images/tabbar/unselect/website-icon1.png");}
+	.xydt-cion{background-image: url("@/static/images/tabbar/unselect/website-icon2.png");}
+	.zsjy-cion{background-image: url("@/static/images/tabbar/unselect/website-icon3.png");}
+	.lxfs-cion{background-image: url("@/static/images/tabbar/unselect/website-icon4.png");}
+	
+	.active .sy-cion{background-image: url("@/static/images/tabbar/select/website-icon1.png");}
+	.active .xydt-cion{background-image: url("@/static/images/tabbar/select/website-icon2.png");}
+	.active .zsjy-cion{background-image: url("@/static/images/tabbar/select/website-icon3.png");}
+	.active .lxfs-cion{background-image: url("@/static/images/tabbar/select/website-icon4.png");}
+}
+
+// 页面box
+.dljt-page-box{
+	width: 100%;height: auto;position: relative;margin-top: 140rpx;
+}
+.dljt-page-box::before{
+  content: ''; width: 100%;height: 370rpx;display: block;@include dljt-no-repeat-cover(bottom);
+  background-image: url("@/static/images/index/dljt-page-bj.png");
+  position: absolute;top: 0;z-index: 1;
+}
+
+//页面标题
+.dljt-page-title{
+	 color: #fff;font-size: 32rpx;text-align: center;font-weight: bold;margin: 46rpx auto;padding-top: 46rpx;
+}
+
+/* 导航 */
+.dljt-breadcrumb-box{
+	
+}
+
+/* container */
+.dljt-container-box{width: 100%;position: relative;z-index: 2;}
+.dljt-page-content-box{width: 92%;margin: 0 auto;background-color: #fff;box-shadow: 0 1rpx 3rpx 0 #227ECE;}
+
+
+/*左侧图片右侧内容列表区域*/
+.list-item-box{
+  display: flex;margin-bottom: 32rpx;cursor: pointer;position: relative;
+  .list-img{width: 360rpx;height: 240rpx;}
+  .list-time-box{
+    width: 90rpx;height: 90rpx;background-color: rgba(0,64,194,0.7);
+    color: #fff;position: absolute;top: 0;left: 0;text-align: center;
+    .time-data{font-size: 36rpx;border-bottom: 1rpx solid #e9ffff;margin: 4rpx 10rpx;padding-bottom: 2rpx;}
+    .time-year{font-size: 18rpx;}
+  }
+  .time-red-box{
+    background-color: rgba(153,0,0,0.7);
+    .time-data{border-bottom: 1rpx solid #fff;}
+  }
+  .list-right-box{
+    margin-left: 20rpx;flex: 1;border-bottom: 1rpx dashed #999;
+    .list-name{color: #000;font-size: 32rpx;@include single-line-ellipsis;}
+    .list-line{width: 50rpx;height: 6rpx;background-color: #1460b6;margin: 24rpx 0;}
+    .list-content{font-size: 28rpx;line-height: 28rpx;@include multi-line-ellipsis(4); }
+  }
+}

common/styles/global/pages.scss

@@ -1,3 +1,6 @@
 /***** 这里存放通用页面样式 *****/
-
+// 首页
+.dljt-index-page{
+	margin-top: 140rpx;
+}
     

components/MtaFooter.vue

@@ -1,6 +1,6 @@
 <template>
-	<view>
-		这里是footer
+	<view class="">
+		
 	</view>
 </template>
 

components/MtaScrollView/MtaScrollView.vue

@@ -1,7 +1,7 @@
 <template>
 	<!-- 无限滚动区域 -->
-	<scroll-view class="scroll-container" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
-		:refresher-threshold="100" refresher-background="#F3F3F4" @refresherrefresh="onRefresh"
+	<scroll-view :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
+		:refresher-threshold="100" refresher-background="transparent" @refresherrefresh="onRefresh"
 		@scrolltolower="onReachBottom" @refresherrestore="onRestore">
 		<slot :list="list"></slot>
 		<uni-load-more :status="status" :contentText="contentText"></uni-load-more>

components/MtaTabBar/MtaTabBar.vue

@@ -1,20 +1,20 @@
 <template>
-  <view class="custom-tabbar">
-    <view v-for="(item, index) in tabList" :key="index" @click="switchTab(item)">
-      <image :src="activeIndex === index ? item.selectedIcon : item.icon" />
-      <text :style="{ color: activeIndex === index ? selectedColor : defaultColor }">
-        {{ item.text }}
-      </text>
+  <view class="dljt-footer-box">
+	  <!-- active -->
+    <view class="footer-item" v-for="(item, index) in tabList" :key="index" 
+	@click="switchTab(item)" :class="{active: activeIndex === index}">
+      <icon :class="item.icon"></icon>
+      <text>{{ item.text }}</text>
     </view>
   </view>
 </template>
 
 <script setup>
 	const tabList = [
-		{text: '首页',pagePath: '/pages/index/index', icon: '', selectedIcon: ''},
-		{text: '校园动态',pagePath: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo', icon: '', selectedIcon: ''},
-		{text: '招生就业',pagePath: '/pages/index/index', icon: '', selectedIcon: ''}, 
-		{text: '联系方式',pagePath: '/pages/index/index', icon: '', selectedIcon: ''}
+		{text: '首页',pagePath: '/pages/index/index', icon: 'sy-cion', selectedIcon: ''},
+		{text: '校园动态',pagePath: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo', icon: 'xydt-cion', selectedIcon: ''},
+		{text: '招生就业',pagePath: '/pages/index/index', icon: 'zsjy-cion', selectedIcon: ''}, 
+		{text: '联系方式',pagePath: '/pages/index/index', icon: 'lxfs-cion', selectedIcon: ''}
 		]
 	const props = defineProps({
 		activeIndex: {

pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo.vue

@@ -1,16 +1,37 @@
 <template>
-	<view>
-		<MtaScrollViewVue :refreshFn="getList">
-			<template v-slot="{ list }">
-				<div v-for="item in list" :key="item.id" @click="handleClick(item)">
-					<image :src="item.cover"></image>
-					<br>
-					{{formatDateToYearMonthDay(item.createTime)}}
-					<br>
-					{{item.title}}
-				</div>
-			</template>
-		</MtaScrollViewVue>
+	<view class="dljt-page-box">
+		<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-active"></view>
+				</view>
+			
+				<MtaScrollViewVue :refreshFn="getList">
+					<template v-slot="{ list }">
+						<view class="list-item-box" v-for="item in list" :key="item.id" @click="handleClick(item)">
+							<img class="list-img" :src="item.cover"/>
+							<view class="list-time-box" >
+							  <view class="time-data">{{formatDateToYearMonthDay(item.createTime)[1]}}</view>
+							  <view class="time-year">{{formatDateToYearMonthDay(item.createTime)[0]}}</view>
+							</view>
+							<view class="list-right-box">
+							  <view class="list-name">{{item.title}}</view>
+							  <view class="list-line"></view>
+							  <view class="list-content" v-html="getStringByHtml3(item.content)"> </view>
+							</view>
+						</view>
+					</template>
+				</MtaScrollViewVue>
+			</view>
+		</view>
+		
+		<!-- 底部导航 -->
+		<MtaFooter></MtaFooter>
+		<MtaTabBar></MtaTabBar>
 	</view>
 </template>
 
@@ -25,6 +46,8 @@
 	import * as httpApi from "@/api/common.js"
 	import MtaScrollViewVue from "@/components/MtaScrollView/MtaScrollView.vue";
 	import {formatDateToYearMonthDay}from"@/utils/common.js"
+	import MtaFooter from "@/components/MtaFooter.vue"
+	import MtaTabBar from "@/components/MtaTabBar/MtaTabBar.vue";
 	
 	const data = reactive({
 		list: '',

pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="lli-index-page">
+	<view class="dljt-index-page">
 
 		<MtaNavbar></MtaNavbar>
 
@@ -47,9 +47,9 @@
 		</view>
 
     <MtaFooter></MtaFooter>
-		
-		<!-- 底部导航 -->
-		<MtaTabBarVue></MtaTabBarVue>
+	
+	<!-- 底部导航 -->
+	<MtaTabBar></MtaTabBar>
 
 
 	</view>
@@ -66,7 +66,7 @@
 	import * as httpApi from "@/api/common.js"
 	import MtaNavbar from "@/components/MtaNavbar/MtaNavbar.vue";
 	import listTwoVue from "@/components/MtaCard/listTwo.vue";
-	import MtaTabBarVue from "@/components/MtaTabBar/MtaTabBar.vue";
+	import MtaTabBar from "@/components/MtaTabBar/MtaTabBar.vue";
   import MtaFooter from "@/components/MtaFooter.vue"