Merge branch 'main' of https://git.zdool.com/xs/yxdt/h5 into main
This commit is contained in:
liuyalei
commit
3c53d5f6f0
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
|
|
@ -39,9 +39,9 @@
|
|||
<div
|
||||
class="main-list"
|
||||
:class="[chooseId == item.id ? 'numa' : '']"
|
||||
v-for="(item, index) in mainList"
|
||||
v-for="(item, index) in data.mainList"
|
||||
:key="index"
|
||||
@click="choose(item.id)"
|
||||
@click="choose(item.id, item.title)"
|
||||
>
|
||||
<div :class="[chooseId == item.id ? 'numa' : '']">
|
||||
{{ item.title }}
|
||||
|
|
@ -58,16 +58,16 @@
|
|||
</div>
|
||||
<div class="titles">
|
||||
<span
|
||||
v-for="(item, index) in mainLists"
|
||||
v-for="(item, index) in data.mainLists"
|
||||
:key="item"
|
||||
class="tabtitle"
|
||||
:class="[cNum == item.id ? 'tabtitles' : '']"
|
||||
@click="clickFun(item.id)"
|
||||
@click="clickFun(item.id, item.title)"
|
||||
>{{ item.title }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div v-for="(data, index) in records.list" :key="data.id">
|
||||
<div v-for="(data, index) in data.list" :key="data.id">
|
||||
<div class="line">
|
||||
<div class="linetop">
|
||||
<img :src="data.imgurl" alt="" />
|
||||
|
|
@ -104,6 +104,8 @@ import b1 from "../../assets/dzdp1.png";
|
|||
import b2 from "../../assets/dzdp2.png";
|
||||
import f1 from "../../assets/pf.png";
|
||||
import f2 from "../../assets/pf1.png";
|
||||
import y1 from "../../assets/yy.png";
|
||||
import y2 from "../../assets/yy1.png";
|
||||
|
||||
let bd_data = reactive([
|
||||
{ name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
|
||||
|
|
@ -118,15 +120,15 @@ const mainList = reactive([
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "老有康养",
|
||||
title: "幼有善育",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "老有康养",
|
||||
title: "学有优教",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "老有康养",
|
||||
title: "劳有所得",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
|
|
@ -191,84 +193,282 @@ const records = reactive({
|
|||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 1,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 1,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
],
|
||||
});
|
||||
const data = reactive([
|
||||
{
|
||||
name: "老有康养",
|
||||
lists: [
|
||||
{
|
||||
name: "老年学校",
|
||||
lists: [
|
||||
{
|
||||
imgurl: b2,
|
||||
name: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 4,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "养老服务中心",
|
||||
lists: [
|
||||
{
|
||||
imgurl: b2,
|
||||
name: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 3,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "幼有善育",
|
||||
lists: [
|
||||
{
|
||||
name: "老年学校",
|
||||
lists: [
|
||||
{
|
||||
imgurl: b2,
|
||||
name: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 4,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "养老服务中心",
|
||||
lists: [
|
||||
{
|
||||
imgurl: b2,
|
||||
name: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 3,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
const data = reactive({
|
||||
mainList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "老有康养",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "幼有善育",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "学有优教",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "劳有所得",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "老有康养",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "老有康养",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "老有康养",
|
||||
},
|
||||
],
|
||||
mainLists: [
|
||||
{
|
||||
id: 1,
|
||||
title: "老年学校",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "养老服务中心",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "养老机构食堂",
|
||||
},
|
||||
// {
|
||||
// id: 4,
|
||||
// title: "老有康养",
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// title: "老有康养",
|
||||
// },
|
||||
// {
|
||||
// id: 6,
|
||||
// title: "老有康养",
|
||||
// },
|
||||
// {
|
||||
// id: 7,
|
||||
// title: "老有康养",
|
||||
// },
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 4,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 1,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// imgurl: b2,
|
||||
// title: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 1,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// imgurl: b2,
|
||||
// title: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 1,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
],
|
||||
// {
|
||||
// name: "老有康养",
|
||||
// lists: [
|
||||
// {
|
||||
// name: "老年学校",
|
||||
// lists: [
|
||||
// {
|
||||
// imgurl: b2,
|
||||
// name: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 4,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: "养老服务中心",
|
||||
// lists: [
|
||||
// {
|
||||
// imgurl: b2,
|
||||
// name: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 3,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: "幼有善育",
|
||||
// lists: [
|
||||
// {
|
||||
// name: "老年学校",
|
||||
// lists: [
|
||||
// {
|
||||
// imgurl: b2,
|
||||
// name: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 4,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: "养老服务中心",
|
||||
// lists: [
|
||||
// {
|
||||
// imgurl: b2,
|
||||
// name: "象山老年大学",
|
||||
// address: "宁波市象山县广场路39号",
|
||||
// Scoring: 3,
|
||||
// rate: "职业学校",
|
||||
// comment: "老师非常耐心，课程也很丰富！",
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
});
|
||||
const bdDetails = (name) => {
|
||||
alert(name);
|
||||
// router.push(path)
|
||||
};
|
||||
const bdName = ref("老有康养");
|
||||
const cNum = ref(1);
|
||||
const clickFun = (index) => {
|
||||
const clickFun = (index, name) => {
|
||||
console.log(index, name);
|
||||
cNum.value = index;
|
||||
};
|
||||
const chooseId = ref("1");
|
||||
const choose = (id) => {
|
||||
chooseId.value = id;
|
||||
const choose = (index, name) => {
|
||||
console.log(index, name);
|
||||
// data.mainLists = [];
|
||||
// data.list = [];
|
||||
switch (name) {
|
||||
case "老有康养":
|
||||
data.mainLists = [
|
||||
{
|
||||
id: 1,
|
||||
title: "老年学校",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "养老服务中心",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "养老机构食堂",
|
||||
},
|
||||
];
|
||||
data.list = [
|
||||
{
|
||||
id: 1,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 4,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgurl: b2,
|
||||
title: "象山老年大学",
|
||||
address: "宁波市象山县广场路39号",
|
||||
Scoring: 1,
|
||||
rate: "职业学校",
|
||||
comment: "老师非常耐心，课程也很丰富！",
|
||||
},
|
||||
];
|
||||
break;
|
||||
case "幼有善育":
|
||||
data.mainLists = [
|
||||
{
|
||||
id: 1,
|
||||
title: "妇幼保健机构",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "托育机构",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "妇女儿童医院",
|
||||
},
|
||||
];
|
||||
data.list = [
|
||||
{
|
||||
id: 1,
|
||||
imgurl: y1,
|
||||
title: "象山妇幼保健院",
|
||||
address: "宁波市象山县城东路1号",
|
||||
Scoring: 4,
|
||||
rate: "妇幼医院",
|
||||
comment: "环境很好，护士都很周到。",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgurl: y2,
|
||||
title: "西周妇幼保健院",
|
||||
address: "宁波市象山县西周镇广场路27号",
|
||||
Scoring: 3,
|
||||
rate: "妇幼医院",
|
||||
comment: "设施很全，医生很有耐心！",
|
||||
},
|
||||
];
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
chooseId.value = index;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -446,12 +646,16 @@ const choose = (id) => {
|
|||
}
|
||||
}
|
||||
.list {
|
||||
height: 150px;
|
||||
// height: 30vh;
|
||||
// border: 1px solid red;
|
||||
height: calc(100vh - 422px);
|
||||
width: 355px;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto; /* 允许横向滚动 */
|
||||
white-space: nowrap; /* 防止换行 */
|
||||
.line {
|
||||
margin-bottom: 20px;
|
||||
width: 345px;
|
||||
width: 355px;
|
||||
height: 132px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 12px 0px #ebeef3;
|
||||
|
|
|
|||
Loading…
Reference in New Issue