第一次上传

.svn/pristine/0b/0be39eefbfcc2bd1d59c1540a550be4c693589ad.svn-base

@@ -0,0 +1,105 @@
+<template>
+	<view style="padding: 20rpx;">
+		<up-search placeholder="搜索相关内容..." :showAction='false' v-model="search"></up-search>
+		
+		<view class=""  style=" margin: 25rpx 0; display: flex; align-items: center;  justify-content: space-between;" >
+			<view @click="changetab(index)" v-for="(item,index) in tag" :key="index"  :class="{active:index!=currentIndex,actived:index==currentIndex}" class="tag" style=" padding: 14rpx 36rpx; border-radius: 46rpx; " >
+				{{item}}
+			</view>
+		</view>
+	</view>
+	<view class=""  style="padding: 30rpx 20rpx;  border-bottom: 1rpx solid #e2e2e2;  border-top: 1rpx solid #e2e2e2; " >
+		<view class="" style="font-weight: 600;  font-size: 32rpx;" >
+			精品推荐
+		</view>
+		<view class=""   @click="Service.GoPage('/pages/article/news')" style="margin-top: 20rpx; position: relative; ">
+			<image :src="Service.GetMateUrlByImg('/static/dele/dele1.jpg')"  mode="aspectFill" style=" border-radius: 20rpx; width: 100%;  height: 350rpx;" alt="" />
+			<view class="" style="position: absolute; left: 20rpx; bottom: 50rpx; color: #fff; " >
+				<view class="" style="font-size: 34rpx;" >
+					城市漫步：寻找完美咖啡馆
+				</view>
+				<view class="" style=" margin: 15rpx 0; font-size: 26rpx;" >
+					探索城市中隐藏的咖啡珍宝，感受不同的咖啡文化
+				</view>
+				<view class="" style="font-size: 22rpx; display: flex; align-items: center;" >
+					<img :src="Service.GetIconImg('/static/article/time.png')" style="width: 24rpx; height: 24rpx;" alt="" />
+					<text style="margin-left: 10rpx;" >2小时前</text>
+				</view>
+			</view>
+		</view>
+	</view>
+	
+	
+	<view class="" style="padding: 20rpx;  border-bottom: 1rpx solid #e2e2e2;" >
+		<view class=""   @click="Service.GoPage('/pages/article/news')" style="display: flex; margin-top: 20rpx; border-radius: 20rpx; " >
+			<image :src="Service.GetMateUrlByImg('/static/dele/dele1.jpg')" mode="aspectFill"  style=" border-radius: 20rpx; width: 190rpx;  height: 150rpx;" alt="" />
+			<view class="" style=" flex: 1; margin-left: 20rpx; display: flex; flex-direction: column;  justify-content: space-between; " >
+				<view class="" style=" "  >
+					<view class="" style="font-weight: 700; font-size: 32rpx; overflow: hidden;  white-space: nowrap; text-overflow: ellipsis;" >
+						老北京炸酱面
+					</view>
+				</view>
+				<view class="" style=" margin: 8rpx 0; color: #666666; font-size: 26rpx;  overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; " >
+					老北京炸酱面是北京市传统小吃，属北京菜系，在京津冀地区广为流传。该菜品以面条为主料，搭配炸酱与时令菜码拌制而成，核心酱料选用肥瘦相间的五花肉丁，配以干黄酱和甜面酱混合炒制，经慢火熬煮形成深褐色酱料
+				</view>
+				<view class="" style=" display: flex; align-items: center; " >
+					<img :src="Service.GetIconImg('/static/article/date.png')" style="width: 24rpx; height: 24rpx;" alt="" />
+					<text style="color: #666666; margin-left: 10rpx; font-size: 26rpx;" >2026-10-15</text>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+	<up-loadmore :status="status" />
+</template>
+
+<script setup lang="ts">
+	import { onShow, onLoad } from "@dcloudio/uni-app";
+	import { ref } from "vue";
+	import { Service } from "@/Service/Service"
+	
+	let search = ref()
+	let status=ref('nomore')
+	let currentIndex=ref(0)
+	let tag=ref([
+		'全部',
+		'热门',
+		'推荐',
+		'最近'
+	])
+	
+	onLoad(() => {
+
+	});
+
+	onShow(() => {
+
+	});
+	
+	const changetab=(e:number)=>{
+		currentIndex.value=e
+	}
+	
+</script>
+
+<style lang="scss">
+	
+	.active{
+		background-color: #F3F4F6;
+		color: #4B5563;
+	}
+	.actived{
+		background-color: #FF6B35;
+		color: #fff;
+	}
+	
+	.tag{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: fit-content;
+		font-size: 28rpx;
+		margin-left: 10rpx;
+	}
+	
+</style>