This commit is contained in:
parent
d79a732b0d
commit
06607684a2
|
@ -39,42 +39,6 @@ const quanwen = () => {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.noDevelop {
|
|
||||||
display: inline-block;
|
|
||||||
width: 231px;
|
|
||||||
height: 44px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 22px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
width: 35px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
color: #87ceeb;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noDevelop::after {
|
|
||||||
content: "...";
|
|
||||||
width: 16px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 35px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.yesDevelop {
|
.yesDevelop {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
// width: 231px;
|
// width: 231px;
|
||||||
|
@ -106,6 +70,7 @@ const quanwen = () => {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,7 +39,13 @@
|
||||||
<img src="@/assets/list.png" alt="" />
|
<img src="@/assets/list.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="list-item">
|
<van-pull-refresh v-model="loadingSx" @refresh="onRefresh">
|
||||||
|
<van-list
|
||||||
|
v-model:loading="loadings"
|
||||||
|
:finished="finished"
|
||||||
|
finished-text="没有更多了"
|
||||||
|
@load="onLoad"
|
||||||
|
>
|
||||||
<div v-for="(data, index) in records.list" :key="data.id">
|
<div v-for="(data, index) in records.list" :key="data.id">
|
||||||
<listNoImg v-if="data.display == 0" :newData="data" />
|
<listNoImg v-if="data.display == 0" :newData="data" />
|
||||||
<listRightImg v-if="data.display == 1" :newData="data" />
|
<listRightImg v-if="data.display == 1" :newData="data" />
|
||||||
|
@ -47,17 +53,22 @@
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</van-list>
|
||||||
|
</van-pull-refresh>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive } from "vue";
|
import { ref, reactive, onMounted } from "vue";
|
||||||
import listRightImg from "@/components/list-right-img.vue";
|
import listRightImg from "@/components/list-right-img.vue";
|
||||||
import listNoImg from "@/components/list-no-img.vue";
|
import listNoImg from "@/components/list-no-img.vue";
|
||||||
import j1 from "../assets/cc4.png";
|
import j1 from "../assets/cc4.png";
|
||||||
import j2 from "../assets/cc3.png";
|
import j2 from "../assets/cc3.png";
|
||||||
|
import { showSuccessToast } from "vant";
|
||||||
|
const loadingSx = ref(false);
|
||||||
|
const loadings = ref(false);
|
||||||
|
const finished = ref(false);
|
||||||
const topContent = reactive([
|
const topContent = reactive([
|
||||||
{
|
{
|
||||||
content: "2024年养老金发放政策:工龄30年内统一发放3200元,可行吗?",
|
content: "2024年养老金发放政策:工龄30年内统一发放3200元,可行吗?",
|
||||||
|
@ -99,7 +110,74 @@ const mainList = reactive([
|
||||||
const chooseId = ref("1");
|
const chooseId = ref("1");
|
||||||
const choose = (id) => {
|
const choose = (id) => {
|
||||||
chooseId.value = id;
|
chooseId.value = id;
|
||||||
|
scolltop();
|
||||||
// console.log()
|
// console.log()
|
||||||
|
records.list = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
display: 1,
|
||||||
|
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j1,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
display: 1,
|
||||||
|
title: "100场社区活动——教你轻松玩转智能手机",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j2,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
display: 1,
|
||||||
|
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j1,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
display: 1,
|
||||||
|
title: "100场社区活动——教你轻松玩转智能手机",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j2,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
display: 1,
|
||||||
|
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j1,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
display: 1,
|
||||||
|
title: "100场社区活动——教你轻松玩转智能手机",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j2,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
display: 1,
|
||||||
|
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j1,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
display: 1,
|
||||||
|
title: "100场社区活动——教你轻松玩转智能手机",
|
||||||
|
createdAt: "11月27日",
|
||||||
|
imgUrl: j2,
|
||||||
|
eye: "8888",
|
||||||
|
},
|
||||||
|
];
|
||||||
};
|
};
|
||||||
const records = reactive({
|
const records = reactive({
|
||||||
list: [
|
list: [
|
||||||
|
@ -143,6 +221,33 @@ const records = reactive({
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
const onRefresh = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
showSuccessToast("刷新成功");
|
||||||
|
loadingSx.value = false;
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
const onLoad = () => {
|
||||||
|
// 异步更新数据
|
||||||
|
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
|
||||||
|
setTimeout(() => {
|
||||||
|
// 加载状态结束
|
||||||
|
loadings.value = false;
|
||||||
|
// 数据全部加载完成
|
||||||
|
finished.value = true;
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
const scolltop = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
let list = document.getElementsByClassName("list");
|
||||||
|
if (list) {
|
||||||
|
list.scrollTop = 0; // 滚动高度
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
// showToast("666")
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.body {
|
.body {
|
||||||
|
|
Loading…
Reference in New Issue