105 lines
3.8 KiB
Plaintext
105 lines
3.8 KiB
Plaintext
<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> |