94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<script setup>
|
|
import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
|
|
// import mySwiper from "@/components/mySwiper.vue"
|
|
import {ref,onMounted,nextTick} from "vue"
|
|
import {useStore} from '@/store/index.js'
|
|
import api from "@/api/index.js"
|
|
// 生命周期
|
|
onPullDownRefresh(()=> { // 下拉刷新
|
|
|
|
})
|
|
onReachBottom(() => { // 上滑触底
|
|
|
|
})
|
|
// 变量
|
|
const list = ref([
|
|
{
|
|
id:1,
|
|
cover_img:'https://gwjxb.oss-cn-chengdu.aliyuncs.com/logo.png',
|
|
title:'金秋相逢 共叙合作',
|
|
reading_num:100,
|
|
content:`
|
|
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
|
春发其华，秋收其实。
|
|
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
|
`
|
|
},
|
|
{
|
|
id:2,
|
|
cover_img:'https://ms.bdimg.com/pacific/0/pic/1083217647_-478899572.png?x=0&y=0&h=340&w=510&vh=340.00&vw=510.00&oh=340.00&ow=510.00',
|
|
title:'金秋相逢 共叙合作',
|
|
reading_num:100,
|
|
content:`
|
|
新华社北京10月18日电 金秋时节，北京再迎盛会：第三届“一带一路”国际合作高峰论坛隆重举行。
|
|
春发其华，秋收其实。
|
|
共建“一带一路”走过了第一个蓬勃十年，正值风华正茂，务当昂扬奋进，奔向下一个金色十年！
|
|
`
|
|
}
|
|
])
|
|
// 方法
|
|
function toDetail(item) {
|
|
let info = encodeURIComponent(JSON.stringify(item))
|
|
// console.log(info)
|
|
uni.navigateTo({
|
|
url:"/pages/wikipedia/detail?info="+info+"&id="+item.id
|
|
})
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="starBox page-box page-bg-gray">
|
|
<view class="list-box">
|
|
<view class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
|
|
<view class="lb-left">
|
|
<image :src="item.cover_img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="lb-right">
|
|
<view class="lb-title">{{item.title}}</view>
|
|
<view class="lb-content text-ellipsis-1 small-text">{{item.content}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.starBox{
|
|
|
|
}
|
|
.starBox{
|
|
.list-box{
|
|
.lb-card{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border-bottom: 2rpx solid #eaeaea;
|
|
.lb-left{
|
|
image{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.lb-right{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.lb-title{
|
|
font-weight: 900;
|
|
font-size:32rpx ;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |