diff --git a/App.vue b/App.vue
index 21d46f4..bd6c253 100644
--- a/App.vue
+++ b/App.vue
@@ -33,4 +33,70 @@
 /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 @import "uview-plus/index.scss";
 @import '@/static/scss/index.scss';
+.mainContainer {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		/* 底部安全区 */
+		// padding-bottom: env(safe-area-inset-bottom);
+		box-sizing: border-box;
+	}
+	
+	image {
+		width: 100%;
+		height: auto;
+	}
+	
+	/* Flex布局 */
+	
+	.flex{
+		display: flex;
+	}
+	.flexOne{
+		flex: 1;
+	}
+	.flexColumn{
+		flex-direction: column;
+	}
+	.wrap{
+		flex-wrap: wrap;
+	}
+	.noWrap{
+		flex-wrap: nowrap;
+	}
+	.alignCenter{
+		align-items: center;
+	}
+	.justifyCenter{
+		justify-content: center;
+	}
+	.alignBetween{
+		align-content: space-between;
+	}
+	.justifyBetween{
+		justify-content: space-between;
+	}	
+	.alignStart{
+		align-items: flex-start;
+	}
+	.justifyStart{
+		justify-content: flex-start;
+	}
+	.alignEnd{
+		align-items: flex-end;
+	}
+	.justifyEnd{
+		justify-content: flex-end;
+	}
+	.justifyAround{
+		justify-content: space-around;
+	}
+	
+	
+	
+	.qu{
+		width: 24rpx;
+		height: 24rpx;
+	}
 </style>
diff --git a/config.js b/config.js
index a49d627..247c2da 100644
--- a/config.js
+++ b/config.js
@@ -1,8 +1,10 @@
 // 应用全局配置
 export default {
  // baseUrl: 'https://vue.ruoyi.vip/prod-api',
-   baseUrl: 'http://47.93.242.168:8080',
-  // baseUrl: 'http://localhost:8080',
+  // baseUrl: 'http://47.93.242.168:8080',
+   // baseUrl: 'http://localhost:8080',
+   baseUrl: 'http://192.168.123.81:8080',
+   // baseUrl: 'http://47.93.242.168:8080',
   // 应用信息
   appInfo: {
     // 应用名称
diff --git a/pages.json b/pages.json
index 9c9d2aa..a5ded61 100644
--- a/pages.json
+++ b/pages.json
@@ -8,6 +8,15 @@
 			}
 		},
   "pages": [{
+    "path": "pages/index",
+    "style": {
+      "navigationBarTitleText": "若依移动端框架",
+      "navigationStyle": "custom",
+	  "navigationBarTextStyle": "white"
+    }
+  }
+  ,
+	  {
     "path": "pages/loginInfo/login",
     "style": {
       "navigationBarTitleText": "登录"
@@ -19,13 +28,6 @@
       "navigationBarTitleText": "注册"
     }
   }, {
-    "path": "pages/index",
-    "style": {
-      "navigationBarTitleText": "若依移动端框架",
-      "navigationStyle": "custom"
-    }
-  }
-  , {
     "path": "pages/work/index",
     "style": {
       "navigationBarTitleText": "工作台"
@@ -90,9 +92,9 @@
   }, {
     "path": "pages/search/index",
     "style": {
-      
+
 			"navigationStyle": "custom" ,
-			"navigationBarTextStyle": "white" 
+			"navigationBarTextStyle": "white"
     }
   }],
   "tabBar": {
diff --git a/pages/index.vue b/pages/index.vue
index 87fccbb..78f594c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,963 +1,561 @@
 <template>
-	<view style="background: linear-gradient(-90deg, #f8f8e2, #c9f6f5);">
-		<view class="">
-
-		</view>
-		<view class="top-plus">
-			<!-- 顶部导航栏 -->
-<!-- 			<u-navbar
-							leftText=""
-							:fixed="false"
-							title=""
-							:safeAreaInsetTop="false"
-						>
-							<view
-								class="u-nav-slot"
-								slot="left"
-							>
-								<u-icon
-									name="arrow-left"
-									size="19"
-								></u-icon>
-								<u-line
-									direction="column"
-									:hairline="false"
-									length="16"
-									margin="0 8px"
-								></u-line>
-								<u-icon
-									name="home"
-									size="20"
-								></u-icon>
-							</view>
-						</u-navbar> -->
-
-			<view class="top">
-				<view class="top-left">
-					<view class="" style="margin-right: 27rpx;">
-						<image style="width: 41rpx;height: 46rpx;" src="../static/images/icon/icon_register.png"
-							mode=""></image>
-					</view>
-					<view class="">
-						<image @click="postOpen = !postOpen" style="width: 41rpx;height: 46rpx;"
-							src="../static/images/icon/icon_motion2.png" mode=""></image>
-					</view>
-				</view>
-
-				<view class="top-center">
-					<up-tabs :current="viewIndex" :list="list1" lineColor="#B3D7FF" lineWidth="50" lineHeight="8"
-						@click="click" :activeStyle="{
-							color: '#303133',
-							fontWeight: 'bold',
-							transform: 'none',
-							fontSize: '40rpx',
-							width: '81rpx',
-							height: '41rpx',
-							margin: ' 0 35rpx 24rpx 35rpx',
-						}" :inactiveStyle="{
-							color: '#606266',
-							transform: 'none',
-							fontSize: '36rpx',
-							width: '72rpx;',
-							height: '36rpx',
-							margin: ' 0 35rpx 24rpx 35rpx',
-
-						}" itemStyle="font-size: 40rpx;  "></up-tabs>
-				</view>
-				<view class="top-right">
-
-				</view>
-			</view>
-
-			<!-- 搜索栏 -->
-			<view>
-				<view class="search">
-					<view style="width: 538rpx; position: relative;">
-						<u-search @click.stop="toSearch()" disabled="true" height="62rpx" v-model="keyword"
-							:show-action="false" borderColor="#B3D7FF" bgColor="#ffffff20" searchIconSize="35"
-							:inputStyle="{
-							fontSize: '28rpx',
-							fontHeight: '28rpx',
-							marginLeft: '18rpx',
-
-						}"></u-search>
-						<view class="scan">
-							<u-icon color="#C0C3C0" name="scan" size="32" @click="toScan()"></u-icon>
-						</view>
-					</view>
-					<view style="display: flex; padding-right: 3rpx;" @click="searchOpen = !searchOpen">
-						<text style="
-						font-weight: 400;font-size: 30rpx; width: 60rpx;
-						color: #1B1B1B 100%;">{{ postsousuotype }}</text>
-						<u-icon :name="searchOpen ? 'arrow-up-fill' : 'arrow-down-fill'" size="26"></u-icon>
-					</view>
-
-				</view>
-			</view>
-		</view>
-		<!-- +tanchuang -->
-		<view class="modal" v-if="postOpen">
-			<text style="margin-bottom: 15rpx;">发布话题</text>
-			<text>发布活动</text>
-		</view>
-		<!-- 热门弹出层 -->
-		<up-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
-			<view style="height: 77vh; position: relative;">
-				<view class="popup-close">
-					<u-icon color="#CDCDCD" size="28" name="close-circle"></u-icon>
-				</view>
-				<view class="pop-title">
-					全部类目
+	<view class="content">
+		<!-- 顶部导航栏 -->
+		<!-- <u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor">
+		    <view class="img1BOX flex alignCenter" slot="left">
+				<image src="../static/images/icon/tu2-4.png" class="img1"></image>
+				<image src="../static/images/icon/tu2-5.png" class="img2"></image>
+				<view class="qiehuanBox flex alignCenter justifyCenter">
+					<u-tabs lineColor="#B3D7FF" lineWidth="50rpx" lineHeight="8rpx" 
+					:activeStyle="{ fontWeight: '600rpx',fontSize:'40rpx',color: '#000000'}" 
+					:inactiveStyle="{fontWeight: '400rpx',fontSize:'36rpx',color: '#999999'}"
+					:list="list1" @click="click"></u-tabs>
 				</view>
+		    </view>
+		</u-navbar> -->
+		<up-navbar
+		leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true"  :bgColor="bgColor"
+		        >
 				<view class="">
-					<text style="font-size: 26rpx; color: #A3A3A3;">点击选择类目，仅可选择一个</text>
-
-					<view style="width: 100rpx; height: 100rpx; border:1px soldi #c9f6f5">
-
-					</view>
-
+					<text>1</text>
+					<image src="../static/images/icon/tu2-4.png" class="img1"></image>
+					<image src="../static/images/icon/tu2-5.png" class="img2"></image>
 				</view>
+				
+		        </up-navbar>
+		<view class="bgc"></view>
+		<!-- 搜索栏 -->
+		<view class="sousuoBox1 flex alignCenter justifyBetween">
+			<view class="sousuoBox flex alignCenter justifyBetween">
+				<view class="souBOx flex alignCenter" @click="toEarch">
+					<image src="../static/images/icon/tu2-2.png" class="img3"></image>
+					<view class="shuruText">在食堂捡到一张饭卡</view>
+				</view>
+				<image src="../static/images/icon/tu2-3.png" class="img4"></image>
 			</view>
-		</up-popup>
-		<swiper class="page-center" style="height: 70vh;" :current=viewIndex @change="swiperChange">
-			<swiper-item>
-				<!-- 中间内容 -->
-				<view class="page-center">
-					<!-- 关注 -->
-					<view style="padding-top: 40rpx;">
-						<view style="padding-left: 32rpx; padding-bottom: 27rpx;">
-							<up-text bold="true" size="33rpx" color="#000" text="我关注的人"></up-text>
-						</view>
-						<up-scroll-list :indicator="false">
-							<view v-for="(item, index) in avatatlist" :key="index" class="container">
-								<!-- <image :src="item.thumb"></image> -->
-								<div class="item">
-									<div class="avatar-container">
-										<up-avatar :src="item" size="120rpx"></up-avatar>
-
-									</div>
-									<div class="text-container">
-										<up-text size="26rpx" text="爱吃饭的小张" align="center"></up-text>
-									</div>
-								</div>
-							</view>
-						</up-scroll-list>
-						<view class="page-line"></view>
-					</view>
-					<!-- 话题投稿列表 -->
-					<view class="post-item">
-						<view class="post-list-item">
-							<view @click.stop="toUser('跳转到用户个人空间')">
-								<view style="position: relative;">
-									<up-avatar :src="src" size="84rpx"></up-avatar>
-									<view v-if="userType == 1" class="red-v">
-										<img style="width: 30rpx; height: 30rpx;"
-											src="../static/images/icon/appRedV.png" alt="" />
-									</view>
-								</view>
-							</view>
-							<view class="center">
-								<view class="post-top-box">
-									<view class="uname">
-										<!-- <text v-if="userType == 1" class="official">官方</text> -->
-										<text class="username">{{ username.substring(0, 10) }}</text>
-									</view>
-									<view class="">
-										<text v-if="postTop > 0" class="officials">置顶</text>
-										<text v-if="poststatus == 1" class="officials">审核中</text>
-										<text v-if="poststatus == 2" class="officials">已下架</text>
-									</view>
-									<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
-										<up-text class="officials" bold="true" size="15" color="#3478FC"
-											text="关注"></up-text>
-									</view>
-								</view>
-								<view
-									style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
-									<text class="time">{{ createTime }}</text>·<text class="time">{{ postaddress }}</text>
-								</view>
-							</view>
-						</view>
-						<view class="post-content">
-							<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
-							<view style="height: 8px;"></view>
-							<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
-							<view style="height: 8px;"></view>
-							<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
-							<block v-if="posttype == 1">
-								<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
-								<!--一张图片-->
-								<block v-if="urls2.length == 1">
-									<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
-										@tap.stop="previewImage(urls2[0], urls2)"></image>
-								</block>
-								<!--二张图片-->
-								<block v-if="urls2.length == 2">
-									<view class="img-style-2">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-								<!--三张图片-->
-								<block v-if="urls2.length == 3">
-									<view class="img-style-3">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-								<!--四张图片-->
-								<block v-if="urls2.length == 4">
-									<view class="img-style-4">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-							</block>
-						</view>
-						<!-- 标签 -->
-						<view v-if="posttab" style="margin-top: 18rpx;">
-							<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
-							<!-- <text>{{ posttab }}</text> -->
-							<view style="display: flex;">
-								<text
-									style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
-									v-for="(tabItem, index2) in posttab" :key="index2" :text="'#' + tabItem">{{ '#' +
-							tabItem }}</text>
-							</view>
-						</view>
-						<!-- 底部 -->
-						<view class="post-list-bottom">
-							<view class="p-item" style="width: 36%;">
-								<!-- <text class="iconfont icon-quanzi"></text> -->
-								<!-- <u-icon name="share" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png"
-									mode=""></image>
-								<text class="count">{{ readCount }}</text>
-							</view>
-							<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
-								<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png"
-									mode=""></image>
-								<text class="count">{{ likeCount }}</text>
-							</view>
-							<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
-								<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png"
-									mode=""></image>
-								<text class="count">{{ likeCount }}</text>
-							</view>
-							<view class="p-item margin50">
-								<!-- <text class="iconfont icon-pinglun"></text> -->
-								<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png"
-									mode=""></image>
-								<text class="count">{{ commentCount }}</text>
-							</view>
-							<view class="p-item margin50">
-								<!-- <text class="iconfont icon-pinglun"></text> -->
-								<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
-									<!-- <u-icon name="star" size="40rpx"></u-icon> -->
-									<image style="width: 40rpx;height: 40rpx;"
-										src="../static/images/icon/icon_onFavorite.png" mode=""></image>
-								</view>
-								<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
-									<image style="width: 40rpx;height: 40rpx;"
-										src="../static/images/icon/icon_noFavorite.png" mode=""></image>
-								</view>
-								<text class="count">{{ favoriteCount }}</text>
-							</view>
-						</view>
-						<u-line></u-line>
+			<view class="category-dropdown flex alignCenter">
+			    <text class="text1 flex alignCenter">热门</text>
+			    <image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
+			</view>
+		</view>
+		<view class="center-content">
+			<!-- 关注 -->
+			<view class="" v-if="viewIndex == 0">
+				<view class="center-content-focus">
+					<text class="center-content-focus-text">我关注的人</text>
+					<view class="center-content-focus-list">
+					    <u-scroll-list :indicator='false'>
+					        <view class="flex  alignCenter justifyBetween">
+					            <view class="center-content-focus-item" v-for="(item, index) in focusList" :key="index">
+					                <u-avatar class="center-content-focus-item-avatat" size="120rpx" :src="item.avatar"></u-avatar>
+					                <text class="center-content-focus-item-text">{{item.uname}}</text>
+					            </view>
+					        </view>	
+					    </u-scroll-list>
 					</view>
 				</view>
-
-
-			</swiper-item>
-			<swiper-item>
-				<!-- 中间内容 -->
-				<view class="page-center">
-					<!-- 话题投稿列表 -->
-					<view class="post-item">
-						<view class="post-list-item">
-							<view @click.stop="toUser('跳转到用户个人空间')">
-								<view style="position: relative;">
-									<up-avatar :src="src" size="84rpx"></up-avatar>
-									<view v-if="userType == 1" class="red-v">
-										<img style="width: 30rpx; height: 30rpx;"
-											src="../static/images/icon/appRedV.png" alt="" />
-									</view>
-								</view>
-							</view>
-							<view class="center">
-								<view class="post-top-box">
-									<view class="uname">
-										<!-- <text v-if="userType == 1" class="official">官方</text> -->
-										<text class="username">{{ username.substring(0, 10) }}</text>
-									</view>
-									<view class="">
-										<text v-if="postTop > 0" class="officials">置顶</text>
-										<text v-if="poststatus == 1" class="officials">审核中</text>
-										<text v-if="poststatus == 2" class="officials">已下架</text>
-									</view>
-									<view style="padding-top: 34rpx; padding-right: 10rpx;" v-if="viewIndex == 1">
-										<up-text class="officials" bold="true" size="15" color="#3478FC"
-											text="关注"></up-text>
-									</view>
-								</view>
-								<view
-									style="margin-left: 19rpx; padding-bottom: 15rpx; font-size: 26rpx; color: #999999">
-									<text class="time">{{ createTime }}</text>·<text class="time">{{ postaddress }}</text>
-								</view>
-							</view>
-						</view>
-						<view class="post-content">
-							<up-text v-if="posttitle" :text="posttitle" bold="true" size="16" lines="2"></up-text>
-							<view style="height: 8px;"></view>
-							<up-text :text="postcontent" size="15" color="#424242" lineHeight="21" lines="2"></up-text>
-							<view style="height: 8px;"></view>
-							<!-- <rich-text class="post-text" :nodes="postcontent"></rich-text> -->
-							<block v-if="posttype == 1">
-								<!-- <up-album :urls="urls2" multipleSize="95" space="3" style="width: 100%"></up-album> -->
-								<!--一张图片-->
-								<block v-if="urls2.length == 1">
-									<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="urls2[0]"
-										@tap.stop="previewImage(urls2[0], urls2)"></image>
-								</block>
-								<!--二张图片-->
-								<block v-if="urls2.length == 2">
-									<view class="img-style-2">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-								<!--三张图片-->
-								<block v-if="urls2.length == 3">
-									<view class="img-style-3">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-								<!--四张图片-->
-								<block v-if="urls2.length == 4">
-									<view class="img-style-4">
-										<image :lazy-load="true" v-for="(mediaItem, index2) in urls2" :key="index2"
-											@tap.stop="previewImage(mediaItem, urls2)" mode="aspectFill"
-											:src="mediaItem">
-										</image>
-									</view>
-								</block>
-							</block>
-						</view>
-						<!-- 标签 -->
-						<view v-if="posttab" style="margin-top: 18rpx;">
-							<!-- <u-icon class="icon" name="map-fill"></u-icon> -->
-							<!-- <text>{{ posttab }}</text> -->
-							<view style="display: flex;">
-								<text
-									style="color: #3477FC; margin-left: 2%; font-size: 24rpx; font-weight: 600; background-color: #F7F8FA; border-radius: 4px; padding: 3px;"
-									v-for="(tabItem, index2) in posttab" :key="index2" :text="'#' + tabItem">{{ '#' +
-							tabItem }}</text>
-							</view>
-						</view>
-						<!-- 底部 -->
-						<view class="post-list-bottom">
-							<view class="p-item" style="width: 36%;">
-								<!-- <text class="iconfont icon-quanzi"></text> -->
-								<!-- <u-icon name="share" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_forward.png"
-									mode=""></image>
-								<text class="count">{{ readCount }}</text>
-							</view>
-							<view v-if="isLike" class="p-item" @click.stop="cancelCollection('取消点赞')">
-								<!-- <u-icon name="heart-fill" size="40rpx" color="#cc0000"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_onLike.png"
-									mode=""></image>
-								<text class="count">{{ likeCount }}</text>
-							</view>
-							<view v-if="!isLike" class="p-item" @click.stop="addCollection('点赞')">
-								<!-- <u-icon name="heart" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_noLike.png"
-									mode=""></image>
-								<text class="count">{{ likeCount }}</text>
-							</view>
-							<view class="p-item margin50">
-								<!-- <text class="iconfont icon-pinglun"></text> -->
-								<!-- <u-icon name="chat" size="40rpx"></u-icon> -->
-								<image style="width: 40rpx;height: 40rpx;" src="../static/images/icon/icon_remark.png"
-									mode=""></image>
-								<text class="count">{{ commentCount }}</text>
-							</view>
-							<view class="p-item margin50">
-								<!-- <text class="iconfont icon-pinglun"></text> -->
-								<view class="" v-if="!isFavorite" @click.stop="cancelFavorite('取消收藏')">
-									<!-- <u-icon name="star" size="40rpx"></u-icon> -->
-									<image style="width: 40rpx;height: 40rpx;"
-										src="../static/images/icon/icon_onFavorite.png" mode=""></image>
-								</view>
-								<view class="" v-if="isFavorite" @click.stop="addFavorite('收藏')">
-									<image style="width: 40rpx;height: 40rpx;"
-										src="../static/images/icon/icon_noFavorite.png" mode=""></image>
-								</view>
-								<text class="count">{{ favoriteCount }}</text>
-							</view>
-						</view>
-						<u-line></u-line>
+				<view class="center-content-focus-line"></view>
+			</view>
+			
+			<!-- 话题 -->
+			<view class="center-content-post" v-for="(item, index) in postList" :key="index">
+				<!-- <view class="center-content-post-head flex alignCenter justifyBetween">
+					<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
+					<view class="center-content-post-head-title">
+						<text class="center-content-post-head-title-uname">{{item.uname}}</text>
+						<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
 					</view>
+					<text v-if="item.isFocus">关注</text>
+					<text>已关注</text>
+				</view> -->
+				
+				<view class="center-content-post-padding">
+					<view class="center-content-post-head">
+					    <!-- 左对齐 -->
+					    <view class="flex alignCenter">
+					        <u-avatar size="84rpx" :src="item.avatar"></u-avatar>
+					        <view class="center-content-post-head-title">
+					            <text class="center-content-post-head-title-uname">{{item.uname}}</text>
+					            <text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
+					        </view>
+					    </view>
+					    <!-- 右对齐 -->
+					    <view class="flex alignCenter">
+					        <text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
+					        <text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
+					    </view>
+					</view>
+					<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
+					<text class="center-content-post-content">{{item.content}}</text>
+					<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
+					<!-- tab -->
+					<view class="center-content-post-tab" style="display: flex;">
+						<text
+							class="center-content-post-tab-text"
+							v-for="(tabItem, index2) in item.tab" :key="index2"
+							:text="'#' + tabItem">{{'#' + tabItem}}</text>
+					</view>
+					<view class="post-list-bottom" style="display: flex; justify-content: space-between;">
+					    <!-- 靠左对齐 -->
+						<view class="">
+							<view class="p-item">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu2-9.png" mode=""></image>
+							    <text class="count">{{ item.transmitCount }}</text>
+							</view>
+						</view>
+					    <!-- 靠右对齐 -->
+						<view class="flex alignCenter">
+							<view v-if="item.isLike" class="p-item" @click.stop="cancelCollection(index)">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-8.png" mode=""></image>
+							    <text class="count">{{ item.likeCount }}</text>
+							</view>
+											
+							<!-- 靠右对齐 -->
+							<view v-if="!item.isLike" class="p-item" @click.stop="addCollection(index)">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-7.png" mode=""></image>
+							    <text class="count">{{ item.likeCount }}</text>
+							</view>
+											
+							<!-- 靠右对齐 -->
+							<view class="p-item margin50">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-3.png" mode=""></image>
+							    <text class="count">{{ item.commentCount }}</text>
+							</view>
+											
+							<!-- 靠右对齐 -->
+							<view class="p-item margin50" v-if="item.ifFavorite" @click.stop="cancelFavorite(index)">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-2.png" mode=""></image>
+							    <text class="count">{{ item.favoriteCount }}</text>
+							</view>
+											
+							<!-- 靠右对齐 -->
+							<view class="p-item margin50" v-if="!item.ifFavorite" @click.stop="addFavorite(index)">
+							    <image style="width: 40rpx; height: 40rpx;" src="../static/images/icon/tu3-1.png" mode=""></image>
+							    <text class="count">{{ item.favoriteCount }}</text>
+							</view>
+						</view>
+					    
+					
+					</view>
+					
 				</view>
+				
 
+				<u-line></u-line>
+			</view>
+		</view>
 
-			</swiper-item>
-		</swiper>
 	</view>
 </template>
 
-<script setup>
-import {
-	ref,
-	reactive,
-	toRefs,
-	getCurrentInstance
-} from 'vue';
-import storage from '@/utils/storage'
+<script>
+	export default {
+		data() {
+			return {
+				viewIndex: 0,
+				bgColor: 'rgba(170, 0, 0, 0)',
+				list1: [{
+					name: '关注',
+				}, {
+					name: '推荐',
+				}],
+				focusList: [{
+					avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+					uname: '爱吃饭的小张'
+				},{
+					avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
+					uname: '喜欢你没道理'
+				},{
+					avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
+					uname: '恋爱60秒'
+				},{
+					avatar: 'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
+					uname: '爱吃饭的小张'
+				}],
+				postList: [{
+					avatar: 'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
+					uname: '爱吃饭的小张',
+					createTime: '11分钟前',
+					address: '南开大学',
+					isFocus: false,
+					title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+					content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
+					type: '1',
+					media: [
+						'https://tu.sioe.cn/gj/qiege/image.jpg',
+						'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
+						'https://tu.sioe.cn/gj/qiege/image.jpg',
+					],
+					tab: [
+						'学术讨论组',
+						'校园风景'
+					],
+					transmitCount: 136,
+					isLike: true,
+					likeCount: 999,
+					commentCount: 136,
+					ifFavorite: true,
+					favoriteCount: 136
+				},{
+					avatar: 'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
+					uname: '喜欢你没道理',
+					createTime: '2024-5-5',
+					address: '南开大学',
+					isFocus: false,
+					// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
+					content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
+					type: '1',
+					media: [
+						'https://tu.sioe.cn/gj/qiege/image.jpg',
+					],
+					tab: [
+						'校园风景'
+					],
+					transmitCount: 13,
+					isLike: false,
+					likeCount: 99,
+					commentCount: 13,
+					ifFavorite: true,
+					favoriteCount: 13
+				}]
+			}
+		},
+		onLoad() {
 
-import {
-	listPost,
-	getPost,
-	delPost,
-	addPost,
-	updatePost
-} from "@/api/talk/post";
-
-// 创建响应式数据
-const list1 = reactive([{
-	name: '关注'
-},
-{
-	name: '推荐'
-}
-]);
-const viewIndex = ref(1)
-// 定义方法
-function click(item) {
-	console.log('item', item);
-	viewIndex.value = item.index
-}
-
-const postList = ref([]);
-const loading = ref(true);
-const total = ref(0);
-const data = reactive({
-	form: {},
-	queryParams: {
-		pageNum: 1,
-		pageSize: 10,
-		uid: null,
-		topicId: null,
-		discussId: null,
-		voteId: null,
-		title: null,
-		content: null,
-		media: null,
-		readCount: null,
-		transmitCount: null,
-		likeCount: null,
-		commentCount: null,
-		postTop: null,
-		type: null,
-		address: null,
-		longitude: null,
-		latitude: null,
-		createTime: null,
-		auditor: null,
-		status: null,
-		auditTime: null,
-		auditAdvice: null,
-		cut: null,
-		anonymity: null
-	},
-	rules: {}
-});
-
-const {
-	queryParams,
-	form,
-	rules
-} = toRefs(data);
-
-/** 查询话题投稿列表 */
-function getList() {
-	loading.value = true;
-	queryParams.value.params = {};
-	// if (null != daterangeCreateTime && '' != daterangeCreateTime) {
-	//   queryParams.value.params["beginCreateTime"] = daterangeCreateTime.value[0];
-	//   queryParams.value.params["endCreateTime"] = daterangeCreateTime.value[1];
-	// }
-	// if (null != daterangeAuditTime && '' != daterangeAuditTime) {
-	//   queryParams.value.params["beginAuditTime"] = daterangeAuditTime.value[0];
-	//   queryParams.value.params["endAuditTime"] = daterangeAuditTime.value[1];
-	// }
-	listPost(queryParams.value).then(response => {
-		postList.value = response.rows;
-		total.value = response.total;
-		loading.value = false;
-		console.log('话题列表', postList.value)
-	});
-}
-
-function toScan() {
-	console.log('扫码')
-}
-const { proxy } = getCurrentInstance();
-function toSearch() {
-	console.log('跳转到搜索页面')
-	proxy.$tab.navigateTo('/pages/search/index')
-	// prs.$tab.navigateTo('/pages/search/index')
-	// uni.navigateTo()
-}
-
-const src = ref('https://photo.16pic.com/00/53/26/16pic_5326745_b.jpg');
-const userType = ref(1)
-const username = ref('若依')
-const postTop = ref(0)
-const poststatus = ref(0)
-const createTime = ref('2024.5.4')
-const posttitle = ref('我用十年青春,赴你最后之约')
-const postcontent = ref(
-	'一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了若依管理系统，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。'
-)
-const posttype = ref(1)
-const albumWidth = ref(100)
-const urls2 = ref([
-	'https://tu.sioe.cn/gj/qiege/image.jpg',
-	'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
-	'https://tu.sioe.cn/gj/qiege/image.jpg',
-	// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
-	// 'https://tu.sioe.cn/gj/qiege/image.jpg',
-	// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
-	// 'https://tu.sioe.cn/gj/qiege/image.jpg',
-	// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
-	// 'https://tu.sioe.cn/gj/qiege/image.jpg',
-	// 'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
-]);
-const avatatlist = ref([
-	'https://k.sinaimg.cn/n/sports/transform/400/w600h600/20220130/dd38-eed53ba750d1d8c87eca8b57eda879a5.jpg/w700d1q75cms.jpg?by=cms_fixed_width',
-	'https://oss.1381801.com/forum/202308/11/093616ccxkx99wchwrrw1a.jpg',
-	'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
-	'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSL00n5sQd_z0VdifIaNlK1dLILmcdSwVJk-OnEA1eiig&s',
-	'https://www.tboxn.com/wp-content/uploads/2022/11/%E5%A4%B4%E5%83%8F.png',
-])
-const postaddress = ref('天津电子信息职业技术学院')
-// const postaddress = ref()
-const isLike = ref(false)
-const isFavorite = ref(false)
-const readCount = ref(123)
-const likeCount = ref(233)
-const commentCount = ref(12)
-const favoriteCount = ref(15)
-const posttab = ref(['校园丢失', '学术'])
-const keyword = ref('')
-const postsousuotype = ref('热门')
-const searchOpen = ref(false)
-const postOpen = ref(false)
-
-function addCollection() {
-	console.log('点赞')
-	isLike.value = !isLike.value
-}
-function cancelCollection() {
-	console.log('点赞')
-	isLike.value = !isLike.value
-}
-
-function addFavorite() {
-	console.log('点赞')
-	isFavorite.value = !isFavorite.value
-}
-function swiperChange(item) {
-	console.log(item)
-	viewIndex.value = item.detail.current
-}
-function cancelFavorite() {
-	console.log('点赞')
-	isFavorite.value = !isFavorite.value
-}
-
-getList();
+		},
+		methods: {
+			toEarch() {
+				console.log()
+				this.$tab.navigateTo('/pages/search/index')
+			},
+			rightClick() {
+				console.log('rightClick');
+			},
+			leftClick() {
+				console.log('leftClick');
+			},
+			click(item) {
+			    console.log('item', item);
+				this.viewIndex = item.index;
+			},
+			cancelCollection(index) {
+				console.log(111,index)
+				this.postList[index].likeCount -= 1;
+				this.postList[index].isLike = !this.postList[index].isLike;
+			},
+			addCollection(index) {
+				console.log(111,index)
+				this.postList[index].likeCount += 1;
+				this.postList[index].isLike = !this.postList[index].isLike;
+			},
+			cancelFavorite(index) {
+				console.log(111,index)
+				this.postList[index].favoriteCount -= 1;
+				this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
+			},
+			addFavorite(index) {
+				console.log(111,index)
+				this.postList[index].favoriteCount += 1;
+				this.postList[index].ifFavorite = !this.postList[index].ifFavorite;
+			},
+			cancelFocus(index) {
+				console.log(111,index)
+				this.postList[index].isFocus = !this.postList[index].isFocus;
+			}
+			,
+			addFocus(index) {
+				console.log(111,index)
+				this.postList[index].isFocus = !this.postList[index].isFocus;
+			}
+		}
+	}
 </script>
 
-<style lang="scss" scoped>
-.top-plus {
-	// padding: 10px 0px;
-	padding-bottom: 38rpx;
-}
-
-// .top {
-// 	// height: 230rpx;
-// 	padding-top: 90rpx;
-// 	padding-bottom: 20rpx;
-// 	display: grid;
-// 	// justify-content: space-between;
-// 	grid-template-columns: 1fr 1fr 1fr 6fr;
-// 	align-items: center;
-// }
-
-.top {
-	padding-top: 88rpx;
-	padding-bottom: 20rpx;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	position: relative;
-	height: 180rpx;
-}
-
-.top-left {
-	height: 290rpx;
-	position: absolute;
-	display: flex;
-	/* 使用 flex 布局 */
-	align-items: center;
-	/* 垂直居中 */
-	justify-content: center;
-	left: 32rpx;
-}
-
-.top-center {
-	width: 100%;
-	height: 88rpx;
-	display: flex;
-	/* 使用 flex 布局 */
-	align-items: center;
-	/* 垂直居中 */
-	justify-content: center;
-}
-
-.top-right {
-	display: flex;
-	/* 使用 flex 布局 */
-	align-items: center;
-	/* 垂直居中 */
-}
-
-
-// @media screen and (max-width:414px) {
-// 	.top {
-// 		padding-top: 40rpx;
-// 		padding-bottom: 20rpx;
-// 		// grid-template-columns: 1fr 1fr 3fr 2fr;
-// 		grid-template-columns: 1fr 1fr 1fr 6fr 2fr;
-// 	}
-// }
-
-.modal {
-	display: flex;
-	flex-direction: column;
-	position: absolute;
-	align-items: center;
-	top: 55rpx;
-	width: 250rpx;
-	// height: 50rpx;
-	left: -70rpx;
-	z-index: 100;
-	background-color: #FFFFFF;
-	padding: 20rpx 35rpx;
-	border-radius: 20rpx;
-	color: #CCF6F5;
-	border: 2px solid transparent;
-	/* 设置元素的边框 */
-	box-shadow: 0 0 0 2px #B5D7FF;
-	/* 添加描边效果 */
-}
-
-.search {
-	display: flex;
-	justify-content: space-evenly;
-	align-items: center;
-
-	.scan {
-		position: absolute;
-		top: 14rpx;
-		right: 32rpx;
-		z-index: 101;
+<style>
+	.content {
+		position: relative;
 	}
-}
-
-
-
-.page-center {
-	background: #fff;
-	// margin-bottom: 20rpx;
-	// padding-top: 40rpx;
-	border-radius: 40rpx 40rpx 0 0;
-}
-
-.page-line {
-	width: 100%;
-	height: 16rpx;
-	background: #E5E5E5;
-	// box-shadow: 0 0 0 1.96rpx #852C30;
-}
-
-.container {
-	// margin-bottom: 22rpx;
-	margin-left: 12rpx;
-}
-
-.item {
-	display: flex;
-	flex-direction: column;
-	/* 让元素垂直排列 */
-	margin: 0rpx 13rpx;
-}
-
-.avatar-container {
-	align-self: center;
-	/* 让头像水平居中 */
-}
-
-.text-container {
-	text-align: center;
-	/* 让文本水平居中 */
-	margin-top: 16rpx;
-	/* 调整头像和文本之间的间距 */
-	width: 160rpx;
-}
-
-.red-v {
-	position: absolute;
-	display: block;
-	/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
-	bottom: -10rpx;
-	/* 从父元素顶部偏移50像素 */
-	right: 5rpx;
-	/* 从父元素左侧偏移20像素 */
-}
-
-
-
-.post-item {
-	padding: 20rpx;
-
-	.post-content {
-		margin-top: 20rpx;
-
-		.img-style-1 {
-			display: block;
-			width: 100%;
-			height: 600rpx;
-			border-radius: 5px;
-			overflow: hidden;
-			border-radius: 20rpx;
-
-		}
-
-		.img-style-2 {
-			display: flex;
-
-			image {
-				margin: 5rpx;
-
-				width: 100%;
-				height: 305rpx;
-				border-radius: 20rpx;
-			}
-		}
-
-		.img-style-3 {
-			display: flex;
-			flex-wrap: wrap;
-
-			image {
-				width: 31.3%;
-				height: 200rpx;
-				margin: 0.6%;
-				border-radius: 20rpx;
-
-			}
-		}
-
-		.img-style-4 {
-			display: flex;
-			flex-wrap: wrap;
-
-			image {
-				width: 48%;
-				height: 320rpx;
-				margin: 0.5%;
-				border-radius: 20rpx;
-
-			}
-		}
-
+	.u-scroll-list.data-v-fea2b4f4 {
+		padding-bottom: 0px !important;
 	}
-
-	.address {
-		display: flex;
-		font-size: 20rpx;
-		background-color: #F5F5F5;
-		border-radius: 20rpx;
-		display: inline-block;
-		padding: 5rpx 20rpx;
-		margin: 20rpx 0;
-
-		.icon {
-			margin-right: 5rpx;
-		}
+	.u-tabs__wrapper__nav__line[data-v-0de61367]{
+		position: absolute !important;
+		bottom: 0rpx !important;
 	}
-}
-
-.post-top-box {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 80rpx;
-}
-
-.uname {
-	display: flex;
-	align-items: center;
-	margin-left: 19rpx;
-	// padding-bottom: 1rpx;
-}
-
-.post-list-item {
-	display: flex;
-	align-items: center;
-
-	.avatar {
-		width: 85rpx;
-		height: 85rpx;
-		border-radius: 50%;
-		margin-right: 20rpx;
+	/* .u-navbar__content[data-v-75dad532] {
+	    display: flex;
+	    flex-direction: row;
+	    align-items: center;
+	    height: 44px;
+	    background-color: linear-gradient(90deg, rgba(170, 0, 0, 1.0) 100%, rgba(255, 255, 255, 0) 100%) !important;
+	    position: relative;
+	    justify-content: center;
+	} */
+	.img1{
+		width: 41rpx;
+		height: 46rpx;
+		margin-right: 28rpx;
 	}
-
-	.center {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		font-size: 24rpx;
-		color: #999;
-
-		.username {
-			font-size: 30rpx;
-			font-weight: 600;
-			color: #000000;
-		}
-
-		.official {
-			display: inline-block;
-			width: 65rpx;
-			height: 35rpx;
-			font-size: 20rpx;
-			font-weight: bold;
-			text-align: center;
-			line-height: 35rpx;
-			color: #ffffff;
-			background-color: #000000;
-
-			border-radius: 30rpx;
-			margin-right: 10rpx;
-		}
-
-		.officials {
-			display: inline-block;
-			font-size: 25rpx;
-			color: #ffffff;
-			background-color: #c0392b;
-			padding: 2rpx 8rpx;
-			border-radius: 10rpx;
-			margin-left: 30rpx;
-		}
+	.img1BOX{
+		width:698rpx;
 	}
-
-	.right {
-		height: 85rpx;
-
-		.arrow-down {
-			color: #999;
-		}
+	.img2{
+		width: 46rpx;
+		height: 46rpx;
 	}
-}
-
-.post-text {
-	display: block;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 10;
-	white-space: pre-wrap;
-	overflow: hidden;
-}
-
-.post-list-bottom {
-	display: flex;
-	margin: 20rpx 0;
-	margin-top: 28rpx;
+	.qiehuanBox{
+		margin-left: 130rpx;
+	}
+	.bgc{
+		width: 750rpx;
+		height: 356rpx;
+		background: linear-gradient(90deg, rgb(201, 246, 245), rgb(248, 248, 226));
+		position: fixed;
+		top: 0rpx;
+		left: 0rpx;
+		z-index: -1;
+	}
+	.sousuoBox1{
+		margin: 16rpx 32rpx;
+		width: auto;
+	}
+	.sousuoBox{
+		width: 538rpx;
+		height: 60rpx;
+		border: #B3D7FF solid 2rpx;
+		border-radius: 30rpx 30rpx 30rpx 30rpx;
+		background: #ffffff80;
+	}
+	.souBOx{
+		margin-left: 32rpx;
+	}
+	.img3{
+		width: 35rpx;
+		height: 35rpx;
+	}
+	.img4{
+		width: 32rpx;
+		height: 32rpx;
+		margin-right: 32rpx;
+	}
+	.category-dropdown {
+		margin-left: 42rpx;
+	}
+	.text1{
+		font-weight: 400;
+		width: 60rpx;
+		height: 31rpx;
+		font-size: 30rpx;
+		text-align: left;
+		color: #1B1B1B 100%;
+		margin-right: 8rpx;
+	}
+	.img5{
+		width: 26rpx;
+		height: 16rpx;
+	}
+	.shuruText{
+		font-weight: 400;
+		font-size: 28rpx;
+		text-align: left;
+		color: #999999;
+		margin-left: 18rpx;
+	}
+	.center-content{
+		/* width: 750rpx; */
+		/* height: 2592rpx; */
+		border-radius: 64rpx 64rpx 0 0;
+		background: #ffffff;
+		margin-top: 40rpx;
+	}
+	.center-content-focus{
+		padding: 50rpx 0;
+	}
+	.center-content-focus-text{
+		font-weight: 400;
+		width: 174rpx;
+		height: 35rpx;
+		font-size: 34rpx;
+		text-align: left;
+		color: #000000;
+		display: block;
+		/* padding-top: 52rpx; */
+		margin-left: 32rpx;
+		margin-bottom: 30rpx;
+	}
+	.center-content-focus-list {
+		margin-left: 32rpx;
+		margin-bottom: 0;
+		padding-bottom: 0px !important;
+	}
+	.u-scroll-list.data-v-e2a26316 {
+	    padding-bottom: 0px !important;
+	}
+	.center-content-focus-item{
+		/* flex-direction: column; */
+		    display: flex;
+		    flex-direction: column;
+		    align-items: center; /* 水平居中对齐 */
+		    text-align: center; /* 文字水平居中对齐 */
+		width: 160rpx;
+		/* height: 160rpx; */
+		margin-right: 44rpx;
+	}
+	.center-content-focus-item-avatat{
+		width: 120rpx !important;
+		height: 120rpx !important;
+		background: #999999 !important;
+		margin-bottom: 16rpx !important;
+	}
+	.center-content-focus-item-text{
+		font-weight: 400;
+		width: 162rpx;
+		height: 28rpx;
+		font-size: 26rpx;
+		text-align: center;
+		color: #999999;
+		margin-top: 16rpx;
+	}
+	.center-content-focus-line{
+		height: 16rpx;
+		background: #e5e5e5;
+	}
+	.center-content-post {
+	}
+	.center-content-post-padding {
+		padding: 46rpx 32rpx;
+	}
+	.center-content-post-head {
+	    display: flex;
+	    justify-content: space-between;
+	}
+	
+	.center-content-post-head-title {
+	    display: flex;
+	    flex-direction: column;
+		margin-left: 20rpx;
+	}
+	
+	.center-content-post-head-title-uname {
+	    font-weight: 400;
+	    font-size: 30rpx;
+	    text-align: left;
+	    color: #000000;
+	    align-self: flex-start; /* 垂直起始对齐 */
+		margin-bottom: 20rpx;
+	}
+	
+	.center-content-post-head-title-timeAddress {
+	    font-weight: 400;
+	    font-size: 30rpx;
+	    text-align: left;
+	    color: #999999;
+	    align-self: flex-end; /* 垂直结束对齐 */
+	}
+	.no-focus-text {
+		font-weight: 400;
+		width: 58rpx;
+		height: 29rpx;
+		font-size: 28rpx;
+		text-align: left;
+		color: #3477FC;
+	}
+	.focus-text {
+		font-weight: 400;
+		/* width: 58rpx; */
+		height: 29rpx;
+		font-size: 28rpx;
+		text-align: left;
+		color: #2553b4;
+	}
+	.center-content-post-title{
+		display: block;
+		font-weight: 600;
+		/* width: 670rpx; */
+		height: 80rpx;
+		font-size: 32rpx;
+		text-align: left;
+		color: #000000 100%;
+		margin-top: 30rpx;
+		display: -webkit-box; /* 将文本视为弹性盒子 */
+		    -webkit-line-clamp: 2; /* 设置最大行数 */
+		    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
+		    overflow: hidden; /* 隐藏超出部分 */
+	}
+	.center-content-post-content{
+		display: block;
+		font-weight: 400;
+		/* width: 670rpx; */
+		height: 80rpx;
+		font-size: 32rpx;
+		text-align: left;
+		color: #000000;
+		margin-top: 30rpx;
+		margin-bottom: 34rpx;
+		display: -webkit-box; /* 将文本视为弹性盒子 */
+		    -webkit-line-clamp: 2; /* 设置最大行数 */
+		    -webkit-box-orient: vertical; /* 垂直方向排列文本 */
+		    overflow: hidden; /* 隐藏超出部分 */
+	}
+	
+	.u-album__row[data-v-723ad357] {
+	    justify-content: center !important;
+	}
+	.u-album__row.data-v-723ad357 {
+		justify-content: center !important;
+		/* height: 200rpx !important; */
+	}
+	.data-v-723ad357 {
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+/* 		width: 200rpx !important;
+		height: 200rpx !important; */
+	}
+	
+	.center-content-post-tab{
+		margin-top: 38rpx;
+		margin-bottom: 54rpx;
+	}
+	
 
+	.post-list-bottom {
+	  display: flex;
+	  justify-content: center; /* 水平居中 */
+	}
+	
 	.p-item {
-		margin: 0 auto;
-		color: #616161;
-		display: flex;
-		align-items: center;
+	    display: flex;
+	    align-items: center; /* 垂直居中 */
+	    justify-content: center; /* 水平居中 */
 
-		.count {
-			margin-left: 10rpx;
-			font-size: 28rpx;
-		}
+	}
+	.center-content-post-tab-text{
+		font-weight: 400;
+		/* width: 139rpx; */
+		height: 25rpx;
+		font-size: 24rpx;
+		text-align: left;
+		color: #3477FC;
+		/* width: 130rpx; */
+		height: 44rpx;
+		border-radius: 10rpx 10rpx 10rpx 10rpx;
+		background: #f7f8fa;
+		/* margin-left: 50rpx; */
+	}
+	.center-content-post-tab-text:nth-child(2) {
+	    /* 您的样式 */
+		margin-left: 50rpx; /* 添加额外的左边距 */
+	}
+	
+	.margin50 {
+	  margin-left: 50rpx; /* 添加额外的左边距 */
+	}
+	.count{
+		font-weight: 400;
+		width: 47rpx;
+		/* height: 23rpx; */
+		font-size: 28rpx;
+		text-align: left;
+		color: #787878;
 	}
 
-	.p-item[hidden] {
-		display: none !important;
-	}
-}
-
-.album {
-	@include flex;
-	align-items: flex-start;
-
-	&__avatar {
-		background-color: $u-bg-color;
-		padding: 5px;
-		border-radius: 3px;
-	}
-
-	&__content {
-		margin-left: 10px;
-		flex: 1;
-	}
-}
-
-.u-album__row.data-v-6fcabaad {
-	/* 在这里添加你想要的样式 */
-	width: 100%;
-}
-
-.popup-close {
-	position: absolute;
-	display: block;
-	/* 这一行通常是不必要的，因为元素默认就是块级元素，除非你有特殊需求 */
-	top: 28rpx;
-	/* 从父元素顶部偏移50像素 */
-	left: 30rpx;
-	/* 从父元素左侧偏移20像素 */
-}
-
-.pop-title {
-	padding: 33rpx 0rpx;
-	font-size: 36rpx;
-	font-weight: 500;
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
 </style>
diff --git a/static/images/icon/tu1-1.png b/static/images/icon/tu1-1.png
new file mode 100644
index 0000000..98783a2
Binary files /dev/null and b/static/images/icon/tu1-1.png differ
diff --git a/static/images/icon/tu1-10.png b/static/images/icon/tu1-10.png
new file mode 100644
index 0000000..e8bd419
Binary files /dev/null and b/static/images/icon/tu1-10.png differ
diff --git a/static/images/icon/tu1-2.png b/static/images/icon/tu1-2.png
new file mode 100644
index 0000000..8a6b023
Binary files /dev/null and b/static/images/icon/tu1-2.png differ
diff --git a/static/images/icon/tu1-3.png b/static/images/icon/tu1-3.png
new file mode 100644
index 0000000..cb92c29
Binary files /dev/null and b/static/images/icon/tu1-3.png differ
diff --git a/static/images/icon/tu1-4.png b/static/images/icon/tu1-4.png
new file mode 100644
index 0000000..88d0c19
Binary files /dev/null and b/static/images/icon/tu1-4.png differ
diff --git a/static/images/icon/tu1-5.png b/static/images/icon/tu1-5.png
new file mode 100644
index 0000000..49c2685
Binary files /dev/null and b/static/images/icon/tu1-5.png differ
diff --git a/static/images/icon/tu1-6.png b/static/images/icon/tu1-6.png
new file mode 100644
index 0000000..be8fa4e
Binary files /dev/null and b/static/images/icon/tu1-6.png differ
diff --git a/static/images/icon/tu1-7.png b/static/images/icon/tu1-7.png
new file mode 100644
index 0000000..65b727a
Binary files /dev/null and b/static/images/icon/tu1-7.png differ
diff --git a/static/images/icon/tu1-8.png b/static/images/icon/tu1-8.png
new file mode 100644
index 0000000..bab0412
Binary files /dev/null and b/static/images/icon/tu1-8.png differ
diff --git a/static/images/icon/tu1-9.png b/static/images/icon/tu1-9.png
new file mode 100644
index 0000000..b26c090
Binary files /dev/null and b/static/images/icon/tu1-9.png differ
diff --git a/static/images/icon/tu2-1.png b/static/images/icon/tu2-1.png
new file mode 100644
index 0000000..6e7c2d6
Binary files /dev/null and b/static/images/icon/tu2-1.png differ
diff --git a/static/images/icon/tu2-2.png b/static/images/icon/tu2-2.png
new file mode 100644
index 0000000..bdee9b7
Binary files /dev/null and b/static/images/icon/tu2-2.png differ
diff --git a/static/images/icon/tu2-3.png b/static/images/icon/tu2-3.png
new file mode 100644
index 0000000..63574af
Binary files /dev/null and b/static/images/icon/tu2-3.png differ
diff --git a/static/images/icon/tu2-4.png b/static/images/icon/tu2-4.png
new file mode 100644
index 0000000..e56b6a4
Binary files /dev/null and b/static/images/icon/tu2-4.png differ
diff --git a/static/images/icon/tu2-5.png b/static/images/icon/tu2-5.png
new file mode 100644
index 0000000..9086e0a
Binary files /dev/null and b/static/images/icon/tu2-5.png differ
diff --git a/static/images/icon/tu2-6.png b/static/images/icon/tu2-6.png
new file mode 100644
index 0000000..ef49783
Binary files /dev/null and b/static/images/icon/tu2-6.png differ
diff --git a/static/images/icon/tu2-7.png b/static/images/icon/tu2-7.png
new file mode 100644
index 0000000..571b32e
Binary files /dev/null and b/static/images/icon/tu2-7.png differ
diff --git a/static/images/icon/tu2-8.png b/static/images/icon/tu2-8.png
new file mode 100644
index 0000000..a716d7d
Binary files /dev/null and b/static/images/icon/tu2-8.png differ
diff --git a/static/images/icon/tu2-9.png b/static/images/icon/tu2-9.png
new file mode 100644
index 0000000..ad3284f
Binary files /dev/null and b/static/images/icon/tu2-9.png differ
diff --git a/static/images/icon/tu3-1.png b/static/images/icon/tu3-1.png
new file mode 100644
index 0000000..f7fed16
Binary files /dev/null and b/static/images/icon/tu3-1.png differ
diff --git a/static/images/icon/tu3-2.png b/static/images/icon/tu3-2.png
new file mode 100644
index 0000000..5e0bb82
Binary files /dev/null and b/static/images/icon/tu3-2.png differ
diff --git a/static/images/icon/tu3-3.png b/static/images/icon/tu3-3.png
new file mode 100644
index 0000000..4690195
Binary files /dev/null and b/static/images/icon/tu3-3.png differ
diff --git a/static/images/icon/tu3-4.png b/static/images/icon/tu3-4.png
new file mode 100644
index 0000000..626f351
Binary files /dev/null and b/static/images/icon/tu3-4.png differ
diff --git a/static/images/icon/tu3-5.png b/static/images/icon/tu3-5.png
new file mode 100644
index 0000000..43d00ad
Binary files /dev/null and b/static/images/icon/tu3-5.png differ
diff --git a/static/images/icon/tu3-6.png b/static/images/icon/tu3-6.png
new file mode 100644
index 0000000..d5d9eb4
Binary files /dev/null and b/static/images/icon/tu3-6.png differ
diff --git a/static/images/icon/tu3-7.png b/static/images/icon/tu3-7.png
new file mode 100644
index 0000000..8ac3fcf
Binary files /dev/null and b/static/images/icon/tu3-7.png differ
diff --git a/static/images/icon/tu3-8.png b/static/images/icon/tu3-8.png
new file mode 100644
index 0000000..141a227
Binary files /dev/null and b/static/images/icon/tu3-8.png differ
diff --git a/static/images/icon/tu3-9.jpg b/static/images/icon/tu3-9.jpg
new file mode 100644
index 0000000..e7a8a26
Binary files /dev/null and b/static/images/icon/tu3-9.jpg differ
diff --git a/static/images/icon/tu4-1.jpg b/static/images/icon/tu4-1.jpg
new file mode 100644
index 0000000..743a40e
Binary files /dev/null and b/static/images/icon/tu4-1.jpg differ
diff --git a/static/images/icon/tu4-2.jpg b/static/images/icon/tu4-2.jpg
new file mode 100644
index 0000000..addbdec
Binary files /dev/null and b/static/images/icon/tu4-2.jpg differ
diff --git a/static/images/icon/tu4-3.jpg b/static/images/icon/tu4-3.jpg
new file mode 100644
index 0000000..db4149b
Binary files /dev/null and b/static/images/icon/tu4-3.jpg differ
diff --git a/static/images/icon/tu4-4.jpg b/static/images/icon/tu4-4.jpg
new file mode 100644
index 0000000..568eae7
Binary files /dev/null and b/static/images/icon/tu4-4.jpg differ
diff --git a/static/images/icon/tu4-5.jpg b/static/images/icon/tu4-5.jpg
new file mode 100644
index 0000000..2ffdd75
Binary files /dev/null and b/static/images/icon/tu4-5.jpg differ
diff --git a/static/images/icon/tu4-6.jpg b/static/images/icon/tu4-6.jpg
new file mode 100644
index 0000000..fe17b60
Binary files /dev/null and b/static/images/icon/tu4-6.jpg differ
diff --git a/static/images/icon/tu4-7.jpg b/static/images/icon/tu4-7.jpg
new file mode 100644
index 0000000..d791fe7
Binary files /dev/null and b/static/images/icon/tu4-7.jpg differ
diff --git a/static/images/icon/tu4-8.jpg b/static/images/icon/tu4-8.jpg
new file mode 100644
index 0000000..568eae7
Binary files /dev/null and b/static/images/icon/tu4-8.jpg differ
diff --git a/static/images/icon/tu4-9.png b/static/images/icon/tu4-9.png
new file mode 100644
index 0000000..802e3a2
Binary files /dev/null and b/static/images/icon/tu4-9.png differ