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

This commit is contained in:
liuyalei 2023-12-08 09:28:01 +08:00
commit 3c53d5f6f0
3 changed files with 281 additions and 77 deletions

BIN
src/assets/yy.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/yy1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -39,9 +39,9 @@
<div <div
class="main-list" class="main-list"
:class="[chooseId == item.id ? 'numa' : '']" :class="[chooseId == item.id ? 'numa' : '']"
v-for="(item, index) in mainList" v-for="(item, index) in data.mainList"
:key="index" :key="index"
@click="choose(item.id)" @click="choose(item.id, item.title)"
> >
<div :class="[chooseId == item.id ? 'numa' : '']"> <div :class="[chooseId == item.id ? 'numa' : '']">
{{ item.title }} {{ item.title }}
@ -58,16 +58,16 @@
</div> </div>
<div class="titles"> <div class="titles">
<span <span
v-for="(item, index) in mainLists" v-for="(item, index) in data.mainLists"
:key="item" :key="item"
class="tabtitle" class="tabtitle"
:class="[cNum == item.id ? 'tabtitles' : '']" :class="[cNum == item.id ? 'tabtitles' : '']"
@click="clickFun(item.id)" @click="clickFun(item.id, item.title)"
>{{ item.title }}</span >{{ item.title }}</span
> >
</div> </div>
<div class="list"> <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="line">
<div class="linetop"> <div class="linetop">
<img :src="data.imgurl" alt="" /> <img :src="data.imgurl" alt="" />
@ -104,6 +104,8 @@ import b1 from "../../assets/dzdp1.png";
import b2 from "../../assets/dzdp2.png"; import b2 from "../../assets/dzdp2.png";
import f1 from "../../assets/pf.png"; import f1 from "../../assets/pf.png";
import f2 from "../../assets/pf1.png"; import f2 from "../../assets/pf1.png";
import y1 from "../../assets/yy.png";
import y2 from "../../assets/yy1.png";
let bd_data = reactive([ let bd_data = reactive([
{ name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" }, { name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
@ -118,15 +120,15 @@ const mainList = reactive([
}, },
{ {
id: 2, id: 2,
title: "老有康养", title: "幼有善育",
}, },
{ {
id: 3, id: 3,
title: "老有康养", title: "学有优教",
}, },
{ {
id: 4, id: 4,
title: "老有康养", title: "劳有所得",
}, },
{ {
id: 5, id: 5,
@ -191,84 +193,282 @@ const records = reactive({
rate: "职业学校", rate: "职业学校",
comment: "老师非常耐心,课程也很丰富!", 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([ const data = reactive({
mainList: [
{ {
name: "老有康养", id: 1,
lists: [ title: "老有康养",
},
{ {
name: "老年学校", id: 2,
lists: [ 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, imgurl: b2,
name: "象山老年大学", title: "象山老年大学",
address: "宁波市象山县广场路39号", address: "宁波市象山县广场路39号",
Scoring: 4, Scoring: 4,
rate: "职业学校", rate: "职业学校",
comment: "老师非常耐心,课程也很丰富!", comment: "老师非常耐心,课程也很丰富!",
}, },
],
},
{
name: "养老服务中心",
lists: [
{ {
id: 2,
imgurl: b2, imgurl: b2,
name: "象山老年大学", title: "象山老年大学",
address: "宁波市象山县广场路39号", address: "宁波市象山县广场路39号",
Scoring: 3, Scoring: 1,
rate: "职业学校", rate: "职业学校",
comment: "老师非常耐心,课程也很丰富!", 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: "幼有善育", // name: "",
lists: [ // lists: [
{ // {
name: "老年学校", // imgurl: b2,
lists: [ // name: "",
{ // address: "广39",
imgurl: b2, // Scoring: 4,
name: "象山老年大学", // rate: "",
address: "宁波市象山县广场路39号", // comment: "",
Scoring: 4, // },
rate: "职业学校", // ],
comment: "老师非常耐心,课程也很丰富!", // },
}, // {
], // name: "",
}, // lists: [
{ // {
name: "养老服务中心", // imgurl: b2,
lists: [ // name: "",
{ // address: "广39",
imgurl: b2, // Scoring: 3,
name: "象山老年大学", // rate: "",
address: "宁波市象山县广场路39号", // comment: "",
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) => { const bdDetails = (name) => {
alert(name); alert(name);
// router.push(path) // router.push(path)
}; };
const bdName = ref("老有康养"); const bdName = ref("老有康养");
const cNum = ref(1); const cNum = ref(1);
const clickFun = (index) => { const clickFun = (index, name) => {
console.log(index, name);
cNum.value = index; cNum.value = index;
}; };
const chooseId = ref("1"); const chooseId = ref("1");
const choose = (id) => { const choose = (index, name) => {
chooseId.value = id; 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> </script>
@ -446,12 +646,16 @@ const choose = (id) => {
} }
} }
.list { .list {
height: 150px; // height: 30vh;
// border: 1px solid red;
height: calc(100vh - 422px);
width: 355px; width: 355px;
box-sizing: border-box; box-sizing: border-box;
overflow-x: auto; /* 允许横向滚动 */
white-space: nowrap; /* 防止换行 */
.line { .line {
margin-bottom: 20px; margin-bottom: 20px;
width: 345px; width: 355px;
height: 132px; height: 132px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 2px 12px 0px #ebeef3; box-shadow: 0px 2px 12px 0px #ebeef3;