Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main

This commit is contained in:
liuyalei 2023-12-07 15:25:36 +08:00
commit 6632dfb181
9 changed files with 559 additions and 2 deletions

View File

@ -14,7 +14,7 @@ import { useRoute, useRouter } from 'vue-router'
// const route = useRoute() // const route = useRoute()
// let routePath = ref(route.path) // let routePath = ref(route.path)
const router = useRouter() const router = useRouter()
let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}]) let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
let selctdeNum = ref(0) let selctdeNum = ref(0)
let clickNum = (num,path) => { let clickNum = (num,path) => {

BIN
src/assets/cc3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/eye.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 826 B

BIN
src/assets/list.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 239 B

BIN
src/assets/xia.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,112 @@
<template>
<div class="list-1">
<div class="top">
<strong :class="[newData.title.length < 40 ? 'yesDevelop' : 'noDevelop']"
>{{ newData.title
}}<a
href="javascript:;"
v-if="newData.title.length > 40"
@click="quanwen"
>全文</a
></strong
>
</div>
<div class="bottom-1">
<div class="left">{{ newData.createdAt }}</div>
<div class="right">
<img src="@/assets/eye.png" alt="" />{{ newData.eye }}
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps } from "vue";
const props = defineProps(["newData"]);
const quanwen = () => {
console.log("全文");
};
</script>
<style lang='scss' scoped>
.list-1 {
padding-left: 16px;
padding-right: 16px;
.top {
display: flex;
justify-content: space-between;
margin-left: 6px;
.noDevelop {
display: inline-block;
width: 343px;
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 {
display: inline-block;
width: 343px;
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;
font-family: PingFang SC, PingFang SC;
}
}
.bottom-1 {
display: flex;
justify-content: space-between;
margin-left: 6px;
margin-top: 9px;
font-size: 12px;
color: #999999;
.left {
align-items: center;
}
.right {
display: flex;
align-items: center;
img {
width: 12px;
height: 12px;
margin-right: 4px;
}
}
}
}
</style>

View File

@ -0,0 +1,129 @@
<template>
<div class="list-1">
<div class="left">
<strong :class="[newData.title.length < 26 ? 'yesDevelop' : 'noDevelop']"
>{{ newData.title
}}<a
href="javascript:;"
v-if="newData.title.length > 26"
@click="quanwen"
>
全文</a
></strong
>
<div class="bottom-1">
<div class="left">{{ newData.createdAt }}</div>
<div class="right">
<img src="@/assets/eye.png" alt="" />{{ newData.eye }}
</div>
</div>
</div>
<div class="right">
<img src="@/assets/cc3.png" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps(["newData"]);
const quanwen = () => {
console.log("全文");
};
</script>
<style lang='scss' scoped>
.list-1 {
display: flex;
min-height: 70px;
justify-content: space-around;
padding-left: 12px;
padding-right: 12px;
.left {
width: 230px;
min-height: 100%;
display: flex;
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 {
display: inline-block;
width: 231px;
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;
}
.bottom-1 {
display: flex;
justify-content: space-between;
// margin-left: 6px;
margin-top: 9px;
font-size: 12px;
color: #999999;
.left {
// align-items: center;
}
.right {
display: flex;
align-items: center;
img {
width: 12px;
height: 12px;
margin-right: 4px;
}
}
}
}
.right {
width: 94px;
img {
width: 100px;
height: 72px;
border-radius: 6px;
}
}
}
</style>

View File

@ -40,7 +40,15 @@ const router = createRouter({
// this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import('../views/test1.vue') component: () => import('../views/test1.vue')
} },
{
path: '/znyt',
name: 'znyt',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/znyt.vue')
},
] ]
}) })

308
src/views/znyt.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<div class="body">
<div class="top">
<div class="content" v-for="(item, index) in topContent" :key="index">
<div class="biaoqian">{{ item.biaoqian }}</div>
<div class="title">
{{ item.content }}
</div>
<div class="time">
<div class="left">{{ item.time }}</div>
<div class="right">
<img src="@/assets/eye.png" alt="" />
<div>{{ item.eye }}</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="main-t">
<div class="main-title">
<div
class="main-list"
:class="[chooseId == item.id ? 'a' : '']"
v-for="(item, index) in mainList"
:key="index"
@click="choose(item.id)"
>
<div :class="[chooseId == item.id ? 'a' : '']">
{{ item.title }}
</div>
<img
src="@/assets/xia.png"
alt=""
style="width: 48px; height: 5px; margin-bottom: 10px"
v-if="chooseId == item.id"
/>
</div>
</div>
<img src="@/assets/list.png" alt="" />
</div>
<div class="list">
<div class="list-item">
<div v-for="(data, index) in records.list" :key="data.id">
<listNoImg v-if="data.display == 0" :newData="data" />
<listRightImg v-if="data.display == 1" :newData="data" />
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import listRightImg from "@/components/list-right-img.vue";
import listNoImg from "@/components/list-no-img.vue";
const topContent = reactive([
{
content: "2024年养老金发放政策工龄30年内统一发放3200元可行吗",
time: "11月27日",
eye: "8888",
biaoqian: "热门话题",
},
{
content: "2024年养老金发放政策工龄30年内统一发放3200元可行吗",
time: "11月27日",
eye: "8888",
biaoqian: "政策资源",
},
{
content: "2024年养老金发放政策工龄30年内统一发放3200元可行吗",
time: "11月27日",
eye: "8888",
biaoqian: "政策资源",
},
]);
const mainList = reactive([
{
id: 1,
title: "老有康养",
},
{
id: 2,
title: "老有康养",
},
{
id: 3,
title: "老有康养",
},
{
id: 4,
title: "老有康养",
},
{
id: 5,
title: "老有康养",
},
{
id: 6,
title: "老有康养",
},
{
id: 7,
title: "老有康养",
},
]);
const chooseId = ref("1");
const choose = (id) => {
chooseId.value = id;
// console.log()
};
const records = reactive({
list: [
{
id: 1,
display: 0,
title: "2023年养老金政策震撼发布你的养老金将发生这样的变化",
createdAt: "11月27日",
eye: "8888",
},
{
id: 1,
display: 1,
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
createdAt: "11月27日",
eye: "8888",
},
{
id: 1,
display: 0,
title: "2023年养老金政策震撼发布你的养老金将发生这样的变化",
createdAt: "11月27日",
eye: "8888",
},
{
id: 1,
display: 1,
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
createdAt: "11月27日",
eye: "8888",
},
{
id: 1,
display: 0,
title: "2023年养老金政策震撼发布你的养老金将发生这样的变化",
createdAt: "11月27日",
eye: "8888",
},
{
id: 1,
display: 1,
title: "“三问”个人养老金:是什么、怎么缴、如何领?",
createdAt: "11月27日",
eye: "8888",
},
],
});
</script>
<style lang="scss" scoped>
.body {
box-sizing: border-box;
// width: 100%;
// height: 100%;
// border: 1px solid red;
.top {
width: 100vw;
padding: 16px 0px 16px 16px;
overflow-x: auto;
display: flex;
.content {
position: relative;
width: 300px;
height: 144px;
background: #ffffff;
box-shadow: 0px 2px 12px 0px #ebeef3;
border-radius: 10px 10px 10px 10px;
opacity: 1;
// display: flex;
flex-shrink: 0;
// margin: 16px 16px 16px 16px;
margin-right: 12px;
padding-left: 16px;
padding-right: 16px;
// &:last-child {
// margin-right: 16px;
// }
.biaoqian {
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 24px;
background: #457aff;
opacity: 1;
border-radius: 10px 0px 10px 0px;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 12px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.title {
margin-top: 44px;
width: 268px;
height: 48px;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 24px;
// white-space: nowrap;
overflow: hidden;
// text-overflow: ellipsis;
}
.time {
margin-top: 24px;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #999999;
display: flex;
align-items: center;
justify-content: space-between;
.right {
display: flex;
align-items: center;
img {
width: 12px;
height: 12px;
margin-right: 4px;
}
}
}
}
}
.main {
box-sizing: border-box;
// border: 1px solid red;
// padding: 16px;
padding-top: 0;
// overflow: hidden;
background-color: #ffffff;
height: 68vh;
.main-t {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 16px;
padding-right: 16px;
.main-title {
width: 85vw;
height: 50px;
overflow-y: auto;
display: flex;
// border: 1px solid red;
align-items: center;
.main-list {
flex-shrink: 0;
min-width: 56px;
height: 14px;
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 14px;
margin-right: 22px;
// text-align: center;
}
}
img {
width: 16px;
height: 16px;
}
}
.list {
// box-sizing: border-box;
width: 100vw;
height: 59vh;
overflow: auto;
// border: 1px solid yellow;
}
}
}
.a {
width: 72px !important;
font-size: 18px !important;
font-family: PingFang SC, PingFang SC;
font-weight: 600 !important;
color: #333333 !important;
line-height: 16px !important;
}
::-webkit-scrollbar {
display: none;
}
.line {
width: 100%;
height: 0px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 1px solid #f1f1f1;
margin-top: 16px;
margin-bottom: 16px;
}
</style>